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.
This commit is contained in:
Bjørn Erik Pedersen
committed by
k8s-ci-robot
k8s-ci-robot
parent
0df6621652
commit
1b5ff98a44
@@ -4,7 +4,7 @@
|
||||
{{ partial "head.html" . }}
|
||||
</head>
|
||||
<body>
|
||||
{{ partialCached "header.html" . "default" }}
|
||||
{{ partial "header.html" . }}
|
||||
{{ block "hero" . }}
|
||||
<!-- HERO -->
|
||||
<section id="hero" class="light-text">
|
||||
|
||||
@@ -7,9 +7,9 @@
|
||||
<link rel="stylesheet" type="text/css" href="{{ "css/blog.css" | relURL }}">
|
||||
</head>
|
||||
<body>
|
||||
{{ partialCached "header.html" . "blog" }}
|
||||
{{ partial "header.html" . }}
|
||||
<section id="hero" class="light-text no-sub">
|
||||
<h1>Kubernetes Blog</h1>
|
||||
<h1>{{ .Title }}</h1>
|
||||
</section>
|
||||
<div class="container-fluid" style="padding-top: 2em">
|
||||
<div class="row">
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
{{ partial "head.html" . }}
|
||||
</head>
|
||||
<body>
|
||||
{{ partialCached "header.html" . "default" }}
|
||||
{{ partial "header.html" . }}
|
||||
{{ block "main" . }}{{ end }}
|
||||
{{ partialCached "footer.html" . }}
|
||||
{{ partialCached "footer-scripts.html" . }}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
{{ partial "head.html" . }}
|
||||
</head>
|
||||
<body>
|
||||
{{ partialCached "header.html" . "docs" }}
|
||||
{{ partial "header.html" . }}
|
||||
{{ block "hero" . }}
|
||||
<!-- HERO -->
|
||||
<section id="hero" class="light-text no-sub">
|
||||
@@ -30,23 +30,42 @@
|
||||
"title" : "{{ .Title }}",
|
||||
"permalink" : "{{ .Permalink }}"
|
||||
};
|
||||
(function(d,c,j){if(!document.getElementById(j)){var pd=d.createElement(c),s;pd.id=j;pd.src=('https:'==document.location.protocol)?'https://polldaddy.com/js/rating/rating.js':'http://i0.poll.fm/js/rating/rating.js';s=document.getElementsByTagName(c)[0];s.parentNode.insertBefore(pd,s);}}(document,'script','pd-rating-js'));
|
||||
</script>
|
||||
<a href="https://github.com/kubernetes/website/issues/new?title=Issue%20with%20k8s.io/{{ .URL }}%20%5BFile:%20/content/en/{{ .File.Path }}%5D" class="button issue" target="_blank">Report a problem</a>
|
||||
<a href="" onclick="window.open('https://github.com/kubernetes/website/issues/new?title=Issue%20with%20' +
|
||||
'k8s.io'+window.location.pathname)" class="button issue">{{ T "main_github_create_an_issue" }}</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ if not .Params.noedit }}
|
||||
<a href="https://github.com/kubernetes/website/edit/master/content/en/{{ .File.Path }}" class="button issue" target="_blank">Edit on Github</a>
|
||||
<a href="{{ printf "%s#%s" ("docs/editdocs" | relURL) .Path | safeURL }}" class="button issue">{{ T "main_edit_this_page" }}</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ if not .Params.showcommit }}
|
||||
{{ if $.GitInfo }}
|
||||
<div id="lastedit" class="lastedit issue-button-container">
|
||||
{{ .GitInfo.AuthorDate.Format "Page last modified on January 02, 2006 at 3:04 PM PST" }} by <a href="https://github.com/kubernetes/website/commit/{{ .GitInfo.Hash }}/">{{ .GitInfo.Subject }}</a> (<a href="https://github.com/kubernetes/website/commits/master/content/en/{{ .File.Path }}">Page history</a>)
|
||||
{{ T "main_page_last_modified_on" }} {{ .GitInfo.AuthorDate.Format "January 02, 2006 at 3:04 PM PST" }} {{ T "main_by" }} <a href="https://github.com/kubernetes/website/commit/{{ .GitInfo.Hash }}/">{{ .GitInfo.Subject }}</a> (<a href="https://github.com/kubernetes/website/commits/master/content/en/{{ .File.Path }}">{{ T "main_page_history" }}</a>)
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ partialCached "footer.html" . }}
|
||||
{{ partialCached "footer-scripts.html" . }}
|
||||
<script language="application/javascript">
|
||||
// This script turns in-page headers into clickable and shareable
|
||||
(function addHeadingLinks(){
|
||||
var article = document.getElementById('docsContent');
|
||||
var headings = article.querySelectorAll('h1, h2, h3, h4, h5, h6');
|
||||
headings.forEach(function(heading){
|
||||
if(heading.id){
|
||||
var a = document.createElement('a');
|
||||
a.innerHTML = heading.innerHTML;
|
||||
a.href = '#'+heading.id;
|
||||
a.classList.add('inpage_heading');
|
||||
heading.innerHTML = '';
|
||||
heading.appendChild(a);
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,5 +1,12 @@
|
||||
{{ define "main" }}
|
||||
{{ .Content }}
|
||||
<section id="cncf">
|
||||
<main>
|
||||
<center>
|
||||
<p style="font-size: 20px">{{ T "main_cncf_project" | safeHTML }}
|
||||
</center>
|
||||
</main>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
|
||||
|
||||
@@ -16,6 +16,6 @@
|
||||
{{ end }}
|
||||
</ul>
|
||||
<form id="searchBox" action="/docs/search/">
|
||||
<input type="text" id="search" name="q" placeholder="Search" aria-label="Search">
|
||||
<input type="text" id="search" name="q" placeholder="{{ T "ui_search_placeholder" }}" aria-label="Search">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -9,25 +9,26 @@
|
||||
</nav>
|
||||
<div class="social">
|
||||
<div>
|
||||
<a href="https://twitter.com/kubernetesio" class="twitter"><span>twitter</span></a>
|
||||
<a href="https://github.com/kubernetes/kubernetes" class="github"><span>Github</span></a>
|
||||
<a href="https://twitter.com/kubernetesio" class="twitter"><span>{{ T "community_twitter_name" }}</span></a>
|
||||
<a href="https://github.com/kubernetes/kubernetes" class="github"><span>{{ T "community_github_name" }}</span></a>
|
||||
<a href="http://slack.k8s.io/" class="slack"><span>Slack</span></a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="http://stackoverflow.com/questions/tagged/kubernetes" class="stack-overflow"><span>Stack Overflow</span></a>
|
||||
<a href="https://discuss.kubernetes.io" class="mailing-list"><span>Forum</span></a>
|
||||
<a href="https://calendar.google.com/calendar/embed?src=nt2tcnbtbied3l6gi2h29slvc0%40group.calendar.google.com" class="calendar"><span>Events Calendar</span></a>
|
||||
<a href="http://stackoverflow.com/questions/tagged/kubernetes" class="stack-overflow"><span>
|
||||
<a href="http://stackoverflow.com/questions/tagged/kubernetes" class="stack-overflow"><span>{{ T "community_stack_overflow_name" }}</span></a>
|
||||
<a href="https://discuss.kubernetes.io" class="mailing-list"><span>{{ T "community_forum_name" }}</span></a>
|
||||
<a href="https://calendar.google.com/calendar/embed?src=nt2tcnbtbied3l6gi2h29slvc0%40group.calendar.google.com" class="calendar"><span>{{ T "community_events_calendar" }}</span></a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/docs/setup/pick-right-solution/" class="button">Get Kubernetes</a>
|
||||
<a href="https://git.k8s.io/community/contributors/guide" class="button">Contribute</a>
|
||||
{{ with .Site.GetPage "page" "/docs/setup/pick-right-solution/" }}<a href="{{ .RelPermalink }}" class="button">{{ .LinkTitle }}</a>{{ end }}
|
||||
<a href="https://git.k8s.io/community/contributors/guide" class="button">{{ T "main_contribute" }}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="miceType" class="center">
|
||||
© {{ now.Year }} The Kubernetes Authors | Documentation Distributed under <a href="https://git.k8s.io/website/LICENSE" class="light-text">CC BY 4.0</a>
|
||||
© {{ now.Year }} {{ T "main_documentation_license" | safeHTML }}</a>
|
||||
</div>
|
||||
<div id="miceType" class="center">
|
||||
Copyright © {{ now.Year }} The Linux Foundation®. All rights reserved. The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux Foundation, please see our <a href="https://www.linuxfoundation.org/trademark-usage" class="light-text">Trademark Usage page</a>
|
||||
Copyright © {{ now.Year }} {{ T "main_copyright_notice" | safeHTML }}
|
||||
</div>
|
||||
<div id="miceType" class="center">
|
||||
ICP license: 京ICP备17074266号-3
|
||||
|
||||
@@ -1,21 +1,22 @@
|
||||
<div id="cellophane" onclick="kub.toggleMenu()"></div>
|
||||
|
||||
<header>
|
||||
<a href="/" class="logo"></a>
|
||||
<a href="{{ .Site.Home.RelPermalink }}" class="logo"></a>
|
||||
|
||||
<div class="nav-buttons" data-auto-burger="primary">
|
||||
<ul class="global-nav">
|
||||
{{ $sections := slice "docs" "blog" "partners" "community" "case-studies" }}
|
||||
{{ $sections := slice "docs/home" "blog" "partners" "community" "case-studies" }}
|
||||
{{ range $sections }}
|
||||
{{ with $.Site.GetPage "section" . }}<li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>{{ end }}
|
||||
{{ with $.Site.GetPage "section" . }}<li><a href="{{ .RelPermalink }}"{{ if eq .Section $.Section }} class="active"{{ end}}>{{ .LinkTitle }}</a></li>{{ end }}
|
||||
{{ end }}
|
||||
{{ $home := .Site.Home }}
|
||||
{{/* Link directly to documentation etc., if possible. */}}
|
||||
{{ $langPage := cond (gt (len .Translations) 0) . .Site.Home }}
|
||||
<li>
|
||||
<a href="#">
|
||||
{{ $home.Language.LanguageName }} <span class="ui-icon ui-icon-carat-1-s"></span>
|
||||
{{ $langPage.Language.LanguageName }} <span class="ui-icon ui-icon-carat-1-s"></span>
|
||||
</a>
|
||||
<ul>
|
||||
{{ range $home.Translations }}
|
||||
{{ range $langPage.Translations }}
|
||||
<li><a href="{{ .RelPermalink }}">{{ .Language.LanguageName }}</a></li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
@@ -32,45 +33,37 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- <a href="/docs/home" class="button" id="viewDocs" data-auto-burger-exclude>View Documentation</a> -->
|
||||
<a href="/docs/tutorials/kubernetes-basics/" class="button" id="tryKubernetes" data-auto-burger-exclude>Try Kubernetes</a>
|
||||
{{ with .Site.GetPage "section" "docs/tutorials/kubernetes-basics" }}
|
||||
<a href="{{ .RelPermalink }}" class="button" id="tryKubernetes" data-auto-burger-exclude>{{ .LinkTitle }}</a>
|
||||
{{ end }}
|
||||
|
||||
<button id="hamburger" onclick="kub.toggleMenu()" data-auto-burger-exclude><div></div></button>
|
||||
</div>
|
||||
|
||||
<nav id="mainNav">
|
||||
<main data-auto-burger="primary">
|
||||
<div class="nav-box">
|
||||
<h3><a href="/docs/tutorials/stateless-application/hello-minikube/">Get Started</a></h3>
|
||||
<p>Ready to get your hands dirty? Build a simple Kubernetes cluster that runs "Hello World" for Node.js.</p>
|
||||
</div>
|
||||
<div class="nav-box">
|
||||
<h3><a href="/docs/home/">Documentation</a></h3>
|
||||
<p>Learn how to use Kubernetes with the use of walkthroughs, samples, and reference documentation. You can even <a href="/editdocs/" data-auto-burger-exclude>help contribute to the docs</a>!</p>
|
||||
</div>
|
||||
<div class="nav-box">
|
||||
<h3><a href="/community/">Community</a></h3>
|
||||
<p>If you need help, you can connect with other Kubernetes users and the Kubernetes authors, attend community events, and watch video presentations from around the web.</p>
|
||||
</div>
|
||||
<div class="nav-box">
|
||||
<h3><a href="/blog/">Blog</a></h3>
|
||||
<p>Read the latest news for Kubernetes and the containers space in general, and get technical how-tos hot off the presses.</p>
|
||||
{{ range .Site.Menus.main }}
|
||||
<div class="nav-box">
|
||||
<h3><a href="{{ .URL }}">{{ .Title }}</a></h3>
|
||||
{{ .Post }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</main>
|
||||
<main data-auto-burger="primary">
|
||||
<div class="left">
|
||||
<h5 class="github-invite">Interested in hacking on the core Kubernetes code base?</h5>
|
||||
<a href="https://github.com/kubernetes/kubernetes" class="button" data-auto-burger-exclude>View On Github</a>
|
||||
<h5 class="github-invite">{{ T "main_github_invite" }}</h5>
|
||||
<a href="https://github.com/kubernetes/kubernetes" class="button" data-auto-burger-exclude>{{ T "main_github_view_on" }}</a>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<h5 class="github-invite">Explore the community</h5>
|
||||
<h5 class="github-invite">{{ T "main_community_explore" }}</h5>
|
||||
<div class="social">
|
||||
<a href="https://twitter.com/kubernetesio" class="twitter"><span>Twitter</span></a>
|
||||
<a href="https://github.com/kubernetes/kubernetes" class="github"><span>Github</span></a>
|
||||
<a href="http://slack.k8s.io/" class="slack"><span>Slack</span></a>
|
||||
<a href="https://stackoverflow.com/questions/tagged/kubernetes" class="stack-overflow"><span>Stack Overflow</span></a>
|
||||
<a href="https://discuss.kubernetes.io" class="mailing-list"><span>Forum</span></a>
|
||||
<a href="https://calendar.google.com/calendar/embed?src=nt2tcnbtbied3l6gi2h29slvc0%40group.calendar.google.com" class="calendar"><span>Events Calendar</span></a>
|
||||
<a href="https://twitter.com/kubernetesio" class="twitter"><span>{{ T "community_twitter_name" }}</span></a>
|
||||
<a href="https://github.com/kubernetes/kubernetes" class="github"><span>{{ T "community_github_name" }}</span></a>
|
||||
<a href="http://slack.k8s.io/" class="slack"><span>{{ T "community_slack_name" }} Slack</span></a>
|
||||
<a href="https://stackoverflow.com/questions/tagged/kubernetes" class="stack-overflow"><span>{{ T "community_stack_overflow_name" }}</span></a>
|
||||
<a href="https://discuss.kubernetes.io" class="mailing-list"><span>{{ T "community_forum_name" }}</span></a>
|
||||
<a href="https://calendar.google.com/calendar/embed?src=nt2tcnbtbied3l6gi2h29slvc0%40group.calendar.google.com" class="calendar"><span>{{ T "community_events_calendar" }}</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear" style="clear: both"></div>
|
||||
|
||||
@@ -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 -}}
|
||||
@@ -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 }}
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user