Make the home page into reusable and translatable blocks

This commit adds a set of block type shortcodes that is then used to build the home page. * These shortcodes gets common image resources from a new headless bundle. These resources can be inherited or overridden by translations. * The hardcoded case studies section on the home page is replaced with a query and a loop. * The hardcoded feature list on the home page is replaed qith a query and a loop.
kubernetes · Aug 24, 2018 · 316cdce · 316cdce
1 parent 3410e5a
commit 316cdce
Show file tree

Hide file tree

Showing 35 changed files with 288 additions and 2,093 deletions.
diff --git a/assets/sass/_base.sass b/assets/sass/_base.sass
@@ -1133,7 +1133,6 @@ $feature-box-div-margin-bottom: 40px
 #video
 	width: 100%
 	position: relative
-	background-image: url(/images/kub_video_banner_homepage.jpg)
 	background-position: center center
 	background-size: cover
 
@@ -1728,35 +1727,25 @@ $feature-box-div-margin-bottom: 40px
 		text-align: center
 		margin-bottom: 30px
 
+		img
+			padding-bottom: 1rem;
+
 		div
 			position: relative
 			display: inline-block
 			vertical-align: top
 			width: 100%
 			min-height: 230px
-			padding: 125px 10px 15px
-			margin-bottom: 30px
+			margin-bottom: 60px
+			padding-right: 1rem;
 			background-position: top center
-			background-repeat: no-repeat
-
-		div:nth-child(1)
-			background-image: url(/images/community_logos/pearson_logo.png)
-
-		div:nth-child(2)
-			background-image: url(/images/community_logos/box_logo.png)
-
-		div:nth-child(3)
-			background-image: url(/images/community_logos/ebay_logo.png)
-
-		div:nth-child(4)
-			background-image: url(/images/community_logos/wikimedia_foundation_logo.png)
-
+
 		p
 			font-size: 20px
 
 		a
 			position: absolute
-			bottom: 0
+			bottom: -30px;
 			left: 50%
 			transform: translateX(-50%)
 			color: $blue

diff --git a/assets/sass/_desktop.sass b/assets/sass/_desktop.sass
@@ -138,7 +138,6 @@ $video-section-height: 550px
 	#video
 		height: $video-section-height
 		position: relative
-		background-image: url(../images/kub_video_banner_homepage.jpg)
 		background-position: center center
 		background-size: cover
 

diff --git a/static/images/blocks.png → ...nt/en/_common-resources/images/blocks.png b/static/images/blocks.png → ...nt/en/_common-resources/images/blocks.png
diff --git a/static/images/flower.png → ...nt/en/_common-resources/images/flower.png b/static/images/flower.png → ...nt/en/_common-resources/images/flower.png
diff --git a/static/images/kub_video_banner_homepage.jpg → ...rces/images/kub_video_banner_homepage.jpg b/static/images/kub_video_banner_homepage.jpg → ...rces/images/kub_video_banner_homepage.jpg
diff --git a/static/images/scalable.png → .../en/_common-resources/images/scalable.png b/static/images/scalable.png → .../en/_common-resources/images/scalable.png
diff --git a/static/images/suitcase.png → .../en/_common-resources/images/suitcase.png b/static/images/suitcase.png → .../en/_common-resources/images/suitcase.png
diff --git a/content/en/_common-resources/index.md b/content/en/_common-resources/index.md
@@ -0,0 +1,3 @@
+---
+headless: true
+---
diff --git a/content/en/_index.html b/content/en/_index.html
@@ -6,178 +6,57 @@
 
 {{< deprecationwarning >}}
 
