You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by ka...@apache.org on 2019/10/29 23:25:09 UTC
[airflow-site] branch aip-11 updated: Improve case-study/person
pagination (#102)
This is an automated email from the ASF dual-hosted git repository.
kamilbregula pushed a commit to branch aip-11
in repository https://gitbox.apache.org/repos/asf/airflow-site.git
The following commit(s) were added to refs/heads/aip-11 by this push:
new c92f732 Improve case-study/person pagination (#102)
c92f732 is described below
commit c92f7328ed84809bca17412df047e9854bcb05a8
Author: Kamil Gabryjelski <ka...@gmail.com>
AuthorDate: Wed Oct 30 00:25:01 2019 +0100
Improve case-study/person pagination (#102)
---
landing-pages/site/assets/scss/_base-layout.scss | 9 +++
.../site/assets/scss/_community-page.scss | 5 --
.../site/content/en/case-studies/example-case7.md | 23 ++++++
.../site/content/en/case-studies/example-case8.md | 23 ++++++
.../site/content/en/case-studies/example-case9.md | 23 ++++++
landing-pages/site/data/commiters.json | 40 ++++++++++
landing-pages/site/layouts/case-studies/list.html | 5 +-
landing-pages/site/layouts/community/list.html | 92 +++++++++++-----------
landing-pages/src/index.js | 7 +-
landing-pages/src/js/showAllCommiters.js | 33 +++++---
10 files changed, 196 insertions(+), 64 deletions(-)
diff --git a/landing-pages/site/assets/scss/_base-layout.scss b/landing-pages/site/assets/scss/_base-layout.scss
index e235cb6..e09d0e3 100644
--- a/landing-pages/site/assets/scss/_base-layout.scss
+++ b/landing-pages/site/assets/scss/_base-layout.scss
@@ -88,3 +88,12 @@
padding-left: 20px;
padding-right: 20px;
}
+
+.show-more-button {
+ width: fit-content;
+ margin: 60px auto 0;
+
+ @media (max-width: 640px) {
+ margin-top: 30px;
+ }
+}
diff --git a/landing-pages/site/assets/scss/_community-page.scss b/landing-pages/site/assets/scss/_community-page.scss
index 093a28d..e7a5cc1 100644
--- a/landing-pages/site/assets/scss/_community-page.scss
+++ b/landing-pages/site/assets/scss/_community-page.scss
@@ -51,11 +51,6 @@
margin-bottom: 40px;
}
}
-
- &--button-container {
- width: fit-content;
- margin: 60px auto 0;
- }
}
@media (max-width: $mobile) {
diff --git a/landing-pages/site/content/en/case-studies/example-case7.md b/landing-pages/site/content/en/case-studies/example-case7.md
new file mode 100644
index 0000000..9100be7
--- /dev/null
+++ b/landing-pages/site/content/en/case-studies/example-case7.md
@@ -0,0 +1,23 @@
+---
+title: "Example 7"
+linkTitle: "Example 7"
+quote:
+ text: "A great ecosystem and community that comes together to address about any batch data pipeline need."
+ author: "Austin Benett, CTO at Spotify"
+logo_path: "icons/dish-logo.svg"
+---
+
+##### What was the problem?
+We faced increasing complexity managing lengthy crontabs with scheduling being an issue, this required carefully planning timing due to resource constraints, usage patterns, and especially custom code needed for retry logic. In the last case, having to verify success of previous jobs and/or steps prior to running the next. Furthermore, time to results is important, but we were increasingly relying on buffers for processing, where things were effectively sitting idle and not processing, [...]
+
+##### How did Apache Airflow help to solve this problem?
+Relying on community built and existing hooks and operators to the majority of cloud services we use has allowed us to focus on business outcomes.
+
+##### What are the results?
+Airflow helps us manage many of our pain-points, letting us benefit from the overall ecosystem and
+community. We are able to reduce time-to-end delivery of data products by being event-driven in our
+processing flows (in our first usage, for example, we were able to take out over 2 hours - on average - of various
+waiting between stages). Furthermore, we are able to arrive at and iterate on products quicker as a result of
+not needing as much custom or roll-our-own solutions. For Our code base is smaller and simpler, it is easier to
+follow, and to a large extent our DAGs serve as sufficient documentation for new contributors to understand
+what is going on.
diff --git a/landing-pages/site/content/en/case-studies/example-case8.md b/landing-pages/site/content/en/case-studies/example-case8.md
new file mode 100644
index 0000000..5b23c08
--- /dev/null
+++ b/landing-pages/site/content/en/case-studies/example-case8.md
@@ -0,0 +1,23 @@
+---
+title: "Example 8"
+linkTitle: "Example 8"
+quote:
+ text: "A great ecosystem and community that comes together to address about any batch data pipeline need."
+ author: "Austin Benett, CTO at Spotify"
+logo_path: "icons/dish-logo.svg"
+---
+
+##### What was the problem?
+We faced increasing complexity managing lengthy crontabs with scheduling being an issue, this required carefully planning timing due to resource constraints, usage patterns, and especially custom code needed for retry logic. In the last case, having to verify success of previous jobs and/or steps prior to running the next. Furthermore, time to results is important, but we were increasingly relying on buffers for processing, where things were effectively sitting idle and not processing, [...]
+
+##### How did Apache Airflow help to solve this problem?
+Relying on community built and existing hooks and operators to the majority of cloud services we use has allowed us to focus on business outcomes.
+
+##### What are the results?
+Airflow helps us manage many of our pain-points, letting us benefit from the overall ecosystem and
+community. We are able to reduce time-to-end delivery of data products by being event-driven in our
+processing flows (in our first usage, for example, we were able to take out over 2 hours - on average - of various
+waiting between stages). Furthermore, we are able to arrive at and iterate on products quicker as a result of
+not needing as much custom or roll-our-own solutions. For Our code base is smaller and simpler, it is easier to
+follow, and to a large extent our DAGs serve as sufficient documentation for new contributors to understand
+what is going on.
diff --git a/landing-pages/site/content/en/case-studies/example-case9.md b/landing-pages/site/content/en/case-studies/example-case9.md
new file mode 100644
index 0000000..6ea82d7
--- /dev/null
+++ b/landing-pages/site/content/en/case-studies/example-case9.md
@@ -0,0 +1,23 @@
+---
+title: "Example 9"
+linkTitle: "Example 9"
+quote:
+ text: "A great ecosystem and community that comes together to address about any batch data pipeline need."
+ author: "Austin Benett, CTO at Spotify"
+logo_path: "icons/dish-logo.svg"
+---
+
+##### What was the problem?
+We faced increasing complexity managing lengthy crontabs with scheduling being an issue, this required carefully planning timing due to resource constraints, usage patterns, and especially custom code needed for retry logic. In the last case, having to verify success of previous jobs and/or steps prior to running the next. Furthermore, time to results is important, but we were increasingly relying on buffers for processing, where things were effectively sitting idle and not processing, [...]
+
+##### How did Apache Airflow help to solve this problem?
+Relying on community built and existing hooks and operators to the majority of cloud services we use has allowed us to focus on business outcomes.
+
+##### What are the results?
+Airflow helps us manage many of our pain-points, letting us benefit from the overall ecosystem and
+community. We are able to reduce time-to-end delivery of data products by being event-driven in our
+processing flows (in our first usage, for example, we were able to take out over 2 hours - on average - of various
+waiting between stages). Furthermore, we are able to arrive at and iterate on products quicker as a result of
+not needing as much custom or roll-our-own solutions. For Our code base is smaller and simpler, it is easier to
+follow, and to a large extent our DAGs serve as sufficient documentation for new contributors to understand
+what is going on.
diff --git a/landing-pages/site/data/commiters.json b/landing-pages/site/data/commiters.json
index fe939cc..7e48762 100644
--- a/landing-pages/site/data/commiters.json
+++ b/landing-pages/site/data/commiters.json
@@ -94,5 +94,45 @@
"linkedin": "https://linkedin.com",
"nick": "mistercrunch",
"twitter": "https://twitter.com"
+ },
+ {
+ "name": "Maxime \u201cMax\u201d Beauchemin",
+ "github": "https://github.com",
+ "image": "/stock-guy.jpg",
+ "linkedin": "https://linkedin.com",
+ "nick": "mistercrunch",
+ "twitter": "https://twitter.com"
+ },
+ {
+ "name": "Maxime \u201cMax\u201d Beauchemin",
+ "github": "https://github.com",
+ "image": "/stock-guy.jpg",
+ "linkedin": "https://linkedin.com",
+ "nick": "mistercrunch",
+ "twitter": "https://twitter.com"
+ },
+ {
+ "name": "Maxime \u201cMax\u201d Beauchemin",
+ "github": "https://github.com",
+ "image": "/stock-guy.jpg",
+ "linkedin": "https://linkedin.com",
+ "nick": "mistercrunch",
+ "twitter": "https://twitter.com"
+ },
+ {
+ "name": "Maxime \u201cMax\u201d Beauchemin",
+ "github": "https://github.com",
+ "image": "/stock-guy.jpg",
+ "linkedin": "https://linkedin.com",
+ "nick": "mistercrunch",
+ "twitter": "https://twitter.com"
+ },
+ {
+ "name": "Maxime \u201cMax\u201d Beauchemin",
+ "github": "https://github.com",
+ "image": "/stock-guy.jpg",
+ "linkedin": "https://linkedin.com",
+ "nick": "mistercrunch",
+ "twitter": "https://twitter.com"
}
]
diff --git a/landing-pages/site/layouts/case-studies/list.html b/landing-pages/site/layouts/case-studies/list.html
index 0ec1351..2c3c597 100644
--- a/landing-pages/site/layouts/case-studies/list.html
+++ b/landing-pages/site/layouts/case-studies/list.html
@@ -23,12 +23,15 @@
<h5 class="page-subtitle">
Find out how Apache Airflow helped businesses reach their goals
</h5>
- <div class="list-items">
+ <div id="case-studies-container" class="list-items">
{{ range .Pages }}
<a href="{{ .RelPermalink }}" class="list-item">
{{ partial "boxes/case-study" .Params }}
</a>
{{ end }}
</div>
+ <div class="show-more-button">
+ {{ partial "buttons/button-filled" (dict "text" "Show more" "id" "show-more-case-studies")}}
+ </div>
</div>
{{ end }}
diff --git a/landing-pages/site/layouts/community/list.html b/landing-pages/site/layouts/community/list.html
index 50b5a83..96bf5a2 100644
--- a/landing-pages/site/layouts/community/list.html
+++ b/landing-pages/site/layouts/community/list.html
@@ -1,58 +1,58 @@
{{/*
- Licensed to the Apache Software Foundation (ASF) under one
- or more contributor license agreements. See the NOTICE file
- distributed with this work for additional information
- regarding copyright ownership. The ASF licenses this file
- to you under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance
- with the License. You may obtain a copy of the License at
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0
+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.
+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.
*/}}
{{ define "main" }}
- <div class="community--header-container">
- <h2 class="page-header">Community</h2>
- <h5 class="page-subtitle">
- Started at Airbnb as open source from the very first commit. Apache Airflow community
- has about 500 active members who support each other in solving problems.
- </h5>
+<div class="community--header-container">
+ <h2 class="page-header">Community</h2>
+ <h5 class="page-subtitle">
+ Started at Airbnb as open source from the very first commit. Apache Airflow community
+ has about 500 active members who support each other in solving problems.
+ </h5>
- <h5 class="community--header-join">Join the community!</h5>
- {{ with .Content }}
- <div class="no-width-restriction">
- {{ . }}
- </div>
- {{ end }}
+ <h5 class="community--header-join">Join the community!</h5>
+ {{ with .Content }}
+ <div class="no-width-restriction">
+ {{ . }}
</div>
- <h5 class="community--commiters-header large-margin">Primary Members Commiters</h5>
- <div id="pmc-container" class="list-items">
- {{ range .Site.Data.commiters }}
- <div class="list-item">
- {{ partial "boxes/commiter" . }}
- </div>
- {{ end }}
- </div>
- <div class="community--button-container">
- {{ partial "buttons/button-filled" (dict "text" "Show all" "id" "show-all-pmcs")}}
+ {{ end }}
+</div>
+<h5 class="community--commiters-header large-margin">Primary Members Commiters</h5>
+<div id="pmc-container" class="list-items">
+ {{ range .Site.Data.commiters }}
+ <div class="list-item">
+ {{ partial "boxes/commiter" . }}
</div>
+ {{ end }}
+</div>
+<div class="show-more-button">
+ {{ partial "buttons/button-filled" (dict "text" "Show more" "id" "show-more-pmcs")}}
+</div>
- <h5 class="community--commiters-header">Commiters</h5>
- <div id="commiters-container" class="list-items">
- {{ range .Site.Data.commiters }}
- <div class="list-item">
- {{ partial "boxes/commiter" . }}
- </div>
- {{ end }}
- </div>
- <div class="community--button-container">
- {{ partial "buttons/button-filled" (dict "text" "Show all" "id" "show-all-commiters")}}
+<h5 class="community--commiters-header">Commiters</h5>
+<div id="commiters-container" class="list-items">
+ {{ range .Site.Data.commiters }}
+ <div class="list-item">
+ {{ partial "boxes/commiter" . }}
</div>
+ {{ end }}
+</div>
+<div class="show-more-button">
+ {{ partial "buttons/button-filled" (dict "text" "Show more" "id" "show-more-commiters")}}
+</div>
{{ end }}
diff --git a/landing-pages/src/index.js b/landing-pages/src/index.js
index b7323d6..33097b9 100644
--- a/landing-pages/src/index.js
+++ b/landing-pages/src/index.js
@@ -17,9 +17,10 @@
* under the License.
*/
-import {showAllCommiters} from "./js/showAllCommiters";
+import {showMore} from "./js/showAllCommiters";
import {handleActiveVideo} from "./js/handleActiveVideo";
-showAllCommiters(8, "commiters-container", "show-all-commiters");
-showAllCommiters(8, "pmc-container", "show-all-pmcs");
+showMore("#commiters-container", "#show-more-commiters");
+showMore("#pmc-container", "#show-more-pmcs");
+showMore("#case-studies-container", "#show-more-case-studies");
handleActiveVideo();
diff --git a/landing-pages/src/js/showAllCommiters.js b/landing-pages/src/js/showAllCommiters.js
index 4786694..77aa60d 100644
--- a/landing-pages/src/js/showAllCommiters.js
+++ b/landing-pages/src/js/showAllCommiters.js
@@ -17,22 +17,37 @@
* under the License.
*/
-export const showAllCommiters = (initialChildrenCount, containerID, buttonID) => {
- const container = window.document.getElementById(containerID);
- const button = window.document.getElementById(buttonID);
+const itemsOnPage = 8;
+
+const showElementsOnPage = (elements, currentPage) => {
+ elements.slice(currentPage * itemsOnPage, (currentPage + 1) * itemsOnPage).map((child) => {
+ child.style.display = "";
+ });
+};
+
+export const showMore = (containerID, buttonID) => {
+ let currentPage = 1;
+ const container = window.document.querySelector(containerID);
+ const button = window.document.querySelector(buttonID);
if (!container || !button) return;
- if (container.childElementCount <= initialChildrenCount) return;
+ if (container.childElementCount <= itemsOnPage * currentPage) {
+ button.style.display = "none";
+ return;
+ }
button.style.display = "block";
- const hiddenChildren = Array.from(container.children)
- .slice(initialChildrenCount, container.childElementCount)
+ const commiterElements = Array.from(container.children);
+ commiterElements
+ .slice(itemsOnPage, container.childElementCount)
.map((child) => {
child.style.display = "none";
- return child;
});
button.addEventListener("click", () => {
- hiddenChildren.forEach((child) => child.style.display = "block");
- button.style.display = "none";
+ showElementsOnPage(commiterElements, currentPage);
+ currentPage += 1;
+ if (container.childElementCount <= itemsOnPage * currentPage) {
+ button.style.display = "none";
+ }
});
};