feat: Add internationalization (i18n) support (jackyzha0#182)

drgndrp · Aug 24, 2022 · 25ba115 · 25ba115
1 parent e38eaa9
commit 25ba115
Show file tree

Hide file tree

Showing 19 changed files with 189 additions and 52 deletions.
diff --git a/assets/styles/base.scss b/assets/styles/base.scss
@@ -10,11 +10,14 @@
 html {
   scroll-behavior: smooth;
   &:lang(ar) {
-    & p, & h1, & h2, & h3, article {
+    & p, & h1, & h2, & h3, article, header {
       direction: rtl;
       text-align: right;
     }
   }
+  & footer > p {
+    text-align: center !important;
+  }
 }
 
 .singlePage {

diff --git a/i18n/ar.toml b/i18n/ar.toml
@@ -0,0 +1,65 @@
+[404_message]
+other = "يبدو أنك ضللت الطريق. هذه الصفحة غير موجودة (أو قد تكون خاصة)."
+
+[404_back]
+other = "↳ العودة للرئيسية."
+
+[all_posts]
+other = "كل منشورات {{.Title}}"
+
+[last_updated]
+other = "آخر تعديل"
+
+[notes_count]
+other = "ملاحظات بهذه التسمية"
+
+[first_10]
+other = "(تعرض أول 10 نتائج فقط)"
+
+[tag]
+other = "التسمية"
+
+[backlinks]
+other = "الروابط الخلفية"
+
+[no_backlinks]
+other = "لا توجد روابط خلفية"
+
+[home]
+other = "الرئيسية"
+
+[light_mode]
+other = "السمة الفاتحة"
+
+[dark_mode]
+other = "السمة الداكنة"
+
+[edit_source]
+other = "تعديل المصدر"
+
+[interactive_graph]
+other = "المخطط التفاعلي"
+
+[search]
+other = "البحث"
+
+[search_icon]
+other = "أيقونة البحث"
+
+[icon_search]
+other = "أيقونة فتح نافذة البحث"
+
+[recent_notes]
+other = "الملاحظات اﻷخيرة"
+
+[first_3_notes]
+other = "أول 3 {{ .notes }}"
+
+[search_for_something]
+other = "ابحث عن شيء ما..."
+
+[toc]
+other = "الفهرس"
+
+[copyright]
+other = "صُمم بواسطة {{ .name }} باستخدام <a href='https://github.com/jackyzha0/quartz'>كوارتز</a>، {{ .year }} ©"
diff --git a/i18n/en.toml b/i18n/en.toml
@@ -0,0 +1,65 @@
+[404_message]
+other = "Hey! You look a little lost. This page doesn't exist (or may be private)."
+
+[404_back]
+other = "↳ Let's get you home."
+
+[all_posts]
+other = "All {{.Title}}"
+
+[last_updated]
+other = "Last updated"
+
+[notes_count]
+other = "notes with this tag"
+
+[first_10]
+other = "showing first 10 results"
+
+[tag]
+other = "Tag"
+
+[backlinks]
+other = "Backlinks"
+
+[no_backlinks]
+other = "No backlinks found"
+
+[home]
+other = "Home"
+
+[light_mode]
+other = "Light Mode"
+
+[dark_mode]
+other = "Dark Mode"
+
+[edit_source]
+other = "Edit Source"
+
+[interactive_graph]
+other = "Interactive Graph"
+
+[search]
+other = "Search"
+
+[search_icon]
+other = "Search Icon"
+
+[icon_search]
+other = "Icon to open search"
+
+[recent_notes]
+other = "Recent Notes"
+
+[first_3_notes]
+other = "first 3 {{ .notes }}"
+
+[search_for_something]
+other = "Search for something..."
+
+[toc]
+other = "Table of Contents"
+
+[copyright]
+other = "Made by {{ .name }} using <a href=\"https://github.com/jackyzha0/quartz\">Quartz</a>, © {{ .year }}"
diff --git a/layouts/404.html b/layouts/404.html
@@ -1,16 +1,15 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="{{ .Lang }}">
 {{ partial "head.html" . }}
 
 <body>
 <div class="singlePage">
     {{partial "darkmode.html" .}}
     <div class="centered">
         <h1>404.</h1>
-        <h3>Hey! You look a little lost. This page doesn't exist (or may be private).</h3>
-        <a href="{{ .Site.BaseURL }}">↳ Let's get you home.</a>
+        <h3>{{ i18n "404_message" }}</h3>
+        <a href="{{ .Site.BaseURL }}">{{ i18n "404_back" }}</a>
     </div>
 </div>
 </body>
-
 </html>
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="{{ .Lang }}">
 {{ block "head" . }}
 {{ end }}
 

diff --git a/layouts/_default/section.html b/layouts/_default/section.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="{{ .Lang }}">
 {{ partial "head.html" . }}
 
 <body>
@@ -8,7 +8,7 @@
     <!-- Begin actual content -->
     {{partial "header.html" .}}
     <article>
-        <h1>All {{.Title}}</h1>
+        <h1>{{ i18n "all_posts" . }}</h1>
         {{with .Params.description}}
             <p>{{.}}</p>
         {{end}}
@@ -18,5 +18,4 @@ <h1>All {{.Title}}</h1>
     {{partial "contact.html" .}}
 </div>
 </body>
-
 </html>
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -10,7 +10,7 @@
     <article>
       {{if .Title}}<h1>{{ .Title }}</h1>{{end}}
       <p class="meta">
-          Last updated {{ partial "date-fmt.html" .}} 
+        {{ i18n "last_updated" }} {{ partial "date-fmt.html" .}} 
           {{ partial "github.html" . }}
       </p>
       <ul class="tags">
@@ -24,5 +24,4 @@
     {{partial "footer.html" .}}
 </div>
 </body>
-
 </html>
diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="{{ .Lang }}">
 {{ partial "head.html" . }}
 
 <body>
@@ -8,15 +8,15 @@
     <!-- Begin actual content -->
     {{partial "header.html" .}}
     <article>
-        <h1>All {{.Title}}</h1>
+        <h1>{{ i18n "all_posts" . }}</h1>
         {{with .Params.description}}
             <p>{{.}}</p>
         {{end}}
         <div class="tags">
             {{ range .Site.Taxonomies.tags.ByCount }}
             <div class="meta">
                 <h1><a href="{{ .Page.Permalink }}">{{ .Page.Title | humanize }}</a></h1>
-                <p><b>{{ .Count }}</b> notes with this tag {{if gt .Count 10}}(showing first 10 results){{end}}</p>
+                <p><b>{{ .Count }}</b> {{ i18n "notes_count" }} {{if gt .Count 10}}({{ i18n "first_10"}}){{end}}</p>
             </div>
             {{ with ($.Site.GetPage (printf "/tags/%s" .Page.Title)) }}
             {{partial "page-list.html" (first 10 .Pages.ByLastmod.Reverse)}}
@@ -27,5 +27,4 @@ <h1><a href="{{ .Page.Permalink }}">{{ .Page.Title | humanize }}</a></h1>
     {{partial "contact.html" .}}
 </div>
 </body>
-
 </html>
diff --git a/layouts/_default/term.html b/layouts/_default/term.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="{{ .Lang }}">
 {{ partial "head.html" . }}
 
 <body>
@@ -8,7 +8,7 @@
     <!-- Begin actual content -->
     {{partial "header.html" .}}
     <article>
-        <h1>Tag: {{ .Title }}</h1>
+        <h1>{{ i18n "tag" }}: {{ .Title }}</h1>
         {{with .Params.description}}
             <p>{{.}}</p>
         {{end}}
@@ -18,5 +18,4 @@ <h1>Tag: {{ .Title }}</h1>
     {{partial "contact.html" .}}
 </div>
 </body>
-
 </html>
diff --git a/layouts/partials/backlinks.html b/layouts/partials/backlinks.html
@@ -1,4 +1,4 @@
-<h3>Backlinks</h3>
+<h3>{{ i18n "backlinks" }}</h3>
 <ul class="backlinks">
     {{$url := urls.Parse .Site.BaseURL }}
     {{$host := strings.TrimRight "/" $url.Path }}
@@ -24,7 +24,7 @@ <h3>Backlinks</h3>
     {{- end -}}
     {{else}}
     <li>
-        No backlinks found
+      {{ i18n "no_backlinks" }}
     </li>
     {{end}}
 </ul>
diff --git a/layouts/partials/contact.html b/layouts/partials/contact.html
@@ -1,12 +1,17 @@
+<!-- set data/config yaml file based on website language -->
+{{ $config := cond (eq $.Site.Language.Lang "en") "config" (printf "config.%s" $.Site.Language.Lang) }}
+{{ $data := index $.Site.Data $config }}
 <!-- Contact Info -->
 <div id="contact_buttons">
     <footer>
-        <p>Made by {{ $.Site.Data.config.name }} using <a href="https://github.com/jackyzha0/quartz">Quartz</a>, © {{ dateFormat "2006" now }}</p>
+        {{ $name := $data.name | default $.Site.Data.config.name }}
+        {{ $year := dateFormat "2006" now }}
+        <p>{{ i18n "copyright" (dict "name" $name "year" $year) | safeHTML}}</p>
         <ul>
             {{ if not .IsHome }}
-            <li><a href="{{ $.Site.BaseURL}}">Home</a></li>
+            <li><a href="{{ $.Site.BaseURL}}">{{ i18n "home" }}</a></li>
             {{end}}
-            {{- range $.Site.Data.config.links -}}
+            {{- range $data.links | default $.Site.Data.config.links -}}
             <li><a href="{{.link}}">{{.link_name}}</a></li>
             {{- end -}}
         </ul>

diff --git a/layouts/partials/darkmode.html b/layouts/partials/darkmode.html
@@ -2,13 +2,13 @@
     <input class='toggle' id='darkmode-toggle' type='checkbox' tabindex="-1">
     <label id="toggle-label-light" for='darkmode-toggle' tabindex="-1">
         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="dayIcon" x="0px" y="0px" viewBox="0 0 35 35" style="enable-background:new 0 0 35 35;" xml:space="preserve">
-            <title>Light Mode</title>
+            <title>{{ i18n "light_mode" }}</title>
             <path d="M6,17.5C6,16.672,5.328,16,4.5,16h-3C0.672,16,0,16.672,0,17.5    S0.672,19,1.5,19h3C5.328,19,6,18.328,6,17.5z M7.5,26c-0.414,0-0.789,0.168-1.061,0.439l-2,2C4.168,28.711,4,29.086,4,29.5    C4,30.328,4.671,31,5.5,31c0.414,0,0.789-0.168,1.06-0.44l2-2C8.832,28.289,9,27.914,9,27.5C9,26.672,8.329,26,7.5,26z M17.5,6    C18.329,6,19,5.328,19,4.5v-3C19,0.672,18.329,0,17.5,0S16,0.672,16,1.5v3C16,5.328,16.671,6,17.5,6z M27.5,9    c0.414,0,0.789-0.168,1.06-0.439l2-2C30.832,6.289,31,5.914,31,5.5C31,4.672,30.329,4,29.5,4c-0.414,0-0.789,0.168-1.061,0.44    l-2,2C26.168,6.711,26,7.086,26,7.5C26,8.328,26.671,9,27.5,9z M6.439,8.561C6.711,8.832,7.086,9,7.5,9C8.328,9,9,8.328,9,7.5    c0-0.414-0.168-0.789-0.439-1.061l-2-2C6.289,4.168,5.914,4,5.5,4C4.672,4,4,4.672,4,5.5c0,0.414,0.168,0.789,0.439,1.06    L6.439,8.561z M33.5,16h-3c-0.828,0-1.5,0.672-1.5,1.5s0.672,1.5,1.5,1.5h3c0.828,0,1.5-0.672,1.5-1.5S34.328,16,33.5,16z     M28.561,26.439C28.289,26.168,27.914,26,27.5,26c-0.828,0-1.5,0.672-1.5,1.5c0,0.414,0.168,0.789,0.439,1.06l2,2    C28.711,30.832,29.086,31,29.5,31c0.828,0,1.5-0.672,1.5-1.5c0-0.414-0.168-0.789-0.439-1.061L28.561,26.439z M17.5,29    c-0.829,0-1.5,0.672-1.5,1.5v3c0,0.828,0.671,1.5,1.5,1.5s1.5-0.672,1.5-1.5v-3C19,29.672,18.329,29,17.5,29z M17.5,7    C11.71,7,7,11.71,7,17.5S11.71,28,17.5,28S28,23.29,28,17.5S23.29,7,17.5,7z M17.5,25c-4.136,0-7.5-3.364-7.5-7.5    c0-4.136,3.364-7.5,7.5-7.5c4.136,0,7.5,3.364,7.5,7.5C25,21.636,21.636,25,17.5,25z" />
         </svg>
     </label>
     <label id="toggle-label-dark" for='darkmode-toggle' tabindex="-1">
         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="nightIcon" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background='new 0 0 100 100'" xml:space="preserve">
-            <title>Dark Mode</title>
+            <title>{{ i18n "dark_mode" }}</title>
             <path d="M96.76,66.458c-0.853-0.852-2.15-1.064-3.23-0.534c-6.063,2.991-12.858,4.571-19.655,4.571  C62.022,70.495,50.88,65.88,42.5,57.5C29.043,44.043,25.658,23.536,34.076,6.47c0.532-1.08,0.318-2.379-0.534-3.23  c-0.851-0.852-2.15-1.064-3.23-0.534c-4.918,2.427-9.375,5.619-13.246,9.491c-9.447,9.447-14.65,22.008-14.65,35.369  c0,13.36,5.203,25.921,14.65,35.368s22.008,14.65,35.368,14.65c13.361,0,25.921-5.203,35.369-14.65  c3.872-3.871,7.064-8.328,9.491-13.246C97.826,68.608,97.611,67.309,96.76,66.458z" />
         </svg>
     </label>

diff --git a/layouts/partials/github.html b/layouts/partials/github.html
@@ -1,3 +1,3 @@
 {{if $.Site.Data.config.enableGitHubEdit}}
-<a href="{{$.Site.Data.config.GitHubLink}}/{{.File.Path}}" rel="noopener">Edit Source</a>
+<a href="{{$.Site.Data.config.GitHubLink}}/{{.File.Path}}" rel="noopener">{{ i18n "edit_source" }}</a>
 {{end}}
diff --git a/layouts/partials/graph.html b/layouts/partials/graph.html
@@ -3,7 +3,7 @@
   integrity="sha256-+7jaYCp29O1JusNWHaYtgUn6EhuP0VaFuswhNV06MyI="
   crossorigin="anonymous"
 ></script>
-<h3>Interactive Graph</h3>
+<h3>{{ i18n "interactive_graph" }}</h3>
 <div id="graph-container"></div>
 <style>
   :root {