From 8d2a3690026eace8e5a2d5c63d1987a958a8a4a5 Mon Sep 17 00:00:00 2001 From: bntnam Date: Sun, 8 Nov 2020 20:58:51 +0700 Subject: [PATCH 1/2] Implemented About social media component --- .../www/site/assets/icons/extensive-icon.svg | 7 + website/www/site/assets/icons/github-icon.svg | 10 ++ .../site/assets/icons/open-source-icon.svg | 12 ++ .../www/site/assets/icons/portable-icon.svg | 8 + .../www/site/assets/icons/twitter-icon.svg | 11 ++ .../www/site/assets/icons/unified-icon.svg | 7 + .../www/site/assets/icons/youtube-icon.svg | 4 + website/www/site/assets/scss/_global.sass | 1 - .../scss/{_pillars.sass => _media.scss} | 31 +--- website/www/site/assets/scss/_pillars.scss | 151 ++++++++++++++++++ website/www/site/assets/scss/_typography.scss | 54 +++++++ website/www/site/assets/scss/_vars.sass | 3 + website/www/site/assets/scss/main.scss | 4 +- website/www/site/data/en/pillars.yaml | 10 +- website/www/site/i18n/home/en.yaml | 2 - website/www/site/i18n/home/pillars/en.yaml | 16 ++ website/www/site/layouts/index.html | 21 ++- website/www/site/layouts/partials/head.html | 2 +- .../partials/pillars/pillars-item.html | 23 +++ .../partials/pillars/pillars-social.html | 39 +++++ 20 files changed, 370 insertions(+), 46 deletions(-) create mode 100644 website/www/site/assets/icons/extensive-icon.svg create mode 100644 website/www/site/assets/icons/github-icon.svg create mode 100644 website/www/site/assets/icons/open-source-icon.svg create mode 100644 website/www/site/assets/icons/portable-icon.svg create mode 100644 website/www/site/assets/icons/twitter-icon.svg create mode 100644 website/www/site/assets/icons/unified-icon.svg create mode 100644 website/www/site/assets/icons/youtube-icon.svg rename website/www/site/assets/scss/{_pillars.sass => _media.scss} (63%) create mode 100644 website/www/site/assets/scss/_pillars.scss create mode 100644 website/www/site/assets/scss/_typography.scss create mode 100644 website/www/site/i18n/home/pillars/en.yaml create mode 100644 website/www/site/layouts/partials/pillars/pillars-item.html create mode 100644 website/www/site/layouts/partials/pillars/pillars-social.html diff --git a/website/www/site/assets/icons/extensive-icon.svg b/website/www/site/assets/icons/extensive-icon.svg new file mode 100644 index 000000000000..e823eba1c71a --- /dev/null +++ b/website/www/site/assets/icons/extensive-icon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/website/www/site/assets/icons/github-icon.svg b/website/www/site/assets/icons/github-icon.svg new file mode 100644 index 000000000000..7236d3cc617f --- /dev/null +++ b/website/www/site/assets/icons/github-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/website/www/site/assets/icons/open-source-icon.svg b/website/www/site/assets/icons/open-source-icon.svg new file mode 100644 index 000000000000..6b944f3643a2 --- /dev/null +++ b/website/www/site/assets/icons/open-source-icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/website/www/site/assets/icons/portable-icon.svg b/website/www/site/assets/icons/portable-icon.svg new file mode 100644 index 000000000000..a203e089271a --- /dev/null +++ b/website/www/site/assets/icons/portable-icon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/website/www/site/assets/icons/twitter-icon.svg b/website/www/site/assets/icons/twitter-icon.svg new file mode 100644 index 000000000000..53587e8ad8a6 --- /dev/null +++ b/website/www/site/assets/icons/twitter-icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/unified-icon.svg b/website/www/site/assets/icons/unified-icon.svg new file mode 100644 index 000000000000..c7751d463e1a --- /dev/null +++ b/website/www/site/assets/icons/unified-icon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/website/www/site/assets/icons/youtube-icon.svg b/website/www/site/assets/icons/youtube-icon.svg new file mode 100644 index 000000000000..d51366ff3764 --- /dev/null +++ b/website/www/site/assets/icons/youtube-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/website/www/site/assets/scss/_global.sass b/website/www/site/assets/scss/_global.sass index db0deb28e9de..a4dd35517e26 100644 --- a/website/www/site/assets/scss/_global.sass +++ b/website/www/site/assets/scss/_global.sass @@ -25,7 +25,6 @@ body .body background: #fff - max-width: 1440px margin: 0 auto padding-top: 130px diff --git a/website/www/site/assets/scss/_pillars.sass b/website/www/site/assets/scss/_media.scss similarity index 63% rename from website/www/site/assets/scss/_pillars.sass rename to website/www/site/assets/scss/_media.scss index 220e7ce8c6a0..b1146a520163 100644 --- a/website/www/site/assets/scss/_pillars.sass +++ b/website/www/site/assets/scss/_media.scss @@ -14,30 +14,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - -.pillars - margin: $pad-xl 0 - text-align: center - - .pillars__title - +type-h2 - margin-bottom: $pad - - .pillars__cols - +type-body - +md - display: flex - justify-content: center - - .pillars__cols__col - .pillars__cols__col__title - font-weight: 600 - margin-bottom: $pad/2 - - .pillars__cols__col__body - max-width: 350px - margin: 0 auto $pad-sm - - +md - padding: 0 $pad - margin: 0 auto + +$mobile: 640px; +$tablet: 1280px; +$fullhd: 1920px; diff --git a/website/www/site/assets/scss/_pillars.scss b/website/www/site/assets/scss/_pillars.scss new file mode 100644 index 000000000000..47c95d19ba0e --- /dev/null +++ b/website/www/site/assets/scss/_pillars.scss @@ -0,0 +1,151 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@import "media"; + +.pillars { + padding: $pad-l $pad; + + .pillars-title { + @extend .component-title; + + text-align: center; + border: none; + } + + .pillars-content { + display: grid; + grid-template-columns: 443px 443px; + grid-gap: 50px 89px; + justify-content: center; + margin-top: 84px; + + .pillars-item { + display: flex; + align-items: center; + + .pillars-item-icon { + margin-right: 47px; + } + + .pillars-item-description { + width: 100%; + max-width: 284px; + + .pillars-item-header { + @extend .component-header; + } + + .pillars-item-text { + @extend .component-text; + } + } + } + } + + .pillars-social { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + margin-top: 117px; + + .pillars-social-icons { + display: flex; + align-items: center; + margin-bottom: 45px; + + svg { + height: 41px; + width: auto; + } + + #about-twitter-icon { + height: 45px; + } + + a { + filter: grayscale(100%); + opacity: 0.7; + + &:hover { + filter: grayscale(0); + opacity: 1; + } + } + + .pillars-youtube-icon { + margin: 0 80px; + } + } + + .pillars-social-text { + @extend .component-text; + max-width: 285px; + } + } +} + +@media (max-width: $tablet) { + .pillars { + padding: $pad-md $pad-s; + + .pillars-content { + grid-template-columns: 330px; + grid-column-gap: 47px; + margin-top: 62px; + + .pillars-item { + align-items: flex-start; + + .pillars-item-icon { + margin-right: 17px; + margin-top: 12px; + } + + svg { + width: 64px; + height: 64px; + } + } + } + + .pillars-social { + margin-top: 91px; + + .pillars-social-icons { + svg { + height: 34px; + width: auto; + } + + #about-twitter-icon { + height: 37px; + } + + a { + filter: none; + opacity: 1; + } + + .pillars-youtube-icon { + margin: 0 60px; + } + } + } + } +} diff --git a/website/www/site/assets/scss/_typography.scss b/website/www/site/assets/scss/_typography.scss new file mode 100644 index 000000000000..d093140ace72 --- /dev/null +++ b/website/www/site/assets/scss/_typography.scss @@ -0,0 +1,54 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + + @import "media"; + +.component-title { + font-size: 36px; + font-weight: normal; + font-style: normal; + line-height: 1.1; + letter-spacing: normal; + color: $color-gray; +} + +.component-header { + font-size: 22px; + font-weight: 500; + font-style: normal; + line-height: 1.45; + letter-spacing: 0.43px; + color: $color-gray; +} + +.component-text { + font-size: 16px; + font-weight: normal; + font-style: normal; + line-height: 1.63; + letter-spacing: 0.43px; + color: $color-gray; +} + +@media (max-width: $tablet) { + .component-title { + font-size: 28px; + } + .component-header { + font-weight: normal; + } +} \ No newline at end of file diff --git a/website/www/site/assets/scss/_vars.sass b/website/www/site/assets/scss/_vars.sass index a5dd998b14c2..6a98df42306a 100644 --- a/website/www/site/assets/scss/_vars.sass +++ b/website/www/site/assets/scss/_vars.sass @@ -20,10 +20,13 @@ $color-dark: #37424B $color-white: #FFF $color-light-gray: #F7F7F7 $color-dark-gray: #555 +$color-gray: #333333 $pad-sm: 15px +$pad-s: 24px $pad: 30px $pad-md: 60px +$pad-l: 84px $pad-xl: 100px $box-shadow: 0px 3px 20px 0 rgba(0,0,0,0.075) diff --git a/website/www/site/assets/scss/main.scss b/website/www/site/assets/scss/main.scss index a2983ad59473..8007760cbbbd 100644 --- a/website/www/site/assets/scss/main.scss +++ b/website/www/site/assets/scss/main.scss @@ -24,6 +24,8 @@ @import "_type.sass"; @import "_global.sass"; @import "_navbar.sass"; +@import "_typography.scss"; +@import "_media.scss"; // Components. @import "_button.sass"; @@ -36,7 +38,7 @@ @import "_header.sass"; @import "_hero.sass"; @import "_logos.sass"; -@import "_pillars.sass"; +@import "_pillars.scss"; @import "_section-nav.sass"; @import "_page-nav.sass"; @import "_table-wrapper.sass"; diff --git a/website/www/site/data/en/pillars.yaml b/website/www/site/data/en/pillars.yaml index d2138bdd8b38..de864bcaaac8 100644 --- a/website/www/site/data/en/pillars.yaml +++ b/website/www/site/data/en/pillars.yaml @@ -12,7 +12,13 @@ - title: Unified body: Use a single programming model for both batch and streaming use cases. -- title: Portable - body: Execute pipelines on multiple execution environments. + icon: icons/unified-icon.svg - title: Extensible body: Write and share new SDKs, IO connectors, and transformation libraries. + icon: icons/extensive-icon.svg +- title: Portable + body: Execute pipelines on multiple execution environments. + icon: icons/portable-icon.svg +- title: Open Source + body: Use a single programming model for both batch and streaming use cases. + icon: icons/open-source-icon.svg diff --git a/website/www/site/i18n/home/en.yaml b/website/www/site/i18n/home/en.yaml index cbb3f23a78c3..43a3fea9bbc8 100644 --- a/website/www/site/i18n/home/en.yaml +++ b/website/www/site/i18n/home/en.yaml @@ -28,8 +28,6 @@ translation: "Go Quickstart" - id: home-hero-blog-title translation: "The latest from the blog" -- id: home-pillars-title - translation: "All about Apache Beam" - id: home-logos-title translation: "Works with" - id: home-cards-title diff --git a/website/www/site/i18n/home/pillars/en.yaml b/website/www/site/i18n/home/pillars/en.yaml new file mode 100644 index 000000000000..ab8a6d1ff002 --- /dev/null +++ b/website/www/site/i18n/home/pillars/en.yaml @@ -0,0 +1,16 @@ +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. + +- id: home-pillars-title + translation: "All about Apache Beam" +- id: home-pillars-social-text + translation: "Check out our social media to learn more about the community!" \ No newline at end of file diff --git a/website/www/site/layouts/index.html b/website/www/site/layouts/index.html index e1f69be4c2f2..794db1db2a47 100644 --- a/website/www/site/layouts/index.html +++ b/website/www/site/layouts/index.html @@ -57,23 +57,20 @@ {{ end }} {{ define "pillars-section" }} -
-
+
+

