Make the home page into reusable and translatable blocks (#10071)

* Make navigation and UI strings i18n friendly

This commit

* Extracts most UI strings into i18n bundles so they can be translated
* Makes a proper Hugo menu out of the hardcoded menu that is shown on smaller screens
* Changes the language selector logic to navigate to the current page in the other language if possible (e.g. the translation). If not possible, it takes you to the home page for that language.

For testing, this commit also adds Norwegian as a new language. This is turned off.

* 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.

layouts/shortcodes/blocks/__common.html

@@ -0,0 +1,15 @@
+{{/* This file contains some common template definitions used in the blocks shortcodes. 
+The reasoning behind the long and hard-to-remember template names is that these templates are global. */}}
+{{ define "shortcodes-blocks_getimage" }}
+{{- $cr := .ctx.Site.GetPage "/_common-resources" -}}
+{{- with $cr -}}
+{{- $image := $cr.Resources.GetMatch (printf "images/**%s*" $.name ) -}}
+{{- with $image -}}
+{{- $.ctx.Scratch.Set $.target $image -}}
+{{- else -}}
+{{- errorf "Image matching %q not found _common-resources" $.name -}}
+{{- end -}}
+{{- else -}}
+{{ errorf "[%s] No resource bundle found. Create an empty headless bundle; create content/%s/_common-resources/index.md with \"headless: true\" in front matter. See https://gohugo.io/content-management/page-bundles/#headless-bundle"  $.ctx.Page.Lang $.ctx.Page.Lang }}
+{{- end -}}
+{{- end -}}

layouts/shortcodes/blocks/case-studies.html

@@ -0,0 +1,22 @@
+{{ $caseStudiesSection := .Site.GetPage "case-studies" }}
+{{ if not $caseStudiesSection }}
+{{ errorf "[%s] No case-studies section found. Create content/%s/case-studies/_index.md"  $.Page.Lang $.Page.Lang }}
+{{ else }}
+{{ $caseStudiesPages := where $caseStudiesSection.Pages "Params.featured" true | first 4 }}
+<section id="talkToUs">
+  <main>
+    <h3>{{ $caseStudiesSection.Title }}</h3>
+    <div id="caseStudiesWrapper">
+      {{ range $caseStudiesPages }}
+      {{ $logo := .Resources.GetMatch "**logo*.png" }}
+      <div>
+        {{ with $logo }}<img src="{{ .RelPermalink }}">{{ end }}
+        <p>"{{ .Params.quote | truncate 100 }}"</p>
+        <a href="{{ .RelPermalink }}">{{ T "main_read_more" }}</a>
+      </div>
+      {{ end }}  
+    </div>
+    <h5 style="text-align: center"><a href="/case-studies/" style="color: #3371E3; font-weight: 400">{{ $caseStudiesSection.LinkTitle }}</a></h5>
+  </main>
+</section>
+{{ end }}

layouts/shortcodes/blocks/feature.html

@@ -0,0 +1,15 @@
+{{/* 
+This shortcode renders a main feature as seen on the top of the Kubernetes home page.
+
+It can be given a "image" parameter with a name partially matching a file in the images folder of the _common-resources bundle.
+
+ */}}
+{{- $imageName := $.Get "image" | default "flower" -}}
+{{ if  $imageName }}{{- template "shortcodes-blocks_getimage" (dict "name" $imageName "ctx" . "target" "feature-image") -}}{{ end }}
+{{- $image := $.Scratch.Get "feature-image" -}}
+<main>
+	{{ with $image }}<div class="image-wrapper"><img src="{{ .RelPermalink }}" alt="{{ .Title }}"></div>{{ end }}
+	<div class="content">
+		{{ $.Inner }}
+	</div>
+</main>

layouts/shortcodes/blocks/kubernetes-features.html

@@ -0,0 +1,36 @@
+{{/* 
+
+This shortcode lists pages that have a "feature" section configured in front matter. 
+
+This creates a set of feature boxes as seen on the home page.
+
+See /content/en/docs/concepts/services-networking/service.md for an example:
+
+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.
+
+Note that markdown can be used in the description.
+
+ */}}
+<section id="features">
+    <main>
+        <h3 class="center">{{ T "main_kubernetes_features" }}</h3>
+        {{ $pages := where .Site.Pages ".Params.feature" "!=" nil }}
+        {{range $i, $p := $pages }}
+        {{ if and (gt $i 0) (modBool $i 2) }}</div>{{ end }}
+        {{ if modBool $i 2 }}
+        <div class="feature-box">
+            {{ end }}
+            <div>
+                {{ with .Params.feature }}
+                <h4><a href="{{ $p.RelPermalink}}{{ with .anchor }}#{{ . | anchorize }}{{ end }}">{{ .title }}</a></h4>
+                {{ $description := .description | default $p.Params.description }}
+                {{ $description | markdownify }}
+                {{ end }}
+            </div>
+     
+        {{ end }}
+    </main>
+</section>

layouts/shortcodes/blocks/section.html

@@ -0,0 +1,11 @@
+{{- $class := .Get "class" -}}
+{{- $style := .Get "style" -}}
+{{- $id := .Get "id" | default (printf "section-%d" .Ordinal) -}}
+{{- $bg := .Get "background-image" -}}
+{{- 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>