Reapply "Updates to the layout", fixing build

This reverts commit a786ed994072dc6727a4806a049d45216d7846a0.

.editorconfig

@@ -0,0 +1,11 @@
+# editorconfig.org
+
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintignore

@@ -0,0 +1,4 @@
+assets/js/index.js
+assets/js/katex.js
+assets/js/vendor
+node_modules

.eslintrc.json

@@ -0,0 +1,31 @@
+{
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es6": true,
+    "node": true
+  },
+  "extends": "eslint:recommended",
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "rules": {
+    "no-console": 0,
+    "quotes": ["error", "single"],
+    "comma-dangle": [
+      "error",
+      {
+        "arrays": "always-multiline",
+        "objects": "always-multiline",
+        "imports": "always-multiline",
+        "exports": "always-multiline",
+        "functions": "ignore"
+      }
+    ]
+  }
+}

.gitignore

@@ -1,5 +1,5 @@
-
-.hugo_build.lock
-resources/
-public/
-node_modules/
+node_modules
+public
+resources
+.netlify
+.hugo_build.lock

.markdownlint-cli2.jsonc

@@ -0,0 +1,11 @@
+{
+  "config": {
+    "default": true,
+    "MD013": false,
+    "MD024": false,
+    "MD026": false,
+    "MD033": false,
+    "MD034": false
+  },
+  "ignores": ["node_modules", "CHANGELOG.md", "README.md"]
+}

.stylelintignore

@@ -0,0 +1,3 @@
+assets/scss/components/_syntax.scss
+assets/scss/vendor
+node_modules

.stylelintrc.json

@@ -0,0 +1,48 @@
+{
+  "extends": "stylelint-config-standard-scss",
+  "rules": {
+    "no-empty-source": null,
+    "string-quotes": "double",
+    "scss/comment-no-empty": null,
+    "max-line-length": null,
+    "scss/at-extend-no-missing-placeholder": null,
+    "scss/dollar-variable-colon-space-after": null,
+    "scss/dollar-variable-empty-line-before": null,
+    "color-function-notation": null,
+    "alpha-value-notation": null,
+    "selector-id-pattern": null,
+    "selector-class-pattern": null,
+    "scss/no-global-function-names": null,
+    "number-max-precision": null,
+    "hue-degree-notation": null,
+    "value-no-vendor-prefix": null,
+    "property-no-vendor-prefix": null,
+    "at-rule-no-unknown": [
+      true,
+      {
+        "ignoreAtRules": [
+          "extend",
+          "at-root",
+          "debug",
+          "warn",
+          "error",
+          "if",
+          "else",
+          "for",
+          "each",
+          "while",
+          "mixin",
+          "include",
+          "content",
+          "return",
+          "function",
+          "tailwind",
+          "apply",
+          "responsive",
+          "variants",
+          "screen"
+        ]
+      }
+    ]
+  }
+}

LICENSE

@@ -0,0 +1,23 @@
+MIT License
+
+Copyright (c) 2018-present, Gridsome
+Copyright (c) 2020-present, Henk Verlinde
+Copyright (c) 2023-present, Tor Project
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+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.

README.md

@@ -1,6 +1,31 @@
-# Tor Dev Docs
+# Tor Dev Portal
 
-To build the website, first we have to install npm/nodeJS and Hugo extended version.
-Afterwards, we have to run the `npm install` command, which will install a postcss package required to purge CSS.
+The [Tor Dev Portal](https://docs.torproject.org) is built using the [Hugo](https://gohugo.io) Static Site Generator.
+To edit the website locally, we have to install Hugo Extended version and a text editor.
 
-The last step is to change the baseURL in the `config.toml` file to our final URL, and run the `hugo` command. This will create a  `public` folder which contains the static generated files. We have to move these files in the public-facing folder inside our server and serve it with the webserver of choice, `apache`, `nginx` or whatever you like.
+## Overview
+
+Hugo is a static HTML and CSS website generator written in Go. It is optimized for speed, ease of use, and configurability. Hugo takes a directory with content and templates and renders them into a full HTML website.
+
+Hugo relies on Markdown files with front matter for metadata, and you can run Hugo from any directory. This works well for shared hosts and other systems where you don’t have a privileged account.
+
+Hugo renders a typical website of moderate size in a fraction of a second. A good rule of thumb is that each piece of content renders in around 1 millisecond.
+
+## How to install
+
+If you want to use Hugo as your site generator, simply install the Hugo binaries. Use the [installation instructions in the Hugo documentation](https://gohugo.io/getting-started/installing/).
+
+
+## Local testing
+
+To run a local version of the website, we have to run the following command inside the root path of the website.
+
+`hugo server --environment production`
+
+The `--environment` argument is necessary for us to be able to render the content in the same way that the public version would come out to be.
+
+With this we're ready to start editing the files.
+
+## Docs
+
+For further changes and customization, refer to the [Hugo docs](https://gohugo.io/documentation/).

SECURITY.md

@@ -0,0 +1,7 @@
+# Reporting Security Issues
+
+The Tor Project team and community take security issues in Tor Developer Docs seriously. We appreciate your efforts to responsibly disclose your findings, and will make every effort to acknowledge your contributions.
+
+To report a security issue, email [security@torproject.org](mailto:security@torproject.org) and include the word "SECURITY" in the subject line.
+
+We'll endeavor to respond quickly, and will keep you updated throughout the process.

archetypes/blog.md

@@ -0,0 +1,15 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+description: ""
+excerpt: ""
+date: {{ .Date }}
+lastmod: {{ .Date }}
+draft: true
+weight: 50
+images: []
+categories: []
+tags: []
+contributors: []
+pinned: false
+homepage: false
+---

archetypes/default.md

@@ -1,6 +1,8 @@
 ---
 title: "{{ replace .Name "-" " " | title }}"
+description: ""
 date: {{ .Date }}
+lastmod: {{ .Date }}
 draft: true
+images: []
 ---
-

archetypes/docs.md

@@ -0,0 +1,15 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+description: ""
+lead: ""
+date: {{ .Date }}
+lastmod: {{ .Date }}
+draft: true
+images: []
+menu:
+  docs:
+    parent: ""
+    identifier: "{{ .Name }}-{{ delimit (shuffle (split (md5 .Name) "" )) "" }}"
+weight: 999
+toc: true
+---

archetypes/docs/_index.md

@@ -0,0 +1,10 @@
+---
+title: "Docs"
+description: ""
+lead: ""
+date: 2022-01-25T14:40:56+01:00
+lastmod: 2022-01-25T14:40:56+01:00
+draft: false
+images: []
+type: docs
+---

assets/js/alert-init.js

@@ -0,0 +1,5 @@
+Object.keys(localStorage).forEach(function(key) {
+  if (/^global-alert-/.test(key)) {
+    document.documentElement.setAttribute('data-global-alert', 'closed');
+  }
+});

assets/js/alert.js

@@ -0,0 +1,20 @@
+var announcement = document.getElementById('announcement');
+
+if (announcement !== null) {
+
+  var id = announcement.dataset.id;
+
+  Object.keys(localStorage).forEach(function(key) {
+    if (/^global-alert-/.test(key)) {
+      if (key !== id ) {
+        localStorage.removeItem(key);
+        document.documentElement.removeAttribute('data-global-alert');
+      }
+    }
+  });
+
+  announcement.addEventListener('closed.bs.alert', () => {
+    localStorage.setItem(id, 'closed');
+  });
+
+}

assets/js/bootstrap.js

@@ -0,0 +1,2 @@
+import 'bootstrap/dist/js/bootstrap.bundle.min.js'
+// import 'bootstrap/dist/js/bootstrap.min.js'

assets/js/clipboard.js

@@ -0,0 +1,37 @@
+import Clipboard from '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);
+    console.info('Trigger:', e.trigger);
+    */
+
+    e.clearSelection();
+});
+
+clipboard.on('error', function(e) {
+    console.error('Action:', e.action);
+    console.error('Trigger:', e.trigger);
+});

assets/js/darkmode-init.js

@@ -0,0 +1,21 @@
+const globalDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+const localMode = localStorage.getItem('theme');
+
+if (globalDark && (localMode === null)) {
+
+  localStorage.setItem('theme', 'dark');
+  document.documentElement.setAttribute('data-dark-mode', '');
+
+}
+
+if (globalDark && (localMode === 'dark')) {
+
+  document.documentElement.setAttribute('data-dark-mode', '');
+
+}
+
+if (localMode === 'dark') {
+
+  document.documentElement.setAttribute('data-dark-mode', '');
+
+}

assets/js/darkmode.js

@@ -0,0 +1,38 @@
+const mode = document.getElementById('mode');
+
+if (mode !== null) {
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+
+    if (event.matches) {
+
+      localStorage.setItem('theme', 'dark');
+      document.documentElement.setAttribute('data-dark-mode', '');
+
+    } else {
+
+      localStorage.setItem('theme', 'light');
+      document.documentElement.removeAttribute('data-dark-mode');
+
+    }
+
+  })
+
+  mode.addEventListener('click', () => {
+
+    document.documentElement.toggleAttribute('data-dark-mode');
+    localStorage.setItem('theme', document.documentElement.hasAttribute('data-dark-mode') ? 'dark' : 'light');
+
+  });
+
+  if (localStorage.getItem('theme') === 'dark') {
+
+    document.documentElement.setAttribute('data-dark-mode', '');
+
+  } else {
+
+    document.documentElement.removeAttribute('data-dark-mode');
+
+  }
+
+}

assets/js/highlight.js

@@ -0,0 +1,26 @@
+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 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';
+import python from 'highlight.js/lib/languages/python';
+
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('json', json);
+hljs.registerLanguage('bash', bash);
+hljs.registerLanguage('html', xml);
+hljs.registerLanguage('ini', ini);
+hljs.registerLanguage('toml', ini);
+hljs.registerLanguage('yaml', yaml);
+hljs.registerLanguage('md', markdown);
+hljs.registerLanguage('python', python);
+
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('pre code:not(.language-mermaid)').forEach((block) => {
+    hljs.highlightElement(block);
+  });
+});

assets/js/index.js

@@ -0,0 +1,179 @@
+var suggestions = document.getElementById('suggestions');
+var search = document.getElementById('search');
+
+if (search !== null) {
+  document.addEventListener('keydown', inputFocus);
+}
+
+function inputFocus(e) {
+  if (e.ctrlKey && e.key === '/' ) {
+    e.preventDefault();
+    search.focus();
+  }
+  if (e.key === 'Escape' ) {
+    search.blur();
+    suggestions.classList.add('d-none');
+  }
+}
+
+document.addEventListener('click', function(event) {
+
+  var isClickInsideElement = suggestions.contains(event.target);
+
+  if (!isClickInsideElement) {
+    suggestions.classList.add('d-none');
+  }
+
+});
+
+/*
+Source:
+  - https://dev.to/shubhamprakash/trap-focus-using-javascript-6a3
+*/
+
+document.addEventListener('keydown',suggestionFocus);
+
+function suggestionFocus(e) {
+  const suggestionsHidden = suggestions.classList.contains('d-none');
+  if (suggestionsHidden) return;
+
+  const focusableSuggestions= [...suggestions.querySelectorAll('a')];
+  if (focusableSuggestions.length === 0) return;
+
+  const index = focusableSuggestions.indexOf(document.activeElement);
+
+  if (e.key === "ArrowUp") {
+    e.preventDefault();
+    const nextIndex = index > 0 ? index - 1 : 0;
+    focusableSuggestions[nextIndex].focus();
+  }
+  else if (e.key === "ArrowDown") {
+    e.preventDefault();
+    const nextIndex= index + 1 < focusableSuggestions.length ? index + 1 : index;
+    focusableSuggestions[nextIndex].focus();
+  }
+
+}
+
+/*
+Source:
+  - https://github.com/nextapps-de/flexsearch#index-documents-field-search
+  - https://raw.githack.com/nextapps-de/flexsearch/master/demo/autocomplete.html
+*/
+
+(function(){
+
+  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: "{{ .Permalink }}",
+        title: {{ .Title | jsonify }},
+        description: {{ .Params.description | jsonify }},
+        content: {{ .Content | jsonify }}
+      },
+    {{ end -}}
+  ];
+  */
+
+  // https://discourse.gohugo.io/t/range-length-or-last-element/3803/2
+
+  {{ $list := slice }}
+  {{- if and (isset .Site.Params.options "searchsectionsindex") (not (eq (len .Site.Params.options.searchSectionsIndex) 0)) }}
+  {{- if eq .Site.Params.options.searchSectionsIndex "ALL" }}
+  {{- $list = .Site.Pages }}
+  {{- else }}
+  {{- $list = (where .Site.Pages "Type" "in" .Site.Params.options.searchSectionsIndex) }}
+  {{- if (in .Site.Params.options.searchSectionsIndex "HomePage") }}
+  {{ $list = $list | append .Site.Home }}
+  {{- end }}
+  {{- end }}
+  {{- else }}
+  {{- $list = (where .Site.Pages "Section" "docs") }}
+  {{- end }}
+
+  {{ $len := (len $list) -}}
+
+  {{ range $index, $element := $list -}}
+    index.add(
+      {
+        id: {{ $index }},
+        href: "{{ .RelPermalink }}",
+        title: {{ .Title | jsonify }},
+        {{ with .Description -}}
+          description: {{ . | jsonify }},
+        {{ else -}}
+          description: {{ .Summary | plainify | jsonify }},
+        {{ end -}}
+        content: {{ .Plain | jsonify }}
+      }
+    );
+  {{ end -}}
+
+  search.addEventListener('input', show_results, true);
+
+  function show_results(){
+    const maxResult = 5;
+    var searchQuery = this.value;
+    var results = index.search(searchQuery, {limit: maxResult, enrich: true});
+
+    // flatten results since index.search() returns results for each indexed field
+    const flatResults = new Map(); // keyed by href to dedupe results
+    for (const result of results.flatMap(r => r.result)) {
+      if (flatResults.has(result.doc.href)) continue;
+      flatResults.set(result.doc.href, result.doc);
+    }
+
+    suggestions.innerHTML = "";
+    suggestions.classList.remove('d-none');
+
+    // inform user that no results were found
+    if (flatResults.size === 0 && searchQuery) {
+      const noResultsMessage = document.createElement('div')
+      noResultsMessage.innerHTML = `No results for "<strong>${searchQuery}</strong>"`
+      noResultsMessage.classList.add("suggestion__no-results");
+      suggestions.appendChild(noResultsMessage);
+      return;
+    }
+
+    // construct a list of suggestions
+    for(const [href, doc] of flatResults) {
+        const entry = document.createElement('div');
+        suggestions.appendChild(entry);
+
+        const a = document.createElement('a');
+        a.href = href;
+        entry.appendChild(a);
+
+        const title = document.createElement('span');
+        title.textContent = doc.title;
+        title.classList.add("suggestion__title");
+        a.appendChild(title);
+
+        const description = document.createElement('span');
+        description.textContent = doc.description;
+        description.classList.add("suggestion__description");
+        a.appendChild(description);
+
+        suggestions.appendChild(entry);
+
+        if(suggestions.childElementCount == maxResult) break;
+    }
+  }
+}());

assets/js/instant.page.js

@@ -0,0 +1 @@
+import 'instant.page';

assets/js/katex.js

@@ -0,0 +1,10 @@
+document.addEventListener('DOMContentLoaded', function() {
+  renderMathInElement(document.body, {
+    delimiters: [
+      {left: '$$', right: '$$', display: true},
+      {left: '$', right: '$', display: false},
+      {left: '\\(', right: '\\)', display: false},
+      {left: '\\[', right: '\\]', display: true},
+    ],
+  });
+});

assets/js/lazysizes.js

@@ -0,0 +1 @@
+import 'lazysizes';

assets/js/mermaid.js

@@ -0,0 +1,11 @@
+import mermaid from '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');
+});

assets/js/scroll-lock.js

@@ -0,0 +1,14 @@
+// Adds scroll position lock for default docs sidebar
+
+if (document.querySelector('#sidebar-default') !== null) {
+  let sidebar = document.getElementById('sidebar-default');
+
+  let pos = sessionStorage.getItem('sidebar-scroll');
+  if (pos !== null) {
+      sidebar.scrollTop = parseInt(pos, 10);
+  }
+
+  window.addEventListener('beforeunload', () => {
+      sessionStorage.setItem('sidebar-scroll', sidebar.scrollTop);
+  });
+}

assets/js/to-top.js

@@ -0,0 +1,20 @@
+var topbutton = document.getElementById('toTop');
+
+if (topbutton !== null) {
+
+  topbutton.style.display = 'none';
+  window.onscroll = function() {
+    scrollFunction()
+  };
+
+}
+
+function scrollFunction() {
+
+  if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
+    topbutton.style.display = 'block';
+  } else {
+    topbutton.style.display = 'none';
+  }
+
+}

assets/scss/_custom.scss

@@ -271,7 +271,7 @@ h6 {
 
   100% {
     opacity: 1;
-  }  
+  }
 }
 
 .nav_logo,
@@ -341,9 +341,12 @@ details summary {
   margin-block: 1.25rem;
   display: flex;
   justify-content: space-between;
+  align-items: center;
 
   & .inline-svg {
     top: 0;
+    width: 1em;
+    height: 1em;
   }
 }
 
