Merge branch 'h-enk:master' into master

2021-07-20 08:26:45 +02:00 · 2021-07-20 08:26:45 +02:00 · db8715e705
parent 63107e8e22 b91e6494de
commit db8715e705
58 changed files with 3915 additions and 12623 deletions
--- a/.github/workflows/node.js-ci.yml
+++ b/.github/workflows/node.js-ci.yml
@ -1,13 +1,10 @@
-# Test and build your Hyas project
-# For more information see: https://henkverlinde.com/continuous-integration-workflow-for-your-hyas-project/
-
 name: Hyas CI

 on:
  push:
-    branches: [master]
+    branches: master
  pull_request:
-    branches: [master]
+    branches: master

 jobs:
  build:
@ -16,33 +13,22 @@ jobs:
    strategy:
      matrix:
        os: [ubuntu-latest, windows-latest, macos-latest]
-        node-version: [14.x, 15.x]
+        node: [14.x, 16.x]

    steps:
-    - uses: actions/checkout@v2
+    - name: Check out Hyas project
+      uses: actions/checkout@v2

-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
+    - name: Set up Node.js ${{ matrix.node }}
+      uses: actions/setup-node@v2
      with:
-        node-version: ${{ matrix.node-version }}
-
-    - name: Install Hugo
-      uses: peaceiris/actions-hugo@v2
-      with:
-        hugo-version: 'latest'
-        extended: true
-    
-    - name: Check install Hugo
-      run: hugo version
+        node-version: ${{ matrix.node }}

    - name: Install dependencies
      run: npm ci

-    - name: Check for linting errors
+    - name: Run Hyas test script
      run: npm test

-    - name: Delete temporary directories
-      run: npm run clean
-    
    - name: Build production website
      run: npm run build
--- a/.github/workflows/readme.yml
+++ b/.github/workflows/readme.yml
@ -1,17 +0,0 @@
-name: Readme
-
-on:
-  schedule:
-    - cron: 0 18 * * *
-  push:
-    branches:
-      - master
-
-jobs:
-  update:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: JasonEtco/rss-to-readme@v1
-        with:
-          feed-url: https://getdoks.org/blog/index.xml
-          readme-section: feed
--- a/.gitignore
+++ b/.gitignore
@ -1,6 +1,7 @@
-functions
+bin
 node_modules
 public
 resources
 # Local Netlify folder
 .netlify
+TODO
--- a/.npmrc
+++ b/.npmrc
@ -1 +0,0 @@
-hugo_bin_build_tags = "extended"
--- a/.versionrc.json
+++ b/.versionrc.json
@ -1,27 +0,0 @@
-{
-  "types": [
-    {"type": "feat", "section": "Features"},
-    {"type": "fix", "section": "Bug Fixes"},
-    {"type": "chore", "hidden": true},
-    {"type": "deps", "section": "Dependencies"},
-    {"type": "docs", "section": "Documentation"},
-    {"type": "style", "hidden": true},
-    {"type": "refactor", "hidden": true},
-    {"type": "perf", "hidden": true},
-    {"type": "test", "hidden": true}
-  ],
-  "bumpFiles": [
-    {
-      "filename": "package.json",
-      "type": "json"
-    },
-    {
-      "filename": "package-lock.json",
-      "type": "json"
-    },
-    {
-      "filename": "data/doks.json",
-      "type": "json"
-    }
-  ]
-}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,6 +1,145 @@
-# Changelog
+### Changelog

