alrayyes/wiki
1
0
Fork 0
mirror of https://github.com/alrayyes/wiki.git synced 2024-11-22 19:46:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Youssif Shaaban Alsager 2022-08-24 05:32:40 +02:00 committed by GitHub
parent e38eaa94d6
commit 25ba1159ad
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 189 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
assets/styles/base.scss
View file

@ -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 {

65
i18n/ar.toml Normal file
View file

@ -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 }} ©"

65
i18n/en.toml Normal file
View file

@ -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 }}"

7
layouts/404.html
View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="{{ .Lang }}">
{{ partial "head.html" . }}
<body>
@ -7,10 +7,9 @@
{{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>

2
layouts/_default/baseof.html
View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="{{ .Lang }}">
{{ block "head" . }}
{{ end }}

5
layouts/_default/section.html
View file

@ -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 @@
{{partial "contact.html" .}}
</div>
</body>
</html>

3
layouts/_default/single.html
View file

@ -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>

7
layouts/_default/taxonomy.html
View file

@ -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}}
@ -16,7 +16,7 @@
{{ 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 @@
{{partial "contact.html" .}}
</div>
</body>
</html>

5
layouts/_default/term.html
View file

@ -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 @@
{{partial "contact.html" .}}
</div>
</body>
</html>

4
layouts/partials/backlinks.html
View file

@ -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 @@
{{- end -}}
{{else}}
<li>
No backlinks found
{{ i18n "no_backlinks" }}
</li>
{{end}}
</ul>

11
layouts/partials/contact.html
View file

@ -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>

4
layouts/partials/darkmode.html
View file

@ -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>

2
layouts/partials/github.html
View file

@ -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}}

2
layouts/partials/graph.html
View file

