Localization Support

i18n/en.yaml

@@ -0,0 +1,11 @@
+- id: global.copyright
+  translation: "Documentation built with [Hugo](https://www.gohugo.io) using the [Material](http://github.com/digitalcraftsman/hugo-material-docs) theme"
+
+- id: header.button.language
+  translation: "Language"
+
+- id: footer.button.prev
+  translation: "Previous"
+
+- id: footer.button.next
+  translation: "Next"

i18n/nl.yaml

@@ -0,0 +1,11 @@
+- id: global.copyright
+  translation: "Documentatie gemaakt met [Hugo](https://www.gohugo.io) waarbij gebruik is gemaakt van het [Material](http://github.com/digitalcraftsman/hugo-material-docs) thema"
+
+- id: header.button.language
+  translation: "Taal"
+
+- id: footer.button.prev
+  translation: "Vorige"
+
+- id: footer.button.next
+  translation: "Volgende"

layouts/_default/__list.html

@@ -19,6 +19,8 @@
 
 	<article class="article">
 		<div class="wrapper">
+			{{ partial "language_button" . }}
+
 			<h1>Pages in {{ .Title | singularize }}</h1>
 
 			{{ range .Data.Pages }}
@@ -36,10 +38,7 @@ <h2>{{ .Title }}</h2>
 				{{ with .Site.Params.copyright }}
 				&copy; {{ $.Now.Format "2006" }} {{ . }} &ndash;
 				{{ end }}
-				Documentation built with
-				<a href="https://www.gohugo.io" target="_blank">Hugo</a>
-				using the
-				<a href="http://github.com/digitalcraftsman/hugo-material-docs" target="_blank">Material</a> theme.
+				{{ i18n "global.copyright" | markdownify }}
 			</aside>
 		</div>
 	</article>

layouts/_default/single.html

@@ -24,6 +24,8 @@
 
 	<article class="article">
 		<div class="wrapper">
+			{{ partial "language_button" . }}
+
 			<h1>{{ .Title }} {{ if .IsDraft }} (Draft){{ end }}</h1>
 
 			{{ .Content }}
@@ -32,10 +34,7 @@ <h1>{{ .Title }} {{ if .IsDraft }} (Draft){{ end }}</h1>
 				{{ with .Site.Params.copyright }}
 				&copy; {{ $.Now.Format "2006" }} {{ . }} &ndash;
 				{{ end }}
-				Documentation built with
-				<a href="https://www.gohugo.io" target="_blank">Hugo</a>
-				using the
-				<a href="http://github.com/digitalcraftsman/hugo-material-docs" target="_blank">Material</a> theme.
+				{{ i18n "global.copyright" | markdownify }}
 			</aside>
 
 			<footer class="footer">

layouts/index.html

@@ -24,6 +24,9 @@
 
 	<article class="article">
 		<div class="wrapper">
+			{{ partial "language_button" . }}
+
+
 			{{ range where .Site.Pages "Type" "index" }}
 				<h1>{{ .Title }} {{ if .IsDraft }} (Draft){{ end }}</h1>
 
@@ -34,10 +37,7 @@ <h1>{{ .Title }} {{ if .IsDraft }} (Draft){{ end }}</h1>
 				{{ with .Site.Params.copyright }}
 				&copy; {{ $.Now.Format "2006" }} {{ . }} &ndash;
 				{{ end }}
-				Documentation built with
-				<a href="https://www.gohugo.io" target="_blank">Hugo</a>
-				using the
-				<a href="http://github.com/digitalcraftsman/hugo-material-docs" target="_blank">Material</a> theme.
+				{{ i18n "global.copyright" | markdownify }}
 			</aside>
 
 			<footer class="footer">

layouts/partials/drawer.html

@@ -1,5 +1,5 @@
 <nav aria-label="Navigation">
-  <a href="{{ with .Site.Params.repo_url }}{{ . }}{{ else }}{{ .Site.BaseURL }}{{ end }}" class="project">
+  <a href="{{ with .Site.Params.repo_url }}{{ . }}{{ else }}{{ .Site.BaseURL | relLangURL }}{{ end }}" class="project">
     <div class="banner">
       {{ with .Site.Params.logo }}
         <div class="logo">

layouts/partials/footer.html

@@ -5,7 +5,7 @@
   {{ if .Prev }}
       <a href="{{ .Prev.Permalink }}" title="{{ .Prev.Title }}">
         <span class="direction">
-          Previous
+          {{ i18n "footer.button.prev" }}
         </span>
         <div class="page">
           <div class="button button-previous" role="button" aria-label="Previous">
@@ -25,7 +25,7 @@
   {{ if .Next }}
       <a href="{{ .Next.Permalink }}" title="{{ .Next.Title }}">
         <span class="direction">
-          Next
+          {{ i18n "footer.button.next" }}
         </span>
         <div class="page">
           <div class="stretch">
@@ -55,7 +55,7 @@
   <div class="next">
       <a href="{{ $permalink }}" title="{{ $title }}">
         <span class="direction">
-          Next
+          {{ i18n "footer.button.next" }}
         </span>
         <div class="page">
           <div class="stretch">

layouts/partials/language_button.html

@@ -0,0 +1,15 @@
+{{ if .IsTranslated }}
+<div class="dropdown-container">
+    <div class="toggle-button dropdown" role="button" aria-label="Languages">
+        <div class="dropdown-button">{{ .Site.Language.LanguageName }}</div>
+        <span class="dropdown-caret icon icon-link"></span>
+        <div class="dropdown-content">
+            {{ range .Translations }}
+            {{ if ne .Language.Lang $.Site.Language.Lang }}
+            <a class="toggle-button" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
+            {{ end }}
+            {{ end}}
+        </div>
+    </div>
+</div>
+{{ end }}