-All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+All notable changes to this project will be documented in this file. Dates are displayed in UTC.
+
+Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
+
+#### [v0.3.3](https://github.com/h-enk/doks/compare/v0.3.2...v0.3.3)
+
+- 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)
+- content: remove temporary mermaid examples [`e4fc868`](https://github.com/h-enk/doks/commit/e4fc8681623685bf20f8e6568a69b5b6c4d81d16)
+- fix: update package-lock.json [`3797685`](https://github.com/h-enk/doks/commit/379768538d584676d40c99432f8b49f20c2c0562)
+
+#### [v0.3.2](https://github.com/h-enk/doks/compare/v0.3.1...v0.3.2)
+
+> 5 July 2021
+
+- feat: update netlify workflow [`692efd6`](https://github.com/h-enk/doks/commit/692efd66692173a651c4b91d2ff3bc5f584a8a31)
+
+#### [v0.3.1](https://github.com/h-enk/doks/compare/v0.3.0...v0.3.1)
+
+> 2 July 2021
+
+- fix: update theme.toml [`a0d4a76`](https://github.com/h-enk/doks/commit/a0d4a76d2a8187eae70b394905889a37e14b7a47)
+- fix: update permalinks setting [`4894d96`](https://github.com/h-enk/doks/commit/4894d96a69eb2c70b7059c90ee02594286b1122e)
+
+#### [v0.3.0](https://github.com/h-enk/doks/compare/v0.2.3...v0.3.0)
+
+> 25 June 2021
+
+- ✨ Adds video shortcode [`#244`](https://github.com/h-enk/doks/pull/244)
+- ✨ Adds collapsible sidebar as an option [`#243`](https://github.com/h-enk/doks/pull/243)
+- 🐛 Fixes scrollbar in code blocks [`#231`](https://github.com/h-enk/doks/pull/231)
+- fix: add crossorigin attribute to webmanifest link [`#306`](https://github.com/h-enk/doks/pull/306)
+- ✨ Uses inline shortcode in alerts for large texts [`#235`](https://github.com/h-enk/doks/pull/235)
+- Fix issue where page bundle images fail to load [`#238`](https://github.com/h-enk/doks/pull/238)
+- Replace highlightBlock with highlightElement [`#240`](https://github.com/h-enk/doks/pull/240)
+- replaces possible backslash for win environments [`#217`](https://github.com/h-enk/doks/pull/217)
+- feat: add hugo-installer + auto-changelog [`93f7598`](https://github.com/h-enk/doks/commit/93f7598f872509805287b24d7d06fa3e6f745fbf)
+- deps: bump versions to latest [`33ccb71`](https://github.com/h-enk/doks/commit/33ccb717cb4b2fe859e79df36597cfa01cad08a9)
+- deps: bump versions to latest [`7b2bea1`](https://github.com/h-enk/doks/commit/7b2bea1bff290389b2a098d13100e1c4dfa3a4d5)
+
+#### [v0.2.3](https://github.com/h-enk/doks/compare/v0.2.2...v0.2.3)
+
+> 2 April 2021
+
+- feat: update for netlify dev support [`10d0b45`](https://github.com/h-enk/doks/commit/10d0b45203003a43727521dc9f5c35e655500309)
+- content: update for doks v0.2.3 [`b505b24`](https://github.com/h-enk/doks/commit/b505b2412bc59fa271f7bf33ca6c835f66ca2936)
+- content: update readme [`52cd0c6`](https://github.com/h-enk/doks/commit/52cd0c6e6c902381c5775d5c719c5cdf1ff64111)
+
+#### [v0.2.2](https://github.com/h-enk/doks/compare/v0.2.1...v0.2.2)
+
+> 26 March 2021
+
+- deps: bump bootstrap to 5.0.0-beta3 [`f76e68e`](https://github.com/h-enk/doks/commit/f76e68e832737c5fbc2421f164988767dddc5d99)
+- feat: update default highlight style [`28a3b39`](https://github.com/h-enk/doks/commit/28a3b39fb9653db3f627cd55d610f28ed95860b3)
+- chore(release): 0.2.2 [`c332b4d`](https://github.com/h-enk/doks/commit/c332b4d315431da4d94e98f0c2e6649fea0c8219)
+
+#### [v0.2.1](https://github.com/h-enk/doks/compare/v0.2.0...v0.2.1)
+
+> 18 March 2021
+
+- chore(release): 0.2.1 [`41f9d0e`](https://github.com/h-enk/doks/commit/41f9d0ee49077b3440c119eaf6c5d955f56127f2)
+- fix: update package.json for npm workflow [`83b2c0e`](https://github.com/h-enk/doks/commit/83b2c0e002e09aabc0f4b1e8fb30353151707d8b)
+- Updating the README! [`d36a6cc`](https://github.com/h-enk/doks/commit/d36a6ccaa8a99aa022cca641eb4d4d6f126ef8a4)
+
+#### [v0.2.0](https://github.com/h-enk/doks/compare/v0.1.6...v0.2.0)
+
+> 18 March 2021
+
+- Add katex math typesetting [`#181`](https://github.com/h-enk/doks/pull/181)
+- Add highlight.js as an option [`#180`](https://github.com/h-enk/doks/pull/180)
+- Add optional breadcrumb trail [`#166`](https://github.com/h-enk/doks/pull/166)
+- Add table support in markdown [`#165`](https://github.com/h-enk/doks/pull/165)
+- Update bootstrap to 5.0.0-beta2 [`#164`](https://github.com/h-enk/doks/pull/164)
+- chore(release): 0.2.0 [`c80a5da`](https://github.com/h-enk/doks/commit/c80a5dab1dead3108011793a0777dc6d94a47d70)
+- ux: improve contrast text searchbar dark mode [`57fee17`](https://github.com/h-enk/doks/commit/57fee179f8b8ee0c45d90456703230e1e7edeb84)
+- Updating the README! [`884d44e`](https://github.com/h-enk/doks/commit/884d44e0f7e3187a6431b8bdf8501993a6f80ac8)
+
+#### [v0.1.6](https://github.com/h-enk/doks/compare/v0.1.5...v0.1.6)
+
+> 1 March 2021
+
+- build(deps-dev): bump postcss from 8.2.4 to 8.2.6 [`#132`](https://github.com/h-enk/doks/pull/132)
+- deps: bump versions to latest [`857906c`](https://github.com/h-enk/doks/commit/857906c69b2d9779abd158dd88c1057f84c8eb6f)
+- chore(release): 0.1.6 [`a83f039`](https://github.com/h-enk/doks/commit/a83f0392638c0c8fb775187a4b251c106921cef9)
+- scripts: add release:dry-run script [`686d0eb`](https://github.com/h-enk/doks/commit/686d0eb40da535c6907cf97c1d5c9353a1535b8c)
+
+#### [v0.1.5](https://github.com/h-enk/doks/compare/v0.1.4...v0.1.5)
+
+> 12 January 2021
+
+- chore(release): 0.1.5 [`ff85a1d`](https://github.com/h-enk/doks/commit/ff85a1daecfff2aa21ddbc425c8d67b5e4cd6d9b)
+- Updating the README! [`d50ed1e`](https://github.com/h-enk/doks/commit/d50ed1ec0f37d178e1aef133d280b91d5473cd14)
+- feat: add hugo extended as a dependency [`258224c`](https://github.com/h-enk/doks/commit/258224c7880911c709f80e478cacf265fafbbb5c)
+
+#### [v0.1.4](https://github.com/h-enk/doks/compare/v0.1.3...v0.1.4)
+
+> 3 December 2020
+
+- deps: bump versions to latest [`7ce56d0`](https://github.com/h-enk/doks/commit/7ce56d0a362c5099c0a6c50f6ad0f1c7ba969218)
+- deps: bump versions to latest [`0377b0d`](https://github.com/h-enk/doks/commit/0377b0de75a3cc8027bd255961f6d0c184d82575)
+- deps: bump versions [`c254be6`](https://github.com/h-enk/doks/commit/c254be61754071600665858d6a7d2e2fbc105af3)
+
+#### [v0.1.3](https://github.com/h-enk/doks/compare/v0.1.2...v0.1.3)
+
+> 17 November 2020
+
+- chore(release): 0.1.3 [`abaaaef`](https://github.com/h-enk/doks/commit/abaaaef6d6056133737d285868e8f8c748b6cc46)
+- deps: update doks version file [`d326669`](https://github.com/h-enk/doks/commit/d326669c1d170cd5a76df1faafea472f3132fdf5)
+- deps: add doks version file [`f8dcfbe`](https://github.com/h-enk/doks/commit/f8dcfbeebfda5fef533b9b7bc2463fa0dfafd5fa)
+
+#### [v0.1.2](https://github.com/h-enk/doks/compare/v0.1.1...v0.1.2)
+
+> 17 November 2020
+
+- deps: bump versions [`6ce5813`](https://github.com/h-enk/doks/commit/6ce5813543417f2328846a78b971201d7611781d)
+- style: update fonts+ [`41d63a2`](https://github.com/h-enk/doks/commit/41d63a2528f574e3934d58fb30811ce9fb879798)
+- chore(release): 0.1.2 [`646f0c8`](https://github.com/h-enk/doks/commit/646f0c87f0ee5a9a97d357753e86647519f3d1ed)
+
+#### [v0.1.1](https://github.com/h-enk/doks/compare/v0.1.0...v0.1.1)
+
+> 10 November 2020
+
+- deps: reinstall [`6705f4b`](https://github.com/h-enk/doks/commit/6705f4bbc4da4cd967e7165ab3681137014633bb)
+- docs: update content [`c4c83eb`](https://github.com/h-enk/doks/commit/c4c83eb9b68674553c6a7e988249a808d75250b4)
+- docs: update reasons [`1cec423`](https://github.com/h-enk/doks/commit/1cec4237b395ff306b765d47b29b8410c2884921)
+
+#### v0.1.0
+
+> 6 November 2020
+
+- build(deps-dev): bump postcss from 8.1.4 to 8.1.6 [`#18`](https://github.com/h-enk/doks/pull/18)
+- Bump lodash from 4.17.15 to 4.17.20 [`#8`](https://github.com/h-enk/doks/pull/8)
+- [Security] Bump elliptic from 6.5.2 to 6.5.3 [`#6`](https://github.com/h-enk/doks/pull/6)
+- [Security] Bump lazysizes from 5.2.0 to 5.2.1 [`#7`](https://github.com/h-enk/doks/pull/7)
+- test: update ci [`d16a94d`](https://github.com/h-enk/doks/commit/d16a94db755deff04e56da96f4e84d339a094236)
+- deps: bump postcss [`12411c3`](https://github.com/h-enk/doks/commit/12411c38a98fb362ff348e5c151fcb7813e8691e)
+- Initial commit [`67f0a6e`](https://github.com/h-enk/doks/commit/67f0a6e623169a99a71c51c2434e14041c9211aa)
+
+<!-- auto-changelog-above -->

 ### [0.2.3](https://github.com/h-enk/doks/compare/v0.2.2...v0.2.3) (2021-04-02)

--- a/3
+++ b/3
@ -1,6 +1,7 @@
 MIT License

-Copyright (c) 2020-2021 Gridsome, Henk Verlinde
+Copyright (c) 2018-present, Gridsome
+Copyright (c) 2020-present, Henk Verlinde

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
--- a/README.md
+++ b/README.md
@ -27,7 +27,7 @@
    <img src="https://img.shields.io/github/workflow/status/h-enk/doks/Hyas%20CI/master?style=flat-square" alt="GitHub Workflow Status (branch)">
  </a>
  <a href="https://app.netlify.com/sites/doks/deploys">
-    <img src="https://img.shields.io/netlify/895a161c-86be-48a2-8c57-a8c5d68cd1a4?style=flat-square" alt="Netlify">
+    <img src="https://img.shields.io/netlify/8a1009d5-88ac-413e-96ef-3f928674a083?style=flat-square" alt="Netlify">
  </a>
 </p>

@ -117,9 +117,3 @@ 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)
-
-## Blog
-<!--START_SECTION:feed-->
-* [Doks v0.2](https:&#x2F;&#x2F;getdoks.org&#x2F;blog&#x2F;doks-v0.2&#x2F;)
-* [Say hello to Doks 👋](https:&#x2F;&#x2F;getdoks.org&#x2F;blog&#x2F;say-hello-to-doks&#x2F;)
-<!--END_SECTION:feed-->
--- a/assets/js/clipboard.js
+++ b/assets/js/clipboard.js
@ -1,8 +1,27 @@
 import Clipboard from 'clipboard';

-var clipboard = new Clipboard('.btn-clipboard');
+var pre = document.getElementsByTagName('pre');
+
+for (var i = 0; i < pre.length; ++ i)
+{
+  var element = pre[i];
+  var mermaid = element.getElementsByClassName('language-mermaid')[0];
+
+  if (mermaid == null) {
+    element.insertAdjacentHTML('afterbegin', '<button class="btn btn-copy"></button>');
+  }
+}
+
+var clipboard = new Clipboard('.btn-copy', {
+
+  target: function(trigger) {
+    return trigger.nextElementSibling;
+  },
+
+});

 clipboard.on('success', function(e) {
+
    /*
    console.info('Action:', e.action);
    console.info('Text:', e.text);
--- a/assets/js/highlight.js
+++ b/assets/js/highlight.js
@ -3,7 +3,7 @@ import hljs from 'highlight.js/lib/core';
 import javascript from 'highlight.js/lib/languages/javascript';
 import json from 'highlight.js/lib/languages/json';
 import bash from 'highlight.js/lib/languages/bash';
-import htmlbars from 'highlight.js/lib/languages/htmlbars';
+import xml from 'highlight.js/lib/languages/xml';
 import ini from 'highlight.js/lib/languages/ini';
 import yaml from 'highlight.js/lib/languages/yaml';
 import markdown from 'highlight.js/lib/languages/markdown';
@ -11,14 +11,14 @@ import markdown from 'highlight.js/lib/languages/markdown';
 hljs.registerLanguage('javascript', javascript);
 hljs.registerLanguage('json', json);
 hljs.registerLanguage('bash', bash);
-hljs.registerLanguage('html', htmlbars);
+hljs.registerLanguage('html', xml);
 hljs.registerLanguage('ini', ini);
 hljs.registerLanguage('toml', ini);
 hljs.registerLanguage('yaml', yaml);
 hljs.registerLanguage('md', markdown);

 document.addEventListener('DOMContentLoaded', () => {
-  document.querySelectorAll('pre code').forEach((block) => {
+  document.querySelectorAll('pre code:not(.language-mermaid)').forEach((block) => {
    hljs.highlightElement(block);
  });
 });
--- a/assets/js/index.js
+++ b/assets/js/index.js
@ -64,37 +64,54 @@ Source:

 (function(){

-  var index = new FlexSearch({
-    preset: 'score',
-    cache: true,
-    doc: {
+  var index = new FlexSearch.Document({
+    tokenize: "forward",
+    cache: 100,
+    document: {
      id: 'id',
-        field: [
-          'title',
-          'description',
-          'content',
-        ],
      store: [
-          'href',
-          'title',
-          'description',
+        "href", "title", "description"
      ],
-    },
+      index: ["title", "description", "content"]
+    }
  });

+
+  // Not yet supported: https://github.com/nextapps-de/flexsearch#complex-documents
+
+  /*
  var docs = [
    {{ range $index, $page := (where .Site.Pages "Section" "docs") -}}
      {
        id: {{ $index }},
-        href: "{{ .RelPermalink | relURL }}",
+        href: "{{ .Permalink }}",
        title: {{ .Title | jsonify }},
        description: {{ .Params.description | jsonify }},
        content: {{ .Content | jsonify }}
      },
    {{ end -}}
  ];
+  */

-  index.add(docs);
+  // https://discourse.gohugo.io/t/range-length-or-last-element/3803/2
+
+  {{ $list := (where .Site.Pages "Section" "docs") -}}
+  {{ $len := (len $list) -}}
+
+  index.add(
+    {{ range $index, $element := $list -}}
+      {
+        id: {{ $index }},
+        href: "{{ .Permalink }}",
+        title: {{ .Title | jsonify }},
+        description: {{ .Params.description | jsonify }},
+        content: {{ .Content | jsonify }}
+      })
+      {{ if ne (add $index 1) $len -}}
+        .add(
+      {{ end -}}
+    {{ end -}}
+  ;

  userinput.addEventListener('input', show_results, true);
  suggestions.addEventListener('click', accept_suggestion, true);
@ -102,13 +119,13 @@ Source:
  function show_results(){

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

    suggestions.classList.remove('d-none');

-    results.forEach(function(page) {
+    results.forEach(function(results) {

      entry = document.createElement('div');

@ -118,9 +135,11 @@ Source:
      t = entry.querySelector('span:first-child'),
      d = entry.querySelector('span:nth-child(2)');

-      a.href = page.href;
-      t.textContent = page.title;
-      d.textContent = page.description;
+      // 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);

--- a/assets/js/mermaid.js
+++ b/assets/js/mermaid.js
@ -0,0 +1,11 @@
+import mermaid from 'mermaid/dist/mermaid';
+
+var config = {
+  theme: 'default',
+  fontFamily: '"Jost", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";',
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+  mermaid.initialize(config);
+  mermaid.init(undefined, '.language-mermaid');
+});
--- a/assets/lambda/.gitignore
+++ b/assets/lambda/.gitignore
--- a/assets/scss/app.scss
+++ b/assets/scss/app.scss
@ -8,7 +8,7 @@
@import "bootstrap/scss/bootstrap";

 /** Import highlight.js */
-// @import "highlight.js/scss/dracula";
+// @import "highlight.js/scss/github-dark-dimmed";

 /** Import KaTeX */
@import "katex/dist/katex";
@ -17,14 +17,14 @@
@import "common/fonts";
@import "common/global";
@import "common/dark";
-@import "components/doks";
-// @import "components/syntax";
-@import "components/code";
@import "components/alerts";
@import "components/buttons";
+@import "components/code";
+@import "components/syntax";
@import "components/comments";
@import "components/forms";
@import "components/images";
+@import "components/mermaid";
@import "components/search";
@import "components/tables";
@import "layouts/footer";
--- a/assets/scss/common/_dark.scss
+++ b/assets/scss/common/_dark.scss
@ -98,6 +98,10 @@ body.dark .page-links a {
  color: $body-color-dark;
 }

+body.dark .btn-toggle-nav a {
+  color: $body-color-dark;
+}
+
 body.dark .showcase-meta a {
  color: $body-color-dark;
 }
@ -114,6 +118,43 @@ body.dark .page-links a:hover {
  color: $link-color-dark;
 }

+body.dark .btn-toggle {
+  color: $body-color-dark;
+  background-color: transparent;
+  border: 0;
+}
+
+body.dark .btn-toggle:hover,
+body.dark .btn-toggle:focus {
+  color: $body-color-dark;
+}
+
+body.dark .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");
+  transition: transform 0.35s ease;
+  transform-origin: 0.5em 50%;
+  margin-bottom: 0.125rem;
+}
+
+body.dark .btn-toggle[aria-expanded="true"] {
+  color: $body-color-dark;
+}
+
+body.dark .btn-toggle[aria-expanded="true"]::before {
+  transform: rotate(90deg);
+}
+
+body.dark .btn-toggle-nav a:hover,
+body.dark .btn-toggle-nav a:focus {
+  color: $link-color-dark;
+}
+
+body.dark .btn-toggle-nav a.active {
+  color: $link-color-dark;
+}
+
 body.dark .navbar-light .navbar-text a {
  color: $navbar-dark-active-color;
 }
@ -188,12 +229,7 @@ body.dark .docs-navigation {
 }

 body.dark pre code::-webkit-scrollbar-thumb {
-  background: $border-dark;
-}
-
-body.dark code:not(.hljs) {
-  background: $body-overlay-dark;
-  color: $body-color-dark;
+  background: $gray-400;
 }

 body.dark pre code:hover {
@ -202,7 +238,17 @@ body.dark pre code:hover {
 }

 body.dark pre code::-webkit-scrollbar-thumb:hover {
-  background: $border-dark;
+  background: $gray-500;
+}
+
+body.dark code:not(.hljs):not(.language-mermaid) {
+  background: $body-overlay-dark;
+  color: $body-color-dark;
+}
+
+body.dark .mermaid,
+body.dark pre code.language-mermaid {
+  background: $white;
 }

 body.dark blockquote {
--- a/assets/scss/common/_variables.scss
+++ b/assets/scss/common/_variables.scss
@ -24,6 +24,10 @@ $pink-500: #d32e9d;

 $primary: $purple;

+$color-btn-bg: $pink-500;
+$color-btn-border: darken($pink-500, 5%);
+$color-btn-text: $white;
+
 // Options
 //
 // Quickly modify global styling by enabling or disabling optional features.
--- a/assets/scss/components/_alerts.scss
+++ b/assets/scss/components/_alerts.scss
@ -61,3 +61,9 @@
 .alert .alert-link:focus {
  text-decoration: none;
 }
+
+.alert code {
+  background: darken($beige, 5%);
+  color: $black;
+  padding: 0.25rem 0.5rem;
+}
--- a/assets/scss/components/_buttons.scss
+++ b/assets/scss/components/_buttons.scss
@ -50,42 +50,136 @@ body.dark .toggle-dark {
  display: none;
 }

-.btn-clipboard {
+pre {
+  position: relative;
+}
+
+@include media-breakpoint-down(md) {
+  .btn-copy {
    display: none;
  }
+}
+
+.btn-copy {
+  transition: opacity 0.3s ease-in-out;
+  opacity: 0;
+  position: absolute;
+  right: 0.25rem;
+  top: 0.25rem;
+  z-index: 10;
+  font-family: $font-family-sans-serif;
+  font-size: $font-size-sm;
+  padding: 0.25rem 0.5rem;
+  color: $color-btn-text;
+  background-color: $color-btn-bg;
+  border-color: $color-btn-border;
+}
+
+.btn-copy:hover {
+  color: $color-btn-text;
+  background-color: lighten($color-btn-bg, 5%);
+  border-color: lighten($color-btn-border, 15%);
+}
+
+.btn-copy:focus {
+  color: $color-btn-text;
+  background-color: $color-btn-bg;
+  border-color: lighten($color-btn-border, 15%);
+  box-shadow: none;
+}
+
+.btn-copy:active,
+.btn-copy.active {
+  color: $color-btn-text;
+  background-color: $color-btn-bg;
+  border-color: lighten($color-btn-border, 15%);
+}
+
+.btn-copy:active:focus,
+.btn-copy.active:focus {
+  box-shadow: none;
+}

@include media-breakpoint-up(md) {
-  .doks-clipboard {
-    position: relative;
-    float: right;
-  }
-
-  .btn-clipboard {
-    position: absolute;
-    top: 1rem;
-    right: 0.25rem;
-    z-index: 10;
-    display: block;
-    padding: 0.25rem 0.5rem;
-    font-size: $font-size-sm;
+  pre:hover .btn-copy {
+    opacity: 1;
  }
 }

-.copy-status::after {
+.btn-copy::after {
  content: "Copy";
  display: block;
+  color: $color-btn-text;
+}
+
+.btn-copy:hover::after {
+  content: "Copy";
+  display: block;
+  color: $color-btn-text;
+}
+
+.btn-copy:focus::after,
+.btn-copy:active::after {
+  content: "Copied";
+  display: block;
+  color: $color-btn-text;
+}
+
+.collapsible-sidebar {
+  margin: 2.125rem 0;
+}
+
+.btn-toggle {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.5rem 0.25rem 0;
+  font-weight: $headings-font-weight;
+  font-size: $font-size-base;
+  text-transform: uppercase;
+  color: $body-color;
+  background-color: transparent;
+  border: 0;
+}
+
+.btn-toggle:hover,
+.btn-toggle:focus {
+  color: $body-color;
+  background-color: transparent;
+  outline: 0;
+  box-shadow: none;
+}
+
+.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%2829, 45, 53, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+  transition: transform 0.35s ease;
+  transform-origin: 0.5em 50%;
+  margin-bottom: 0.125rem;
+}
+
+.btn-toggle[aria-expanded="true"] {
  color: $body-color;
 }

-.copy-status:hover::after {
-  content: "Copy";
-  display: block;
-  color: $pink-500;
+.btn-toggle[aria-expanded="true"]::before {
+  transform: rotate(90deg);
 }

-.copy-status:focus::after,
-.copy-status:active::after {
-  content: "Copied";
-  display: block;
-  color: $pink-500;
+.btn-toggle-nav a {
+  display: inline-flex;
+  padding: 0.1875rem 0.5rem;
+  margin-top: 0.125rem;
+  margin-left: 1.25rem;
+  text-decoration: none;
+}
+
+.btn-toggle-nav a:hover,
+.btn-toggle-nav a:focus {
+  background-color: transparent;
+  color: $link-color;
+}
+
+.btn-toggle-nav a.active {
+  color: $link-color;
 }
--- a/assets/scss/components/_code.scss
+++ b/assets/scss/components/_code.scss
@ -49,14 +49,18 @@ pre code::-webkit-scrollbar {
 }

 pre code::-webkit-scrollbar-thumb {
-  background: $gray-200;
+  background: $gray-400;
 }

 pre code:hover {
  scrollbar-width: thin;
-  scrollbar-color: $gray-200 transparent;
+  scrollbar-color: $gray-500 transparent;
 }

 pre code::-webkit-scrollbar-thumb:hover {
-  background: $gray-200;
+  background: $gray-500;
+}
+
+code.language-mermaid {
+  background: none;
 }
--- a/assets/scss/components/_doks.scss
+++ b/assets/scss/components/_doks.scss
@ -1,62 +0,0 @@
-/*
-
-Doks — based on Ascetic by (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
-
-*/
-
-.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 0.5em;
-  background: $beige;
-  color: $body-color;
-}
-
-.hljs-string,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-symbol,
-.hljs-bullet,
-.hljs-section,
-.hljs-addition,
-.hljs-attribute,
-.hljs-link {
-  color: $pink-500;
-}
-
-.hljs-comment,
-.hljs-quote,
-.hljs-meta,
-.hljs-deletion {
-  color: #888;
-}
-
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-section,
-.hljs-name,
-.hljs-type,
-.hljs-strong {
-  font-weight: bold;
-}
-
-.hljs-emphasis {
-  font-style: italic;
-}
-
-body.dark .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 {
-  color: $blue-300;
-}
--- a/assets/scss/components/_mermaid.scss
+++ b/assets/scss/components/_mermaid.scss
@ -0,0 +1,8 @@
+.mermaid {
+  margin: 1.5rem 0;
+  padding: 1.5rem;
+}
+
+.mermaid svg {
+  height: auto;
+}
--- a/assets/scss/components/_syntax.scss
+++ b/assets/scss/components/_syntax.scss
@ -1,131 +1,62 @@
-/*!
- * GitHub Light v0.5.0
- * Copyright (c) 2012 - 2017 GitHub, Inc.
- * Licensed under MIT (https://github.com/primer/github-syntax-theme-generator/blob/master/LICENSE)
+/*
+
+Based on Ascetic by (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
+
 */

- .c1,
- .c /* comment, punctuation.definition.comment, string.comment */ {
-   color: #6a737d;
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1.25rem 1.5rem;
+  background: $beige;
+  color: $body-color;
 }

- .v /* variable */,
- .smw /* sublimelinter.mark.warning */ {
-   color: #e36209;
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-section,
+.hljs-addition,
+.hljs-attribute,
+.hljs-link {
+  color: $pink-500;
 }

- // .c1 /* constant, entity.name.constant, variable.other.constant, variable.language, support, meta.property-name, support.constant, support.variable, meta.module-reference, markup.raw, meta.diff.header, meta.output */,
- .s .v /* string variable */ {
-   color: #005cc5;
+.hljs-comment,
+.hljs-quote,
+.hljs-meta,
+.hljs-deletion {
+  color: #888;
 }

- .e /* entity */,
- .en /* entity.name */ {
-   color: #6f42c1;
- }
- 
- .smi /* variable.parameter.function, storage.modifier.package, storage.modifier.import, storage.type.java, variable.other */,
- .s .s1 /* string source */ {
-   color: #24292e;
- }
- 
- .ent /* entity.name.tag, markup.quote */ {
-   color: #22863a;
- }
- 
- .k /* keyword, storage, storage.type */ {
-   color: #d73a49;
- }
- 
- .s /* string */,
- .pds /* punctuation.definition.string, source.regexp, string.regexp.character-class */,
- .s .pse .s1 /* string punctuation.section.embedded source */,
- .sr /* string.regexp */,
- .sr .cce /* string.regexp constant.character.escape */,
- .sr .sre /* string.regexp source.ruby.embedded */,
- .sr .sra /* string.regexp string.regexp.arbitrary-repitition */ {
-   color: #032f62;
- }
- 
- .bu /* invalid.broken, invalid.deprecated, invalid.unimplemented, message.error, brackethighlighter.unmatched, sublimelinter.mark.error */ {
-   color: #b31d28;
- }
- 
- .ii /* invalid.illegal */ {
-   color: #fafbfc;
-   background-color: #b31d28;
- }
- 
- .c2 /* carriage-return */ {
-   color: #fafbfc;
-   background-color: #d73a49;
- }
- 
- .c2::before /* carriage-return */ {
-   content: "^M";
- }
- 
- .sr .cce /* string.regexp constant.character.escape */ {
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-section,
+.hljs-name,
+.hljs-type,
+.hljs-strong {
  font-weight: bold;
-   color: #22863a;
 }

- .ml /* markup.list */ {
-   color: #735c0f;
- }
- 
- .mh /* markup.heading */,
- .mh .en /* markup.heading entity.name */,
- .ms /* meta.separator */ {
-   font-weight: bold;
-   color: #005cc5;
- }
- 
- .mi /* markup.italic */ {
+.hljs-emphasis {
  font-style: italic;
-   color: #24292e;
 }

- .mb /* markup.bold */ {
-   font-weight: bold;
-   color: #24292e;
+body.dark .hljs {
+  background: $body-overlay-dark;
+  color: $body-color-dark;
 }

- .md /* markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted */ {
-   color: #b31d28;
-   background-color: #ffeef0;
+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 {
+  color: $blue-300;
 }
- 
- .mi1 /* markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted */ {
-   color: #22863a;
-   background-color: #f0fff4;
- }
- 
- .mc /* markup.changed, punctuation.definition.changed */ {
-   color: #e36209;
-   background-color: #ffebda;
- }
- 
- .mi2 /* markup.ignored, markup.untracked */ {
-   color: #f6f8fa;
-   background-color: #005cc5;
- }
- 
- .mdr /* meta.diff.range */ {
-   font-weight: bold;
-   color: #6f42c1;
- }
- 
- .ba /* brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote */ {
-   color: #586069;
- }
- 
- .sg /* sublimelinter.gutter-mark */ {
-   color: #959da5;
- }
- 
- .corl /* constant.other.reference.link, string.other.link */ {
-   text-decoration: underline;
-   color: #032f62;
- }
- 
--- a/config/_default/config.toml
+++ b/config/_default/config.toml
@ -73,10 +73,14 @@ rel  = "sitemap"
 [taxonomies]
  contributor = "contributors"

-[RelPermalinks]
+[permalinks]
  blog = "/blog/:title/"

 [module]
+  [module.hugoVersion]
+    extended = true
+    min = "0.80.0"
+    max = ""
  [[module.mounts]]
    source = "assets"
    target = "assets"
@ -89,3 +93,6 @@ rel  = "sitemap"
  [[module.mounts]]
    source = "node_modules/katex"
    target = "assets/js/vendor/katex"
+  [[module.mounts]]
+    source = "node_modules/mermaid"
+    target = "assets/js/vendor/mermaid"
--- a/config/_default/params.toml
+++ b/config/_default/params.toml
@ -6,20 +6,34 @@ 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."

-## Open Graph + Twitter Cards
+## Open Graph
 images = ["doks.png"]
-twitterSite = "henkverlinde"
-twitterCreator = "henkverlinde"
-facebookAuthor = "verlinde.henk"
-facebookPublisher = "verlinde.henk"
 ogLocale = "en_US"
+domainTLD = "doks.netlify.app"
+titleHome = "Doks Theme"
+
+## Twitter Cards
+twitterSite = "@getdoks"
+twitterCreator = "@henkverlinde"

 ## JSON-LD
+# schemaType = "Person"
 schemaType = "Organization"
+schemaName = "Doks"
+schemaAuthor = "Henk Verlinde"
+schemaAuthorTwitter = "https://twitter.com/henkverlinde"
+schemaAuthorLinkedIn = "https://www.linkedin.com/in/henkverlinde/"
+schemaAuthorGitHub = "https://github.com/h-enk"
+schemaLocale = "en-US"
 schemaLogo = "logo-doks.png"
-schemaTwitter = "https://twitter.com/henkverlinde"
-schemaLinkedIn = "https://www.linkedin.com/in/henkverlinde/"
-schemaGitHub = "https://github.com/h-enk"
+schemaLogoWidth = 512
+schemaLogoHeight = 512
+schemaImage = "doks.png"
+schemaImageWidth = 1280
+schemaImageHeight = 640
+schemaTwitter = "https://twitter.com/getdoks"
+schemaLinkedIn = ""
+schemaGitHub = "https://github.com/h-enk/doks"
 schemaSection = "blog"

 ## Sitelinks Search Box
@ -37,6 +51,7 @@ lqipWidth = "20x"

 # 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>"
+copyRight = "Copyright (c) 2020-2021 Henk Verlinde"

 # Alert
 alert = false
@ -52,7 +67,8 @@ editPage = false
  instantPage = true
  flexSearch = true
  darkMode = true
-  bootStrapJs = false
+  bootStrapJs = true
  breadCrumb = false
  highLight = true
  kaTex = false
+  collapsibleSidebar = false
--- a/config/postcss.config.js
+++ b/config/postcss.config.js
@ -18,9 +18,13 @@ module.exports = {
        'tr',
        'th',
        'td',
+        'h5',
+        'alert-link',
        ...whitelister([
-          './assets/scss/components/_doks.scss',
+          './assets/scss/components/_buttons.scss',
          './assets/scss/components/_code.scss',
+          './assets/scss/components/_diagrams.scss',
+          './assets/scss/components/_syntax.scss',
          './assets/scss/components/_search.scss',
          './assets/scss/common/_dark.scss',
          './node_modules/katex/dist/katex.css',
--- a/content/docs/help/how-to-update.md
+++ b/content/docs/help/how-to-update.md
@ -13,7 +13,7 @@ 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>." >}}
+{{< 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

--- a/content/docs/prologue/commands.md
+++ b/content/docs/prologue/commands.md
@ -13,14 +13,12 @@ weight: 130
 toc: true
 ---

-{{< alert icon="💡" text="You can change the commands in the scripts section of `./package.json`." >}}
+{{< alert icon="💡" text="You can change the commands in the scripts section of `./package.json`." />}}

 ## create

 Create new content for your site:

-{{< btn-copy text="npm run create" >}}
-
 ```bash
 npm run create [path] [flags]
 ```
@ -31,8 +29,6 @@ See also the Hugo docs: [hugo new](https://gohugo.io/commands/hugo_new/).

 Check scripts, styles, and markdown for errors:

-{{< btn-copy text="npm run lint" >}}
-
 ```bash
 npm run lint
 ```
@ -41,8 +37,6 @@ npm run lint

 Check scripts for errors:

-{{< btn-copy text="npm run lint:scripts" >}}
-
 ```bash
 npm run lint:scripts [-- --fix]
 ```
@ -51,8 +45,6 @@ npm run lint:scripts [-- --fix]

 Check styles for errors:

-{{< btn-copy text="npm run lint:styles" >}}
-
 ```bash
 npm run lint:styles [-- --fix]
 ```
@ -61,8 +53,6 @@ npm run lint:styles [-- --fix]

 Check markdown for errors:

-{{< btn-copy text="npm run lint:markdown" >}}
-
 ```bash
 npm run lint:markdown [-- --fix]
 ```
@ -71,8 +61,6 @@ npm run lint:markdown [-- --fix]

 Delete temporary directories:

-{{< btn-copy text="npm run clean" >}}
-
 ```bash
 npm run clean
 ```
@ -81,8 +69,6 @@ npm run clean

 Start local development server:

-{{< btn-copy text="npm run start" >}}
-
 ```bash
 npm run start
 ```
@ -91,8 +77,6 @@ npm run start

 Build production website:

-{{< btn-copy text="npm run build" >}}
-
 ```bash
 npm run build
 ```
@ -101,8 +85,6 @@ npm run build

 Build Lambda functions:

-{{< btn-copy text="npm run build:functions" >}}
-
 ```bash
 npm run build:functions
 ```
@ -111,8 +93,6 @@ npm run build:functions

 Build production website including draft and future content:

-{{< btn-copy text="npm run build:preview" >}}
-
 ```bash
 npm run build:preview
 ```
--- a/content/docs/prologue/introduction.md
+++ b/content/docs/prologue/introduction.md
@ -19,13 +19,13 @@ There are two main ways to get started with Doks:

 ### Tutorial

-{{< alert icon="👉" text="The Tutorial is intended for novice to intermediate users." >}}
+{{< 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." >}}
+{{< 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" >}})

--- a/content/docs/prologue/quick-start.md
+++ b/content/docs/prologue/quick-start.md
@ -34,40 +34,30 @@ Not quite sure? Use the Doks child theme.

 #### Doks child theme

-{{< btn-copy text="git clone https://github.com/h-enk/doks-child-theme.git my-doks-site" >}}
-
 ```bash
 git clone https://github.com/h-enk/doks-child-theme.git my-doks-site
 ```

 #### Doks starter theme

-{{< btn-copy text="git clone https://github.com/h-enk/doks.git my-doks-site" >}}
-
 ```bash
 git clone https://github.com/h-enk/doks.git my-doks-site
 ```

 ### Change directories

-{{< btn-copy text="cd my-doks-site" >}}
-
 ```bash
 cd my-doks-site
 ```

 ### Install dependencies

-{{< btn-copy text="npm install" >}}
-
 ```bash
 npm install
 ```

 ### Start development server

-{{< btn-copy text="npm run start" >}}
-
 ```bash
 npm run start
 ```
--- a/data/doks.json
+++ b/data/doks.json
@ -1,4 +0,0 @@
-{
-  "name": "doks",
-  "version": "0.2.3"
-}
--- a/data/hyas.json
+++ b/data/hyas.json
@ -1,4 +0,0 @@
-{
-  "name": "hyas",
-  "version": "1.3.5"
-}
--- a/assets/lambda/hi-from-lambda.js
+++ b/assets/lambda/hi-from-lambda.js
--- a/layouts/_default/section.sitemap.xml
+++ b/layouts/_default/section.sitemap.xml
@ -4,19 +4,19 @@
  {{ range $i, $e := .Data.Pages -}}
    {{ if ne .Params.sitemap_exclude true }}
    <url>
-      <loc>{{ .RelPermalink }}</loc>{{ if not .Lastmod.IsZero }}
+      <loc>{{ .Permalink }}</loc>{{ if not .Lastmod.IsZero }}
      <lastmod>{{ safeHTML ( .Lastmod.Format "2006-01-02T15:04:05-07:00" ) }}</lastmod>{{ end }}{{ with .Sitemap.ChangeFreq }}
      <changefreq>{{ . }}</changefreq>{{ end }}{{ if ge .Sitemap.Priority 0.0 }}
      <priority>{{ .Sitemap.Priority }}</priority>{{ end }}{{ if .IsTranslated }}{{ range .Translations }}
      <xhtml:link
                  rel="alternate"
                  hreflang="{{ .Lang }}"
-                  href="{{ .RelPermalink }}"
+                  href="{{ .Permalink }}"
                  />{{ end }}
      <xhtml:link
                  rel="alternate"
                  hreflang="{{ .Lang }}"
-                  href="{{ .RelPermalink }}"
+                  href="{{ .Permalink }}"
                  />{{ end }}
    </url>
    {{ end -}}
@ -25,19 +25,19 @@
    {{ range $i, $e := .Data.Pages -}}
      {{ if ne .Params.sitemap_exclude true -}}
      <url>
-        <loc>{{ .RelPermalink }}</loc>{{ if not .Lastmod.IsZero }}
+        <loc>{{ .Permalink }}</loc>{{ if not .Lastmod.IsZero }}
        <lastmod>{{ safeHTML ( .Lastmod.Format "2006-01-02T15:04:05-07:00" ) }}</lastmod>{{ end }}{{ with .Sitemap.ChangeFreq }}
        <changefreq>{{ . }}</changefreq>{{ end }}{{ if ge .Sitemap.Priority 0.0 }}
        <priority>{{ .Sitemap.Priority }}</priority>{{ end }}{{ if .IsTranslated }}{{ range .Translations }}
        <xhtml:link
                    rel="alternate"
                    hreflang="{{ .Lang }}"
-                    href="{{ .RelPermalink }}"
+                    href="{{ .Permalink }}"
                    />{{ end }}
        <xhtml:link
                    rel="alternate"
                    hreflang="{{ .Lang }}"
-                    href="{{ .RelPermalink }}"
+                    href="{{ .Permalink }}"
                    />{{ end }}
      </url>
      {{ end -}}
--- a/layouts/docs/single.html
+++ b/layouts/docs/single.html
@ -30,7 +30,11 @@
 			{{ if .Site.Params.editPage -}}
 				{{ partial "main/edit-page.html" . }}
 			{{ end -}}
+			{{ 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,7 +2,7 @@
  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'
+  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'
  X-Frame-Options: SAMEORIGIN
  Referrer-Policy: strict-origin
  Feature-Policy: geolocation 'self'
--- a/layouts/index.html
+++ b/layouts/index.html
@ -7,7 +7,7 @@
    <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{{ .Site.Data.doks.version }}</a></p>
+      <p class="meta">Open-source MIT Licensed. <a href="https://github.com/h-enk/doks">GitHub v{{ $data := getJSON "https://raw.githubusercontent.com/h-enk/doks/master/package.json" }}{{ $data.version }}</a></p>
    </div>
  </div>
 </section>
--- a/layouts/index.redirects
+++ b/layouts/index.redirects
@ -1,6 +1,6 @@
 # redirects for Netlify - https://www.netlify.com/docs/redirects/
 {{- range $p := .Site.Pages -}}
 {{- range .Aliases }}
-{{ . }} {{ $p.RelRelPermalink -}}
+{{ . }} {{ $p.RelPermalink -}}
 {{- end }}
 {{- end -}}
--- a/layouts/partials/footer/script-footer.html
+++ b/layouts/partials/footer/script-footer.html
@ -10,6 +10,8 @@
 {{ $katex := resources.Get "js/vendor/katex/dist/katex.js" -}}
 {{ $katexAutoRender := resources.Get "js/vendor/katex/dist/contrib/auto-render.js" -}}

+{{ $mermaid := resources.Get "js/mermaid.js" | js.Build -}}
+
 {{ $app := resources.Get "js/app.js" -}}

 {{ $slice := slice $app -}}
@ -33,7 +35,7 @@
 {{ end -}}

 {{ if .Site.Params.options.flexSearch -}}
-  {{ $flexSearch := resources.Get "js/vendor/flexsearch/dist/flexsearch.min.js" -}}
+  {{ $flexSearch := resources.Get "js/vendor/flexsearch/dist/flexsearch.bundle.js" -}}
  {{ $slice = $slice | append $flexSearch -}}
 {{ end -}}

@ -63,6 +65,9 @@
    <script src="{{ $katexAutoRender.RelPermalink }}" onload="renderMathInElement(document.body);" defer></script>
  {{ end -}}
  <script src="{{ $js.RelPermalink }}" defer></script>
+  {{ with .Params.mermaid -}}
+    <script src="{{ $mermaid.RelPermalink }}" defer></script>
+  {{ end -}}
  {{ if .Site.Params.options.flexSearch -}}
    <script src="{{ $index.RelPermalink }}" defer></script>
  {{ end -}}
@ -73,6 +78,7 @@
  {{ $highlight := $highlight | minify | fingerprint "sha512" -}}
  {{ $katex := $katex | minify | fingerprint "sha512" -}}
  {{ $katexAutoRender := $katexAutoRender | minify | fingerprint "sha512" -}}
+  {{ $mermaid := $mermaid | minify | fingerprint "sha512" -}}
  {{ if .Site.Params.options.bootStrapJs -}}
    <script src="{{ $bs.RelPermalink }}" integrity="{{ $bs.Data.Integrity }}" crossorigin="anonymous" defer></script>
  {{ end -}}
@ -84,6 +90,9 @@
    <script src="{{ $katexAutoRender.RelPermalink }}" integrity="{{ $katexAutoRender.Data.Integrity }}" crossorigin="anonymous" defer></script>
  {{ end -}}
  <script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous" defer></script>
+  {{ 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>
  {{ end -}}
--- a/layouts/partials/head/favicons.html
+++ b/layouts/partials/head/favicons.html
@ -1,5 +1,5 @@
 <meta name="theme-color" content="{{ $.Site.Params.themeColor }}">
-<link rel="apple-touch-icon" sizes="180x180" href="{{ "apple-touch-icon.png" | relURL }}">
-<link rel="icon" type="image/png" sizes="32x32" href="{{ "favicon-32x32.png" | relURL }}">
-<link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon-16x16.png" | relURL }}">
-<link rel="manifest" href="{{ "site.webmanifest" | relURL }}">
+<link rel="apple-touch-icon" sizes="180x180" href="{{ "apple-touch-icon.png" | absURL }}">
+<link rel="icon" type="image/png" sizes="32x32" href="{{ "favicon-32x32.png" | absURL }}">
+<link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon-16x16.png" | absURL }}">
+<link rel="manifest" crossorigin="use-credentials" href="{{ "site.webmanifest" | absURL }}">
--- a/layouts/partials/head/opengraph.html
+++ b/layouts/partials/head/opengraph.html
@ -1,30 +1,15 @@
+<meta property="og:locale" content="{{ .Site.Params.ogLocale }}">
+<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}">
 <meta property="og:title" content="{{ .Title }}">
 <meta property="og:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}">
-<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}">
 {{ if $.Scratch.Get "paginator" -}}
  {{ $paginator := .Paginate (where .Site.RegularPages.ByDate.Reverse "Section" "blog" ) -}}
-  <meta property="og:url" content="{{ .Paginator.URL | relURL }}">
+  <meta property="og:url" content="{{ .Paginator.URL | absURL }}">
 {{ else -}}
-  <meta property="og:url" content="{{ .RelPermalink }}">
-{{ end -}}
-
-{{ with $.Params.images -}}
-  {{ range first 6 . -}}
-  <meta property="og:image" content="{{ $.RelPermalink }}{{ . }}">
-  {{ end -}}
-{{ else -}}
-  {{ $images := $.Resources.ByType "image" -}}
-  {{ $featured := $images.GetMatch "*feature*" -}}
-  {{ if not $featured -}}
-    {{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}
-  {{ end -}}
-  {{ with $featured -}}
-    <meta property="og:image" content="{{ $featured.RelPermalink }}"/>
-  {{ else -}}
-    {{ with $.Site.Params.images -}}
-      <meta property="og:image" content="{{ index . 0 | relURL }}"/>
-    {{ end -}}
+  <meta property="og:url" content="{{ .Permalink }}">
 {{ end -}}
+{{ with .Site.Params.title -}}
+  <meta property="og:site_name" content="{{ . }}">
 {{ end -}}

 {{ $iso8601 := "2006-01-02T15:04:05-07:00" -}}
@ -43,51 +28,42 @@
  {{ end -}}
 {{ end -}}

+{{ if eq .Kind "home" -}}
+  {{ .Scratch.Set "title" .Site.Params.titleHome -}}
+{{ else -}}
+  {{ .Scratch.Set "title" .Title -}}
+{{ end -}}
+
+{{ with $.Params.images -}}
+  {{ range first 6 . -}}
+  <meta property="og:image" content="{{ $.Permalink }}{{ . }}">
+  {{ end -}}
+{{ else -}}
+  {{ $images := $.Resources.ByType "image" -}}
+  {{ $featured := $images.GetMatch "*feature*" -}}
+  {{ if not $featured -}}
+    {{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}
+  {{ end -}}
+  {{ with $featured -}}
+    <meta property="og:image" content="{{ $featured.Permalink }}"/>
+  {{ else -}}
+    {{ with $.Site.Params.images -}}
+      <meta property="og:image" content="{{ index . 0 | absURL }}"/>
+      <meta property="og:image:alt" content="{{ $.Site.Params.title }}">
+    {{ end -}}
+  {{ end -}}
+{{ end -}}
+
+{{ with $.Site.Params.images -}}
+  {{ $.Scratch.Set "primaryImage" (index . 0 | absURL) -}}
+{{ end -}}
+
 {{ with .Params.audio -}}
-  <meta property="og:audio" content="{{ . }}">
-{{ end -}}
-{{ with .Params.locale -}}
-  <meta property="og:locale" content="{{ . }}">
-{{ end -}}
-{{ with .Site.Params.title -}}
-  <meta property="og:site_name" content="{{ . }}">
+  <meta property="og:audio" content="{{ . | absURL }}">
 {{ end -}}
+
 {{ with .Params.videos -}}
  {{ range . -}}
-    <meta property="og:video" content="{{ . | relURL }}">
+    <meta property="og:video" content="{{ . | absURL }}">
  {{ end -}}
 {{ end -}}
-
-{{ $RelPermalink := .RelPermalink -}}
-{{ $siteSeries := .Site.Taxonomies.series -}}
-{{ with .Params.series -}}
-  {{ range $name := . -}}
-    {{ $series := index $siteSeries $name -}}
-    {{ range $page := first 6 $series.Pages -}}
-      {{ if ne $page.RelPermalink $RelPermalink -}}
-        <meta property="og:see_also" content="{{ $page.RelPermalink }}">
-      {{ end -}}
-    {{ end -}}
-  {{ end -}}
-{{ end -}}
-
-{{ if .IsPage -}}
-  {{ range .Site.Authors -}}
-    {{ with .Social.facebook -}}
-      <meta property="article:author" content="https://www.facebook.com/{{ . }}">
-    {{ end -}}
-    {{ with .Site.Social.facebook -}}
-      <meta property="article:publisher" content="https://www.facebook.com/{{ . }}">
-    {{ end -}}
-    <meta property="article:section" content="{{ .Section }}">
-    {{ with .Params.tags -}}
-      {{ range first 6 . -}}
-        <meta property="article:tag" content="{{ . }}">
-      {{ end -}}
-    {{ end -}}
-  {{ end -}}
-{{ end -}}
-
-{{ with .Site.Social.facebook_admin -}}
-  <meta property="fb:admins" content="{{ . }}">
-{{ end -}}
--- a/layouts/partials/head/resource-hints.html
+++ b/layouts/partials/head/resource-hints.html
@ -1,6 +1,6 @@
-<link rel="preload" as="font" href="{{ "fonts/vendor/jost/jost-v4-latin-regular.woff2" | relURL }}" type="font/woff2" crossorigin>
-<link rel="preload" as="font" href="{{ "fonts/vendor/jost/jost-v4-latin-700.woff2" | relURL }}" type="font/woff2" crossorigin>
+<link rel="preload" as="font" href="{{ "fonts/vendor/jost/jost-v4-latin-regular.woff2" | absURL }}" type="font/woff2" crossorigin>
+<link rel="preload" as="font" href="{{ "fonts/vendor/jost/jost-v4-latin-700.woff2" | absURL }}" type="font/woff2" crossorigin>
 {{ if .Site.Params.options.kaTex -}}
-  <link rel="preload" as="font" href="{{ "fonts/KaTeX_Main-Regular.woff2" | relURL }}" type="font/woff2" crossorigin>
-  <link rel="preload" as="font" href="{{ "fonts/KaTeX_Math-Italic.woff2" | relURL }}" type="font/woff2" crossorigin>
+  <link rel="preload" as="font" href="{{ "fonts/KaTeX_Main-Regular.woff2" | absURL }}" type="font/woff2" crossorigin>
+  <link rel="preload" as="font" href="{{ "fonts/KaTeX_Math-Italic.woff2" | absURL }}" type="font/woff2" crossorigin>
 {{ end -}}
--- a/layouts/partials/head/seo.html
+++ b/layouts/partials/head/seo.html
@ -23,28 +23,22 @@
 {{ end -}}

 {{ if $.Scratch.Get "paginator" }}
-  <link rel="canonical" href="{{ .Paginator.URL | relURL }}">
+  <link rel="canonical" href="{{ .Paginator.URL | absURL }}">
  {{ if .Paginator.HasPrev -}}
-    <link rel="prev" href="{{ .Paginator.Prev.URL | relURL }}">
+    <link rel="prev" href="{{ .Paginator.Prev.URL | absURL }}">
  {{ end -}}
  {{ if .Paginator.HasNext -}}
-    <link rel="next" href="{{ .Paginator.Next.URL | relURL }}">
+    <link rel="next" href="{{ .Paginator.Next.URL | absURL }}">
  {{ end -}}
 {{ else  -}}
-  <link rel="canonical" href="{{ .RelPermalink }}">
+  <link rel="canonical" href="{{ .Permalink }}">
 {{ end -}}

-{{ partial "head/twitter_cards.html" . }}
-<meta name="twitter:site" content="@{{ .Site.Params.twitterSite }}">
-<meta name="twitter:creator" content="@{{ .Site.Params.twitterCreator }}">
-
 {{ partial "head/opengraph.html" . }}
-<meta property="article:publisher" content="https://www.facebook.com/{{ .Site.Params.facebookPublisher }}">
-<meta property="article:author" content="https://www.facebook.com/{{ .Site.Params.facebookAuthor }}">
-<meta property="og:locale" content="{{ .Site.Params.ogLocale }}">
+{{ partial "head/twitter_cards.html" . }}

 {{ range .AlternativeOutputFormats -}}
-  <link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .RelPermalink | safeURL }}">
+  <link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}">
 {{ end -}}

 {{ partial "head/structured-data.html" . }}
--- a/layouts/partials/head/structured-data.html
+++ b/layouts/partials/head/structured-data.html
@ -1,89 +1,10 @@
-{{ if .IsHome -}}
-  {{ if eq .Site.Params.schemaType "Organization" -}}
-    <script type="application/ld+json">
-    {
-      "@context": "https://schema.org",
-      "@type": "Organization",
-      "url": "{{ "/" | relURL }}",
-      "name": "{{ .Site.Params.title }}",
-      "logo": "{{ "/" | relURL }}{{ .Site.Params.schemaLogo }}",
-      "sameAs": [
-        "{{ .Site.Params.schemaTwitter | safeURL }}",
-        "{{ .Site.Params.schemaLinkedIn | safeURL }}",
-        "{{ .Site.Params.schemaGitHub | safeURL }}"
-      ]
-    }
-    </script>
-  {{ end -}}
-  {{ if eq .Site.Params.schemaType "Person" -}}
-    <script type="application/ld+json">
-    {
-      "@context": "https://schema.org",
-      "@type": "Person",
-      "url": "{{ "/" | relURL }}",
-      "name": "{{ .Site.Params.title }}",
-      "sameAs": [
-        "{{ .Site.Params.schemaTwitter | safeURL }}",
-        "{{ .Site.Params.schemaLinkedIn | safeURL }}",
-        "{{ .Site.Params.schemaGitHub | safeURL }}"
-      ]
-    }
-    </script>
-  {{ end -}}
-  {{ if .Site.Params.siteLinksSearchBox -}}
-    <script type="application/ld+json">
-    {
-      "@context": "https://schema.org",
-      "@type": "WebSite",
-      "url": "{{ "/" | relURL }}",
-      "potentialAction": {
-        "@type": "SearchAction",
-        "target": "{{ "/" | relURL }}?q={search_term_string}",
-        "query-input": "required name=search_term_string"
-      }
-    }
-    </script>
-  {{ end -}}
-{{ end -}}
-{{ if .IsPage -}}
-  {{ if eq .Section .Site.Params.schemaSection -}}
-    <script type="application/ld+json">
-    {
-      "@context": "https://schema.org",
-      "@type": "Article",
-      "mainEntityOfPage": {
-        "@type": "WebPage",
-        "@id": "{{ .RelPermalink }}"
-      },
-      "headline": "{{ .Title }}",
-      "image": [{{ range $i, $e := .Params.images }}{{ if $i }}, {{ end }}{{ printf "%s%s" $.RelPermalink $e }}{{ end }}],
-      "datePublished": "{{ .PublishDate.Format "2006-01-02T15:04:05CET" }}",
-      "dateModified": "{{ .Lastmod.Format "2006-01-02T15:04:05CET" }}",
-      "author": {
-        "@type": "{{ .Site.Params.schemaType }}",
-        "name": "{{ .Site.Params.title }}"
-      },
-      "publisher": {
-        "@type": "{{ .Site.Params.schemaType }}",
-        "name": "{{ .Site.Params.title }}",
-        {{ if eq .Site.Params.schemaType "Organization" -}}
-        "logo": {
-          "@type": "ImageObject",
-          "url": "{{ "/" | relURL }}{{ .Site.Params.schemaLogo }}"
-        }
-        {{ end -}}
-      },
-      "description": "{{ .Description }}"
-    }
-    </script>
-  {{ end -}}
-{{ end -}}
+{{ $baseURL := "/" | absURL -}}

 {{ $dot := . -}}
 {{ $dot.Scratch.Set "path" "" -}}
 {{ $dot.Scratch.Set "breadcrumb" slice -}}

-{{ $url := replace .RelPermalink ( printf "%s" .Site.BaseURL) "" -}}
+{{ $url := replace .Permalink ( printf "%s" .Site.BaseURL) "" -}}
 {{ $.Scratch.Add "path" .Site.BaseURL -}}

 {{ $.Scratch.Add "breadcrumb" (slice (dict "url" .Site.BaseURL "name" "home" "position" 1 )) -}}
@ -97,13 +18,193 @@

 <script type="application/ld+json">
 {
-  "@context": "http://schema.org",
+  "@context": "https://schema.org",
+  "@graph": [
+    {
+      {{ if eq .Site.Params.schemaType "Organization" -}}
+        "@type": "Organization",
+        "@id": {{ print $baseURL "#/schema/organization/1" }},
+      {{ else -}}
+        "@type": "Person",
+        "@id": {{ print $baseURL "#/schema/person/1" }},
+      {{ end -}}
+      "name": "{{ .Site.Params.schemaName }}",
+      "url": {{ print $baseURL }},
+      "sameAs": [
+        {{ with .Site.Params.schemaTwitter -}}
+        {{ . }}
+        {{ end -}}
+        {{ with .Site.Params.schemaLinkedIn -}}
+        , {{ . }}
+        {{ end -}}
+        {{ with .Site.Params.schemaGitHub -}}
+        , {{ . }}
+        {{ end -}}
+      ],
+      {{ if eq .Site.Params.schemaType "Organization" -}}
+        "logo": {
+          "@type": "ImageObject",
+          "@id": {{ print $baseURL "#/schema/image/1"}},
+          "url": {{ print $baseURL .Site.Params.schemaLogo }},
+          "width": {{ .Site.Params.schemaLogoWidth }},
+          "height": {{ .Site.Params.schemaLogoHeight }},
+          "caption": "{{ .Site.Params.schemaName }}"
+        },
+        "image": {
+          "@id": {{ print $baseURL "#/schema/image/1" }}
+        }
+      {{ else -}}
+        "image": {
+          "@type": "ImageObject",
+          "@id": {{ print $baseURL "#/schema/image/1"}},
+          "url": {{ print $baseURL .Site.Params.schemaImage }},
+          "width": {{ .Site.Params.schemaImageWidth }},
+          "height": {{ .Site.Params.schemaImageHeight }},
+          "caption": "{{ .Site.Params.schemaName }}"
+        }
+      {{ end -}}
+    },
+    {
+      "@type": "WebSite",
+      "@id": {{ print $baseURL "#/schema/website/1" }},
+      "url": {{ print $baseURL }},
+      "name": "{{ .Site.Params.title }}",
+      "description": "{{ .Site.Params.description }}",
+      {{ if eq .Site.Params.schemaType "Organization" -}}
+        "publisher": {
+          "@id": {{ print $baseURL "#/schema/organization/1" }}
+        }
+      {{ else -}}
+        "publisher": {
+          "@id": {{ print $baseURL "#/schema/person/1" }}
+        }
+      {{ end -}}
+    },
+    {
+      {{ if and (ne .Kind "taxonomy") (ne .Kind "term") -}}
+        "@type": "WebPage",
+      {{ else -}}
+        "@type": "CollectionPage",
+      {{ end -}}
+      "@id": {{ .Permalink }},
+      "url": {{ .Permalink }},
+      "name": "{{ .Title }}",
+      "description": "{{ .Description }}",
+      "isPartOf": {
+        "@id": {{ print $baseURL "#/schema/website/1" }}
+      },
+      {{ if eq .Site.Params.schemaType "Organization" -}}
+        "about": {
+          "@id": {{ print $baseURL "#/schema/organization/1" }}
+        },
+      {{ else -}}
+        "about": {
+          "@id": {{ print $baseURL "#/schema/person/1" }}
+        },
+      {{ end -}}
+      "datePublished": "{{ .PublishDate.Format "2006-01-02T15:04:05CET" }}",
+      "dateModified": "{{ .Lastmod.Format "2006-01-02T15:04:05CET" }}",
+      "breadcrumb": {
+        "@id": {{ print .Permalink "#/schema/breadcrumb/1" }}
+      },
+      "primaryImageOfPage": {
+        "@id": {{ print .Permalink "#/schema/image/2" }}
+      },
+      "inLanguage": "{{ .Site.Params.schemaLocale }}",
+      "potentialAction": [{
+        "@type": "ReadAction", "target": [{{ .Permalink }}]
+      }]
+    },
+    {
      "@type": "BreadcrumbList",
-  "itemListElement": [{{ range $.Scratch.Get "breadcrumb" }}{{ if ne .position 1 }},{{ end }}{
+      "@id": {{ print .Permalink "#/schema/breadcrumb/1" }},
+      "name": "Breadcrumbs",
+      "itemListElement": [{{ $list := $.Scratch.Get "breadcrumb" }}{{ $len := (len $list) }}{{ range $index, $element := $list }}{{ if ne .position 1 }},{{ end }}{
        "@type": "ListItem",
        "position": {{ .position }},
-        "name": "{{ .name | humanize | title }}",
-        "item": "{{ .url }}"
+        "item": {
+          {{ if ne (add $index 1) $len -}}
+          "@type": "WebPage",
+          "@id": {{ .url }},
+          "url": {{ .url }},
+          "name": "{{ .name | humanize | title }}"
+          {{ else -}}
+          "@id": {{ .url }}
+          {{ end -}}
+        }
        }{{ end }}]
+    },
+
+    {{ if and (eq .Kind "page") (or (eq .Section "blog") (eq .Section "docs") (eq .Section "tutorial") (eq .Section "showcase")) -}}
+    {
+      "@context": "https://schema.org",
+      "@graph": [
+        {
+          "@type": "Article",
+          "@id": {{ print $baseURL "#/schema/article/1" }},
+          "headline": "{{ .Title }}",
+          "description": "{{ .Description }}",
+          "isPartOf": {
+            "@id": {{ .Permalink }}
+          },
+          "mainEntityOfPage": {
+            "@id": {{ .Permalink }}
+          },
+          "datePublished": "{{ .PublishDate.Format "2006-01-02T15:04:05CET" }}",
+          "dateModified": "{{ .Lastmod.Format "2006-01-02T15:04:05CET" }}",
+          "author": {
+            "@id": {{ print $baseURL "#/schema/person/2" }}
+          },
+          {{ if eq .Site.Params.schemaType "Organization" -}}
+            "publisher": {
+              "@id": {{ print $baseURL "#/schema/organization/1" }}
+            },
+          {{ else -}}
+            "publisher": {
+              "@id": {{ print $baseURL "#/schema/person/1" }}
+            },
+          {{ end -}}
+          "image": {
+            "@id": {{ print .Permalink "#/schema/image/2" }}
+          }
+        }
+      ]
+    },
+    {
+      "@context": "https://schema.org",
+      "@graph": [
+        {
+          "@type": "Person",
+          "@id": {{ print $baseURL "#/schema/person/2" }},
+          "name": {{ .Site.Params.schemaAuthor }},
+          "sameAs": [
+            {{ with .Site.Params.schemaAuthorTwitter -}}
+            {{ . }}
+            {{ end -}}
+            {{ with .Site.Params.schemaAuthorLinkedIn -}}
+            , {{ . }}
+            {{ end -}}
+            {{ with .Site.Params.schemaAuthorGitHub -}}
+            , {{ . }}
+            {{ end -}}
+          ]
+        }
+      ]
+    },
+    {{ end -}}
+    {
+      "@context": "https://schema.org",
+      "@graph": [
+        {
+          "@type": "ImageObject",
+          "@id": {{ print .Permalink "#/schema/image/2" }},
+          "url": {{ $.Scratch.Get "primaryImage" }},
+          "contentUrl": {{ $.Scratch.Get "primaryImage" }},
+          "caption": "{{ .Title }}"
+        }
+      ]
+    }
+
+  ]
 }
 </script>
--- a/layouts/partials/head/stylesheet.html
+++ b/layouts/partials/head/stylesheet.html
@ -1,11 +1,11 @@
 {{ 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.RelPermalink }}">
+  <link rel="stylesheet" href="{{ $css.Permalink }}">
 {{ 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") -}}
  {{ $secureCSS := $css | resources.Fingerprint "sha512" -}}
-  <link rel="stylesheet" href="{{ $secureCSS.RelPermalink }}" integrity="{{ $secureCSS.Data.Integrity }}" crossorigin="anonymous">
+  <link rel="stylesheet" href="{{ $secureCSS.Permalink }}" integrity="{{ $secureCSS.Data.Integrity }}" crossorigin="anonymous">
 {{ end -}}
 <noscript><style>img.lazyload { display: none; }</style></noscript>
--- a/layouts/partials/head/twitter_cards.html
+++ b/layouts/partials/head/twitter_cards.html
@ -1,6 +1,10 @@
-{{ with $.Params.images -}}
 <meta name="twitter:card" content="summary_large_image">
-  <meta name="twitter:image" content="{{ $.RelPermalink }}{{ index . 0 }}">
+<meta name="twitter:site" content="{{ .Site.Params.twitterSite }}">
+<meta name="twitter:creator" content="{{ .Site.Params.twitterCreator }}">
+<meta name="twitter:title" content="{{ .Title }}">
+<meta name="twitter:description" content="{{ .Description }}">
+{{ with $.Params.images -}}
+  <meta name="twitter:image" content="{{ $.Permalink }}{{ index . 0 }}">
 {{ else -}}
  {{ $images := $.Resources.ByType "image" -}}
  {{ $featured := $images.GetMatch "*feature*" -}}
@ -8,26 +12,13 @@
    {{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" -}}
  {{ end -}}
  {{ with $featured -}}
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:image" content="{{ $featured.RelPermalink }}">
+    <meta name="twitter:image" content="{{ $featured.Permalink }}">
  {{ else -}}
    {{ with $.Site.Params.images -}}
-      <meta name="twitter:card" content="summary_large_image">
-      <meta name="twitter:image" content="{{ index . 0 | relURL }}">
+      <meta name="twitter:image" content="{{ index . 0 | absURL }}">
    {{ else -}}
      <meta name="twitter:card" content="summary">
    {{ end -}}
  {{ end -}}
 {{ end -}}
-
-<meta name="twitter:title" content="{{ .Title }}">
-<meta name="twitter:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}">
-{{ with .Site.Social.twitter -}}
-  <meta name="twitter:site" content="@{{ . }}">
-{{ end -}}
-
-{{ range .Site.Authors -}}
-  {{ with .twitter -}}
-    <meta name="twitter:creator" content="@{{ . }}">
-  {{ end -}}
-{{ end -}}
+<meta name="twitter:image:alt" content="{{ .Title }}">
--- a/layouts/partials/sidebar/docs-menu.html
+++ b/layouts/partials/sidebar/docs-menu.html
@ -1,3 +1,28 @@
+{{ if .Site.Params.options.collapsibleSidebar -}}
+  <ul class="list-unstyled collapsible-sidebar">
+  {{ $currentPage := . -}}
+  {{ range $index, $element := .Site.Menus.docs -}}
+  {{- $active := or ($currentPage.IsMenuCurrent "docs" .) ($currentPage.HasMenuCurrent "docs" .) -}}
+  {{- $active = or $active (eq $currentPage.Section .Identifier) -}}
+    <li class="mb-1">
+      <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#section-{{ .Identifier }}" aria-expanded="{{ if $active }}true{{ else }}false{{ end }}">
+        {{ .Name }}
+      </button>
+      {{ if .HasChildren -}}
+      <div class="collapse{{ if $active }} show{{ end }}" id="section-{{ .Identifier }}">
+        <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+        {{ range .Children -}}
+          {{- $active := or ($currentPage.IsMenuCurrent "docs" .) ($currentPage.HasMenuCurrent "docs" .) -}}
+          {{- $active = or $active (eq $currentPage.Section .Identifier) -}}
+          <li><a class="docs-link rounded{{ if $active }} active{{ end }}" href="{{ .URL | relURL }}">{{ .Name }}</a></li>
+        {{ end -}}
+        </ul>
+      </div>
+      {{ end -}}
+    </li>
+  {{ end -}}
+  </ul>
+{{ else -}}
  {{ $currentPage := . -}}
  {{ range .Site.Menus.docs -}}
    <h3>{{ .Name }}</h3>
@ -11,3 +36,4 @@
    </ul>
    {{ end -}}
  {{ end -}}
+{{ end -}}
--- a/layouts/rss.xml
+++ b/layouts/rss.xml
@ -2,7 +2,7 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>{{ if eq  .Title  .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{.}} on {{ end }}{{ .Site.Title }}{{ end }}</title>
-    <link>{{ .RelPermalink }}</link>
+    <link>{{ .Permalink }}</link>
    <description>Recent content {{ if ne  .Title  .Site.Title }}{{ with .Title }}in {{.}} {{ end }}{{ end }}on {{ .Site.Title }}</description>
    <generator>Hugo -- gohugo.io</generator>{{ with .Site.LanguageCode }}
    <language>{{.}}</language>{{end}}{{ with .Site.Author.email }}
@ -11,15 +11,15 @@
    <copyright>{{.}}</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 />" .RelPermalink .MediaType | safeHTML }}
+        {{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
    {{ end }}
    {{ range .Pages }}{{ if ne .Params.feed_exclude true }}
    <item>
      <title>{{ .Title }}</title>
-      <link>{{ .RelPermalink }}</link>
+      <link>{{ .Permalink }}</link>
      <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
      {{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}}
-      <guid>{{ .RelPermalink }}</guid>
+      <guid>{{ .Permalink }}</guid>
      <description>{{ .Summary | html }}</description>
    </item>
    {{ end }}{{ end }}
--- a/layouts/shortcodes/btn-copy.html
+++ b/layouts/shortcodes/btn-copy.html
@ -1,5 +0,0 @@
-{{ if .Site.Params.options.clipBoard -}}
-<div class="doks-clipboard">
-  <button class="btn-clipboard btn btn-link" data-clipboard-text="{{ .Get "text" | safeHTML }}"><span class="copy-status"></span></button>
-</div>
-{{ end -}}
--- a/layouts/shortcodes/mermaid.html
+++ b/layouts/shortcodes/mermaid.html
@ -0,0 +1,8 @@
+{{ if .Page.Params.mermaid -}}
+  <div class="mermaid{{ with .Get "class" }} {{ . }}{{ end }}">
+    {{ $data := replaceRE "(^\\s+```)" "" .Inner -}}
+    {{ replaceRE "(```\\s+$)" "" $data -}}
+  </div>
+{{ else -}}
+  {{ errorf "Failed to process mermaid shortcode: %s. Set mermaid to true in page front matter." .Position }}
+{{ end -}}
--- a/layouts/shortcodes/video.html
+++ b/layouts/shortcodes/video.html
@ -0,0 +1,11 @@
+<div class="ratio ratio-{{ with .Get "ratio" }}{{.}}{{ end }}">
+  <video{{ with .Get "attributes" }} {{ . | safeHTMLAttr }}{{ end }}>
+    {{ with .Get "webm-src" -}}
+    <source src="{{ . | relURL }}" type="video/webm">
+    {{ end -}}
+    {{ with .Get "mp4-src" -}}
+    <source src="{{ . | relURL }}" type="video/mp4">
+    {{ end -}}
+    Sorry, your browser doesn't support embedded videos.
+  </video>
+</div>
--- a/layouts/sitemap.xml
+++ b/layouts/sitemap.xml
@ -3,19 +3,19 @@
  xmlns:xhtml="http://www.w3.org/1999/xhtml">
  {{ range .Data.Pages }}{{ if ne .Params.sitemap_exclude true }}
  <url>
-    <loc>{{ .RelPermalink }}</loc>{{ if not .Lastmod.IsZero }}
+    <loc>{{ .Permalink }}</loc>{{ if not .Lastmod.IsZero }}
    <lastmod>{{ safeHTML ( .Lastmod.Format "2006-01-02T15:04:05-07:00" ) }}</lastmod>{{ end }}{{ with .Sitemap.ChangeFreq }}
    <changefreq>{{ . }}</changefreq>{{ end }}{{ if ge .Sitemap.Priority 0.0 }}
    <priority>{{ .Sitemap.Priority }}</priority>{{ end }}{{ if .IsTranslated }}{{ range .Translations }}
    <xhtml:link
                rel="alternate"
                hreflang="{{ .Lang }}"
-                href="{{ .RelPermalink }}"
+                href="{{ .Permalink }}"
                />{{ end }}
    <xhtml:link
                rel="alternate"
                hreflang="{{ .Lang }}"
-                href="{{ .RelPermalink }}"
+                href="{{ .Permalink }}"
                />{{ end }}
  </url>
  {{ end }}{{ end }}
--- a/netlify.toml
+++ b/netlify.toml
@ -3,27 +3,28 @@
  functions = "functions"

 [build.environment]
-  NODE_VERSION = "15.5.1"
-  NPM_VERSION = "7.3.0"
+  NODE_VERSION = "16.3.0"
+  NPM_VERSION = "7.16.0"
+  HUGO_VERSION = "0.84.4"

 [context.production]
-  command = "npx hugo --gc --minify && npx netlify-lambda build assets/lambda"
+  command = "hugo --gc --minify"

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

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

 [context.next]
-  command = "npx hugo --gc --minify && npx netlify-lambda build assets/lambda"
+  command = "hugo --gc --minify"

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

 [dev]
  framework = "#custom"
-  command = "npx rimraf public resources functions && npx hugo server --bind=0.0.0.0 --disableFastRender"
+  command = "shx rm -rf public resources && hugo server --bind=0.0.0.0 --disableFastRender"
  targetPort = 1313
  port = 8888
  publish = "public"
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,10 +1,7 @@
 {
  "name": "@hyas/doks",
  "description": "Doks theme",
-  "version": "0.2.3",
-  "hugo-bin": {
-    "buildTags": "extended"
-  },
+  "version": "0.3.3",
  "browserslist": [
    "defaults"
  ],
@ -14,53 +11,55 @@
    "access": "public"
  },
  "scripts": {
-    "init": "rimraf .git && git init -b main",
-    "create": "hugo new",
+    "init": "shx rm -rf .git && git init -b main",
+    "create": "exec-bin bin/hugo/hugo new",
    "prestart": "npm run clean",
-    "start": "hugo server --bind=0.0.0.0 --disableFastRender",
+    "start": "exec-bin bin/hugo/hugo server --bind=0.0.0.0 --disableFastRender",
    "prebuild": "npm run clean",
-    "build": "hugo --gc --minify && npm run build:functions",
-    "build:functions": "netlify-lambda build assets/lambda",
+    "build": "exec-bin bin/hugo/hugo --gc --minify",
    "build:preview": "npm run build -D -F",
-    "clean": "rimraf public resources functions",
+    "clean": "shx rm -rf public resources",
+    "clean:install": "shx rm -rf package-lock.json bin node_modules ",
    "lint": "npm run -s lint:scripts && npm run -s lint:styles && npm run -s lint:markdown",
-    "lint:scripts": "eslint assets/js assets/lambda config",
+    "lint:scripts": "eslint assets/js config functions",
    "lint:styles": "stylelint \"assets/scss/**/*.{css,sass,scss,sss,less}\"",
-    "lint:markdown": "markdownlint *.md content/**/*.md",
-    "release": "standard-version",
-    "release:dry-run": "standard-version --dry-run",
-    "server": "hugo server",
+    "lint:markdown": "markdownlint \"*.md\" \"content/**/*.md\"",
+    "server": "exec-bin bin/hugo/hugo server",
    "test": "npm run -s lint",
    "env": "env",
    "precheck": "npm version",
-    "check": "hugo version",
-    "copy:katex-fonts": "shx cp ./node_modules/katex/dist/fonts/* ./static/fonts/"
+    "check": "exec-bin bin/hugo/hugo version",
+    "copy:katex-fonts": "shx cp ./node_modules/katex/dist/fonts/* ./static/fonts/",
+    "postinstall": "hugo-installer --version otherDependencies.hugo --extended",
+    "version": "auto-changelog -p && git add CHANGELOG.md"
  },
  "devDependencies": {
-    "@babel/cli": "^7.13",
-    "@babel/core": "^7.13",
-    "@babel/preset-env": "^7.13",
+    "@babel/cli": "^7.14",
+    "@babel/core": "^7.14",
+    "@babel/preset-env": "^7.14",
    "@fullhuman/postcss-purgecss": "^4.0",
+    "auto-changelog": "^2.3.0",
    "autoprefixer": "^10.2",
-    "bootstrap": "^5.0.0-beta3",
+    "bootstrap": "^5.0",
    "clipboard": "^2.0",
-    "eslint": "^7.23",
-    "flexsearch": "^0.6",
-    "highlight.js": "^10.7",
-    "hugo-bin": "^0.70",
+    "eslint": "^7.29",
+    "exec-bin": "^1.0.0",
+    "hugo-installer": "^3.0.1",
+    "flexsearch": "^0.7.11",
+    "highlight.js": "^11.0",
    "instant.page": "^5.1",
    "katex": "^0.13",
    "lazysizes": "^5.3",
    "markdownlint-cli": "^0.27",
-    "mermaid": "^8.9.2",
-    "netlify-lambda": "^2.0",
-    "postcss": "^8.2",
+    "mermaid": "^8.11",
+    "postcss": "^8.3",
    "postcss-cli": "^8.3",
    "purgecss-whitelister": "^2.4",
-    "rimraf": "^3.0",
    "shx": "^0.3.3",
-    "standard-version": "^9.2",
-    "stylelint": "^13.12",
-    "stylelint-config-standard": "^21.0"
+    "stylelint": "^13.13",
+    "stylelint-config-standard": "^22.0"
+  },
+  "otherDependencies": {
+    "hugo": "0.84.4"
  }
 }
--- a/static/logo-doks.svg
+++ b/static/logo-doks.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#E1E8ED" d="M32.415 9.586l-9-9C23.054.225 22.553 0 22 0c-1.104 0-1.999.896-2 2 0 .552.224 1.053.586 1.415l-3.859 3.859 9 9 3.859-3.859c.362.361.862.585 1.414.585 1.104 0 2.001-.896 2-2 0-.552-.224-1.052-.585-1.414z"/><path fill="#CCD6DD" d="M22 0H7C4.791 0 3 1.791 3 4v28c0 2.209 1.791 4 4 4h22c2.209 0 4-1.791 4-4V11h-9c-1 0-2-1-2-2V0z"/><path fill="#99AAB5" d="M22 0h-2v9c0 2.209 1.791 4 4 4h9v-2h-9c-1 0-2-1-2-2V0zm-5 8c0 .552-.448 1-1 1H8c-.552 0-1-.448-1-1s.448-1 1-1h8c.552 0 1 .448 1 1zm0 4c0 .552-.448 1-1 1H8c-.552 0-1-.448-1-1s.448-1 1-1h8c.552 0 1 .448 1 1zm12 4c0 .552-.447 1-1 1H8c-.552 0-1-.448-1-1s.448-1 1-1h20c.553 0 1 .448 1 1zm0 4c0 .553-.447 1-1 1H8c-.552 0-1-.447-1-1 0-.553.448-1 1-1h20c.553 0 1 .447 1 1zm0 4c0 .553-.447 1-1 1H8c-.552 0-1-.447-1-1 0-.553.448-1 1-1h20c.553 0 1 .447 1 1zm0 4c0 .553-.447 1-1 1H8c-.552 0-1-.447-1-1 0-.553.448-1 1-1h20c.553 0 1 .447 1 1z"/></svg>
--- a/static/videos/flower.mp4
+++ b/static/videos/flower.mp4
--- a/static/videos/flower.webm
+++ b/static/videos/flower.webm
--- a/theme.toml
+++ b/theme.toml
@ -2,11 +2,13 @@ name = "Doks"
 license = "MIT"
 licenselink = "https://github.com/h-enk/doks/blob/master/LICENSE"
 description = "Hugo theme helping you build modern documentation websites that are secure, fast, and SEO-ready — by default."
-homepage = "https://getdoks.org/"
+
+homepage = "https://github.com/h-enk/doks"
+demosite = "https://doks.netlify.app"
+
 tags = ["landing page", "documentation", "blog", "minimal", "modern", "customizable", "search", "dark mode", "bootstrap"]
 features = ["security aware", "fast by default", "seo-ready", "development tools", "bootstrap framework", "netlify-ready", "full text search", "page layouts", "dark mode"]
-min_version = "0.75.0"

 [author]
  name = "Henk Verlinde"
-  homepage = "https://henkverlinde.com/"
+  homepage = "https://henkverlinde.com"
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#E1E8ED" d="M32.415 9.586l-9-9C23.054.225 22.553 0 22 0c-1.104 0-1.999.896-2 2 0 .552.224 1.053.586 1.415l-3.859 3.859 9 9 3.859-3.859c.362.361.862.585 1.414.585 1.104 0 2.001-.896 2-2 0-.552-.224-1.052-.585-1.414z"/><path fill="#CCD6DD" d="M22 0H7C4.791 0 3 1.791 3 4v28c0 2.209 1.791 4 4 4h22c2.209 0 4-1.791 4-4V11h-9c-1 0-2-1-2-2V0z"/><path fill="#99AAB5" d="M22 0h-2v9c0 2.209 1.791 4 4 4h9v-2h-9c-1 0-2-1-2-2V0zm-5 8c0 .552-.448 1-1 1H8c-.552 0-1-.448-1-1s.448-1 1-1h8c.552 0 1 .448 1 1zm0 4c0 .552-.448 1-1 1H8c-.552 0-1-.448-1-1s.448-1 1-1h8c.552 0 1 .448 1 1zm12 4c0 .552-.447 1-1 1H8c-.552 0-1-.448-1-1s.448-1 1-1h20c.553 0 1 .448 1 1zm0 4c0 .553-.447 1-1 1H8c-.552 0-1-.447-1-1 0-.553.448-1 1-1h20c.553 0 1 .447 1 1zm0 4c0 .553-.447 1-1 1H8c-.552 0-1-.447-1-1 0-.553.448-1 1-1h20c.553 0 1 .447 1 1zm0 4c0 .553-.447 1-1 1H8c-.552 0-1-.447-1-1 0-.553.448-1 1-1h20c.553 0 1 .447 1 1z"/></svg>