{{ T "home-pillars-title" }} -

-
+ +
{{ $data := index $.Site.Data .Site.Language.Lang }} {{ range $pillar := $data.pillars }} -
-
- {{ $pillar.title }} -
-
- {{ $pillar.body }} -
-
+ {{ partial "pillars/pillars-item" (dict "logo" $pillar.icon "header" $pillar.title "text" $pillar.body) }} {{ end }}
+
+ {{ $pillar_social_text := T "home-pillars-social-text" }} + {{ partial "pillars/pillars-social" (dict "github" "icons/github-icon.svg" "youtube" "icons/youtube-icon.svg" "twitter" "icons/twitter-icon.svg" "text" $pillar_social_text) }} +
{{ end }} diff --git a/website/www/site/layouts/partials/head.html b/website/www/site/layouts/partials/head.html index 1430d9ad4dfa..b3773320be6d 100644 --- a/website/www/site/layouts/partials/head.html +++ b/website/www/site/layouts/partials/head.html @@ -17,7 +17,7 @@ {{ if .Title }}{{ .Title }}{{ else }}{{ .Site.Title }}{{ end }} - + {{ $scssMain := "scss/main.scss"}} {{ if .Site.IsServer }} diff --git a/website/www/site/layouts/partials/pillars/pillars-item.html b/website/www/site/layouts/partials/pillars/pillars-item.html new file mode 100644 index 000000000000..84be04b0edbf --- /dev/null +++ b/website/www/site/layouts/partials/pillars/pillars-item.html @@ -0,0 +1,23 @@ +{{/* + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + http://www.apache.org/licenses/LICENSE-2.0 + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. See accompanying LICENSE file. +*/}} + +
+
+ {{ with resources.Get .logo }} + {{ .Content | safeHTML }} + {{ end }} +
+
+
{{ .header | markdownify }}
+

