Add support for i18n

hugo.yaml

@@ -1,7 +1,5 @@
 baseURL: 'newpipe-ev.de'
 title: NewPipe e.V.
-languageCode: en-us
-DefaultContentLanguage: en
 enableEmoji: true
 enableGitInfo: true
 enableRobotsTXT: true
@@ -10,6 +8,28 @@ paginate: 9
 darkmode_js:
   - assets/js/darkmode.js
 enableInlineShortcodes: true
+defaultContentLanguage: de
+defaultContentLanguageInSubdir: true
+languages:
+  de:
+    contentDir: content
+    disabled: false
+    languageCode: de-DE
+    languageDirection: ltr
+    languageName: Deutsch
+    params:
+      subtitle: Referenz, Tutorials und Erklärungen
+    weight: 1
+  en:
+    contentDir: content
+    disabled: false
+    languageCode: en-US
+    languageDirection: ltr
+    languageName: English
+    params:
+      subtitle: Reference, Tutorials, and Explanations
+    weight: 2
+
 
 markup:
   goldmark:

i18n/de.toml

@@ -0,0 +1,12 @@
+prose = "Prosa"
+about = "Über"
+categories = "Kategorien"
+dropdown = "Dropdown"
+contact = "Kontakt"
+appearance = "Aussehen"
+comments = "Kommentare"
+analytics = "Analytik"
+basicInfo = "Dies sind die Grundinformationen über NewPipe e.V."
+
+moto = "Supporting privacy and open source software"
+index_description = "NewPipe e.V. ist eine gemeinnützige Organisation, die sich für die Förderung von Datenschutz und Open-Source-Software einsetzt. Wir sind die Organisation hinter NewPipe, einer freien Medien-App für Android."

i18n/en.toml

@@ -1,2 +1,15 @@
+prose = "Prose"
+about = "About"
+catergories = "Categories"
+dropdown = "Dropdown"
+contact = "Contact"
+appearance = "Appearance"
+comments = "Comments"
+analytics = "Analytics"
+basicInfo = "This is basic information about NewPipe e.V."
+
+moto = "Supporting privacy and open source software"
+index_description = "NewPipe e.V. is a non-profit organization that aims to empower users to take back control of their data and to protect their privacy when using Android devices."
+
 [wordCount]
-other = "{{ .WordCount }} words"
+other = "{{ .WordCount }} words"

layouts/index.html

@@ -8,10 +8,10 @@
                         {{ .Site.Title }}
                     </h1>
                     <h2 class="pb-2 text-3xl font-light text-gray-800 dark:text-gray-300 md:text-4xl">
-                        {{ .Site.Params.Moto }}
+                        {{ T "moto" }}
                     </h2>
                     <p class="max-w-xl mx-auto mb-6 font-normal text-gray-900 lg:mx-0 xl:mb-2 md:text-lg xl:text-xl dark:text-gray-50">
-                        {{ .Site.Params.Description}}
+                        {{ T "index_description" }}
                     </p>
                 </div>
                 <div class="col-span-6">

layouts/partials/nav.html

@@ -7,7 +7,7 @@
                      class="transition-opacity h-9 w-9 group-hover:opacity-50 group-focus:opacity-70"
                      alt="{{ .Site.Title }} Logo" />
                 <div
-                     class="mt-1 ml-3 text-xl font-black tracking-tight text-gray-100 uppercase transition-colors group-hover:text-gray-400/60">
+                     class="mt-1 ml-3 text-xl font-black tracking-tight text-gray-100 transition-colors group-hover:text-gray-400/60">
                     {{ .Site.Title }}</div>
             </a>
             <button class="rounded-lg md:hidden focus:outline-none focus:shadow-outline" @click="open = !open" role="navigation" aria-expanded="false" aria-label="Main" aria-controls="menuItems">
@@ -28,7 +28,7 @@
             <div @click.away="open = false" class="relative" x-data="{ open: false }">
                 <button @click="open = !open"
                         class="flex flex-row items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:w-auto md:inline md:mt-0 md:ml-4 hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-600 focus:outline-none focus:shadow-outline">