@@ -384,7 +387,6 @@ details[open] summary svg {
   & ul {
     list-style: none;
     border-left: 2px solid var(--border);
-    margin-left: 2rem;
     padding-left: 1rem;
   }
   & li {
@@ -647,29 +649,9 @@ figcaption {
   }
 }
 
-// Twitter
-.twitter-tweet {
-  font-family: "Source Sans Pro" !important;
-  color: var(--text-color) !important;
-  border-left: 0.5rem solid #2b7bb9 !important;
-  position: relative;
-
-  & a {
-    color: var(--link-color) !important;
-
-    &:visited {
-      color: #a78bfa;
-    }
-  }
-
-  &:after {
-    content: var(--twitter-icon);
-    width: 3.5rem;
-    height: 3.5rem;
-    opacity: 0.2;
-    position: absolute;
-    right: 0;
-    bottom: 0;
+.git {
+  a {
+    color: $blue-700;
   }
 }
 

assets/scss/app.scss

@@ -0,0 +1,35 @@
+/** Import Bootstrap functions */
+@import "bootstrap/scss/functions";
+
+/** Import theme variables */
+@import "common/variables";
+
+/** Import Bootstrap */
+@import "bootstrap/scss/bootstrap";
+
+/** Import highlight.js */
+// @import "highlight.js/scss/github-dark-dimmed";
+
+/** Import KaTeX */
+@import "katex/dist/katex";
+
+/** Import theme styles */
+@import "common/fonts";
+@import "common/global";
+@import "common/dark";
+@import "components/alerts";
+@import "components/buttons";
+@import "components/code";
+@import "components/details";
+@import "components/syntax";
+@import "components/comments";
+@import "components/forms";
+@import "components/images";
+@import "components/mermaid";
+@import "components/search";
+@import "components/tables";
+@import "layouts/footer";
+@import "layouts/header";
+@import "layouts/pages";
+@import "layouts/posts";
+@import "layouts/sidebar";

assets/scss/common/_dark.scss

@@ -0,0 +1,582 @@
+/** Theme variables */
+
+// Source: https://material.io/design/color/dark-theme.html
+
+$body-bg-dark: $gray-900;
+$body-overlay-dark: darken($body-bg-dark, 2.5%);
+
+/*
+$border-dark: darken($body-bg-dark, 2.5%);
+*/
+$border-dark: $gray-800;
+$body-color-dark: $gray-300;
+$dots-dark: darken($body-color-dark, 50%);
+
+$link-color-dark: $blue-300;
+$button-color-dark: $link-color-dark;
+$focus-color-dark: lighten($link-color-dark, 2.5%);
+
+$navbar-dark-color:                 $body-color-dark;
+$navbar-dark-hover-color:           $link-color-dark;
+$navbar-dark-active-color:          $link-color-dark;
+
+/** Theme styles */
+
+[data-dark-mode] body {
+  background: $body-bg-dark;
+  color: $body-color-dark;
+}
+
+[data-dark-mode] body a {
+  color: $link-color-dark;
+}
+
+[data-dark-mode] body a.text-body {
+  color: $body-color-dark !important;
+}
+
+[data-dark-mode] body .btn-primary {
+  @include button-variant($button-color-dark, $button-color-dark);
+
+  color: $body-bg-dark !important;
+}
+
+[data-dark-mode] body .btn-outline-primary {
+  @include button-outline-variant($button-color-dark, $button-color-dark);
+
+  color: $link-color-dark;
+}
+
+[data-dark-mode] body .btn-outline-primary:hover {
+  color: $body-bg-dark;
+}
+
+[data-dark-mode] body .btn-doks-light {
+  color: $navbar-dark-color;
+}
+
+[data-dark-mode] body .show > .btn-doks-light,
+[data-dark-mode] body .btn-doks-light:hover,
+[data-dark-mode] body .btn-doks-light:active {
+  color: $link-color-dark;
+}
+
+[data-dark-mode] body .btn-menu svg {
+  color: $body-color-dark;
+}
+
+[data-dark-mode] body .doks-sidebar-toggle {
+  color: $navbar-dark-color;
+}
+
+[data-dark-mode] body .btn-menu:hover,
+[data-dark-mode] body .btn-doks-light:hover,
+[data-dark-mode] body .doks-sidebar-toggle:hover {
+  background: $body-overlay-dark;
+}
+
+/*
+[data-dark-mode] body .dropdown-menu {
+  @extend .dropdown-menu-dark;
+}
+*/
+
+[data-dark-mode] body .navbar,
+[data-dark-mode] body .doks-subnavbar {
+  background-color: rgba(33, 37, 41, 0.95);
+  border-bottom: 1px solid $border-dark;
+}
+
+[data-dark-mode] body.home .navbar {
+  border-bottom: 0;
+}
+
+[data-dark-mode] body .offcanvas-header {
+  border-bottom: 1px solid $gray-800;
+}
+
+[data-dark-mode] body .offcanvas .nav-link {
+  color: $body-color-dark;
+}
+
+[data-dark-mode] body .offcanvas .nav-link:hover,
+[data-dark-mode] body .offcanvas .nav-link:focus {
+  color: $link-color-dark;
+}
+
+[data-dark-mode] body .offcanvas .nav-link.active {
+  color: $link-color-dark;
+}
+
+[data-dark-mode] body .navbar-light .navbar-brand {
+  color: $navbar-dark-color !important;
+}
+
+[data-dark-mode] body .navbar-light .navbar-nav .nav-link {
+  color: $navbar-dark-color;
+}
+
+[data-dark-mode] body .navbar-light .navbar-nav .nav-link:hover,
+[data-dark-mode] body .navbar-light .navbar-nav .nav-link:focus {
+  color: $navbar-dark-hover-color;
+}
+
+[data-dark-mode] body .navbar-light .navbar-nav .nav-link.disabled {
+  color: $navbar-dark-disabled-color;
+}
+
+[data-dark-mode] body .navbar-light .navbar-nav .show > .nav-link,
+[data-dark-mode] body .navbar-light .navbar-nav .active > .nav-link,
+[data-dark-mode] body .navbar-light .navbar-nav .nav-link.show,
+[data-dark-mode] body .navbar-light .navbar-nav .nav-link.active {
+  color: $navbar-dark-active-color;
+}
+
+[data-dark-mode] body .navbar-light .navbar-text {
+  color: $navbar-dark-color;
+}
+
+[data-dark-mode] body .alert-primary a {
+  color: $body-bg-dark;
+}
+
+[data-dark-mode] body .alert-doks {
+  background: $body-overlay-dark;
+  color: $body-color-dark;
+}
+
+[data-dark-mode] body .alert-doks a {
+  color: $link-color-dark;
+}
+
+[data-dark-mode] body .page-links a {
+  color: $body-color-dark;
+}
+
+[data-dark-mode] body .btn-toggle-nav a {
+  color: $body-color-dark;
+}
+
+[data-dark-mode] body .showcase-meta a {
+  color: $body-color-dark;
+}
+
+[data-dark-mode] body .showcase-meta a:hover,
+[data-dark-mode] body .showcase-meta a:focus {
+  color: $link-color-dark;
+}
+
+[data-dark-mode] body .docs-link:hover,
+[data-dark-mode] body .docs-link.active,
+[data-dark-mode] body .page-links a:hover {
+  text-decoration: none;
+  color: $link-color-dark;
+}
+
+[data-dark-mode] body .btn-toggle {
+  color: $body-color-dark;
+  background-color: transparent;
+  border: 0;
+}
+
+[data-dark-mode] body .btn-toggle:hover,
+[data-dark-mode] body .btn-toggle:focus {
+  color: $body-color-dark;
+}
+
+[data-dark-mode] body .btn-toggle::after {
+  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;
+}
+
+[data-dark-mode] body .btn-toggle[aria-expanded="true"] {
+  color: $body-color-dark;
+}
+
+[data-dark-mode] body .btn-toggle[aria-expanded="true"]::after {
+  transform: rotate(90deg);
+}
+
+[data-dark-mode] body .btn-toggle-nav a:hover,
+[data-dark-mode] body .btn-toggle-nav a:focus {
+  color: $link-color-dark;
+}
+
+[data-dark-mode] body .btn-toggle-nav a.active {
+  color: $link-color-dark;
+}
+
+[data-dark-mode] body .navbar-light .navbar-text a {
+  color: $navbar-dark-active-color;
+}
+
+[data-dark-mode] body .docs-links h3.sidebar-link a,
+[data-dark-mode] body .page-links h3.sidebar-link a {
+  color: $body-color-dark;
+}
+
+[data-dark-mode] body .navbar-light .navbar-text a:hover,
+[data-dark-mode] body .navbar-light .navbar-text a:focus {
+  color: $navbar-dark-active-color;
+}
+
+[data-dark-mode] body .navbar .btn-link {
+  color: $navbar-dark-color;
+}
+
+[data-dark-mode] body .content .btn-link {
+  color: $link-color-dark;
+}
+
+[data-dark-mode] body .content .btn-link:hover {
+  color: $link-color-dark;
+}
+
+[data-dark-mode] body .content img[src^="https://latex.codecogs.com/svg.latex"] {
+  filter: invert(1);
+}
+
+[data-dark-mode] body .navbar .btn-link:hover {
+  color: $navbar-dark-hover-color;
+}
+
+[data-dark-mode] body .navbar .btn-link:active {
+  color: $navbar-dark-active-color;
+}
+
+[data-dark-mode] body .form-control.is-search {
+  background: $body-overlay-dark;
+  border: 1px solid transparent;
+  color: $gray-300;
+
+  /*
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right calc(0.375em + 0.1875rem) center;
+  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+  */
+}
+
+[data-dark-mode] body .form-control.is-search:focus {
+  border: 1px solid $link-color-dark;
+}
+
+[data-dark-mode] body .doks-search::after {
+  color: $gray-300;
+  border: 1px solid $gray-700;
+}
+
+[data-dark-mode] body .text-dark {
+  color: $body-color-dark !important;
+}
+
+/*
+[data-dark-mode] body .navbar-form::after {
+  color: $gray-600;
+  border: 1px solid $gray-800;
+}
+*/
+
+[data-dark-mode] body .form-control {
+  color: $gray-300;
+}
+
+[data-dark-mode] body .form-control::placeholder {
+  color: $gray-400;
+  opacity: 1;
+}
+
+[data-dark-mode] body .border-top {
+  border-top: 1px solid $border-dark !important;
+}
+
+@include media-breakpoint-up(lg) {
+  [data-dark-mode] body .docs-sidebar {
+    order: 0;
+    border-right: 1px solid $border-dark;
+  }
+}
+
+[data-dark-mode] body .docs-navigation {
+  border-top: 1px solid $border-dark;
+}
+
+[data-dark-mode] body pre code::-webkit-scrollbar-thumb {
+  background: $gray-400;
+}
+
+[data-dark-mode] body code:not(.hljs) {
+  background: $body-overlay-dark;
+  color: $body-color-dark;
+}
+
+[data-dark-mode] body pre code:hover {
+  scrollbar-width: thin;
+  scrollbar-color: $border-dark transparent;
+}
+
+[data-dark-mode] body pre code::-webkit-scrollbar-thumb:hover {
+  background: $gray-500;
+}
+
+[data-dark-mode] body blockquote {
+  border-left: 3px solid $border-dark;
+}
+
+[data-dark-mode] body .footer {
+  border-top: 1px solid $border-dark;
+}
+
+[data-dark-mode] body .docs-links,
+[data-dark-mode] body .docs-toc {
+  scrollbar-width: thin;
+  scrollbar-color: $body-bg-dark $body-bg-dark;
+}
+
+[data-dark-mode] body .docs-links::-webkit-scrollbar,
+[data-dark-mode] body .docs-toc::-webkit-scrollbar {
+  width: 5px;
+}
+
+[data-dark-mode] body .docs-links::-webkit-scrollbar-track,
+[data-dark-mode] body .docs-toc::-webkit-scrollbar-track {
+  background: $body-bg-dark;
+}
+
+[data-dark-mode] body .docs-links::-webkit-scrollbar-thumb,
+[data-dark-mode] body .docs-toc::-webkit-scrollbar-thumb {
+  background: $body-bg-dark;
+}
+
+[data-dark-mode] body .docs-links:hover,
+[data-dark-mode] body .docs-toc:hover {
+  scrollbar-width: thin;
+  scrollbar-color: $border-dark $body-bg-dark;
+}
+
+[data-dark-mode] body .docs-links:hover::-webkit-scrollbar-thumb,
+[data-dark-mode] body .docs-toc:hover::-webkit-scrollbar-thumb {
+  background: $border-dark;
+}
+
+[data-dark-mode] body .docs-links::-webkit-scrollbar-thumb:hover,
+[data-dark-mode] body .docs-toc::-webkit-scrollbar-thumb:hover {
+  background: $border-dark;
+}
+
+[data-dark-mode] body .docs-links h3:not(:first-child) {
+  border-top: 1px solid $border-dark;
+}
+
+[data-dark-mode] body a.docs-link {
+  color: $body-color-dark;
+}
+
+[data-dark-mode] body .page-links li:not(:first-child) {
+  border-top: 1px dashed $border-dark;
+}
+
+[data-dark-mode] body .card {
+  background: $body-bg-dark;
+  border: 1px solid $border-dark;
+}
+
+[data-dark-mode] body .card.bg-light {
+  background: $body-overlay-dark !important;
+}
+
+[data-dark-mode] body .navbar .menu-icon .navicon {
+  background: $navbar-dark-color;
+}
+
+[data-dark-mode] body .navbar .menu-icon .navicon::before,
+[data-dark-mode] body .navbar .menu-icon .navicon::after {
+  background: $navbar-dark-color;
+}
+
+[data-dark-mode] body .logo-light {
+  display: none !important;
+}
+
+[data-dark-mode] body .logo-dark {
+  display: inline-block !important;
+}
+
+[data-dark-mode] body .bg-light {
+  background: darken($body-bg-dark, 1.5%) !important;
+}
+
+[data-dark-mode] body .bg-dots {
+  background-image: radial-gradient($dots-dark 15%, transparent 15%);
+}
+
+[data-dark-mode] body .text-muted {
+  color: darken($body-color-dark, 7.5%) !important;
+}
+
+[data-dark-mode] body .alert-primary {
+  background: $link-color-dark;
+  color: $body-bg-dark;
+}
+
+[data-dark-mode] body .figure-caption {
+  color: $body-color-dark;
+}
+
+[data-dark-mode] body table {
+  @extend .table-dark;
+}
+
+[data-dark-mode] body .copy-status::after {
+  content: "Copy";
+  display: block;
+  color: $body-color-dark;
+}
+
+[data-dark-mode] body .copy-status:hover::after {
+  content: "Copy";
+  display: block;
+  color: $link-color-dark;
+}
+
+[data-dark-mode] body .copy-status:focus::after,
+[data-dark-mode] body .copy-status:active::after {
+  content: "Copied";
+  display: block;
+  color: $link-color-dark;
+}
+
+/*
+[data-dark-mode] body .dropdown-toggle:focus,
+[data-dark-mode] body .doks-sidebar-toggle:focus {
+  box-shadow: 0 0 0 0.2rem $focus-color-dark;
+}
+*/
+
+[data-dark-mode] body .offcanvas {
+  background-color: $body-bg-dark;
+}
+
+[data-dark-mode] body .btn-close {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNkZWUyZTYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLXgiPjxsaW5lIHgxPSIxOCIgeTE9IjYiIHgyPSI2IiB5Mj0iMTgiPjwvbGluZT48bGluZSB4MT0iNiIgeTE9IjYiIHgyPSIxOCIgeTI9IjE4Ij48L2xpbmU+PC9zdmc+");
+  background-size: 1.5rem;
+}
+
+@include media-breakpoint-up(md) {
+  [data-dark-mode] body .alert-dismissible .btn-close {
+    background-size: 1.25rem;
+  }
+}
+
+/*
+[data-dark-mode] body .btn-close:focus {
+  box-shadow: 0 0 0 0.2rem $focus-color-dark;
+}
+*/
+
+[data-dark-mode] .dropdown-item {
+  color: $body-bg-dark;
+}
+
+[data-dark-mode] body hr.text-black-50 {
+  color: $gray-600 !important;
+}
+
+[data-dark-mode] body .email-form .form-control {
+  background: $body-overlay-dark;
+  border: 1px solid transparent;
+}
+
+[data-dark-mode] body .email-form .form-control:focus {
+  border: 1px solid $link-color-dark;
+}
+
+[data-dark-mode] .page-link {
+  color: $link-color-dark;
+  background-color: transparent;
+  border: $pagination-border-width solid $border-dark;
+
+  &:hover {
+    color: $body-bg-dark;
+    background-color: $body-color-dark;
+    border-color: $body-color-dark;
+  }
+
+  &:focus {
+    color: $body-bg-dark;
+    background-color: $body-color-dark;
+  }
+}
+
+[data-dark-mode] .page-item {
+  &.active .page-link {
+    color: $body-bg-dark;
+
+    @include gradient-bg($link-color-dark);
+
+    border-color: $link-color-dark;
+  }
+
+  &.disabled .page-link {
+    color: $pagination-disabled-color;
+    background-color: $body-overlay-dark;
+    border-color: $border-dark;
+  }
+}
+
+[data-dark-mode] .dropdown-menu {
+  background: $body-overlay-dark;
+}
+
+[data-dark-mode] .dropdown-menu .dropdown-item {
+  color: $body-color-dark;
+}
+
+[data-dark-mode] .dropdown-menu .dropdown-item:hover {
+  color: $link-color-dark;
+  background: $body-bg-dark;
+}
+
+[data-dark-mode] .dropdown-menu .dropdown-item.active,
+[data-dark-mode] .dropdown-menu .dropdown-item:focus {
+  color: $link-color-dark;
+  background: $body-bg-dark;
+}
+
+[data-dark-mode] .doks-navbar .dropdown-item.current,
+[data-dark-mode] .doks-subnavbar .dropdown-item.current {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23dee2e6' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 1rem top 0.6rem;
+  background-size: 0.75rem 0.75rem;
+}
+
+[data-dark-mode] details {
+  border: 1px solid $border-dark;
+}
+
+[data-dark-mode] summary:hover {
+  background: $body-overlay-dark;
+}
+
+[data-dark-mode] details[open] > summary {
+  border-bottom: 1px solid $border-dark;
+}
+
+[data-dark-mode] details summary::before {
+  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");
+}
+
+[data-dark-mode] #toc a.active {
+  color: $link-color-dark;
+}
+
+[data-dark-mode] .btn-light {
+  color: $link-color-dark;
+  background: $body-overlay-dark;
+  border: 1px solid $body-overlay-dark;
+}

assets/scss/common/_fonts.scss

@@ -0,0 +1,101 @@
+/* jost-regular - latin */
+@font-face {
+  font-family: Jost;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    // Google Fonts Jost
+    local("Jost Regular Regular"),   // Full Name
+    local("Jost-Regular"),           // PostScript name
+    // indestructible Jost*
+    local("Jost* Book"),
+    local("Jost-Book"),
+    url("fonts/vendor/jost/jost-v4-latin-regular.woff2") format("woff2"),
+    url("fonts/vendor/jost/jost-v4-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* jost-500 - latin */
+@font-face {
+  font-family: Jost;
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src:
+    // Google Fonts Jost
+    local("Jost Regular Medium"),
+    local("JostRoman-Medium"),
+    // indestructible Jost*
+    local("Jost* Medium"),
+    local("Jost-Medium"),
+    url("fonts/vendor/jost/jost-v4-latin-500.woff2") format("woff2"),
+    url("fonts/vendor/jost/jost-v4-latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* jost-700 - latin */
+@font-face {
+  font-family: Jost;
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src:
+    // Google Fonts Jost
+    local("Jost Regular Bold"),
+    local("JostRoman-Bold"),
+    // indestructible Jost*
+    local("Jost* Bold"),
+    local("Jost-Bold"),
+    url("fonts/vendor/jost/jost-v4-latin-700.woff2") format("woff2"),
+    url("fonts/vendor/jost/jost-v4-latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* jost-italic - latin */
+@font-face {
+  font-family: Jost;
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    // Google Fonts Jost
+    local("Jost Italic Italic"),
+    local("Jost-Italic"),
+    // indestructible Jost*
+    local("Jost* BookItalic"),
+    local("Jost-BookItalic"),
+    url("fonts/vendor/jost/jost-v4-latin-italic.woff2") format("woff2"),
+    url("fonts/vendor/jost/jost-v4-latin-italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* jost-500italic - latin */
+@font-face {
+  font-family: Jost;
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src:
+    // Google Fonts Jost
+    local("Jost Italic Medium Italic"),
+    local("JostItalic-Medium"),
+    // indestructible Jost*
+    local("Jost* Medium Italic"),
+    local("Jost-MediumItalic"),
+    url("fonts/vendor/jost/jost-v4-latin-500italic.woff2") format("woff2"),
+    url("fonts/vendor/jost/jost-v4-latin-500italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* jost-700italic - latin */
+@font-face {
+  font-family: Jost;
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src:
+    // Google Fonts Jost
+    local("Jost Italic Bold Italic"),
+    local("JostItalic-Bold"),
+    // indestructible Jost*
+    local("Jost* Bold Italic"),
+    local("Jost-BoldItalic"),
+    url("fonts/vendor/jost/jost-v4-latin-700italic.woff2") format("woff2"),
+    url("fonts/vendor/jost/jost-v4-latin-700italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}

assets/scss/common/_global.scss

@@ -0,0 +1,288 @@
+.contributors .content,
+.blog .content,
+.page .content,
+.error404 .content,
+.docs.list .content,
+.tutorial.list .content,
+.showcase.list .content,
+.categories.list .content,
+.tags.list .content {
+  padding-top: 1rem;
+  padding-bottom: 3rem;
+}
+
+.content img {
+  max-width: 100%;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  margin: 2rem 0 1rem;
+}
+
+.offcanvas-header {
+  border-bottom: 1px solid $gray-300;
+  padding-top: 1.0625rem;
+  padding-bottom: 0.8125rem;
+}
+
+h5.offcanvas-title {
+  margin: 0;
+}
+
+body.docs {
+  padding-top: 0 !important;
+}
+
+@include media-breakpoint-up(md) {
+  body {
+    font-size: $font-size-md;
+
+    /*
+    padding-top: 4rem !important;
+    */
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .h1,
+  .h2,
+  .h3,
+  .h4,
+  .h5,
+  .h6 {
+    margin-bottom: 1.125rem;
+  }
+}
+
+.home h1 {
+  /* font-size: calc(1.375rem + 1.5vw); */
+  font-size: calc(1.875rem + 1.5vw);
+}
+
+a:hover,
+a:focus {
+  text-decoration: underline;
+}
+
+a.btn:hover,
+a.btn:focus {
+  text-decoration: none;
+}
+
+.section {
+  padding-top: 5rem;
+  padding-bottom: 5rem;
+}
+
+.section-md {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
+.section-sm {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+/*
+.section svg {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  vertical-align: text-top;
+}
+*/
+
+/*
+body {
+  padding-top: 3.5625rem;
+}
+*/
+
+.docs-sidebar {
+  order: 2;
+}
+
+@include media-breakpoint-up(lg) {
+  .docs-sidebar {
+    order: 0;
+    border-right: 1px solid $gray-200;
+  }
+
+  @supports ((position:-webkit-sticky) or (position:sticky)) {
+    .docs-sidebar {
+      position: -webkit-sticky;
+      position: sticky;
+      top: 4rem;
+      z-index: 1000;
+      height: calc(100vh - 4rem);
+    }
+
+    .docs-sidebar-top {
+      top: 0;
+    }
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .docs-sidebar {
+    flex: 0 1 320px;
+  }
+}
+
+.docs-links {
+  padding-bottom: 5rem;
+}
+
+@include media-breakpoint-up(lg) {
+  @supports ((position: -webkit-sticky) or (position: sticky)) {
+    .docs-links {
+      max-height: calc(100vh - 4rem);
+      overflow-y: scroll;
+    }
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .docs-links {
+    display: block;
+    width: auto;
+    margin-right: -1.5rem;
+    padding-bottom: 4rem;
+  }
+}
+
+.docs-toc {
+  order: 2;
+}
+
+@supports ((position:-webkit-sticky) or (position:sticky)) {
+  .docs-toc {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 4rem;
+    height: calc(100vh - 4rem);
+    overflow-y: auto;
+  }
+
+  .docs-toc-top {
+    top: 0;
+  }
+}
+
+.docs-content {
+  padding-bottom: 3rem;
+  order: 1;
+}
+
+.docs-navigation {
+  border-top: 1px solid $gray-200;
+  margin-top: 2rem;
+  margin-bottom: 0;
+  padding-top: 2rem;
+}
+
+.docs-navigation a {
+  font-size: $font-size-base * 0.9;
+}
+
+@include media-breakpoint-up(lg) {
+  .docs-navigation {
+    margin-bottom: -1rem;
+  }
+
+  .docs-navigation a {
+    font-size: $font-size-base;
+  }
+}
+
+.navbar a:hover,
+.navbar a:focus {
+  text-decoration: none;
+}
+
+#TableOfContents ul,
+#toc ul {
+  padding-left: 0;
+  list-style: none;
+}
+
+#toc a.active {
+  color: $primary;
+  font-weight: 600;
+}
+
+::selection {
+  background: rgba(212, 53, 159, 0.2);
+}
+
+.bg-dots {
+  background-image: radial-gradient($gray-300 15%, transparent 15%);
+  background-position: 0 0;
+  background-size: 1rem 1rem;
+  -webkit-mask: linear-gradient(to top, #fff, transparent);
+  mask: linear-gradient(to top, #fff, transparent);
+  width: 100%;
+  height: 9rem;
+  margin-top: -10rem;
+  z-index: -1;
+}
+
+.bg-dots-md {
+  margin-top: -11rem;
+}
+
+.bg-dots-lg {
+  margin-top: -12rem;
+}
+
+// https://fossheim.io/writing/posts/css-text-gradient/
+.gradient-text {
+  background-color: $primary;
+  background-image: linear-gradient(90deg, $primary, $blue-300 50%, $pink-500);
+  background-size: 100%;
+  background-repeat: repeat;
+  -webkit-background-clip: text;
+  -moz-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  -moz-text-fill-color: transparent;
+}
+
+.katex {
+  font-size: $font-size-md;
+}
+
+.card-bar {
+  border-top: 4px solid;
+  border-image-source: linear-gradient(90deg, $primary, #8ed6fb 50%, #d32e9d);
+  border-image-slice: 1;
+}
+
+.modal-backdrop {
+  background-color: #fff;
+}
+
+.modal-backdrop.show {
+  opacity: 0.7;
+}
+
+@include media-breakpoint-up(md) {
+  .modal-backdrop.show {
+    opacity: 0;
+  }
+}

assets/scss/common/_variables.scss

@@ -0,0 +1,190 @@
+// Color system
+
+$white:    #fff;
+$gray-100: #f8f9fa;
+$gray-200: #e9ecef;
+$gray-300: #dee2e6;
+$gray-400: #ced4da;
+$gray-500: #adb5bd;
+$gray-600: #6c757d;
+$gray-700: #495057;
+$gray-800: #343a40;
+$gray-900: #212529;
+$black:    #000;
+
+$yellow:   #ffe000;
+$black:    #1d2d35;
+$beige:    #fbf7f0;
+
+// $red:      #e55235;
+$purple:   #5d2f86;
+$brown:    #aa9c84;
+
+$blue-300: #8ed6fb;
+$pink-100: #fcfaff;
+$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.
+
+$enable-caret:                true;
+$enable-rounded:              true;
+$enable-shadows:              false;
+$enable-gradients:            false;
+$enable-transitions:          true;
+$enable-reduced-motion:       true;
+$enable-smooth-scroll:        true;
+$enable-grid-classes:         true;
+$enable-button-pointers:      true;
+$enable-rfs:                  true;
+$enable-validation-icons:     true;
+$enable-negative-margins:     true;
+$enable-deprecation-messages: true;
+$enable-important-utilities:  true;
+
+/** Bootstrap navbar fix (https://git.io/fADqW) */
+$navbar-dark-toggler-icon-bg: none;
+$navbar-light-toggler-icon-bg: none;
+
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+
+// $enable-responsive-font-sizes: true;
+
+// Body
+//
+// Settings for the `<body>` element.
+
+$body-bg:                   $white;
+$body-color:                $black;
+
+// Links
+//
+// Style anchor elements.
+
+$link-color:                              $primary;
+$link-decoration:                         none;
+
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1240px,
+  xxl: 1320px
+);
+
+@include _assert-ascending($container-max-widths, "$container-max-widths");
+
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-columns:                16;
+$grid-gutter-width:           48px;
+$grid-row-columns:            6;
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+$border-color:                $gray-200;
+
+// Typography
+//
+// Font, line-height, and color for body text, headings, and more.
+
+// stylelint-disable value-keyword-case
+$font-family-sans-serif:      "Source Sans Pro", -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";
+$font-family-monospace:       sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
+$font-family-base:            $font-family-sans-serif;
+// stylelint-enable value-keyword-case
+
+$font-size-base:              1rem; // Assumes the browser default, typically `16px`
+$font-size-xl:                $font-size-base * 1.375;
+$font-size-lg:                $font-size-base * 1.25;
+$font-size-md:                $font-size-base * 1.125;
+$font-size-sm:                $font-size-base * 0.875;
+
+// $line-height-base:            1.5;
+
+$headings-font-family:        null;
+$headings-font-weight:        700;
+
+$lead-font-weight:            400;
+
+// Spacing
+//
+// Control the default styling of most Bootstrap elements by modifying these
+// variables. Mostly focused on spacing.
+// You can add more entries to the $spacers map, should you need more variation.
+
+$spacer: 1rem;
+
+// Navbar
+
+$navbar-padding-y:                  $spacer / 2;
+$navbar-padding-x:                  null;
+
+$navbar-nav-link-padding-x:         0.5rem;
+
+$navbar-light-color:                $white;
+$navbar-light-hover-color:          $gray-200;
+$navbar-light-active-color:         $gray-200;
+
+// Cards
+
+$card-border-color:                 $gray-200;
+
+// Alerts
+//
+// Define alert colors, border radius, and padding.
+
+$alert-padding-y:                   $spacer;
+$alert-padding-x:                   $spacer * 1.5;
+$alert-margin-bottom:               0;
+$alert-border-radius:               0;
+$alert-link-font-weight:            $headings-font-weight;
+$alert-border-width:                0;
+
+$alert-bg-scale:                    0;
+$alert-border-scale:                0;
+$alert-color-scale:                 0;
+
+// docsearch
+$dropdown-config: (
+  main-color: $purple,
+  layout-type: normal,
+  layout-width: normal,
+  layout-alignment: align,
+  background-color: $white,
+  border-radius: 4,
+  border-width: 1,
+  border-color: $gray-200,
+  box-shadow: none,
+  branding-position: bottom,
+  spacing: normal,
+  include-desc: yes,
+  background-category-header: $white,
+  font-size: normal,
+  header-color: $black,
+  title-color: $black,
+  subtitle-color: $black,
+  text-color: $black,
+  highlight-color: $purple,
+  highlight-opacity: 0.1,
+  highlight-type: underline
+);
+
+$input-btn-focus-width:       0;

assets/scss/components/_alerts.scss

@@ -0,0 +1,164 @@
+.alert {
+  font-family: $font-family-monospace;
+  font-size: $font-size-sm;
+}
+
+.alert-icon {
+  margin-right: 0.75rem;
+}
+
+.docs main .alert {
+  margin: 2rem -1.5rem;
+}
+
+.alert .alert-link {
+  text-decoration: underline;
+}
+
+.alert-doks {
+  background: $beige;
+  color: $black;
+}
+
+/*
+.alert-light {
+  color: #215888;
+  background: linear-gradient(-45deg, rgb(212, 245, 255), rgb(234, 250, 255), rgb(234, 250, 255), #d3f6ef);
+}
+
+.alert-light .alert-link {
+  color: #215888;
+}
+*/
+
+.alert-white {
+  background-color: rgba(255, 255, 255, 0.95);
+}
+
+.alert-primary {
+  color: $white;
+  background-color: $primary;
+}
+
+.alert a {
+  text-decoration: underline;
+}
+
+.alert-primary .alert-link {
+  color: $white;
+}
+
+/*
+.alert-primary {
+  color: #084298;
+  background-color: #cfe2ff;
+  border-color: #b6d4fe;
+}
+
+.alert-primary .alert-link {
+  color: #06357a;
+}
+*/
+
+.alert-secondary {
+  color: #41464b;
+  background-color: #e2e3e5;
+  border-color: #d3d6d8;
+}
+
+.alert-secondary .alert-link {
+  color: #34383c;
+}
+
+.alert-success {
+  color: #0f5132;
+  background-color: #d1e7dd;
+  border-color: #badbcc;
+}
+
+.alert-success .alert-link {
+  color: #0c4128;
+}
+
+.alert-info {
+  color: #055160;
+  background-color: #cff4fc;
+  border-color: #b6effb;
+}
+
+.alert-info .alert-link {
+  color: #04414d;
+}
+
+.alert-warning {
+  color: #664d03;
+  background-color: #fff3cd;
+  border-color: #ffecb5;
+}
+
+.alert-warning .alert-link {
+  color: #523e02;
+}
+
+.alert-danger {
+  color: #842029;
+  background-color: #f8d7da;
+  border-color: #f5c2c7;
+}
+
+.alert-danger .alert-link {
+  color: #6a1a21;
+}
+
+.alert-light {
+  color: #636464;
+  background-color: #fefefe;
+  border-color: #fdfdfe;
+}
+
+.alert-light .alert-link {
+  color: #4f5050;
+}
+
+.alert-dark {
+  color: #141619;
+  background-color: #d3d3d4;
+  border-color: #bcbebf;
+}
+
+.alert-dark .alert-link {
+  color: #101214;
+}
+
+.alert .alert-link:hover,
+.alert .alert-link:focus {
+  text-decoration: none;
+}
+
+.alert-dismissible .btn-close {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 1rem;
+  z-index: 2;
+  padding: 0.5rem;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
+  background-size: 1.5rem;
+  filter: invert(1) grayscale(100%) brightness(200%);
+}
+
+@include media-breakpoint-up(md) {
+  .alert-dismissible .btn-close {
+    background-size: 1.25rem;
+  }
+}
+
+[data-global-alert="closed"] #announcement {
+  display: none;
+}
+
+.alert code {
+  background: darken($beige, 5%);
+  color: $black;
+  padding: 0.25rem 0.5rem;
+}

assets/scss/components/_buttons.scss

@@ -0,0 +1,257 @@
+.navbar .btn-link {
+  color: $navbar-light-color;
+  padding: 0.4375rem 0;
+}
+
+#mode {
+  padding: 0.5rem;
+}
+
+.btn-link:focus {
+  outline: 0;
+  box-shadow: none;
+}
+
+#navigation {
+  margin-left: 1.25rem;
+}
+
+@include media-breakpoint-up(lg) {
+  #mode {
+    margin-left: 0.5rem;
+    margin-right: 0.25rem;
+  }
+
+  .navbar .btn-link {
+    padding: 0.5625em 0.25rem 0.5rem 0.125rem;
+  }
+}
+
+.navbar .btn-link:hover {
+  color: $navbar-light-hover-color;
+}
+
+.navbar .btn-link:active {
+  color: $navbar-light-active-color;
+}
+
+body .toggle-dark {
+  display: block;
+}
+
+body .toggle-light {
+  display: none;
+}
+
+[data-dark-mode] body .toggle-light {
+  display: block;
+}
+
+[data-dark-mode] body .toggle-dark {
+  display: none;
+}
+
+pre {
+  position: relative;
+}
+
+@include media-breakpoint-down(md) {
+  .btn-copy {
+    display: none;
+  }
+}
+
+.btn-copy {
+  transition: opacity 0.3s ease-in-out;
+  visibility: hidden !important;
+  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) {
+  pre:hover .btn-copy {
+    visibility: visible !important;
+  }
+}
+
+.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: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  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::after {
+  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;
+}
+
+.btn-toggle[aria-expanded="true"]::after {
+  transform: rotate(90deg);
+}
+
+.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;
+}
+
+.dropdown-menu {
+  /*
+  width: 100%;
+  */
+
+  width: auto;
+}
+
+@include media-breakpoint-up(lg) {
+  .dropdown-menu {
+    width: auto;
+  }
+}
+
+.doks-navbar .dropdown-menu,
+.doks-subnavbar .dropdown-menu {
+  font-size: 0.875rem;
+}
+
+.doks-navbar .dropdown-item.current,
+.doks-subnavbar .dropdown-item.current {
+  font-weight: 600;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 1rem top 0.6rem;
+  background-size: 0.75rem 0.75rem;
+}
+
+.btn-close {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
+  background-size: 1.5rem;
+}
+
+.offcanvas-header .btn-close {
+  margin-right: 0 !important;
+}
+
+.dropdown-toggle::after {
+  display: none;
+}
+
+.dropdown-caret {
+  margin-left: -0.1875rem;
+  margin-right: -0.3125rem;
+}
+
+.dropdown-menu-main .dropdown-item {
+  color: inherit;
+  font-size: $font-size-base;
+  font-weight: 400;
+  text-decoration: none;
+}
+
+.dropdown-menu-main .dropdown-item:hover {
+  background-color: transparent;
+  color: $primary;
+}
+
+.dropdown-menu-main .dropdown-item.active {
+  color: $primary;
+  font-weight: 400;
+  text-decoration: none;
+  background-color: inherit;
+}
+
+.dropdown-menu-main .dropdown-item.active:hover {
+  background-color: transparent;
+}

assets/scss/components/_code.scss

@@ -0,0 +1,66 @@
+pre,
+code,
+kbd,
+samp {
+  font-family: $font-family-monospace;
+  font-size: $font-size-sm;
+  border-radius: $border-radius;
+}
+
+code {
+  background: $beige;
+  color: $black;
+  padding: 0.25rem 0.5rem;
+}
+
+pre {
+  margin: 2rem 0;
+}
+
+pre code {
+  display: block;
+  overflow-x: auto;
+  line-height: $line-height-base;
+  padding: 1.25rem 1.5rem;
+  tab-size: 4;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+.hljs {
+  padding: 1.5rem !important;
+}
+
+@include media-breakpoint-down(sm) {
+  pre,
+  code,
+  kbd,
+  samp {
+    border-radius: 0;
+  }
+
+  pre {
+    margin: 2rem -1.5rem;
+  }
+}
+
+pre code::-webkit-scrollbar {
+  height: 5px;
+}
+
+pre code::-webkit-scrollbar-thumb {
+  background: $gray-400;
+}
+
+pre code:hover {
+  scrollbar-width: thin;
+  scrollbar-color: $gray-500 transparent;
+}
+
+pre code::-webkit-scrollbar-thumb:hover {
+  background: $gray-500;
+}
+
+code.language-mermaid {
+  background: none;
+}

assets/scss/components/_comments.scss

@@ -0,0 +1,30 @@
+.comment-list {
+  @extend .list-unstyled;
+}
+
+.comment-list ol {
+  list-style: none;
+}
+
+.comment-form p {
+  @extend .form-group !optional;
+}
+
+.comment-form input[type="text"],
+.comment-form input[type="email"],
+.comment-form input[type="url"],
+.comment-form textarea {
+  @extend .form-control;
+}
+
+.comment-form input[type="submit"] {
+  @extend .btn;
+  @extend .btn-secondary;
+}
+
+blockquote {
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+  border-left: 3px solid $gray-300;
+  padding-left: 1rem;
+}

assets/scss/components/_details.scss

@@ -0,0 +1,77 @@
+details {
+  display: block;
+  border: 1px solid $gray-200;
+  border-radius: 0.25rem;
+  padding: 0.5rem 1rem 0;
+  margin: 0.5rem 0;
+}
+
+/*
+details summary {
+  &::marker {
+    content: "";
+  }
+}
+*/
+
+summary {
+  list-style: none;
+  display: inline-block;
+  width: calc(100% + 2rem);
+  margin: -0.5rem -1rem 0;
+  padding: 0.5rem 0.75rem;
+}
+
+summary::-webkit-details-marker {
+  display: none;
+}
+
+summary:hover {
+  background: $gray-100;
+}
+
+details summary::before {
+  display: inline-block;
+  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: center center;
+  margin-right: 0.375rem;
+}
+
+details[open] > summary::before {
+  transform: rotate(90deg);
+}
+
+/*
+details summary > * {
+  display: inline-block;
+}
+*/
+
+details[open] {
+  padding: 0.5rem 1rem;
+}
+
+details[open] > summary {
+  border-bottom: 1px solid $gray-300;
+  margin-bottom: 0.5rem;
+}
+
+details h2,
+details h3,
+details h4 {
+  margin: 1rem 0 0.5rem;
+}
+
+details p:last-child {
+  margin-bottom: 0;
+}
+
+details ul,
+details ol {
+  margin-bottom: 0;
+}
+
+details pre {
+  margin: 0 0 1rem;
+}

assets/scss/components/_forms.scss

@@ -0,0 +1,19 @@
+/** Search form */
+.search-form {
+  @extend .form-inline !optional;
+}
+
+.search-form label {
+  @extend .form-group;
+
+  font-weight: normal;
+}
+
+.search-form .search-field {
+  @extend .form-control;
+}
+
+.search-form .search-submit {
+  @extend .btn;
+  @extend .btn-secondary;
+}

assets/scss/components/_images.scss

@@ -0,0 +1,62 @@
+figure {
+  margin: 0 0 1rem;
+  display: inline-block;
+}
+
+figure img {
+  margin-bottom: 0.5rem;
+  line-height: 1;
+  max-width: 100%;
+  height: auto;
+}
+
+figure figcaption {
+  margin: 0.25rem 0 0.75rem;
+  font-size: 0.875em;
+  color: #6c757d;
+}
+
+.figure-caption {
+  margin: 0.25rem 0 0.75rem;
+}
+
+figure.wide {
+  margin: 2rem -1.5rem;
+}
+
+figure.wide .figure-caption {
+  margin: 0.25rem 1.5rem 0.75rem;
+}
+
+@include media-breakpoint-up(md) {
+  figure.wide {
+    margin: 2rem -2.5rem;
+  }
+
+  figure.wide .figure-caption {
+    margin: 0.25rem 2.5rem 0.75rem;
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  figure.wide {
+    margin: 2rem -5rem;
+  }
+
+  figure.wide .figure-caption {
+    margin: 0.25rem 5rem 0.75rem;
+  }
+}
+
+.blur-up {
+  filter: blur(5px);
+}
+
+.blur-up.lazyloaded {
+  filter: unset;
+}
+
+.img-simple {
+  margin-top: 0.375rem;
+  margin-bottom: 1.25rem;
+}

assets/scss/components/_mermaid.scss

@@ -0,0 +1,8 @@
+.mermaid {
+  margin: 1.5rem 0;
+  padding: 1.5rem;
+}
+
+.mermaid svg {
+  height: auto;
+}

assets/scss/components/_search.scss

@@ -0,0 +1,91 @@
+.navbar-form {
+  position: relative;
+}
+
+#suggestions {
+  position: absolute;
+  left: 0;
+  margin-top: 0.5rem;
+  width: calc(100vw - 3rem);
+  max-width: calc(400px - 3rem);
+  z-index: $zindex-dropdown;
+
+  @include media-breakpoint-up(md) {
+    right: -2rem;
+  }
+
+  @include media-breakpoint-up(lg) {
+    right: 0;
+  }
+}
+
+#suggestions a,
+.suggestion__no-results {
+  padding: 0.75rem;
+  margin: 0 0.5rem;
+}
+
+#suggestions a {
+  display: block;
+  text-decoration: none;
+}
+
+#suggestions a:focus {
+  background: $gray-100;
+  outline: 0;
+}
+
+#suggestions div:not(:first-child) {
+  border-top: 1px dashed $gray-200;
+}
+
+#suggestions div:first-child {
+  margin-top: 0.5rem;
+}
+
+#suggestions div:last-child {
+  margin-bottom: 0.5rem;
+}
+
+#suggestions a:hover {
+  background: $gray-100;
+}
+
+#suggestions span {
+  display: flex;
+  font-size: $font-size-base;
+}
+
+.suggestion__title {
+  font-weight: $headings-font-weight;
+  color: $black;
+}
+
+.suggestion__description,
+.suggestion__no-results {
+  color: $gray-700;
+}
+
+@include media-breakpoint-up(lg) {
+  #suggestions {
+    width: 31.125rem;
+    max-width: 31.125rem;
+  }
+
+  #suggestions a {
+    display: flex;
+  }
+
+  .suggestion__title {
+    width: 9rem;
+    padding-right: 1rem;
+    border-right: 1px solid $gray-200;
+    display: inline-block;
+    text-align: right;
+  }
+
+  .suggestion__description {
+    width: 19rem;
+    padding-left: 1rem;
+  }
+}

assets/scss/components/_syntax.scss

@@ -0,0 +1,62 @@
+/*
+
+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;
+}
+
+[data-dark-mode] body .hljs {
+  background: $body-overlay-dark;
+  color: $body-color-dark;
+}
+
+[data-dark-mode] body .hljs-string,
+[data-dark-mode] body .hljs-variable,
+[data-dark-mode] body .hljs-template-variable,
+[data-dark-mode] body .hljs-symbol,
+[data-dark-mode] body .hljs-bullet,
+[data-dark-mode] body .hljs-section,
+[data-dark-mode] body .hljs-addition,
+[data-dark-mode] body .hljs-attribute,
+[data-dark-mode] body .hljs-link {
+  color: $blue-300;
+}

assets/scss/components/_tables.scss

@@ -0,0 +1,5 @@
+table {
+  @extend .table;
+
+  margin: 3rem 0;
+}

assets/scss/layouts/_footer.scss

@@ -0,0 +1,20 @@
+.footer {
+  border-top: 1px solid $gray-200;
+  padding-top: 1.125rem;
+  padding-bottom: 1.125rem;
+}
+
+.footer ul {
+  margin-bottom: 0;
+}
+
+.footer li {
+  font-size: $font-size-sm;
+  margin-bottom: 0;
+}
+
+@include media-breakpoint-up(md) {
+  .footer li {
+    font-size: $font-size-base;
+  }
+}

assets/scss/layouts/_header.scss

@@ -0,0 +1,515 @@
+.banner .nav li {
+  @extend .nav-item;
+}
+
+.banner .nav a {
+  @extend .nav-link;
+}
+
+.navbar-text {
+  margin-left: 1rem;
+}
+
+.navbar-brand {
+  font-weight: $headings-font-weight;
+}
+
+/*
+.navbar-light .navbar-brand,
+.navbar-light .navbar-brand:hover,
+.navbar-light .navbar-brand:active {
+  color: $body-color;
+}
+
+.navbar-light .navbar-nav .active .nav-link {
+  color: $primary;
+}
+*/
+
+.navbar {
+  z-index: 1000;
+  background-color: rgba(255, 255, 255, 0.95);
+  background-color: #59316b;
+  border-bottom: 1px solid $gray-200;
+
+  /*
+  margin-top: 4px;
+  */
+}
+
+@include media-breakpoint-up(lg) {
+  .navbar {
+    z-index: 1025;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .navbar-brand {
+    font-size: $font-size-xl;
+  }
+
+  .navbar-text {
+    margin-left: 1.25rem;
+  }
+}
+
+.navbar-nav {
+  flex-direction: row;
+}
+
+.nav-item {
+  margin-left: 0;
+}
+
+@include media-breakpoint-up(md) {
+  .nav-item {
+    margin-left: 0.5rem;
+  }
+}
+
+/*
+@include media-breakpoint-down(sm) {
+  .nav-item:first-child {
+    margin-left: 0;
+  }
+}
+*/
+
+@include media-breakpoint-down(md) {
+  .navbar .container {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+}
+
+.break {
+  flex-basis: 100%;
+  height: 0;
+}
+
+button#doks-languages {
+  margin: 0.25rem 0 0;
+
+  @include media-breakpoint-up(lg) {
+    margin: 0.25rem 0.5rem 0 0.25rem;
+  }
+}
+
+button#doks-versions {
+  margin: 0.25rem 0 0;
+
+  @include media-breakpoint-up(lg) {
+    margin: 0.25rem 0.5rem 0 0.25rem;
+  }
+}
+
+.offcanvas .nav-link {
+  color: $body-color;
+}
+
+.doks-subnavbar {
+  background-color: rgba(255, 255, 255, 0.95);
+  border-bottom: 1px solid $gray-200;
+}
+
+.doks-subnavbar .nav-link {
+  padding: 0.5rem 1.5rem 0.5rem 0;
+}
+
+.doks-subnavbar .nav-link:first-child {
+  padding: 0.5rem 1.5rem 0.5rem 0;
+}
+
+.offcanvas .nav-link:hover,
+.offcanvas .nav-link:focus {
+  color: $link-color;
+}
+
+.offcanvas .nav-link.active {
+  color: $link-color;
+}
+
+/*
+.navbar {
+  background-color: rgba(255, 255, 255, 0.95);
+  border-bottom: 1px solid $gray-200;
+  margin-top: 4px;
+}
+*/
+
+.header-bar {
+  border-top: 4px solid;
+  border-image-source: linear-gradient(90deg, $primary, #8ed6fb 50%, #d32e9d);
+  border-image-slice: 1;
+}
+
+.offcanvas .header-bar {
+  margin-bottom: -4px;
+}
+
+.home .navbar {
+  border-bottom: 0;
+}
+
+/*
+.navbar-form {
+  position: relative;
+  margin-top: 0.25rem;
+}
+*/
+
+@include media-breakpoint-up(md) {
+  .navbar-brand {
+    margin-right: 0.75rem !important;
+  }
+
+  .main-nav .nav-item:first-child .nav-link,
+  .social-nav .nav-item:first-child .nav-link {
+    padding-left: 0;
+  }
+
+  .main-nav .nav-item:last-child .nav-link,
+  .social-nav .nav-item:last-child .nav-link {
+    padding-right: 0;
+  }
+
+  .doks-search {
+    max-width: 20rem;
+    margin-top: 0.125rem;
+    margin-bottom: 0.125rem;
+  }
+
+  /*
+  .navbar-form {
+    margin-top: 0;
+    margin-left: 6rem;
+    margin-right: 1.5rem;
+  }
+  */
+}
+
+.form-control.is-search {
+  padding-right: 4rem;
+  border: 1px solid transparent;
+  background: $gray-100;
+
+  @include media-breakpoint-up(md) {
+    width: calc(100% + 2rem);
+  }
+
+  @include media-breakpoint-up(lg) {
+    width: 100%;
+  }
+}
+
+.form-control.is-search:focus {
+  border: 1px solid $primary;
+}
+
+.doks-search::after {
+  position: absolute;
+  top: 0.4625rem;
+  right: 0.5375rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.5rem;
+  padding-right: 0.3125rem;
+  padding-left: 0.3125rem;
+  font-size: $font-size-base * 0.75;
+  color: $gray-700;
+  content: "Ctrl + /";
+  border: 1px solid $gray-300;
+  border-radius: 0.25rem;
+
+  @include media-breakpoint-up(md) {
+    right: -1.4625rem;
+  }
+
+  @include media-breakpoint-up(lg) {
+    right: 0.3125rem;
+  }
+}
+
+/*
+@include media-breakpoint-up(lg) {
+  .navbar-form {
+    margin-left: 15rem;
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .navbar-form {
+    margin-left: 30rem;
+  }
+}
+*/
+
+/*
+.form-control.is-search {
+*/
+
+/*
+  padding-right: calc(1.5em + 0.75rem);
+  */
+
+/*
+  padding-right: 2.5rem;
+  background: $gray-100;
+  border: 0;
+  */
+
+/*
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right calc(0.375em + 0.1875rem) center;
+  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+  */
+
+/*
+}
+*/
+
+/*
+.navbar-form::after {
+  position: absolute;
+  top: 0.4625rem;
+  right: 0.5375rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.5rem;
+  padding-right: 0.4375rem;
+  padding-left: 0.4375rem;
+  font-size: $font-size-base * 0.75;
+  color: $gray-700;
+  content: "/";
+  border: 1px solid $gray-300;
+  border-radius: 0.25rem;
+}
+*/
+
+/*! purgecss start ignore */
+.algolia-autocomplete {
+  display: flex !important;
+}
+
+.algolia-autocomplete .ds-dropdown-menu {
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+}
+
+@include media-breakpoint-down(sm) {
+  .algolia-autocomplete .ds-dropdown-menu {
+    max-width: 512px !important;
+    min-width: 312px !important;
+    width: auto !important;
+  }
+
+  .algolia-autocomplete
+    .algolia-docsearch-suggestion
+    .algolia-docsearch-suggestion--subcategory-column {
+    font-weight: normal;
+  }
+
+  .algolia-autocomplete
+    .algolia-docsearch-suggestion
+    .algolia-docsearch-suggestion--subcategory-column::after {
+    content: "/";
+    margin-right: 0.25rem;
+  }
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
+  color: $black;
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--title {
+  margin-bottom: 0;
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
+  padding: 0 0.05em;
+}
+
+.algolia-autocomplete .algolia-docsearch-footer {
+  margin-top: 1rem;
+  margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+/*! purgecss end ignore */
+
+/*
+ * Source: https://medium.com/creative-technology-concepts-code/responsive-mobile-dropdown-navigation-using-css-only-7218e4498a99
+*/
+
+/* Style the menu icon for the dropdown */
+
+.navbar .menu-icon {
+  cursor: pointer;
+
+  /* display: inline-block; */
+
+  /* float: right; */
+  padding: 1.125rem 0.625rem;
+  margin: 0 0 0 -0.625rem;
+
+  /* position: relative; */
+  user-select: none;
+}
+
+.navbar .menu-icon .navicon {
+  background: $navbar-light-color;
+  display: block;
+  height: 2px;
+  position: relative;
+  transition: background 0.2s ease-out;
+  width: 18px;
+}
+
+.navbar .menu-icon .navicon::before,
+.navbar .menu-icon .navicon::after {
+  background: $navbar-light-color;
+  content: "";
+  display: block;
+  height: 100%;
+  position: absolute;
+  transition: all 0.2s ease-out;
+  width: 100%;
+}
+
+.navbar .menu-icon .navicon::before {
+  top: 5px;
+}
+
+.navbar .menu-icon .navicon::after {
+  top: -5px;
+}
+
+/* Add the icon and menu animations when the checkbox is clicked */
+
+.navbar .menu-btn {
+  display: none;
+}
+
+.navbar .menu-btn:checked ~ .navbar-collapse {
+  display: block;
+  max-height: 100vh;
+}
+
+.navbar .menu-btn:checked ~ .menu-icon .navicon {
+  background: transparent;
+}
+
+.navbar .menu-btn:checked ~ .menu-icon .navicon::before {
+  transform: rotate(-45deg);
+}
+
+.navbar .menu-btn:checked ~ .menu-icon .navicon::after {
+  transform: rotate(45deg);
+}
+
+.navbar .menu-btn:checked ~ .menu-icon:not(.steps) .navicon::before,
+.navbar .menu-btn:checked ~ .menu-icon:not(.steps) .navicon::after {
+  top: 0;
+}
+
+.btn-menu {
+  margin-left: 1rem;
+  border: transparent;
+  color: $white;
+}
+
+.btn-doks-light {
+  border: transparent;
+}
+
+.btn-menu,
+.doks-sidebar-toggle {
+  padding-right: 0.25rem;
+  padding-left: 0.25rem;
+  margin-right: -0.5rem;
+}
+
+.btn-menu:hover,
+.btn-doks-light:hover,
+.doks-sidebar-toggle:hover {
+  background: $pink-100;
+  border: transparent;
+}
+
+.btn-menu:focus,
+.btn-doks-light:focus,
+.doks-sidebar-toggle:focus,
+.doks-mode-toggle:focus {
+  outline: 0;
+  border: transparent;
+  color: $gray-200;
+}
+
+.doks-sidebar-toggle .doks-collapse,
+.doks-toc-toggle .doks-collapse {
+  display: none;
+}
+
+.doks-sidebar-toggle:not(.collapsed) .doks-expand,
+.doks-toc-toggle:not(.collapsed) .doks-expand {
+  display: none;
+}
+
+.doks-sidebar-toggle:not(.collapsed) .doks-collapse,
+.doks-toc-toggle:not(.collapsed) .doks-collapse {
+  display: inline-block;
+}
+
+.navbar-light .navbar-brand,
+.navbar-light .navbar-brand:hover,
+.navbar-light .navbar-brand:active {
+  color: $body-color;
+}
+
+.navbar-light .navbar-nav .active .nav-link {
+  color: $primary;
+}
+
+.dropdown-divider {
+  border-top: 1px dashed $gray-200;
+}
+
+.dropdown-item:hover {
+  background: $gray-100;
+}
+
+.dropdown-item:active {
+  color: inherit;
+}
+
+.social-link {
+  padding-left: 0.5rem;
+
+  @include media-breakpoint-up(md) {
+    padding-left: 0;
+  }
+
+  @include media-breakpoint-up(lg) {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .offcanvas .nav-link {
+    color: $white;
+  }
+
+  .offcanvas .nav-link:hover,
+  .offcanvas .nav-link:focus {
+    color: $gray-200;
+  }
+
+  .offcanvas .nav-link.active {
+    color: $gray-300;
+  }
+}

assets/scss/layouts/_pages.scss

@@ -0,0 +1,64 @@
+.docs-content > h2[id]::before,
+.docs-content > h3[id]::before,
+.docs-content > h4[id]::before {
+  display: block;
+  height: 6rem;
+  margin-top: -6rem;
+  content: "";
+}
+
+.anchor {
+  visibility: hidden;
+}
+
+h1:hover a,
+h2:hover a,
+h3:hover a,
+h4:hover a {
+  visibility: visible;
+  text-decoration: none;
+}
+
+.card-list {
+  margin-top: 2.25rem;
+}
+
+.page-footer-meta {
+  margin-top: 3rem;
+}
+
+.edit-page,
+.last-modified {
+  font-size: $font-size-sm;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+@include media-breakpoint-up(md) {
+  .edit-page,
+  .last-modified {
+    font-size: $font-size-base;
+    margin-top: 0.75rem;
+    margin-bottom: 0.25rem;
+  }
+}
+
+.edit-page svg,
+.last-modified svg {
+  margin-right: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+p.meta {
+  margin-top: 0.5rem;
+  font-size: $font-size-base;
+}
+
+.breadcrumb {
+  margin-top: 2.25rem;
+  font-size: $font-size-base;
+}
+
+.page-link:hover {
+  text-decoration: none;
+}

assets/scss/layouts/_posts.scss

@@ -0,0 +1,57 @@
+.home .card,
+.contributors.list .card,
+.blog.list .card,
+.blog.single .card,
+.categories.list .card,
+.tags.list .card {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  transition: transform 0.3s;
+}
+
+.home .card:hover,
+.contributors.list .card:hover,
+.blog.list .card:hover,
+.blog.single .card:hover,
+.categories.list .card:hover,
+.tags.list .card:hover {
+  transform: scale(1.025);
+}
+
+.contributors.list .card.card-terms:hover,
+.categories.list .card.card-terms:hover,
+.tags.list .card.card-terms:hover {
+  transform: none;
+}
+
+.home .card-body,
+.contributors.list .card-body,
+.blog.list .card-body,
+.blog.single .card-body,
+.categories.list .card-body,
+.tags.list .card-body {
+  padding: 0 2rem 1rem;
+}
+
+.contributors.list .card-terms .card-body,
+.categories.list .card-terms .card-body,
+.tags.list .card-terms .card-body {
+  padding: 1rem;
+}
+
+.blog-header {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.blog-footer {
+  text-align: center;
+}
+
+.related-posts {
+  margin-top: 4rem;
+}
+
+h2.section-title {
+  margin-bottom: 1.25rem;
+}

assets/scss/layouts/_sidebar.scss

@@ -0,0 +1,116 @@
+.docs-links,
+.docs-toc {
+  scrollbar-width: thin;
+  scrollbar-color: $white $white;
+}
+
+.docs-links::-webkit-scrollbar,
+.docs-toc::-webkit-scrollbar {
+  width: 5px;
+}
+
+.docs-links::-webkit-scrollbar-track,
+.docs-toc::-webkit-scrollbar-track {
+  background: $white;
+}
+
+.docs-links::-webkit-scrollbar-thumb,
+.docs-toc::-webkit-scrollbar-thumb {
+  background: $white;
+}
+
+.docs-links:hover,
+.docs-toc:hover {
+  scrollbar-width: thin;
+  scrollbar-color: $gray-200 $white;
+}
+
+.docs-links:hover::-webkit-scrollbar-thumb,
+.docs-toc:hover::-webkit-scrollbar-thumb {
+  background: $gray-200;
+}
+
+.docs-links::-webkit-scrollbar-thumb:hover,
+.docs-toc::-webkit-scrollbar-thumb:hover {
+  background: $gray-200;
+}
+
+.docs-links h3,
+.page-links h3 {
+  text-transform: uppercase;
+  font-size: $font-size-base;
+  margin: 1.25rem 0 0.5rem;
+  padding: 1.5rem 0 0;
+}
+
+@include media-breakpoint-up(lg) {
+  .docs-links h3,
+  .page-links h3 {
+    margin: 1.125rem 1.5rem 0.75rem 0;
+    padding: 1.375rem 0 0;
+  }
+}
+
+.docs-links h3:not(:first-child) {
+  border-top: 1px solid $gray-200;
+}
+
+a.docs-link {
+  color: $body-color;
+  display: block;
+  padding: 0.125rem 0;
+  font-size: $font-size-base;
+}
+
+.page-links li {
+  margin-top: 0.375rem;
+  padding-top: 0.375rem;
+}
+
+.page-links li ul li {
+  border-top: none;
+  padding-left: 1rem;
+  margin-top: 0.125rem;
+  padding-top: 0.125rem;
+}
+
+.page-links li:not(:first-child) {
+  border-top: 1px dashed $gray-200;
+}
+
+.page-links a {
+  color: $body-color;
+  display: block;
+  padding: 0.125rem 0;
+  font-size: $font-size-base * 0.9375;
+}
+
+.docs-link:hover,
+.docs-link.active,
+.page-links a:hover {
+  text-decoration: none;
+  color: $link-color;
+}
+
+.nav-link.active,
+.dropdown-menu-main .dropdown-item.active,
+.docs-link.active {
+  font-weight: 500;
+}
+
+.docs-links h3.sidebar-link,
+.page-links h3.sidebar-link {
+  text-transform: none;
+  font-size: $font-size-md;
+  font-weight: normal;
+}
+
+.docs-links h3.sidebar-link a,
+.page-links h3.sidebar-link a {
+  color: $body-color;
+}
+
+.docs-links h3.sidebar-link a:hover,
+.page-links h3.sidebar-link a:hover {
+  text-decoration: underline;
+}

babel.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          browsers: [
+            // Best practice: https://github.com/babel/babel/issues/7789
+            '>=1%',
+            'not ie 11',
+            'not op_mini all'
+          ]
+        }
+      }
+    ]
+  ]
+};

config.toml

@@ -26,7 +26,7 @@ canonifyURLs = true
 enableRobotsTXT = true
 
 # Enable getting information from git regarding commits and changes
-enableGitInfo = false
+enableGitInfo = true
 
 # Enable emoji rendering
 enableEmoji = true
@@ -78,13 +78,10 @@ pluralizeListTitles = false
 
 # Custom parameters that are used throughout the project
 [params]
-  reportTitle = "United Apple"
-  reportSubtitle = "Apple’s censorship and compromises in Russia"
-  
-  dateform        = "May 3, 2023"
-  dateformShort   = "May 3"
-  dateformNum     = "2023-05-03"
-  dateformNumTime = "2023-05-03 16:30"
+  dateform        = "Jan 2, 2006"
+  dateformShort   = "Jan 2"
+  dateformNum     = "2006-01-02"
+  dateformNumTime = "2006-01-02 15:04"
 
   # Metadata mostly used in document's head
   description = ""
@@ -92,7 +89,9 @@ pluralizeListTitles = false
   images = ["img/default.png"]
 
   # Prefix of link to the git commit detail page. GitInfo must be enabled.
-  # gitUrl = "https://gitlab.com/XX/XXX/commit/"
+  gitUrl = "https://gitlab.torproject.org/tpo/web/dev/-/commit/"
+  GitRepo = "https://gitlab.torproject.org/tpo/web/dev/"
+  GitRepoBranch = "main"
 
   # Integrate Javascript files or stylesheets by adding the url to the external assets or by
   # linking local files with their path relative to the static folder, e.g. "css/styles.css"

config/_default/config.toml

@@ -0,0 +1,110 @@
+baseurl = ""
+canonifyURLs = true
+disableAliases = true
+disableHugoGeneratorInject = true
+enableEmoji = true
+enableGitInfo = false
+enableRobotsTXT = true
+paginate = 7
+rssLimit = 10
+
+# Multilingual
+defaultContentLanguage = "en"
+disableLanguages = ["de"]
+# defaultContentLanguageInSubdir = true
+
+# add redirects/headers
+[outputs]
+home = ["HTML", "RSS", "REDIRECTS", "HEADERS"]
+section = ["HTML", "RSS", "SITEMAP"]
+
+# remove .{ext} from text/netlify
+[mediaTypes."text/netlify"]
+suffixes = [""]
+delimiter = ""
+
+# add output format for netlify _redirects
+[outputFormats.REDIRECTS]
+mediaType = "text/netlify"
+baseName = "_redirects"
+isPlainText = true
+notAlternative = true
+
+# add output format for netlify _headers
+[outputFormats.HEADERS]
+mediaType = "text/netlify"
+baseName = "_headers"
+isPlainText = true
+notAlternative = true
+
+# add output format for section sitemap.xml
+[outputFormats.SITEMAP]
+mediaType = "application/xml"
+baseName = "sitemap"
+isHTML = false
+isPlainText = true
+noUgly = true
+rel  = "sitemap"
+
+[caches]
+  [caches.getjson]
+    dir = ":cacheDir/:project"
+    maxAge = "10s"
+
+[sitemap]
+  changefreq = "weekly"
+  filename = "sitemap.xml"
+  priority = 0.5
+
+[taxonomies]
+  contributor = "contributors"
+  category = "categories"
+  tag = "tags"
+
+[permalinks]
+  blog = "/blog/:title/"
+# docs = "/docs/1.0/:sections[1:]/:title/"
+
+[minify.tdewolff.html]
+  keepWhitespace = false
+
+[related]
+  threshold = 80
+  includeNewer = true
+  toLower = false
+    [[related.indices]]
+    name = "categories"
+    weight = 100
+    [[related.indices]]
+    name = "tags"
+    weight = 80
+    [[related.indices]]
+    name = "date"
+    weight = 10
+
+[module]
+  [module.hugoVersion]
+    extended = true
+    min = "0.119.0"
+    max = ""
+  [[module.mounts]]
+    source = "assets"
+    target = "assets"
+  [[module.mounts]]
+    source = "static"
+    target = "static"
+  [[module.mounts]]
+    source = "layouts"
+    target = "layouts"
+  [[module.mounts]]
+    source = "node_modules/flexsearch"
+    target = "assets/js/vendor/flexsearch"
+  [[module.mounts]]
+    source = "node_modules/katex"
+    target = "assets/js/vendor/katex"
+  [[module.mounts]]
+    source = "node_modules/mermaid"
+    target = "assets/js/vendor/mermaid"
+  [[module.mounts]]
+    source = "node_modules/@hyas/images/layouts"
+    target = "layouts"

config/_default/languages.toml

@@ -0,0 +1,15 @@
+[en]
+  languageName = "English"
+  contentDir = "content/en"
+  weight = 10
+  [en.params]
+    languageISO = "EN"
+    languageTag = "en-US"
+
+[de]
+  languageName = "German"
+  contentDir = "content/de"
+  weight = 15
+  [de.params]
+    languageISO = "DE"
+    languageTag = "de-DE"

config/_default/markup.toml

@@ -0,0 +1,29 @@
+defaultMarkdownHandler = "goldmark"
+
+[goldmark]
+  [goldmark.extensions]
+    linkify = false
+  [goldmark.parser]
+    autoHeadingID = true
+    autoHeadingIDType = "gitlab"
+    [goldmark.parser.attribute]
+      block = true
+      title = true
+  [goldmark.renderer]
+    unsafe = true
+
+[highlight]
+  codeFences = true
+  guessSyntax = false
+  hl_Lines = ""
+  lineNoStart = 1
+  lineNos = false
+  lineNumbersInTable = true
+  noClasses = false
+  style = "dracula"
+  tabWidth = 4
+
+[tableOfContents]
+  endLevel = 4
+  ordered = false
+  startLevel = 2

config/_default/menus/menus.en.toml

@@ -0,0 +1,47 @@
+[[main]]
+  name = "Docs"
+  url = "/docs/understanding-tor/overview/"
+  weight = 10
+
+[[main]]
+  name = "About"
+  url = "https://www.torproject.org/about/history/"
+  weight = "1"
+
+[[main]]
+  name = "Support"
+  url = "https://support.torproject.org/"
+  weight = "2"
+
+[[main]]
+  name = "Community"
+  url = "https://community.torproject.org/"
+  weight = "3"
+
+[[main]]
+  name = "Blog"
+  url = "https://blog.torproject.org"
+  weight = "4"
+
+[[main]]
+  name = "Donate"
+  url = "https://donate.torproject.org"
+  weight = "5"
+
+[[social]]
+  name = "GitLab"
+  pre = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-gitlab\"><path d=\"M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.82 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0 1 18.6 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.51L23 13.45a.84.84 0 0 1-.35.94z\"></path></svg>"
+  url = "https://gitlab.torproject.org/tpo/web/dev"
+  post = "v0.1.0"
+  weight = 10
+
+[[social]]
+  name = "Twitter"
+  pre = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-twitter\"><path d=\"M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z\"></path></svg>"
+  url = "https://twitter.com/torproject"
+  weight = 20
+
+ [[footer]]
+   name = "Privacy"
+   url = "/privacy-policy/"
+   weight = 10

config/_default/params.toml

@@ -0,0 +1,112 @@
+# Meta Data for SEO
+
+## Homepage
+title = "Tor Developer Docs"
+titleSeparator = "-"
+titleAddition = "Documentation for the Tor Project developers"
+description = "#"
+
+## Documentation
+# docsVersion = "0.1"
+
+## Open Graph
+images = ["tor-logo.png"]
+ogLocale = "en_US"
+domainTLD = "dev.torproject.org"
+titleHome = "Tor Developers Docs"
+
+## Twitter Cards
+twitterSite = "@torproject"
+twitterCreator = "@toproject"
+
+## JSON-LD
+# schemaType = "Person"
+schemaType = "Organization"
+schemaName = "Tor Project"
+schemaAuthor = "Tor Project"
+schemaAuthorTwitter = "https://twitter.com/torproject"
+schemaAuthorLinkedIn = "https://www.linkedin.com/company/tor-project/"
+schemaAuthorGitHub = "https://gitlab.torproject.org"
+schemaLocale = "en-US"
+schemaLogo = "tor-logo.png"
+schemaLogoWidth = 512
+schemaLogoHeight = 512
+schemaImage = "tor-logo.png"
+schemaImageWidth = 1280
+schemaImageHeight = 640
+schemaTwitter = "https://twitter.com/torproject"
+schemaLinkedIn = ""
+schemaGitHub = "https://gitlab.torproject.org"
+schemaSection = "blog"
+
+## Sitelinks Search Box
+siteLinksSearchBox = true
+
+## Chrome Browser
+themeColor = "#7e4798"
+
+# Images
+quality = 90
+bgColor = "#fff"
+landscapePhotoWidths = [900, 800, 700, 600, 500]
+portraitPhotoWidths = [800, 700, 600, 500]
+lqipWidth = "20x"
+smallLimit = "300"
+
+# Images
+imageResponsive = true
+imageConvertTo = "webp"
+imageImageSizes = ["480","720","1080","1280","1600","2048"]
+singleSize = false
+imageAddClass = "img-fluid lazyload blur-up"
+
+### Image template
+defaultImage = "default-image.png" # put in `./assets/images/`
+fillImage = "1270x740 Center" # normalize image size
+
+# Footer
+footer = "Powered by <a class=\"text-muted\" href=\"https://gohugo.io/\">Hugo</a>"
+
+# Feed
+copyRight = "Copyright (c) 2023 Tor Project"
+
+# Alert
+alert = false
+alertDismissable = true
+alertText = "Introducing the new Tor Developer Docs website! <a class=\"alert-link stretched-link\" href=\"https://torproject.org/\" target=\"_blank\" rel=\"noopener\">Check out new website</a>"
+
+# Edit Page
+# repoHost [Github | Gitea | GitLab | Bitbucket | BitbucketServer ] is used for building the edit link based on git hoster
+repoHost = "GitLab"
+docsRepo = "https://gitlab.torproject.org/tpo/web/dev"
+docsRepoBranch = "main"
+docsRepoSubPath = ""
+editPage = true
+lastMod = true
+
+[sections]
+  sectionNav = ["docs", "guides"]
+
+[options]
+  lazySizes = true
+  clipBoard = true
+  instantPage = true
+  flexSearch = true
+  searchSectionsShow = []
+  searchSectionsIndex = []
+  darkMode = false
+  bootStrapJs = true
+  breadCrumb = true
+  highLight = true
+  kaTex = false
+  multilingualMode = false
+  docsVersioning = false
+  fullWidth = true
+  navbarSticky = true
+  toTopButton = false
+  scrollSpy = true
+
+[menu]
+  [menu.section]
+    auto = true
+    collapsibleSidebar = true

config/next/config.toml

@@ -0,0 +1 @@
+canonifyURLs = false

config/postcss.config.js

@@ -0,0 +1,44 @@
+const autoprefixer = require('autoprefixer');
+const purgecss = require('@fullhuman/postcss-purgecss');
+const whitelister = require('purgecss-whitelister');
+
+module.exports = {
+  plugins: [
+    autoprefixer(),
+    purgecss({
+      content: [
+        './layouts/**/*.html',
+        './content/**/*.md',
+      ],
+      safelist: [
+        'lazyloaded',
+        'table',
+        'thead',
+        'tbody',
+        'tr',
+        'th',
+        'td',
+        'h5',
+        'alert-link',
+        'container-xxl',
+        'container-fluid',
+        'offcanvas-backdrop',
+        'img-fluid',
+        'lazyload',
+        'blur-up',
+        'figcaption',
+        ...whitelister([
+          './assets/scss/components/_alerts.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/bootstrap/scss/_dropdown.scss',
+          './node_modules/katex/dist/katex.css',
+        ]),
+      ],
+    }),
+  ],
+}

config/production/config.toml

@@ -0,0 +1 @@
+canonifyURLs = false

content/en/_index.md

@@ -0,0 +1,9 @@
+---
+title : "Tor Developer Docs"
+description: "Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize."
+lead: "This is the homepage for the Tor Project Developer Docs website."
+date: 2020-10-06T08:47:36+00:00
+lastmod: 2020-10-06T08:47:36+00:00
+draft: false
+images: []
+---

content/en/docs/_index.md

@@ -0,0 +1,9 @@
+---
+title : "Docs"
+description: "Tor Developer Docs."
+lead: ""
+date: 2020-10-06T08:48:23+00:00
+lastmod: 2020-10-06T08:48:23+00:00
+draft: false
+images: []
+---

content/en/docs/developing-tor/_index.md

@@ -0,0 +1,3 @@
++++
+title = "Developing Tor"
++++

content/en/docs/fighting-censorship/_index.md

@@ -0,0 +1,3 @@
++++
+title = "Fighting Censorship"
++++

content/en/docs/observing-tor-network/_index.md

@@ -0,0 +1,3 @@
++++
+title = "Observing Tor Network"
++++

content/en/docs/onion-services/_index.md

@@ -0,0 +1,3 @@
++++
+title = "Onion Services"
++++

content/en/docs/the-tor-ecosystem/_index.md

@@ -0,0 +1,3 @@
++++
+title = "The Tor Ecosystem"
++++

content/en/docs/the-tor-network/_index.md

@@ -0,0 +1,3 @@
++++
+title = "The Tor Network"
++++

content/en/docs/the-tor-network/why-we-need-tor.md

@@ -0,0 +1,79 @@
++++
+title = "Why We Need Tor"
+weight = 2
+toc = true
++++
+
+At its heart, HTML is a language made up of elements, which can be applied to pieces of text to give them different meaning in a document (Is it a paragraph? Is it a bulleted list? part of a table?),  structure a document into logical sections (Does it have a header? Three columns of content?)
+
+```html
+<ul> 
+     <li class="tordev">1<sup>st</sup></li> 
+     <li>2<sup>nd</sup></li> 
+</ul>
+```
+
+## Testing
+
+Et aspernatur expedita atque. Aut pariatur itaque placeat nulla eos porro corrupti. Ex itaque qui. Illum officiis sed fuga accusantium et. Quia velit sequi. Ipsam voluptas et recusandae quis cupiditate sunt necessitatibus laboriosam aut. Non nulla magni facere. Libero quo cupiditate. Perferendis eius dolorum inventore assumenda nostrum asperiores eveniet deleniti. Laboriosam est sit nesciunt ipsa accusamus ut minima quaerat quae.
+ 
+Debitis possimus doloremque et perspiciatis est illo. Est tempore voluptates incidunt sint aut. Animi quas soluta sed rerum odio optio. Totam eaque et qui fugiat quo.
+ 
+Veniam eveniet et rem voluptas. Aperiam nisi eos culpa aut. Doloribus et quos quisquam est facere et. Ut possimus qui omnis quo quia quo qui.
+
+
+## More testing
+
+Et aspernatur expedita atque. Aut pariatur itaque placeat nulla eos porro corrupti. Ex itaque qui. Illum officiis sed fuga accusantium et. Quia velit sequi. Ipsam voluptas et recusandae quis cupiditate sunt necessitatibus laboriosam aut. Non nulla magni facere. Libero quo cupiditate. Perferendis eius dolorum inventore assumenda nostrum asperiores eveniet deleniti. Laboriosam est sit nesciunt ipsa accusamus ut minima quaerat quae.
+ 
+Debitis possimus doloremque et perspiciatis est illo. Est tempore voluptates incidunt sint aut. Animi quas soluta sed rerum odio optio. Totam eaque et qui fugiat quo.
+ 
+Veniam eveniet et rem voluptas. Aperiam nisi eos culpa aut. Doloribus et quos quisquam est facere et. Ut possimus qui omnis quo quia quo qui.Et aspernatur expedita atque. Aut pariatur itaque placeat nulla eos porro corrupti. Ex itaque qui. Illum officiis sed fuga accusantium et. Quia velit sequi. Ipsam voluptas et recusandae quis cupiditate sunt necessitatibus laboriosam aut. Non nulla magni facere. Libero quo cupiditate. Perferendis eius dolorum inventore assumenda nostrum asperiores eveniet deleniti. Laboriosam est sit nesciunt ipsa accusamus ut minima quaerat quae.
+ 
+Debitis possimus doloremque et perspiciatis est illo. Est tempore voluptates incidunt sint aut. Animi quas soluta sed rerum odio optio. Totam eaque et qui fugiat quo.
+ 
+Veniam eveniet et rem voluptas. Aperiam nisi eos culpa aut. Doloribus et quos quisquam est facere et. Ut possimus qui omnis quo quia quo qui.Et aspernatur expedita atque. Aut pariatur itaque placeat nulla eos porro corrupti. Ex itaque qui. Illum officiis sed fuga accusantium et. Quia velit sequi. Ipsam voluptas et recusandae quis cupiditate sunt necessitatibus laboriosam aut. Non nulla magni facere. Libero quo cupiditate. Perferendis eius dolorum inventore assumenda nostrum asperiores eveniet deleniti. Laboriosam est sit nesciunt ipsa accusamus ut minima quaerat quae.
+ 
+Debitis possimus doloremque et perspiciatis est illo. Est tempore voluptates incidunt sint aut. Animi quas soluta sed rerum odio optio. Totam eaque et qui fugiat quo.
+ 
+Veniam eveniet et rem voluptas. Aperiam nisi eos culpa aut. Doloribus et quos quisquam est facere et. Ut possimus qui omnis quo quia quo qui.
+
+
+## Hello there
+
+
+Et aspernatur expedita atque. Aut pariatur itaque placeat nulla eos porro corrupti. Ex itaque qui. Illum officiis sed fuga accusantium et. Quia velit sequi. Ipsam voluptas et recusandae quis cupiditate sunt necessitatibus laboriosam aut. Non nulla magni facere. Libero quo cupiditate. Perferendis eius dolorum inventore assumenda nostrum asperiores eveniet deleniti. Laboriosam est sit nesciunt ipsa accusamus ut minima quaerat quae.
+ 
+Debitis possimus doloremque et perspiciatis est illo. Est tempore voluptates incidunt sint aut. Animi quas soluta sed rerum odio optio. Totam eaque et qui fugiat quo.
+ 
+Veniam eveniet et rem voluptas. Aperiam nisi eos culpa aut. Doloribus et quos quisquam est facere et. Ut possimus qui omnis quo quia quo qui.Et aspernatur expedita atque. Aut pariatur itaque placeat nulla eos porro corrupti. Ex itaque qui. Illum officiis sed fuga accusantium et. Quia velit sequi. Ipsam voluptas et recusandae quis cupiditate sunt necessitatibus laboriosam aut. Non nulla magni facere. Libero quo cupiditate. Perferendis eius dolorum inventore assumenda nostrum asperiores eveniet deleniti. Laboriosam est sit nesciunt ipsa accusamus ut minima quaerat quae.
+ 
+Debitis possimus doloremque et perspiciatis est illo. Est tempore voluptates incidunt sint aut. Animi quas soluta sed rerum odio optio. Totam eaque et qui fugiat quo.
+ 
+Veniam eveniet et rem voluptas. Aperiam nisi eos culpa aut. Doloribus et quos quisquam est facere et. Ut possimus qui omnis quo quia quo qui.Et aspernatur expedita atque. Aut pariatur itaque placeat nulla eos porro corrupti. Ex itaque qui. Illum officiis sed fuga accusantium et. Quia velit sequi. Ipsam voluptas et recusandae quis cupiditate sunt necessitatibus laboriosam aut. Non nulla magni facere. Libero quo cupiditate. Perferendis eius dolorum inventore assumenda nostrum asperiores eveniet deleniti. Laboriosam est sit nesciunt ipsa accusamus ut minima quaerat quae.
+ 
+Debitis possimus doloremque et perspiciatis est illo. Est tempore voluptates incidunt sint aut. Animi quas soluta sed rerum odio optio. Totam eaque et qui fugiat quo.
+ 
+Veniam eveniet et rem voluptas. Aperiam nisi eos culpa aut. Doloribus et quos quisquam est facere et. Ut possimus qui omnis quo quia quo qui.Et aspernatur expedita atque. Aut pariatur itaque placeat nulla eos porro corrupti. Ex itaque qui. Illum officiis sed fuga accusantium et. Quia velit sequi. Ipsam voluptas et recusandae quis cupiditate sunt necessitatibus laboriosam aut. Non nulla magni facere. Libero quo cupiditate. Perferendis eius dolorum inventore assumenda nostrum asperiores eveniet deleniti. Laboriosam est sit nesciunt ipsa accusamus ut minima quaerat quae.
+ 
+Debitis possimus doloremque et perspiciatis est illo. Est tempore voluptates incidunt sint aut. Animi quas soluta sed rerum odio optio. Totam eaque et qui fugiat quo.
+ 
+Veniam eveniet et rem voluptas. Aperiam nisi eos culpa aut. Doloribus et quos quisquam est facere et. Ut possimus qui omnis quo quia quo qui.
+
+## Last test, for real
+
+ 
+Veniam eveniet et rem voluptas. Aperiam nisi eos culpa aut. Doloribus et quos quisquam est facere et. Ut possimus qui omnis quo quia quo qui.Et aspernatur expedita atque. Aut pariatur itaque placeat nulla eos porro corrupti. Ex itaque qui. Illum officiis sed fuga accusantium et. Quia velit sequi. Ipsam voluptas et recusandae quis cupiditate sunt necessitatibus laboriosam aut. Non nulla magni facere. Libero quo cupiditate. Perferendis eius dolorum inventore assumenda nostrum asperiores eveniet deleniti. Laboriosam est sit nesciunt ipsa accusamus ut minima quaerat quae.
+ 
+Debitis possimus doloremque et perspiciatis est illo. Est tempore voluptates incidunt sint aut. Animi quas soluta sed rerum odio optio. Totam eaque et qui fugiat quo.
+ 
+Veniam eveniet et rem voluptas. Aperiam nisi eos culpa aut. Doloribus et quos quisquam est facere et. Ut possimus qui omnis quo quia quo qui.
+
+
+### Oops
+
+Veniam eveniet et rem voluptas. Aperiam nisi eos culpa aut. Doloribus et quos quisquam est facere et. Ut possimus qui omnis quo quia quo qui.Et aspernatur expedita atque. Aut pariatur itaque placeat nulla eos porro corrupti. Ex itaque qui. Illum officiis sed fuga accusantium et. Quia velit sequi. Ipsam voluptas et recusandae quis cupiditate sunt necessitatibus laboriosam aut. Non nulla magni facere. Libero quo cupiditate. Perferendis eius dolorum inventore assumenda nostrum asperiores eveniet deleniti. Laboriosam est sit nesciunt ipsa accusamus ut minima quaerat quae.
+ 
+Debitis possimus doloremque et perspiciatis est illo. Est tempore voluptates incidunt sint aut. Animi quas soluta sed rerum odio optio. Totam eaque et qui fugiat quo.
+ 
+Veniam eveniet et rem voluptas. Aperiam nisi eos culpa aut. Doloribus et quos quisquam est facere et. Ut possimus qui omnis quo quia quo qui.Et aspernatur expedita atque. Aut pariatur itaque placeat nulla eos porro corrupti. Ex itaque qui. Illum officiis sed fuga accusantium et. Quia velit sequi. Ipsam voluptas et recusandae quis cupiditate sunt necessitatibu

content/en/docs/understanding-tor/_index.md

@@ -0,0 +1,10 @@
+---
+title: "Understanding Tor"
+description: "Help Tor."
+lead: ""
+date: 2020-10-06T08:49:15+00:00
+lastmod: 2020-10-06T08:49:15+00:00
+draft: false
+images: []
+weight: 600
+---

content/en/docs/understanding-tor/overview.md

@@ -0,0 +1,19 @@
++++
+title = "Overview"
+weight = 1
+toc = true
++++
+
+A two-minute video explaining what Tor is and how it works. This video is available for download and streaming both on Tor Project website and via YouTube in many different languages.
+
+The Tor network is a group of volunteer-operated servers that allows people to improve their privacy and security on the Internet. Tor's users employ this network by connecting through a series of virtual tunnels rather than making a direct connection, thus allowing both organizations and individuals to share information over public networks without compromising their privacy. Along the same line, Tor is an effective censorship circumvention tool, allowing its users to reach otherwise blocked destinations or content. Tor can also be used as a building block for software developers to create new communication tools with built-in privacy features.
+
+Individuals use Tor to keep websites from tracking them and their family members, or to connect to news sites, instant messaging services, or the like when these are blocked by their local Internet providers. Tor's onion services let users publish web sites and other services without needing to reveal the location of the site. Individuals also use Tor for socially sensitive communication: chat rooms and web forums for rape and abuse survivors, or people with illnesses.
+
+Journalists use Tor to communicate more safely with whistleblowers and dissidents. Non-governmental organizations (NGOs) use Tor to allow their workers to connect to their home website while they're in a foreign country, without notifying everybody nearby that they're working with that organization.
+
+Groups such as Indymedia recommend Tor for safeguarding their members' online privacy and security. Activist groups like the Electronic Frontier Foundation (EFF) recommend Tor as a mechanism for maintaining civil liberties online. Corporations use Tor as a safe way to conduct competitive analysis, and to protect sensitive procurement patterns from eavesdroppers. They also use it to replace traditional VPNs, which reveal the exact amount and timing of communication. Which locations have employees working late? Which locations have employees consulting job-hunting websites? Which research divisions are communicating with the company's patent lawyers?
+
+A branch of the U.S. Navy uses Tor for open source intelligence gathering, and one of its teams used Tor while deployed in the Middle East recently. Law enforcement uses Tor for visiting or surveilling web sites without leaving government IP addresses in their web logs, and for security during sting operations.
+
+The variety of people who use Tor is actually part of what makes it so secure. Tor hides you among the other users on the network, so the more populous and diverse the user base for Tor is, the more your anonymity will be protected. 

content/en/docs/understanding-tor/the-future-of-tor.md

@@ -0,0 +1,9 @@
++++
+title = "The Future of Tor"
+weight = 3
+toc = true
++++
+
+Providing a usable anonymizing network on the Internet today is an ongoing challenge. We want software that meets users' needs. We also want to keep the network up and running in a way that handles as many users as possible. Security and usability don't have to be at odds: As Tor's usability increases, it will attract more users, which will increase the possible sources and destinations of each communication, thus increasing security for everyone. We're making progress, but we need your help. Please consider running a relay or volunteering as a developer.
+
+Ongoing trends in law, policy, and technology threaten anonymity as never before, undermining our ability to speak and read freely online. These trends also undermine national security and critical infrastructure by making communication among individuals, organizations, corporations, and governments more vulnerable to analysis. Each new user and relay provides additional diversity, enhancing Tor's ability to put control over your security and privacy back into your hands. 

content/en/docs/understanding-tor/why-we-need-tor.md

@@ -0,0 +1,34 @@
++++
+title = "Why We Need Tor"
+weight = 2
+toc = true
++++
+
+Using Tor protects you against a common form of Internet surveillance known as "traffic analysis." Traffic analysis can be used to infer who is talking to whom over a public network. Knowing the source and destination of your Internet traffic allows others to track your behavior and interests. This can impact your checkbook if, for example, an e-commerce site uses price discrimination based on your country or institution of origin. It can even threaten your job and physical safety by revealing who and where you are. For example, if you're travelling abroad and you connect to your employer's computers to check or send mail, you can inadvertently reveal your national origin and professional affiliation to anyone observing the network, even if the connection is encrypted.
+
+How does traffic analysis work? Internet data packets have two parts: a data payload and a header used for routing. The data payload is whatever is being sent, whether that's an email message, a web page, or an audio file. Even if you encrypt the data payload of your communications, traffic analysis still reveals a great deal about what you're doing and, possibly, what you're saying. That's because it focuses on the header, which discloses source, destination, size, timing, and so on.
+
+A basic problem for the privacy minded is that the recipient of your communications can see that you sent it by looking at headers. So can authorized intermediaries like Internet service providers, and sometimes unauthorized intermediaries as well. A very simple form of traffic analysis might involve sitting somewhere between sender and recipient on the network, looking at headers.
+
+But there are also more powerful kinds of traffic analysis. Some attackers spy on multiple parts of the Internet and use sophisticated statistical techniques to track the communications patterns of many different organizations and individuals. Encryption does not help against these attackers, since it only hides the content of Internet traffic, not the headers.
+
+### The solution: a distributed, anonymous network
+
+How Tor works
+
+Tor helps to reduce the risks of both simple and sophisticated traffic analysis by distributing your transactions over several places on the Internet, so no single point can link you to your destination. The idea is similar to using a twisty, hard-to-follow route in order to throw off somebody who is tailing you — and then periodically erasing your footprints. Instead of taking a direct route from source to destination, data packets on the Tor network take a random pathway through several relays that cover your tracks so no observer at any single point can tell where the data came from or where it's going.
+
+To create a private network pathway with Tor, the user's software or client incrementally builds a circuit of encrypted connections through relays on the network. The circuit is extended one hop at a time, and each relay along the way knows only which relay gave it data and which relay it is giving data to. No individual relay ever knows the complete path that a data packet has taken. The client negotiates a separate set of encryption keys for each hop along the circuit to ensure that each hop can't trace these connections as they pass through.
+
+Tor circuit step two
+
+Once a circuit has been established, many kinds of data can be exchanged and several different sorts of software applications can be deployed over the Tor network. Because each relay sees no more than one hop in the circuit, neither an eavesdropper nor a compromised relay can use traffic analysis to link the connection's source and destination. Tor only works for TCP streams and can be used by any application with SOCKS support.
+
+For efficiency, the Tor software uses the same circuit for connections that happen within the same ten minutes or so. Later requests are given a new circuit, to keep people from linking your earlier actions to the new ones.
+
+Tor circuit step three
+Staying anonymous
+
+Tor can't solve all anonymity problems. It focuses only on protecting the transport of data. You need to use protocol-specific support software if you don't want the sites you visit to see your identifying information. For example, you can use Tor Browser while browsing the web to withhold some information about your computer's configuration.
+
+Also, to protect your anonymity, be smart. Don't provide your name or other revealing information in web forms. Be aware that, like all anonymizing networks that are fast enough for web browsing, Tor does not provide protection against end-to-end timing attacks: If your attacker can watch the traffic coming out of your computer, and also the traffic arriving at your chosen destination, he can use statistical analysis to discover that they are part of the same circuit

content/en/docs/writing-apps-that-use-tor/_index.md

@@ -0,0 +1,3 @@
++++
+title = "Writing Apps That Use Tor"
++++

content/en/privacy-policy/index.md

@@ -0,0 +1,10 @@
+---
+title: "Privacy Policy"
+description: "We do not use cookies and we do not collect any personal data."
+date: 2020-08-27T19:23:18+02:00
+lastmod: 2020-08-27T19:23:18+02:00
+draft: true
+images: []
+---
+
+__TLDR__: We do not use cookies and we do not collect any personal data.

content/en/versions.md

@@ -0,0 +1,11 @@
+---
+title: "Versions"
+description: ""
+lead: "An appendix of hosted documentation for nearly every release of Tor Dev Docs"
+date: 2021-09-24T08:50:23+02:00
+lastmod: 2021-09-24T08:50:23+02:00
+draft: true
+images: []
+layout: versions
+url: "/docs/versions/"
+---

data/docs-versions.yml

@@ -0,0 +1,60 @@
+# - group: v1.x
+#   baseurl: "https://getbootstrap.com"
+#   description: "Every minor and patch release from v1 is listed below."
+#   versions:
+#     - v: "1.0.0"
+#     - v: "1.1.0"
+#     - v: "1.1.1"
+#     - v: "1.2.0"
+#     - v: "1.3.0"
+#     - v: "1.4.0"
+#
+# - group: v2.x
+#   baseurl: "https://getbootstrap.com"
+#   description: "Every minor and patch release from v2 is listed below."
+#   versions:
+#     - v: "2.0.0"
+#     - v: "2.0.1"
+#     - v: "2.0.2"
+#     - v: "2.0.3"
+#     - v: "2.0.4"
+#     - v: "2.1.0"
+#     - v: "2.1.1"
+#     - v: "2.2.0"
+#     - v: "2.2.1"
+#     - v: "2.2.2"
+#     - v: "2.3.0"
+#     - v: "2.3.1"
+#     - v: "2.3.2"
+#
+# - group: v3.x
+#   baseurl: "https://getbootstrap.com/docs"
+#   description: "Every minor and patch release from v3 is listed below. Last update was v3.4.1."
+#   versions:
+#     - v: "3.3"
+#     - v: "3.4"
+#
+# - group: v4.x
+#   baseurl: "https://getbootstrap.com/docs"
+#   description: "Our previous major release with its minor releases. Last update was v4.6.0."
+#   versions:
+#     - v: "4.0"
+#     - v: "4.1"
+#     - v: "4.2"
+#     - v: "4.3"
+#     - v: "4.4"
+#     - v: "4.5"
+#     - v: "4.6"
+
+- group: v0.x
+  baseurl: "/docs"
+  description: "Current major release. Last update was v0.2.0."
+  versions:
+    - v: "0.1"
+    - v: "0.2"
+
+- group: v1.x
+  baseurl: "/docs"
+  description: "Every minor and patch release from v1 is listed below. Last update was v1.0.0."
+  versions:
+    - v: "1.0"

functions/hi-from-lambda.js

@@ -0,0 +1,11 @@
+exports.handler = (event, context, callback) => {
+  callback (null, {
+    statusCode: 200,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      message: 'Hi from Lambda.',
+    }),
+  });
+}

i18n/de.yaml

@@ -0,0 +1,5 @@
+- id: get-started
+  translation: "Loslegen"
+
+- id: on-this-page
+  translation: "Auf dieser Seite"

i18n/en.yaml

@@ -0,0 +1,17 @@
+- id: get-started
+  translation: "Get Started"
+
+- id: on-this-page
+  translation: "On this page"
+
+- id: search-text
+  translation: "Search docs..."
+
+- id: 404-title
+  translation: "Page not found :("
+
+- id: 404-text
+  translation: "The page you are looking for doesn't exist or has been moved."
+
+- id: browse
+  translation: "Browse"

layouts/404.html

@@ -1,25 +1,10 @@
-{{ define "main" }}
-<main>
-    <div class="container-fluid">
-        <div class="container">
-            <div class="row justify-content-center">
-                <div class="col-xl-7 col-lg-7 col-md-12 col-12 py-5 text-center">
-                    <p>
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
-                            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
-                        </svg>
-                    </p>
-                    <div>
-                        <h1>404</h1>
-                        <p>Page not Found</p>
-                        <p>
-                            <a href="{{.Site.BaseURL | relLangURL }}">Home</a>
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-</main>
+{{ define "main" }}
+<div class="row justify-content-center">
+  <div class="col-md-12 col-lg-10 col-xl-8">
+    <article>
+      <h1 class="text-center">{{ i18n "404-title" }}</h1>
+      <p class="text-center">{{ i18n "404-text" }}</p>
+    </article>
+  </div>
+</div>
 {{ end }}

layouts/_default/_markup/render-heading.html

@@ -0,0 +1 @@
+<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }} <a href="#{{ .Anchor | safeURL }}" class="anchor" aria-hidden="true">#</a></h{{ .Level }}>

layouts/_default/baseof.html

@@ -1,95 +1,32 @@
-<!DOCTYPE html>
-<html data-theme="light" lang="{{ .Site.Language }}" itemscope itemtype="http://schema.org/WebPage">
-
-<head>
-    {{ partial "head.html" . }}
-</head>
-
-<body>
-    <svg id="fader" class="fade-out"></svg>
-    <script>fadeInPage()</script>
-
-    <a class="screen-reader-text" href="#content">Skip to content</a>
-
-    <header class="sticky-top d-lg-block d-none">
-        <nav class="navbar navbar-expand-lg navbar-dark py-2 px-2 px-lg-5">
-            <a class="navbar-brand" href="https://torproject.org/en/">
-                <img src="{{ .Site.BaseURL }}/img/tor-logo.png" alt="Tor Project logo" width="80px">
-            </a>
-
-            <div class="collapse navbar-collapse">
-                <div class="mx-auto">
-                    <ul class="navbar-nav">
-                        {{- $firstUrlElement := print "/" (index (split .RelPermalink "/") 1) "/" -}}
-                        {{- range .Site.Menus.main -}}
-                        <li class="nav-item">
-                            <a class="nav-link" href="{{ .URL }}" rel="noopener noreferrer" target="_blank">{{ .Name }}</a>
-                        </li>
-                        {{ end }}
-                    </ul>
-                </div>
-
-                <div class="pull-right">
-                    <a class="btn btn-outline-light pull-right" href="https://torproject.org/download/">
-                        Download Tor Browser<i class="fas fa-arrow-down ml-2 pt-1"></i>
-                    </a>
-                </div>
-            </div>
-        </nav>
-    </header>
-
-    <div class="container-fluid mx-0">
-
-        <div class="row">
-            <div class="col-lg-2 mx-0 px-5 py-lg-5 py-1 left-sidebar">
-                {{ partial "header.html" . }}
-            </div>
-
-            <div class="col-lg-10 offset-lg-2 col-12 px-0">
-                <!-- <header class="background-banner">
-                    <div class="container py-3">
-                        <div class="row justify-content-center">
-                            <div class="col-xl-7 col-lg-7 col-md-12 col-12 pt-5">
-                                <h1 class="report-title">Your guide to Tor Documentation</h1>
-                                <p class="report-subtitle">Find resources and documentation to get started building for
-                                    Tor.</p>
-                            </div>
-                        </div>
-                    </div>
-                </header> -->
-
-                {{ if eq .Params.toc true }}
-
-                <div class="dropdown d-block d-lg-none sticky-top mb-4 pt-2">
-                    <button class="dropdown-toggle w-100" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-                      {{ i18n "TableOfContents"}} {{ partial "fontawesome.html" "solid/chevron-down" }}
-                    </button>
-                    <div class="dropdown-menu">
-                        {{ .TableOfContents }}
-                    </div>
-                </div>
-
-                {{ end }}
-
-                <div class="row justify-content-center mx-lg-0 mx-2">
-                    <div class="col-lg-5 pt-5">
-                        <div id="content" class="content" data-bs-spy="scroll" data-bs-target="#TableOfContents">
-                            {{ block "main" . }}
-                            {{ end }}
-        
-                            {{ partial "footer.html" . }}
-                            {{ partial "javascript.html" . }}
-                        </div>
-                        <div class="col-lg-2 offset-lg-1 pt-5 d-lg-block d-none">
-                            {{ .TableOfContents }}
-                        </div>
-                    </div>
-
-                </div>
-
-            </div>
-        </div>
-    </div>
-</body>
-
+<!doctype html>
+<html lang="{{ .Site.Params.languageTag | default "en-US" }}">
+  {{ partial "head/head.html" . }}
+  {{ if eq .Kind "home" -}}
+    {{ .Scratch.Set "class" "home" -}}
+  {{ else if eq .Kind "404" -}}
+    {{ .Scratch.Set "class" "error404" -}}
+  {{ else if eq .Kind "page" -}}
+    {{ .Scratch.Set "class" .Type -}}
+    {{ .Scratch.Add "class" " single" -}}
+  {{ else -}}
+    {{ .Scratch.Set "class" .Type -}}
+    {{ .Scratch.Add "class" " list" -}}
+  {{ end -}}
+  <body class="{{ .Scratch.Get "class" }}"{{ if eq .Site.Params.options.scrollSpy true }} data-bs-spy="scroll" data-bs-target="#toc" data-bs-root-margin="0px 0px -90%" data-bs-smooth-scroll="true" tabindex="0"{{ end }}>
+    {{ partial "header/header.html" . }}
+    <div class="wrap container-{{ if .Site.Params.options.fullWidth }}fluid{{ else }}xxl{{ end }}" role="document">
+      <div class="content">
+        {{ block "main" . }}{{ end }}
+      </div>
+    </div>
+    {{ block "sidebar-prefooter" . }}{{ end }}
+    {{ block "sidebar-footer" . }}{{ end }}
+    {{ partial "footer/footer.html" . }}
+    {{ partial "footer/script-footer.html" . }}
+    {{ if eq .Site.Params.options.toTopButton true -}}
+    <div class="d-flex fixed-bottom pb-4 pb-lg-5 pe-4 pe-lg-5">
+      <a id="toTop" href="#" class="btn btn-outline-primary rounded-circle ms-auto p-2"><span class="visually-hidden">Top</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg></a>
+    </div>
+    {{ end }}
+  </body>
 </html>

layouts/_default/index.js

@@ -0,0 +1,10 @@
+var docs = [
+{{ range $index, $page := (where .Site.Pages "Section" "docs") -}}
+  {
+    id: {{ $index }},
+    title: "{{ .Title }}",
+    description: "{{ .Params.description }}",
+    href: "{{ .URL | relURL }}"
+  },
+{{ end -}}
+];

layouts/_default/index.json

@@ -0,0 +1,5 @@
+{{- $.Scratch.Add "index" slice -}}
+{{- range .Site.RegularPages -}}
+  {{- $.Scratch.Add "index" (dict "title" .Title "description" .Params.description "contents" .Plain "RelPermalink" .RelPermalink) -}}
+{{- end -}}
+{{- $.Scratch.Get "index" | jsonify -}}

layouts/_default/list.html

@@ -1,13 +1,32 @@
-{{ define "main" }}
-<main class="container-fluid">
-    <div class="container">
-        <div class="row justify-content-center">
-            <div class="col-xl-7 col-lg-7 col-md-12 col-12 py-5">
-                <article class="post-content pt-4">
-                    {{ .Content }}
-                </article>
-            </div>
-        </div>
-    </div>
-</main>
+{{ define "main" }}
+<div class="row justify-content-center">
+  <div class="col-md-12 col-lg-9">
+    <h1 class="text-center">{{ .Title }}</h1>
+    {{ with .Content -}}<div class="text-center">{{ . }}</div>{{ end -}}
+  </div>
+</div>
+<div class="row row-cols-1 row-cols-lg-2 g-lg-5">
+  {{ $paginator := .Paginate (.Data.Pages) -}}
+  {{ range $paginator.Pages -}}
+  <div class="col">
+    <div class="card">
+      {{- .Scratch.Set "fillImage" "1270x620 Center" -}}
+      {{ partial "content/card-image.html" . }}
+      <div class="card-body">
+        <article>
+          <h2 class="h3"><a class="stretched-link text-body" href="{{ .RelPermalink }}">{{ .Params.title }}</a></h2>
+          <p>{{ .Params.excerpt | safeHTML }}</p>
+          {{ partial "main/blog-meta.html" . -}}
+        </article>
+      </div>
+    </div>
+  </div>
+  {{ end -}}
+</div>
+<div class="row justify-content-center">
+  <div class="col-md-12 col-lg-9">
+    {{ $.Scratch.Set "paginator" true }}
+    {{ template "_internal/pagination.html" . }}
+  </div>
+</div>
 {{ end }}

layouts/_default/section.sitemap.xml

@@ -0,0 +1,46 @@
+{{ printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\" ?>" | safeHTML -}}
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+  xmlns:xhtml="http://www.w3.org/1999/xhtml">
+  {{ range $i, $e := .Data.Pages -}}
+    {{ if ne .Params.sitemap_exclude true }}
+    <url>
+      <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="{{ .Permalink }}"
+                  />{{ end }}
+      <xhtml:link
+                  rel="alternate"
+                  hreflang="{{ .Lang }}"
+                  href="{{ .Permalink }}"
+                  />{{ end }}
+    </url>
+    {{ end -}}
+  {{ end -}}
+  {{ range .Sections -}}
+    {{ range $i, $e := .Data.Pages -}}
+      {{ if ne .Params.sitemap_exclude true -}}
+      <url>
+        <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="{{ .Permalink }}"
+                    />{{ end }}
+        <xhtml:link
+                    rel="alternate"
+                    hreflang="{{ .Lang }}"
+                    href="{{ .Permalink }}"
+                    />{{ end }}
+      </url>
+      {{ end -}}
+    {{ end -}}
+  {{ end -}}
+</urlset>

layouts/_default/single.html

@@ -1,40 +1,10 @@
-{{ define "main" }}
-<main class="pb-5">
-
-    <article class="post-content">
-        <h1 class="pb-3">{{ .Title }}</h1>
-        {{ $content := .Content }}
-        {{ $content = replaceRE `(<h[1-6] id=\"(.+)\".*>)(.*)(</h[1-6]>)` `${1}${3}<a class="anchor-tag" href="#${2}"><span class="inline-svg">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M173 131.5C229.2 75.27 320.3 75.27 376.5 131.5C430 185 432.9 270.9 383 327.9L377.7 334C368.9 344 353.8 345 343.8 336.3C333.8 327.6 332.8 312.4 341.5 302.4L346.9 296.3C380.1 258.3 378.2 201.1 342.5 165.4C305.1 127.1 244.4 127.1 206.1 165.4L93.63 278.7C56.19 316.2 56.19 376.9 93.63 414.3C129.3 449.1 186.6 451.9 224.5 418.7L230.7 413.3C240.6 404.6 255.8 405.6 264.5 415.6C273.3 425.5 272.2 440.7 262.3 449.4L256.1 454.8C199.1 504.6 113.2 501.8 59.69 448.2C3.505 392.1 3.505 300.1 59.69 244.8L173 131.5zM467 380.5C410.8 436.7 319.7 436.7 263.5 380.5C209.1 326.1 207.1 241.1 256.9 184.1L261.6 178.7C270.3 168.7 285.5 167.7 295.5 176.4C305.5 185.1 306.5 200.3 297.8 210.3L293.1 215.7C259.8 253.7 261.8 310.9 297.4 346.6C334.9 384 395.6 384 433.1 346.6L546.4 233.3C583.8 195.8 583.8 135.1 546.4 97.7C510.7 62.02 453.4 60.11 415.5 93.35L409.3 98.7C399.4 107.4 384.2 106.4 375.5 96.44C366.7 86.47 367.8 71.3 377.7 62.58L383.9 57.22C440.9 7.348 526.8 10.21 580.3 63.76C636.5 119.9 636.5 211 580.3 267.2L467 380.5z"></path></svg>
-        </span></a>${4}` $content | safeHTML }}
-        {{ $content | safeHTML }}
-    </article>
-
-    <hr>
-
-    {{ if (or .NextInSection .PrevInSection) }}
-    <div class="pagination">
-        <div class="row{{ if not .NextInSection }} justify-content-end{{ end }}">
-        {{ if .NextInSection }}
-            <a class="col-6 text-start d-flex align-items-center justify-content-start" href="{{ .NextInSection.Permalink }}">
-                {{ partial "fontawesome.html" "solid/arrow-left" }}
-                <div class="ps-2"> 
-                    <p class="mb-0">{{ .NextInSection.Title }}</p>
-                </div>
-            </a>
-        {{ end }}
-
-        {{ if .PrevInSection }}
-            <a class="col-6 text-end d-flex align-items-center justify-content-end" href="{{ .PrevInSection.Permalink }}">
-                <div class="pe-2">
-                    <p class="mb-0">{{ .PrevInSection.Title }}</p>
-                </div>
-                {{ partial "fontawesome.html" "solid/arrow-right" }}
-            </a>
-        {{ end }}
-        </div>
-    {{ end }}
-    </div>
-    
-</main>
-{{ end }}
+{{ define "main" }}
+<div class="row justify-content-center">
+  <div class="col-md-12 col-lg-10 col-xl-8">
+    <article>
+      <h1>{{ .Title }}</h1>
+      {{ .Content }}
+    </article>
+  </div>
+</div>
+{{ end }}

layouts/_default/terms.html

@@ -0,0 +1,20 @@
+{{ define "main" }}
+<div class="row justify-content-center">
+  <div class="col-md-12 col-lg-10 col-xl-8">
+    <h1 class="text-center">{{ .Title }}</h1>
+    <div class="text-center">{{ .Content }}</div>
+    <div class="card-list">
+      {{ range .Paginator.Pages }}
+        <div class="card card-terms my-3">
+          <div class="card-body">
+            <article>
+              <a class="stretched-link" href="{{ .RelPermalink }}">{{ .Params.title | title }} &rarr;</a>
+            </article>
+          </div>
+        </div>
+      {{ end }}
+    </div>
+    {{ template "_internal/pagination.html" . }}
+  </div>
+</div>
+{{ end }}

layouts/_default/versions.html

@@ -0,0 +1,27 @@
+{{ define "main" }}
+  <article>
+    <h1>{{ .Title }}</h1>
+    <p class="lead">{{ .Params.lead | safeHTML }}</p>
+    {{ .Content }}
+    <div class="row">
+      {{ range $release := sort (index $.Site.Data "docs-versions") "group" "desc" -}}
+      <div class="col-md-8 col-lg-4 col-xl mb-4">
+        <h2>{{ $release.group }}</h2>
+        <p>{{ $release.description }}</p>
+        {{ $versions := sort $release.versions "v" "desc" -}}
+        {{ range $i, $version := $versions -}}
+          {{ $len := len $versions -}}
+          {{ if (eq $i 0) }}<div class="list-group">{{ end }}
+            <a class="list-group-item list-group-item-action py-2 text-primary{{ if (eq $version.v $.Site.Params.docsVersion) }} d-flex justify-content-between align-items-center{{ end }}" href="{{ $release.baseurl }}/{{ $version.v }}/">
+              {{ $version.v }}
+              {{ if (eq $version.v $.Site.Params.docsVersion) -}}
+              <span class="badge bg-primary">Latest</span>
+              {{ end -}}
+            </a>
+          {{ if (eq (add $i 1) $len) }}</div>{{ end }}
+        {{ end -}}
+      </div>
+      {{ end -}}
+    </div>
+  </article>
+{{ end }}

layouts/blog/single.html

@@ -0,0 +1,59 @@
+{{ define "main" }}
+<article>
+<div class="row justify-content-center">
+  <div class="col-md-12 col-lg-10">
+    <div class="blog-header">
+      <h1>{{ .Title }}</h1>
+      {{ partial "main/blog-meta.html" . }}
+    </div>
+  </div>
+  <div class="col-md-13">
+    <div>
+      {{- .Scratch.Set "fillImage" "1270x715 Center" -}}
+      {{ partial "content/figure.html" . }}
+    </div>
+  </div>
+  <div class="col-md-12 col-lg-9">
+    {{ .Content }}
+    {{ if .Params.tags -}}
+    <div class="mt-4">
+      {{ range $index, $tag := .Params.tags -}}
+        <a class="btn btn-light" href="{{ "/tags/" | absURL }}{{ . | urlize }}/" role="button">{{ . }}</a>
+      {{ end -}}
+    </div>
+    {{ end -}}
+  </div>
+</div>
+</article>
+
+{{ $related := .Site.RegularPages.Related . | first 3 -}}
+{{ with $related -}}
+<div class="related-posts">
+<div class="row justify-content-center">
+  <div class="col">
+    <h2 class="section-title">Related posts</h2>
+  </div>
+</div>
+<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-lg-5">
+  {{ range . -}}
+  <div class="col">
+    <div class="card">
+      {{- .Scratch.Set "fillImageCard" "1270x620 Center" -}}
+      {{ partial "content/card-image.html" . }}
+      <div class="card-body">
+        <article>
+          <h2 class="h3"><a class="stretched-link text-body" href="{{ .RelPermalink }}">{{ .Params.title }}</a></h2>
+          <p>{{ .Params.excerpt | safeHTML }}</p>
+          {{ partial "main/blog-meta.html" . -}}
+        </article>
+      </div>
+    </div>
+  </div>
+  {{ end -}}
+</div>
+</div>
+{{ end -}}
+
+{{ end }}
+
+

layouts/docs/list.html

@@ -0,0 +1,22 @@
+{{ define "main" }}
+<div class="row justify-content-center">
+  <div class="col-md-12 col-lg-10 col-xl-8">
+    <article>
+      <h1 class="text-center">{{ if eq .CurrentSection .FirstSection }}{{ .Section | humanize }}{{ else }}{{ .Title }}{{ end }}</h1>
+      <div class="text-center">{{ .Content }}</div>
+			<div class="card-list">
+				{{ $currentSection := .CurrentSection }}
+				{{ range where .Site.RegularPages.ByTitle "Section" .Section }}
+					{{ if in (.RelPermalink | string) $currentSection.RelPermalink }}
+						<div class="card my-3">
+							<div class="card-body">
+								<a class="stretched-link" href="{{ .RelPermalink }}">{{ .Params.title | title }} &rarr;</a>
+							</div>
+						</div>
+					{{ end }}
+				{{ end }}
+			</div>
+    </article>
+  </div>
+</div>
+{{ end }}

layouts/docs/single.html

@@ -0,0 +1,74 @@
+{{ define "main" }}
+	<div class="row flex-xl-nowrap justify-content-lg-between">
+		<div class="col-lg-5 col-xl-4 docs-sidebar{{ if ne .Site.Params.options.navbarSticky true }} docs-sidebar-top{{ end }} d-none d-lg-block">
+			{{- $showFlexSearch := .Site.Params.options.flexSearch }}
+			{{- if $showFlexSearch }}
+			{{- if and (isset .Site.Params.options "searchsectionsshow") (not (eq .Site.Params.options.searchSectionsShow "ALL")) }}
+			{{- $showFlexSearch = or (eq (len .Site.Params.options.searchSectionsShow) 0) (in .Site.Params.options.searchSectionsShow .Section) (and .IsHome (in .Site.Params.options.searchSectionsShow "HomePage")) }}
+			{{- end }}
+			{{- end }}
+
+			{{ if $showFlexSearch -}}
+			<hr class="text-black-50 my-4 d-lg-none">
+			<form class="doks-search show-script position-relative flex-grow-1 ms-lg-auto me-lg-2 mt-3">
+			<input id="search" class="form-control is-search" type="search" placeholder="{{ i18n "search-text" }}" aria-label="{{ i18n "search-text" }}" autocomplete="off">
+			<div id="suggestions" class="shadow bg-white rounded d-none"></div>
+			</form>
+
+			<noscript>
+				<form method="get" class="doks-search position-relative flex-grow-1 ms-lg-auto me-lg-2 mt-3" action="https://duckduckgo.com/">
+					<input id="search" class="form-control is-search" type="search" placeholder="{{ i18n "search-text" }}" aria-label="{{ i18n "search-text" }}" autocomplete="off" name="q">
+					<input type="hidden" name="sites" value="docs.torproject.org"/>
+				</form>
+			</noscript>
+			{{ end -}}
+			
+			<nav {{ if eq .Site.Params.menu.section.collapsibleSidebar false }}id="sidebar-default" {{ end }}class="docs-links" aria-label="Main navigation">
+				{{ partial "sidebar/docs-menu.html" . }}
+			</nav>
+		</div>
+		{{ if ne .Params.toc false -}}
+		<nav class="docs-toc{{ if ne .Site.Params.options.navbarSticky true }} docs-toc-top{{ end }} d-none d-xl-block col-xl-3" aria-label="Secondary navigation">
+			{{ partial "sidebar/docs-toc.html" . }}
+		</nav>
+		{{ end -}}
+		{{ if .Params.toc -}}
+		<main class="docs-content col-lg-6 col-xl{{ if eq .Site.Params.options.fullWidth false }}-5{{ else }}-6{{ end }}">
+		{{ else -}}
+		<main class="docs-content col-lg-11 col-xl-11 mx-xl-auto">
+		{{ end -}}
+			{{ if .Site.Params.options.breadCrumb -}}
+				<nav aria-label="breadcrumb">
+					<ol class="breadcrumb">
+						{{ partial "main/breadcrumb" . -}}
+						<li class="breadcrumb-item active" aria-current="page">{{ .Title }}</li>
+					</ol>
+				</nav>
+			{{ end }}
+			<h1>{{ .Title }}</h1>
+			<p class="lead">{{ .Params.lead | safeHTML }}</p>
+			{{ if ne .Params.toc false -}}
+			<nav class="d-xl-none" aria-label="Quaternary navigation">
+				{{ partial "sidebar/docs-toc.html" . }}
+			</nav>
+			{{ end -}}
+			{{ .Content }}
+			<div class="page-footer-meta d-flex flex-column flex-md-row justify-content-between">
+				{{ if .Site.Params.lastMod -}}
+					{{ partial "main/last-modified.html" . }}
+				{{ end -}}
+				{{ if .Site.Params.editPage -}}
+					{{ partial "main/edit-page.html" . }}
+				{{ end -}}
+			</div>
+			{{ 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 }}

layouts/index.headers

@@ -0,0 +1,10 @@
+/*
+  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' https://*.netlify.app; connect-src 'self' https://*.netlify.app; font-src 'self' https://*.netlify.app; img-src 'self' https://*.netlify.app data: https://i.giphy.com; script-src 'self' https://*.netlify.app 'sha512-RGGByJUOP98hE4wFZM78RM/3MijWJs0Tm0DbfrFhCDCXKXfDx60fii+syp5iMs3UcNX/1H4zJNgmqSejfhHrYw==' 'sha512-RBYr6Ld4w1yVqaACrgrBLQfPgGhj/1jyacA74WxJ1KM6KVcSWymwrdDwb3HDcdpwiNJ5yssot1He0U9vXoQVlg==' 'sha256-aWZ3y/RxbBYKHXH0z8+8ljrHG1mSBvyzSfxSMjBSaXk=' 'sha256-vOgyKS2vkH4n5TxBJpeh9SgzrE6LVGsAeOAvEST6oCc='; style-src 'self' https://*.netlify.app 'unsafe-inline'
+  X-Frame-Options: SAMEORIGIN
+  Referrer-Policy: strict-origin
+  Permissions-Policy: geolocation=(self), microphone=(), camera=()
+  Cache-Control: public, max-age=31536000
+  Access-Control-Allow-Origin: *

layouts/index.html

@@ -1,8 +1,44 @@
-{{ define "main" }}
-    <article>
-        <h2 class="text-uppercase pb-3">Contents</h2>
-        {{ range .Site.RegularPages }}
-        <a class="toc-header d-block" href="{{ .RelPermalink }}">{{ .Title }}</a>
-        {{ end }}
-    </article>
-{{ end }}
+{{ define "main" }}
+<section class="section container-fluid mt-n3 pb-3">
+  <div class="row justify-content-center">
+  </div>
+</section>
+{{ end }}
+
+{{ define "sidebar-prefooter" }}
+  {{ if eq $.Site.Language.LanguageName "English" }}
+  <section class="section section-sm mt-n3 pb-3">
+    <div class="container">
+      <div class="row justify-content-between align-items-center">
+        <div class="col-lg-7">
+          <h1 class="h4">Your guide to {{ .Title }}</h1>
+          <p>Find resources and documentation to get started building for Tor.</p>
+          <a class="btn btn-primary btn-lg px-4 mb-2" href="/docs/{{ if .Site.Params.options.docsVersioning }}{{ .Site.Params.docsVersion }}/{{ end }}understanding-tor/overview/" role="button">{{ i18n "get-started" }}</a>
+        </div>
+        <div class="col-lg-7 d-none d-lg-block">
+          <img class="img-fluid" src="/images/hero.png" alt="Hero image">
+        </div>
+      </div>
+    </div>
+  </section>
+  <section class="section section-sm mt-n3 pb-3">
+    <div class="container">
+      <div class="row justify-content-start align-items-center">
+        <div class="col-lg-7">
+          <h2 class="h4 text-uppercase">Featured Topics</h2>
+        </div>
+      </div>
+    </div>
+  </section>
+  {{ end }}
+{{ end }}
+
+{{ define "sidebar-footer" }}
+<section class="section section-sm container-fluid">
+  <div class="row justify-content-center text-center">
+    <div class="col-lg-9">
+      {{- .Content -}}
+    </div>
+  </div>
+</section>
+{{ end }}

layouts/index.redirects

@@ -0,0 +1,13 @@
+{{- range $p := .Site.Pages -}}
+{{- range .Aliases }}
+{{ . }} {{ $p.RelPermalink }}
+{{- end }}
+{{- end }}
+
+# /docs/1.0/prologue/   /docs/1.0/prologue/introduction/
+# /docs/1.0/help/       /docs/1.0/help/how-to-update/
+# /docs/1.0/            /docs/1.0/prologue/introduction/
+# /docs/                /docs/1.0/prologue/introduction/
+#
+# /docs/0.1/*           https://v0-1-0--doks-versioning-poc.netlify.app/docs/0.1/:splat  200
+# /docs/0.2/*           https://v0-2-0--doks-versioning-poc.netlify.app/docs/0.2/:splat  200

layouts/partials/content/card-image.html

@@ -0,0 +1,22 @@
+{{ $fillImage := .Scratch.Get "fillImageCard" }}
+{{ if not $fillImage -}}
+  {{ $fillImage = site.Params.fillImage }}
+{{ end -}}
+
+{{ $image := .Resources.GetMatch (printf "**%s" (index .Params.images 0)) }}
+{{ if not $image -}}
+  {{ $image = resources.Get (printf "%s%s" "images/" site.Params.defaultImage) }}
+{{ end -}}
+
+{{ $webp := printf "%s%s" $fillImage " webp" }}
+{{ $image = $image.Resize $webp}}
+
+{{ $lqip := $image.Resize site.Params.lqipWidth -}}
+
+<img
+  class="card-img-top img-fluid lazyload blur-up"
+  src="{{ $lqip.Permalink }}"
+  data-src="{{ $image.Permalink }}"
+  width="{{ $image.Width }}"
+  height="{{ $image.Height }}"
+  alt="{{ .Title }}">