{{ .text | markdownify }}

+
+
diff --git a/website/www/site/layouts/partials/pillars/pillars-social.html b/website/www/site/layouts/partials/pillars/pillars-social.html new file mode 100644 index 000000000000..7da791d92744 --- /dev/null +++ b/website/www/site/layouts/partials/pillars/pillars-social.html @@ -0,0 +1,39 @@ +{{/* + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + http://www.apache.org/licenses/LICENSE-2.0 + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. See accompanying LICENSE file. +*/}} + +
+
+ + {{ with resources.Get .github }} + {{ .Content | safeHTML }} + {{ end }} + +
+
+ + {{ with resources.Get .youtube }} + {{ .Content | safeHTML }} + {{ end }} + +
+
+ + {{ with resources.Get .twitter }} + {{ .Content | safeHTML }} + {{ end }} + +
+
+

+ {{ .text | markdownify }} +

+ From 5289559fac682d0d47c589c82bcbfee6e7203689 Mon Sep 17 00:00:00 2001 From: bntnam Date: Mon, 16 Nov 2020 16:32:22 +0700 Subject: [PATCH 2/2] Review: refactored social icons component & added licenses to svg icons --- .../www/site/assets/icons/extensive-icon.svg | 19 +++++++++++ website/www/site/assets/icons/github-icon.svg | 19 +++++++++++ .../site/assets/icons/open-source-icon.svg | 19 +++++++++++ .../www/site/assets/icons/portable-icon.svg | 19 +++++++++++ .../www/site/assets/icons/twitter-icon.svg | 19 +++++++++++ .../www/site/assets/icons/unified-icon.svg | 19 +++++++++++ .../www/site/assets/icons/youtube-icon.svg | 19 +++++++++++ website/www/site/data/en/pillars_social.yaml | 21 ++++++++++++ website/www/site/layouts/index.html | 11 ++++-- .../partials/pillars/pillars-social.html | 34 ++++--------------- 10 files changed, 170 insertions(+), 29 deletions(-) create mode 100644 website/www/site/data/en/pillars_social.yaml diff --git a/website/www/site/assets/icons/extensive-icon.svg b/website/www/site/assets/icons/extensive-icon.svg index e823eba1c71a..76e680da8216 100644 --- a/website/www/site/assets/icons/extensive-icon.svg +++ b/website/www/site/assets/icons/extensive-icon.svg @@ -1,3 +1,22 @@ + + diff --git a/website/www/site/assets/icons/github-icon.svg b/website/www/site/assets/icons/github-icon.svg index 7236d3cc617f..ba80c8261586 100644 --- a/website/www/site/assets/icons/github-icon.svg +++ b/website/www/site/assets/icons/github-icon.svg @@ -1,3 +1,22 @@ + + diff --git a/website/www/site/assets/icons/open-source-icon.svg b/website/www/site/assets/icons/open-source-icon.svg index 6b944f3643a2..d6afab7898e8 100644 --- a/website/www/site/assets/icons/open-source-icon.svg +++ b/website/www/site/assets/icons/open-source-icon.svg @@ -1,3 +1,22 @@ + + diff --git a/website/www/site/assets/icons/portable-icon.svg b/website/www/site/assets/icons/portable-icon.svg index a203e089271a..77189163e141 100644 --- a/website/www/site/assets/icons/portable-icon.svg +++ b/website/www/site/assets/icons/portable-icon.svg @@ -1,3 +1,22 @@ + + diff --git a/website/www/site/assets/icons/twitter-icon.svg b/website/www/site/assets/icons/twitter-icon.svg index 53587e8ad8a6..e23e8210ae5b 100644 --- a/website/www/site/assets/icons/twitter-icon.svg +++ b/website/www/site/assets/icons/twitter-icon.svg @@ -1,3 +1,22 @@ + + diff --git a/website/www/site/assets/icons/unified-icon.svg b/website/www/site/assets/icons/unified-icon.svg index c7751d463e1a..6dc75d26e576 100644 --- a/website/www/site/assets/icons/unified-icon.svg +++ b/website/www/site/assets/icons/unified-icon.svg @@ -1,3 +1,22 @@ + + diff --git a/website/www/site/assets/icons/youtube-icon.svg b/website/www/site/assets/icons/youtube-icon.svg index d51366ff3764..3cf47d8631f5 100644 --- a/website/www/site/assets/icons/youtube-icon.svg +++ b/website/www/site/assets/icons/youtube-icon.svg @@ -1,3 +1,22 @@ + + diff --git a/website/www/site/data/en/pillars_social.yaml b/website/www/site/data/en/pillars_social.yaml new file mode 100644 index 000000000000..2ed3ff6c03a9 --- /dev/null +++ b/website/www/site/data/en/pillars_social.yaml @@ -0,0 +1,21 @@ +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. + +- name: pillars-github-icon + icon: icons/github-icon.svg + url: https://github.com/apache/beam +- name: pillars-youtube-icon + icon: icons/youtube-icon.svg + url: https://www.youtube.com/channel/UChNnb_YO_7B0HlW6FhAXZZQ +- name: pillars-twitter-icon + icon: icons/twitter-icon.svg + url: https://twitter.com/apachebeam \ No newline at end of file diff --git a/website/www/site/layouts/index.html b/website/www/site/layouts/index.html index 794db1db2a47..f173e4103a71 100644 --- a/website/www/site/layouts/index.html +++ b/website/www/site/layouts/index.html @@ -68,8 +68,15 @@

