feat: add multilingual support

2021-09-10 16:38:32 +02:00 · 2021-09-10 16:38:32 +02:00 · 2f69479647
parent 1b995d66b4
commit 2f69479647
44 changed files with 619 additions and 57 deletions
--- a/assets/scss/components/_buttons.scss
+++ b/assets/scss/components/_buttons.scss
@ -209,3 +209,12 @@ pre {
 .offcanvas-header .btn-close {
  margin-right: 0 !important;
 }
+
+.dropdown-toggle::after {
+  display: none;
+}
+
+.dropdown-caret {
+  margin-left: -0.1875rem;
+  margin-right: -0.3125rem;
+}
--- a/config/_default/config.toml
+++ b/config/_default/config.toml
@ -9,6 +9,11 @@ languageCode = "en-US"
 paginate = 7
 rssLimit = 10

+# Multilingual
+defaultContentLanguage = "en"
+# disableLanguages = ["nl"]
+# defaultContentLanguageInSubdir = true
+
 # add redirects/headers
 [outputs]
 home = ["HTML", "RSS", "REDIRECTS", "HEADERS"]
@ -47,29 +52,6 @@ rel  = "sitemap"
    dir = ":cacheDir/:project"
    maxAge = "10s"

-[markup]
-  [markup.goldmark]
-    [markup.goldmark.extensions]
-      linkify = false
-    [markup.goldmark.parser]
-      autoHeadingID = true
-      autoHeadingIDType = "github"
-      [markup.goldmark.parser.attribute]
-        block = true
-        title = true
-    [markup.goldmark.renderer]
-      unsafe = true
-  [markup.highlight]
-    codeFences = false
-    guessSyntax = false
-    hl_Lines = ""
-    lineNoStart = 1
-    lineNos = false
-    lineNumbersInTable = true
-    noClasses = false
-    style = "dracula"
-    tabWidth = 4
-
 [sitemap]
  changefreq = "weekly"
  filename = "sitemap.xml"
--- a/config/_default/languages.toml
+++ b/config/_default/languages.toml
@ -0,0 +1,18 @@
+[en]
+  languageName = "English"
+  contentDir = "content/en"
+  weight = 10
+  [en.params]
+    languageISO = "EN"
+
+[nl]
+  languageName = "Nederlands"
+  contentDir = "content/nl"
+  weight = 20
+  [nl.params]
+    languageISO = "NL"
+    titleAddition = "Modern documentatie-thema"
+    description = "Doks is een Hugo-thema waarmee je moderne documentatie-websites kunt bouwen die veilig, snel en klaar voor SEO zijn — standaard."
+    titleHome = "Doks thema"
+    footer = "Mogelijk gemaakt door <a href=\"https://www.netlify.com/\">Netlify</a>, <a href=\"https://gohugo.io/\">Hugo</a>, en <a href=\"https://getdoks.org/\">Doks</a>"
+    alertText = "Introductie van het Doks-kinderthema, verschillende DX + UX-updates en meer! <a class=\"alert-link stretched-link\" href=\"https://getdoks.org/blog/doks-v0.2/\">Bekijk Doks v0.2</a>"
--- a/config/_default/markup.toml
+++ b/config/_default/markup.toml
@ -0,0 +1,29 @@
+defaultMarkdownHandler = "goldmark"
+
+[goldmark]
+  [goldmark.extensions]
+    linkify = false
+  [goldmark.parser]
+    autoHeadingID = true
+    autoHeadingIDType = "github"
+    [goldmark.parser.attribute]
+      block = true
+      title = true
+  [goldmark.renderer]
+    unsafe = true
+
+[highlight]
+  codeFences = false
+  guessSyntax = false
+  hl_Lines = ""
+  lineNoStart = 1
+  lineNos = false
+  lineNumbersInTable = true
+  noClasses = false
+  style = "dracula"
+  tabWidth = 4
+
+[tableOfContents]
+  endLevel = 3
+  ordered = false
+  startLevel = 2
--- a/config/_default/menus/menus.en.toml
+++ b/config/_default/menus/menus.en.toml
--- a/config/_default/menus/menus.nl.toml
+++ b/config/_default/menus/menus.nl.toml
@ -0,0 +1,39 @@
+[[docs]]
+  name = "Prologue"
+  weight = 10
+  identifier = "prologue"
+  url = "/docs/prologue/"
+
+[[docs]]
+  name = "Help"
+  weight = 60
+  identifier = "help"
+  url = "/docs/help/"
+
+[[main]]
+  name = "Docs"
+  url = "/docs/prologue/introduction/"
+  weight = 10
+
+# [[main]]
+#   name = "Blog"
+#   url = "/blog/"
+#   weight = 20
+
+[[social]]
+  name = "GitHub"
+  pre = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-github\"><path d=\"M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22\"></path></svg>"
+  url = "https://github.com/h-enk/doks"
+  post = "v0.1.0"
+  weight = 10
+
+[[social]]
+  name = "Twitter"
+  pre = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-twitter\"><path d=\"M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z\"></path></svg>"
+  url = "https://twitter.com/getdoks"
+  weight = 20
+
+# [[footer]]
+#   name = "Privacy"
+#   url = "/privacy-policy/"
+#   weight = 10
--- a/config/_default/params.toml
+++ b/config/_default/params.toml
@ -76,5 +76,5 @@ editPage = false
  highLight = true
  kaTex = false
  collapsibleSidebar = true
-  multilingualMode = false # Not yet functional
+  multilingualMode = true
  docsVersioning = false # Not yet functional
--- a/config/postcss.config.js
+++ b/config/postcss.config.js
@ -27,6 +27,7 @@ module.exports = {
          './assets/scss/components/_syntax.scss',
          './assets/scss/components/_search.scss',
          './assets/scss/common/_dark.scss',
+          './node_modules/bootstrap/scss/_dropdown.scss',
          './node_modules/katex/dist/katex.css',
        ]),
      ],
