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/12/02 23:24:10 UTC
[GitHub] [beam] TheNeuralBit commented on a change in pull request #13439: [Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar
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):
----------------------------------------------------------------
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