Merge pull request #454 from h-enk/doks-multilingual

feat: add multilingual support
This commit is contained in:
Henk Verlinde 2021-09-15 14:45:23 +02:00 committed by GitHub
commit 3be59bcc3c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
46 changed files with 632 additions and 63 deletions

View File

@ -75,9 +75,11 @@ $navbar-dark-active-color: $link-color-dark;
background: $body-overlay-dark;
}
/*
[data-dark-mode] body .dropdown-menu {
@extend .dropdown-menu-dark;
}
*/
[data-dark-mode] body .navbar,
[data-dark-mode] body .doks-subnavbar {
@ -468,6 +470,10 @@ $navbar-dark-active-color: $link-color-dark;
}
*/
[data-dark-mode] .dropdown-item {
color: $body-bg-dark;
}
[data-dark-mode] body hr.text-black-50 {
color: $gray-600 !important;
}

View File

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

View File

@ -431,3 +431,15 @@ button#doks-versions {
.navbar-light .navbar-nav .active .nav-link {
color: $primary;
}
.dropdown-divider {
border-top: 1px dashed $gray-200;
}
.dropdown-item:hover {
background: $gray-100;
}
.dropdown-item:active {
color: inherit;
}

View File

@ -9,6 +9,11 @@ languageCode = "en-US"
paginate = 7
rssLimit = 10
# Multilingual
defaultContentLanguage = "en"
disableLanguages = ["de", "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"

View File

@ -0,0 +1,25 @@
[en]
languageName = "English"
contentDir = "content/en"
weight = 10
[en.params]
languageISO = "EN"
[de]
languageName = "German"
contentDir = "content/de"
weight = 15
[de.params]
languageISO = "DE"
[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>"

View File

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

View File

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

View File

@ -76,5 +76,5 @@ editPage = false
highLight = true
kaTex = false
collapsibleSidebar = true
multilingualMode = false # Not yet functional
multilingualMode = false
docsVersioning = false # Not yet functional

View File

@ -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',
]),
],

View File

Before

Width:  |  Height:  |  Size: 8.0 KiB

After

Width:  |  Height:  |  Size: 8.0 KiB

10
content/nl/_index.md Normal file
View File

@ -0,0 +1,10 @@
---
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: []
---

View File

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

View File

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

View File

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

View File

@ -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: []
---

View File

@ -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: []
---

View File

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

View File

@ -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>...]
```

View File

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

View File

@ -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: []
---

View File

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

View File

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

View File

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

View File

@ -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 dont 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 visitors 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_

2
i18n/en.toml Normal file
View File

@ -0,0 +1,2 @@
[get-started]
other = "Get Started"

2
i18n/nl.toml Normal file
View File

@ -0,0 +1,2 @@
[get-started]
other = "Aan de slag"

View File

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

View File

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

View File

@ -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">
@ -58,16 +58,31 @@
{{ 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
<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="/docs/5.0/">English</a></li>
<ul class="dropdown-menu dropdown-menu-end shadow rounded border-0" 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>
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">Dutch</a></li>
<li><a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">Russian</a></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 -}}