--- a/content/en/_index.md
+++ b/content/en/_index.md
--- a/content/en/blog/_index.md
+++ b/content/en/blog/_index.md
--- a/content/en/blog/say-hello-to-doks/index.md
+++ b/content/en/blog/say-hello-to-doks/index.md
--- a/content/en/blog/say-hello-to-doks/say-hello-to-doks.png
+++ b/content/en/blog/say-hello-to-doks/say-hello-to-doks.png
--- a/content/en/contact/index.md
+++ b/content/en/contact/index.md
--- a/content/en/contributors/_index.md
+++ b/content/en/contributors/_index.md
--- a/content/en/contributors/henk-verlinde/_index.md
+++ b/content/en/contributors/henk-verlinde/_index.md
--- a/content/en/docs/_index.md
+++ b/content/en/docs/_index.md
--- a/content/en/docs/help/_index.md
+++ b/content/en/docs/help/_index.md
--- a/content/en/docs/help/faq.md
+++ b/content/en/docs/help/faq.md
--- a/content/en/docs/help/how-to-update.md
+++ b/content/en/docs/help/how-to-update.md
--- a/content/en/docs/help/troubleshooting.md
+++ b/content/en/docs/help/troubleshooting.md
--- a/content/en/docs/prologue/_index.md
+++ b/content/en/docs/prologue/_index.md
--- a/content/en/docs/prologue/commands.md
+++ b/content/en/docs/prologue/commands.md
--- a/content/en/docs/prologue/introduction.md
+++ b/content/en/docs/prologue/introduction.md
--- a/content/en/docs/prologue/quick-start.md
+++ b/content/en/docs/prologue/quick-start.md
--- a/content/en/privacy-policy/index.md
+++ b/content/en/privacy-policy/index.md
--- a/content/nl/_index.md
+++ b/content/nl/_index.md
@ -0,0 +1,11 @@
+---
+title : "Modern documentatie-thema"
+description: "Doks is een Hugo-thema waarmee je moderne documentatie-websites kunt bouwen die veilig, snel en klaar voor SEO zijn — standaard."
+lead: "Doks is een Hugo-thema waarmee je moderne documentatie-websites kunt bouwen die veilig, snel en klaar voor SEO zijn — standaard."
+date: 2020-10-06T08:47:36+00:00
+lastmod: 2020-10-06T08:47:36+00:00
+draft: false
+images: []
+---
+
+:cow:
--- a/content/nl/contact/index.md
+++ b/content/nl/contact/index.md
@ -0,0 +1,10 @@
+---
+title: "Contact"
+description: "Drop us an email."
+date: 2020-08-27T19:25:12+02:00
+lastmod: 2020-08-27T19:25:12+02:00
+draft: true
+images: []
+---
+
+{{< email user="hello" domain="getdoks.org" >}}
--- a/content/nl/contributors/_index.md
+++ b/content/nl/contributors/_index.md
@ -0,0 +1,10 @@
+---
+title: "Contributors"
+description: "The Doks contributors."
+date: 2020-10-06T08:50:29+00:00
+lastmod: 2020-10-06T08:50:29+00:00
+draft: false
+images: []
+---
+
+The Doks contributors.
--- a/content/nl/contributors/henk-verlinde/_index.md
+++ b/content/nl/contributors/henk-verlinde/_index.md
@ -0,0 +1,12 @@
+---
+title: "Henk Verlinde"
+description: "Creator of Hyas."
+date: 2020-10-06T08:50:45+00:00
+lastmod: 2020-10-06T08:50:45+00:00
+draft: false
+images: []
+---
+
+Creator of Hyas.
+
+[@HenkVerlinde](https://twitter.com/henkverlinde)
--- a/content/nl/docs/_index.md
+++ b/content/nl/docs/_index.md
@ -0,0 +1,9 @@
+---
+title : "Docs"
+description: "Docs Doks."
+lead: ""
+date: 2020-10-06T08:48:23+00:00
+lastmod: 2020-10-06T08:48:23+00:00
+draft: false
+images: []
+---
--- a/content/nl/docs/help/_index.md
+++ b/content/nl/docs/help/_index.md
@ -0,0 +1,9 @@
+---
+title: "Help"
+description: "Help Doks."
+lead: ""
+date: 2020-10-06T08:49:15+00:00
+lastmod: 2020-10-06T08:49:15+00:00
+draft: false
+images: []
+---
--- a/content/nl/docs/help/faq.md
+++ b/content/nl/docs/help/faq.md
@ -0,0 +1,50 @@
+---
+title: "FAQ"
+description: "Answers to frequently asked questions."
+lead: "Answers to frequently asked questions."
+date: 2020-10-06T08:49:31+00:00
+lastmod: 2020-10-06T08:49:31+00:00
+draft: false
+images: []
+menu:
+  docs:
+    parent: "help"
+weight: 630
+toc: true
+---
+
+## Hyas?
+
+Doks is a [Hyas theme](https://gethyas.com/themes/) build by the creator of Hyas.
+
+## Footer notice?
+
+Please keep it in place.
+
+## Keyboard shortcuts for search?
+
+- focus: `Ctrl + /`
+- select: `↓` and `↑`
+- open: `Enter`
+- close: `Esc`
+
+## Other documentation?
+
+- [Netlify](https://docs.netlify.com/)
+- [Hugo](https://gohugo.io/documentation/)
+
+## Can I get support?
+
+Create a topic:
+
+- [Netlify Community](https://community.netlify.com/)
+- [Hugo Forums](https://discourse.gohugo.io/)
+- [Doks Discussions](https://github.com/h-enk/doks/discussions)
+
+## Contact the creator?
+
+Send `h-enk` a message:
+
+- [Netlify Community](https://community.netlify.com/)
+- [Hugo Forums](https://discourse.gohugo.io/)
+- [Doks Discussions](https://github.com/h-enk/doks/discussions)
--- a/content/nl/docs/help/how-to-update.md
+++ b/content/nl/docs/help/how-to-update.md
@ -0,0 +1,32 @@
+---
+title: "How to Update"
+description: "Regularly update the installed npm packages to keep your Doks website stable, usable, and secure."
+lead: "Regularly update the installed npm packages to keep your Doks website stable, usable, and secure."
+date: 2020-11-12T13:26:54+01:00
+lastmod: 2020-11-12T13:26:54+01:00
+draft: false
+images: []
+menu:
+  docs:
+    parent: "help"
+weight: 610
+toc: true
+---
+
+{{< alert icon="💡" text="Learn more about <a href=\"https://docs.npmjs.com/about-semantic-versioning\">semantic versioning</a> and <a href=\"https://docs.npmjs.com/cli/v6/using-npm/semver#advanced-range-syntax\">advanced range syntax</a>." />}}
+
+## Check for outdated packages
+
+The [`npm outdated`](https://docs.npmjs.com/cli/v7/commands/npm-outdated) command will check the registry to see if any (or, specific) installed packages are currently outdated:
+
+```bash
+npm outdated [[<@scope>/]<pkg> ...]
+```
+
+## Update packages
+
+The [`npm update`](https://docs.npmjs.com/cli/v7/commands/npm-update) command will update all the packages listed to the latest version (specified by the tag config), respecting semver:
+
+```bash
+npm update [<pkg>...]
+```
--- a/content/nl/docs/help/troubleshooting.md
+++ b/content/nl/docs/help/troubleshooting.md
@ -0,0 +1,30 @@
+---
+title: "Troubleshooting"
+description: "Solutions to common problems."
+lead: "Solutions to common problems."
+date: 2020-11-12T15:22:20+01:00
+lastmod: 2020-11-12T15:22:20+01:00
+draft: false
+images: []
+menu: 
+  docs:
+    parent: "help"
+weight: 620
+toc: true
+---
+
+## Problems updating npm packages
+
+Delete the `./node_modules` folder, and run again:
+
+```bash
+npm install
+```
+
+## Problems with cache
+
+Delete the temporary directories:
+
+```bash
+npm run clean
+```
--- a/content/nl/docs/prologue/_index.md
+++ b/content/nl/docs/prologue/_index.md
@ -0,0 +1,9 @@
+---
+title : "Prologue"
+description: "Prologue Doks."
+lead: ""
+date: 2020-10-06T08:48:45+00:00
+lastmod: 2020-10-06T08:48:45+00:00
+draft: false
+images: []
+---
--- a/content/nl/docs/prologue/commands.md
+++ b/content/nl/docs/prologue/commands.md
@ -0,0 +1,98 @@
+---
+title: "Commands"
+description: "Doks comes with commands for common tasks."
+lead: "Doks comes with commands for common tasks."
+date: 2020-10-13T15:21:01+02:00
+lastmod: 2020-10-13T15:21:01+02:00
+draft: false
+images: []
+menu:
+  docs:
+    parent: "prologue"
+weight: 130
+toc: true
+---
+
+{{< alert icon="💡" text="You can change the commands in the scripts section of `./package.json`." />}}
+
+## create
+
+Create new content for your site:
+
+```bash
+npm run create [path] [flags]
+```
+
+See also the Hugo docs: [hugo new](https://gohugo.io/commands/hugo_new/).
+
+## lint
+
+Check scripts, styles, and markdown for errors:
+
+```bash
+npm run lint
+```
+
+### scripts
+
+Check scripts for errors:
+
+```bash
+npm run lint:scripts [-- --fix]
+```
+
+### styles
+
+Check styles for errors:
+
+```bash
+npm run lint:styles [-- --fix]
+```
+
+### markdown
+
+Check markdown for errors:
+
+```bash
+npm run lint:markdown [-- --fix]
+```
+
+## clean
+
+Delete temporary directories:
+
+```bash
+npm run clean
+```
+
+## start
+
+Start local development server:
+
+```bash
+npm run start
+```
+
+## build
+
+Build production website:
+
+```bash
+npm run build
+```
+
+### functions
+
+Build Lambda functions:
+
+```bash
+npm run build:functions
+```
+
+### preview
+
+Build production website including draft and future content:
+
+```bash
+npm run build:preview
+```
--- a/content/nl/docs/prologue/introduction.md
+++ b/content/nl/docs/prologue/introduction.md
@ -0,0 +1,58 @@
+---
+title: "Introduction"
+description: "Doks is a Hugo theme helping you build modern documentation websites that are secure, fast, and SEO-ready — by default."
+lead: "Doks is a Hugo theme helping you build modern documentation websites that are secure, fast, and SEO-ready — by default."
+date: 2020-10-06T08:48:57+00:00
+lastmod: 2020-10-06T08:48:57+00:00
+draft: false
+images: []
+menu:
+  docs:
+    parent: "prologue"
+weight: 100
+toc: true
+---
+
+## Get started
+
+There are two main ways to get started with Doks:
+
+### Tutorial
+
+{{< alert icon="👉" text="The Tutorial is intended for novice to intermediate users." />}}
+
+Step-by-step instructions on how to start a new Doks project. [Tutorial →](https://getdoks.org/tutorial/introduction/)
+
+### Quick Start
+
+{{< alert icon="👉" text="The Quick Start is intended for intermediate to advanced users." />}}
+
+One page summary of how to start a new Doks project. [Quick Start →]({{< relref "quick-start" >}})
+
+## Go further
+
+Recipes, Reference Guides, Extensions, and Showcase.
+
+### Recipes
+
+Get instructions on how to accomplish common tasks with Doks. [Recipes →](https://getdoks.org/docs/recipes/project-configuration/)
+
+### Reference Guides
+
+Learn how to customize Doks to fully make it your own. [Reference Guides →](https://getdoks.org/docs/reference-guides/security/)
+
+### Extensions
+
+Get instructions on how to add even more to Doks. [Extensions →](https://getdoks.org/docs/extensions/breadcrumb-navigation/)
+
+### Showcase
+
+See what others have build with Doks. [Showcase →](https://getdoks.org/showcase/electric-blocks/)
+
+## Contributing
+
+Find out how to contribute to Doks. [Contributing →](https://getdoks.org/docs/contributing/how-to-contribute/)
+
+## Help
+
+Get help on Doks. [Help →]({{< relref "how-to-update" >}})
--- a/content/nl/docs/prologue/quick-start.md
+++ b/content/nl/docs/prologue/quick-start.md
@ -0,0 +1,69 @@
+---
+title: "Quick Start"
+description: "One page summary of how to start a new Doks project."
+lead: "One page summary of how to start a new Doks project."
+date: 2020-11-16T13:59:39+01:00
+lastmod: 2020-11-16T13:59:39+01:00
+draft: false
+images: []
+menu:
+  docs:
+    parent: "prologue"
+weight: 110
+toc: true
+---
+
+## Requirements
+
+Doks uses npm to centralize dependency management, making it [easy to update]({{< relref "how-to-update" >}}) resources, build tooling, plugins, and build scripts:
+
+- Download and install [Node.js](https://nodejs.org/) (it includes npm) for your platform.
+
+## Start a new Doks project
+
+Create a new site, change directories, install dependencies, and start development server.
+
+### Create a new site
+
+Doks is available as a child theme, and a starter theme:
+
+- Use the Doks child theme, if you do __not__ plan to customize a lot, and/or need future Doks updates.
+- Use the Doks starter theme, if you plan to customize a lot, and/or do __not__ need future Doks updates.
+
+Not quite sure? Use the Doks child theme.
+
+#### Doks child theme
+
+```bash
+git clone https://github.com/h-enk/doks-child-theme.git my-doks-site
+```
+
+#### Doks starter theme
+
+```bash
+git clone https://github.com/h-enk/doks.git my-doks-site
+```
+
+### Change directories
+
+```bash
+cd my-doks-site
+```
+
+### Install dependencies
+
+```bash
+npm install
+```
+
+### Start development server
+
+```bash
+npm run start
+```
+
+Doks will start the Hugo development webserver accessible by default at `http://localhost:1313`. Saved changes will live reload in the browser.
+
+## Other commands
+
+Doks comes with commands for common tasks. [Commands →]({{< relref "commands" >}})
--- a/content/nl/privacy-policy/index.md
+++ b/content/nl/privacy-policy/index.md
@ -0,0 +1,36 @@
+---
+title: "Privacy Policy"
+description: "We do not use cookies and we do not collect any personal data."
+date: 2020-08-27T19:23:18+02:00
+lastmod: 2020-08-27T19:23:18+02:00
+draft: true
+images: []
+---
+
+__TLDR__: We do not use cookies and we do not collect any personal data.
+
+## Website visitors
+
+- No personal information is collected.
+- No information is stored in the browser.
+- No information is shared with, sent to or sold to third-parties.
+- No information is shared with advertising companies.
+- No information is mined and harvested for personal and behavioral trends.
+- No information is monetized.
+
+### Information we collect and what we use it for
+
+We run [Plausible](https://plausible.io/) analytics on getdoks.org. The following information is collected:
+
+- __Page URL__. We track the page URL of each page view on this website. We use this to understand which pages have been viewed and how many times a particular page has been viewed. For example: _https://getdoks.org/_.
+- __HTTP Referrer__. We use the referrer string to understand the number of visitors referred to this website from links on other sites. For example: _https://github.com/_.
+- __Browser__. We use this to understand what browsers people use when visiting this website. This is derived from the User-Agent HTTP header. The full User-Agent is discarded. For example: _Chrome_.
+- __Operating system__. We use this to understand what operating systems people use when visiting this website. We only use the brand of the operating system and don’t include the version number or any other details. This is derived from the User-Agent HTTP header. The full User-Agent is discarded. For example: _GNU/Linux_.
+- __Device type__. We use this to understand what devices people use when visiting this website. This is derived from window.innerWidth. The actual width of the browser in pixels is discarded. For example: _Desktop_.
+- __Visitor Country__. We look up the visitor’s country using the IP address. We do not track anything more granular than the country of origin and the IP address of the visitor is discarded. We never store IP addresses in our database or logs. For example: _Canada_.
+
+## Contact us
+
+[Contact us]({{< relref "contact/index.md" >}}) if you have any questions.
+
+Effective Date: _27th August 2020_
--- a/i18n/en.toml
+++ b/i18n/en.toml
@ -0,0 +1,2 @@
+[get-started]
+   other = "Get Started"
--- a/i18n/nl.toml
+++ b/i18n/nl.toml
@ -0,0 +1,2 @@
+[get-started]
+   other = "Aan de slag"
--- a/layouts/docs/single.html
+++ b/layouts/docs/single.html
@ -1,6 +1,6 @@
 {{ define "main" }}
 	<div class="row flex-xl-nowrap">
-		<div class="col-lg-5 col-xl-4 docs-sidebar">
+		<div class="col-lg-5 col-xl-4 docs-sidebar d-none d-lg-block">
 			<nav class="docs-links" aria-label="Main navigation">
 				{{ partial "sidebar/docs-menu.html" . }}
 			</nav>
@ -35,11 +35,14 @@
 			{{ if .Site.Params.editPage -}}
 				{{ partial "main/edit-page.html" . }}
 			{{ end -}}
+			{{ partial "main/docs-navigation.html" . }}
+			<!--
 			{{ if not .Site.Params.options.collapsibleSidebar -}}
 				{{ partial "main/docs-navigation.html" . }}
 			{{ else -}}
 				<div class="my-n3"></div>
 			{{ end -}}
+			-->
 		</main>
 	</div>
 {{ end }}
--- a/layouts/index.html
+++ b/layouts/index.html
@ -6,7 +6,7 @@
    </div>
    <div class="col-lg-9 col-xl-8 text-center">
      <p class="lead">{{ .Params.lead | safeHTML }}</p>
-      <a class="btn btn-primary btn-lg px-4 mb-2" href="{{ "docs/prologue/introduction/" | relURL }}" role="button">Get started</a>
+      <a class="btn btn-primary btn-lg px-4 mb-2" href="{{ "docs/prologue/introduction/" | relLangURL }}" role="button">{{ i18n "get-started" }}</a>
      <p class="meta">Open-source MIT Licensed. <a href="https://github.com/h-enk/doks">GitHub v{{ $data := getJSON "https://raw.githubusercontent.com/h-enk/doks/master/package.json" }}{{ $data.version }}</a></p>
    </div>
  </div>
@ -14,38 +14,40 @@
 {{ end }}

 {{ define "sidebar-prefooter" }}
-<section class="section section-sm">
-  <div class="container">
-    <div class="row justify-content-center text-center">
-      <div class="col-lg-5">
-        <h2 class="h4">Security aware</h2>
-        <p>Get A+ scores on <a href="https://observatory.mozilla.org/analyze/doks.netlify.app">Mozilla Observatory</a> out of the box. Easily change the default Security Headers to suit your needs.</p>
+  {{ if eq $.Site.Language.LanguageName "English" }}
+  <section class="section section-sm">
+    <div class="container">
+      <div class="row justify-content-center text-center">
+        <div class="col-lg-5">
+          <h2 class="h4">Security aware</h2>
+          <p>Get A+ scores on <a href="https://observatory.mozilla.org/analyze/doks.netlify.app">Mozilla Observatory</a> out of the box. Easily change the default Security Headers to suit your needs.</p>
+        </div>
+        <div class="col-lg-5">
+          <h2 class="h4">Fast by default ⚡️</h2>
+          <p>Get 100 scores on <a href="https://googlechrome.github.io/lighthouse/viewer/?gist=92eaa982d7dbf92f94fe8ecc03987c9a">Google Lighthouse</a> by default. Doks removes unused css, prefetches links, and lazy loads images.</p>
+        </div>
+        <div class="col-lg-5">
+          <h2 class="h4">SEO-ready</h2>
+          <p>Use sensible defaults for structured data, open graph, and Twitter cards. Or easily change the SEO settings to your liking.</p>
+        </div>
      </div>
-      <div class="col-lg-5">
-        <h2 class="h4">Fast by default ⚡️</h2>
-        <p>Get 100 scores on <a href="https://googlechrome.github.io/lighthouse/viewer/?gist=7731347bb8ce999eff7428a8e763b637">Google Lighthouse</a> by default. Doks removes unused css, prefetches links, and lazy loads images.</p>
-      </div>
-      <div class="col-lg-5">
-        <h2 class="h4">SEO-ready</h2>
-        <p>Use sensible defaults for structured data, open graph, and Twitter cards. Or easily change the SEO settings to your liking.</p>
+      <div class="row justify-content-center text-center">
+        <div class="col-lg-5">
+          <h2 class="h4">Full text search</h2>
+          <p>Search your Doks site with FlexSearch. Easily customize index settings and search options to your liking.</p>
+        </div>
+        <div class="col-lg-5">
+          <h2 class="h4">Page layouts</h2>
+          <p>Build pages with a landing page, blog, or documentation layout. Add custom sections and components to suit your needs.</p>
+        </div>
+        <div class="col-lg-5">
+          <h2 class="h4">Dark mode</h2>
+          <p>Switch to a low-light UI with the click of a button. Change colors with variables to match your branding.</p>
+        </div>
      </div>
    </div>
-    <div class="row justify-content-center text-center">
-      <div class="col-lg-5">
-        <h2 class="h4">Full text search</h2>
-        <p>Search your Doks site with FlexSearch. Easily customize index settings and search options to your liking.</p>
-      </div>
-      <div class="col-lg-5">
-        <h2 class="h4">Page layouts</h2>
-        <p>Build pages with a landing page, blog, or documentation layout. Add custom sections and components to suit your needs.</p>
-      </div>
-      <div class="col-lg-5">
-        <h2 class="h4">Dark mode</h2>
-        <p>Switch to a low-light UI with the click of a button. Change colors with variables to match your branding.</p>
-      </div>
-    </div>
-  </div>
-</section>
+  </section>
+  {{ end }}
 {{ end }}

 {{ define "sidebar-footer" }}
--- a/layouts/partials/header/header.html
+++ b/layouts/partials/header/header.html
@ -10,7 +10,7 @@

 <header class="navbar navbar-expand-md navbar-light doks-navbar">
  <nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
-    <a class="navbar-brand p-0 me-auto" href="{{ "/" | relURL }}" aria-label="Bootstrap">
+    <a class="navbar-brand p-0 me-auto" href="{{ "/" | relLangURL }}" aria-label="{{ .Site.Params.Title }}">
      {{ .Site.Params.Title }}
    </a>

@ -21,7 +21,7 @@
    <div class="offcanvas offcanvas-start border-0 py-md-1" tabindex="-1" id="offcanvasDoks" data-bs-backdrop="true" aria-labelledby="offcanvasDoksLabel">
      <div class="header-bar d-md-none"></div>
      <div class="offcanvas-header d-md-none">
-        <h2 class="h5 offcanvas-title ps-2" id="offcanvasDoksLabel"><a class="text-dark" href="{{ "/" | relURL }}">{{ .Site.Params.Title }}</a></h2>
+        <h2 class="h5 offcanvas-title ps-2" id="offcanvasDoksLabel"><a class="text-dark" href="{{ "/" | relLangURL }}">{{ .Site.Params.Title }}</a></h2>
        <button type="button" class="btn-close text-reset me-2" data-bs-dismiss="offcanvas" aria-label="Close main menu"></button>
      </div>
      <div class="offcanvas-body px-4">
@ -57,6 +57,7 @@
    {{ end -}}

    {{ if eq .Site.Params.options.multilingualMode true -}}
+    <!--
    <div class="dropdown order-md-2">
      <button class="btn btn-doks-light dropdown-toggle" id="doks-languages" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static" aria-label="Toggle language menu">
        <span class="d-none d-lg-inline"></span>English
@ -70,6 +71,37 @@
        <li><a class="dropdown-item" href="/docs/contributing/how-to-contribute/">Help Translate</a></li>
      </ul>
    </div>
+    -->
+
+    <div class="dropdown order-md-2">
+      <button class="btn btn-doks-light dropdown-toggle" id="doks-languages" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
+        {{ .Site.Params.languageISO }}
+        <span class="dropdown-caret"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></span>
+      </button>
+      <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="doks-languages">
+
+        <li><a class="dropdown-item current" aria-current="true" href="{{ .RelPermalink }}">{{ .Site.Language.LanguageName }}</a></li>
+
+        <li><hr class="dropdown-divider"></li>
+
+      {{ if .IsTranslated -}}
+        {{ range .Translations }}
+          <li><a class="dropdown-item" rel="alternate" href="{{ .RelPermalink }}" hreflang="{{ .Lang }}" lang="{{ .Lang }}">{{ .Language.LanguageName }}</a></li>
+        {{ end -}}
+      {{ else -}}
+        {{ range .Site.Languages -}}
+          {{ if ne $.Site.Language.Lang .Lang }}
+            <li><a class="dropdown-item" rel="alternate" href="{{ .Lang | relLangURL }}" hreflang="{{ .Lang }}" lang="{{ .Lang }}">{{ .LanguageName }}</a></li>
+          {{ end -}}
+        {{ end -}}
+      {{ end -}}
+        <!--
+        <li><hr class="dropdown-divider"></li>
+        <li><a class="dropdown-item" href="/docs/contributing/how-to-contribute/">Help Translate</a></li>
+        -->
+      </ul>
+    </div>
+
    {{ end -}}
  </nav>
 </header>