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
+      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
+.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/5
+++ b/5
@ -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
@ -18,4 +19,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.
--- 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: {
-        id: 'id',
-        field: [
-          'title',
-          'description',
-          'content',
-        ],
-        store: [
-          'href',
-          'title',
-          'description',
-        ],
-    },
+  var index = new FlexSearch.Document({
+    tokenize: "forward",
+    cache: 100,
+    document: {
+      id: 'id',
+      store: [
+        "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 {
-  display: none;
+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)
- */
+/*

- .c1,
- .c /* comment, punctuation.definition.comment, string.comment */ {
-   color: #6a737d;
- }
- 
- .v /* variable */,
- .smw /* sublimelinter.mark.warning */ {
-   color: #e36209;
- }
- 
- // .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;
- }
- 
- .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 */ {
-   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 */ {
-   font-style: italic;
-   color: #24292e;
- }
- 
- .mb /* markup.bold */ {
-   font-weight: bold;
-   color: #24292e;
- }
- 
- .md /* markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted */ {
-   color: #b31d28;
-   background-color: #ffeef0;
- }
- 
- .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;
- }
- 
+Based on Ascetic by (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1.25rem 1.5rem;
+  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/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 -}}
-			{{ 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,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 }}">
+  <meta property="og:url" content="{{ .Permalink }}">
 {{ 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 -}}
-  {{ 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
@ -2,11 +2,11 @@
  <meta name="robots" content="noindex, follow">
 {{ else -}}
  {{ with .Params.robots -}}
-  <meta name="robots" content="{{ . }}">
+    <meta name="robots" content="{{ . }}">
  {{ else -}}
-  <meta name="robots" content="index, follow">
-  <meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
-  <meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
+    <meta name="robots" content="index, follow">
+    <meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
+    <meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
  {{ end -}}
 {{ end -}}

@ -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 }}">
+{{ else  -}}
+  <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",
-  "@type": "BreadcrumbList",
-  "itemListElement": [{{ range $.Scratch.Get "breadcrumb" }}{{ if ne .position 1 }},{{ end }}{
+  "@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",
+      "@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 }}"
-    }{{ end }}]
+        "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 @@
+<meta name="twitter:card" content="summary_large_image">
+<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:card" content="summary_large_image">
-  <meta name="twitter:image" content="{{ $.RelPermalink }}{{ index . 0 }}">
+  <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,13 +1,39 @@
-{{ $currentPage := . -}}
-{{ range .Site.Menus.docs -}}
-  <h3>{{ .Name }}</h3>
-  {{ if .HasChildren -}}
-  <ul class="list-unstyled">
-    {{ range .Children -}}
-      {{- $active := or ($currentPage.IsMenuCurrent "docs" .) ($currentPage.HasMenuCurrent "docs" .) -}}
-      {{- $active = or $active (eq $currentPage.Section .Identifier) -}}
-      <li><a class="docs-link{{ if $active }} active{{ end }}" href="{{ .URL | relURL }}">{{ .Name }}</a></li>
-    {{ end -}}
+{{ 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>
+    {{ if .HasChildren -}}
+    <ul class="list-unstyled">
+      {{ range .Children -}}
+        {{- $active := or ($currentPage.IsMenuCurrent "docs" .) ($currentPage.HasMenuCurrent "docs" .) -}}
+        {{- $active = or $active (eq $currentPage.Section .Identifier) -}}
+        <li><a class="docs-link{{ if $active }} active{{ end }}" href="{{ .URL | relURL }}">{{ .Name }}</a></li>
+      {{ end -}}
+    </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>