layouts/partials/nav_link.html

@@ -1,8 +1,8 @@
 {{ $currentMenuEntry := .Scratch.Get "currentMenuEntry" }}
-{{ $isCurrent := eq .Permalink ($currentMenuEntry.URL | absURL | printf "%s") }}
+{{ $isCurrent := eq .Permalink ($currentMenuEntry.URL | absLangURL | printf "%s") }}
 
 
-<a {{ if $isCurrent }}class="current"{{ end }} title="{{ $currentMenuEntry.Name }}" href="{{ $currentMenuEntry.URL | relURL}}">
+<a {{ if $isCurrent }}class="current"{{ end }} title="{{ $currentMenuEntry.Name }}" href="{{ $currentMenuEntry.URL | relLangURL}}">
 	{{ $currentMenuEntry.Pre }}
 	{{ $currentMenuEntry.Name }}
 </a>

static/stylesheets/temporary.css

@@ -9,3 +9,145 @@ blockquote {
     font-size: inherit;
     border-left: 5px solid #eee;
 }
+
+.dropdown-container {
+	position:relative;
+}
+
+.dropdown {
+	position: absolute;
+	right: 20px;
+	bottom: 10px;
+    display: inline-block;
+}
+
+.dropdown-button {
+	display: inline-block;
+	font-size: 18px;
+	padding: 13px 0px;
+
+	-webkit-transition:color .25s;
+    transition:color .25s;
+}
+
+.dropdown-caret {
+	display: inline-block;
+
+	-webkit-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    -o-transform: rotate(90deg);
+    transform: rotate(90deg);
+
+    -webkit-transition: 250ms linear all;
+    -moz-transition: 250ms linear all;
+    -o-transition: 250ms linear all;
+    transition: 250ms linear all;
+}
+
+.dropdown:hover .dropdown-content {
+	display: block;
+}
+
+.dropdown:hover .dropdown-caret {
+	-webkit-transform: rotate(-90deg);
+    -moz-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    -o-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+}
+
+.dropdown-content {
+	background: #ffffff;
+	position: absolute;
+	right: 0px;
+	z-index: 100;
+	display: none;
+	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+}
+
+.dropdown-content a {
+	font-size: 18px;
+	border: none;
+	padding: 10px;
+}
+
+.article.wrapper {
+	padding: 78px 24px 96px
+}
+
+.palette-primary-red .dropdown:hover .dropdown-button, .palette-primary-red .dropdown:hover .dropdown-caret {
+	color:#e84e40;
+}
+
+.palette-primary-pink .dropdown:hover .dropdown-button, .palette-primary-pink .dropdown:hover .dropdown-caret {
+	color:#e91e63;
+}
+
+.palette-primary-purple .dropdown:hover .dropdown-button, .palette-primary-purple .dropdown:hover .dropdown-caret {
+  color:#ab47bc;
+}
+
+.palette-primary-deep-purple .dropdown:hover .dropdown-button, .palette-primary-deep-purple .dropdown:hover .dropdown-caret {
+  color:#7e57c2;
+}
+
+.palette-primary-indigo .dropdown:hover .dropdown-button, .palette-primary-indigo .dropdown:hover .dropdown-caret {
+  color:#3f51b5;
+}
+
+.palette-primary-blue .dropdown:hover .dropdown-button, .palette-primary-blue .dropdown:hover .dropdown-caret {
+  color:#5677fc;
+}
+
+.palette-primary-light-blue .dropdown:hover .dropdown-button, .palette-primary-light-blue .dropdown:hover .dropdown-caret {
+  color:#03a9f4;
+}
+
+.palette-primary-cyan .dropdown:hover .dropdown-button, .palette-primary-cyan .dropdown:hover .dropdown-caret {
+  color:#00bcd4;
+}
+
+.palette-primary-teal .dropdown:hover .dropdown-button, .palette-primary-teal .dropdown:hover .dropdown-caret {
+  color:#009688;
+}
+
+.palette-primary-green .dropdown:hover .dropdown-button, .palette-primary-green .dropdown:hover .dropdown-caret {
+  color:#259b24;
+}
+
+.palette-primary-light-green .dropdown:hover .dropdown-button, .palette-primary-light-green .dropdown:hover .dropdown-caret {
+  color:#7cb342;
+}
+
+.palette-primary-lime .dropdown:hover .dropdown-button, .palette-primary-lime .dropdown:hover .dropdown-caret {
+  color:#c0ca33;
+}
+
+.palette-primary-yellow .dropdown:hover .dropdown-button, .palette-primary-yellow .dropdown:hover .dropdown-caret {
+  color:#f9a825;
+}
+
+.palette-primary-amber .dropdown:hover .dropdown-button, .palette-primary-amber .dropdown:hover .dropdown-caret {
+  color:#ffb300;
+}
+
+.palette-primary-orange .dropdown:hover .dropdown-button, .palette-primary-orange .dropdown:hover .dropdown-caret {
+  color:#fb8c00;
+}
+
+.palette-primary-deep-orange .dropdown:hover .dropdown-button, .palette-primary-deep-orange .dropdown:hover .dropdown-caret {
+  color:#ff7043;
+}
+
+.palette-primary-brown .dropdown:hover .dropdown-button, .palette-primary-brown .dropdown:hover .dropdown-caret {
+  color:#795548;
+}
+
+.palette-primary-grey .dropdown:hover .dropdown-button, .palette-primary-grey .dropdown:hover .dropdown-caret {
+  color:#757575;
+}
+
+.palette-primary-blue-grey .dropdown:hover .dropdown-button, .palette-primary-blue-grey .dropdown:hover .dropdown-caret {
+  color:#546e7a;
+}