You are viewing a plain text version of this content. The canonical link for it is here.
Posted to github@beam.apache.org by GitBox <gi...@apache.org> on 2020/11/30 15:58:32 UTC

[GitHub] [beam] bntnam opened a new pull request #13439: [Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar

bntnam opened a new pull request #13439:
URL: https://github.com/apache/beam/pull/13439


   What I've done:
   + Added new component - Quotes for both Desktop/Mobile versions.
   + Updated Hero component (Image Cover) for both Desktop/Mobile versions.
   + Updated Navbar for Desktop version.
   
   ------------------------
   
   Thank you for your contribution! Follow this checklist to help us incorporate your contribution quickly and easily:
   
    - [ ] [**Choose reviewer(s)**](https://beam.apache.org/contribute/#make-your-change) and mention them in a comment (`R: @username`).
    - [ ] Format the pull request title like `[BEAM-XXX] Fixes bug in ApproximateQuantiles`, where you replace `BEAM-XXX` with the appropriate JIRA issue, if applicable. This will automatically link the pull request to the issue.
    - [ ] Update `CHANGES.md` with noteworthy changes.
    - [ ] If this contribution is large, please file an Apache [Individual Contributor License Agreement](https://www.apache.org/licenses/icla.pdf).
   
   See the [Contributor Guide](https://beam.apache.org/contribute) for more tips on [how to make review process smoother](https://beam.apache.org/contribute/#make-reviewers-job-easier).
   
   Post-Commit Tests Status (on master branch)
   ------------------------------------------------------------------------------------------------
   
   Lang | SDK | Dataflow | Flink | Samza | Spark | Twister2
   --- | --- | --- | --- | --- | --- | ---
   Go | [![Build Status](https://ci-beam.apache.org/job/beam_PostCommit_Go/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PostCommit_Go/lastCompletedBuild/) | --- | [![Build Status](https://ci-beam.apache.org/job/beam_PostCommit_Go_VR_Flink/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PostCommit_Go_VR_Flink/lastCompletedBuild/) | --- | [![Build Status](https://ci-beam.apache.org/job/beam_PostCommit_Go_VR_Spark/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PostCommit_Go_VR_Spark/lastCompletedBuild/) | ---
   Java | [![Build Status](https://ci-beam.apache.org/job/beam_PostCommit_Java/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PostCommit_Java/lastCompletedBuild/) | [![Build Status](https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_Dataflow/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_Dataflow/lastCompletedBuild/)<br>[![Build Status](https://ci-beam.apache.org/job/beam_PostCommit_Java_VR_Dataflow_V2/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PostCommit_Java_VR_Dataflow_V2/lastCompletedBuild/)<br>[![Build Status](https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_Dataflow_Java11/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_Dataflow_Java11/lastCompletedBuild/) | [![Build Status](https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_Flink/lastCompletedBuild/badge/icon)](https://ci-beam
 .apache.org/job/beam_PostCommit_Java_ValidatesRunner_Flink/lastCompletedBuild/)<br>[![Build Status](https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_Flink_Java11/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_Flink_Java11/lastCompletedBuild/)<br>[![Build Status](https://ci-beam.apache.org/job/beam_PostCommit_Java_PVR_Flink_Batch/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PostCommit_Java_PVR_Flink_Batch/lastCompletedBuild/)<br>[![Build Status](https://ci-beam.apache.org/job/beam_PostCommit_Java_PVR_Flink_Streaming/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PostCommit_Java_PVR_Flink_Streaming/lastCompletedBuild/) | [![Build Status](https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_Samza/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_Samza/lastCompletedBuild/) | [![Build Status](https://ci-beam.a
 pache.org/job/beam_PostCommit_Java_ValidatesRunner_Spark/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_Spark/lastCompletedBuild/)<br>[![Build Status](https://ci-beam.apache.org/job/beam_PostCommit_Java_PVR_Spark_Batch/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PostCommit_Java_PVR_Spark_Batch/lastCompletedBuild/)<br>[![Build Status](https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_SparkStructuredStreaming/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_SparkStructuredStreaming/lastCompletedBuild/) | [![Build Status](https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_Twister2/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PostCommit_Java_ValidatesRunner_Twister2/lastCompletedBuild/)
   Python | [![Build Status](https://ci-beam.apache.org/job/beam_PostCommit_Python36/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PostCommit_Python36/lastCompletedBuild/)<br>[![Build Status](https://ci-beam.apache.org/job/beam_PostCommit_Python37/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PostCommit_Python37/lastCompletedBuild/)<br>[![Build Status](https://ci-beam.apache.org/job/beam_PostCommit_Python38/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PostCommit_Python38/lastCompletedBuild/) | [![Build Status](https://ci-beam.apache.org/job/beam_PostCommit_Py_VR_Dataflow/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PostCommit_Py_VR_Dataflow/lastCompletedBuild/)<br>[![Build Status](https://ci-beam.apache.org/job/beam_PostCommit_Py_VR_Dataflow_V2/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PostCommit_Py_VR_Dataflow_V2/lastCompletedBuild/)<br>[![Build Status](https://ci-beam
 .apache.org/job/beam_PostCommit_Py_ValCont/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PostCommit_Py_ValCont/lastCompletedBuild/) | [![Build Status](https://ci-beam.apache.org/job/beam_PreCommit_Python_PVR_Flink_Cron/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PreCommit_Python_PVR_Flink_Cron/lastCompletedBuild/)<br>[![Build Status](https://ci-beam.apache.org/job/beam_PostCommit_Python_VR_Flink/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PostCommit_Python_VR_Flink/lastCompletedBuild/) | --- | [![Build Status](https://ci-beam.apache.org/job/beam_PostCommit_Python_VR_Spark/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PostCommit_Python_VR_Spark/lastCompletedBuild/) | ---
   XLang | [![Build Status](https://ci-beam.apache.org/job/beam_PostCommit_XVR_Direct/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PostCommit_XVR_Direct/lastCompletedBuild/) | [![Build Status](https://ci-beam.apache.org/job/beam_PostCommit_XVR_Dataflow/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PostCommit_XVR_Dataflow/lastCompletedBuild/) | [![Build Status](https://ci-beam.apache.org/job/beam_PostCommit_XVR_Flink/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PostCommit_XVR_Flink/lastCompletedBuild/) | --- | [![Build Status](https://ci-beam.apache.org/job/beam_PostCommit_XVR_Spark/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PostCommit_XVR_Spark/lastCompletedBuild/) | ---
   
   Pre-Commit Tests Status (on master branch)
   ------------------------------------------------------------------------------------------------
   
   --- |Java | Python | Go | Website | Whitespace | Typescript
   --- | --- | --- | --- | --- | --- | ---
   Non-portable | [![Build Status](https://ci-beam.apache.org/job/beam_PreCommit_Java_Cron/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PreCommit_Java_Cron/lastCompletedBuild/) | [![Build Status](https://ci-beam.apache.org/job/beam_PreCommit_Python_Cron/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PreCommit_Python_Cron/lastCompletedBuild/)<br>[![Build Status](https://ci-beam.apache.org/job/beam_PreCommit_PythonLint_Cron/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PreCommit_PythonLint_Cron/lastCompletedBuild/)<br>[![Build Status](https://ci-beam.apache.org/job/beam_PreCommit_PythonDocker_Cron/badge/icon)](https://ci-beam.apache.org/job/beam_PreCommit_PythonDocker_Cron/lastCompletedBuild/) <br>[![Build Status](https://ci-beam.apache.org/job/beam_PreCommit_PythonDocs_Cron/badge/icon)](https://ci-beam.apache.org/job/beam_PreCommit_PythonDocs_Cron/lastCompletedBuild/) | [![Build Status](https://ci-beam.apache.org/job/be
 am_PreCommit_Go_Cron/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PreCommit_Go_Cron/lastCompletedBuild/) | [![Build Status](https://ci-beam.apache.org/job/beam_PreCommit_Website_Cron/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PreCommit_Website_Cron/lastCompletedBuild/) | [![Build Status](https://ci-beam.apache.org/job/beam_PreCommit_Whitespace_Cron/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PreCommit_Whitespace_Cron/lastCompletedBuild/) | [![Build Status](https://ci-beam.apache.org/job/beam_PreCommit_Typescript_Cron/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PreCommit_Typescript_Cron/lastCompletedBuild/)
   Portable | --- | [![Build Status](https://ci-beam.apache.org/job/beam_PreCommit_Portable_Python_Cron/lastCompletedBuild/badge/icon)](https://ci-beam.apache.org/job/beam_PreCommit_Portable_Python_Cron/lastCompletedBuild/) | --- | --- | --- | ---
   
   See [.test-infra/jenkins/README](https://github.com/apache/beam/blob/master/.test-infra/jenkins/README.md) for trigger phrase, status and link of all Jenkins jobs.
   
   
   GitHub Actions Tests Status (on master branch)
   ------------------------------------------------------------------------------------------------
   [![Build python source distribution and wheels](https://github.com/apache/beam/workflows/Build%20python%20source%20distribution%20and%20wheels/badge.svg?branch=master&event=schedule)](https://github.com/apache/beam/actions?query=workflow%3A%22Build+python+source+distribution+and+wheels%22+branch%3Amaster+event%3Aschedule)
   [![Python tests](https://github.com/apache/beam/workflows/Python%20tests/badge.svg?branch=master&event=schedule)](https://github.com/apache/beam/actions?query=workflow%3A%22Python+Tests%22+branch%3Amaster+event%3Aschedule)
   [![Java tests](https://github.com/apache/beam/workflows/Java%20Tests/badge.svg?branch=master&event=schedule)](https://github.com/apache/beam/actions?query=workflow%3A%22Java+Tests%22+branch%3Amaster+event%3Aschedule)
   
   See [CI.md](https://github.com/apache/beam/blob/master/CI.md) for more information about GitHub Actions CI.
   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] bntnam commented on a change in pull request #13439: [Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar

Posted by GitBox <gi...@apache.org>.
bntnam commented on a change in pull request #13439:
URL: https://github.com/apache/beam/pull/13439#discussion_r537201645



##########
File path: website/www/site/i18n/home/hero/en.yaml
##########
@@ -10,9 +10,11 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-- quote: "A framework that delivers the flexibility and advanced functionality our customers need."
-  name: –Talend
-- quote: "Apache Beam has powerful semantics that solve real-world challenges of stream processing."
-  name: –PayPal
-- quote: "Apache Beam represents a principled approach for analyzing data streams."
-  name: –data Artisans
+- id: home-hero-title
+  translation: Introducing Apache Beam
+- id: home-hero-heading
+  translation: An advanced unified programming model
+- id: home-hero-subheading
+  translation: Implement batch and streaming data processing jobs that run on any execution engine.
+- id: home-hero-button
+  translation: Install Beam

Review comment:
       Oh, I got ur point. It's weird. The `remove` & `add` actions are in separated commits. Idk why git did that behind the scene. Do you have any exp for this case? 😮 




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] bntnam commented on a change in pull request #13439: [Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar

Posted by GitBox <gi...@apache.org>.
bntnam commented on a change in pull request #13439:
URL: https://github.com/apache/beam/pull/13439#discussion_r534645786



##########
File path: website/www/site/layouts/partials/head.html
##########
@@ -45,6 +45,7 @@
 <link rel="canonical" href="{{ .Site.Params.hostName }}{{ .Permalink | absURL }}" data-proofer-ignore>
 <link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico">
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/keen-slider@5.3.2/keen-slider.min.css" />

Review comment:
       Done!




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] TheNeuralBit commented on a change in pull request #13439: [Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar

Posted by GitBox <gi...@apache.org>.
TheNeuralBit commented on a change in pull request #13439:
URL: https://github.com/apache/beam/pull/13439#discussion_r537977117



##########
File path: website/www/site/i18n/home/hero/en.yaml
##########
@@ -10,9 +10,11 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-- quote: "A framework that delivers the flexibility and advanced functionality our customers need."
-  name: –Talend
-- quote: "Apache Beam has powerful semantics that solve real-world challenges of stream processing."
-  name: –PayPal
-- quote: "Apache Beam represents a principled approach for analyzing data streams."
-  name: –data Artisans
+- id: home-hero-title
+  translation: Introducing Apache Beam
+- id: home-hero-heading
+  translation: An advanced unified programming model
+- id: home-hero-subheading
+  translation: Implement batch and streaming data processing jobs that run on any execution engine.
+- id: home-hero-button
+  translation: Install Beam

Review comment:
       Interesting. If they're in separate commits, maybe github is just doing this incorrectly?




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] bntnam commented on a change in pull request #13439: [Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar

Posted by GitBox <gi...@apache.org>.
bntnam commented on a change in pull request #13439:
URL: https://github.com/apache/beam/pull/13439#discussion_r537214423



##########
File path: website/www/site/static/js/hero/lottie-light.min.js
##########
@@ -0,0 +1,15 @@
+(typeof navigator !== "undefined") && (function(root, factory) {

Review comment:
       Sure!




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] TheNeuralBit commented on a change in pull request #13439: [Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar

Posted by GitBox <gi...@apache.org>.
TheNeuralBit commented on a change in pull request #13439:
URL: https://github.com/apache/beam/pull/13439#discussion_r535721306



##########
File path: website/www/site/static/js/hero/hero-desktop.js
##########
@@ -0,0 +1,19 @@
+// 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.
+
+var animation = bodymovin.loadAnimation({
+  container: document.getElementById("hero-desktop"),
+  renderer: "svg",
+  loop: false,
+  autoplay: true,
+  path: "/js/hero/hero-desktop.json",

Review comment:
       Does this work if you just specify a relative url, `hero-desktop.json`? As it is it doesn't work on the staged preview since it's in a sub-directoty: http://apache-beam-website-pull-requests.storage.googleapis.com/13439. It tries to access http://apache-beam-website-pull-requests.storage.googleapis.com//js/hero/hero-desktop.json
   
   Alternatively we might inline the JSON with the `animationData` param, but as noted before that has its own drawback.
   
   This wouldn't be a problem in production of course, but it would be nice to keep the preview working.

##########
File path: website/www/site/assets/scss/_quotes.scss
##########
@@ -63,10 +63,121 @@
       margin-right: 0;
     }
   }
+  
+  // Sliding feature is only displayed on mobile version
+  .keen-slider {
+    display: none;
+  }
+
+  .dots {
+    display: none;
+  }
+
+  .keen-slider {
+    width: 327px;
+    margin: 0 auto;
+    border-radius: 16px;
+    background-color: $color-white;
+    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16),
+      0 4px 4px 0 rgba(0, 0, 0, 0.06);
+
+    .keen-slider__slide {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      width: 100%;
+      max-width: 327px;
+      height: 468px;
+      padding: 55px 24px 24px 24px;
+
+      .quote-text {
+        @extend .component-quote;
+
+        margin: 108px 0 20px 0;
+      }
+
+      img {
+        width: 172px;
+      }
+    }
+  }
+
+  .dots {
+    display: none;
+    padding: 10px 0;
+    justify-content: center;
+    margin-top: 46px;
+  }
+
+  .dot {
+    border: none;
+    width: 13px;
+    height: 13px;
+    background: $color-smoke;
+    border-radius: 50%;
+    margin: 0 5px;
+    padding: 4px;
+    cursor: pointer;
+  }
+
+  .dot:focus {
+    outline: none;
+  }
+
+  .dot--active {
+    background: $color-sun;
+  }
 }
 
 @media (max-width: $tablet) {
   .quotes {
-    display: none;
+    .quotes-title {
+      margin-bottom: 64px;
+    }
+
+    .quotes-desktop {
+      display: none;
+    }
+
+    .keen-slider {
+      display: flex;
+    }
+
+    .dots {
+      display: flex;
+    }
   }
 }
+
+/*# sourceMappingURL=keen-slider.min.css.map */
+// This is pulled from "https://cdn.jsdelivr.net/npm/keen-slider@5.3.2/keen-slider.min.css" to serve the consistency

Review comment:
       nit: I think this should be its own file

##########
File path: website/www/site/i18n/home/hero/en.yaml
##########
@@ -10,9 +10,11 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-- quote: "A framework that delivers the flexibility and advanced functionality our customers need."
-  name: –Talend
-- quote: "Apache Beam has powerful semantics that solve real-world challenges of stream processing."
-  name: –PayPal
-- quote: "Apache Beam represents a principled approach for analyzing data streams."
-  name: –data Artisans
+- id: home-hero-title
+  translation: Introducing Apache Beam
+- id: home-hero-heading
+  translation: An advanced unified programming model
+- id: home-hero-subheading
+  translation: Implement batch and streaming data processing jobs that run on any execution engine.
+- id: home-hero-button
+  translation: Install Beam

Review comment:
       But I mean git is tracking it as if it were renamed from cards.yaml, which looks like it contained quotes/testimonials.
   
   Its not a big deal.. but I think this should be separated out into a remove (cards.yaml) and an add (home/hero/en.yaml)

##########
File path: website/www/site/static/js/hero/lottie-light.min.js
##########
@@ -0,0 +1,15 @@
+(typeof navigator !== "undefined") && (function(root, factory) {

Review comment:
       None of the versions on there actually have a license header.
   Can you add a TODO to figure out if we need to do something about this before merging to master?

##########
File path: website/www/site/static/js/hero/hero-mobile.json
##########
@@ -0,0 +1 @@
+{"v":"5.7.1","fr":30,"ip":0,"op":120,"w":375,"h":462,"nm":"opt2","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":24,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[62.997],"e":[20]},{"t":77}],"ix":10},"p":{"a":0,"k":[1635.5,319,0],"ix":2},"a":{"a":0,"k":[1228.201,-1.163,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[72.266,-33.656],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"i
 x":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 6","sr":1,"ks":{"o":{"a":0,"k":82,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[-35],"e":[-20]},{"t":56}],"ix":10},"p":{"a":0,"k":[-2082.5,375,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.341176470588,0.043137254902,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":
 {"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Shape Layer 7","sr":1,"ks":{"o":{"a":0,"k":66,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[-53],"e":[-34]},{"t":76}],"ix":10},"p":{"a":0,"k":[-1990.5,983,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a
 ":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":24,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-6,"s":[-46],"e":[20]},{"t":67}],"ix":10},"p":{"a":0,"k":[1117.5,959,0],"ix":2},"a":{"a":0,"k":[1171.735,-35.884,0],"ix":1},"s":{"a":0,"k":[100,78.683,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[72.266,-33
 .656],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Shape Layer 4","sr":1,"ks":{"o":{"a":0,"k":20,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[0.759]},"t":-5,"s":[2],"e":[-27]},{"t":56}],"ix":10},"p":{"a":0,"k":[-484.5,1051,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic
  - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Shape Layer 8","sr":1,"ks":{"o":{"a":0,"k":66,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-7,"s":[2],"e":[-43]},{"t":56}],"ix":10},"p":{"a":0,"k":[-542.5,1281,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,81.692,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5}
 ,"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-152.112,163.925],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":9,"ty":1,"nm":"Orange Solid 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[187.5,231,0],"ix":2},"a":{"a":0,"k":[741.5,447,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"sw":1483,"sh":894,"sc":"#ff570b","ip":0,"op":720,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":1,"nm":"Medium Orange Solid 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[187.5,231,0],"ix":2},"a":{"a":0,"k":[741.5,447,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"sw":1483,"sh":894,"sc":"#f87
 924","ip":0,"op":720,"st":0,"bm":0}],"markers":[]}

Review comment:
       Makes sense. I guess the other option would be to inline this in hero-mobile.js, but then I imagine that makes it harder to work with in the future.
   
   Could you add a TODO (maybe in the build.gradle exclude list that mentions these json files) to figure out if its ok to omit license headers.

##########
File path: website/www/site/layouts/partials/header.html
##########
@@ -92,3 +92,49 @@
       </ul>
     </div>
 </nav>
+
+<nav class="navigation-bar-desktop">
+  <a href={{ "/" | relLangURL }} class="navbar-logo" >
+    <img src="/images/beam_logo_navbar.png" alt="Beam Logo">
+  </a>
+  <div class="navbar-links">
+    <a class="navbar-link" href={{ "/get-started/beam-overview/" | relLangURL }}>{{ T "nav-get-started" }}</a>
+    <li class="dropdown navbar-dropdown navbar-dropdown-documentation">
+      <a class="navbar-link" href="#" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">
+        Documentation
+        <span>
+          {{ with resources.Get "icons/navbar-documentation-icon.svg" }}
+            {{ .Content | safeHTML }}
+          {{ end }}
+        </span>

Review comment:
       Weird I cannot make it go away by avoiding caching. Is it possible it only happens on the staged preview? Could you try looking at it through http://apache-beam-website-pull-requests.storage.googleapis.com/13439




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] bntnam commented on a change in pull request #13439: [Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar

Posted by GitBox <gi...@apache.org>.
bntnam commented on a change in pull request #13439:
URL: https://github.com/apache/beam/pull/13439#discussion_r534631100



##########
File path: website/www/site/layouts/partials/hooks/body-end.html
##########
@@ -0,0 +1,17 @@
+{{/*
+  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.
+*/}}
+
+<script src="/js/hero/lottie-light.min.js"></script>
+<script src="/js/hero/hero-desktop.js"></script>
+<script src="/js/hero/hero-mobile.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/keen-slider@5.3.2/keen-slider.min.js"></script>
+<script src="/js/quotes-slider.js"></script>

Review comment:
       Yeah. As you said one of the reason was not to delay the loading of visible content. In this case, there is another reason. For example, `quotes-slider.js` script needs to wrap an element with the id `my-keen-slide` and work on it, then render a new element with such sliding feature. Thus, with this case, the script should be put at the end to wait for the element `my-keen-slider` appears first so that it'll be able to get that element.




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] TheNeuralBit commented on a change in pull request #13439: [Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar

Posted by GitBox <gi...@apache.org>.
TheNeuralBit commented on a change in pull request #13439:
URL: https://github.com/apache/beam/pull/13439#discussion_r537977238



##########
File path: website/www/site/static/js/hero/hero-desktop.js
##########
@@ -0,0 +1,19 @@
+// 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.
+
+var animation = bodymovin.loadAnimation({
+  container: document.getElementById("hero-desktop"),
+  renderer: "svg",
+  loop: false,
+  autoplay: true,
+  path: "/js/hero/hero-desktop.json",

Review comment:
       LG, thanks!




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] bntnam commented on a change in pull request #13439: [Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar

Posted by GitBox <gi...@apache.org>.
bntnam commented on a change in pull request #13439:
URL: https://github.com/apache/beam/pull/13439#discussion_r537200336



##########
File path: website/www/site/static/js/hero/hero-mobile.json
##########
@@ -0,0 +1 @@
+{"v":"5.7.1","fr":30,"ip":0,"op":120,"w":375,"h":462,"nm":"opt2","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":24,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[62.997],"e":[20]},{"t":77}],"ix":10},"p":{"a":0,"k":[1635.5,319,0],"ix":2},"a":{"a":0,"k":[1228.201,-1.163,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[72.266,-33.656],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"i
 x":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 6","sr":1,"ks":{"o":{"a":0,"k":82,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[-35],"e":[-20]},{"t":56}],"ix":10},"p":{"a":0,"k":[-2082.5,375,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.341176470588,0.043137254902,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":
 {"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Shape Layer 7","sr":1,"ks":{"o":{"a":0,"k":66,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[-53],"e":[-34]},{"t":76}],"ix":10},"p":{"a":0,"k":[-1990.5,983,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a
 ":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":24,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-6,"s":[-46],"e":[20]},{"t":67}],"ix":10},"p":{"a":0,"k":[1117.5,959,0],"ix":2},"a":{"a":0,"k":[1171.735,-35.884,0],"ix":1},"s":{"a":0,"k":[100,78.683,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[72.266,-33
 .656],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Shape Layer 4","sr":1,"ks":{"o":{"a":0,"k":20,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[0.759]},"t":-5,"s":[2],"e":[-27]},{"t":56}],"ix":10},"p":{"a":0,"k":[-484.5,1051,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic
  - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Shape Layer 8","sr":1,"ks":{"o":{"a":0,"k":66,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-7,"s":[2],"e":[-43]},{"t":56}],"ix":10},"p":{"a":0,"k":[-542.5,1281,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,81.692,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5}
 ,"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-152.112,163.925],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":9,"ty":1,"nm":"Orange Solid 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[187.5,231,0],"ix":2},"a":{"a":0,"k":[741.5,447,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"sw":1483,"sh":894,"sc":"#ff570b","ip":0,"op":720,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":1,"nm":"Medium Orange Solid 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[187.5,231,0],"ix":2},"a":{"a":0,"k":[741.5,447,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"sw":1483,"sh":894,"sc":"#f87
 924","ip":0,"op":720,"st":0,"bm":0}],"markers":[]}

Review comment:
       Ok, a comment added!




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] bntnam commented on a change in pull request #13439: [Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar

Posted by GitBox <gi...@apache.org>.
bntnam commented on a change in pull request #13439:
URL: https://github.com/apache/beam/pull/13439#discussion_r534636409



##########
File path: website/www/site/static/js/hero/lottie-light.min.js
##########
@@ -0,0 +1,15 @@
+(typeof navigator !== "undefined") && (function(root, factory) {

Review comment:
       Yeah, the original `lottie-web` on CDN is really heavy, that's why I pulled the light version from their builds. And I followed their instruction here [1].
   
   [1] https://github.com/airbnb/lottie-web#html




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] bntnam commented on a change in pull request #13439: [Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar

Posted by GitBox <gi...@apache.org>.
bntnam commented on a change in pull request #13439:
URL: https://github.com/apache/beam/pull/13439#discussion_r534628709



##########
File path: website/www/site/layouts/index.html
##########
@@ -154,6 +135,35 @@ <h4 class="calendar-card-small-title">
   </div>
 {{ end }}
 
+{{ define "quotes-section" }}
+  <div class="quotes">
+    <div class="quotes-title">
+      They tried it out
+    </div>
+    <div class="quotes-content">
+      {{ $data := index $.Site.Data .Site.Language.Lang }}
+      {{ range $quote := $data.quotes }}
+          {{ partial "quotes/quote.html" (dict "icon" $quote.icon "text" $quote.text  "logoUrl" $quote.logoUrl) }}
+      {{ end }}
+    </div>
+  </div>
+{{ end }}
+
+{{ define "quotes-mobile-section" }}
+  <div class="quotes-mobile">
+    <div class="quotes-mobile-title">
+      They tried it out
+    </div>
+    <div id="my-keen-slider" class="keen-slider">
+      {{ $data := index $.Site.Data .Site.Language.Lang }}
+      {{ range $quote := $data.quotes }}
+          {{ partial "quotes/quote-mobile.html" (dict "icon" $quote.icon "text" $quote.text  "logoUrl" $quote.logoUrl) }}
+      {{ end }}
+    </div>
+    <div id="dots" class="dots"></div>

Review comment:
       The same answer as above.




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] bntnam commented on a change in pull request #13439: [Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar

Posted by GitBox <gi...@apache.org>.
bntnam commented on a change in pull request #13439:
URL: https://github.com/apache/beam/pull/13439#discussion_r537215093



##########
File path: website/www/site/static/js/hero/hero-desktop.js
##########
@@ -0,0 +1,19 @@
+// 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.
+
+var animation = bodymovin.loadAnimation({
+  container: document.getElementById("hero-desktop"),
+  renderer: "svg",
+  loop: false,
+  autoplay: true,
+  path: "/js/hero/hero-desktop.json",

Review comment:
       Hmm, thanks for your suggestion about `animationData`. I agree that maybe that has its own drawback. However, this approach solves 2 questions (license headers of json files & staging deployment). Then, I'd go for it. 😄 




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] bntnam commented on a change in pull request #13439: [Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar

Posted by GitBox <gi...@apache.org>.
bntnam commented on a change in pull request #13439:
URL: https://github.com/apache/beam/pull/13439#discussion_r534645681



##########
File path: website/www/site/layouts/index.html
##########
@@ -154,6 +135,35 @@ <h4 class="calendar-card-small-title">
   </div>
 {{ end }}
 
+{{ define "quotes-section" }}
+  <div class="quotes">
+    <div class="quotes-title">
+      They tried it out
+    </div>
+    <div class="quotes-content">
+      {{ $data := index $.Site.Data .Site.Language.Lang }}
+      {{ range $quote := $data.quotes }}
+          {{ partial "quotes/quote.html" (dict "icon" $quote.icon "text" $quote.text  "logoUrl" $quote.logoUrl) }}
+      {{ end }}
+    </div>
+  </div>
+{{ end }}
+
+{{ define "quotes-mobile-section" }}
+  <div class="quotes-mobile">
+    <div class="quotes-mobile-title">

Review comment:
       Thanks for suggestion!




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] bntnam commented on a change in pull request #13439: [Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar

Posted by GitBox <gi...@apache.org>.
bntnam commented on a change in pull request #13439:
URL: https://github.com/apache/beam/pull/13439#discussion_r534635089



##########
File path: website/www/site/static/js/hero/hero-mobile.json
##########
@@ -0,0 +1 @@
+{"v":"5.7.1","fr":30,"ip":0,"op":120,"w":375,"h":462,"nm":"opt2","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":24,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[62.997],"e":[20]},{"t":77}],"ix":10},"p":{"a":0,"k":[1635.5,319,0],"ix":2},"a":{"a":0,"k":[1228.201,-1.163,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[72.266,-33.656],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"i
 x":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 6","sr":1,"ks":{"o":{"a":0,"k":82,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[-35],"e":[-20]},{"t":56}],"ix":10},"p":{"a":0,"k":[-2082.5,375,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.341176470588,0.043137254902,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":
 {"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Shape Layer 7","sr":1,"ks":{"o":{"a":0,"k":66,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[-53],"e":[-34]},{"t":76}],"ix":10},"p":{"a":0,"k":[-1990.5,983,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a
 ":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":24,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-6,"s":[-46],"e":[20]},{"t":67}],"ix":10},"p":{"a":0,"k":[1117.5,959,0],"ix":2},"a":{"a":0,"k":[1171.735,-35.884,0],"ix":1},"s":{"a":0,"k":[100,78.683,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[72.266,-33
 .656],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Shape Layer 4","sr":1,"ks":{"o":{"a":0,"k":20,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[0.759]},"t":-5,"s":[2],"e":[-27]},{"t":56}],"ix":10},"p":{"a":0,"k":[-484.5,1051,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic
  - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Shape Layer 8","sr":1,"ks":{"o":{"a":0,"k":66,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-7,"s":[2],"e":[-43]},{"t":56}],"ix":10},"p":{"a":0,"k":[-542.5,1281,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,81.692,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5}
 ,"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-152.112,163.925],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":9,"ty":1,"nm":"Orange Solid 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[187.5,231,0],"ix":2},"a":{"a":0,"k":[741.5,447,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"sw":1483,"sh":894,"sc":"#ff570b","ip":0,"op":720,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":1,"nm":"Medium Orange Solid 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[187.5,231,0],"ix":2},"a":{"a":0,"k":[741.5,447,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"sw":1483,"sh":894,"sc":"#f87
 924","ip":0,"op":720,"st":0,"bm":0}],"markers":[]}

Review comment:
       Unfortunately, we cant :(. If you know another way, please let me know.
   
   Ref: https://stackoverflow.com/questions/244777/can-comments-be-used-in-json#:~:text=JSON%20does%20not%20support%20comments,%2C%20fewer%20mistakes%2C%20more%20comments.




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] TheNeuralBit commented on pull request #13439: [Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar

Posted by GitBox <gi...@apache.org>.
TheNeuralBit commented on pull request #13439:
URL: https://github.com/apache/beam/pull/13439#issuecomment-736841313


   Run Java PreCommit


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] TheNeuralBit commented on a change in pull request #13439: [Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar

Posted by GitBox <gi...@apache.org>.
TheNeuralBit commented on a change in pull request #13439:
URL: https://github.com/apache/beam/pull/13439#discussion_r537973746



##########
File path: website/www/site/layouts/partials/header.html
##########
@@ -92,3 +92,49 @@
       </ul>
     </div>
 </nav>
+
+<nav class="navigation-bar-desktop">
+  <a href={{ "/" | relLangURL }} class="navbar-logo" >
+    <img src="/images/beam_logo_navbar.png" alt="Beam Logo">
+  </a>
+  <div class="navbar-links">
+    <a class="navbar-link" href={{ "/get-started/beam-overview/" | relLangURL }}>{{ T "nav-get-started" }}</a>
+    <li class="dropdown navbar-dropdown navbar-dropdown-documentation">
+      <a class="navbar-link" href="#" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">
+        Documentation
+        <span>
+          {{ with resources.Get "icons/navbar-documentation-icon.svg" }}
+            {{ .Content | safeHTML }}
+          {{ end }}
+        </span>

Review comment:
       Ah sorry I think this is the link you need: http://apache-beam-website-pull-requests.storage.googleapis.com/13439/index.html
   You can always find it by clicking details on the "Website Stage GCS" jenkins job: 
   ![image](https://user-images.githubusercontent.com/675055/101428433-91209600-38b5-11eb-955f-6ac3623d32b5.png)
   
   That doesn't need to block this PR though
   




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] bntnam commented on a change in pull request #13439: [Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar

Posted by GitBox <gi...@apache.org>.
bntnam commented on a change in pull request #13439:
URL: https://github.com/apache/beam/pull/13439#discussion_r537199668



##########
File path: website/www/site/layouts/index.html
##########
@@ -154,6 +135,35 @@ <h4 class="calendar-card-small-title">
   </div>
 {{ end }}
 
+{{ define "quotes-section" }}
+  <div class="quotes">
+    <div class="quotes-title">
+      They tried it out
+    </div>
+    <div class="quotes-content">
+      {{ $data := index $.Site.Data .Site.Language.Lang }}
+      {{ range $quote := $data.quotes }}
+          {{ partial "quotes/quote.html" (dict "icon" $quote.icon "text" $quote.text  "logoUrl" $quote.logoUrl) }}
+      {{ end }}
+    </div>
+  </div>
+{{ end }}
+
+{{ define "quotes-mobile-section" }}
+  <div class="quotes-mobile">
+    <div class="quotes-mobile-title">
+      They tried it out
+    </div>
+    <div id="my-keen-slider" class="keen-slider">

Review comment:
       Yeah, they're also specified in the keen slider library. I just moved the CDN to our own file in terms of consistency.




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] bntnam commented on a change in pull request #13439: [Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar

Posted by GitBox <gi...@apache.org>.
bntnam commented on a change in pull request #13439:
URL: https://github.com/apache/beam/pull/13439#discussion_r537214303



##########
File path: website/www/site/layouts/partials/header.html
##########
@@ -92,3 +92,49 @@
       </ul>
     </div>
 </nav>
+
+<nav class="navigation-bar-desktop">
+  <a href={{ "/" | relLangURL }} class="navbar-logo" >
+    <img src="/images/beam_logo_navbar.png" alt="Beam Logo">
+  </a>
+  <div class="navbar-links">
+    <a class="navbar-link" href={{ "/get-started/beam-overview/" | relLangURL }}>{{ T "nav-get-started" }}</a>
+    <li class="dropdown navbar-dropdown navbar-dropdown-documentation">
+      <a class="navbar-link" href="#" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">
+        Documentation
+        <span>
+          {{ with resources.Get "icons/navbar-documentation-icon.svg" }}
+            {{ .Content | safeHTML }}
+          {{ end }}
+        </span>

Review comment:
       Anyway, I guess that I know the problem which occurs on staging. 🤔 




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] bntnam commented on a change in pull request #13439: [Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar

Posted by GitBox <gi...@apache.org>.
bntnam commented on a change in pull request #13439:
URL: https://github.com/apache/beam/pull/13439#discussion_r534628628



##########
File path: website/www/site/layouts/index.html
##########
@@ -154,6 +135,35 @@ <h4 class="calendar-card-small-title">
   </div>
 {{ end }}
 
+{{ define "quotes-section" }}
+  <div class="quotes">
+    <div class="quotes-title">
+      They tried it out
+    </div>
+    <div class="quotes-content">
+      {{ $data := index $.Site.Data .Site.Language.Lang }}
+      {{ range $quote := $data.quotes }}
+          {{ partial "quotes/quote.html" (dict "icon" $quote.icon "text" $quote.text  "logoUrl" $quote.logoUrl) }}
+      {{ end }}
+    </div>
+  </div>
+{{ end }}
+
+{{ define "quotes-mobile-section" }}
+  <div class="quotes-mobile">
+    <div class="quotes-mobile-title">
+      They tried it out
+    </div>
+    <div id="my-keen-slider" class="keen-slider">

Review comment:
       I tried and I figured out that the external library (Keen Slider) was using this id to render an element on browser so we should leave it as default. I'll write a comment here to make sense.




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] bntnam commented on a change in pull request #13439: [Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar

Posted by GitBox <gi...@apache.org>.
bntnam commented on a change in pull request #13439:
URL: https://github.com/apache/beam/pull/13439#discussion_r537207170



##########
File path: website/www/site/assets/scss/_quotes.scss
##########
@@ -63,10 +63,121 @@
       margin-right: 0;
     }
   }
+  
+  // Sliding feature is only displayed on mobile version
+  .keen-slider {
+    display: none;
+  }
+
+  .dots {
+    display: none;
+  }
+
+  .keen-slider {
+    width: 327px;
+    margin: 0 auto;
+    border-radius: 16px;
+    background-color: $color-white;
+    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16),
+      0 4px 4px 0 rgba(0, 0, 0, 0.06);
+
+    .keen-slider__slide {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      width: 100%;
+      max-width: 327px;
+      height: 468px;
+      padding: 55px 24px 24px 24px;
+
+      .quote-text {
+        @extend .component-quote;
+
+        margin: 108px 0 20px 0;
+      }
+
+      img {
+        width: 172px;
+      }
+    }
+  }
+
+  .dots {
+    display: none;
+    padding: 10px 0;
+    justify-content: center;
+    margin-top: 46px;
+  }
+
+  .dot {
+    border: none;
+    width: 13px;
+    height: 13px;
+    background: $color-smoke;
+    border-radius: 50%;
+    margin: 0 5px;
+    padding: 4px;
+    cursor: pointer;
+  }
+
+  .dot:focus {
+    outline: none;
+  }
+
+  .dot--active {
+    background: $color-sun;
+  }
 }
 
 @media (max-width: $tablet) {
   .quotes {
-    display: none;
+    .quotes-title {
+      margin-bottom: 64px;
+    }
+
+    .quotes-desktop {
+      display: none;
+    }
+
+    .keen-slider {
+      display: flex;
+    }
+
+    .dots {
+      display: flex;
+    }
   }
 }
+
+/*# sourceMappingURL=keen-slider.min.css.map */
+// This is pulled from "https://cdn.jsdelivr.net/npm/keen-slider@5.3.2/keen-slider.min.css" to serve the consistency

Review comment:
       Done!




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] bntnam commented on a change in pull request #13439: [Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar

Posted by GitBox <gi...@apache.org>.
bntnam commented on a change in pull request #13439:
URL: https://github.com/apache/beam/pull/13439#discussion_r534646084



##########
File path: website/www/site/i18n/home/hero/en.yaml
##########
@@ -10,9 +10,11 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-- quote: "A framework that delivers the flexibility and advanced functionality our customers need."
-  name: –Talend
-- quote: "Apache Beam has powerful semantics that solve real-world challenges of stream processing."
-  name: –PayPal
-- quote: "Apache Beam represents a principled approach for analyzing data streams."
-  name: –data Artisans
+- id: home-hero-title
+  translation: Introducing Apache Beam
+- id: home-hero-heading
+  translation: An advanced unified programming model
+- id: home-hero-subheading
+  translation: Implement batch and streaming data processing jobs that run on any execution engine.
+- id: home-hero-button
+  translation: Install Beam

Review comment:
       This file contains texts of Hero component (the Image Cover on header).




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] TheNeuralBit merged pull request #13439: [Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar

Posted by GitBox <gi...@apache.org>.
TheNeuralBit merged pull request #13439:
URL: https://github.com/apache/beam/pull/13439


   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] bntnam commented on a change in pull request #13439: [Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar

Posted by GitBox <gi...@apache.org>.
bntnam commented on a change in pull request #13439:
URL: https://github.com/apache/beam/pull/13439#discussion_r537202079



##########
File path: website/www/site/layouts/partials/header.html
##########
@@ -92,3 +92,49 @@
       </ul>
     </div>
 </nav>
+
+<nav class="navigation-bar-desktop">
+  <a href={{ "/" | relLangURL }} class="navbar-logo" >
+    <img src="/images/beam_logo_navbar.png" alt="Beam Logo">
+  </a>
+  <div class="navbar-links">
+    <a class="navbar-link" href={{ "/get-started/beam-overview/" | relLangURL }}>{{ T "nav-get-started" }}</a>
+    <li class="dropdown navbar-dropdown navbar-dropdown-documentation">
+      <a class="navbar-link" href="#" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">
+        Documentation
+        <span>
+          {{ with resources.Get "icons/navbar-documentation-icon.svg" }}
+            {{ .Content | safeHTML }}
+          {{ end }}
+        </span>

Review comment:
       I can't access the link
   
   <img width="778" alt="Screen Shot 2020-12-07 at 10 12 22" src="https://user-images.githubusercontent.com/23557826/101305241-ce186880-3874-11eb-909c-a36486a5dcfd.png">
   




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] bntnam commented on pull request #13439: [Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar

Posted by GitBox <gi...@apache.org>.
bntnam commented on pull request #13439:
URL: https://github.com/apache/beam/pull/13439#issuecomment-735887285


   Review: @TheNeuralBit 


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] TheNeuralBit commented on a change in pull request #13439: [Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar

Posted by GitBox <gi...@apache.org>.
TheNeuralBit commented on a change in pull request #13439:
URL: https://github.com/apache/beam/pull/13439#discussion_r534528443



##########
File path: website/www/site/layouts/index.html
##########
@@ -154,6 +135,35 @@ <h4 class="calendar-card-small-title">
   </div>
 {{ end }}
 
+{{ define "quotes-section" }}
+  <div class="quotes">
+    <div class="quotes-title">
+      They tried it out
+    </div>
+    <div class="quotes-content">
+      {{ $data := index $.Site.Data .Site.Language.Lang }}
+      {{ range $quote := $data.quotes }}
+          {{ partial "quotes/quote.html" (dict "icon" $quote.icon "text" $quote.text  "logoUrl" $quote.logoUrl) }}
+      {{ end }}
+    </div>
+  </div>
+{{ end }}
+
+{{ define "quotes-mobile-section" }}
+  <div class="quotes-mobile">
+    <div class="quotes-mobile-title">
+      They tried it out
+    </div>
+    <div id="my-keen-slider" class="keen-slider">

Review comment:
       nit: could this id be more specific? Maybe "quote-slider"?

##########
File path: website/www/site/layouts/partials/hooks/body-end.html
##########
@@ -0,0 +1,17 @@
+{{/*
+  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.
+*/}}
+
+<script src="/js/hero/lottie-light.min.js"></script>
+<script src="/js/hero/hero-desktop.js"></script>
+<script src="/js/hero/hero-mobile.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/keen-slider@5.3.2/keen-slider.min.js"></script>
+<script src="/js/quotes-slider.js"></script>

Review comment:
       It looks like the existing JS is brought in in the `<head>` tag. I know it's common to put some JS at the end of the body so loading and executing it doesn't delay loading content, but I'm curious how one decides which JS belongs here vs. in `<head>`? A comment clarifying that would be good

##########
File path: website/www/site/i18n/home/hero/en.yaml
##########
@@ -10,9 +10,11 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-- quote: "A framework that delivers the flexibility and advanced functionality our customers need."
-  name: –Talend
-- quote: "Apache Beam has powerful semantics that solve real-world challenges of stream processing."
-  name: –PayPal
-- quote: "Apache Beam represents a principled approach for analyzing data streams."
-  name: –data Artisans
+- id: home-hero-title
+  translation: Introducing Apache Beam
+- id: home-hero-heading
+  translation: An advanced unified programming model
+- id: home-hero-subheading
+  translation: Implement batch and streaming data processing jobs that run on any execution engine.
+- id: home-hero-button
+  translation: Install Beam

Review comment:
       Is this actually a move? The files seem unrelated

##########
File path: website/www/site/static/js/hero/lottie-light.min.js
##########
@@ -0,0 +1,15 @@
+(typeof navigator !== "undefined") && (function(root, factory) {

Review comment:
       This seems to be MIT licensed (based on https://github.com/airbnb/lottie-web), but it doesn't include the license and copyright as it should (for example look at our [bootstrap](https://github.com/apache/beam/blob/master/website/www/site/static/js/bootstrap.min.js). It looks like you just pulled these from https://cdnjs.com/libraries/lottie-web as recommended in airbnb.io/lottie, so maybe its not our problem? I don't know.
   
   This PR is just merging into the website-revamp branch, so we don't need to figure it out right away, but we should figure it out before merging to master.
   
   CC: @kennknowles wdyt?

##########
File path: website/www/site/layouts/index.html
##########
@@ -154,6 +135,35 @@ <h4 class="calendar-card-small-title">
   </div>
 {{ end }}
 
+{{ define "quotes-section" }}
+  <div class="quotes">
+    <div class="quotes-title">
+      They tried it out
+    </div>
+    <div class="quotes-content">
+      {{ $data := index $.Site.Data .Site.Language.Lang }}
+      {{ range $quote := $data.quotes }}
+          {{ partial "quotes/quote.html" (dict "icon" $quote.icon "text" $quote.text  "logoUrl" $quote.logoUrl) }}
+      {{ end }}
+    </div>
+  </div>
+{{ end }}
+
+{{ define "quotes-mobile-section" }}
+  <div class="quotes-mobile">
+    <div class="quotes-mobile-title">
+      They tried it out
+    </div>
+    <div id="my-keen-slider" class="keen-slider">
+      {{ $data := index $.Site.Data .Site.Language.Lang }}
+      {{ range $quote := $data.quotes }}
+          {{ partial "quotes/quote-mobile.html" (dict "icon" $quote.icon "text" $quote.text  "logoUrl" $quote.logoUrl) }}
+      {{ end }}
+    </div>
+    <div id="dots" class="dots"></div>

Review comment:
       Same here, if an id is necessary please make it more specific.

##########
File path: website/www/site/layouts/partials/head.html
##########
@@ -45,6 +45,7 @@
 <link rel="canonical" href="{{ .Site.Params.hostName }}{{ .Permalink | absURL }}" data-proofer-ignore>
 <link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico">
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/keen-slider@5.3.2/keen-slider.min.css" />

Review comment:
       I think we should be consistent about either serving our own dependencies, or pulling them from CDNs. I'd prefer the latter if possible

##########
File path: website/www/site/static/js/hero/hero-mobile.json
##########
@@ -0,0 +1 @@
+{"v":"5.7.1","fr":30,"ip":0,"op":120,"w":375,"h":462,"nm":"opt2","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":24,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[62.997],"e":[20]},{"t":77}],"ix":10},"p":{"a":0,"k":[1635.5,319,0],"ix":2},"a":{"a":0,"k":[1228.201,-1.163,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[72.266,-33.656],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"i
 x":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 6","sr":1,"ks":{"o":{"a":0,"k":82,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[-35],"e":[-20]},{"t":56}],"ix":10},"p":{"a":0,"k":[-2082.5,375,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.341176470588,0.043137254902,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":
 {"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Shape Layer 7","sr":1,"ks":{"o":{"a":0,"k":66,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[-53],"e":[-34]},{"t":76}],"ix":10},"p":{"a":0,"k":[-1990.5,983,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a
 ":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":24,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-6,"s":[-46],"e":[20]},{"t":67}],"ix":10},"p":{"a":0,"k":[1117.5,959,0],"ix":2},"a":{"a":0,"k":[1171.735,-35.884,0],"ix":1},"s":{"a":0,"k":[100,78.683,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[72.266,-33
 .656],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Shape Layer 4","sr":1,"ks":{"o":{"a":0,"k":20,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[0.759]},"t":-5,"s":[2],"e":[-27]},{"t":56}],"ix":10},"p":{"a":0,"k":[-484.5,1051,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic
  - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Shape Layer 8","sr":1,"ks":{"o":{"a":0,"k":66,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-7,"s":[2],"e":[-43]},{"t":56}],"ix":10},"p":{"a":0,"k":[-542.5,1281,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,81.692,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5}
 ,"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-152.112,163.925],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":9,"ty":1,"nm":"Orange Solid 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[187.5,231,0],"ix":2},"a":{"a":0,"k":[741.5,447,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"sw":1483,"sh":894,"sc":"#ff570b","ip":0,"op":720,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":1,"nm":"Medium Orange Solid 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[187.5,231,0],"ix":2},"a":{"a":0,"k":[741.5,447,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"sw":1483,"sh":894,"sc":"#f87
 924","ip":0,"op":720,"st":0,"bm":0}],"markers":[]}

Review comment:
       Is there any way we can get a license header on these? They do seem like creative works

##########
File path: website/www/site/layouts/index.html
##########
@@ -154,6 +135,35 @@ <h4 class="calendar-card-small-title">
   </div>
 {{ end }}
 
+{{ define "quotes-section" }}
+  <div class="quotes">
+    <div class="quotes-title">
+      They tried it out
+    </div>
+    <div class="quotes-content">
+      {{ $data := index $.Site.Data .Site.Language.Lang }}
+      {{ range $quote := $data.quotes }}
+          {{ partial "quotes/quote.html" (dict "icon" $quote.icon "text" $quote.text  "logoUrl" $quote.logoUrl) }}
+      {{ end }}
+    </div>
+  </div>
+{{ end }}
+
+{{ define "quotes-mobile-section" }}
+  <div class="quotes-mobile">
+    <div class="quotes-mobile-title">

Review comment:
       Is it necessary to have separate quotes-mobile and quotes-mobile-title classes for this part? Couldn't this be handled by CSS?

##########
File path: website/www/site/layouts/partials/header.html
##########
@@ -92,3 +92,49 @@
       </ul>
     </div>
 </nav>
+
+<nav class="navigation-bar-desktop">
+  <a href={{ "/" | relLangURL }} class="navbar-logo" >
+    <img src="/images/beam_logo_navbar.png" alt="Beam Logo">
+  </a>
+  <div class="navbar-links">
+    <a class="navbar-link" href={{ "/get-started/beam-overview/" | relLangURL }}>{{ T "nav-get-started" }}</a>
+    <li class="dropdown navbar-dropdown navbar-dropdown-documentation">
+      <a class="navbar-link" href="#" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">
+        Documentation
+        <span>
+          {{ with resources.Get "icons/navbar-documentation-icon.svg" }}
+            {{ .Content | safeHTML }}
+          {{ end }}
+        </span>

Review comment:
       This renders strangely for me (on Desktop Chrome):
   ![image](https://user-images.githubusercontent.com/675055/100943010-3a7c1c00-34b1-11eb-9a69-64ec0c585f12.png)
   
   




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] TheNeuralBit commented on a change in pull request #13439: [Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar

Posted by GitBox <gi...@apache.org>.
TheNeuralBit commented on a change in pull request #13439:
URL: https://github.com/apache/beam/pull/13439#discussion_r535683091



##########
File path: website/www/site/layouts/index.html
##########
@@ -154,6 +135,35 @@ <h4 class="calendar-card-small-title">
   </div>
 {{ end }}
 
+{{ define "quotes-section" }}
+  <div class="quotes">
+    <div class="quotes-title">
+      They tried it out
+    </div>
+    <div class="quotes-content">
+      {{ $data := index $.Site.Data .Site.Language.Lang }}
+      {{ range $quote := $data.quotes }}
+          {{ partial "quotes/quote.html" (dict "icon" $quote.icon "text" $quote.text  "logoUrl" $quote.logoUrl) }}
+      {{ end }}
+    </div>
+  </div>
+{{ end }}
+
+{{ define "quotes-mobile-section" }}
+  <div class="quotes-mobile">
+    <div class="quotes-mobile-title">
+      They tried it out
+    </div>
+    <div id="my-keen-slider" class="keen-slider">

Review comment:
       It looks like "my-keen-slider" and "dots" are both specified in quotes-slider.js which we control, couldn't we change it there? Or are they also specified in the keen slider library?




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] bntnam commented on pull request #13439: [Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar

Posted by GitBox <gi...@apache.org>.
bntnam commented on pull request #13439:
URL: https://github.com/apache/beam/pull/13439#issuecomment-736185851


   Hmm. I wonder why the Java check is failed. 🤔 


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] bntnam commented on a change in pull request #13439: [Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar

Posted by GitBox <gi...@apache.org>.
bntnam commented on a change in pull request #13439:
URL: https://github.com/apache/beam/pull/13439#discussion_r534634771



##########
File path: website/www/site/layouts/partials/header.html
##########
@@ -92,3 +92,49 @@
       </ul>
     </div>
 </nav>
+
+<nav class="navigation-bar-desktop">
+  <a href={{ "/" | relLangURL }} class="navbar-logo" >
+    <img src="/images/beam_logo_navbar.png" alt="Beam Logo">
+  </a>
+  <div class="navbar-links">
+    <a class="navbar-link" href={{ "/get-started/beam-overview/" | relLangURL }}>{{ T "nav-get-started" }}</a>
+    <li class="dropdown navbar-dropdown navbar-dropdown-documentation">
+      <a class="navbar-link" href="#" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">
+        Documentation
+        <span>
+          {{ with resources.Get "icons/navbar-documentation-icon.svg" }}
+            {{ .Content | safeHTML }}
+          {{ end }}
+        </span>

Review comment:
       Ohh, could you please run it on private mode to make sure that there is no cache? I tested it on Chrome, Firefox, Safari and all fine.




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] bntnam commented on a change in pull request #13439: [Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar

Posted by GitBox <gi...@apache.org>.
bntnam commented on a change in pull request #13439:
URL: https://github.com/apache/beam/pull/13439#discussion_r534628628



##########
File path: website/www/site/layouts/index.html
##########
@@ -154,6 +135,35 @@ <h4 class="calendar-card-small-title">
   </div>
 {{ end }}
 
+{{ define "quotes-section" }}
+  <div class="quotes">
+    <div class="quotes-title">
+      They tried it out
+    </div>
+    <div class="quotes-content">
+      {{ $data := index $.Site.Data .Site.Language.Lang }}
+      {{ range $quote := $data.quotes }}
+          {{ partial "quotes/quote.html" (dict "icon" $quote.icon "text" $quote.text  "logoUrl" $quote.logoUrl) }}
+      {{ end }}
+    </div>
+  </div>
+{{ end }}
+
+{{ define "quotes-mobile-section" }}
+  <div class="quotes-mobile">
+    <div class="quotes-mobile-title">
+      They tried it out
+    </div>
+    <div id="my-keen-slider" class="keen-slider">

Review comment:
       I tried and I figured out that the external library was using this id to render an element on browser so we should leave it as default. I can write a comment here if you want.




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [beam] bntnam commented on a change in pull request #13439: [Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar

Posted by GitBox <gi...@apache.org>.
bntnam commented on a change in pull request #13439:
URL: https://github.com/apache/beam/pull/13439#discussion_r534628628



##########
File path: website/www/site/layouts/index.html
##########
@@ -154,6 +135,35 @@ <h4 class="calendar-card-small-title">
   </div>
 {{ end }}
 
+{{ define "quotes-section" }}
+  <div class="quotes">
+    <div class="quotes-title">
+      They tried it out
+    </div>
+    <div class="quotes-content">
+      {{ $data := index $.Site.Data .Site.Language.Lang }}
+      {{ range $quote := $data.quotes }}
+          {{ partial "quotes/quote.html" (dict "icon" $quote.icon "text" $quote.text  "logoUrl" $quote.logoUrl) }}
+      {{ end }}
+    </div>
+  </div>
+{{ end }}
+
+{{ define "quotes-mobile-section" }}
+  <div class="quotes-mobile">
+    <div class="quotes-mobile-title">
+      They tried it out
+    </div>
+    <div id="my-keen-slider" class="keen-slider">

Review comment:
       I tried and I figured out that the external library (Keen Slider) was using this id to render an element on browser so we should leave it as default. I can write a comment here if you want.




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org