✨ Add i18n support

CHANGELOG.md

@@ -9,13 +9,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- i18n support
+
 ### Changed
 
 - Consolidated author configuration parameters into `config.toml`
 
 ### Fixed
 
-- Fixes URLs being incorrect in some cases when the site is deployed in a subfolder
+- URLs being incorrect in some cases when the site is deployed in a subfolder
 
 ## [1.0.0] - 2020-08-16
 

config/_default/config.toml

@@ -6,6 +6,7 @@ theme = "congo"
 
 # baseURL = "https://your_domain.com/"
 languageCode = "en"
+defaultContentLanguage = "en"
 
 title = "Congo"
 # copyright = "Copy, _right?_ :thinking_face:"

data/sharing.json

@@ -1,27 +1,27 @@
 {
   "email": {
     "icon": "email",
-    "title": "Send via email",
+    "title": "sharing.email",
     "url": "mailto:?body=%s&subject=%s"
   },
   "facebook": {
     "icon": "facebook",
-    "title": "Share on Facebook",
+    "title": "sharing.facebook",
     "url": "https://www.facebook.com/sharer/sharer.php?u=%s&quote=%s"
   },
   "linkedin": {
     "icon": "linkedin",
-    "title": "Share on LinkedIn",
+    "title": "sharing.linkedin",
     "url": "https://www.linkedin.com/shareArticle?mini=true&url=%s&title=%s"
   },
   "reddit": {
     "icon": "reddit",
-    "title": "Submit to Reddit",
+    "title": "sharing.reddit",
     "url": "https://reddit.com/submit/?url=%s&resubmit=true&title=%s"
   },
   "twitter": {
     "icon": "twitter",
-    "title": "Tweet on Twitter",
+    "title": "sharing.twitter",
     "url": "https://twitter.com/intent/tweet/?url=%s&text=%s"
   }
 }

exampleSite/config.toml

@@ -10,6 +10,7 @@
 baseURL = "https://jpanther.github.io/Congo/"
 theme = "Congo"
 languageCode = "en-AU"
+defaultContentLanguage = "en"
 title = "Congo"
 enableEmoji = true
 relativeURLs = true

exampleSite/content/docs/configuration.md

@@ -34,7 +34,8 @@ Note that the variable names provided in this table use dot notation to simplify
 | --- | --- | --- | --- |
 |`theme`|string|`"congo"`|This must be set to `"congo"` for the theme to function.|
 |`baseURL`|string|_Not set_|The URL to the root of the website.|
-|`languageCode`|string|`"en"`|The language of the website. It can be a top-level language (ie. `"en"`) or a sub-variant (ie. `"en-AU"`)."
+|`languageCode`|string|`"en"`|The language of the website for site metadata purposes. It can be a top-level language (ie. `"en"`) or a sub-variant (ie. `"en-AU"`)."|
+|`defaultContentLanguage`|string|`"en"`|This value determines the language of theme components."|
 |`title`|string|`"Congo"`|The title of the website. This will be displayed in the site header and footer.|
 |`copyright`|string|_Not set_|A Markdown string containing the copyright message to be displayed in the site footer. If none is provided, Congo will automatically generate a copyright string using the site `title`.
 |`enableEmoji`|boolean|`true`|Whether emoji strings in content should be converted to emoji symbols.|

i18n/en.yaml

@@ -0,0 +1,35 @@
+article:
+  anchor_label: "Anchor"
+  draft: "Draft"
+  reading_time:
+    one: "{{ .Count }} min"
+    other: "{{ .Count }} mins"
+  reading_time_title: "Reading time"
+
+author:
+  byline_title: "Author"
+
+error:
+  404_title: "Page Not Found :confused:"
+  404_error: "Error 404"
+  404_description: "It seems that the page you've requested does not exist."
+
+footer:
+  powered_by: "Powered by"
+
+homepage:
+  recent: "Recent"
+
+list:
+  externalurl_title: "Link to external site"
+  no_articles: "There's no articles to list here yet."
+
+sharing:
+  email: "Send via email"
+  facebook: "Share on Facebook"
+  linkedin: "Share on LinkedIn"
+  reddit: "Submit to Reddit"
+  twitter: "Tweet on Twitter"
+
+shortcode:
+  no_icon: "Icon not found."

layouts/404.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
-  <h1 class="mb-3 text-4xl font-extrabold">Page Not Found 🤷‍♂️</h1>
+  <h1 class="mb-3 text-4xl font-extrabold">{{ i18n "error.404_title" | emojify }}</h1>
-  <p class="mt-8 mb-12 text-gray-400 dark:text-gray-500">Error 404</p>
+  <p class="mt-8 mb-12 text-gray-400 dark:text-gray-500">{{ i18n "error.404_error" | emojify }}</p>
   <div class="prose dark:prose-light">