@ -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 {

39
layouts/partials/head.html
View file

@ -1,18 +1,21 @@
<!-- 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 }}
<head>
<!-- Meta tags -->
<meta charset="UTF-8" />
<meta
name="description"
content="{{if .IsHome}}{{$.Site.Data.config.description}}{{else}}{{.Summary}}{{end}}"
content="{{if .IsHome}}{{$data.description | default $.Site.Data.config.description}}{{else}}{{.Summary}}{{end}}"
/>
<title>
{{ if .Title }}{{ .Title }}{{ else }}{{ $.Site.Data.config.page_title }}{{
{{ if .Title }}{{ .Title }}{{ else }}{{ $data.page_title | default $.Site.Data.config.page_title }}{{
end }}
</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- HTML Favicon -->
{{ $favicon := $.Site.Data.config.favicon | default (slice (dict "rel" "shortcut icon" "type" "image/png" "href" "icon.png")) }}
{{ $favicon := $data.favicon | default $.Site.Data.config.favicon | default (slice (dict "rel" "shortcut icon" "type" "image/png" "href" "icon.png")) }}
{{ $type := (printf "%T" $favicon) }}
{{ if eq $type "string" }}
{{ $favicon | safeHTML }}
@ -29,7 +32,7 @@
{{$scss := . | resources.ToCSS (dict "outputStyle" "compressed") }}
{{$css = $css | append $scss}}
{{end}}
{{if $.Site.Data.config.enableCallouts}}
{{if $data.enableCallouts | default $.Site.Data.config.enableCallouts}}
{{$scss := resources.Get "styles/_callouts.scss" | resources.ToCSS (dict "outputStyle" "compressed") }}
{{$css = $css | append $scss}}
{{end}}
@ -55,17 +58,17 @@
<script src="{{$popover.Permalink}}"></script>
<!-- Optional scripts -->
{{ if $.Site.Data.config.enableCodeBlockTitle }}
{{ if $data.enableCodeBlockTitle | default $.Site.Data.config.enableCallouts }}
{{ $codeTitle := resources.Get "js/code-title.js" | resources.Fingerprint "md5" | resources.Minify }}
<script src="{{$codeTitle.Permalink}}"></script>
{{end}}
{{ if $.Site.Data.config.enableCodeBlockCopy }}
{{ if $data.enableCodeBlockCopy | default $.Site.Data.config.enableCodeBlockCopy }}
{{ $clipboard := resources.Get "js/clipboard.js" | resources.Fingerprint "md5" | resources.Minify }}
<script src="{{$clipboard.Permalink}}"></script>
{{ end }}
{{ if $.Site.Data.config.enableCallouts }}
{{ if $data.enableCallouts | default $.Site.Data.config.enableCallouts }}
{{ $callouts := resources.Get "js/callouts.js" | resources.Fingerprint "md5" | resources.Minify }}
<script src="{{$callouts.Permalink}}"></script>
{{ end }}
@ -101,27 +104,27 @@
const pathWindow = window.location.pathname;
const isHome = pathBase == pathWindow;
{{if $.Site.Data.config.enableCodeBlockCopy -}}
{{if $data.enableCodeBlockCopy | default $.Site.Data.config.enableCodeBlockCopy -}}
addCopyButtons();
{{ end }}
{{if $.Site.Data.config.enableSPA -}}
{{if $data.enableSPA | default $.Site.Data.config.enableSPA -}}
addTitleToCodeBlocks();
{{ end }}
{{if $.Site.Data.config.enableCallouts -}}
{{if $data.enableCallouts | default $.Site.Data.config.enableCallouts -}}
addCollapsibleCallouts();
{{ end }}
{{if $.Site.Data.config.enableLinkPreview}}
{{if $data.enableLinkPreview | default $.Site.Data.config.enableLinkPreview}}
initPopover(
{{strings.TrimRight "/" .Site.BaseURL }},
{{$.Site.Data.config.enableContextualBacklinks}},
{{$.Site.Data.config.enableLatex}}
{{$data.enableContextualBacklinks | default $.Site.Data.config.enableContextualBacklinks}},
{{$data.enableLatex | default $.Site.Data.config.enableLatex}}
)
{{end}}
{{if $.Site.Data.config.enableFooter}}
{{if $data.enableFooter | default $.Site.Data.config.enableFooter}}
const footer = document.getElementById("footer")
if (footer) {
const container = document.getElementById("graph-container")
@ -144,14 +147,14 @@
const init = (doc = document) => {
// NOTE: everything within this callback will be executed for initial page navigation. This is a good place to put JavaScript that only replaces DOM nodes.
{{if $.Site.Data.config.enableCodeBlockCopy -}}
{{if $data.enableCodeBlockCopy | default $.Site.Data.config.enableCodeBlockCopy -}}
addCopyButtons();
{{ end }}
{{if $.Site.Data.config.enableCodeBlockTitle -}}
{{if $data.enableCodeBlockTitle | default $.Site.Data.config.enableCodeBlockTitle -}}
addTitleToCodeBlocks();
{{- end -}}
{{if $.Site.Data.config.enableLatex}}
{{if $data.enableLatex | default $.Site.Data.config.enableLatex}}
renderMathInElement(doc.body, {
delimiters: [
{left: '$$', right: '$$', display: true},
@ -162,7 +165,7 @@
{{end}}
};
</script>
{{if $.Site.Data.config.enableSPA}}
{{if $data.enableSPA | default $.Site.Data.config.enableSPA}}
{{ $router := resources.Get "js/router.js" | resources.Fingerprint "md5" |
resources.Minify }}
<script type="module">

7
layouts/partials/header.html
View file

@ -1,9 +1,10 @@
<header>
<h1 id="page-title"><a href="{{ .Site.BaseURL }}">{{ .Site.Data.config.page_title }}</a></h1>
{{ $config := cond (eq $.Site.Language.Lang "en") "config" (printf "config.%s" $.Site.Language.Lang) }}
<h1 id="page-title"><a href="{{ "" | absLangURL }}">{{ ( index $.Site.Data $config ).page_title | default $.Site.Data.config.page_title }}</a></h1>
<div class="spacer"></div>
<div id="search-icon">
<p>Search</p>
<svg tabindex="0" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title id="title">Search Icon</title><desc id="desc">Icon to open search</desc><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"/><circle cx="8" cy="8" r="7"/></g></svg>
<p>{{ i18n "search" }}</p>
<svg tabindex="0" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title id="title">{{ i18n "search_icon" }}</title><desc id="desc">{{ i18n "icon_search" }}</desc><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"/><circle cx="8" cy="8" r="7"/></g></svg>
</div>
{{partial "darkmode.html" .}}
</header>

2
layouts/partials/recent.html
View file

@ -1,5 +1,5 @@
<div class="content-list">
<h2>Recent Notes</h2>
<h2>{{ i18n "recent_notes" }}</h2>
<!--
You can also configure this to find related pages!
All you need to pass into the "page-list.html" partial

4
layouts/partials/search.html
View file

@ -1,7 +1,7 @@
<div id="search-container">
<div id="search-space">
<input autocomplete="off" id="search-bar" name="search" type="text" aria-label="Search"
placeholder="Search for something...">
<input autocomplete="off" id="search-bar" name="search" type="text" aria-label="{{ i18n "search" }}"
placeholder="{{ i18n "search_for_something" }}" dir="{{ $.Site.Language.LanguageDirection }}">
<div id="results-container">
</div>
</div>

2
layouts/partials/toc.html
View file

@ -1,7 +1,7 @@
{{ if (and $.Site.Data.config.enableToc (ne .Params.enableToc false) (gt .WordCount 250)) }}
<aside class="mainTOC">
<details {{ if $.Site.Data.config.openToc }}open {{ end }}>
<summary>Table of Contents</summary>
<summary>{{ i18n "toc" }}</summary>
{{ .TableOfContents }}
</details>
</aside>