Merge branch 'h-enk:master' into master

2021-10-06 15:02:28 +02:00 · 2021-10-06 15:02:28 +02:00 · bcfce0b652
parent db8715e705 0cf93c9d2f
commit bcfce0b652
92 changed files with 4400 additions and 5451 deletions
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: doks # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
--- a/.gitignore
+++ b/.gitignore
@ -1,4 +1,3 @@
-bin
 node_modules
 public
 resources
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -4,8 +4,35 @@ All notable changes to this project will be documented in this file. Dates are d

 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).

+#### [v0.3.5](https://github.com/h-enk/doks/compare/v0.3.4...v0.3.5)
+
+- feat: add versioning setup [`#478`](https://github.com/h-enk/doks/pull/478)
+- feat: adjust latex svg image to dark theme [`#460`](https://github.com/h-enk/doks/pull/460)
+- fix: edit-page multi-language support [`#459`](https://github.com/h-enk/doks/pull/459)
+- feat: add docsRepoBranch config [`#458`](https://github.com/h-enk/doks/pull/458)
+- feat: image max width [`#457`](https://github.com/h-enk/doks/pull/457)
+- fix: docs url [`#456`](https://github.com/h-enk/doks/pull/456)
+- chore(deps-dev): bump @babel/cli from 7.15.4 to 7.15.7 [`#463`](https://github.com/h-enk/doks/pull/463)
+- feat: add multilingual support [`#454`](https://github.com/h-enk/doks/pull/454)
+- deps: bump versions to latest [`94bacd3`](https://github.com/h-enk/doks/commit/94bacd3492e7b4d1e46aef13f86e5924ac645f4e)
+- deps: bump @babel/cli from 7.15.4 to 7.15.7 [`130a13b`](https://github.com/h-enk/doks/commit/130a13bd9d3891d995e7373cc9a64fa527b4ce26)
+- deps: bump versions to latest [`2503f5a`](https://github.com/h-enk/doks/commit/2503f5adf6d2650b82928a8770c2a1ccdc368a0c)
+
+#### [v0.3.4](https://github.com/h-enk/doks/compare/v0.3.3...v0.3.4)
+
+> 7 September 2021
+
+- chore: update edit page default branch from master to main [`#426`](https://github.com/h-enk/doks/pull/426)
+- Update index.js [`#417`](https://github.com/h-enk/doks/pull/417)
+- Make id unique collapsible sidebar [`#378`](https://github.com/h-enk/doks/pull/378)
+- deps: bump versions to latest [`8a98716`](https://github.com/h-enk/doks/commit/8a9871654e03b79082cfd9ebdf49a0a8ce7e21eb)
+- deps: bump version to latest [`23d9dd7`](https://github.com/h-enk/doks/commit/23d9dd75c381b0440f4db717d63bea61baa0c584)
+- deps: bump versions to latest [`700e566`](https://github.com/h-enk/doks/commit/700e56611d3a83f33e786f51a191728db7267248)
+
 #### [v0.3.3](https://github.com/h-enk/doks/compare/v0.3.2...v0.3.3)

+> 5 July 2021
+
 - Add Mermaid support [`#369`](https://github.com/h-enk/doks/pull/369)
 - Fix lint tests on Linux. [`#373`](https://github.com/h-enk/doks/pull/373)
 - feat: add mermaid [`f1fa5c5`](https://github.com/h-enk/doks/commit/f1fa5c5936558ff0b62d8a150bf303629bf50840)
--- a/README.md
+++ b/README.md
@ -9,11 +9,11 @@
 </h1>

 <h3 align="center">
-  Modern documentation theme
+  Modern Documentation Theme
 </h3>

 <p align="center">
-  Doks is a Hugo theme helping you build modern documentation websites that are secure, fast, and SEO-ready — by default.
+  Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize.
 </p>

 <p align="center">
@ -23,6 +23,9 @@
  <a href="https://github.com/h-enk/doks/releases">
    <img src="https://img.shields.io/github/v/release/h-enk/doks?include_prereleases&style=flat-square"alt="GitHub release (latest SemVer including pre-releases)">
  </a>
+  <a href="https://www.npmjs.com/package/@hyas/doks">
+    <img src="https://img.shields.io/npm/v/@hyas/doks?style=flat-square" alt="npm (scoped)">
+  </a>
  <a href="https://github.com/h-enk/doks/actions?query=workflow%3A%22Hyas+CI%22">
    <img src="https://img.shields.io/github/workflow/status/h-enk/doks/Hyas%20CI/master?style=flat-square" alt="GitHub Workflow Status (branch)">
  </a>
@ -39,7 +42,7 @@

 ## Why Doks?

-Nine reasons why you should use Doks:
+Nine main reasons why you should use Doks:

 1. __Security aware__. Get A+ scores on [Mozilla Observatory](https://observatory.mozilla.org/analyze/doks.netlify.app) out of the box. Easily change the default Security Headers to suit your needs.

@ -59,6 +62,14 @@ Nine reasons why you should use Doks:

 9. __Dark mode__. Switch to a low-light UI with the click of a button. Change colors with variables to match your branding.

+### Other features
+
+- __Multilingual and i18n__ support
+- __Versioning__ documentation support
+- __KaTeX__ math typesetting
+- __Mermaid__ diagrams and visualization
+- __highlight.js__ syntax highlighting
+
 ## Requirements

 Doks uses npm to centralize dependency management, making it [easy to update](https://getdoks.org/docs/help/how-to-update/) resources, build tooling, plugins, and build scripts:
@ -117,3 +128,15 @@ Doks comes with [commands](https://getdoks.org/docs/prologue/commands/) for comm
 - [Netlify Community](https://community.netlify.com/)
 - [Hugo Forums](https://discourse.gohugo.io/)
 - [Doks Discussions](https://github.com/h-enk/doks/discussions)
+
+## Sponsors
+
+Support this project by becoming a sponsor. Your logo will show up here with a link to your website.
+
+[![OC sponsor 0](https://opencollective.com/doks/sponsor/0/avatar.svg)](https://opencollective.com/doks/sponsor/0/website)
+
+## Backers
+
+Support this project by becoming a backer. Your avatar will show up here.
+
+[![Backers](https://opencollective.com/doks/backers.svg)](https://opencollective.com/doks)
--- a/SECURITY.md
+++ b/SECURITY.md
@ -0,0 +1,7 @@
+# Reporting Security Issues
+
+The Doks team and community take security issues in Doks seriously. We appreciate your efforts to responsibly disclose your findings, and will make every effort to acknowledge your contributions.
+
+To report a security issue, email [security@getdoks.org](mailto:security@getdoks.org) and include the word "SECURITY" in the subject line.
+
+We'll endeavor to respond quickly, and will keep you updated throughout the process.
--- a/assets/js/alert.js
+++ b/assets/js/alert.js
@ -0,0 +1,17 @@
+var announcement = document.getElementById('announcement');
+
+if (announcement !== null) {
+
+  if (localStorage.getItem('announcement') === null ) {
+
+    announcement.classList.remove('d-none');
+
+  }
+
+  announcement.addEventListener('closed.bs.alert', () => {
+
+    localStorage.setItem('announcement', 'closed');
+
+  });
+
+}
--- a/assets/js/darkmode-init.js
+++ b/assets/js/darkmode-init.js
@ -0,0 +1,21 @@
+const globalDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+const localMode = localStorage.getItem('theme');
+
+if (globalDark && (localMode === null)) {
+
+  localStorage.setItem('theme', 'dark');
+  document.documentElement.setAttribute('data-dark-mode', '');
+
+}
+
+if (globalDark && (localMode === 'dark')) {
+
+  document.documentElement.setAttribute('data-dark-mode', '');
+
+}
+
+if (localMode === 'dark') {
+
+  document.documentElement.setAttribute('data-dark-mode', '');
+
+}
--- a/assets/js/darkmode.js
+++ b/assets/js/darkmode.js
@ -1,12 +1,38 @@
-document.getElementById('mode').addEventListener('click', () => {
+const mode = document.getElementById('mode');

-  document.body.classList.toggle('dark');
-  localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
+if (mode !== null) {

-});
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {

-if (localStorage.getItem('theme') === 'dark') {
+    if (event.matches) {

-  document.body.classList.add('dark');
+      localStorage.setItem('theme', 'dark');
+      document.documentElement.setAttribute('data-dark-mode', '');
+
+    } else {
+
+      localStorage.setItem('theme', 'light');
+      document.documentElement.removeAttribute('data-dark-mode');
+
+    }
+
+  })
+
+  mode.addEventListener('click', () => {
+
+    document.documentElement.toggleAttribute('data-dark-mode');
+    localStorage.setItem('theme', document.documentElement.hasAttribute('data-dark-mode') ? 'dark' : 'light');
+
+  });
+
+  if (localStorage.getItem('theme') === 'dark') {
+
+    document.documentElement.setAttribute('data-dark-mode', '');
+
+  } else {
+
+    document.documentElement.removeAttribute('data-dark-mode');
+
+  }

 }
--- a/assets/js/index.js
+++ b/assets/js/index.js
@ -1,20 +1,19 @@
 var suggestions = document.getElementById('suggestions');
-var userinput = document.getElementById('userinput');
+var search = document.getElementById('search');

-document.addEventListener('keydown', inputFocus);
+if (search !== null) {
+  document.addEventListener('keydown', inputFocus);
+}

 function inputFocus(e) {
-
-  if (e.keyCode === 191 ) {
+  if (e.ctrlKey && e.key === '/' ) {
    e.preventDefault();
-    userinput.focus();
+    search.focus();
  }
-
-  if (e.keyCode === 27 ) {
-    userinput.blur();
+  if (e.key === 'Escape' ) {
+    search.blur();
    suggestions.classList.add('d-none');
  }
-
 }

 document.addEventListener('click', function(event) {
@ -40,14 +39,16 @@ function suggestionFocus(e){
  const focusable= [...focusableSuggestions];
  const index = focusable.indexOf(document.activeElement);

+  const keyDefault = suggestions.classList.contains('d-none');
+
  let nextIndex = 0;

-  if (e.keyCode === 38) {
+  if ((e.keyCode === 38) && (!keyDefault)) {
    e.preventDefault();
    nextIndex= index > 0 ? index-1 : 0;
    focusableSuggestions[nextIndex].focus();
  }
-  else if (e.keyCode === 40) {
+  else if ((e.keyCode === 40) && (!keyDefault)) {
    e.preventDefault();
    nextIndex= index+1 < focusable.length ? index+1 : index;
    focusableSuggestions[nextIndex].focus();
@ -55,7 +56,6 @@ function suggestionFocus(e){

 }

-
 /*
 Source:
  - https://github.com/nextapps-de/flexsearch#index-documents-field-search
@ -102,7 +102,7 @@ Source:
    {{ range $index, $element := $list -}}
      {
        id: {{ $index }},
-        href: "{{ .Permalink }}",
+        href: "{{ .RelPermalink }}",
        title: {{ .Title | jsonify }},
        description: {{ .Params.description | jsonify }},
        content: {{ .Content | jsonify }}
@ -113,43 +113,40 @@ Source:
    {{ end -}}
  ;

-  userinput.addEventListener('input', show_results, true);
+  search.addEventListener('input', show_results, true);
  suggestions.addEventListener('click', accept_suggestion, true);

  function show_results(){
+    const maxResult = 5;

    var value = this.value;
-    var results = index.search(value, { limit: 5, index: ["content"], enrich: true });
-    var entry, childs = suggestions.childNodes;
-    var i = 0, len = results.length;
+    var results = index.search(value, {limit: maxResult, enrich: true});

    suggestions.classList.remove('d-none');
+    suggestions.innerHTML = "";

-    results.forEach(function(results) {
-
-      entry = document.createElement('div');
-
-      entry.innerHTML = '<a href><span></span><span></span></a>';
-
-      a = entry.querySelector('a'),
-      t = entry.querySelector('span:first-child'),
-      d = entry.querySelector('span:nth-child(2)');
-
-      // console.log(results);
-
-      a.href = results.result[i].doc.href;
-      t.textContent = results.result[i].doc.title;
-      d.textContent = results.result[i].doc.description;
-
-      suggestions.appendChild(entry);
-
+    //flatSearch now returns results for each index field. create a single list
+    const flatResults = {}; //keyed by href to dedupe results
+    results.forEach(result=>{
+        result.result.forEach(r=>{
+          flatResults[r.doc.href] = r.doc;
+        });
    });

-    while(childs.length > len){
+    //construct a list of suggestions list
+    for(const href in flatResults) {
+        const doc = flatResults[href];

-        suggestions.removeChild(childs[i])
+        const entry = document.createElement('div');
+        entry.innerHTML = '<a href><span></span><span></span></a>';
+
+        entry.querySelector('a').href = href;
+        entry.querySelector('span:first-child').textContent = doc.title;
+        entry.querySelector('span:nth-child(2)').textContent = doc.description;
+
+        suggestions.appendChild(entry);
+        if(suggestions.childElementCount == maxResult) break;
    }
-
  }

  function accept_suggestion(){
--- a/assets/scss/common/_dark.scss
+++ b/assets/scss/common/_dark.scss
@ -4,7 +4,11 @@

 $body-bg-dark: $gray-900;
 $body-overlay-dark: darken($body-bg-dark, 2.5%);
+
+/*
 $border-dark: darken($body-bg-dark, 2.5%);
+*/
+$border-dark: $gray-800;
 $body-color-dark: $gray-300;
 $dots-dark: darken($body-color-dark, 50%);

@ -18,118 +22,165 @@ $navbar-dark-active-color:          $link-color-dark;

 /** Theme styles */

-body.dark {
+[data-dark-mode] body {
  background: $body-bg-dark;
  color: $body-color-dark;
 }

-body.dark a {
+[data-dark-mode] body a {
  color: $link-color-dark;
 }

-body.dark a.text-body {
+[data-dark-mode] body a.text-body {
  color: $body-color-dark !important;
 }

-body.dark .btn-primary {
+[data-dark-mode] body .btn-primary {
  @include button-variant($button-color-dark, $button-color-dark);

  color: $body-bg-dark !important;
 }

-body.dark .btn-outline-primary {
+[data-dark-mode] body .btn-outline-primary {
  @include button-outline-variant($button-color-dark, $button-color-dark);

  color: $link-color-dark;
 }

-body.dark .btn-outline-primary:hover {
+[data-dark-mode] body .btn-outline-primary:hover {
  color: $body-bg-dark;
 }

-body.dark .navbar {
-  background: $body-bg-dark;
-  opacity: 0.975;
+[data-dark-mode] body .btn-doks-light {
+  color: $navbar-dark-color;
+}
+
+[data-dark-mode] body .show > .btn-doks-light,
+[data-dark-mode] body .btn-doks-light:hover,
+[data-dark-mode] body .btn-doks-light:active {
+  color: $link-color-dark;
+}
+
+[data-dark-mode] body .btn-menu svg {
+  color: $body-color-dark;
+}
+
+[data-dark-mode] body .doks-sidebar-toggle {
+  color: $navbar-dark-color;
+}
+
+[data-dark-mode] body .btn-menu:hover,
+[data-dark-mode] body .btn-doks-light:hover,
+[data-dark-mode] body .doks-sidebar-toggle:hover {
+  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 {
+  background-color: rgba(33, 37, 41, 0.95);
  border-bottom: 1px solid $border-dark;
 }

-body.dark.home .navbar {
+[data-dark-mode] body.home .navbar {
  border-bottom: 0;
 }

-body.dark .navbar-light .navbar-brand {
+[data-dark-mode] body .offcanvas-header {
+  border-bottom: 1px solid $gray-800;
+}
+
+[data-dark-mode] body .offcanvas .nav-link {
+  color: $body-color-dark;
+}
+
+[data-dark-mode] body .offcanvas .nav-link:hover,
+[data-dark-mode] body .offcanvas .nav-link:focus {
+  color: $link-color-dark;
+}
+
+[data-dark-mode] body .offcanvas .nav-link.active {
+  color: $link-color-dark;
+}
+
+[data-dark-mode] body .navbar-light .navbar-brand {
  color: $navbar-dark-color !important;
 }

-body.dark .navbar-light .navbar-nav .nav-link {
+[data-dark-mode] body .navbar-light .navbar-nav .nav-link {
  color: $navbar-dark-color;
 }

-body.dark .navbar-light .navbar-nav .nav-link:hover,
-body.dark .navbar-light .navbar-nav .nav-link:focus {
+[data-dark-mode] body .navbar-light .navbar-nav .nav-link:hover,
+[data-dark-mode] body .navbar-light .navbar-nav .nav-link:focus {
  color: $navbar-dark-hover-color;
 }

-body.dark .navbar-light .navbar-nav .nav-link.disabled {
+[data-dark-mode] body .navbar-light .navbar-nav .nav-link.disabled {
  color: $navbar-dark-disabled-color;
 }

-body.dark .navbar-light .navbar-nav .show > .nav-link,
-body.dark .navbar-light .navbar-nav .active > .nav-link,
-body.dark .navbar-light .navbar-nav .nav-link.show,
-body.dark .navbar-light .navbar-nav .nav-link.active {
+[data-dark-mode] body .navbar-light .navbar-nav .show > .nav-link,
+[data-dark-mode] body .navbar-light .navbar-nav .active > .nav-link,
+[data-dark-mode] body .navbar-light .navbar-nav .nav-link.show,
+[data-dark-mode] body .navbar-light .navbar-nav .nav-link.active {
  color: $navbar-dark-active-color;
 }

-body.dark .navbar-light .navbar-text {
+[data-dark-mode] body .navbar-light .navbar-text {
  color: $navbar-dark-color;
 }

-body.dark .alert-primary a {
+[data-dark-mode] body .alert-primary a {
  color: $body-bg-dark;
 }

-body.dark .alert-warning {
+[data-dark-mode] body .alert-warning {
  background: $body-overlay-dark;
  color: $body-color-dark;
 }

-body.dark .page-links a {
+[data-dark-mode] body .page-links a {
  color: $body-color-dark;
 }

-body.dark .btn-toggle-nav a {
+[data-dark-mode] body .btn-toggle-nav a {
  color: $body-color-dark;
 }

-body.dark .showcase-meta a {
+[data-dark-mode] body .showcase-meta a {
  color: $body-color-dark;
 }

-body.dark .showcase-meta a:hover,
-body.dark .showcase-meta a:focus {
+[data-dark-mode] body .showcase-meta a:hover,
+[data-dark-mode] body .showcase-meta a:focus {
  color: $link-color-dark;
 }

-body.dark .docs-link:hover,
-body.dark .docs-link.active,
-body.dark .page-links a:hover {
+[data-dark-mode] body .docs-link:hover,
+[data-dark-mode] body .docs-link.active,
+[data-dark-mode] body .page-links a:hover {
  text-decoration: none;
  color: $link-color-dark;
 }

-body.dark .btn-toggle {
+[data-dark-mode] body .btn-toggle {
  color: $body-color-dark;
  background-color: transparent;
  border: 0;
 }

-body.dark .btn-toggle:hover,
-body.dark .btn-toggle:focus {
+[data-dark-mode] body .btn-toggle:hover,
+[data-dark-mode] body .btn-toggle:focus {
  color: $body-color-dark;
 }

-body.dark .btn-toggle::before {
+[data-dark-mode] body .btn-toggle::before {
  width: 1.25em;
  line-height: 0;
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28222, 226, 230, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
@ -138,59 +189,65 @@ body.dark .btn-toggle::before {
  margin-bottom: 0.125rem;
 }

-body.dark .btn-toggle[aria-expanded="true"] {
+[data-dark-mode] body .btn-toggle[aria-expanded="true"] {
  color: $body-color-dark;
 }

-body.dark .btn-toggle[aria-expanded="true"]::before {
+[data-dark-mode] body .btn-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
 }

-body.dark .btn-toggle-nav a:hover,
-body.dark .btn-toggle-nav a:focus {
+[data-dark-mode] body .btn-toggle-nav a:hover,
+[data-dark-mode] body .btn-toggle-nav a:focus {
  color: $link-color-dark;
 }

-body.dark .btn-toggle-nav a.active {
+[data-dark-mode] body .btn-toggle-nav a.active {
  color: $link-color-dark;
 }

-body.dark .navbar-light .navbar-text a {
+[data-dark-mode] body .navbar-light .navbar-text a {
  color: $navbar-dark-active-color;
 }

-body.dark .docs-links h3.sidebar-link a,
-body.dark .page-links h3.sidebar-link a {
+[data-dark-mode] body .docs-links h3.sidebar-link a,
+[data-dark-mode] body .page-links h3.sidebar-link a {
  color: $body-color-dark;
 }

-body.dark .navbar-light .navbar-text a:hover,
-body.dark .navbar-light .navbar-text a:focus {
+[data-dark-mode] body .navbar-light .navbar-text a:hover,
+[data-dark-mode] body .navbar-light .navbar-text a:focus {
  color: $navbar-dark-active-color;
 }

-body.dark .navbar .btn-link {
+[data-dark-mode] body .navbar .btn-link {
  color: $navbar-dark-color;
 }

-body.dark .content .btn-link {
+[data-dark-mode] body .content .btn-link {
  color: $link-color-dark;
 }

-body.dark .content .btn-link:hover {
+[data-dark-mode] body .content .btn-link:hover {
  color: $link-color-dark;
 }

-body.dark .navbar .btn-link:hover {
+[data-dark-mode] body .content img[src^="https://latex.codecogs.com/svg.latex"] {
+  filter: invert(1);
+}
+
+[data-dark-mode] body .navbar .btn-link:hover {
  color: $navbar-dark-hover-color;
 }

-body.dark .navbar .btn-link:active {
+[data-dark-mode] body .navbar .btn-link:active {
  color: $navbar-dark-active-color;
 }

-body.dark .form-control.is-search {
+[data-dark-mode] body .form-control.is-search {
  background: $body-overlay-dark;
+  border: 1px solid transparent;
+  color: $gray-300;

  /*
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
@ -200,180 +257,269 @@ body.dark .form-control.is-search {
  */
 }

-body.dark .navbar-form::after {
+[data-dark-mode] body .form-control.is-search:focus {
+  border: 1px solid $link-color-dark;
+}
+
+[data-dark-mode] body .doks-search::after {
+  color: $gray-300;
+  border: 1px solid $gray-700;
+}
+
+[data-dark-mode] body .text-dark {
+  color: $body-color-dark !important;
+}
+
+/*
+[data-dark-mode] body .navbar-form::after {
  color: $gray-600;
  border: 1px solid $gray-800;
 }
+*/

-body.dark .form-control {
-  color: $gray-500;
+[data-dark-mode] body .form-control {
+  color: $gray-300;
 }

-body.dark .form-control:focus {
-  box-shadow: 0 0 0 0.2rem $focus-color-dark;
+[data-dark-mode] body .form-control::placeholder {
+  color: $gray-400;
+  opacity: 1;
 }

-body.dark .border-top {
+[data-dark-mode] body .border-top {
  border-top: 1px solid $border-dark !important;
 }

@include media-breakpoint-up(lg) {
-  body.dark .docs-sidebar {
+  [data-dark-mode] body .docs-sidebar {
    order: 0;
    border-right: 1px solid $border-dark;
  }
 }

-body.dark .docs-navigation {
+[data-dark-mode] body .docs-navigation {
  border-top: 1px solid $border-dark;
 }

-body.dark pre code::-webkit-scrollbar-thumb {
+[data-dark-mode] body pre code::-webkit-scrollbar-thumb {
  background: $gray-400;
 }

-body.dark pre code:hover {
-  scrollbar-width: thin;
-  scrollbar-color: $border-dark transparent;
-}
-
-body.dark pre code::-webkit-scrollbar-thumb:hover {
-  background: $gray-500;
-}
-
-body.dark code:not(.hljs):not(.language-mermaid) {
+[data-dark-mode] body code:not(.hljs) {
  background: $body-overlay-dark;
  color: $body-color-dark;
 }

-body.dark .mermaid,
-body.dark pre code.language-mermaid {
-  background: $white;
+[data-dark-mode] body pre code:hover {
+  scrollbar-width: thin;
+  scrollbar-color: $border-dark transparent;
 }

-body.dark blockquote {
+[data-dark-mode] body pre code::-webkit-scrollbar-thumb:hover {
+  background: $gray-500;
+}
+
+[data-dark-mode] body blockquote {
  border-left: 3px solid $border-dark;
 }

-body.dark .footer {
+[data-dark-mode] body .footer {
  border-top: 1px solid $border-dark;
 }

-body.dark .docs-links,
-body.dark .docs-toc {
+[data-dark-mode] body .docs-links,
+[data-dark-mode] body .docs-toc {
  scrollbar-width: thin;
  scrollbar-color: $body-bg-dark $body-bg-dark;
 }

-body.dark .docs-links::-webkit-scrollbar,
-body.dark .docs-toc::-webkit-scrollbar {
+[data-dark-mode] body .docs-links::-webkit-scrollbar,
+[data-dark-mode] body .docs-toc::-webkit-scrollbar {
  width: 5px;
 }

-body.dark .docs-links::-webkit-scrollbar-track,
-body.dark .docs-toc::-webkit-scrollbar-track {
+[data-dark-mode] body .docs-links::-webkit-scrollbar-track,
+[data-dark-mode] body .docs-toc::-webkit-scrollbar-track {
  background: $body-bg-dark;
 }

-body.dark .docs-links::-webkit-scrollbar-thumb,
-body.dark .docs-toc::-webkit-scrollbar-thumb {
+[data-dark-mode] body .docs-links::-webkit-scrollbar-thumb,
+[data-dark-mode] body .docs-toc::-webkit-scrollbar-thumb {
  background: $body-bg-dark;
 }

-body.dark .docs-links:hover,
-body.dark .docs-toc:hover {
+[data-dark-mode] body .docs-links:hover,
+[data-dark-mode] body .docs-toc:hover {
  scrollbar-width: thin;
  scrollbar-color: $border-dark $body-bg-dark;
 }

-body.dark .docs-links:hover::-webkit-scrollbar-thumb,
-body.dark .docs-toc:hover::-webkit-scrollbar-thumb {
+[data-dark-mode] body .docs-links:hover::-webkit-scrollbar-thumb,
+[data-dark-mode] body .docs-toc:hover::-webkit-scrollbar-thumb {
  background: $border-dark;
 }

-body.dark .docs-links::-webkit-scrollbar-thumb:hover,
-body.dark .docs-toc::-webkit-scrollbar-thumb:hover {
+[data-dark-mode] body .docs-links::-webkit-scrollbar-thumb:hover,
+[data-dark-mode] body .docs-toc::-webkit-scrollbar-thumb:hover {
  background: $border-dark;
 }

-body.dark .docs-links h3:not(:first-child) {
+[data-dark-mode] body .docs-links h3:not(:first-child) {
  border-top: 1px solid $border-dark;
 }

-body.dark a.docs-link {
+[data-dark-mode] body a.docs-link {
  color: $body-color-dark;
 }

-body.dark .page-links li:not(:first-child) {
+[data-dark-mode] body .page-links li:not(:first-child) {
  border-top: 1px dashed $border-dark;
 }

-body.dark .card {
+[data-dark-mode] body .card {
  background: $body-bg-dark;
  border: 1px solid $border-dark;
 }

-body.dark .card.bg-light {
+[data-dark-mode] body .card.bg-light {
  background: $body-overlay-dark !important;
 }

-body.dark .navbar .menu-icon .navicon {
+[data-dark-mode] body .navbar .menu-icon .navicon {
  background: $navbar-dark-color;
 }

-body.dark .navbar .menu-icon .navicon::before,
-body.dark .navbar .menu-icon .navicon::after {
+[data-dark-mode] body .navbar .menu-icon .navicon::before,
+[data-dark-mode] body .navbar .menu-icon .navicon::after {
  background: $navbar-dark-color;
 }

-body.dark .logo-light {
+[data-dark-mode] body .logo-light {
  display: none !important;
 }

-body.dark .logo-dark {
+[data-dark-mode] body .logo-dark {
  display: inline-block !important;
 }

-body.dark .bg-light {
+[data-dark-mode] body .bg-light {
  background: darken($body-bg-dark, 1.5%) !important;
 }

-body.dark .bg-dots {
+[data-dark-mode] body .bg-dots {
  background-image: radial-gradient($dots-dark 15%, transparent 15%);
 }

-body.dark .text-muted {
+[data-dark-mode] body .text-muted {
  color: darken($body-color-dark, 7.5%) !important;
 }

-body.dark .alert-primary {
+[data-dark-mode] body .alert-primary {
  background: $link-color-dark;
  color: $body-bg-dark;
 }

-body.dark .figure-caption {
+[data-dark-mode] body .figure-caption {
  color: $body-color-dark;
 }

-body.dark table {
+[data-dark-mode] body table {
  @extend .table-dark;
 }

-body.dark .copy-status::after {
+[data-dark-mode] body .copy-status::after {
  content: "Copy";
  display: block;
  color: $body-color-dark;
 }

-body.dark .copy-status:hover::after {
+[data-dark-mode] body .copy-status:hover::after {
  content: "Copy";
  display: block;
  color: $link-color-dark;
 }

-body.dark .copy-status:focus::after,
-body.dark .copy-status:active::after {
+[data-dark-mode] body .copy-status:focus::after,
+[data-dark-mode] body .copy-status:active::after {
  content: "Copied";
  display: block;
  color: $link-color-dark;
 }
+
+/*
+[data-dark-mode] body .dropdown-toggle:focus,
+[data-dark-mode] body .doks-sidebar-toggle:focus {
+  box-shadow: 0 0 0 0.2rem $focus-color-dark;
+}
+*/
+
+[data-dark-mode] body .offcanvas {
+  background-color: $body-bg-dark;
+}
+
+[data-dark-mode] body .btn-close {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNkZWUyZTYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLXgiPjxsaW5lIHgxPSIxOCIgeTE9IjYiIHgyPSI2IiB5Mj0iMTgiPjwvbGluZT48bGluZSB4MT0iNiIgeTE9IjYiIHgyPSIxOCIgeTI9IjE4Ij48L2xpbmU+PC9zdmc+");
+  background-size: 1.5rem;
+}
+
+@include media-breakpoint-up(md) {
+  [data-dark-mode] body .alert-dismissible .btn-close {
+    background-size: 1.25rem;
+  }
+}
+
+/*
+[data-dark-mode] body .btn-close:focus {
+  box-shadow: 0 0 0 0.2rem $focus-color-dark;
+}
+*/
+
+[data-dark-mode] .dropdown-item {
+  color: $body-bg-dark;
+}
+
+[data-dark-mode] body hr.text-black-50 {
+  color: $gray-600 !important;
+}
+
+[data-dark-mode] body .email-form .form-control {
+  background: $body-overlay-dark;
+  border: 1px solid transparent;
+}
+
+[data-dark-mode] body .email-form .form-control:focus {
+  border: 1px solid $link-color-dark;
+}
+
+[data-dark-mode] .page-link {
+  color: $link-color-dark;
+  background-color: transparent;
+  border: $pagination-border-width solid $border-dark;
+
+  &:hover {
+    color: $body-bg-dark;
+    background-color: $body-color-dark;
+    border-color: $body-color-dark;
+  }
+
+  &:focus {
+    color: $body-bg-dark;
+    background-color: $body-color-dark;
+  }
+}
+
+[data-dark-mode] .page-item {
+  &.active .page-link {
+    color: $body-bg-dark;
+
+    @include gradient-bg($link-color-dark);
+
+    border-color: $link-color-dark;
+  }
+
+  &.disabled .page-link {
+    color: $pagination-disabled-color;
+    background-color: $body-overlay-dark;
+    border-color: $border-dark;
+  }
+}
--- a/assets/scss/common/_global.scss
+++ b/assets/scss/common/_global.scss
@ -9,6 +9,10 @@
  padding-bottom: 3rem;
 }

+.content img {
+  max-width: 100%;
+}
+
 h1,
 h2,
 h3,
@ -24,10 +28,27 @@ h6,
  margin: 2rem 0 1rem;
 }

+.offcanvas-header {
+  border-bottom: 1px solid $gray-300;
+  padding-top: 1.0625rem;
+  padding-bottom: 0.8125rem;
+}
+
+h5.offcanvas-title {
+  margin: 0;
+}
+
+body.docs {
+  padding-top: 0 !important;
+}
+
@include media-breakpoint-up(md) {
  body {
    font-size: $font-size-md;
+
+    /*
    padding-top: 4rem !important;
+    */
  }

  h1,
@ -85,9 +106,11 @@ a.btn:focus {
 }
 */

+/*
 body {
  padding-top: 3.5625rem;
 }
+*/

 .docs-sidebar {
  order: 2;
@ -227,3 +250,23 @@ body {
 .katex {
  font-size: $font-size-md;
 }
+
+.card-bar {
+  border-top: 4px solid;
+  border-image-source: linear-gradient(90deg, $primary, #8ed6fb 50%, #d32e9d);
+  border-image-slice: 1;
+}
+
+.modal-backdrop {
+  background-color: #fff;
+}
+
+.modal-backdrop.show {
+  opacity: 0.7;
+}
+
+@include media-breakpoint-up(md) {
+  .modal-backdrop.show {
+    opacity: 0;
+  }
+}
--- a/assets/scss/common/_variables.scss
+++ b/assets/scss/common/_variables.scss
@ -20,6 +20,7 @@ $purple:   #5d2f86;
 $brown:    #aa9c84;

 $blue-300: #8ed6fb;
+$pink-100: #fcfaff;
 $pink-500: #d32e9d;

 $primary: $purple;
@ -115,7 +116,7 @@ $font-size-lg:                $font-size-base * 1.25;
 $font-size-md:                $font-size-base * 1.125;
 $font-size-sm:                $font-size-base * 0.875;

-$line-height-base:            1.5;
+// $line-height-base:            1.5;

 $headings-font-family:        null;
 $headings-font-weight:        700;
@ -159,3 +160,30 @@ $alert-border-width:                0;
 $alert-bg-scale:                    0;
 $alert-border-scale:                0;
 $alert-color-scale:                 0;
+
+// docsearch
+$dropdown-config: (
+  main-color: $purple,
+  layout-type: normal,
+  layout-width: normal,
+  layout-alignment: align,
+  background-color: $white,
+  border-radius: 4,
+  border-width: 1,
+  border-color: $gray-200,
+  box-shadow: none,
+  branding-position: bottom,
+  spacing: normal,
+  include-desc: yes,
+  background-category-header: $white,
+  font-size: normal,
+  header-color: $black,
+  title-color: $black,
+  subtitle-color: $black,
+  text-color: $black,
+  highlight-color: $purple,
+  highlight-opacity: 0.1,
+  highlight-type: underline
+);
+
+$input-btn-focus-width:       0;
--- a/assets/scss/components/_alerts.scss
+++ b/assets/scss/components/_alerts.scss
@ -7,7 +7,7 @@
  margin-right: 0.75rem;
 }

-.docs .alert {
+.docs main .alert {
  margin: 2rem -1.5rem;
 }

@ -62,6 +62,28 @@
  text-decoration: none;
 }

+.alert-dismissible .btn-close {
+  position: absolute;
+
+  /*
+  top: 50%;
+  transform: translateY(-50%);
+  */
+  top: 0.75rem;
+  right: 1rem;
+  z-index: 2;
+  padding: 0.625rem;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
+  background-size: 1.5rem;
+  filter: invert(1) grayscale(100%) brightness(200%);
+}
+
+@include media-breakpoint-up(md) {
+  .alert-dismissible .btn-close {
+    background-size: 1.25rem;
+  }
+}
+
 .alert code {
  background: darken($beige, 5%);
  color: $black;
--- a/assets/scss/components/_buttons.scss
+++ b/assets/scss/components/_buttons.scss
@ -4,7 +4,9 @@
 }

 #mode {
-  margin-right: 1.25rem;
+  padding-right: 0.25rem;
+  padding-left: 0.25rem;
+  margin-right: -0.25rem;
 }

 .btn-link:focus {
@ -18,7 +20,8 @@

@include media-breakpoint-up(md) {
  #mode {
-    margin-right: 0.5rem;
+    margin-left: 1.125rem;
+    margin-right: -0.375rem;
  }

  .navbar .btn-link {
@ -42,11 +45,11 @@ body .toggle-light {
  display: none;
 }

-body.dark .toggle-light {
+[data-dark-mode] body .toggle-light {
  display: block;
 }

-body.dark .toggle-dark {
+[data-dark-mode] body .toggle-dark {
  display: none;
 }

@ -183,3 +186,35 @@ pre {
 .btn-toggle-nav a.active {
  color: $link-color;
 }
+
+.doks-navbar .dropdown-menu,
+.doks-subnavbar .dropdown-menu {
+  font-size: 0.875rem;
+}
+
+.doks-navbar .dropdown-item.current,
+.doks-subnavbar .dropdown-item.current {
+  font-weight: 600;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 1rem top 0.6rem;
+  background-size: 0.75rem 0.75rem;
+}
+
+.btn-close {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
+  background-size: 1.5rem;
+}
+
+.offcanvas-header .btn-close {
+  margin-right: 0 !important;
+}
+
+.dropdown-toggle::after {
+  display: none;
+}
+
+.dropdown-caret {
+  margin-left: -0.1875rem;
+  margin-right: -0.3125rem;
+}
--- a/assets/scss/components/_code.scss
+++ b/assets/scss/components/_code.scss
@ -28,7 +28,7 @@ pre code {
 }

 .hljs {
-  padding: 1.25rem 1.5rem;
+  padding: 1.5rem !important;
 }

@include media-breakpoint-down(sm) {
--- a/assets/scss/components/_search.scss
+++ b/assets/scss/components/_search.scss
@ -4,9 +4,10 @@

 #suggestions {
  position: absolute;
-  right: 0;
+  left: 0;
  margin-top: 0.5rem;
  width: calc(100vw - 3rem);
+  z-index: $zindex-dropdown;
 }

 #suggestions a {
@ -53,7 +54,7 @@

@include media-breakpoint-up(sm) {
  #suggestions {
-    width: 30rem;
+    width: 31.125rem;
  }

  #suggestions a {
--- a/assets/scss/components/_syntax.scss
+++ b/assets/scss/components/_syntax.scss
@ -44,19 +44,19 @@ Based on Ascetic by (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
  font-style: italic;
 }

-body.dark .hljs {
+[data-dark-mode] body .hljs {
  background: $body-overlay-dark;
  color: $body-color-dark;
 }

-body.dark .hljs-string,
-body.dark .hljs-variable,
-body.dark .hljs-template-variable,
-body.dark .hljs-symbol,
-body.dark .hljs-bullet,
-body.dark .hljs-section,
-body.dark .hljs-addition,
-body.dark .hljs-attribute,
-body.dark .hljs-link {
+[data-dark-mode] body .hljs-string,
+[data-dark-mode] body .hljs-variable,
+[data-dark-mode] body .hljs-template-variable,
+[data-dark-mode] body .hljs-symbol,
+[data-dark-mode] body .hljs-bullet,
+[data-dark-mode] body .hljs-section,
+[data-dark-mode] body .hljs-addition,
+[data-dark-mode] body .hljs-attribute,
+[data-dark-mode] body .hljs-link {
  color: $blue-300;
 }
--- a/assets/scss/layouts/_header.scss
+++ b/assets/scss/layouts/_header.scss
@ -14,6 +14,7 @@
  font-weight: $headings-font-weight;
 }

+/*
 .navbar-light .navbar-brand,
 .navbar-light .navbar-brand:hover,
 .navbar-light .navbar-brand:active {
@ -23,6 +24,23 @@
 .navbar-light .navbar-nav .active .nav-link {
  color: $primary;
 }
+*/
+
+.navbar {
+  z-index: 1000;
+  background-color: rgba(255, 255, 255, 0.95);
+  border-bottom: 1px solid $gray-200;
+
+  /*
+  margin-top: 4px;
+  */
+}
+
+@include media-breakpoint-up(lg) {
+  .navbar {
+    z-index: 1025;
+  }
+}

@include media-breakpoint-up(md) {
  .navbar-brand {
@ -39,7 +57,7 @@
 }

 .nav-item {
-  margin-left: 1.25rem;
+  margin-left: 0;
 }

@include media-breakpoint-up(md) {
@ -48,11 +66,13 @@
  }
 }

+/*
@include media-breakpoint-down(sm) {
  .nav-item:first-child {
    margin-left: 0;
  }
 }
+*/

@include media-breakpoint-down(md) {
  .navbar .container {
@ -66,11 +86,49 @@
  height: 0;
 }

+button#doks-languages {
+  margin-right: -0.5625rem;
+  margin-left: 0.75rem;
+}
+
+button#doks-versions {
+  margin-right: -0.5625rem;
+  margin-left: 0;
+}
+
+.offcanvas .nav-link {
+  color: $body-color;
+}
+
+.doks-subnavbar {
+  background-color: rgba(255, 255, 255, 0.95);
+  border-bottom: 1px solid $gray-200;
+}
+
+.doks-subnavbar .nav-link {
+  padding: 0.5rem 1.5rem 0.5rem 0;
+}
+
+.doks-subnavbar .nav-link:first-child {
+  padding: 0.5rem 1.5rem 0.5rem 0;
+}
+
+.offcanvas .nav-link:hover,
+.offcanvas .nav-link:focus {
+  color: $link-color;
+}
+
+.offcanvas .nav-link.active {
+  color: $link-color;
+}
+
+/*
 .navbar {
  background-color: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid $gray-200;
  margin-top: 4px;
 }
+*/

 .header-bar {
  border-top: 4px solid;
@ -78,18 +136,24 @@
  border-image-slice: 1;
 }

+.offcanvas .header-bar {
+  margin-bottom: -4px;
+}
+
 .home .navbar {
  border-bottom: 0;
 }

+/*
 .navbar-form {
  position: relative;
  margin-top: 0.25rem;
 }
+*/

@include media-breakpoint-up(md) {
  .navbar-brand {
-    margin-right: 1rem !important;
+    margin-right: 0.75rem !important;
  }

  .main-nav .nav-item:first-child .nav-link,
@ -102,13 +166,49 @@
    padding-right: 0;
  }

+  .doks-search {
+    max-width: 20rem;
+    margin-top: 0.125rem;
+    margin-bottom: 0.125rem;
+  }
+
+  /*
  .navbar-form {
    margin-top: 0;
    margin-left: 6rem;
    margin-right: 1.5rem;
  }
+  */
 }

+.form-control.is-search {
+  padding-right: 4rem;
+  border: 1px solid transparent;
+  background: $gray-100;
+}
+
+.form-control.is-search:focus {
+  border: 1px solid $primary;
+}
+
+.doks-search::after {
+  position: absolute;
+  top: 0.4625rem;
+  right: 0.5375rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.5rem;
+  padding-right: 0.3125rem;
+  padding-left: 0.3125rem;
+  font-size: $font-size-base * 0.75;
+  color: $gray-700;
+  content: "Ctrl + /";
+  border: 1px solid $gray-300;
+  border-radius: 0.25rem;
+}
+
+/*
@include media-breakpoint-up(lg) {
  .navbar-form {
    margin-left: 15rem;
@ -120,23 +220,34 @@
    margin-left: 30rem;
  }
 }
+*/

+/*
 .form-control.is-search {
-  /*
+*/
+
+/*
  padding-right: calc(1.5em + 0.75rem);
  */
+
+/*
  padding-right: 2.5rem;
  background: $gray-100;
  border: 0;
+  */

-  /*
+/*
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
  */
-}

+/*
+}
+*/
+
+/*
 .navbar-form::after {
  position: absolute;
  top: 0.4625rem;
@ -153,6 +264,7 @@
  border: 1px solid $gray-300;
  border-radius: 0.25rem;
 }
+*/

 /*! purgecss start ignore */
 .algolia-autocomplete {
@ -170,12 +282,20 @@
    width: auto !important;
  }

+  .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
+    font-weight: normal;
+  }
+
  .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column::after {
-    content: "|";
+    content: "/";
    margin-right: 0.25rem;
  }
 }

+.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
+  color: $black;
+}
+
 .algolia-autocomplete .algolia-docsearch-suggestion--title {
  margin-bottom: 0;
 }
@ -266,3 +386,60 @@
 .navbar .menu-btn:checked ~ .menu-icon:not(.steps) .navicon::after {
  top: 0;
 }
+
+.btn-menu {
+  margin-left: 1rem;
+}
+
+.btn-menu,
+.doks-sidebar-toggle {
+  padding-right: 0.25rem;
+  padding-left: 0.25rem;
+  margin-right: -0.5rem;
+}
+
+.btn-menu:hover,
+.btn-doks-light:hover,
+.doks-sidebar-toggle:hover {
+  background: $pink-100;
+}
+
+.btn-menu:focus,
+.doks-sidebar-toggle:focus,
+.doks-mode-toggle:focus {
+  outline: 0;
+}
+
+.doks-sidebar-toggle .doks-collapse {
+  display: none;
+}
+
+.doks-sidebar-toggle:not(.collapsed) .doks-expand {
+  display: none;
+}
+
+.doks-sidebar-toggle:not(.collapsed) .doks-collapse {
+  display: inline-block;
+}
+
+.navbar-light .navbar-brand,
+.navbar-light .navbar-brand:hover,
+.navbar-light .navbar-brand:active {
+  color: $body-color;
+}
+
+.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;
+}
--- a/assets/scss/layouts/_pages.scss
+++ b/assets/scss/layouts/_pages.scss
@ -43,3 +43,7 @@ p.meta {
  margin-top: 2.25rem;
  font-size: $font-size-base;
 }
+
+.page-link:hover {
+  text-decoration: none;
+}
--- a/config/_default/config.toml
+++ b/config/_default/config.toml
@ -1,4 +1,4 @@
-baseurl = "/"
+baseurl = "https://doks.netlify.app/"
 canonifyURLs = false
 disableAliases = true
 disableHugoGeneratorInject = true
@ -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"]
@ -42,28 +47,10 @@ isPlainText = true
 noUgly = true
 rel  = "sitemap"

-[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
+[caches]
+  [caches.getjson]
+    dir = ":cacheDir/:project"
+    maxAge = "10s"

 [sitemap]
  changefreq = "weekly"
@ -75,6 +62,10 @@ rel  = "sitemap"

 [permalinks]
  blog = "/blog/:title/"
+# docs = "/docs/1.0/:sections[1:]/:title/"
+
+[minify.tdewolff.html]
+  keepWhitespace = false

 [module]
  [module.hugoVersion]
--- a/config/_default/languages.toml
+++ b/config/_default/languages.toml
@ -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>"
--- 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
@ -13,6 +13,7 @@
 [[main]]
  name = "Docs"
  url = "/docs/prologue/introduction/"
+# url = "/docs/1.0/prologue/introduction/"
  weight = 10

 [[main]]
@ -20,17 +21,17 @@
  url = "/blog/"
  weight = 20

-[[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 = 10
-
 [[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]]
--- 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
@ -4,7 +4,10 @@
 title = "Doks"
 titleSeparator = "-"
 titleAddition = "Modern Documentation Theme"
-description = "Doks is a Hugo theme helping you build modern documentation websites that are secure, fast, and SEO-ready — by default."
+description = "Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize."
+
+## Documentation
+# docsVersion = "0.3"

 ## Open Graph
 images = ["doks.png"]
@ -48,17 +51,23 @@ bgColor = "#fff"
 landscapePhotoWidths = [900, 800, 700, 600, 500]
 portraitPhotoWidths = [800, 700, 600, 500]
 lqipWidth = "20x"
+smallLimit = "300"

 # Footer
 footer = "Powered by <a href=\"https://www.netlify.com/\">Netlify</a>, <a href=\"https://gohugo.io/\">Hugo</a>, and <a href=\"https://getdoks.org/\">Doks</a>"
+
+# Feed
 copyRight = "Copyright (c) 2020-2021 Henk Verlinde"

 # Alert
 alert = false
-alertText = "Like Doks? <a class=\"alert-link\" href=\"https://github.com/h-enk/doks/stargazers\">Star on GitHub</a>. Thanks!</a>"
+alertDismissable = true
+# alertText = "Introducing the Doks child theme, several DX + UX updates, and more! <a class=\"alert-link stretched-link\" href=\"https://getdoks.org/blog/doks-v0.2/\" target=\"_blank\" rel=\"noopener\">Check out Doks v0.2</a>"
+alertText = "Introducing the Doks child theme, several DX + UX updates, and more! <a class=\"alert-link stretched-link\" href=\"https://getdoks.org/blog/doks-v0.2/\">Check out Doks v0.2</a>"

 # Edit Page
 docsRepo = "https://github.com/h-enk/doks"
+docsRepoBranch = "master"
 editPage = false

 [options]
@ -71,4 +80,6 @@ editPage = false
  breadCrumb = false
  highLight = true
  kaTex = false
-  collapsibleSidebar = false
+  collapsibleSidebar = true
+  multilingualMode = false
+  docsVersioning = false
--- a/config/next/config.toml
+++ b/config/next/config.toml
@ -1,2 +1 @@
-baseurl = "https://doks-next.netlify.app/"
-canonifyURLs = true
+canonifyURLs = false
--- 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/config/production/config.toml
+++ b/config/production/config.toml
@ -1,2 +1 @@
-baseurl = "https://doks.netlify.app/"
-canonifyURLs = true
+canonifyURLs = false
--- a/content/_index.md
+++ b/content/_index.md
@ -1,9 +0,0 @@
---
-title : "Modern Documentation Theme"
-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:47:36+00:00
-lastmod: 2020-10-06T08:47:36+00:00
-draft: false
-images: []
---
--- a/content/en/_index.md
+++ b/content/en/_index.md
@ -0,0 +1,9 @@
+---
+title : "Modern Documentation Theme"
+description: "Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize."
+lead: "Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize."
+date: 2020-10-06T08:47:36+00:00
+lastmod: 2020-10-06T08:47:36+00:00
+draft: false
+images: []
+---
--- 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
@ -23,7 +23,7 @@ Please keep it in place.

 ## Keyboard shortcuts for search?

- focus: `/`
+- focus: `Ctrl + /`
 - select: `↓` and `↑`
 - open: `Enter`
 - close: `Esc`
--- 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
@ -0,0 +1,58 @@
+---
+title: "Introduction"
+description: "Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize."
+lead: "Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize."
+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/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/en/versions.md
+++ b/content/en/versions.md
@ -0,0 +1,11 @@
+---
+title: "Versions"
+description: ""
+lead: "An appendix of hosted documentation for nearly every release of Doks, from v0 through v3."
+date: 2021-09-24T08:50:23+02:00
+lastmod: 2021-09-24T08:50:23+02:00
+draft: true
+images: []
+layout: versions
+url: "/docs/versions/"
+---
--- a/content/nl/_index.md
+++ b/content/nl/_index.md
@ -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: []
+---
+
--- 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
--- 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/data/.gitkeep
+++ b/data/.gitkeep
--- a/data/docs-versions.yml
+++ b/data/docs-versions.yml
@ -0,0 +1,60 @@
+# - group: v1.x
+#   baseurl: "https://getbootstrap.com"
+#   description: "Every minor and patch release from v1 is listed below."
+#   versions:
+#     - v: "1.0.0"
+#     - v: "1.1.0"
+#     - v: "1.1.1"
+#     - v: "1.2.0"
+#     - v: "1.3.0"
+#     - v: "1.4.0"
+#
+# - group: v2.x
+#   baseurl: "https://getbootstrap.com"
+#   description: "Every minor and patch release from v2 is listed below."
+#   versions:
+#     - v: "2.0.0"
+#     - v: "2.0.1"
+#     - v: "2.0.2"
+#     - v: "2.0.3"
+#     - v: "2.0.4"
+#     - v: "2.1.0"
+#     - v: "2.1.1"
+#     - v: "2.2.0"
+#     - v: "2.2.1"
+#     - v: "2.2.2"
+#     - v: "2.3.0"
+#     - v: "2.3.1"
+#     - v: "2.3.2"
+#
+# - group: v3.x
+#   baseurl: "https://getbootstrap.com/docs"
+#   description: "Every minor and patch release from v3 is listed below. Last update was v3.4.1."
+#   versions:
+#     - v: "3.3"
+#     - v: "3.4"
+#
+# - group: v4.x
+#   baseurl: "https://getbootstrap.com/docs"
+#   description: "Our previous major release with its minor releases. Last update was v4.6.0."
+#   versions:
+#     - v: "4.0"
+#     - v: "4.1"
+#     - v: "4.2"
+#     - v: "4.3"
+#     - v: "4.4"
+#     - v: "4.5"
+#     - v: "4.6"
+
+- group: v0.x
+  baseurl: "/docs"
+  description: "Current major release. Last update was v0.2.0."
+  versions:
+    - v: "0.1"
+    - v: "0.2"
+
+- group: v1.x
+  baseurl: "/docs"
+  description: "Every minor and patch release from v1 is listed below. Last update was v1.0.0."
+  versions:
+    - v: "1.0"
--- 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/images/screenshot.png
+++ b/images/screenshot.png
--- a/images/tn.png
+++ b/images/tn.png
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@ -0,0 +1,27 @@
+{{ $image := .Page.Resources.GetMatch .Destination -}}
+{{ $lqip := $image.Resize site.Params.lqipWidth -}}
+
+{{ $imgSrc := "" -}}
+{{ $imgSrcSet := slice -}}
+
+{{ $widths := site.Params.landscapePhotoWidths -}}
+{{ if gt $image.Height $image.Width -}}
+  {{ $widths = site.Params.portraitPhotoWidths -}}
+{{ end -}}
+
+{{ range $widths -}}
+  {{ $srcUrl := (printf "%dx" . | $image.Resize).Permalink -}}
+  {{ if eq $imgSrc "" -}}{{ $imgSrc = $srcUrl -}}{{ end -}}
+  {{ $imgSrcSet = $imgSrcSet | append (printf "%s %dw" $srcUrl .) -}}
+{{ end -}}
+{{ $imgSrcSet = (delimit $imgSrcSet ",") -}}
+
+{{ if gt $image.Width site.Params.smallLimit -}}
+  <figure class="figure">
+    <img class="figure-img img-fluid lazyload blur-up" data-sizes="auto" src="{{ $lqip.Permalink }}" data-srcset="{{ $imgSrcSet }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $.Text }}">
+    <noscript><img class="figure-img img-fluid" sizes="100vw" srcset="{{ $imgSrcSet }}" src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $.Text }}"></noscript>
+    {{ with $.Title }}<figcaption class="figure-caption">{{ . | safeHTML }}</figcaption>{{ end -}}
+  </figure>
+{{ else -}}
+  <img class="img-fluid lazyload blur-up" src="{{ $lqip.Permalink }}" data-src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $.Text }}">
+{{ end -}}
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@ -14,7 +14,7 @@
  {{ end -}}
  <body class="{{ .Scratch.Get "class" }}">
    {{ partial "header/header.html" . }}
-    <div class="wrap container" role="document">
+    <div class="wrap container-xxl" role="document">
      <div class="content">
        {{ block "main" . }}{{ end }}
      </div>
@ -22,9 +22,6 @@
    {{ block "sidebar-prefooter" . }}{{ end }}
    {{ block "sidebar-footer" . }}{{ end }}
    {{ partial "footer/footer.html" . }}
-    {{ if and .IsHome .Site.Params.alert }}
-      {{ partial "footer/alert.html" . }}
-    {{ end }}
    {{ partial "footer/script-footer.html" . }}
  </body>
 </html>
--- a/layouts/_default/versions.html
+++ b/layouts/_default/versions.html
@ -0,0 +1,27 @@
+{{ define "main" }}
+  <article>
+    <h1>{{ .Title }}</h1>
+    <p class="lead">{{ .Params.lead | safeHTML }}</p>
+    {{ .Content }}
+    <div class="row">
+      {{ range $release := sort (index $.Site.Data "docs-versions") "group" "desc" -}}
+      <div class="col-md-8 col-lg-4 col-xl mb-4">
+        <h2>{{ $release.group }}</h2>
+        <p>{{ $release.description }}</p>
+        {{ $versions := sort $release.versions "v" "desc" -}}
+        {{ range $i, $version := $versions -}}
+          {{ $len := len $versions -}}
+          {{ if (eq $i 0) }}<div class="list-group">{{ end }}
+            <a class="list-group-item list-group-item-action py-2 text-primary{{ if (eq $version.v $.Site.Params.docsVersion) }} d-flex justify-content-between align-items-center{{ end }}" href="{{ $release.baseurl }}/{{ $version.v }}/">
+              {{ $version.v }}
+              {{ if (eq $version.v $.Site.Params.docsVersion) -}}
+              <span class="badge bg-primary">Latest</span>
+              {{ end -}}
+            </a>
+          {{ if (eq (add $i 1) $len) }}</div>{{ end }}
+        {{ end -}}
+      </div>
+      {{ end -}}
+    </div>
+  </article>
+{{ end }}
--- a/layouts/blog/list.html
+++ b/layouts/blog/list.html
@ -5,7 +5,8 @@
      <h1 class="text-center">{{ .Title }}</h1>
      <div class="text-center">{{ .Content }}</div>
 			<div class="card-list">
-				{{ range .Data.Pages -}}
+				{{ $paginator := .Paginate (.Data.Pages) -}}
+				{{ range $paginator.Pages -}}
 					<div class="card">
 						<div class="card-body">
 							<h2 class="h3"><a class="stretched-link text-body" href="{{ .RelPermalink }}">{{ .Params.title }}</a></h2>
@ -14,6 +15,8 @@
 						</div>
 					</div>
 				{{ end -}}
+				{{ $.Scratch.Set "paginator" true }}
+				{{ template "_internal/pagination.html" . }}
 			</div>
    </article>
  </div>
--- 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>
@ -26,15 +26,23 @@
 			{{ end }}
 			<h1>{{ .Title }}</h1>
 			<p class="lead">{{ .Params.lead | safeHTML }}</p>
+			{{ if ne .Params.toc false -}}
+			<nav class="d-xl-none" aria-label="Quaternary navigation">
+				{{ partial "sidebar/docs-toc.html" . }}
+			</nav>
+			{{ end -}}
 			{{ partial "main/headline-hash.html" .Content }}
 			{{ 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.headers
+++ b/layouts/index.headers
@ -2,8 +2,9 @@
  Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
  X-Content-Type-Options: nosniff
  X-XSS-Protection: 1; mode=block
-  Content-Security-Policy: default-src 'self'; frame-ancestors https://jamstackthemes.dev; manifest-src 'self'; connect-src 'self'; font-src 'self'; img-src 'self' data:; script-src 'self'; style-src 'self' 'unsafe-inline'
+  Content-Security-Policy: default-src 'self'; frame-ancestors https://jamstackthemes.dev; manifest-src 'self' https://*.netlify.app; connect-src 'self' https://*.netlify.app; font-src 'self' https://*.netlify.app; img-src 'self' https://*.netlify.app data:; script-src 'self' https://*.netlify.app 'sha512-RBYr6Ld4w1yVqaACrgrBLQfPgGhj/1jyacA74WxJ1KM6KVcSWymwrdDwb3HDcdpwiNJ5yssot1He0U9vXoQVlg=='; style-src 'self' https://*.netlify.app 'unsafe-inline'
  X-Frame-Options: SAMEORIGIN
  Referrer-Policy: strict-origin
  Feature-Policy: geolocation 'self'
  Cache-Control: public, max-age=31536000
+  Access-Control-Allow-Origin: *
--- a/layouts/index.html
+++ b/layouts/index.html
@ -6,46 +6,48 @@
    </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>
-      <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>
+      <a class="btn btn-primary btn-lg px-4 mb-2" href="/docs/{{ if .Site.Params.options.docsVersioning }}{{ .Site.Params.docsVersion }}/{{ end }}prologue/introduction/" role="button">Get Started</a>
+      <p class="meta">Open-source MIT Licensed. <a href="https://github.com/h-enk/doks">GitHub v{{ $data := getJSON "/package.json" }}{{ $data.version }}</a></p>
    </div>
  </div>
 </section>
 {{ 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/index.redirects
+++ b/layouts/index.redirects
@ -1,6 +1,13 @@
-# redirects for Netlify - https://www.netlify.com/docs/redirects/
 {{- range $p := .Site.Pages -}}
 {{- range .Aliases }}
 {{ . }} {{ $p.RelPermalink -}}
 {{- end }}
 {{- end -}}
+
+# /docs/1.0/prologue/   /docs/1.0/prologue/introduction/
+# /docs/1.0/help/       /docs/1.0/help/how-to-update/
+# /docs/1.0/            /docs/1.0/prologue/introduction/
+# /docs/                /docs/1.0/prologue/introduction/
+#
+# /docs/0.1/*           https://v0-1-0--doks-versioning-poc.netlify.app/docs/0.1/:splat  200
+# /docs/0.2/*           https://v0-2-0--doks-versioning-poc.netlify.app/docs/0.2/:splat  200
--- a/layouts/partials/footer/alert.html
+++ b/layouts/partials/footer/alert.html
@ -1,3 +0,0 @@
-<div class="alert alert-primary fixed-bottom text-center" role="alert">
-  {{ .Site.Params.alertText | safeHTML }}
-</div>
--- a/layouts/partials/footer/footer.html
+++ b/layouts/partials/footer/footer.html
@ -1,5 +1,5 @@
 <footer class="footer text-muted">
-  <div class="container">
+  <div class="container-xxl">
    <div class="row">
      <div class="col-lg-8 order-last order-lg-first">
        <ul class="list-inline">
--- a/layouts/partials/footer/script-footer.html
+++ b/layouts/partials/footer/script-footer.html
@ -45,6 +45,12 @@
  {{ $slice = $slice | append $darkMode -}}
 {{ end -}}

+{{ if .Site.Params.alertDismissable -}}
+  {{ $alert := resources.Get "js/alert.js" -}}
+  {{ $alert := $alert | js.Build -}}
+  {{ $slice = $slice | append $alert -}}
+{{ end -}}
+
 {{ if .Site.Params.options.kaTex -}}
  {{ $katexConfig := resources.Get "js/katex.js" -}}
  {{ $katexConfig := $katexConfig | js.Build -}}
@ -68,7 +74,7 @@
  {{ with .Params.mermaid -}}
    <script src="{{ $mermaid.RelPermalink }}" defer></script>
  {{ end -}}
-  {{ if .Site.Params.options.flexSearch -}}
+  {{ if and (.Site.Params.options.flexSearch) (eq .Section "docs") -}}
    <script src="{{ $index.RelPermalink }}" defer></script>
  {{ end -}}
 {{ else -}}
@ -93,7 +99,7 @@
  {{ with .Params.mermaid -}}
    <script src="{{ $mermaid.RelPermalink }}" integrity="{{ $mermaid.Data.Integrity }}" crossorigin="anonymous" defer></script>
  {{ end -}}
-  {{ if .Site.Params.options.flexSearch -}}
-    <script src="{{ $index.RelPermalink }}" integrity="{{ $index.Data.Integrity }}" crossorigin="anonymous" defer></script>
+  {{ if and (.Site.Params.options.flexSearch) (eq .Section "docs") -}}
+    <script src="{{ $index.Permalink }}" integrity="{{ $index.Data.Integrity }}" crossorigin="anonymous" defer></script>
  {{ end -}}
 {{ end -}}
--- a/layouts/partials/head/head.html
+++ b/layouts/partials/head/head.html
@ -3,8 +3,8 @@
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  {{ block "head/resource-hints" . }}{{ partial "head/resource-hints.html" . }}{{ end }}
+  {{ block "head/script-header" . }}{{ partial "head/script-header.html" . }}{{ end }}
  {{ block "head/stylesheet" . }}{{ partial "head/stylesheet.html" . }}{{ end }}
  {{ block "head/seo" . }}{{ partial "head/seo.html" . }}{{ end }}
  {{ block "head/favicons" . }}{{ partial "head/favicons.html" . }}{{ end }}
-  {{ block "head/script-header" . }}{{ partial "head/script-header.html" . }}{{ end }}
 </head>
--- a/layouts/partials/head/script-header.html
+++ b/layouts/partials/head/script-header.html
@ -0,0 +1,4 @@
+{{ if .Site.Params.options.darkMode -}}
+  {{ $darkModeInit := resources.Get "js/darkmode-init.js" | js.Build | minify -}}
+  <script>{{ $darkModeInit.Content | safeJS }}</script>
+{{ end -}}
--- a/layouts/partials/head/stylesheet.html
+++ b/layouts/partials/head/stylesheet.html
@ -1,7 +1,7 @@
 {{ if eq (hugo.Environment) "development" -}}
  {{ $options := (dict "targetPath" "main.css" "enableSourceMap" true "includePaths" (slice "node_modules")) -}}
  {{ $css := resources.Get "scss/app.scss" | toCSS $options -}}
-  <link rel="stylesheet" href="{{ $css.Permalink }}">
+  <link rel="stylesheet" href="{{ $css.Permalink | relURL }}">
 {{ else -}}
  {{ $options := (dict "targetPath" "main.css" "outputStyle" "compressed" "includePaths" (slice "node_modules")) -}}
  {{ $css := resources.Get "scss/app.scss" | toCSS $options | postCSS (dict "config" "config/postcss.config.js") -}}
--- a/layouts/partials/header/alert.html
+++ b/layouts/partials/header/alert.html
@ -0,0 +1,10 @@
+{{ if .Site.Params.alertDismissable -}}
+  <div id="announcement" class="alert alert-primary alert-dismissible fade show d-none text-lg-center" role="alert">
+    {{ .Site.Params.alertText | safeHTML }}
+    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+  </div>
+{{ else -}}
+  <div class="alert alert-primary text-center" role="alert">
+    {{ .Site.Params.alertText | safeHTML }}
+  </div>
+{{ end -}}
--- a/layouts/partials/header/header.html
+++ b/layouts/partials/header/header.html
@ -1,43 +1,138 @@
-<div class="header-bar fixed-top"></div>
-<header class="navbar fixed-top navbar-expand-md navbar-light">
-  <div class="container">
-    <input class="menu-btn order-0" type="checkbox" id="menu-btn">
-    <label class="menu-icon d-md-none" for="menu-btn"><span class="navicon"></span></label>
-    <a class="navbar-brand order-1 order-md-0 me-auto" href="{{ "/" | relURL }}">{{ .Site.Params.Title }}</a>
+{{ if .Site.Params.alert -}}
+  {{ partial "header/alert.html" . }}
+{{ end -}}
+
+{{ if eq .Site.Params.options.flexSearch false -}}
+<div class="sticky-lg-top">
+{{ end -}}
+
+<div class="header-bar"></div>
+
+<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="{{ "/" | relLangURL }}" aria-label="{{ .Site.Params.Title }}">
+      {{ .Site.Params.Title }}
+    </a>
+
+    <button class="btn btn-menu d-block d-md-none order-5" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDoks" aria-controls="offcanvasDoks" aria-label="Open main menu">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
+    </button>
+
+    <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="{{ "/" | 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">
+        <h3 class="h6 text-uppercase mb-3 d-md-none">Main</h3>
+        <ul class="nav flex-column flex-md-row ms-md-n3">
+          {{- $current := . -}}
+          {{ range .Site.Menus.main -}}
+            {{- $active := or ($current.IsMenuCurrent "main" .) ($current.HasMenuCurrent "main" .) -}}
+            {{- $active = or $active (eq .Name $current.Title) -}}
+            {{- $active = or $active (and (eq .Name "Docs") (eq $current.Section "docs")) -}}
+            {{- $active = or $active (and (eq .Name "Blog") (eq $current.Section "blog" "authors")) -}}
+            <li class="nav-item">
+              <a class="nav-link ps-0 py-1{{ if $active }} active{{ end }}" href="{{ .URL | relLangURL }}">{{ .Name }}</a>
+            </li>
+          {{ end -}}
+        </ul>
+        <hr class="text-black-50 my-4 d-md-none">
+        <h3 class="h6 text-uppercase mb-3 d-md-none">Socials</h3>
+        <ul class="nav flex-column flex-md-row ms-md-auto me-md-n5 pe-md-2">
+          {{ range .Site.Menus.social -}}
+            <li class="nav-item">
+              <a class="nav-link ps-0 py-1" href="{{ .URL | relURL }}">{{ .Pre | safeHTML }}<small class="ms-2 d-md-none">{{ .Name | safeHTML }}</small></a>
+            </li>
+          {{ end -}}
+        </ul>
+      </div>
+    </div>
    {{ if .Site.Params.options.darkMode -}}
-    <button id="mode" class="btn btn-link order-2 order-md-4" type="button" aria-label="Toggle mode">
+    <button id="mode" class="btn btn-link order-md-1" type="button" aria-label="Toggle user interface mode">
      <span class="toggle-dark"><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-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg></span>
      <span class="toggle-light"><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-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg></span>
    </button>
    {{ end -}}
-    <ul class="navbar-nav social-nav order-3 order-md-5">
-      {{ range .Site.Menus.social -}}
-        <li class="nav-item">
-          <a class="nav-link" href="{{ .URL | relURL }}">{{ .Pre | safeHTML }}<span class="ms-2 visually-hidden">{{ .Name | safeHTML }}</span></a>
-        </li>
-      {{ end -}}
-    </ul>
-    <div class="collapse navbar-collapse order-4 order-md-1">
-      <ul class="navbar-nav main-nav me-auto order-5 order-md-2">
-        {{- $current := . -}}
-        {{ range .Site.Menus.main -}}
-          {{- $active := or ($current.IsMenuCurrent "main" .) ($current.HasMenuCurrent "main" .) -}}
-          {{- $active = or $active (eq .Name $current.Title) -}}
-          {{- $active = or $active (and (eq .Name "Docs") (eq $current.Section "docs")) -}}
-          {{- $active = or $active (and (eq .Name "Guides") (eq $current.Section "guides")) -}}
-          {{- $active = or $active (and (eq .Name "Blog") (eq $current.Section "blog" "authors")) -}}
-          <li class="nav-item{{ if $active }} active{{ end }}">
-            <a class="nav-link" href="{{ .URL | relURL }}">{{ .Name }}</a>
-          </li>
+
+    {{ 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">
+        {{ .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 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>
+
+      {{ 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 -}}
-      </ul>
-      <div class="break order-6 d-md-none"></div>
-      {{ if .Site.Params.options.flexSearch -}}
-      <form class="navbar-form flex-grow-1 order-7 order-md-3">
-        <input id="userinput" class="form-control is-search" type="search" placeholder="Search docs..." aria-label="Search docs..." autocomplete="off">
-        <div id="suggestions" class="shadow bg-white rounded"></div>
-      </form>
      {{ end -}}
+        <!--
+        <li><hr class="dropdown-divider"></li>
+        <li><a class="dropdown-item" href="/docs/contributing/how-to-contribute/">Help Translate</a></li>
+        -->
+      </ul>
    </div>
-  </div>
+    {{ end -}}
+  </nav>
 </header>
+
+{{ if eq .Site.Params.options.flexSearch false }}
+</div>
+{{ end -}}
+
+{{ if eq .Section "docs" -}}
+<nav class="doks-subnavbar py-2 sticky-lg-top{{ if eq .Site.Params.options.flexSearch false }} d-lg-none{{ end }}" aria-label="Secondary navigation">
+  <div class="container-xxl d-flex align-items-md-center">
+
+    {{ if .Site.Params.options.flexSearch -}}
+    <form class="doks-search position-relative flex-grow-1 me-auto">
+      <input id="search" class="form-control is-search" type="search" placeholder="Search docs..." aria-label="Search docs..." autocomplete="off">
+      <div id="suggestions" class="shadow bg-white rounded d-none"></div>
+    </form>
+    {{ end -}}
+
+    {{ if eq .Site.Params.options.docsVersioning true -}}
+    <div class="dropdown ms-3">
+      <button class="btn btn-doks-light dropdown-toggle" id="doks-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static" aria-label="Toggle version menu">
+        <span class="d-none d-lg-inline">Doks</span> v{{ .Site.Params.docsVersion }}
+      </button>
+      <ul class="dropdown-menu dropdown-menu-end shadow rounded border-0" aria-labelledby="doks-versions">
+        <li><a class="dropdown-item current" aria-current="true" href="/docs/{{ .Site.Params.docsVersion }}/prologue/introduction/">Latest ({{ .Site.Params.docsVersion }}.x)</a></li>
+        <li><hr class="dropdown-divider"></li>
+        <li><a class="dropdown-item" href="/docs/0.2/prologue/introduction/">v0.2.x</a></li>
+        <li><a class="dropdown-item" href="/docs/0.1/prologue/introduction/">v0.1.x</a></li>
+        <li><hr class="dropdown-divider"></li>
+        <li><a class="dropdown-item" href="/docs/versions/">All versions</a></li>
+      </ul>
+    </div>
+    {{ end -}}
+
+    <button class="btn doks-sidebar-toggle d-lg-none ms-3 order-3 collapsed{{ if eq .Site.Params.options.flexSearch false }} ms-auto{{ end }}" type="button" data-bs-toggle="collapse" data-bs-target="#doks-docs-nav" aria-controls="doks-docs-nav" aria-expanded="false" aria-label="Toggle documentation navigation">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="doks doks-expand" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><title>Expand</title><polyline points="7 13 12 18 17 13"></polyline><polyline points="7 6 12 11 17 6"></polyline></svg>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="doks doks-collapse" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><title>Collapse</title><polyline points="17 11 12 6 7 11"></polyline><polyline points="17 18 12 13 7 18"></polyline></svg>
+    </button>
+
+  </div>
+</nav>
+
+<div class="container-xxl">
+  <aside class="doks-sidebar">
+    <nav id="doks-docs-nav" class="collapse d-lg-none" aria-label="Tertiary navigation">
+      {{ partial "sidebar/docs-menu.html" . }}
+    </nav>
+  </aside>
+</div>
+{{ end -}}
--- a/layouts/partials/main/edit-page.html
+++ b/layouts/partials/main/edit-page.html
@ -1 +1,16 @@
-<p class="edit-page"><a href="{{ .Site.Params.docsRepo }}/blob/master/content/{{replace .File.Path "\\" "/" }}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>Edit this page on GitHub</a></p>
+{{ $filePath := replace .File.Path "\\" "/" }}
+{{ $contentPath := print .Site.Params.docsRepo "/blob/" .Site.Params.docsRepoBranch "/content/" }}
+{{ $url := print $contentPath $filePath }}
+
+{{ if .Site.Params.options.multilingualMode }}
+  {{ $url = print $contentPath .Lang "/" $filePath }}
+{{ end }}
+
+<p class="edit-page">
+  <a href="{{ $url }}">
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2">
+      <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
+    </svg>
+    Edit this page on GitHub
+  </a>
+</p>
--- a/layouts/partials/sidebar/docs-menu.html
+++ b/layouts/partials/sidebar/docs-menu.html
@ -25,7 +25,7 @@
 {{ else -}}
  {{ $currentPage := . -}}
  {{ range .Site.Menus.docs -}}
-    <h3>{{ .Name }}</h3>
+    <h3 class="h6 text-uppercase">{{ .Name }}</h3>
    {{ if .HasChildren -}}
    <ul class="list-unstyled">
      {{ range .Children -}}
--- a/layouts/partials/sidebar/docs-toc.html
+++ b/layouts/partials/sidebar/docs-toc.html
@ -1,4 +1,4 @@
-{{ if ne .Params.toc false -}}
+{{ if and (ne .Params.toc false) (ne .TableOfContents "<nav id=\"TableOfContents\"></nav>") -}}
  <div class="page-links">
    <h3>On this page</h3>
    {{ .TableOfContents }}
--- a/layouts/rss.xml
+++ b/layouts/rss.xml
@ -7,8 +7,8 @@
    <generator>Hugo -- gohugo.io</generator>{{ with .Site.LanguageCode }}
    <language>{{.}}</language>{{end}}{{ with .Site.Author.email }}
    <managingEditor>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</managingEditor>{{end}}{{ with .Site.Author.email }}
-    <webMaster>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</webMaster>{{end}}{{ with .Site.Copyright }}
-    <copyright>{{.}}</copyright>{{end}}{{ if not .Date.IsZero }}
+    <webMaster>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</webMaster>{{end}}{{ with .Site.Params.copyRight }}
+    <copyright>{{ . | safeHTML }}</copyright>{{end}}{{ if not .Date.IsZero }}
    <lastBuildDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate>{{ end }}
    {{ with .OutputFormats.Get "RSS" }}
        {{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
--- a/layouts/shortcodes/img-simple.html
+++ b/layouts/shortcodes/img-simple.html
@ -1,3 +1,7 @@
 {{ $image := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) -}}
 {{ $lqip := $image.Resize $.Site.Params.lqipWidth -}}
-<img class="img-simple img-fluid lazyload blur-up{{ with .Get "class" }} {{.}}{{ end }}" src="{{ $lqip.RelPermalink }}" data-src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" {{ with .Get "alt" }}alt="{{.}}"{{ end }}>
+{{ if eq .Site.Params.options.lazySizes true -}}
+  <img class="img-simple img-fluid lazyload blur-up{{ with .Get "class" }} {{.}}{{ end }}" src="{{ $lqip.RelPermalink }}" data-src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" {{ with .Get "alt" }}alt="{{.}}"{{ end }}>
+{{ else -}}
+  <img class="img-simple img-fluid{{ with .Get "class" }} {{.}}{{ end }}" src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" {{ with .Get "alt" }}alt="{{.}}"{{ end }}>
+{{ end -}}
--- a/layouts/shortcodes/img.html
+++ b/layouts/shortcodes/img.html
@ -17,7 +17,11 @@
 {{ $imgSrcSet = (delimit $imgSrcSet ",") -}}

 <figure{{ with .Get "class" }} class="{{.}}"{{ end }}>
-  <img class="img-fluid lazyload blur-up" data-sizes="auto" src="{{ $lqip.RelPermalink }}" data-srcset="{{ $imgSrcSet }}" width="{{ $image.Width }}" height="{{ $image.Height }}" {{ with .Get "alt" }}alt="{{.}}"{{ end }}>
+  {{ if eq .Site.Params.options.lazySizes true -}}
+    <img class="img-fluid lazyload blur-up" data-sizes="auto" src="{{ $lqip.RelPermalink }}" data-srcset="{{ $imgSrcSet }}" width="{{ $image.Width }}" height="{{ $image.Height }}" {{ with .Get "alt" }}alt="{{.}}"{{ end }}>
+  {{ else -}}
+    <img class="img-fluid" sizes="100vw" srcset="{{ $imgSrcSet }}" src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" {{ with .Get "alt" }}alt="{{.}}"{{ end }}>
+  {{ end -}}
  <noscript><img class="img-fluid" sizes="100vw" srcset="{{ $imgSrcSet }}" src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" {{ with .Get "alt" }}alt="{{.}}"{{ end }}></noscript>
  {{ with .Get "caption" }}<figcaption class="figure-caption">{{ . | safeHTML }}</figcaption>{{ end }}
 </figure>
--- a/netlify.toml
+++ b/netlify.toml
@ -3,28 +3,27 @@
  functions = "functions"

 [build.environment]
-  NODE_VERSION = "16.3.0"
-  NPM_VERSION = "7.16.0"
-  HUGO_VERSION = "0.84.4"
+  NODE_VERSION = "16.9.1"
+  NPM_VERSION = "7.21.1"

 [context.production]
-  command = "hugo --gc --minify"
+  command = "npm run build"

 [context.deploy-preview]
-  command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"
+  command = "npm run build -- -b $DEPLOY_PRIME_URL"

 [context.branch-deploy]
-  command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"
+  command = "npm run build -- -b $DEPLOY_PRIME_URL"

 [context.next]
-  command = "hugo --gc --minify"
+  command = "npm run build"

 [context.next.environment]
  HUGO_ENV = "next"

 [dev]
  framework = "#custom"
-  command = "shx rm -rf public resources && hugo server --bind=0.0.0.0 --disableFastRender"
+  command = "npm run start"
  targetPort = 1313
  port = 8888
  publish = "public"
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "@hyas/doks",
  "description": "Doks theme",
-  "version": "0.3.3",
+  "version": "0.3.5",
  "browserslist": [
    "defaults"
  ],
@ -12,54 +12,55 @@
  },
  "scripts": {
    "init": "shx rm -rf .git && git init -b main",
-    "create": "exec-bin bin/hugo/hugo new",
+    "create": "exec-bin node_modules/.bin/hugo/hugo new",
    "prestart": "npm run clean",
-    "start": "exec-bin bin/hugo/hugo server --bind=0.0.0.0 --disableFastRender",
+    "start": "exec-bin node_modules/.bin/hugo/hugo server --bind=0.0.0.0 --disableFastRender",
    "prebuild": "npm run clean",
-    "build": "exec-bin bin/hugo/hugo --gc --minify",
+    "build": "exec-bin node_modules/.bin/hugo/hugo --gc --minify",
    "build:preview": "npm run build -D -F",
    "clean": "shx rm -rf public resources",
-    "clean:install": "shx rm -rf package-lock.json bin node_modules ",
+    "clean:install": "shx rm -rf package-lock.json node_modules ",
    "lint": "npm run -s lint:scripts && npm run -s lint:styles && npm run -s lint:markdown",
    "lint:scripts": "eslint assets/js config functions",
    "lint:styles": "stylelint \"assets/scss/**/*.{css,sass,scss,sss,less}\"",
    "lint:markdown": "markdownlint \"*.md\" \"content/**/*.md\"",
-    "server": "exec-bin bin/hugo/hugo server",
+    "server": "exec-bin node_modules/.bin/hugo/hugo server",
    "test": "npm run -s lint",
    "env": "env",
    "precheck": "npm version",
-    "check": "exec-bin bin/hugo/hugo version",
+    "check": "exec-bin node_modules/.bin/hugo/hugo version",
    "copy:katex-fonts": "shx cp ./node_modules/katex/dist/fonts/* ./static/fonts/",
-    "postinstall": "hugo-installer --version otherDependencies.hugo --extended",
+    "postinstall": "hugo-installer --version otherDependencies.hugo --extended --destination node_modules/.bin/hugo",
    "version": "auto-changelog -p && git add CHANGELOG.md"
  },
  "devDependencies": {
-    "@babel/cli": "^7.14",
-    "@babel/core": "^7.14",
-    "@babel/preset-env": "^7.14",
+    "@babel/cli": "^7.15",
+    "@babel/core": "^7.15",
+    "@babel/preset-env": "^7.15",
    "@fullhuman/postcss-purgecss": "^4.0",
    "auto-changelog": "^2.3.0",
-    "autoprefixer": "^10.2",
-    "bootstrap": "^5.0",
+    "autoprefixer": "^10.3",
+    "bootstrap": "^5.1",
    "clipboard": "^2.0",
-    "eslint": "^7.29",
+    "eslint": "^7.32",
    "exec-bin": "^1.0.0",
-    "hugo-installer": "^3.0.1",
-    "flexsearch": "^0.7.11",
-    "highlight.js": "^11.0",
+    "hugo-installer": "^3.1",
+    "flexsearch": "^0.7.21",
+    "highlight.js": "^11.2",
    "instant.page": "^5.1",
    "katex": "^0.13",
    "lazysizes": "^5.3",
-    "markdownlint-cli": "^0.27",
-    "mermaid": "^8.11",
+    "markdownlint-cli": "^0.29",
+    "node-fetch": "^3.0",
+    "mermaid": "^8.13",
    "postcss": "^8.3",
-    "postcss-cli": "^8.3",
+    "postcss-cli": "^9.0",
    "purgecss-whitelister": "^2.4",
    "shx": "^0.3.3",
    "stylelint": "^13.13",
    "stylelint-config-standard": "^22.0"
  },
  "otherDependencies": {
-    "hugo": "0.84.4"
+    "hugo": "0.88.1"
  }
 }