feat: add multilingual mode support (#241)

BREAKING CHANGE: Layout file renamed ´layouts/partials/page-footer.html → layouts/partials/menu-nextprev.html`. If you use overrides, you might need to change the filenames as well.
2022-01-23 13:21:44 +01:00 · 2022-01-23 13:21:44 +01:00 · 5c22ce57dc
commit 5c22ce57dc
parent 42ebf067bb
88 changed files with 437 additions and 144 deletions
--- a/layouts/404.html
+++ b/layouts/404.html
@ -2,7 +2,7 @@
 <html lang="{{ .Site.Language.Lang }}">
  <head>
    {{ partial "head/meta" . }}
-    <title>Lost? Don't worry</title>
+    <title>{{ i18n "error_page_title" }}</title>

    {{ partial "head/favicons" . }}
    {{ partial "head/others" . }}
@ -14,6 +14,7 @@

    <div class="wrapper">
      <input type="checkbox" class="hidden" id="menu-header-control" />
+
      {{ partial "site-header" (dict "Root" . "MenuEnabled" false) }}


@ -23,11 +24,10 @@
            <svg class="icon gdoc_cloud_off"><use xlink:href="#gdoc_cloud_off"></use></svg>
          </div>
          <div class="gdoc-error__message">
-            <div class="gdoc-error__line gdoc-error__title">Lost?</div>
-            <div class="gdoc-error__line gdoc-error__code">Error 404</div>
+            <div class="gdoc-error__line gdoc-error__title">{{ i18n "error_message_title" }}</div>
+            <div class="gdoc-error__line gdoc-error__code">{{ i18n "error_message_code" }}</div>
            <div class="gdoc-error__line gdoc-error__help">
-              Seems like what you are looking for can't be found. Don't worry we can bring you back
-              to the <a class="gdoc-error__link" href="{{ .Site.BaseURL }}">homepage</a>.
+              {{ i18n "error_message_text" .Site.BaseURL | safeHTML }}
            </div>
          </div>
        </div>
--- a/layouts/_default/_markup/render-heading.html
+++ b/layouts/_default/_markup/render-heading.html
@ -6,7 +6,7 @@
 <div class="gdoc-page__anchorwrap">
    <h{{ .Level }} id="{{ .Anchor | safeURL }}">
        {{ .Text | safeHTML }}
-        <a data-clipboard-text="{{ .Page.Permalink }}#{{ .Anchor | safeURL }}" class="gdoc-page__anchor gdoc-page__anchor--right clip" aria-label="Anchor {{ .Text | safeHTML }}" href="#{{ .Anchor | safeURL }}">
+        <a data-clipboard-text="{{ .Page.Permalink }}#{{ .Anchor | safeURL }}" class="gdoc-page__anchor gdoc-page__anchor--right clip" title="{{ i18n "title_anchor_prefix" }} {{ .Text | safeHTML }}" aria-label="{{ i18n "title_anchor_prefix" }} {{ .Text | safeHTML }}" href="#{{ .Anchor | safeURL }}">
            <svg class="icon gdoc_link"><use xlink:href="#gdoc_link"></use></svg>
        </a>
    </h{{ .Level }}>
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@ -39,7 +39,11 @@

        <div class="gdoc-page">
          {{ template "main" . }}
-          {{ partial "page-footer" . }}
+
+
+          <div class="gdoc-page__footer flex flex-wrap justify-between">
+            {{ partial "menu-nextprev" . }}
+          </div>
        </div>
      </main>

--- a/layouts/partials/foot.html
+++ b/layouts/partials/foot.html
@ -1,5 +1,6 @@
 {{ if default true .Site.Params.GeekdocSearch }}
  <script defer src="{{ index (index .Site.Data.assets "search.js") "src" | relURL }}"></script>
-  {{- $searchConfig := resources.Get "search/config.json" | resources.ExecuteAsTemplate "search/config.json" . | resources.Minify -}}
+  {{- $searchConfigFile := printf "search/%s.config.json" .Language.Lang -}}
+  {{- $searchConfig := resources.Get "search/config.json" | resources.ExecuteAsTemplate $searchConfigFile . | resources.Minify -}}
  {{- $searchConfig.Publish -}}
 {{ end }}
--- a/layouts/partials/language.html
+++ b/layouts/partials/language.html
@ -0,0 +1,51 @@
+{{ if .Site.IsMultiLingual }}
+  <span class="gdoc-language">
+    <ul class="gdoc-language__selector" role="button" aria-pressed="false" tabindex="0">
+      <li>
+        {{ range .Site.Languages }}
+          {{ if eq . $.Site.Language }}
+            <span class="flex align-center">
+              <svg class="icon gdoc_language"><use xlink:href="#gdoc_language"></use></svg>
+              <span>{{ .Lang | upper }}</span>
+            </span>
+          {{ end }}
+        {{ end }}
+
+
+        <ul class="gdoc-language__list">
+          {{ if $.Translations }}
+            {{ range $.Translations }}
+              <li>
+                <a
+                  class="flex gdoc-language__entry"
+                  title="{{ .Language.LanguageName }}"
+                  href="{{ .RelPermalink }}"
+                  hreflang="{{ .Lang }}"
+                  lang="{{ .Lang }}"
+                >
+                  {{ .Language.LanguageName }}
+                </a>
+              </li>
+            {{ end }}
+          {{ else }}
+            {{ range .Site.Languages -}}
+              {{ if ne $.Site.Language.Lang .Lang }}
+                <li>
+                  <a
+                    class="flex gdoc-language__entry"
+                    title="{{ i18n "language_switch_no_tranlation_prefix" }} {{ .LanguageName }}"
+                    href="{{ .Lang | relLangURL }}"
+                    hreflang="{{ .Lang }}"
+                    lang="{{ .Lang }}"
+                  >
+                    {{ .LanguageName }}*
+                  </a>
+                </li>
+              {{ end -}}
+            {{ end -}}
+          {{ end }}
+        </ul>
+      </li>
+    </ul>
+  </span>
+{{ end }}
--- a/layouts/partials/menu-bundle.html
+++ b/layouts/partials/menu-bundle.html
@ -27,6 +27,13 @@
          {{ $id := substr (sha1 $this.Permalink) 0 8 }}
          {{ $doCollapse := and (isset . "sub") (or $this.Params.GeekdocCollapseSection (default false .Site.Params.GeekdocCollapseAllSections)) }}

+          {{ if reflect.IsMap .name }}
+            {{ $current.Scratch.Set "refName" (index .name $site.Language.Lang) }}
+          {{ else }}
+            {{ $current.Scratch.Set "refName" .name }}
+          {{ end }}
+          {{ $name := $current.Scratch.Get "refName" }}
+

          <input
            type="checkbox"
@ -56,20 +63,20 @@
                  {{ if $isCurrent }}is-active{{ end }}
                {{ end }}"
              >
-                {{ .name }}
+                {{ $name }}
              </a>
            </span>
            {{ if $doCollapse }}
-              <svg class="icon gdoc_keyborad_arrow_left">
+              <svg class="icon toggle gdoc_keyborad_arrow_left">
                <use xlink:href="#gdoc_keyborad_arrow_left"></use>
              </svg>
-              <svg class="icon gdoc_keyborad_arrow_down hidden">
+              <svg class="icon toggle gdoc_keyborad_arrow_down hidden">
                <use xlink:href="#gdoc_keyborad_arrow_down"></use>
              </svg>
            {{ end }}
          </label>
        {{ else }}
-          <span class="flex">{{ .name }}</span>
+          <span class="flex">{{ $name }}</span>
        {{ end }}

        {{ with .sub }}
--- a/layouts/partials/menu-extra.html
+++ b/layouts/partials/menu-extra.html
@ -15,8 +15,15 @@
      {{ $isCurrent := eq $current $this }}
      {{ $icon := default false .icon }}

+      {{ if reflect.IsMap .name }}
+        {{ $current.Scratch.Set "refName" (index .name $site.Language.Lang) }}
+      {{ else }}
+        {{ $current.Scratch.Set "refName" .name }}
+      {{ end }}
+      {{ $name := $current.Scratch.Get "refName" }}
+
      {{ if not .icon }}
-        {{ errorf "Missing 'icon' attribute in data file for '%s' menu item '%s'" $target .name }}
+        {{ errorf "Missing 'icon' attribute in data file for '%s' menu item '%s'" $target $name }}
      {{ end }}

      {{ if eq $target "header" }}
@ -30,7 +37,7 @@
            class="gdoc-header__link"
          >
            <svg class="icon {{ .icon }}">
-              <title>{{ .name }}</title>
+              <title>{{ $name }}</title>
              <use xlink:href="#{{ .icon }}"></use>
            </svg>
          </a>
--- a/layouts/partials/menu-filetree.html
+++ b/layouts/partials/menu-filetree.html
@ -77,10 +77,10 @@
                <span class="flex">{{ partial "title" . }}</span>
              {{ end }}
              {{ if $doCollapse }}
-                <svg class="icon gdoc_keyborad_arrow_left">
+                <svg class="icon toggle gdoc_keyborad_arrow_left">
                  <use xlink:href="#gdoc_keyborad_arrow_left"></use>
                </svg>
-                <svg class="icon gdoc_keyborad_arrow_down">
+                <svg class="icon toggle gdoc_keyborad_arrow_down">
                  <use xlink:href="#gdoc_keyborad_arrow_down"></use>
                </svg>
              {{ end }}
--- a/layouts/partials/menu-nextprev.html
+++ b/layouts/partials/menu-nextprev.html
@ -22,8 +22,15 @@
      {{ $this := $site.GetPage .ref }}
      {{ $current := $current.Scratch.Get "current" }}

+      {{ if reflect.IsMap .name }}
+        {{ $current.Scratch.Set "refName" (index .name $site.Language.Lang) }}
+      {{ else }}
+        {{ $current.Scratch.Set "refName" .name }}
+      {{ end }}
+      {{ $name := $current.Scratch.Get "refName" }}
+
      {{ if $current.Scratch.Get "getNext" }}
-        {{ $current.Scratch.Set "nextPage" (dict "name" .name "this" $this) }}
+        {{ $current.Scratch.Set "nextPage" (dict "name" $name "this" $this) }}
        {{ $current.Scratch.Set "getNext" false }}
      {{ end }}

@ -32,7 +39,7 @@
        {{ $current.Scratch.Set "getNext" true }}
      {{ end }}

-      {{ $current.Scratch.Set "prev" (dict "name" .name "this" $this) }}
+      {{ $current.Scratch.Set "prev" (dict "name" $name "this" $this) }}
    {{ end }}

    {{ $sub := default false .sub }}
@ -42,33 +49,30 @@
  {{ end }}
 {{ end }}

-
-<div class="gdoc-page__footer flex flex-wrap justify-between">
-  {{ $showPrevNext := (and (default true .Site.Params.GeekdocNextPrev) .Site.Params.GeekdocMenuBundle) }}
-  {{ if $showPrevNext }}
-    <span class="gdoc-page__nav">
-      {{ with ($current.Scratch.Get "prevPage") }}
-        <a
-          class="gdoc-page__nav--prev flex align-center"
-          href="{{ .this.RelPermalink }}"
-          title="{{ .name }}"
-        >
-          <i class="gdoc-icon">gdoc_arrow_left_alt</i>
-          {{ .name }}
-        </a>
-      {{ end }}
-    </span>
-    <span class="gdoc-page__nav">
-      {{ with ($current.Scratch.Get "nextPage") }}
-        <a
-          class="gdoc-page__nav--next flex align-center"
-          href="{{ .this.RelPermalink }}"
-          title="{{ .name }}"
-        >
-          {{ .name }}
-          <i class="gdoc-icon">gdoc_arrow_right_alt</i>
-        </a>
-      {{ end }}
-    </span>
-  {{ end }}
-</div>
+{{ $showPrevNext := (and (default true .Site.Params.GeekdocNextPrev) .Site.Params.GeekdocMenuBundle) }}
+{{ if $showPrevNext }}
+  <span class="gdoc-page__nav">
+    {{ with ($current.Scratch.Get "prevPage") }}
+      <a
+        class="gdoc-page__nav--prev flex align-center"
+        href="{{ .this.RelPermalink }}"
+        title="{{ .name }}"
+      >
+        <i class="gdoc-icon">gdoc_arrow_left_alt</i>
+        {{ .name }}
+      </a>
+    {{ end }}
+  </span>
+  <span class="gdoc-page__nav">
+    {{ with ($current.Scratch.Get "nextPage") }}
+      <a
+        class="gdoc-page__nav--next flex align-center"
+        href="{{ .this.RelPermalink }}"
+        title="{{ .name }}"
+      >
+        {{ .name }}
+        <i class="gdoc-icon">gdoc_arrow_right_alt</i>
+      </a>
+    {{ end }}
+  </span>
+{{ end }}
--- a/layouts/partials/menu.html
+++ b/layouts/partials/menu.html
@ -3,7 +3,7 @@


  <section class="gdoc-nav--main">
-    <h2>Navigation</h2>
+    <h2>{{ i18n "nav_navigation" }}</h2>
    {{ if .Site.Params.GeekdocMenuBundle }}
      {{ partial "menu-bundle" (dict "current" . "source" .Site.Data.menu.main.main) }}
    {{ else }}
@ -13,7 +13,7 @@

  {{ if and (in (slice "posts" "tags") .Section) (default false .Site.Params.GeekdocTagsToMenu) }}
    <section class="gdoc-nav--tags">
-      <h2>Tags</h2>
+      <h2>{{ i18n "nav_tags" }}</h2>
      <ul class="gdoc-nav__list">
        {{ $currentPage := .RelPermalink }}
        {{ range $name, $taxonomy := .Site.Taxonomies.tags }}
@ -35,7 +35,7 @@

  <section class="gdoc-nav--more">
    {{ if .Site.Data.menu.more.more }}
-      <h2>More</h2>
+      <h2>{{ i18n "nav_more" }}</h2>
      {{ partial "menu-bundle" (dict "current" . "source" .Site.Data.menu.more.more) }}
    {{ end }}
  </section>
--- a/layouts/partials/page-header.html
+++ b/layouts/partials/page-header.html
@ -49,7 +49,7 @@
        <a
          href="{{ $geekdocRepo }}/{{ path.Join $geekdocEditPath ($.Scratch.Get "geekdocFilePath") }}"
        >
-          Edit this page
+          {{ i18n "edit_page" }}
        </a>
      </span>
    </div>
--- a/layouts/partials/posts/metadata.html
+++ b/layouts/partials/posts/metadata.html
@ -3,7 +3,7 @@
  <span class="gdoc-post__tag">
    <time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
      {{ if .Lastmod.After (.Date.AddDate 0 0 1) }}
-        Updated on
+        {{ i18n "posts_update_prefix" }}
      {{ end }}
      {{ .Lastmod.Format "Jan 2, 2006" }}
    </time>
@ -12,7 +12,7 @@

 <span class="no-wrap">
  <svg class="icon gdoc_timer"><use xlink:href="#gdoc_timer"></use></svg>
-  <span class="gdoc-post__tag">{{ .ReadingTime }} min read</span>
+  <span class="gdoc-post__tag">{{ i18n "posts_read_time" .ReadingTime }}</span>
 </span>

 {{ $tc := 0 }}
--- a/layouts/partials/search.html
+++ b/layouts/partials/search.html
@ -5,10 +5,11 @@
      type="text"
      id="gdoc-search-input"
      class="gdoc-search__input"
-      placeholder="Search..."
-      aria-label="Search"
+      placeholder="{{ i18n "form_placeholder_search" }}"
+      aria-label="{{ i18n "form_placeholder_search" }}"
      maxlength="64"
      data-site-base-url="{{ .Site.BaseURL }}"
+      data-site-lang="{{ .Site.Language.Lang }}"
    />
    <div class="gdoc-search__spinner spinner hidden"></div>
    <ul id="gdoc-search-results" class="gdoc-search__list"></ul>
--- a/layouts/partials/site-footer.html
+++ b/layouts/partials/site-footer.html
@ -2,28 +2,31 @@
  <div class="container flex">
    <div class="flex flex-wrap">
      <span class="gdoc-footer__item gdoc-footer__item--row">
-        Built with <a href="https://gohugo.io/" class="gdoc-footer__link">Hugo</a> and
-        <svg class="icon gdoc_heart"><use xlink:href="#gdoc_heart"></use></svg>
+        {{ i18n "footer_build_with" | safeHTML }}
      </span>
      {{ with .Site.Params.GeekdocLegalNotice }}
        <span class="gdoc-footer__item gdoc-footer__item--row">
-          <a href="{{ . | relURL }}" class="gdoc-footer__link">Legal Notice</a>
+          <a href="{{ . | relURL }}" class="gdoc-footer__link">
+            {{ i18n "footer_legal_notice" }}
+          </a>
        </span>
      {{ end }}
      {{ with .Site.Params.GeekdocPrivacyPolicy }}
        <span class="gdoc-footer__item gdoc-footer__item--row">
-          <a href="{{ . | relURL }}" class="gdoc-footer__link">Privacy Policy</a>
+          <a href="{{ . | relURL }}" class="gdoc-footer__link">
+            {{ i18n "footer_privacy_policy" }}
+          </a>
        </span>
      {{ end }}
    </div>
    {{ if (default true .Site.Params.GeekdocBackToTop) }}
      <div class="flex flex-25 justify-end">
        <span class="gdoc-footer__item text-right">
-          <a class="gdoc-footer__link fake-link" href="#" aria-label="Back to top">
+          <a class="gdoc-footer__link fake-link" href="#" aria-label="{{ i18n "nav_top" }}">
            <svg class="icon gdoc_keyborad_arrow_up">
              <use xlink:href="#gdoc_keyborad_arrow_up"></use>
            </svg>
-            <span class="hidden-mobile">Back to top</span>
+            <span class="hidden-mobile">{{ i18n "nav_top" }}</span>
          </a>
        </span>
      </div>
--- a/layouts/partials/site-header.html
+++ b/layouts/partials/site-header.html
@ -1,60 +1,72 @@
 <header class="gdoc-header">
  <div class="container flex align-center justify-between">
    {{ if .MenuEnabled }}
-      <label for="menu-control" class="gdoc-nav__control">
+      <label for="menu-control" class="gdoc-nav__control" tabindex="0">
        <svg class="icon gdoc_menu">
-          <title>Open Nav Menu</title>
+          <title>{{ i18n "button_nav_open" }}</title>
          <use xlink:href="#gdoc_menu"></use>
        </svg>
        <svg class="icon gdoc_arrow_back">
-          <title>Close Nav Menu</title>
+          <title>{{ i18n "button_nav_close" }}</title>
          <use xlink:href="#gdoc_arrow_back"></use>
        </svg>
      </label>
    {{ end }}
-    <a class="gdoc-header__link" href="{{ .Root.Site.BaseURL }}">
-      <span class="gdoc-brand flex align-center">
-        <img
-          class="gdoc-brand__img"
-          src="{{ (default "brand.svg" .Root.Site.Params.GeekdocLogo) | relURL }}"
-          alt=""
-        />
-        <span class="gdoc-brand__title">{{ .Root.Site.Title }}</span>
-      </span>
-    </a>
+    <div>
+      <a class="gdoc-brand gdoc-header__link" href="{{ .Root.Site.BaseURL }}">
+        <span class="flex align-center">
+          <img
+            class="gdoc-brand__img"
+            src="{{ (default "brand.svg" .Root.Site.Params.GeekdocLogo) | relURL }}"
+            alt=""
+          />
+          <span class="gdoc-brand__title">{{ .Root.Site.Title }}</span>
+        </span>
+      </a>
+    </div>
    <div class="gdoc-menu-header">
-      <span {{ if .Root.Site.Data.menu.extra.header }}class="gdoc-menu-header__items"{{ end }}>
+      <span
+        {{ if .Root.Site.Data.menu.extra.header }}class="gdoc-menu-header__items"{{ end }}
+      >
        {{ if .Root.Site.Data.menu.extra.header }}
          {{ partial "menu-extra" (dict "current" .Root "source" .Root.Site.Data.menu.extra.header "target" "header") }}
        {{ end }}
+
+
        <span id="gdoc-dark-mode">
          <svg class="icon gdoc_brightness_dark">
-            <title>Toggle Dark/Light/Auto mode</title>
+            <title>{{ i18n "button_toggle_dark" }}</title>
            <use xlink:href="#gdoc_brightness_dark"></use>
          </svg>
          <svg class="icon gdoc_brightness_light">
-            <title>Toggle Dark/Light/Auto mode</title>
+            <title>{{ i18n "button_toggle_dark" }}</title>
            <use xlink:href="#gdoc_brightness_light"></use>
          </svg>
          <svg class="icon gdoc_brightness_auto">
-            <title>Toggle Dark/Light/Auto mode</title>
+            <title>{{ i18n "button_toggle_dark" }}</title>
            <use xlink:href="#gdoc_brightness_auto"></use>
          </svg>
        </span>
+
        {{ if .Root.Site.Data.menu.extra.header }}
          <span class="gdoc-menu-header__home">
            <a href="{{ .Root.Site.BaseURL }}" class="gdoc-header__link">
              <svg class="icon gdoc_home">
-                <title>Back to homepage</title>
+                <title>{{ i18n "button_homepage" }}</title>
                <use xlink:href="#gdoc_home"></use>
              </svg>
            </a>
          </span>
+        {{ end }}
+
+        {{ partial "language" .Root }}
+
+        {{ if .Root.Site.Data.menu.extra.header }}
          <span class="gdoc-menu-header__control">
            <label for="menu-header-control">
              <svg class="icon gdoc_keyborad_arrow_right">
                <use xlink:href="#gdoc_keyborad_arrow_right"></use>
-                <title>Close Menu Bar</title>
+                <title>{{ i18n "button_menu_close" }}</title>
              </svg>
            </label>
          </span>
@ -64,7 +76,7 @@
        <label for="menu-header-control" class="gdoc-menu-header__control">
          <svg class="icon gdoc_keyborad_arrow_left">
            <use xlink:href="#gdoc_keyborad_arrow_left"></use>
-            <title>Open Menu Bar</title>
+            <title>{{ i18n "button_menu_open" }}</title>
          </svg>
        </label>
      {{ end }}
--- a/layouts/posts/list.html
+++ b/layouts/posts/list.html
@ -11,10 +11,10 @@
        {{ if .Truncated }}
          <a
            class="flex-inline align-center fake-link"
-            title="Read full post"
+            title="{{ i18n "posts_read_more" }}"
            href="{{ .RelPermalink }}"
          >
-            Read full post
+            {{ i18n "posts_read_more" }}
            <i class="gdoc-icon">gdoc_arrow_right_alt</i>
          </a>
        {{ end }}
--- a/layouts/taxonomy/list.html
+++ b/layouts/taxonomy/list.html
@ -11,10 +11,10 @@
        {{ if .Truncated }}
          <a
            class="flex-inline align-center fake-link"
-            title="Read full post"
+            title="{{ i18n "posts_read_more" }}"
            href="{{ .RelPermalink }}"
          >
-            Read full post
+            {{ i18n "posts_read_more" }}
            <i class="gdoc-icon">gdoc_arrow_right_alt</i>
          </a>
        {{ end }}