Merge pull request #46684 from sftim/20240605_hbd_k8s

k8s-ci-robot · web-flow · commit 42388974237e · 2024-06-06T08:35:19.000-07:00
Congratulate Kubernetes on its 10th birthday
diff --git a/assets/images/k8s-10th-birthday.svg b/assets/images/k8s-10th-birthday.svg
diff --git a/assets/scss/_base.scss b/assets/scss/_base.scss
@@ -477,7 +477,8 @@ section#cncf {
 }
 
 // OCEAN NODES
-#oceanNodes {
+#oceanNodes, .td-home .k8s-overview {
+
   padding-top: $ocean-nodes-padding-Y;
   padding-bottom: $ocean-nodes-padding-Y;
 
diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss
@@ -1413,4 +1413,101 @@ div.alert > em.javascript-required {
   cursor: pointer;
   text-align: right;
   padding: 0.2rem;
+}
+
+// Special style for Kubernetes' 10th birthday
+section.k8s-birthday-override {
+  background: #dae9f9; // Kubernetes light blue
+
+  > .k8s-birthday-wrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    align-content: flex-end;
+    gap: 2rem;
+
+    img.birthday-banner {
+      max-height: 20rem;
+      max-width: 100vw;
+      margin-left: auto;
+      margin-right: auto;
+      aspect-ratio: 1;
+      flex-grow: 1;
+    }
+    p {
+      flex-grow: 4;
+      text-align: center;
+      color: $blue;
+      font-size: 2.5em;
+      padding-bottom: 2.5rem;
+      margin: 1em;
+    }
+  }
+
+  div.k8s-birthday-override.revert-to-previous {
+    form {
+      display: block;
+      max-width: clamp(20rem, 30%, 100vw);
+      margin-left: auto;
+      padding-bottom: 0.5rem;
+    }
+    text-align: right;
+    label {
+      color: $blue;
+      padding-left: 1.2em;
+      padding-right: 1.2em;
+      text-decoration: underline;
+      font-size: 1.5rem;
+    }
+    input {
+      accent-color: $blue;
+      border-color: $blue;
+      visibility: hidden;
+    }
+  }
+
+  div.k8s-birthday-override.revert-to-previous:has(input:not(:checked)) {
+    display: initial;
+  }
+
+  &:has(input:checked) {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 900px) {
+  section.k8s-birthday-override > .k8s-birthday-wrapper {
+    flex-wrap: wrap;
+  }
+}
+
+@media screen and (max-width: 900px) {
+  section.k8s-birthday-override > .k8s-birthday-wrapper {
+    gap: 0.2rem;
+    align-content: center;
+    p {
+      font-size: initial;
+      min-width: 80vw;
+    }
+    img.birthday-banner {
+      min-height: initial;
+    }
+    label {
+      font-size: 1.2rem;
+    }
+  }
+}
+@media screen and (max-aspect-ratio: 9/15) {
+    gap: 0.4rem;
+}
+
+@media screen and (min-width: 1281px) {
+  img.birthday-banner {
+    min-height: clamp(480px, 25rem, 100vh);
+  }
+}
+section.k8s-birthday-override:has(div.k8s-birthday-override.revert-to-previous input:not(:checked)) + section {
+  display: none;
+  visibility: hidden;
 }
diff --git a/assets/scss/_desktop.scss b/assets/scss/_desktop.scss
@@ -23,7 +23,7 @@ $video-section-height: 550px;
     }
   }
 
-  #oceanNodes {
+  #oceanNodes, .td-home .k8s-overview {
     .main-section {
       position: relative;
 
diff --git a/assets/scss/_tablet.scss b/assets/scss/_tablet.scss
@@ -66,7 +66,7 @@ $feature-box-div-width: 45%;
     }
   }
 