-    <p>It seems that the page you've requested does not exist.</p>
+    <p>{{ i18n "error.404_description" | emojify }}</p>
   </div>
 {{ end }}

layouts/_default/_markup/render-heading.html

@@ -1 +1 @@
-<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }} {{ if .Page.Params.showHeadingAnchors | default (.Page.Site.Params.article.showHeadingAnchors | default true) }}<a class="heading-anchor" href="#{{ .Anchor | safeURL }}" aria-label="Anchor">#</a>{{ end }}</h{{ .Level }}>
+<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }} {{ if .Page.Params.showHeadingAnchors | default (.Page.Site.Params.article.showHeadingAnchors | default true) }}<a class="heading-anchor" href="#{{ .Anchor | safeURL }}" aria-label="{{ i18n "article.anchor_label" }}">#</a>{{ end }}</h{{ .Level }}>

layouts/_default/list.html

@@ -16,7 +16,7 @@
   {{ else }}
     <section class="mt-10 prose dark:prose-light">
       <p class="py-8 border-t">
-        <em>There's no articles to list here yet.</em>
+        <em>{{ i18n "list.no_articles" | emojify }}</em>
       </p>
     </section>
   {{ end }}

layouts/_default/single.html

@@ -8,7 +8,7 @@
           <span
             class="ml-2 px-1 py-[2px] text-xs font-normal border rounded-md text-primary-700 dark:text-primary-400 border-primary-400 dark:border-primary-600 inline-block align-middle mb-1"
           >
-            Draft
+            {{ i18n "article.draft" | emojify }}
           </span>
         {{ end }}
       </div>

layouts/index.html

@@ -7,7 +7,7 @@
   {{ end }}
   {{ if .Site.Params.homepage.showList | default false }}
     <section>
-      <h2 class="text-2xl font-extrabold">Recent</h2>
+      <h2 class="text-2xl font-extrabold">{{ i18n "homepage.recent" | emojify }}</h2>
       {{ range first 5 (.Paginate (where .Site.RegularPages "Type" "in" .Site.Params.homepage.listSections)).Pages }}
         {{ partial "article-link.html" . }}
       {{ end }}

layouts/partials/article-link.html

@@ -7,7 +7,7 @@
       <span
         class="text-sm cursor-default"
         style="vertical-align: super;"
-        title="Link to external site"
+        title="{{ i18n "list.externalurl_title" }}"
         >&#8599;</span
       >
     {{ else }}

layouts/partials/article-meta.html

@@ -11,8 +11,7 @@
   <span class="px-1">&middot;</span>
 {{ end }}
 {{ if and (.Params.showReadingTime | default (.Site.Params.article.showReadingTime | default true)) (ne .ReadingTime 0) }}
-  <span title="Reading time">
+  <span title="{{ i18n "article.reading_time_title" }}">
-    {{ .ReadingTime }}
+    {{ i18n "article.reading_time" .ReadingTime | emojify }}
-    min{{ if gt .ReadingTime 1 }}s{{ end }}
   </span>
 {{ end }}

layouts/partials/author.html

@@ -5,6 +5,9 @@
     {{ end }}
     <div>
       {{ with .Site.Author.name }}
+        <div class="text-[0.6rem] leading-3 text-gray-400 dark:text-gray-500 uppercase">
+          {{ i18n "author.byline_title" | emojify }}
+        </div>
         <div class="font-semibold leading-6 text-gray-800 dark:text-gray-300">
           {{ . }}
         </div>

layouts/partials/footer.html

@@ -12,7 +12,7 @@
   {{/* Theme attribution */}}
   {{ if .Site.Params.attribution | default true }}
     <p class="text-xs text-gray-300 dark:text-gray-600">
-      Powered by
+      {{ i18n "footer.powered_by" }}
       <a class="hover:underline" href="https://gohugo.io/" target="_blank">Hugo</a>
       &amp;
       <a class="hover:underline" href="https://git.io/hugo-congo" target="_blank">Congo</a>

layouts/partials/sharing-links.html

@@ -6,7 +6,7 @@
         <a
           class="bg-gray-300 text-gray-700 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-primary-400 dark:hover:text-gray-800 m-1 hover:bg-primary-500 hover:text-white rounded min-w-[2.4rem] inline-block text-center p-1"
           href="{{ printf .url $.Permalink $.Title }}"
-          title="{{ .title }}"
+          title="{{ i18n .title }}"
           >{{ partial "icon.html" .icon }}</a
         >
       {{ end }}

layouts/shortcodes/icon.html

@@ -3,6 +3,6 @@
   {{ if $icon }}
     {{ $icon.Content | safeHTML }}
   {{ else }}
-    <em>Icon not found.</em>
+    <em>{{ i18n "shortcode.no_icon" }}</em>
   {{ end }}
 </span>