-<!--  OCEAN NODES  -->
-<section id="oceanNodes">
-    <main>
-        <div class="image-wrapper"><img src="images/flower.png"></div>
-        <div class="content">
-            <h3><a href="/docs/concepts/overview/what-is-kubernetes/">Kubernetes</a> is an open-source system for automating deployment, scaling, and management of containerized applications.</h3>
-            <p>It groups containers that make up an application into logical units for easy management and discovery. Kubernetes builds
-            upon <a href="http://queue.acm.org/detail.cfm?id=2898444">15 years of experience of running production workloads at Google</a>,
-            combined with best-of-breed ideas and practices from the community.</p>
-        </div>
-    </main>
-    <main>
-        <div class="image-wrapper"><img src="images/scalable.png"></div>
-        <div class="content">
-            <h4>Planet Scale</h4>
-            <p>Designed on the same principles that allows Google to run billions of containers a week, Kubernetes can scale without increasing your ops team.</p>
-        </div>
-    </main>
-    <main>
-        <div class="image-wrapper"><img src="images/blocks.png"></div>
-        <div class="content">
-            <h4>Never Outgrow</h4>
-            <p>Whether testing locally or running a global enterprise, Kubernetes flexibility grows with you to deliver your applications consistently and easily no matter how complex your need is.</p>
-        </div>
-    </main>
-    <main>
-        <div class="image-wrapper"><img src="images/suitcase.png"></div>
-        <div class="content">
-            <h4>Run Anywhere</h4>
-            <p>Kubernetes is open source giving you the freedom to take advantage of on-premises, hybrid, or public cloud infrastructure, letting you effortlessly move workloads to where it matters to you.</p>
-        </div>
-    </main>
-</section>
-
-<section id="video">
-    <div class="light-text">
-        <h2>The Challenges of Migrating 150+ Microservices to Kubernetes</h2>
+{{< blocks/section id="oceanNodes" >}}
+{{% blocks/feature image="flower" %}}
+### [Kubernetes]({{< relref "/docs/concepts/overview/what-is-kubernetes" >}}) is a is an open-source system for automating deployment, scaling, and management of containerized applications.
+
+It groups containers that make up an application into logical units for easy management and discovery. Kubernetes builds upon [15 years of experience of running production workloads at Google](http://queue.acm.org/detail.cfm?id=2898444), combined with best-of-breed ideas and practices from the community.
+{{% /blocks/feature %}}
+
+{{% blocks/feature image="scalable" %}}
+#### Planet Scale
+
+Designed on the same principles that allows Google to run billions of containers a week, Kubernetes can scale without increasing your ops team.
+
+{{% /blocks/feature %}}
+
+{{% blocks/feature image="blocks" %}}
+#### Never Outgrow
+
+Whether testing locally or running a global enterprise, Kubernetes flexibility grows with you to deliver your applications consistently and easily no matter how complex your need is.
+
+{{% /blocks/feature %}}
+
+{{% blocks/feature image="suitcase" %}}
+#### Run Anywhere
+
+Kubernetes is open source giving you the freedom to take advantage of on-premises, hybrid, or public cloud infrastructure, letting you effortlessly move workloads to where it matters to you.
+
+{{% /blocks/feature %}}
+
+{{< /blocks/section >}}
+
+{{< blocks/section id="video" background-image="kub_video_banner_homepage" >}}
+<div class="light-text">
+<h2>The Challenges of Migrating 150+ Microservices to Kubernetes</h2>
         <p>By Sarah Wells, Technical Director for Operations and Reliability, Financial Times</p>
         <button id="desktopShowVideoButton" onclick="kub.showVideo()">Watch Video</button>
         <br>
         <br>
         <br>
-        <a href="https://events.linuxfoundation.cn/events/kubecon-cloudnativecon-china-2018/" button id= "desktopKCButton">Attend KubeCon in Shanghai on Nov. 13-15, 2018</a>
+        <a href="https://www.lfasiallc.com/events/kubecon-cloudnativecon-china-2018/" button id="desktopKCButton">Attend KubeCon in Shanghai on Nov. 13-15, 2018</a>
         <br>
         <br>
         <br>
         <br>
-        <a href="https://events.linuxfoundation.org/events/kubecon-cloudnativecon-north-america-2018/" button id= "desktopKCButton">Attend KubeCon in Seattle on Dec. 11-13, 2018</a>
-  </div>
-  <button id="mobileShowVideoButton" onclick="kub.showVideo()"></button>
-</section>
-
-<section id="features">
-    <main>
-        <h3 class="center">Kubernetes Features</h3>
-
-        <div class="feature-box">
-            <div>
-                <h4><a href="/docs/concepts/configuration/manage-compute-resources-container/">Automatic binpacking</a></h4>
-                <p>Automatically places containers based on their resource requirements and other constraints, while not
-                    sacrificing availability. Mix critical and best-effort workloads in order to drive up utilization and save even more resources.</p>
-            </div>
-            <div>
-                <h4><a href="/docs/concepts/workloads/controllers/replicationcontroller/#what-is-a-replicationcontroller">Self-healing</a></h4>
-                <p>Restarts containers that fail, replaces and reschedules containers when nodes die, kills containers
-                    that don't respond to your user-defined health check, and doesn't advertise them to clients until they are ready to serve.</p>
-            </div>
-        </div>
-
-        <div class="feature-box">
-            <div>
-                <h4><a href="/docs/tasks/run-application/horizontal-pod-autoscale/">Horizontal scaling</a></h4>
-                <p>Scale your application up and down with a simple command, with a UI, or automatically based on CPU usage.</p>
-            </div>
-            <div>
-                <h4><a href="/docs/concepts/services-networking/service/">Service discovery and load balancing</a></h4>
-                <p>No need to modify your application to use an unfamiliar service discovery mechanism. Kubernetes gives
-                    containers their own IP addresses and a single DNS name for a set of containers, and can load-balance across them.</p>
-            </div>
-        </div>
-
-        <div class="feature-box">
-            <div>
-                <h4><a href="/docs/concepts/workloads/controllers/deployment/#what-is-a-deployment">Automated rollouts and rollbacks</a></h4>
-                <p>Kubernetes progressively rolls out changes to your application or its configuration, while monitoring
-                    application health to ensure it doesn't kill all your instances at the same time. If something goes
-                    wrong, Kubernetes will rollback the change for you. Take advantage of a growing ecosystem of deployment solutions.</p>
-            </div>
-            <div>
-                <h4><a href="/docs/concepts/configuration/secret/">Secret</a> and <a href="/docs/tasks/configure-pod-container/configure-pod-configmap/">configuration</a> management</h4>
-                <p>Deploy and update secrets and application configuration without rebuilding your image and without
-                    exposing secrets in your stack configuration.</p>
-            </div>
-        </div>
-
-        <div class="feature-box">
-            <div>
-                <h4><a href="/docs/concepts/storage/persistent-volumes/">Storage orchestration</a></h4>
-                <p>Automatically mount the storage system of your choice, whether from local storage, a public cloud provider
-                such as <a href="https://cloud.google.com/storage/">GCP</a> or <a href="https://aws.amazon.com/products/storage/">AWS</a>, or a network storage system such as NFS, iSCSI,
-                Gluster, Ceph, Cinder, or Flocker.</p>
-            </div>
-            <div>
-                <h4><a href="/docs/concepts/workloads/controllers/jobs-run-to-completion/">Batch execution</a></h4>
-                <p>In addition to services, Kubernetes can manage your batch and CI workloads, replacing containers that fail, if desired.</p>
-            </div>
-        </div>
-
-    </main>
-</section>
-
-<section id="talkToUs">
-    <main>
-        <h3>Case Studies</h3>
-        <div id="caseStudiesWrapper">
-          <div>
-              <p>Sling TV: Marrying Kubernetes and AI to Enable Proper Web Scale</p>
-              <a href="/case-studies/slingtv">Read more</a>
-          </div>
-          <div>
-              <p>Using OpenTracing to Help Pinpoint the Bottlenecks</p>
-              <a href="/case-studies/workiva">Read more</a>
-          </div>
-          <div>
-              <p>Pinning Its Past, Present, and Future on Cloud Native</p>
-              <a href="/case-studies/pinterest">Read more</a>
-          </div>
-          <div>
-              <p>Reinventing the World’s Largest Education Company With Kubernetes</p>
-              <a href="/case-studies/pearson">Read more</a>
-          </div>
-
-        </div>
-
-        <!--<div id="bigSocial">-->
-            <!--&lt;!&ndash;<div>&ndash;&gt;-->
-                <!--&lt;!&ndash;<a href="https://youtu.be/OLwzSHBtxhI">Watch the video</a>&ndash;&gt;-->
-                <!--&lt;!&ndash;<p>Creating Next Generation Kubernetes Infrastructure at Viacom</p>&ndash;&gt;-->
-            <!--&lt;!&ndash;</div>&ndash;&gt;-->
-            <!--<div>-->
-                <!--<p>Using Kubernetes to reinvent the world's largest educational company</p>-->
-                <!--<a href="/case-studies/pearson/">Read more</a>-->
-            <!--</div>-->
-            <!--<div>-->
-                <!--<p>Kubernetes at Box: Microservices at Maximum Velocity</p>-->
-                <!--<a href="https://blog.box.com/blog/kubernetes-box-microservices-maximum-velocity/">Read more</a>-->
-            <!--</div>-->
-            <!--<div>-->
-                <!--<p>Inside eBay's shift to Kubernetes and containers atop OpenStack</p>-->
-                <!--<a href="http://www.nextplatform.com/2015/11/12/inside-ebays-shift-to-kubernetes-and-containers-atop-openstack/">Read the story</a>-->
-            <!--</div>-->
-            <!--<div>-->
-                <!--<p>Migrating from a homegrown 'cluster' to Kubernetes</p>-->
-                <!--<a href="https://www.youtube.com/watch?v=6XGUTu3WhBw">Watch the video</a>-->
-            <!--</div>-->
-        <!--</div>-->
-        <h5 style="text-align: center"><a href="/case-studies/" style="color: #3371E3; font-weight: 400">View all case studies</a></h5>
-      </main>
-  </section>
-        <section id="cncf">
-            <main>
-        <center>
-        <p style="font-size: 20px">We are a <a href="https://cncf.io/">CNCF</a> graduated project</p>
-        </center>
-      </main>
-  </section>
-
-
-
-
-
+        <a href="https://events.linuxfoundation.org/events/kubecon-cloudnativecon-north-america-2018/" button id="desktopKCButton">Attend KubeCon in Seattle on Dec. 11-13, 2018</a>
+</div>
 <div id="videoPlayer">
     <iframe data-url="https://www.youtube.com/embed/H06qrNmGqyE?autoplay=1" frameborder="0" allowfullscreen></iframe>
     <button id="closeButton"></button>
 </div>
+{{< /blocks/section >}}
+
+{{< blocks/kubernetes-features >}}
+
+{{< blocks/case-studies >}}
diff --git a/content/en/case-studies/_index.html b/content/en/case-studies/_index.html
@@ -1,5 +1,6 @@
 ---
 title: Case Studies
+linkTitle: View all case studies 
 bigheader: Kubernetes User Case Studies
 abstract: A collection of users running Kubernetes in production.
 layout: basic

diff --git a/content/en/docs/concepts/configuration/manage-compute-resources-container.md b/content/en/docs/concepts/configuration/manage-compute-resources-container.md
@@ -2,6 +2,10 @@
 title: Managing Compute Resources for Containers
 content_template: templates/concept
 weight: 20
+feature:
+  title: Automatic binpacking
+  description: >
+    Automatically places containers based on their resource requirements and other constraints, while not sacrificing availability. Mix critical and best-effort workloads in order to drive up utilization and save even more resources.
 ---
 
 {{% capture overview %}}

diff --git a/content/en/docs/concepts/configuration/secret.md b/content/en/docs/concepts/configuration/secret.md
@@ -3,6 +3,10 @@ reviewers:
 - mikedanese
 title: Secrets
 content_template: templates/concept
+feature:
+  title: Secret and configuration management
+  description: >
+    Deploy and update secrets and application configuration without rebuilding your image and without exposing secrets in your stack configuration.
 weight: 50
 ---
 

diff --git a/content/en/docs/concepts/services-networking/service.md b/content/en/docs/concepts/services-networking/service.md
@@ -2,6 +2,11 @@
 reviewers:
 - bprashanth
 title: Services
+feature:
+  title: Service discovery and load balancing
+  description: >
+    No need to modify your application to use an unfamiliar service discovery mechanism. Kubernetes gives containers their own IP addresses and a single DNS name for a set of containers, and can load-balance across them.
+
 content_template: templates/concept
 weight: 10
 ---

diff --git a/content/en/docs/concepts/storage/persistent-volumes.md b/content/en/docs/concepts/storage/persistent-volumes.md
@@ -5,6 +5,11 @@ reviewers:
 - thockin
 - msau42
 title: Persistent Volumes
+feature:
+  title: Storage orchestration
+  description: >
+    Automatically mount the storage system of your choice, whether from local storage, a public cloud provider  such as <a href="https://cloud.google.com/storage/">GCP</a> or <a href="https://aws.amazon.com/products/storage/">AWS</a>, or a network storage system such as NFS, iSCSI, Gluster, Ceph, Cinder, or Flocker.
+
 content_template: templates/concept
 weight: 20
 ---

diff --git a/content/en/docs/concepts/workloads/controllers/deployment.md b/content/en/docs/concepts/workloads/controllers/deployment.md
@@ -3,6 +3,11 @@ reviewers:
 - bgrant0607
 - janetkuo
 title: Deployments
+feature:
+  title: Automated rollouts and rollbacks
+  description: >
+    Kubernetes progressively rolls out changes to your application or its configuration, while monitoring application health to ensure it doesn't kill all your instances at the same time. If something goes wrong, Kubernetes will rollback the change for you. Take advantage of a growing ecosystem of deployment solutions.
+
 content_template: templates/concept
 weight: 30
 ---

diff --git a/content/en/docs/concepts/workloads/controllers/jobs-run-to-completion.md b/content/en/docs/concepts/workloads/controllers/jobs-run-to-completion.md
@@ -4,6 +4,10 @@ reviewers:
 - soltysh
 title: Jobs - Run to Completion
 content_template: templates/concept
+feature:
+  title: Batch execution
+  description: >
+    In addition to services, Kubernetes can manage your batch and CI workloads, replacing containers that fail, if desired.
 weight: 70
 ---
 

diff --git a/content/en/docs/concepts/workloads/controllers/replicationcontroller.md b/content/en/docs/concepts/workloads/controllers/replicationcontroller.md
@@ -3,6 +3,12 @@ reviewers:
 - bprashanth
 - janetkuo
 title: ReplicationController
+feature: 
+  title: Self-healing
+  anchor: How a ReplicationController Works
+  description: >
+    Restarts containers that fail, replaces and reschedules containers when nodes die, kills containers that don't respond to your user-defined health check, and doesn't advertise them to clients until they are ready to serve.
+
 content_template: templates/concept
 weight: 20
 ---

diff --git a/content/en/docs/tasks/run-application/horizontal-pod-autoscale.md b/content/en/docs/tasks/run-application/horizontal-pod-autoscale.md
@@ -4,6 +4,11 @@ reviewers:
 - jszczepkowski
 - directxman12
 title: Horizontal Pod Autoscaler
+feature:
+  title: Horizontal scaling
+  description: >
+    Scale your application up and down with a simple command, with a UI, or automatically based on CPU usage.
+
 content_template: templates/concept
 weight: 90
 ---

diff --git a/content/no/_common-resources/index.md b/content/no/_common-resources/index.md
@@ -0,0 +1,3 @@
+---
+headless: true
+---