{{ end }}

- {{ $pillar_social_text := T "home-pillars-social-text" }} - {{ partial "pillars/pillars-social" (dict "github" "icons/github-icon.svg" "youtube" "icons/youtube-icon.svg" "twitter" "icons/twitter-icon.svg" "text" $pillar_social_text) }} +
+ {{ $data := index $.Site.Data .Site.Language.Lang }} + {{ range $pillars_social := $data.pillars_social }} + {{ partial "pillars/pillars-social" (dict "icon" $pillars_social.icon "url" $pillars_social.url "name" $pillars_social.name) }} + {{ end }} +
+

+ {{ T "home-pillars-social-text" }} +

{{ end }} diff --git a/website/www/site/layouts/partials/pillars/pillars-social.html b/website/www/site/layouts/partials/pillars/pillars-social.html index 7da791d92744..76f6a5099a36 100644 --- a/website/www/site/layouts/partials/pillars/pillars-social.html +++ b/website/www/site/layouts/partials/pillars/pillars-social.html @@ -10,30 +10,10 @@ limitations under the License. See accompanying LICENSE file. */}} -
-
- - {{ with resources.Get .github }} - {{ .Content | safeHTML }} - {{ end }} - -
-
- - {{ with resources.Get .youtube }} - {{ .Content | safeHTML }} - {{ end }} - -
-
- - {{ with resources.Get .twitter }} - {{ .Content | safeHTML }} - {{ end }} - -
-
-

- {{ .text | markdownify }} -

- +
+ + {{ with resources.Get .icon }} + {{ .Content | safeHTML }} + {{ end }} + +
\ No newline at end of file