scapegoat/Docs2.git

parent: e38eaa94 | patch | commit | ignore whitespace

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

Youssif Shaaban Alsager

2022-08-24 25ba1159ad5cabfe79c80a40ead158c389a68bef

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

2 files added

17 files modified

	assets/styles/base.scss	5 ●●●●● patch \| view \| raw \| blame \| history
	i18n/ar.toml	65 ●●●●● patch \| view \| raw \| blame \| history
	i18n/en.toml	65 ●●●●● patch \| view \| raw \| blame \| history
	layouts/404.html	7 ●●●●● patch \| view \| raw \| blame \| history
	layouts/_default/baseof.html	2 ●●●●● patch \| view \| raw \| blame \| history
	layouts/_default/section.html	5 ●●●●● patch \| view \| raw \| blame \| history
	layouts/_default/single.html	3 ●●●●● patch \| view \| raw \| blame \| history
	layouts/_default/taxonomy.html	7 ●●●●● patch \| view \| raw \| blame \| history
	layouts/_default/term.html	5 ●●●●● patch \| view \| raw \| blame \| history
	layouts/partials/backlinks.html	4 ●●●●● patch \| view \| raw \| blame \| history
	layouts/partials/contact.html	11 ●●●●● patch \| view \| raw \| blame \| history
	layouts/partials/darkmode.html	4 ●●●●● patch \| view \| raw \| blame \| history
	layouts/partials/github.html	2 ●●●●● patch \| view \| raw \| blame \| history
	layouts/partials/graph.html	2 ●●●●● patch \| view \| raw \| blame \| history
	layouts/partials/head.html	39 ●●●●● patch \| view \| raw \| blame \| history
	layouts/partials/header.html	7 ●●●●● patch \| view \| raw \| blame \| history
	layouts/partials/recent.html	2 ●●●●● patch \| view \| raw \| blame \| history
	layouts/partials/search.html	4 ●●●●● patch \| view \| raw \| blame \| history
	layouts/partials/toc.html	2 ●●●●● patch \| view \| raw \| blame \| history

 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 {

 i18n/ar.toml

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

 i18n/en.toml

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

 layouts/404.html

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

 layouts/_default/baseof.html

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


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

</html>

 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>

 layouts/_default/taxonomy.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}}
@@ -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>

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

</html>

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

 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>

 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>

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

 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 {

 layouts/partials/head.html

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

 layouts/partials/header.html

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

 layouts/partials/recent.html

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

 layouts/partials/search.html

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

 layouts/partials/toc.html

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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