-  #oceanNodes {
+  #oceanNodes, .td-home .k8s-overview {
     h3 {
       text-align: left;
       margin-bottom: 18px;
diff --git a/content/en/_index.html b/content/en/_index.html
@@ -8,8 +8,9 @@
 
 {{< site-searchbar >}}
 
-{{< blocks/section id="oceanNodes" >}}
-{{% blocks/feature image="flower" %}}
+<!-- automatically replaced if Kubernetes birthday feature active -->
+{{< blocks/section class="k8s-overview" >}}
+{{% blocks/feature image="flower" id="feature-primary" %}}
 [Kubernetes]({{< relref "/docs/concepts/overview/" >}}), also known as K8s, 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.
diff --git a/content/en/community/special/kubernetes-10th-birthday.md b/content/en/community/special/kubernetes-10th-birthday.md
@@ -0,0 +1,13 @@
+---
+title: Kubernetes' 10th birthday
+content_type: special
+
+display_date_start: 2024-06-06
+display_date_end: 2024-06-15
+
+# Only ever included, not rendered as a page in its own right
+_build:
+  list: never
+  render: false
+---
+Kubernetes 10 Years
diff --git a/data/i18n/en/en.toml b/data/i18n/en/en.toml
@@ -209,6 +209,9 @@ other = "email address"
 [javascript_required]
 other = "JavaScript must be [enabled](https://www.enable-javascript.com/) to view this content"
 
+[k8s_birthday_show_original_content]
+other = "Show original content…"
+
 [katacoda_message]
 other = """<h4>Shutdown of interactive tutorials</h4>
 <p>The interactive tutorials on this website are being shut down. The Kubernetes
diff --git a/layouts/partials/kubernetes-overview.html b/layouts/partials/kubernetes-overview.html
@@ -0,0 +1,31 @@
+{{- $shouldShowBirthdayBanner := false -}}
+{{- $now := time.Now -}}
+{{- with site.GetPage "page" "community/special/kubernetes-10th-birthday" -}}
+  {{- if and (lt ( (.Param "display_date_start") | time.AsTime ) $now ) (gt ( (.Param "display_date_end") | time.AsTime ) ( $now.AddDate 0 0 1 ) ) -}}
+    {{- $shouldShowBirthdayBanner = true -}}
+    {{- warnf "%s" "It's Kubernetes' birthday, fingers crossed this renders OK" -}}
+    {{- with resources.Get "images/k8s-10th-birthday.svg" -}}
+    {{- else -}}
+      {{- errorf "%s" "Birthday banner image missing" -}}
+    {{- end -}}
+  {{ end }}
+{{- end -}}
+{{- if $shouldShowBirthdayBanner -}}
+<section id="{{ .id }}" class="k8s-birthday-override">
+  <div class="k8s-birthday-wrapper">
+      <p>{{ "2014-06-06" | time.AsTime | time.Format ":date_long" }}</p>
+  {{- with site.GetPage "page" "community/special/kubernetes-10th-birthday" -}}
+  <img src="{{ with resources.Get "images/k8s-10th-birthday.svg" }}{{ .RelPermalink }}{{ end }}" class="birthday-banner" title="{{ .Title | markdownify }}" alt="{{ .Content }}" ></img>
+  {{- else -}}
+    {{- errorf "%s" "10th Birthday content missing" -}}
+  {{- end -}}
+  <p>{{ printf "%s-06-06" ( time.Format "2006" $now ) | time.AsTime | time.Format ":date_long" }}</p>
+  </div>
+  <div class="k8s-birthday-override revert-to-previous">
+      <form><label for="skip-birthday-details">{{ T "k8s_birthday_show_original_content" }}</label><input type=checkbox id="skip-birthday-details"></form>
+  </div>
+</section>
+{{- end -}}
+<section id="{{ .id }}"{{ with .class }} class="{{ . }}"{{ end }}>
+  {{ .inner }}
+</section>
diff --git a/layouts/shortcodes/blocks/section.html b/layouts/shortcodes/blocks/section.html
@@ -2,10 +2,15 @@
 {{- $style := .Get "style" -}}
 {{- $id := .Get "id" | default (printf "section-%d" .Ordinal) -}}
 {{- $bg := .Get "background-image" -}}
+{{/* special case Kubernetes overview */}}
+{{- if eq $class "k8s-overview" -}}
+	{{- partial "kubernetes-overview.html" (dict "id" $id "class" $class "inner" $.Inner ) -}}
+{{- else -}}
 {{- if $bg -}}
 	{{ template "shortcodes-blocks_getimage" (dict "name" $bg "ctx" . "target" "bg") }}
 {{- end -}}
 {{- $image := $.Scratch.Get "bg" -}}
 <section id="{{ $id }}"{{ with $class }} class="{{ . }}"{{ end }} style="{{ with $image }}background-image: url({{ .Permalink }}); {{ end }}{{ with $style }}{{ . | safeCSS }}{{ end }}">
 	{{ $.Inner }}
 </section>
+{{- end -}}

Original file line number	Diff line number	Diff line change
`@@ -477,7 +477,8 @@ section#cncf {`
`477`	`477`	`}`
`478`	`478`
`479`	`479`	`// OCEAN NODES`
`480`		`-#oceanNodes {`
	`480`	`+#oceanNodes, .td-home .k8s-overview {`
	`481`	`+`
`481`	`482`	`padding-top: $ocean-nodes-padding-Y;`
`482`	`483`	`padding-bottom: $ocean-nodes-padding-Y;`
`483`	`484`
Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ $video-section-height: 550px;`
`23`	`23`	`}`
`24`	`24`	`}`
`25`	`25`
`26`		`- #oceanNodes {`
	`26`	`+ #oceanNodes, .td-home .k8s-overview {`
`27`	`27`	`.main-section {`
`28`	`28`	`position: relative;`
`29`	`29`
Original file line number	Diff line number	Diff line change
`@@ -66,7 +66,7 @@ $feature-box-div-width: 45%;`
`66`	`66`	`}`
`67`	`67`	`}`
`68`	`68`
`69`		`- #oceanNodes {`
	`69`	`+ #oceanNodes, .td-home .k8s-overview {`
`70`	`70`	`h3 {`
`71`	`71`	`text-align: left;`
`72`	`72`	`margin-bottom: 18px;`