-                    <span>{{ .Name }}</span>
+                    <span>{{ or (T .Identifier) .Name | safeHTML }}</span>
                     <svg fill="currentColor" viewBox="0 0 20 20" :class="{'rotate-180': open, 'rotate-0': !open}"
                          class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1">
                         <path fill-rule="evenodd"
@@ -78,8 +78,8 @@
                                     
                                 </div>
                                 <div class="ml-3">
-                                    <p class="font-semibold">{{ .Name }}</p>
+                                    <p class="font-semibold">{{ or (T .Identifier) .Name | safeHTML }}</p>
-                                    <p class="text-sm">{{ .Post }}</p>
+                                    <p class="text-sm">{{ or (T .Post) .Post | safeHTML }}</p>
                                 </div>
                             </a>
                             {{ end }}
@@ -91,7 +91,7 @@
             <div @click.away="open = false" class="relative" x-data="{ open: false }">
                 <button @click="open = !open"
                         class="flex flex-row items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg md:w-auto md:inline md:mt-0 md:ml-4 hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-600 focus:outline-none focus:shadow-outline">
-                    <span>{{ .Name }}</span>
+                    <span>{{ or (T .Identifier) .Name | safeHTML }}</span>
                     <svg fill="currentColor" viewBox="0 0 20 20" :class="{'rotate-180': open, 'rotate-0': !open}"
                          class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1">
                         <path fill-rule="evenodd"
@@ -109,7 +109,8 @@
                     <div class="px-2 py-2 text-primary-900 bg-white rounded-md shadow">
                         {{ range (index site.Menus .Identifier) }}
                         <a class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg md:mt-0 hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-600 focus:outline-none focus:shadow-outline"
-                           href="{{ .URL | absLangURL }}">{{- .Name -}}</a>
+                           href="{{ .URL | absLangURL }}">{{- or (T .Identifier) .Name | safeHTML -}}
+                        </a>
                         {{ end }}
                     </div>
                 </div>
@@ -117,7 +118,7 @@
             {{ else }}
             <a class="px-4 py-2 mt-2 text-sm font-semibold rounded-lg md:mt-0 md:ml-4 hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-700 focus:outline-none focus:shadow-outline"
                 href="{{ .URL | absLangURL }}" title="{{ .Title | default .Name }}">
-                {{ .Name }}
+                {{ or (T .Identifier) .Name | safeHTML }}
             </a>
             {{ end }}
             {{ end }}
@@ -136,6 +137,31 @@
                 </svg>
             </button>
             {{ end }}
+            <div @click.away="open = false" class="relative" x-data="{ open: false }">
+                <button @click="open = !open"
+                        class="flex flex-row items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg md:w-auto md:mt-0 md:ml-4 hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-600 focus:outline-none focus:shadow-outline">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
+                    </svg>
+                    <span class="ml-1">{{ .Site.Language.Lang }}</span>
+                </button>
+                <div x-show="open" x-transition:enter="transition ease-out duration-100"
+                     x-transition:enter-start="transform opacity-0 scale-95"
+                     x-transition:enter-end="transform opacity-100 scale-100"
+                     x-transition:leave="transition ease-in duration-75"
+                     x-transition:leave-start="transform opacity-100 scale-100"
+                     x-transition:leave-end="transform opacity-0 scale-95"
+                     class="absolute right-0 z-30 w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48">
+                    <div class="px-2 py-2 text-primary-900 bg-white rounded-md shadow">
+                        {{$currentUrl := trim .Page.RelPermalink "/"}}
+                        {{ range (.Site.Languages) }}
+                        <a class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg md:mt-0 hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-600 focus:outline-none focus:shadow-outline"
+                           href="{{ replace $currentUrl $.Site.Language.Lang .Lang | relURL }}">{{- .LanguageName -}}
+                        </a>
+                        {{ end }}
+                    </div>
+                </div>
+            </div>
         </nav>
     </div>
 </div>

layouts/shortcodes/t.html

@@ -0,0 +1 @@
+{{- $text := .Get 0 -}}{{- T $text -}}