Merge pull request #418 from gethinode/develop

Fix navbar

.eslintignore

@@ -1,3 +1,6 @@
+assets/js/critical/color.js
+assets/js/analytics.js
 assets/js/flexsearch.js
+assets/js/sharing.js
 assets/js/vendor
 node_modules

.github/ISSUE_TEMPLATE/bug_report.md

@@ -27,8 +27,9 @@ If applicable, add a copy of Hugo's log messages.
 If applicable, add screenshots to help explain your problem.
 
 **Environment (please complete the following information):**
- - Host OS: [e.g. macOS Ventura 13.0]
+ - Hinode version: [e.g. v0.11.3]
- - Node version: [e.g. node v18.10.0]
+ - Host OS: [e.g. macOS Ventura 13.3]
+ - Node version: [e.g. node v18.15.0]
  - Hugo version: [e.g. hugo v0.109.0-47b12b83e636224e5e601813ff3e6790c191e371+extended darwin/amd64 BuildDate=2022-12-23T10:38:11Z VendorInfo=gohugoio]
  - Browser: [e.g. Google Chrome Version 108.0.5359.124 (Official Build) (arm64)]
 

.github/dependabot.yml

@@ -7,3 +7,4 @@ updates:
     directory: "/"
     schedule:
       interval: "daily"
+    versioning-strategy: increase

.github/release.yml

@@ -0,0 +1,27 @@
+changelog:
+  exclude:
+    labels:
+      - skip-changelog
+  categories:
+    - title: ❗ Breaking Changes
+      labels:
+        - Semver-Major
+        - breaking-change
+    - title: 🚀 Highlights
+      labels:
+        - release-highlight
+    - title: 🎉 New Features
+      labels:
+        - Semver-Minor
+        - enhancement
+    - title: 🐛 Bug fixes
+      labels:
+        - fix
+        - bugfix
+        - bug
+    - title: 📦 Dependencies
+      labels:
+        - dependencies
+    - title: 🧰 Other Changes
+      labels:
+        - "*"

.github/workflows/auto-merge.yml

@@ -0,0 +1,43 @@
+# Source: https://nicolasiensen.github.io/2022-07-23-automating-dependency-updates-with-dependabot-github-auto-merge-and-github-actions/
+name: Dependabot auto-merge
+on: pull_request_target
+
+permissions:
+  pull-requests: write
+  contents: write
+
+jobs:
+  review-dependabot-pr:
+    runs-on: ubuntu-latest
+    if: ${{ github.event.pull_request.user.login == 'dependabot[bot]' }}
+    steps:
+      - name: Dependabot metadata
+        id: metadata
+        uses: dependabot/fetch-metadata@v1
+        with:
+          github-token: "${{ secrets.GITHUB_TOKEN }}"
+      - name: Enable auto-merge for Dependabot PRs
+        run: gh pr merge --auto --merge "$PR_URL"
+        env:
+          PR_URL: ${{github.event.pull_request.html_url}}
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+      - name: Approve patch and minor updates
+        if: ${{steps.dependabot-metadata.outputs.update-type == 'version-update:semver-patch' || steps.dependabot-metadata.outputs.update-type == 'version-update:semver-minor'}}
+        run: gh pr review $PR_URL --approve -b "I'm **approving** this pull request because **it includes a patch or minor update**"
+        env:
+          PR_URL: ${{github.event.pull_request.html_url}}
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+      - name: Approve major updates of development dependencies
+        if: ${{steps.dependabot-metadata.outputs.update-type == 'version-update:semver-major' && steps.dependabot-metadata.outputs.dependency-type == 'direct:development'}}
+        run: gh pr review $PR_URL --approve -b "I'm **approving** this pull request because **it includes a major update of a dependency used only in development**"
+        env:
+          PR_URL: ${{github.event.pull_request.html_url}}
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+      - name: Comment on major updates of non-development dependencies
+        if: ${{steps.dependabot-metadata.outputs.update-type == 'version-update:semver-major' && steps.dependabot-metadata.outputs.dependency-type == 'direct:production'}}
+        run: |
+          gh pr comment $PR_URL --body "I'm **not approving** this PR because **it includes a major update of a dependency used in production**"
+          gh pr edit $PR_URL --add-label "requires-manual-qa"
+        env:
+          PR_URL: ${{github.event.pull_request.html_url}}
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

.github/workflows/build.yml

@@ -12,7 +12,7 @@ jobs:
     strategy:
       matrix:
         os: [macos-latest, windows-latest, ubuntu-latest]
-        node-version: [14.x, 16.x, 18.x]
+        node-version: [16.x, 18.x, 20.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     runs-on: ${{ matrix.os }}
@@ -24,5 +24,7 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'npm'
+        cache-dependency-path: '**/package-lock.json'
     - run: npm ci
     - run: npm run build
+    - run: npm run build:example

.github/workflows/lint.yml

@@ -14,15 +14,18 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x, 16.x, 18.x]
+        node-version: [16.x, 18.x, 20.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
     - uses: actions/checkout@v3
+
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v3
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'npm'
+        cache-dependency-path: '**/package-lock.json'
+  
     - run: npm ci --ignore-scripts
     - run: npm run lint

.github/workflows/update.yml

@@ -0,0 +1,37 @@
+name: Update Hugo Dependencies
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '0 3 * * *' # run daily at 03:00 AM
+
+permissions:
+  pull-requests: write
+
+jobs:
+  update-dep:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "lts/*"
+      - name: Install dependencies
+        run: npm ci
+      - name: Update Hugo module dependencies
+        run: npm run mod:update
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v5
+        with:
+          token: ${{ secrets.HUGO_MOD_PR }}
+          commit-message: 'fix: update Hugo module dependencies'
+          branch: hugo-mod-dependencies
+          delete-branch: true
+          title: 'Update Hugo module dependencies'
+          body: >
+            This PR is auto-generated by 
+            [create-pull-request](https://github.com/peter-evans/create-pull-request).
+          labels: dependencies

.gitignore

@@ -1,6 +1,8 @@
-/public
+/_vendor
+public/
 resources/
 node_modules/
 
 .DS_store
-.hugo_build.lock
+.hugo_build.lock
+hugo_stats.json

.stylelintignore

@@ -1,5 +1,8 @@
 assets/scss/common/_variables.scss
-assets/scss/components/_syntax.scss
+assets/scss/components/_syntax-dark.scss
+assets/scss/components/_syntax-light.scss
+assets/scss/hotfix
 assets/scss/vendor
+assets/scss/theme/fonts.scss
 assets/scss/app.scss
 node_modules

.stylelintrc.json

@@ -2,10 +2,7 @@
   "extends": "stylelint-config-standard-scss",
   "rules": {
     "no-empty-source": null,
-    "indentation": 4,
-    "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,

README.md

@@ -9,25 +9,31 @@
 <!-- Badges -->
 <p align="center">
     <a href="https://gohugo.io" alt="Hugo website">
-        <img src="https://img.shields.io/badge/generator-hugo-brightgreen" />
+        <img src="https://img.shields.io/badge/generator-hugo-brightgreen">
     </a>
-    <a href="https://app.netlify.com/sites/hinode-demo/deploys" alt="Netlify Status">
+    <a href="https://gethinode.com" alt="Hinode theme">
-        <img src="https://img.shields.io/netlify/151e88a3-d161-4045-856d-778fea43fc2f" />
+        <img src="https://img.shields.io/badge/theme-hinode-blue">
+    </a>
+    <a href="https://www.npmjs.com/package/%40gethinode/hinode" alt="npm package">
+        <img src="https://img.shields.io/npm/v/%40gethinode/hinode">
+    </a>
+    <a href="https://app.netlify.com/sites/gethinode-demo/deploys" alt="Netlify Status">
+        <img src="https://img.shields.io/netlify/0ad42e3e-fdfa-4d37-8e26-58badd429a67">
     </a>
     <a href="https://stats.uptimerobot.com/xyGVYhLJmV" alt="UptimeRobot Status">
-        <img src="https://img.shields.io/uptimerobot/status/m791334689-73d9dfc82030f4f955b2d6bb" />
+        <img src="https://img.shields.io/uptimerobot/status/m791334689-73d9dfc82030f4f955b2d6bb">
     </a>
-    <a href="https://github.com/markdumay/hugo-theme-hinode/commits/main" alt="Last commit">
+    <a href="https://github.com/gethinode/hinode/commits/main" alt="Last commit">
-        <img src="https://img.shields.io/github/last-commit/markdumay/hugo-theme-hinode.svg" />
+        <img src="https://img.shields.io/github/last-commit/gethinode/hinode.svg">
     </a>
-    <a href="https://github.com/markdumay/hugo-theme-hinode/issues" alt="Issues">
+    <a href="https://github.com/gethinode/hinode/issues" alt="Issues">
-        <img src="https://img.shields.io/github/issues/markdumay/hugo-theme-hinode.svg" />
+        <img src="https://img.shields.io/github/issues/gethinode/hinode.svg">
     </a>
-    <a href="https://github.com/markdumay/hugo-theme-hinode/pulls" alt="Pulls">
+    <a href="https://github.com/gethinode/hinode/pulls" alt="Pulls">
-        <img src="https://img.shields.io/github/issues-pr-raw/markdumay/hugo-theme-hinode.svg" />
+        <img src="https://img.shields.io/github/issues-pr-raw/gethinode/hinode.svg">
     </a>
-    <a href="https://github.com/markdumay/hugo-theme-hinode/blob/main/LICENSE" alt="License">
+    <a href="https://github.com/gethinode/hinode/blob/main/LICENSE" alt="License">
-        <img src="https://img.shields.io/github/license/markdumay/hugo-theme-hinode" />
+        <img src="https://img.shields.io/github/license/gethinode/hinode">
     </a>
 </p>
 
@@ -44,27 +50,27 @@
 
 ## About
 
-![Logo](https://raw.githubusercontent.com/markdumay/hugo-theme-hinode/main/static/img/logo.png)
+![Logo](https://raw.githubusercontent.com/gethinode/hinode/main/static/img/logo.png)
 
 - [Online Demo][demo]
 - [PageSpeed Insights][pagespeed]
 - [Mozilla Observatory][observatory]
 
-Hinode is a clean documentation and blog theme for [Hugo][hugo], an open-source static site generator. Based on the [Bootstrap 5][bootstrap] framework, the rendered site is fast, secure, and responsive. Hinode uses [FlexSearch][flexsearch] to enable full text search across your site. Finally, the theme uses [Node Package Manager][npm] to automate the build process and to keep track of dependencies.
+Hinode is a clean documentation and blog theme for [Hugo][hugo], an open-source static site generator. Based on the [Bootstrap 5][bootstrap] framework, the rendered site is fast, secure, and responsive. Hinode uses [FlexSearch][flexsearch] to enable full text search across your site. Finally, the theme supports [Node Package Manager][npm] to automate the build process and to keep track of dependencies.
 
 Additional features include:
 
-- Comments
+- Flexible configuration of Hugo modules
-- Social links
+- Switching between light mode and dark mode
-- Blog pagination
+- Support for multiple languages
-- Code highlighting
+- Reusable Bootstrap components through configurable shortcodes and partials
-- Command prompt
+- Embedded comments through light-weight integration with GitHub via [utteranc.es][utterances]
-- Color customization
+- Integrated sidebar navigation for content-heavy sections, such as documentation pages
-- Language switcher
+- Reponsive image handling for multiple screen sizes and resolutions
+- Optimized search results, scoring 100 points for SEO on [PageSpeed Insights][pagespeed]
+- Secure by default, scoring A+ on [Mozilla Observatory test][observatory]
 
-<!-- TODO: add tutorial deep-link 
+Detailed information about Hinode is available on the [official website][website].
-Detailed background information is available on the author's [personal blog][blog].
--->
 
 ## Prerequisites
 
@@ -74,56 +80,39 @@ Hinode requires Git, Node.js and npm for local development and testing. Download
 
 Start a new Hinode project in three steps:
 
-### 1. Create a new site
+1. Create a new site
 
-Hinode is available as a [child theme][repository_child], and a [main theme][repository]. The child theme uses [npm][npm] to link to the latest available version of Hinode. As such, it is less applicable if you plan to customize a lot. Vice versa, the main theme allows for heavy customization, but is not synchronized with the latest available Hinode theme automatically.
+    Hinode is available as a [template][repository_template], and a [main repository][repository]. The template [npm][npm] to link to the latest available version of Hinode. Unless you plan to customize a lot, it is recommended to use the template:
 
-Not quite sure? Use the Hinode child theme.
+    ```bash
+    git clone https://github.com/gethinode/template.git my-hinode-site && cd my-hinode-site
+    ```
 
-#### Hinode child theme
+    Use the main theme if you intend to customize the base code:
 
-```bash
+    ```bash
-git clone https://github.com/markdumay/hugo-theme-hinode-child.git my-hinode-site && cd my-hinode-site
+    git clone https://github.com/gethinode/hinode.git my-hinode-site && cd my-hinode-site
-```
+    ```
 
-#### Hinode main theme
+1. Install dependencies
 
-```bash
+    ```bash
-git clone https://github.com/markdumay/hugo-theme-hinode.git my-hinode-site && cd my-hinode-site
+    npm install
-```
+    ```
 
-### 2. Install dependencies
+1. Start development server
 
-```bash
+    ```bash
-npm install
+    npm run start
-```
+    ```
-
-### 3. Start development server
-
-```bash
-npm run start
-```
 
 ## Configuration
 
-The main site configuration is available in `./config/_default`. Some remarks:
+See the [official documentation][getstarted] on how to configure your site.
-
-- **Menu items** - `menus/menus.en.toml` contains language-specific items for the navigation bar and social media links for the home page's footer.
-- **Content** - Ensure the `mainSections` in `config.toml` is synchronized with the `content` folder, default values are `["blog", "projects"]`.
-- **Theme style** - Update `primary` and `themeOpacity` within the `[style]` section of `params.toml` to update the site's primary color and opacity. Bootstrap's other key colors can be changed too. You can use the [WCAG Color Contrast Checker][contrast_checker] to validate the contrast ratio of your color to improve accessibility. Additionally, set `themeFont` and `themeFontPath` to override the default font.
-- **Comments** - Comments are powered by [utterances][utterances], a lightweight comments widget built on GitHub issues. Update the `repo`  of the `[comments]` section of `params.toml`.
-- **Security policy** - The theme uses rather strict security policies by default. Be sure to include references to external sources in the header configuration to avoid broken links. The settings of the local development server are defined in `server.toml`. Similar settings are defined in the `netlify.toml` file provided in the repository's root when deploying to [Netlify][netlify].
 
 ## Contributing
 
-1. Clone the repository and create a new branch
+See the [official documentation][contribute] on how to contribute to the open-source development of Hinode.
-
-    ```console
-    git checkout https://github.com/markdumay/hugo-theme-hinode.git -b name_for_new_branch
-    ```
-
-2. Make and test the changes
-3. Submit a Pull Request with a comprehensive description of the changes
 
 ## Credits
 
@@ -134,17 +123,16 @@ Hinode is inspired by the following themes:
 
 ## Donate
 
-<a href="https://www.buymeacoffee.com/markdumay" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/lato-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;"></a>
+<a href="https://www.buymeacoffee.com/markdumay" target="_blank" rel="noopener noreferrer"><img src="https://cdn.buymeacoffee.com/buttons/lato-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;"></a>
 
 ## License
 
-The `hugo-theme-hinode` and `hugo-theme-hinode-child` codebase is released under the [MIT license][license]. The documentation (including the "README") is licensed under the Creative Commons ([CC BY-NC 4.0)][cc-by-nc-4.0] license.
+The `hinode` and `template` codebase is released under the [MIT license][license]. The documentation (including the "README" and `docs` codebase) is licensed under the Creative Commons [(CC BY-NC 4.0)][cc-by-nc-4.0] license.
 
 <!-- MARKDOWN PUBLIC LINKS -->
 [blist]: https://github.com/apvarun/blist-hugo-theme
 [bootstrap]: https://getbootstrap.com
 [cc-by-nc-4.0]: https://creativecommons.org/licenses/by-nc/4.0/
-[contrast_checker]: https://accessibleweb.com/color-contrast-checker/
 [doks]: https://github.com/h-enk/doks
 [flexsearch]: https://github.com/nextapps-de/flexsearch
 [git_download]: https://git-scm.com
@@ -152,16 +140,15 @@ The `hugo-theme-hinode` and `hugo-theme-hinode-child` codebase is released under
 [netlify]: https://www.netlify.com
 [nodejs]: https://nodejs.org
 [npm]: https://www.npmjs.com
-[observatory]: https://observatory.mozilla.org/analyze/hinode-demo.markdumay.org
+[observatory]: https://observatory.mozilla.org/analyze/demo.gethinode.com
-[pagespeed]: https://pagespeed.web.dev/report?url=https%3A%2F%2Fhinode-demo.markdumay.org%2F
+[pagespeed]: https://pagespeed.web.dev/report?url=https%3A%2F%2Fdemo.gethinode.com%2F
 [utterances]: https://utteranc.es
 
 <!-- MARKDOWN MAINTAINED LINKS -->
-<!-- TODO: add blog link
+[contribute]: https://gethinode.com/contribute
-[blog]: https://markdumay.com
+[getstarted]: https://gethinode.com/docs
-[blog]: https://github.com/markdumay
+[demo]: https://demo.gethinode.com/
--->
+[license]: https://github.com/gethinode/hinode/blob/main/LICENSE
-[demo]: https://hinode-demo.markdumay.org/
+[repository]: https://github.com/gethinode/hinode.git
-[license]: https://github.com/markdumay/hugo-theme-hinode/blob/main/LICENSE
+[repository_template]: https://github.com/gethinode/template.git
-[repository]: https://github.com/markdumay/hugo-theme-hinode.git
+[website]: https://gethinode.com/
-[repository_child]: https://github.com/markdumay/hugo-theme-hinode-child.git

archetypes/default.md

@@ -1,2 +1,16 @@
-+++
+---
-+++
+# author: 
+title: {{ replace .Name "-" " " | title }}
+date: {{ .Date }}
+draft: true
+# layout: 
+# description: 
+# tags: 
+# icon: 
+# thumbnail: 
+    # url: 
+    # author: 
+    # authorURL: 
+    # origin: 
+    # originURL: 
+---

assets/icons/accordion-button-active-icon-dark.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='{{ .accordion_icon_active_color_dark }}'>
+    <path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/>
+</svg>

assets/icons/accordion-button-icon-dark.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='{{ .accordion_icon_color_dark }}'>
+    <path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/>
+</svg>

assets/icons/btn-toggle-dark.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 320 512' fill='{{ .btn_toggle_color_dark }}'>
+    <path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/>
+</svg>

assets/icons/carousel-control-next-icon-bg.svg

@@ -1,3 +1,3 @@
-<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='{{ .carousel_control_color }} '>
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='{{ .carousel_control_color }}'>
     <path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/>
 </svg>

assets/icons/form-select-indicator-dark.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+    <path fill='none' stroke='{{ .form_select_indicator_color_dark }}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/>
+</svg>

assets/icons/form-switch-bg-image-dark.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'>
+    <circle r='3' fill='{{ .form_switch_color_dark }}' />
+</svg>

assets/js/alert.js

@@ -0,0 +1,14 @@
+const alert = document.getElementById('page-alert')
+const closeBtn = document.getElementById('page-alert-btn-close')
+if (alert !== null && closeBtn !== null) {
+  const version = alert.getAttribute('data-page-alert-version') || 'unknown'
+  const hideAlert = sessionStorage.getItem(`page-alert-${version}`) !== null
+  if (hideAlert) {
+    alert.classList.add('d-none')
+  }
+
+  closeBtn.addEventListener('click', () => {
+    sessionStorage.setItem(`page-alert-${version}`, 'seen')
+    alert.classList.add('d-none')
+  })
+}

assets/js/analytics.js

@@ -0,0 +1,69 @@
+// Adapted from https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/google_analytics.html
+
+{{- define "__ga_js_set_doNotTrack" -}}{{/* This is also used in the async version. */}}
+    {{- $pc := .Site.Config.Privacy.GoogleAnalytics -}}
+    {{- if not $pc.RespectDoNotTrack -}}
+        var doNotTrack = false;
+    {{- else -}}
+        var dnt = (navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack);
+        var doNotTrack = (dnt == "1" || dnt == "yes");
+    {{- end -}}
+{{- end -}}
+
+{{- $pc := .Site.Config.Privacy.GoogleAnalytics -}}
+{{- if (and (not .Site.IsServer) (not $pc.Disable)) -}}
+    {{ with .Site.GoogleAnalytics -}}
+        {{ if hasPrefix . "G-"}}
+            {{ template "__ga_js_set_doNotTrack" $ }}
+
+            if (!doNotTrack) {
+                window.dataLayer = window.dataLayer || [];
+
+                function gtag() {
+                    dataLayer.push(arguments);
+                }
+                
+                gtag('js', new Date());
+                gtag('config', '{{ . }}', { 'anonymize_ip': {{- $pc.AnonymizeIP -}} });
+            }
+
+        {{ else if hasPrefix . "UA-" }}
+            {{ template "__ga_js_set_doNotTrack" $ }}
+
+            if (!doNotTrack) {
+                (function(i, s, o, g, r, a, m) {
+                    i['GoogleAnalyticsObject'] = r;
+                    i[r] = i[r] || function() {
+                        (i[r].q = i[r].q || []).push(arguments)
+                    }, i[r].l = 1 * new Date();
+                    a = s.createElement(o),
+                        m = s.getElementsByTagName(o)[0];
+                    a.async = 1;
+                    a.src = g;
+                    m.parentNode.insertBefore(a, m)
+                })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
+                
+                {{- if $pc.UseSessionStorage }}
+                    if (window.sessionStorage) {
+                        var GA_SESSION_STORAGE_KEY = 'ga:clientId';
+                        ga('create', '{{ . }}', {
+                            'storage': 'none',
+                            'clientId': sessionStorage.getItem(GA_SESSION_STORAGE_KEY)
+                        });
+                    
+                        ga(function(tracker) {
+                            sessionStorage.setItem(GA_SESSION_STORAGE_KEY, tracker.get('clientId'));
+                        });
+                    }
+                {{ else }}
+                    ga('create', '{{ . }}', 'auto');
+                {{ end -}}
+                {{ if $pc.AnonymizeIP }}
+                    ga('set', 'anonymizeIp', true);
+                {{ end }}
+                
+                ga('send', 'pageview');
+            }
+        {{- end }}
+    {{ end -}}
+{{- end }}

assets/js/animation.js

@@ -0,0 +1,18 @@
+function reveal () {
+  const reveals = document.querySelectorAll('.reveal')
+
+  for (let i = 0; i < reveals.length; i++) {
+    const windowHeight = window.innerHeight
+    const elementTop = reveals[i].getBoundingClientRect().top
+    const elementVisible = 150
+
+    if (elementTop < windowHeight - elementVisible) {
+      reveals[i].classList.add('active')
+      reveals[i].classList.remove('reveal')
+    } else {
+      reveals[i].classList.remove('active')
+    }
+  }
+}
+
+window.addEventListener('scroll', reveal)

assets/js/clipboard.js

@@ -14,10 +14,13 @@ const addCopyButtons = (clipboard) => {
     // 2. Create a button that will trigger a copy operation
     const button = document.createElement('button')
     button.className = 'clipboard-button'
+    button.setAttribute('data-toast-target', 'toast-copied-code-message')
+    button.setAttribute('aria-label', '{{ T "copyToClipboard" }}')
     button.type = 'button'
     button.innerHTML = svgCopy
     button.addEventListener('click', () => {
-      clipboard.writeText(codeBlock.innerText).then(
+      const text = codeBlock.innerText.split('\n').filter(Boolean).join('\n')
+      clipboard.writeText(text).then(
         () => {
           button.blur()
           button.innerHTML = svgCheck
@@ -36,3 +39,10 @@ const addCopyButtons = (clipboard) => {
 if (navigator && navigator.clipboard) {
   addCopyButtons(navigator.clipboard)
 }
+
+document.querySelectorAll('[data-clipboard]').forEach(trigger => {
+  const text = trigger.getAttribute('data-clipboard')
+  trigger.addEventListener('click', () => {
+    navigator.clipboard.writeText(text)
+  })
+})

assets/js/critical/color.js

@@ -0,0 +1,73 @@
+{{- if site.Params.main.enableDarkMode -}}
+
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2022 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+(() => {
+  'use strict'
+
+  const storedTheme = localStorage.getItem('theme')
+
+  const getPreferredTheme = () => {
+    if (storedTheme) {
+      return storedTheme
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+
+  const setTheme = function (theme) {
+    if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      document.documentElement.setAttribute('data-bs-theme', 'dark')
+    } else {
+      document.documentElement.setAttribute('data-bs-theme', theme)
+    }
+  }
+
+  setTheme(getPreferredTheme())
+
+  const showActiveTheme = theme => {
+    const activeSelectors = document.querySelectorAll('.theme-icon-active')
+    const activeButtons = document.querySelectorAll(`[data-bs-theme-value="${theme}"]`)
+    if (activeButtons.length > 0) {
+      const activeIcon = activeButtons[0].querySelector('span')
+
+      document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+        element.classList.remove('active')
+      })
+
+      for (let i = 0; i < activeSelectors.length; ++i) {
+        activeSelectors[i].innerHTML = activeIcon.innerHTML
+      }
+
+      for (let i = 0; i < activeButtons.length; ++i) {
+        activeButtons[i].classList.add('active')
+      }
+    }
+  }
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    if (storedTheme !== 'light' || storedTheme !== 'dark') {
+      setTheme(getPreferredTheme())
+    }
+  })
+
+  window.addEventListener('DOMContentLoaded', () => {
+    showActiveTheme(getPreferredTheme())
+
+    document.querySelectorAll('[data-bs-theme-value]')
+      .forEach(toggle => {
+        toggle.addEventListener('click', () => {
+          const theme = toggle.getAttribute('data-bs-theme-value')
+          localStorage.setItem('theme', theme)
+          setTheme(theme)
+          showActiveTheme(theme)
+        })
+      })
+  })
+})()
+
+{{- end -}}

assets/js/flexsearch.js

@@ -1,161 +0,0 @@
-/*
-Source:
-  - https://raw.githubusercontent.com/h-enk/doks/master/assets/js/index.js
-*/
-
-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",
-        tag: "tag",
-        store: ["href", "title", "description"],
-        index: ["title", "description", "content"]
-      }
-    });
-  
-    // https://discourse.gohugo.io/t/range-length-or-last-element/3803/2
-    // Note: uses .Site.AllPages as .Site.RegularPages only returns content for the current language
-    //       pages without a title (such as browserconfig.xml) are excluded
-    {{ $list := where (where .Site.AllPages "Kind" "in" "page") "Title" "!=" "" }}
-    {{ $len := (len $list) -}}
-  
-    index.add(
-      {{ range $index, $element := $list -}}
-        {
-          id: {{ $index }},
-          tag: "{{ .Lang }}",
-          href: "{{ .RelPermalink }}",
-          title: {{ .Title | jsonify }},
-          {{ with .Description -}}
-            description: {{ . | jsonify }},
-          {{ else -}}
-            description: {{ .Summary | plainify | jsonify }},
-          {{ end -}}
-          content: {{ .Plain | jsonify }}
-        })
-        {{ if ne (add $index 1) $len -}}
-          .add(
-        {{ end -}}
-      {{ end -}}
-    ;
-  
-    search.addEventListener('input', show_results, true);
-  
-    function show_results(){
-      const maxResult = 5;
-      var searchQuery = this.value;
-      // filter the results for the currently tagged language
-      const lang = document.documentElement.lang;
-      var results = index.search(searchQuery, { index: ['title', 'description', 'content'], limit: maxResult, tag: lang, 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 = `{{ T "ui_no_results" }} "<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.classList.add('text-start');
-          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/menu.js

@@ -0,0 +1,20 @@
+const url = new URL(window.location.href)
+const menu = url.searchParams.get('menu')
+const child = url.searchParams.get('child')
+const menuItems = document.querySelectorAll('[data-nav="main"]')
+
+if (menu !== null) {
+  menuItems.forEach(element => {
+    element.classList.remove('active')
+  })
+
+  const targetMainItems = document.querySelectorAll(`[data-nav-main="${menu}"]:not([data-nav-child])`)
+  targetMainItems.forEach(element => {
+    element.classList.add('active')
+  })
+
+  const targetChildItems = document.querySelectorAll(`[data-nav-main="${menu}"][data-nav-child="${child}"]`)
+  targetChildItems.forEach(element => {
+    element.classList.add('active')
+  })
+}

assets/js/navbar.js

@@ -0,0 +1,33 @@
+const navbar = document.querySelector('.navbar')
+const togglers = document.querySelectorAll('.main-nav-toggler')
+const modeSelectors = document.querySelectorAll('.switch-mode-collapsed')
+
+if (navbar !== null && togglers !== null) {
+  // set the navbar background color to opaque when scrolling past a breakpoint
+  window.onscroll = () => {
+    if (window.scrollY > 75) {
+      navbar.classList.add('nav-active')
+    } else {
+      navbar.classList.remove('nav-active')
+    }
+  }
+
+  // set the navbar background color to opaque when expanded
+  for (let i = 0; i < togglers.length; ++i) {
+    togglers[i].onclick = () => {
+      navbar.classList.toggle('navbar-expanded')
+    }
+  }
+
+  // invoke the navbar toggler for each mode switcher to collapse the main menu afterwards
+  for (let i = 0; i < modeSelectors.length; ++i) {
+    modeSelectors[i].onclick = () => {
+      for (let j = 0; j < togglers.length; ++j) {
+        const toggler = togglers[j]
+        if (toggler.getAttribute('aria-expanded') === 'true') {
+          toggler.click()
+        }
+      }
+    }
+  }
+}

assets/js/sharing.js

@@ -0,0 +1,36 @@
+{{- if site.Params.sharing.webshare -}}
+
+// Adapted from: https://dev.to/j471n/how-to-share-anything-from-your-website-by-web-share-api-1h5g
+
+// function for Web Share API
+function webShareAPI (title, description, link) {
+  navigator
+    .share({
+      title,
+      text: description,
+      url: link
+    })
+    .then(() => console.log('Successful share'))
+    .catch((error) => console.log('Error sharing', error))
+}
+
+const shareBtn = document.getElementById('btn-webshare')
+
+if (shareBtn !== null) {
+  if (navigator.share) {
+    const title = shareBtn.getAttribute('data-sharing-title')
+    const description = shareBtn.getAttribute('data-sharing-description')
+    const url = shareBtn.getAttribute('data-sharing-url')
+
+    // show button if it supports webShareAPI
+    shareBtn.style.display = 'block'
+    shareBtn.addEventListener('click', () =>
+      webShareAPI(title, description, url)
+    )
+  } else {
+    // hide button if host does not support Web Share API
+    shareBtn.style.display = 'none'
+  }
+}
+
+{{- end -}}

assets/js/toast.js

@@ -1,10 +1,24 @@
-// Bootstrap toast example: https://getbootstrap.com/docs/5.2/components/toasts/
+// Script to move all embedded toast messages into a container with id 'toast-container'. The container ensures multiple
-const toastTrigger = document.getElementById('toastButton')
+// toast messages are stacked properly. The script targets all elements specified by a 'data-toast-target' and ensures
-const toastLiveExample = document.getElementById('toastMessage')
+// the click event of the origin is linked as well.
-if (toastTrigger) {
+
-  toastTrigger.addEventListener('click', () => {
+const container = document.getElementById('toast-container')
-    // eslint-disable-next-line no-undef
+if (container !== null) {
-    const toast = new bootstrap.Toast(toastLiveExample)
+  // process all data-toast-target elements
-    toast.show()
+  document.querySelectorAll('[data-toast-target]').forEach(trigger => {
+    const target = document.getElementById(trigger.getAttribute('data-toast-target'))
+    if (target !== null) {
+      // move the element to the toast containr
+      container.appendChild(target)
+
+      // eslint-disable-next-line no-undef
+      const toast = bootstrap.Toast.getOrCreateInstance(target)
+      if (toast !== null) {
+        // associate the click event of the origin with the toast element
+        trigger.addEventListener('click', () => {
+          toast.show()
+        })
+      }
+    }
   })
 }

assets/scss/app.scss

@@ -1,98 +1,57 @@
 // Define template variables
-// TODO: optimize, see https://discourse.gohugo.io/t/initialize-sass-variables-from-hugo-templates/42053
+@import "hugo:vars";
-//       requires installation of dart-sass, no cross-platform installation available yet
-$themeColor:                    {{ site.Params.style.themeColor | default "#007bff" }};
-$themeFont:                     {{ site.Params.style.themeFont | default "Inter" }};
-$primary:                       {{ site.Params.style.primary | default "#007bff" }};
-$secondary:                     {{ site.Params.style.secondary | default "#6c757d" }};
-$success:                       {{ site.Params.style.success | default "#198754" }};
-$info:                          {{ site.Params.style.info | default "#0dcaf0" }};
-$warning:                       {{ site.Params.style.warning | default "#ffc107" }};
-$danger:                        {{ site.Params.style.danger | default "#dc3545" }};
-$light:                         {{ site.Params.style.light | default "#f8f9fa" }};
-$dark:                          {{ site.Params.style.dark | default "#212529" }};
-$navbar-offset:                 {{ if site.Params.navigation.fixed }}{{ site.Params.navigation.offset | default "3em" }}{{ else }}0em{{ end }};
 
 // Include default variable overrides
 @import "common/variables.scss";
 @import "common/icons.scss";
 
-// Import Bootstrap banner and functions
+// Import Bootstrap configuration (mounted by core Bootstrap module)
-@import "bootstrap/scss/mixins/banner";
+@import "bootstrap.scss";
-@include bsBanner("");
-@import "bootstrap/scss/functions";
 
-// Import Bootstrap configuration
+// Include dark mode overrides
-@import "bootstrap/scss/variables";
+@import "common/variables-dark.scss";
-@import "bootstrap/scss/maps";
-@import "bootstrap/scss/mixins";
-@import "bootstrap/scss/utilities";
-
-// Import Bootstrap layout & components
-@import "bootstrap/scss/root";
-@import "bootstrap/scss/reboot";
-@import "bootstrap/scss/type";
-@import "bootstrap/scss/images";
-@import "bootstrap/scss/containers";
-@import "bootstrap/scss/grid";
-@import "bootstrap/scss/tables";
-@import "bootstrap/scss/forms";
-@import "bootstrap/scss/buttons";
-@import "bootstrap/scss/transitions";
-@import "bootstrap/scss/dropdown";
-@import "bootstrap/scss/button-group";
-@import "bootstrap/scss/nav";
-@import "bootstrap/scss/navbar";
-@import "bootstrap/scss/card";
-@import "bootstrap/scss/accordion";
-@import "bootstrap/scss/breadcrumb";
-@import "bootstrap/scss/pagination";
-@import "bootstrap/scss/badge";
-@import "bootstrap/scss/alert";
-@import "bootstrap/scss/progress";
-@import "bootstrap/scss/list-group";
-@import "bootstrap/scss/close";
-@import "bootstrap/scss/toasts";
-@import "bootstrap/scss/modal";
-@import "bootstrap/scss/tooltip";
-@import "bootstrap/scss/popover";
-@import "bootstrap/scss/carousel";
-@import "bootstrap/scss/spinners";
-@import "bootstrap/scss/offcanvas";
-@import "bootstrap/scss/placeholders";
-
-// Import Bootstrap helpers
-@import "bootstrap/scss/helpers";
-
-// Import Bootstrap utilities
-@import "bootstrap/scss/utilities/api";
-
-// Import Font Awesome
-// scss-docs-start awesome
-@import "@fortawesome/fontawesome-free/scss/fontawesome";
-@import "@fortawesome/fontawesome-free/scss/regular";
-@import "@fortawesome/fontawesome-free/scss/solid";
-@import "@fortawesome/fontawesome-free/scss/brands";
-// scss-docs-end awesome
 
 // Import Hinode theme styles
+@import "components/alert.scss";
 @import "components/blockquote.scss";
+@import "components/breadcrumb.scss";
 @import "components/buttons.scss";
 @import "components/card.scss";
 @import "components/carousel.scss";
 @import "components/clipboard.scss";
 @import "components/command.scss";
 @import "components/comments.scss";
+@import "components/feature.scss";
+@import "components/footer.scss";
 @import "components/navbar.scss";
 @import "components/img.scss";
+@import "components/pagination.scss";
+@import "components/persona.scss";
 @import "components/popover.scss";
-@import "components/search.scss";
 @import "components/sidebar.scss";
 @import "components/syntax.scss";
+@import "components/timeline.scss";
 @import "components/toc.scss";
 @import "components/vimeo.scss";
+@import "common/animation.scss";
 @import "common/styles.scss";
 @import "layouts/reboot.scss";
 @import "layouts/type.scss";
 @import "common/export.scss";
 @import "helpers/colored-links.scss";
+@import "helpers/display.scss";
+
+// TODO: include fonts with following statement in Dart Sass
+// @if $import-fonts {
+//     @include meta.load-css(theme/fonts);
+// }
+
+{{ if (not (hasPrefix (lower site.Params.style.themeFontPath) "http")) }}
+    @import "theme/fonts.scss";
+{{ end }}
+
+// Import theme placeholder
+@import "theme/theme.scss";
+
+// Import Bootstrap utilities API  (mounted by core Bootstrap module)
+@import "modules/bootstrap/utilities/api";

assets/scss/common/_animation.scss

@@ -0,0 +1,99 @@
+.rotate-5 {
+    transform: rotate(5deg);
+}
+
+.rotate-n5 {
+    transform: rotate(-5deg);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .reveal {
+        position: relative;
+        opacity: 0;
+        animation-iteration-count: 1;
+    }
+
+    .reveal.active {
+        opacity: 1;
+    }
+
+    .active.fade-bottom {
+        animation: fade-bottom 1s ease-in;
+    }
+
+    .active.fade-bottom-5 {
+        animation: fade-bottom-5 1s ease-in;
+    }
+    
+    .active.fade-bottom-n5 {
+        animation: fade-bottom-n5 1s ease-in;
+    }
+    
+    .active.fade-left {
+        animation: fade-left 1s ease-in;
+    }
+    
+    .active.fade-right {
+        animation: fade-right 1s ease-in;
+    }
+
+    @keyframes fade-bottom {
+        0% {
+            transform: translateY(50px);
+            opacity: 0;
+        }
+
+        100% {
+            transform: translateY(0);
+            opacity: 1;
+        }
+    }
+    
+    @keyframes fade-bottom-5 {
+        0% {
+            transform: translateY(50px) rotate(5deg);
+            opacity: 0;
+        }
+
+        100% {
+            transform: translateY(0) rotate(5deg);
+            opacity: 1;
+        }
+    }
+
+    @keyframes fade-bottom-n5 {
+        0% {
+            transform: translateY(50px) rotate(-5deg);
+            opacity: 0;
+        }
+
+        100% {
+            transform: translateY(0) rotate(-5deg);
+            opacity: 1;
+        }
+    }
+    
+    @keyframes fade-left {
+        0% {
+            transform: translateX(-100px);
+            opacity: 0;
+        }
+
+        100% {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
+
+    @keyframes fade-right {
+        0% {
+            transform: translateX(100px);
+            opacity: 0;
+        }
+        
+        100% {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
+}

assets/scss/common/_export.scss

@@ -3,20 +3,26 @@
 // scss-docs-start export
 :hinode-theme {
     --accordion-icon-active-color: #{$accordion-icon-active-color};
+    --accordion-icon-active-color-dark: #{$gray-300};
     --accordion-icon-color: #{$accordion-icon-color};
+    --accordion-icon-color-dark: #{$gray-600};
     --btn-close-color: #{$btn-close-color};
     --btn-toggle-color: #{$btn-toggle-color};
+    --btn-toggle-color-dark: #{$gray-600};
     --carousel-control-color: #{$carousel-control-color};
     --form-check-input-checked-color: #{$form-check-input-checked-color};
     --form-check-input-indeterminate-color: #{$form-check-input-indeterminate-color};
     --form-feedback-icon-invalid-color: #{$form-feedback-icon-invalid-color};
     --form-feedback-icon-valid-color: #{$form-feedback-icon-valid-color};
     --form-select-indicator-color: #{$form-select-indicator-color};
+    --form-select-indicator-color-dark: #{$form-select-indicator-color-dark};
     --form-switch-checked-color: #{$form-switch-checked-color};
     --form-switch-color: #{$form-switch-color};
+    --form-switch-color-dark: #{$form-switch-color-dark};
     --form-switch-focus-color: #{$form-switch-focus-color};
     --navbar-dark-color: #{$navbar-dark-color};
     --navbar-light-icon-color: rgba($body-color, 0.75); // TODO: See https://github.com/twbs/bootstrap/pull/37720
 }
 
 // scss-docs-end export
+// stylelint-enable selector-pseudo-class-no-unknown

assets/scss/common/_icons.scss

@@ -1,20 +1,25 @@
 // scss-docs-start icons
-$form-check-input-checked-bg-image:             url("icons/form-check-input-checked-bg-image.svg") !default;
+$form-check-input-checked-bg-image:             url("/icons/form-check-input-checked-bg-image.svg") !default;
-$form-check-radio-checked-bg-image:             url("icons/form-check-radio-checked-bg-image.svg") !default;
+$form-check-radio-checked-bg-image:             url("/icons/form-check-radio-checked-bg-image.svg") !default;
-$form-check-input-indeterminate-bg-image:       url("icons/form-check-input-indeterminate-bg-image.svg") !default;
+$form-check-input-indeterminate-bg-image:       url("/icons/form-check-input-indeterminate-bg-image.svg") !default;
-$form-switch-bg-image:                          url("icons/form-switch-bg-image.svg") !default;
+$form-switch-bg-image:                          url("/icons/form-switch-bg-image.svg") !default;
-$form-switch-focus-bg-image:                    url("icons/form-switch-focus-bg-image.svg") !default;
+$form-switch-bg-image-dark:                     url("/icons/form-switch-bg-image-dark.svg") !default;
-$form-switch-checked-bg-image:                  url("icons/form-switch-checked-bg-image.svg") !default;
+$form-switch-focus-bg-image:                    url("/icons/form-switch-focus-bg-image.svg") !default;
-$form-select-indicator:                         url("icons/form-select-indicator.svg") !default;
+$form-switch-checked-bg-image:                  url("/icons/form-switch-checked-bg-image.svg") !default;
-$form-feedback-icon-valid:                      url("icons/form-feedback-icon-valid.svg") !default;
+$form-select-indicator:                         url("/icons/form-select-indicator.svg") !default;
-$form-feedback-icon-invalid:                    url("icons/form-feedback-icon-invalid.svg") !default;
+$form-select-indicator-dark:                    url("/icons/form-select-indicator-dark.svg") !default;
-$navbar-light-toggler-icon-bg:                  url("icons/navbar-light-toggler-icon-bg.svg") !default;
+$form-feedback-icon-valid:                      url("/icons/form-feedback-icon-valid.svg") !default;
-$navbar-dark-toggler-icon-bg:                   url("icons/navbar-dark-toggler-icon-bg.svg") !default;
+$form-feedback-icon-invalid:                    url("/icons/form-feedback-icon-invalid.svg") !default;
-$accordion-button-icon:                         url("icons/accordion-button-icon.svg") !default;
+$navbar-light-toggler-icon-bg:                  url("/icons/navbar-light-toggler-icon-bg.svg") !default;
-$accordion-button-active-icon:                  url("icons/accordion-button-active-icon.svg") !default;
+$navbar-dark-toggler-icon-bg:                   url("/icons/navbar-dark-toggler-icon-bg.svg") !default;
-$carousel-control-prev-icon-bg:                 url("icons/carousel-control-prev-icon-bg.svg") !default;
+$accordion-button-icon:                         url("/icons/accordion-button-icon.svg") !default;
-$carousel-control-next-icon-bg:                 url("icons/carousel-control-next-icon-bg.svg") !default;
+$accordion-button-icon-dark:                    url("/icons/accordion-button-icon-dark.svg") !default;
-$btn-close-bg:                                  url("icons/btn-close-bg.svg") !default;
+$accordion-button-active-icon:                  url("/icons/accordion-button-active-icon.svg") !default;
-$btn-toggle:                                    url("icons/btn-toggle.svg") !default;
+$accordion-button-active-icon-dark:             url("/icons/accordion-button-active-icon-dark.svg") !default;
+$carousel-control-prev-icon-bg:                 url("/icons/carousel-control-prev-icon-bg.svg") !default;
+$carousel-control-next-icon-bg:                 url("/icons/carousel-control-next-icon-bg.svg") !default;
+$btn-close-bg:                                  url("/icons/btn-close-bg.svg") !default;
+$btn-toggle:                                    url("/icons/btn-toggle.svg") !default;
+$btn-toggle-dark:                               url("/icons/btn-toggle-dark.svg") !default;
 
 // scss-docs-end icons

assets/scss/common/_styles.scss

@@ -18,3 +18,132 @@ a:active {
 .tickmark li::marker {
     content: "✓ ";
 }
+
+.anchor
+{
+    color: transparent;
+}
+
+.heading:hover .anchor 
+{
+    transition: 0.25s ease-in-out;
+    color: $primary;
+}
+
+$utilities: map-merge(
+    $utilities,
+    (
+        "padding-start-wide": (
+            property: padding-left,
+            responsive: true,
+            class: psw,
+            values: (
+                0: 0,
+                1: 1.5 * $spacer,
+                2: 3 * $spacer,
+                3: 6 * $spacer,
+                4: 9 * $spacer,
+                5: 12 * $spacer,
+            )
+        ),
+        "padding-top-wide": (
+            property: padding-top,
+            responsive: true,
+            class: ptw,
+            values: (
+                0: 0,
+                1: 1.5 * $spacer,
+                2: 3 * $spacer,
+                3: 6 * $spacer,
+                4: 9 * $spacer,
+                5: 12 * $spacer,
+            )
+        ),
+        "font-size": map-merge(
+            map-get($utilities, "font-size"),
+            ( responsive: true ),
+        ),
+    )
+);
+
+@media screen and (orientation: portrait) {
+    .min-vh-custom {
+        min-height: 25vh !important
+    }
+}
+
+@media screen and (orientation: landscape) {
+    .min-vh-custom {
+        min-height: 50vh !important
+    }
+}
+
+:root {
+    --nav-height: 90px;
+}
+
+@include media-breakpoint-up(sm) {
+    .ratio-section {
+        min-height: calc(min(100vh, 576px) - var(--nav-height));
+    }    
+}
+
+@include media-breakpoint-up(md) {
+    .ratio-section {
+        min-height: calc(min(100vh, 768px) - var(--nav-height));
+    }    
+}
+
+@include media-breakpoint-up(lg) {
+    .ratio-section {
+        min-height: calc(min(100vh, 992px) - var(--nav-height));
+    }    
+}
+
+@include media-breakpoint-up(xl) {
+    .ratio-section {
+        min-height: calc(min(100vh, 1200px) - var(--nav-height));
+    }    
+}
+
+@include media-breakpoint-up(xxl) {
+    .ratio-section {
+        min-height: calc(min(100vh, 1400px) - var(--nav-height));
+    }    
+}
+
+$utilities: map-merge(
+    $utilities,
+    (
+        "padding-start-wide": (
+            property: padding-left,
+            responsive: true,
+            class: psw,
+            values: (
+                0: 0,
+                1: 1.5 * $spacer,
+                2: 3 * $spacer,
+                3: 6 * $spacer,
+                4: 9 * $spacer,
+                5: 12 * $spacer,
+            )
+        ),
+        "padding-top-wide": (
+            property: padding-top,
+            responsive: true,
+            class: ptw,
+            values: (
+                0: 0,
+                1: 1.5 * $spacer,
+                2: 3 * $spacer,
+                3: 6 * $spacer,
+                4: 9 * $spacer,
+                5: 12 * $spacer,
+            )
+        ),
+        "font-size": map-merge(
+            map-get($utilities, "font-size"),
+            ( responsive: true ),
+        )
+    )
+);

assets/scss/common/_variables-dark.scss

@@ -0,0 +1,101 @@
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        --bs-primary: #{$primary-text-emphasis-dark};
+        --bs-secondary: #{$secondary-text-emphasis-dark};
+        --bs-primary-dark: #{$primary-bg-subtle-dark};
+        --bs-primary-bg-subtle: #{$primary-bg-subtle-dark};
+        --bg-primary-subtle: rgba(var(--bs-primary-rgb), var(--bs-link-opacity, 0.1));
+
+        .bg-primary-subtle {
+            background-color: var(--bg-primary-subtle) if($enable-important-utilities, !important, null);
+        }        
+        
+        .accordion-button {
+            background-color: var(--bg-primary-subtle);
+        }
+
+        .form-check-input:checked {
+          background-color: var(--bs-primary);
+          border-color: var(--bs-primary); }
+        
+        .form-check-input[type="checkbox"]:indeterminate {
+          background-color: var(--bs-primary);
+          border-color: var(--bs-primary);
+         }
+        
+        .form-range::-webkit-slider-thumb {
+          background-color: var(--bs-primary);
+        }
+        
+        .form-range::-moz-range-thumb {
+          background-color: var(--bs-primary);
+        }
+
+        .alert-primary {
+          --bs-alert-bg: var(--bg-primary-subtle);
+        }
+        
+        .btn-outline-primary {
+          --bs-btn-color: var(--bs-primary);
+          --bs-btn-border-color: var(--bs-primary);
+          --bs-btn-hover-bg: var(--bs-primary);
+          --bs-btn-hover-border-color: var(--bs-primary);
+          --bs-btn-active-bg: var(--bs-primary);
+          --bs-btn-active-border-color: var(--bs-primary);
+          --bs-btn-disabled-color: var(--bs-primary);
+          --bs-btn-disabled-border-color: var(--bs-primary);
+        }
+        
+        .btn-outline-secondary {
+          --bs-btn-color: var(--bs-secondary);
+          --bs-btn-border-color: var(--bs-secondary);
+          --bs-btn-hover-bg: var(--bs-secondary);
+          --bs-btn-hover-border-color: var(--bs-secondary);
+          --bs-btn-active-bg: var(--bs-secondary);
+          --bs-btn-active-border-color: var(--bs-secondary);
+          --bs-btn-disabled-color: var(--bs-secondary);
+          --bs-btn-disabled-border-color: var(--bs-secondary);
+        }
+
+        .link-primary {
+          color: var(--bs-primary) if($enable-important-utilities, !important, null);
+          text-decoration-color: var(--bs-primary) if($enable-important-utilities, !important, null);
+          
+          &:hover,
+          &:focus {
+            color: var(--bs-primary-dark) if($enable-important-utilities, !important, null);
+            text-decoration-color: var(--bs-primary-dark) if($enable-important-utilities, !important, null);              
+          }
+        }
+
+        .pagination {
+          --bs-pagination-color: var(--bs-body-bg);
+          --bs-pagination-bg: var(--bs-primary);
+        }
+        
+        .progress,
+        .progress-stacked {
+          --bs-progress-bar-bg: var(--bs-primary);
+        }
+        
+        .list-group {
+          --bs-list-group-active-bg: var(--bs-primary);
+          --bs-list-group-active-border-color: var(--bs-primary);
+         }
+        
+        .clipboard-button:hover {
+          color: var(--bs-primary); }
+        
+        .clipboard-button:hover > svg {
+          fill: var(--bs-primary);
+        }
+        
+        .toggler-icon {
+          background-color: var(--bs-primary);
+        }
+        
+        .heading:hover .anchor {
+          color: var(--bs-primary); 
+        }
+    }
+}

assets/scss/common/_variables.scss

@@ -1,14 +1,12 @@
 // Bootstrap variables overrides for theme
 $enable-negative-margins:       true;
-
+$enable-important-utilities:    true !default;
-// Font awesome variables overrides for theme
-$fa-font-path:                  "../fonts";
 
 // Remove the border from the focused navigation toggler
 $navbar-toggler-focus-width:    0 !default;
 
 // scss-docs-start font
-$font-family-sans-serif:        $themeFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-sans-serif:        $theme-font, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $headings-font-weight:          600 !default;
 $font-weight-lighter:           lighter !default;
 $font-weight-light:             200 !default;
@@ -17,9 +15,21 @@ $font-weight-bold:              600 !default;
 $font-weight-bolder:            bolder !default;
 
 strong {
-    font-weight:                600 !important;
+    font-weight:                600 if($enable-important-utilities, !important, null);
 }
 // scss-docs-end font
 
 $black:                       #000 !default;
-$btn-toggle-color:              $black !default;
+$btn-toggle-color:              $black !default;
+
+$carousel-dark-indicator-active-bg:  #ffffff !default;
+$carousel-dark-caption-color:        #ffffff !default;
+$carousel-dark-control-icon-filter:  invert(0) grayscale(100) !default;
+
+// scss-docs-start color-mode
+$primary-text-emphasis-dark:        mix(white, $primary, $dark-mode-tint) !default;
+$secondary-text-emphasis-dark:      mix(white, $secondary, $dark-mode-tint) !default;
+$link-color-dark:                   mix(white, $primary, $dark-mode-tint) !default;
+$primary-bg-subtle-dark:            mix(black, $primary, $dark-mode-shade) !default;
+$primary-border-subtle-dark:        mix(black, $primary, $dark-mode-shade / 2) !default;
+// scss-docs-end color-mode

assets/scss/components/_alert.scss

@@ -0,0 +1,18 @@
+.alert code {
+    color: inherit;
+}
+
+/* stylelint-disable declaration-block-no-redundant-longhand-properties */
+.alert a {
+    color: inherit;
+    
+    &:link,
+    &:visited,
+    &:hover,
+    &:active {
+        text-decoration-line: underline;
+        text-decoration-style: dotted;
+        text-decoration-color: var(--bs-body);
+    }    
+}
+/* stylelint-enable declaration-block-no-redundant-longhand-properties */

assets/scss/components/_breadcrumb.scss

@@ -0,0 +1,6 @@
+// scss-docs-start breadcrumb
+.breadcrumb {
+    padding-top: 0.3 * $navbar-offset;
+}
+
+// scss-docs-end breadcrumb

assets/scss/components/_buttons.scss

@@ -4,5 +4,27 @@
 .btn-primary:active,
 .btn-primary.active,
 .open > .dropdown-toggle.btn-primary {
-    color: #fff !important;
+    color: #fff if($enable-important-utilities, !important, null);
+}
+
+.btn-social {
+    background-color: transparent;
+    
+    --bs-btn-bg: transparent;
+    --bs-btn-border-width: none;
+    --bs-btn-color: var(--bs-secondary);
+    --bs-btn-border-color: none;
+    --bs-btn-hover-bg: none;
+    --bs-btn-hover-border-color: none;
+    --bs-btn-active-bg: none;
+    --bs-btn-active-border-color: none;
+}
+
+.btn-social:hover,
+.btn-social:focus,
+.btn-social:active,
+.btn-social.active,
+.open > .dropdown-toggle.btn-primary {
+    background-color: transparent;
+    color: var(--bs-primary) if($enable-important-utilities, !important, null);
 }

assets/scss/components/_card.scss

@@ -6,16 +6,8 @@
     position: relative;
 }
 
-.card-img-wrap::after {
+.card-zoom {
-    content: "";
+    cursor: pointer;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(255, 255, 255, 0.3);
-    opacity: 0;
-    transition: opacity 0.25s;
 }
 
 .card-img-wrap img {
@@ -23,11 +15,21 @@
     width: 100%;
 }
 
-.card-img-wrap:hover img {
+.card-zoom::after .card-img-wrap img {
-    transform: scale(1.1);
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: rgba(255, 255, 255, 0.3);
+    opacity: 0;
+    transition: opacity 0.25s;
 }
 
-.card-img-wrap:hover::after {
+.card-zoom:hover .card-img-wrap img {
+    transform: scale(1.1);
+    opacity: 0.5;
+}
+
+.card-zoom:hover::after .card-img-wrap img {
     opacity: 1;
 }
 
@@ -40,3 +42,44 @@
     transform: scale(1.01);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
 }
+
+// stylelint-disable annotation-no-unknown
+.card-body-link {
+    color: $body-color if($enable-important-utilities, !important, null);
+}
+
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        .card-body-link {
+            color: $gray-500 if($enable-important-utilities, !important, null);
+        }
+    }
+}
+
+.card-zoom card-body-link,
+.card-body-link {
+    &:hover,
+    &:focus {
+        color: shade-color($primary, $link-shade-percentage) if($enable-important-utilities, !important, null);
+    }
+}
+
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        .card-zoom card-body-link,
+        .card-body-link {
+            &:hover,
+            &:focus {
+                color: $primary-bg-subtle-dark if($enable-important-utilities, !important, null);
+            }
+        }
+    }
+}
+
+// stylelint-enable annotation-no-unknown
+
+// make tag-link clickable on top of the stretched-link.
+.card .tag-link {
+    z-index: 2;
+    position: relative;
+}

assets/scss/components/_feature.scss

@@ -0,0 +1,3 @@
+.feature {
+    margin-top: 0.3 * $navbar-offset;
+}

assets/scss/components/_footer.scss

@@ -0,0 +1,30 @@
+.footer {
+    // background-color: $gray-800 if($enable-important-utilities, !important, null);
+    color: var(--bs-secondary) if($enable-important-utilities, !important, null);
+}
+
+.link-bg-footer {
+    color: var(--bs-secondary) if($enable-important-utilities, !important, null);
+    
+    &:hover,
+    &:focus {
+        color: var(--bs-tertiary-color) if($enable-important-utilities, !important, null);
+    }
+}
+
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        .footer {
+            color: $gray-500 if($enable-important-utilities, !important, null);
+        }
+
+        .link-bg-footer {
+            color: $gray-500 if($enable-important-utilities, !important, null);
+            
+            &:hover,
+            &:focus {
+                color: $gray-400 if($enable-important-utilities, !important, null);
+            }
+        }
+    }
+}

assets/scss/components/_navbar.scss

@@ -1,23 +1,57 @@
+// stylelint-disable annotation-no-unknown
+
 // Source: https://jsfiddle.net/njhgr40m/
 
+.navbar {
+    transition: 0.5s ease-in-out;
+    background-color: transparent;
+}
+
+.nav-active, .navbar-expanded {
+    background-color: var(--bs-body-bg);
+}
+
+.nav-link {
+    margin: 0 .15rem;
+}
+
+.navbar-contrast .nav-link.active, .navbar-contrast .nav-link.show, .navbar-contrast .nav-link:hover {
+    border-bottom: solid 1px var(--bs-navbar-hover-color);
+    margin-bottom: -1px;
+}
+
+.navbar-contrast {
+    --bs-navbar-color: white !important;
+    --bs-navbar-hover-color: white !important;
+    --bs-navbar-disabled-color: white !important;
+    --bs-navbar-active-color: white !important;
+}
+
+.navbar-expanded {
+    box-shadow: $box-shadow-sm;
+}
+
 /* Remove border from toggler */
 .navbar-toggler {
-    border: 0 !important;
+    border: 0 if($enable-important-utilities, !important, null);
 }
 
 .navbar-toggler:focus,
 .navbar-toggler:active,
 .navbar-toggler-icon:focus {
-    outline: none !important;
+    outline: none if($enable-important-utilities, !important, null);
-    box-shadow: none !important;
+    box-shadow: none if($enable-important-utilities, !important, null);
-    border: 0 !important;
+    border: 0 if($enable-important-utilities, !important, null);
+}
+
+.fw-30 {
+    width: 30px !important;
 }
 
 /* Lines of the Toggler */
 .toggler-icon {
     width: 30px;
     height: 3px;
-    background-color: $primary;
     display: block;
     transition: all 0.2s;
 }
@@ -65,3 +99,23 @@
 .navbar-toggler.collapsed .toggler-icon {
     background-color: #777;
 }
+
+.emphasis-light {
+    background-color: $black if($enable-important-utilities, !important, null);
+}
+
+.emphasis-dark {
+    background-color: $white if($enable-important-utilities, !important, null);
+}
+
+.emphasis, {
+    background-color: $black if($enable-important-utilities, !important, null);
+}
+
+@include color-mode(dark) {
+    .emphasis {
+        background-color: $white if($enable-important-utilities, !important, null);
+    }
+}
+
+// stylelint-enable annotation-no-unknown

assets/scss/components/_pagination.scss

@@ -0,0 +1,12 @@
+.pagination {
+    --bs-pagination-bg: var(--bs-primary-bg-subtle);
+    --bs-pagination-color: var(--bs-body-color);
+    --bs-pagination-border-color: none;
+    --bs-pagination-hover-color: var(--bs-pagination-active-color);
+    --bs-pagination-hover-bg: var(--bs-pagination-active-bg);
+    --bs-pagination-hover-border-color: none;
+}
+
+.pagination .page-item {
+    margin: 0.4rem;
+}

assets/scss/components/_persona.scss

@@ -0,0 +1,3 @@
+.persona {
+    min-height: 320px !important
+}

assets/scss/components/_search.scss

@@ -1,118 +0,0 @@
-// Adapted from https://github.com/h-enk/doks
-
-@include media-breakpoint-up(md) {
-    .search {
-        max-width: 20rem;
-        margin-top: 0.125rem;
-        margin-bottom: 0.125rem;
-    }
-}
-
-.form-control.is-search {
-    padding-right: 4rem;
-    border: 1px solid transparent;
-    background: $gray-100;
-}
-
-.form-control.is-search:focus {
-    border: 1px solid $primary;
-}
-
-.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;
-}
-
-.navbar-form {
-    position: relative;
-}
-
-#suggestions {
-    position: absolute;
-    left: 0;
-    margin-top: 0.5rem;
-    width: calc(100vw - 3rem);
-    z-index: $zindex-dropdown;
-}
-
-#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(sm) {
-    #suggestions {
-        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/_sidebar.scss

@@ -3,6 +3,25 @@
     top: $navbar-offset;
 }
 
+.sidebar-overflow {
+    top: $navbar-offset;
+    max-height: 90vh;
+    overflow-y: auto;
+}
+
+.sidebar-item {
+    color: rgba(0, 0, 0, 0.65);
+    margin-left: 0 !important;
+    padding-left: 0.85rem !important;
+    display: inline-block;
+
+    &.active,
+    &:hover,
+    &:focus {
+        color: black;
+    }
+}
+
 .btn-toggle {
     padding: 0.25rem 0.5rem;
     font-weight: 600;
@@ -11,7 +30,7 @@
 
     &:hover,
     &:focus {
-        color: rgba(0, 0, 0, 0.85);
+        color: black;
         background-color: tint-color($primary, 90%);
     }
 
@@ -24,10 +43,8 @@
     }
 }
 
-// scss-docs-end sidebar
-
 .btn-toggle[aria-expanded="true"] {
-    color: rgba(0, 0, 0, 0.85);
+    color: black;
 
     &::before {
         transform: rotate(90deg);
@@ -49,6 +66,59 @@
     }
 }
 
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        .sidebar-item {
+            color: var(--bs-body-color);
+            margin-left: 0 !important;
+            padding-left: 0.85rem !important;
+        
+            &.active,
+            &:hover,
+            &:focus {
+                color: white !important;
+                background-color: transparent;
+            }
+        }
+
+        .btn-toggle {
+            color: var(--bs-body-color);
+        
+            &:hover,
+            &:focus {
+                color: white !important;
+                background-color: transparent;
+            }
+        
+            &::before {
+                content: $btn-toggle-dark;
+            }
+        }
+
+        .btn-toggle[aria-expanded="true"] {
+            color: var(--bs-secondary-color);
+        }
+
+        .btn-toggle-nav a {
+            padding: 0.1875rem 0.5rem;
+            margin-top: 0.125rem;
+            margin-left: 1.25rem;
+
+            &:hover,
+            &:focus {
+                color: white !important;
+                background-color: transparent;
+            }
+
+            &.active {
+                font-weight: bold;
+            }
+        }
+    }
+}
+
+// scss-docs-end sidebar
+
 .dropdown-toggle {
     outline: 0;
 }

assets/scss/components/_syntax-dark.scss

@@ -0,0 +1,86 @@
+/* Background */ .bg { color: #c9d1d9; background-color: #0d1117; }
+/* PreWrapper */ .chroma { color: #c9d1d9; background-color: #0d1117; }
+/* Other */ .chroma .x {  }
+/* Error */ .chroma .err { color: #f85149 }
+/* CodeLine */ .chroma .cl {  }
+/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
+/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
+/* LineHighlight */ .chroma .hl { background-color: #b8b800 }
+/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #64686c }
+/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #6e7681 }
+/* Line */ .chroma .line { display: flex; }
+/* Keyword */ .chroma .k { color: #ff7b72 }
+/* KeywordConstant */ .chroma .kc { color: #79c0ff }
+/* KeywordDeclaration */ .chroma .kd { color: #ff7b72 }
+/* KeywordNamespace */ .chroma .kn { color: #ff7b72 }
+/* KeywordPseudo */ .chroma .kp { color: #79c0ff }
+/* KeywordReserved */ .chroma .kr { color: #ff7b72 }
+/* KeywordType */ .chroma .kt { color: #ff7b72 }
+/* Name */ .chroma .n {  }
+/* NameAttribute */ .chroma .na { color: #00cccc }
+/* NameBuiltin */ .chroma .nb { color: #00a2d8 }
+/* NameBuiltinPseudo */ .chroma .bp {  }
+/* NameClass */ .chroma .nc { color: #f0883e; font-weight: bold }
+/* NameConstant */ .chroma .no { color: #79c0ff; font-weight: bold }
+/* NameDecorator */ .chroma .nd { color: #d2a8ff; font-weight: bold }
+/* NameEntity */ .chroma .ni { color: #ffa657 }
+/* NameException */ .chroma .ne { color: #f0883e; font-weight: bold }
+/* NameFunction */ .chroma .nf { color: #d2a8ff; font-weight: bold }
+/* NameFunctionMagic */ .chroma .fm {  }
+/* NameLabel */ .chroma .nl { color: #79c0ff; font-weight: bold }
+/* NameNamespace */ .chroma .nn { color: #ff7b72 }
+/* NameOther */ .chroma .nx {  }
+/* NameProperty */ .chroma .py { color: #79c0ff }
+/* NameTag */ .chroma .nt { color: #7ee787 }
+/* NameVariable */ .chroma .nv { color: #79c0ff }
+/* NameVariableClass */ .chroma .vc {  }
+/* NameVariableGlobal */ .chroma .vg {  }
+/* NameVariableInstance */ .chroma .vi {  }
+/* NameVariableMagic */ .chroma .vm {  }
+/* Literal */ .chroma .l { color: #a5d6ff }
+/* LiteralDate */ .chroma .ld { color: #79c0ff }
+/* LiteralString */ .chroma .s { color: #a5d6ff }
+/* LiteralStringAffix */ .chroma .sa { color: #79c0ff }
+/* LiteralStringBacktick */ .chroma .sb { color: #a5d6ff }
+/* LiteralStringChar */ .chroma .sc { color: #a5d6ff }
+/* LiteralStringDelimiter */ .chroma .dl { color: #79c0ff }
+/* LiteralStringDoc */ .chroma .sd { color: #a5d6ff }
+/* LiteralStringDouble */ .chroma .s2 { color: #a5d6ff }
+/* LiteralStringEscape */ .chroma .se { color: #79c0ff }
+/* LiteralStringHeredoc */ .chroma .sh { color: #79c0ff }
+/* LiteralStringInterpol */ .chroma .si { color: #a5d6ff }
+/* LiteralStringOther */ .chroma .sx { color: #a5d6ff }
+/* LiteralStringRegex */ .chroma .sr { color: #79c0ff }
+/* LiteralStringSingle */ .chroma .s1 { color: #a5d6ff }
+/* LiteralStringSymbol */ .chroma .ss { color: #a5d6ff }
+/* LiteralNumber */ .chroma .m { color: #a5d6ff }
+/* LiteralNumberBin */ .chroma .mb { color: #a5d6ff }
+/* LiteralNumberFloat */ .chroma .mf { color: #a5d6ff }
+/* LiteralNumberHex */ .chroma .mh { color: #a5d6ff }
+/* LiteralNumberInteger */ .chroma .mi { color: #a5d6ff }
+/* LiteralNumberIntegerLong */ .chroma .il { color: #a5d6ff }
+/* LiteralNumberOct */ .chroma .mo { color: #a5d6ff }
+/* Operator */ .chroma .o { color: #ff7b72; font-weight: bold }
+/* OperatorWord */ .chroma .ow { color: #ff7b72; font-weight: bold }
+/* Punctuation */ .chroma .p {  }
+/* Comment */ .chroma .c { color: #979fa8; font-style: italic }
+/* CommentHashbang */ .chroma .ch { color: #979fa8; font-style: italic }
+/* CommentMultiline */ .chroma .cm { color: #979fa8; font-style: italic }
+/* CommentSingle */ .chroma .c1 { color: #979fa8; font-style: italic }
+/* CommentSpecial */ .chroma .cs { color: #979fa8; font-weight: bold; font-style: italic }
+/* CommentPreproc */ .chroma .cp { color: #979fa8; font-weight: bold; font-style: italic }
+/* CommentPreprocFile */ .chroma .cpf { color: #979fa8; font-weight: bold; font-style: italic }
+/* Generic */ .chroma .g {  }
+/* GenericDeleted */ .chroma .gd { color: #ffa198; background-color: #490202 }
+/* GenericEmph */ .chroma .ge { font-style: italic }
+/* GenericError */ .chroma .gr { color: #ffa198 }
+/* GenericHeading */ .chroma .gh { color: #79c0ff; font-weight: bold }
+/* GenericInserted */ .chroma .gi { color: #56d364; background-color: #0f5323 }
+/* GenericOutput */ .chroma .go { color: #979fa8 }
+/* GenericPrompt */ .chroma .gp { color: #979fa8 }
+/* GenericStrong */ .chroma .gs { font-weight: bold }
+/* GenericSubheading */ .chroma .gu { color: #79c0ff }
+/* GenericTraceback */ .chroma .gt { color: #ff7b72 }
+/* GenericUnderline */ .chroma .gl { text-decoration: underline }
+/* TextWhitespace */ .chroma .w { color: #6e7681 }

assets/scss/components/_syntax-light.scss

@@ -0,0 +1,86 @@
+/* Background */ .bg { background-color: #ffffff; }
+/* PreWrapper */ .chroma { background-color: #ffffff; }
+/* Other */ .chroma .x {  }
+/* Error */ .chroma .err { color: #a61717; background-color: #e3d2d2 }
+/* CodeLine */ .chroma .cl {  }
+/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
+/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
+/* LineHighlight */ .chroma .hl { background-color: #ffffcc }
+/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* Line */ .chroma .line { display: flex; }
+/* Keyword */ .chroma .k { color: #000000; font-weight: bold }
+/* KeywordConstant */ .chroma .kc { color: #000000; font-weight: bold }
+/* KeywordDeclaration */ .chroma .kd { color: #000000; font-weight: bold }
+/* KeywordNamespace */ .chroma .kn { color: #000000; font-weight: bold }
+/* KeywordPseudo */ .chroma .kp { color: #000000; font-weight: bold }
+/* KeywordReserved */ .chroma .kr { color: #000000; font-weight: bold }
+/* KeywordType */ .chroma .kt { color: #445588; font-weight: bold }
+/* Name */ .chroma .n {  }
+/* NameAttribute */ .chroma .na { color: #008080 }
+/* NameBuiltin */ .chroma .nb { color: #006b8f }
+/* NameBuiltinPseudo */ .chroma .bp { color: #999999 }
+/* NameClass */ .chroma .nc { color: #445588; font-weight: bold }
+/* NameConstant */ .chroma .no { color: #008080 }
+/* NameDecorator */ .chroma .nd { color: #3c5d5d; font-weight: bold }
+/* NameEntity */ .chroma .ni { color: #800080 }
+/* NameException */ .chroma .ne { color: #990000; font-weight: bold }
+/* NameFunction */ .chroma .nf { color: #990000; font-weight: bold }
+/* NameFunctionMagic */ .chroma .fm {  }
+/* NameLabel */ .chroma .nl { color: #990000; font-weight: bold }
+/* NameNamespace */ .chroma .nn { color: #555555 }
+/* NameOther */ .chroma .nx {  }
+/* NameProperty */ .chroma .py {  }
+/* NameTag */ .chroma .nt { color: #000080 }
+/* NameVariable */ .chroma .nv { color: #008080 }
+/* NameVariableClass */ .chroma .vc { color: #008080 }
+/* NameVariableGlobal */ .chroma .vg { color: #008080 }
+/* NameVariableInstance */ .chroma .vi { color: #008080 }
+/* NameVariableMagic */ .chroma .vm {  }
+/* Literal */ .chroma .l {  }
+/* LiteralDate */ .chroma .ld {  }
+/* LiteralString */ .chroma .s { color: #dd1144 }
+/* LiteralStringAffix */ .chroma .sa { color: #dd1144 }
+/* LiteralStringBacktick */ .chroma .sb { color: #dd1144 }
+/* LiteralStringChar */ .chroma .sc { color: #dd1144 }
+/* LiteralStringDelimiter */ .chroma .dl { color: #dd1144 }
+/* LiteralStringDoc */ .chroma .sd { color: #dd1144 }
+/* LiteralStringDouble */ .chroma .s2 { color: #dd1144 }
+/* LiteralStringEscape */ .chroma .se { color: #dd1144 }
+/* LiteralStringHeredoc */ .chroma .sh { color: #dd1144 }
+/* LiteralStringInterpol */ .chroma .si { color: #dd1144 }
+/* LiteralStringOther */ .chroma .sx { color: #dd1144 }
+/* LiteralStringRegex */ .chroma .sr { color: #009926 }
+/* LiteralStringSingle */ .chroma .s1 { color: #dd1144 }
+/* LiteralStringSymbol */ .chroma .ss { color: #990073 }
+/* LiteralNumber */ .chroma .m { color: #007a7a }
+/* LiteralNumberBin */ .chroma .mb { color: #007a7a }
+/* LiteralNumberFloat */ .chroma .mf { color: #007a7a }
+/* LiteralNumberHex */ .chroma .mh { color: #007a7a }
+/* LiteralNumberInteger */ .chroma .mi { color: #007a7a }
+/* LiteralNumberIntegerLong */ .chroma .il { color: #007a7a }
+/* LiteralNumberOct */ .chroma .mo { color: #007a7a }
+/* Operator */ .chroma .o { color: #000000; font-weight: bold }
+/* OperatorWord */ .chroma .ow { color: #000000; font-weight: bold }
+/* Punctuation */ .chroma .p {  }
+/* Comment */ .chroma .c { color: #6d6d5d; font-style: italic }
+/* CommentHashbang */ .chroma .ch { color: #6d6d5d; font-style: italic }
+/* CommentMultiline */ .chroma .cm { color: #6d6d5d; font-style: italic }
+/* CommentSingle */ .chroma .c1 { color: #6d6d5d; font-style: italic }
+/* CommentSpecial */ .chroma .cs { color: #999999; font-weight: bold; font-style: italic }
+/* CommentPreproc */ .chroma .cp { color: #999999; font-weight: bold; font-style: italic }
+/* CommentPreprocFile */ .chroma .cpf { color: #999999; font-weight: bold; font-style: italic }
+/* Generic */ .chroma .g {  }
+/* GenericDeleted */ .chroma .gd { color: #000000; background-color: #ffdddd }
+/* GenericEmph */ .chroma .ge { color: #000000; font-style: italic }
+/* GenericError */ .chroma .gr { color: #aa0000 }
+/* GenericHeading */ .chroma .gh { color: #999999 }
+/* GenericInserted */ .chroma .gi { color: #000000; background-color: #ddffdd }
+/* GenericOutput */ .chroma .go { color: #888888 }
+/* GenericPrompt */ .chroma .gp { color: #555555 }
+/* GenericStrong */ .chroma .gs { font-weight: bold }
+/* GenericSubheading */ .chroma .gu { color: #aaaaaa }
+/* GenericTraceback */ .chroma .gt { color: #aa0000 }
+/* GenericUnderline */ .chroma .gl { text-decoration: underline }
+/* TextWhitespace */ .chroma .w { color: #bbbbbb }

assets/scss/components/_syntax.scss

@@ -1,85 +1,38 @@
-/* Background */ .bg { color: #272822; background-color: #fafafa }
+// stylelint-disable annotation-no-unknown
-/* PreWrapper */ .chroma { color: #272822; background-color: #fafafa; }
+@import "syntax-light";
-/* Other */ .chroma .x {  }
+
-/* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
+.bg,
-/* CodeLine */ .chroma .cl {  }
+.chroma,
-/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+.chroma .err {
-/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
+    // set to transparent background to avoid rendering issues with example shortcode
-/* LineHighlight */ .chroma .hl { background-color: #ffffcc }
+    background-color: transparent if($enable-important-utilities, !important, null);
-/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+}
-/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+
-/* Line */ .chroma .line { display: flex; }
+.syntax-highlight {
-/* Keyword */ .chroma .k { color: #00a8c8 }
+    background-color: var(--bs-light) if($enable-important-utilities, !important, null);
-/* KeywordConstant */ .chroma .kc { color: #00a8c8 }
+    overflow-x: auto;
-/* KeywordDeclaration */ .chroma .kd { color: #00a8c8 }
+}
-/* KeywordNamespace */ .chroma .kn { color: #f92672 }
+
-/* KeywordPseudo */ .chroma .kp { color: #00a8c8 }
+@if $enable-dark-mode {
-/* KeywordReserved */ .chroma .kr { color: #00a8c8 }
+    [data-bs-theme="dark"] {
-/* KeywordType */ .chroma .kt { color: #00a8c8 }
+        @import "syntax-dark"; // stylelint-disable-line no-invalid-position-at-import-rule
-/* Name */ .chroma .n { color: #111111 }
+
-/* NameAttribute */ .chroma .na { color: #75af00 }
+        .bg,
-/* NameBuiltin */ .chroma .nb { color: #111111 }
+        .chroma,
-/* NameBuiltinPseudo */ .chroma .bp { color: #111111 }
+        .chroma .err {
-/* NameClass */ .chroma .nc { color: #75af00 }
+            // set to transparent background to avoid rendering issues with example shortcode
-/* NameConstant */ .chroma .no { color: #00a8c8 }
+            background-color: transparent if($enable-important-utilities, !important, null);
-/* NameDecorator */ .chroma .nd { color: #75af00 }
+        }
-/* NameEntity */ .chroma .ni { color: #111111 }
+
-/* NameException */ .chroma .ne { color: #75af00 }
+        .syntax-highlight {
-/* NameFunction */ .chroma .nf { color: #75af00 }
+            background-color: var(--bs-tertiary-bg) if($enable-important-utilities, !important, null);
-/* NameFunctionMagic */ .chroma .fm { color: #111111 }
+            overflow-x: auto;
-/* NameLabel */ .chroma .nl { color: #111111 }
+        }
-/* NameNamespace */ .chroma .nn { color: #111111 }
+
-/* NameOther */ .chroma .nx { color: #75af00 }
+        .bg,
-/* NameProperty */ .chroma .py { color: #111111 }
+        .chroma {
-/* NameTag */ .chroma .nt { color: #f92672 }
+            color: #c9d1d9 if($enable-important-utilities, !important, null);
-/* NameVariable */ .chroma .nv { color: #111111 }
+        }
-/* NameVariableClass */ .chroma .vc { color: #111111 }
+    }
-/* NameVariableGlobal */ .chroma .vg { color: #111111 }
+}
-/* NameVariableInstance */ .chroma .vi { color: #111111 }
+// stylelint-enable annotation-no-unknown
-/* NameVariableMagic */ .chroma .vm { color: #111111 }
-/* Literal */ .chroma .l { color: #ae81ff }
-/* LiteralDate */ .chroma .ld { color: #d88200 }
-/* LiteralString */ .chroma .s { color: #d88200 }
-/* LiteralStringAffix */ .chroma .sa { color: #d88200 }
-/* LiteralStringBacktick */ .chroma .sb { color: #d88200 }
-/* LiteralStringChar */ .chroma .sc { color: #d88200 }
-/* LiteralStringDelimiter */ .chroma .dl { color: #d88200 }
-/* LiteralStringDoc */ .chroma .sd { color: #d88200 }
-/* LiteralStringDouble */ .chroma .s2 { color: #d88200 }
-/* LiteralStringEscape */ .chroma .se { color: #8045ff }
-/* LiteralStringHeredoc */ .chroma .sh { color: #d88200 }
-/* LiteralStringInterpol */ .chroma .si { color: #d88200 }
-/* LiteralStringOther */ .chroma .sx { color: #d88200 }
-/* LiteralStringRegex */ .chroma .sr { color: #d88200 }
-/* LiteralStringSingle */ .chroma .s1 { color: #d88200 }
-/* LiteralStringSymbol */ .chroma .ss { color: #d88200 }
-/* LiteralNumber */ .chroma .m { color: #ae81ff }
-/* LiteralNumberBin */ .chroma .mb { color: #ae81ff }
-/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff }
-/* LiteralNumberHex */ .chroma .mh { color: #ae81ff }
-/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff }
-/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff }
-/* LiteralNumberOct */ .chroma .mo { color: #ae81ff }
-/* Operator */ .chroma .o { color: #f92672 }
-/* OperatorWord */ .chroma .ow { color: #f92672 }
-/* Punctuation */ .chroma .p { color: #111111 }
-/* Comment */ .chroma .c { color: #75715e }
-/* CommentHashbang */ .chroma .ch { color: #75715e }
-/* CommentMultiline */ .chroma .cm { color: #75715e }
-/* CommentSingle */ .chroma .c1 { color: #75715e }
-/* CommentSpecial */ .chroma .cs { color: #75715e }
-/* CommentPreproc */ .chroma .cp { color: #75715e }
-/* CommentPreprocFile */ .chroma .cpf { color: #75715e }
-/* Generic */ .chroma .g {  }
-/* GenericDeleted */ .chroma .gd {  }
-/* GenericEmph */ .chroma .ge { font-style: italic }
-/* GenericError */ .chroma .gr {  }
-/* GenericHeading */ .chroma .gh {  }
-/* GenericInserted */ .chroma .gi {  }
-/* GenericOutput */ .chroma .go {  }
-/* GenericPrompt */ .chroma .gp {  }
-/* GenericStrong */ .chroma .gs { font-weight: bold }
-/* GenericSubheading */ .chroma .gu {  }
-/* GenericTraceback */ .chroma .gt {  }
-/* GenericUnderline */ .chroma .gl {  }
-/* TextWhitespace */ .chroma .w {  }

assets/scss/components/_timeline.scss

@@ -0,0 +1,167 @@
+// scss-docs-start timeline
+$connector-radius: 0.8rem;
+$semi-circle-radius: 8rem;
+$semi-circle-border: 0.2rem;
+
+:root {
+    --timeline-highlight: var(--bs-primary);
+    --timeline-icon-radius: #{$semi-circle-radius};
+    --timeline-offset: 50%;
+    --timeline-connector-bg: var(--bs-body-bg);
+}
+
+@each $state in map-keys($theme-colors) {
+    .timeline-#{$state} {
+      --timeline-highlight: var(--#{$prefix}#{$state});
+    }
+}
+
+// scss-docs-end timeline
+
+.timeline, .timeline-sm {
+    position: relative;
+}
+
+.timeline-sm {
+    --timeline-icon-radius: calc(#{$semi-circle-radius} / 2.4);
+    --timeline-offset: 25%
+}
+
+@include media-breakpoint-up(sm) {
+    .timeline-sm {
+        --timeline-icon-radius: calc(#{$semi-circle-radius} / 2);
+    }
+}
+  
+.timeline::before, .timeline-sm::before {
+    content: "";
+    width: 2 * $semi-circle-border;
+    margin: 0 auto;
+    background: var(--bs-body-color);
+    position: absolute;
+    inset: 0;
+}
+
+.timeline-sm::before {
+    margin: 0 calc(var(--timeline-offset) - #{$semi-circle-border});
+}
+
+.timeline-semi-circle-start, .timeline-semi-circle-end {
+    width: var(--timeline-icon-radius);
+    height: var(--timeline-icon-radius);
+    border-radius: 100%;
+    position: relative;
+}
+
+.timeline-semi-circle-start {
+    left: -$semi-circle-border;
+}
+
+.timeline-semi-circle-end {
+    left: $semi-circle-border;
+}
+
+.timeline-semi-circle-start::before {
+    content: "";
+    width: var(--timeline-icon-radius);
+    height: var(--timeline-icon-radius);
+    border-radius: 100%;
+    border: $semi-circle-border solid;
+    position: absolute;
+    border-color: transparent var(--timeline-highlight) var(--timeline-highlight) var(--timeline-highlight);
+    transform: rotate(-90deg);
+}
+
+.timeline-semi-circle-start::after {
+    content: "";
+    left: 0;
+    top: 0;
+    width: var(--timeline-icon-radius);
+    height: var(--timeline-icon-radius);
+    border-radius: 100%;
+    border: $semi-circle-border solid;
+    position: absolute;
+    border-color: var(--timeline-highlight) var(--timeline-highlight) var(--timeline-highlight) transparent;
+    transform: rotate(-45deg);
+}
+
+.timeline-semi-circle-end::before {
+    content: "";
+    width: var(--timeline-icon-radius);
+    height: var(--timeline-icon-radius);
+    border-radius: 100%;
+    border: $semi-circle-border solid;
+    position: absolute;
+    border-color: transparent var(--timeline-highlight) var(--timeline-highlight) var(--timeline-highlight);
+    transform: rotate(-225deg);
+}
+
+.timeline-semi-circle-end::after {
+    content: "";
+    left: 0;
+    top: 0;
+    width: var(--timeline-icon-radius);
+    height: var(--timeline-icon-radius);
+    border-radius: 100%;
+    border: $semi-circle-border solid;
+    position: absolute;
+    border-color: var(--timeline-highlight) var(--timeline-highlight) var(--timeline-highlight) transparent;
+    transform: rotate(-180deg);
+}
+
+.timeline-description-text-start {
+    border-bottom: $semi-circle-border solid var(--timeline-highlight);
+    margin-right: 2 * $connector-radius;
+}
+
+.timeline-description-text-end {
+    border-bottom: $semi-circle-border solid var(--timeline-highlight);
+    margin-left: 2 * $connector-radius;
+}
+
+.timeline-panel-start, .timeline-panel-end, .timeline-connector-start, .timeline-connector-end {
+    top: calc(var(--timeline-icon-radius) / 2);
+    position: relative;
+    width: calc(var(--timeline-icon-radius) / 2);
+    height: calc($semi-circle-border + var(--timeline-icon-radius) / 2);
+    border: $semi-circle-border solid var(--timeline-highlight);
+    border-bottom: none;
+    border-right: none;
+    border-left: none;
+}
+
+.timeline-panel-start {
+    top: 50%;
+    right: 50%;
+    position: absolute;
+    width: calc(var(--timeline-icon-radius) * 2);
+    width: 2 * $connector-radius;
+    height: 50%;
+    border-top: $semi-circle-border solid var(--timeline-highlight);
+    border-left: $semi-circle-border solid var(--timeline-highlight);
+}
+
+.timeline-panel-end {
+    top: 50%;
+    position: absolute;
+    width: calc(var(--timeline-icon-radius) * 2);
+    width: 2 * $connector-radius;
+    height: 50%;
+    border-top: $semi-circle-border solid var(--timeline-highlight);
+    border-right: $semi-circle-border solid var(--timeline-highlight);
+}
+
+.timeline-dot::after {
+    display: inline-block;
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: var(--timeline-offset);
+    margin: (-$connector-radius) 0 0 (-$connector-radius);
+    width: 2 * $connector-radius;
+    height: 2 * $connector-radius;
+    border-radius: 100%;
+    border: ($semi-circle-border * 1.5) solid var(--timeline-connector-bg);
+    color: var(--timeline-highlight);
+    background: var(--timeline-highlight);
+}

assets/scss/components/_toc.scss

@@ -1,20 +1,21 @@
 //
-// Table of contents sidebar
+// Table of contents sidebar & drop-down panel
 //
 // scss-docs-start toc
-.toc {
+.toc-sidebar {
     grid-area: toc;
     right: 0;
     z-index: 2;
-    height: calc(100vh - 7rem);
+    height: calc(100vh - 5rem);
     overflow-y: auto;
-    top: $navbar-offset;
+    top: 5rem;
 }
 
 // scss-docs-end toc
 
 .toc nav {
     font-size: 0.875rem;
+    margin-bottom: -0.875rem;
 }
 
 .toc nav ul {
@@ -33,6 +34,10 @@
 
 .toc nav a {
     color: inherit;
+
+    &:hover {
+        color: var(--bs-primary);
+    }
 }
 
 .toc nav a:not(:hover) {
@@ -42,3 +47,46 @@
 .toc nav a code {
     font: inherit;
 }
+
+#toc-collapse {
+    border-color: var(--bs-secondary-color) !important;
+}
+
+.toc-button {
+    --bs-btn-hover-color: var(--bs-primary);
+    --bs-btn-hover-bg: var(--bs-body-bg);
+    --bs-btn-hover-border-color: var(--bs-primary);
+    --bs-btn-active-color: var(--bs-primary);
+    --bs-btn-active-bg: var(--bs-body-bg);
+    --bs-btn-active-border-color: var(--bs-primary);
+
+    &.active,
+    &:hover,
+    &:focus {
+        color: var(--bs-primary);
+        border-color: var(--bs-primary);
+        box-shadow: 0 0 0 4px var(--bs-primary-border-subtle);
+        outline: none;
+    }
+}
+
+@if $enable-dark-mode {
+    [data-bs-theme="dark"] {
+        .toc-button {
+            --bs-btn-color: var(--bs-body-color);
+            --bs-btn-border-color: var(--bs-body-color);
+        }
+
+        #toc-collapse {
+            border-color: var(--bs-body-color) !important;
+        }
+
+        .toc nav a {
+            color: var(--bs-body-color);
+
+            &:hover {
+                color: white;
+            }
+        }
+    }
+}

assets/scss/helpers/_colored-links.scss

@@ -1,19 +1,37 @@
-// stylelint-disable function-name-case
-
 // scss-docs-start colored-links
-@each $color, $value in $theme-colors {
+$custom-colors: (
-    $contrast-color: color-contrast($value);
+    "primary": "light", 
-    $color-rgb: to-rgb($value);
+    "secondary": "light", 
+    "success": "light", 
+    "danger": "light", 
+    "dark": "light", 
+    "black": "light",
+    "info": "dark", 
+    "warning": "dark", 
+    "light": "dark", 
+    "white": "dark",
+    "body": "adaptive",
+    "body-tertiary": "adaptive"
+);
+
+@each $color, $value in $custom-colors {
+    $main-color: var(--bs-body-color);
+    $emphasize-color: var(--bs-secondary-color);
+
+    @if $value == "light" {
+        $main-color: $white;
+        $emphasize-color: shade-color($main-color, $link-shade-percentage);
+    } @else if $value == "dark" {
+        $main-color: $black;
+        $emphasize-color: tint-color($main-color, $link-shade-percentage);
+    }
 
     .link-bg-#{$color} {
-        color: $contrast-color !important; // stylelint-disable-line declaration-no-important
+        color: $main-color if($enable-important-utilities, !important, null); 
-        background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null); // stylelint-disable-line annotation-no-unknown
 
-        @if $link-shade-percentage != 0 {
+        &:hover,
-            &:hover,
+        &:focus {
-            &:focus {
+            color: $emphasize-color if($enable-important-utilities, !important, null);
-                color: if($contrast-color == $color-contrast-light, shade-color($contrast-color, $link-shade-percentage), tint-color($contrast-color, $link-shade-percentage)) !important; // stylelint-disable-line declaration-no-important
-            }
         }
     }
 }

assets/scss/helpers/_display.scss

@@ -0,0 +1,30 @@
+.hidden {
+    display: none;
+}
+
+// stylelint-disable annotation-no-unknown
+
+// scss-docs-start display-color
+.d-none-light {
+    display: none if($enable-important-utilities, !important, null); 
+}
+
+.d-none-dark {
+    display: block if($enable-important-utilities, !important, null);
+}
+
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        .d-none-light {
+            display: block if($enable-important-utilities, !important, null);
+        }
+
+        .d-none-dark {
+            display: none if($enable-important-utilities, !important, null);
+        }
+    }
+}
+
+// scss-docs-end display-color
+
+// stylelint-enable annotation-no-unknown

assets/scss/layouts/_reboot.scss

@@ -1,3 +1,4 @@
 pre {
     padding: $spacer;
+    margin-bottom: 0;
 }

assets/scss/theme/fonts.scss

@@ -0,0 +1,62 @@
+/*!
+ * Copyright (c) 2016-2020 The Inter Project Authors.
+ * "Inter" is trademark of Rasmus Andersson.
+ * https://github.com/rsms/inter
+
+ * This Font Software is licensed under the SIL Open Font License, Version 1.1.
+ * This license is copied below, and is also available with a FAQ at:
+ * http://scripts.sil.org/OFL
+ */
+
+/* inter-200 - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 200;
+    src: url('../fonts/inter-v12-latin-200.eot'); /* IE9 Compat Modes */
+    src: url('../fonts/inter-v12-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('../fonts/inter-v12-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
+         url('../fonts/inter-v12-latin-200.woff') format('woff'), /* Modern Browsers */
+         url('../fonts/inter-v12-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
+         url('../fonts/inter-v12-latin-200.svg#Inter') format('svg'); /* Legacy iOS */
+  }
+  /* inter-300 - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 300;
+    src: url('../fonts/inter-v12-latin-300.eot'); /* IE9 Compat Modes */
+    src: url('../fonts/inter-v12-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('../fonts/inter-v12-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
+         url('../fonts/inter-v12-latin-300.woff') format('woff'), /* Modern Browsers */
+         url('../fonts/inter-v12-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
+         url('../fonts/inter-v12-latin-300.svg#Inter') format('svg'); /* Legacy iOS */
+  }
+  /* inter-regular - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    src: url('../fonts/inter-v12-latin-regular.eot'); /* IE9 Compat Modes */
+    src: url('../fonts/inter-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('../fonts/inter-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+         url('../fonts/inter-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
+         url('../fonts/inter-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+         url('../fonts/inter-v12-latin-regular.svg#Inter') format('svg'); /* Legacy iOS */
+  }
+  /* inter-600 - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 600;
+    src: url('../fonts/inter-v12-latin-600.eot'); /* IE9 Compat Modes */
+    src: url('../fonts/inter-v12-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('../fonts/inter-v12-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
+         url('../fonts/inter-v12-latin-600.woff') format('woff'), /* Modern Browsers */
+         url('../fonts/inter-v12-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
+         url('../fonts/inter-v12-latin-600.svg#Inter') format('svg'); /* Legacy iOS */
+  }

assets/scss/theme/theme.scss

@@ -0,0 +1,2 @@
+// Placeholder to quickly add your own styles
+// The file is included last in the build pipeline

config/_default/.forestry/front_matter/templates/blog-post.yml

@@ -1,25 +0,0 @@
----
-label: Blog post
-hide_body: false
-fields:
-- type: text
-  name: author
-  label: author
-- type: text
-  name: title
-  label: title
-- type: text
-  name: description
-  label: description
-- type: list
-  name: tags
-  label: tags
-- type: datetime
-  name: date
-  label: date
-- type: file
-  name: thumbnail
-  label: thumbnail
-- type: textarea
-  name: credits
-  label: credits

config/_default/.forestry/front_matter/templates/project.yml

@@ -1,25 +0,0 @@
----
-label: Project
-hide_body: false
-fields:
-- type: text
-  name: author
-  label: author
-- type: text
-  name: title
-  label: title
-- type: datetime
-  name: date
-  label: date
-- type: text
-  name: description
-  label: description
-- type: list
-  name: tags
-  label: tags
-- type: file
-  name: thumbnail
-  label: thumbnail
-- type: textarea
-  name: credits
-  label: credits

config/_default/.forestry/settings.yml

@@ -1,40 +0,0 @@
----
-new_page_extension: md
-auto_deploy: false
-admin_path: 
-webhook_url: 
-sections:
-- type: directory
-  path: content/en/blog
-  label: Blog
-  create: all
-  match: "**/*"
-  templates:
-  - blog-post
-- type: directory
-  path: content/en/projects
-  label: Projects
-  create: all
-  match: "**/*"
-  templates:
-  - project
-- type: document
-  path: content/en/about.md
-  label: About
-upload_dir: assets/img
-public_path: "/img"
-front_matter_path: ''
-use_front_matter_path: false
-file_template: ":filename:"
-build:
-  preview_env:
-  - HUGO_ENV=staging
-  - HUGO_VERSION=0.92.2
-  - HUGO_ENABLEGITINFO=true
-  preview_output_directory: public
-  install_dependencies_command: npm install
-  preview_docker_image: forestryio/hugo:node16
-  mount_path: "/srv"
-  working_dir: "/srv"
-  instant_preview_command: npm run start
-version: 0.81.0

config/_default/hugo.toml

@@ -0,0 +1,120 @@
+# toml-docs-start main
+title = "Hinode"
+copyright = "Copyright © 2023 Mark Dumay."
+paginate = 9
+enableGitInfo = true
+# toml-docs-end main
+
+# additional settings
+# googleAnalytics = "G-xxxxxxxxxx"
+baseURL = "https://example.com/"
+canonifyURLs = false
+enableEmoji = true
+enableRobotsTXT = true
+enableInlineShortcodes = true
+summaryLength = 20
+
+# prevent build failures when using Hugo's Instagram shortcode due to deprecated Instagram API.
+# See https://github.com/gohugoio/hugo/issues/7228#issuecomment-714490456
+ignoreErrors = ["error-remote-getjson"]
+
+# toml-docs-start timeout
+timeout = "180s"
+# toml-docs-end timeout
+
+# toml-docs-start language
+languageCode = "en-us"
+defaultContentLanguage = "en"
+defaultContentLanguageInSubdir = false
+# toml-docs-end language
+
+# toml-docs-start redirect
+[outputFormats.REDIR]
+mediaType = "text/netlify"
+baseName = "_redirects"
+isPlainText = true
+notAlternative = true
+
+[mediaTypes."text/netlify"]
+delimiter = ""
+
+[outputs]
+home = ["HTML", "RSS", "REDIR"]
+# toml-docs-end redirect
+
+# toml-docs-start build
+[build]
+  writeStats = true
+# toml-docs-end build
+  
+[taxonomies]
+  tag = 'tags'
+
+[privacy]
+  [privacy.vimeo]
+    disabled = false
+    simple = true
+
+  [privacy.twitter]
+    disabled = false
+    enableDNT = true
+    simple = true
+
+  [privacy.instagram]
+    disabled = false
+    simple = true
+
+  [privacy.youtube]
+    disabled = false
+    privacyEnhanced = true
+
+[services]
+  [services.instagram]
+    disableInlineCSS = true
+  [services.twitter]
+    disableInlineCSS = true
+
+[outputFormats]
+  [outputFormats.XML]
+    isPlainText = false
+    mediaType = "application/xml"
+    isHtml = false
+    noUgly = true
+    permalinkable = false
+    name = "xml"
+
+[module]
+  [module.hugoVersion]
+    extended = true
+    min = "0.110.0"
+    max = ""
+  [[module.mounts]]
+    source = "archetypes"
+    target = "archetypes"
+  [[module.mounts]]
+    source = "assets"
+    target = "assets"
+  [[module.mounts]]
+    source = "i18n"
+    target = "i18n"
+  [[module.mounts]]
+    source = "layouts"
+    target = "layouts"
+  [[module.mounts]]
+    source = "static"
+    target = "static"
+  [[module.mounts]]
+    source = "netlify.toml"
+    target = "assets/config/netlify.toml"
+# toml-docs-start modules
+  [[module.imports]]
+    path = "github.com/gethinode/mod-bootstrap"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-flexsearch"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-fontawesome"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-katex"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-leaflet"
+# toml-docs-end modules

config/_default/languages.toml

@@ -1,35 +1,15 @@
 # toml-docs-start lang-main
 [en]
     languageName = "English"
-    contentDir = "content/en"
+    contentDir = "content"
     weight = 1
 # toml-docs-end lang-main
 # toml-docs-start lang-param
     [en.params.head]
         tagline = "A Hugo Theme"
-    [en.params.feature]
+    [en.params.social]
-        message = "Welcome to Hinode!"
+        title = "Follow me"
-        tagline = "A clean documentation and blog theme for your Hugo site based on Bootstrap 5."
+        caption = "I work on everything coding and tweet developer memes"
-        link = "/en/about"
-        caption = "About"
     [en.params.footer]
-        license = "Licensed under Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank'>CC BY-NC-SA 4.0</a>)."
+        # license = "Licensed under Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank' rel='noopener noreferrer'>CC BY-NC-SA 4.0</a>)."
-        socialTitle = "Follow me"
-        socialCaption = "I work on everything coding and tweet developer memes"
 # toml-docs-end lang-param
-
-[nl]
-    languageName = "Nederlands"
-    contentDir = "content/nl"
-    weight = 2
-    [nl.params.head]
-        tagline = "Een Hugo Thema"
-    [nl.params.feature]
-        message = "Welkom bij Hinode!"
-        tagline = "Een documentatie en blog thema voor Hugo gebaseerd op Bootstrap 5."
-        link = "/nl/over-mij"
-        caption = "Over mij"
-    [nl.params.footer]
-        license = "Gelicenseerd onder Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank'>CC BY-NC-SA 4.0</a>)."
-        socialTitle = "Volg mij"
-        socialCaption = "Ik doe aan programmeren en tweet memes"

config/_default/markup.toml

@@ -10,8 +10,10 @@ defaultMarkdownHandler = "goldmark"
     lineNos = false
     lineNumbersInTable = false
     noClasses = false
-    # style = "monokailight" ## Update the 'create:syntax' command in package.json to modify the style
     tabWidth = 2
+    ## Update the 'create:syntax' command in package.json to modify the style
+    ## The first two lines have been modified to remove the background color
+    # style = "monokailight" 
 
 [goldmark]
     [goldmark.extensions]

config/_default/menus/menus.en.toml

@@ -1,78 +1,51 @@
 [[main]]
-  name = "About"
+  name = "Home"
-  url = "/about/"
+  pageRef = "/"
   weight = 10
 
-[[main]]
-  name = "Docs"
-  url = "/docs/"
-  weight = 20
-
-[[main]]
-  name = "Blog"
-  url = "/blog/"
-  weight = 30
-
-[[main]]
-  name = "Projects"
-  url = "/projects/"
-  weight = 40
-
-[[main]]
-  name = "Sample project"
-  url = "/en/projects/sample-project/"
-  parent = "Projects"
-  weight = 1
-
-[[main]]
-  name = "Another project"
-  url = "/en/projects/another-project/"
-  parent = "Projects"
-  weight = 2
-
 [[main]]
   name = "Tags"
-  url = "/tags/"
+  pageRef = "/tags"
-  weight = 50
+  weight = 20
 
 [[social]]
   name = "LinkedIn"
-  pre = "<i class=\"fab fa-linkedin fa-2x\"></i>"
+  pre = "fab linkedin"
   url = "https://linkedin.com/"
   weight = 10
 
 [[social]]
   name = "GitHub"
-  pre = "<i class=\"fab fa-github fa-2x\"></i>"
+  pre = "fab fa-github"
   url = "https://github.com/"
   weight = 20
 
 [[social]]
   name = "Medium"
-  pre = "<i class=\"fab fa-medium fa-2x\"></i>"
+  pre = "fab medium"
   url = "https://medium.com/"
   weight = 30
 
 # toml-docs-start sample-navigation
 [[sample]]
   name = "Blog"
-  url = "/blog/"
+  pageRef = "/blog/"
   weight = 10
 
 [[sample]]
   name = "Projects"
-  url = "/projects/"
+  pageRef = "/projects/"
   weight = 20
 
 [[sample]]
   name = "Sample project"
-  url = "/en/projects/sample-project/"
+  pageRef = "/projects/sample-project/"
   parent = "Projects"
   weight = 1
 
 [[sample]]
   name = "Another project"
-  url = "/en/projects/another-project/"
+  pageRef = "/projects/another-project/"
   parent = "Projects"
   weight = 2
 # toml-docs-end sample-navigation

config/_default/menus/menus.nl.toml

@@ -1,37 +0,0 @@
-[[main]]
-  name = "Over mij"
-  url = "/over-mij/"
-  weight = 10
-
-[[main]]
-  name = "Blog"
-  url = "/blog/"
-  weight = 20
-
-[[main]]
-  name = "Projecten"
-  url = "/projecten/"
-  weight = 30
-
-[[main]]
-  name = "Tags"
-  url = "/tags/"
-  weight = 40
-
-[[social]]
-  name = "LinkedIn"
-  pre = "<i class=\"fab fa-linkedin fa-2x\"></i>"
-  url = "https://linkedin.com/"
-  weight = 10
-
-[[social]]
-  name = "GitHub"
-  pre = "<i class=\"fab fa-github fa-2x\"></i>"
-  url = "https://github.com/"
-  weight = 20
-
-[[social]]
-  name = "Medium"
-  pre = "<i class=\"fab fa-medium fa-2x\"></i>"
-  url = "https://medium.com/"
-  weight = 30

config/_default/params.toml

@@ -2,60 +2,122 @@
 [main]
     separator = "-"
     description = "Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5."
+    enableDarkMode = true
+    modes = ["light", "dark"]
+    canonifyAssetsURLs = false
+    endorse = true
+    [main.externalLinks]
+        cue = false
+        tab = false
 # toml-docs-end main
 
+# toml-docs-start modules
+[modules]
+    core = ["bootstrap", "flexsearch", "fontawesome"]
+    optional = ["leaflet", "katex"]
+    excludeSCSS = ["bootstrap"]
+    disableTemplate = ["katex"]
+    [modules.fontawesome]
+        inline = true
+        debug = true
+        skipMissing = false
+# toml-docs-end modules
+
+# toml-docs-start debugging
+[debugging]
+    showJS = false
+    showSCSS = false
+# toml-docs-end debugging
+
 # toml-docs-start docs
 [docs]
-    version = "0.8"
+    github = "https://github.com/gethinode/hinode"
+    release = "https://github.com/gethinode/hinode/releases/tag/"
+    checkVersion = false
 # toml-docs-end docs
 
 # toml-docs-start home
 [home]
-    sections = ["blog", "projects"]
+    # sections = ["posts"]
-    featurePhoto = "/img/sunrise.jpg" # source: https://unsplash.com/photos/ZX6BPboJrYk
     fullCover = false
+    centerHeadline = false
+    style = ""
 # toml-docs-end home
 
 # toml-docs-start navigation
 [navigation]
-    logo = "/img/logo_embedded.svg"
+    anchor = true
-    color = "white"
+    logo = "/img/logo_icon.svg"
-    style = "light"
+    color = "body"
     fixed = true
-    offset = "3em"
+    offset = "3.8em"
     search = true
-    breadcrumb = false
+    breadcrumb = true
     toc = true
     sidebar = true
 # toml-docs-end navigation
 
-# toml-docs-start list
+# toml-docs-start messages
-[list]
+[messages]
-    [blog]
+    placement = "bottom-right"
-        title = "Blog"
+# toml-docs-end messages
-        sort = "date"
+
-        reverse = false
+# toml-docs-start sharing
-        cols = 3
+[sharing]
-        color = ""
+    enabled = true
-        padding = "0"
+    sort = "weight"
-        header = "full"
+    reverse = false
-        footer = "none"
+    webshare = true
-        orientation = "stacked"
+
-        style = "border-0"
+[[sharing.providers]]
-        homepage = 3
+    name = "LinkedIn"
-    [projects]
+    url = "https://www.linkedin.com/sharing/share-offsite/?url={url}"
-        title = "Projects"
+    icon = "fab linkedin"
-        sort = "title"
+    weight = 10
-        reverse = false
+
-        cols = 1
+[[sharing.providers]]
-        color = ""
+    name = "Twitter"
-        padding = "3"
+    url = "https://twitter.com/home?status={url}"
-        header = "none"
+    icon = "fab x-twitter"
-        footer = "tags"
+    weight = 20
-        orientation = "none"
+
-        style = "border-1 card-emphasize"
+[[sharing.providers]]
-        homepage = 3
+    name = "Facebook"
-# toml-docs-end list
+    url = "https://www.facebook.com/sharer.php?u={url}"
+    icon = "fab facebook"
+    weight = 30
+
+[[sharing.providers]]
+    name = "WhatsApp"
+    url = "whatsapp://send?text={title}%20{url}"
+    icon = "fab whatsapp"
+    weight = 40
+
+[[sharing.providers]]
+    name = "email"
+    url = "{url}"
+    icon = "fas link"
+    weight = 50
+    clipboard = true
+# toml-docs-end sharing
+
+# toml-docs-start sections
+# [sections]
+#     [sections.posts]
+#         title = "Posts"
+#         sort = "date"
+#         reverse = true
+#         nested = true
+#         cols = 3
+#         color = ""
+#         padding = "0"
+#         header = "full"
+#         footer = "none"
+#         orientation = "stacked"
+#         style = "border-0 card-zoom"
+#         homepage = 3
+#         separator = true
+# toml-docs-end sections
 
 [favicon]
     logo = "img/favicon.png"
@@ -63,7 +125,7 @@
 
 # toml-docs-start theme-colors
 [style]
-    primary = "#D43900"
+    primary = "#d43900"
     secondary = "#6c757d"
     success = "#198754"
     info = "#0dcaf0"
@@ -73,10 +135,16 @@
     dark = "#212529"
 # toml-docs-end theme-colors
     themeOpacity = "10"
+    darkModeShade = "20%"
+    darkModeTint = "40%"
 # toml-docs-start font
     themeFont = "Inter"
-    themeFontPath = "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap"
+    # themeFontPath = "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap" # external path
+    themeFontPath = "/fonts" # local path
 # toml-docs-end font
+# toml-docs-start build
+    purge = false
+# toml-docs-end build
 
 [schema]
     type = "Organization"
@@ -84,11 +152,11 @@
     locale = "en-US"
     # twitter = "https://twitter.com/gethinode"
     # linkedIn = ""
-    github = "https://github.com/markdumay/hugo-theme-hinode"
+    github = "https://github.com/gethinode/hinode"
     section = "blog"
     [author]
         name = "Mark Dumay"
-        twitter = "https://twitter.com/markdumay"
+        # twitter = "https://twitter.com/markdumay"
         linkedin = "https://www.linkedin.com/in/markdumay/"
         github = "https://github.com/markdumay"
     [logo]
@@ -114,68 +182,4 @@
     #theme = "" 
 
 [links]
-    blist = "https://github.com/apvarun/blist-hugo-theme"
+    hinode = "https://gethinode.com"
-    bootstrap = "https://getbootstrap.com"
-    bs_badge_heading = "https://getbootstrap.com/docs/5.2/components/badge/#headings"
-    bs_breakpoints = "https://getbootstrap.com/docs/5.3/layout/breakpoints"
-    bs_grid = "https://getbootstrap.com/docs/5.3/layout/grid"
-    bs_offcanvas = "https://getbootstrap.com/docs/5.3/components/offcanvas"
-    bs_navbar_placement = "https://getbootstrap.com/docs/5.3/components/navbar/#placement"
-    bs_tables = "https://getbootstrap.com/docs/5.3/content/tables"
-    cc_by_nc_4_0 = "https://creativecommons.org/licenses/by-nc/4.0/"
-    commit_message = "https://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html"
-    contrast_checker = "https://accessibleweb.com/color-contrast-checker/"
-    css_codeguide = "https://codeguide.co/#css"
-    doks = "https://github.com/h-enk/doks"
-    eslint = "https://eslint.org"
-    flexsearch = "https://github.com/nextapps-de/flexsearch"
-    fontawesome = "https://fontawesome.com"
-    fa_icons = "https://fontawesome.com/icons"
-    fa_styling = "https://fontawesome.com/docs/web/style/styling"
-    fa_animation = "https://fontawesome.com/docs/web/style/animate"
-    git_download = "https://git-scm.com"
-    github_pr = "https://help.github.com/articles/about-pull-requests/"
-    github_rebase = "https://help.github.com/articles/about-git-rebase/"
-    google_fonts = "https://fonts.google.com"
-    html_codeguide = "https://codeguide.co/#html"
-    hugo = "https://gohugo.io"
-    hugo_config = "https://gohugo.io/getting-started/configuration/#all-configuration-settings"
-    hugo_config_dir = "https://gohugo.io/getting-started/configuration/#configuration-directory"
-    hugo_content = "https://gohugo.io/content-management/formats"
-    hugo_chroma = "https://gohugo.io/content-management/syntax-highlighting/#list-of-chroma-highlighting-languages"
-    hugo_fingerprint = "https://gohugo.io/hugo-pipes/fingerprint"
-    hugo_frontmatter = "https://gohugo.io/content-management/front-matter"
-    hugo_i18n = "https://gohugo.io/functions/i18n"
-    hugo_lang = "https://gohugo.io/content-management/multilingual"
-    hugo_lang_config = "https://gohugo.io/content-management/multilingual/#configure-languages"
-    hugo_menus = "https://gohugo.io/content-management/menus/"
-    hugo_imaging = "https://gohugo.io/content-management/image-processing/#imaging-configuration"
-    hugo_ordering = "https://gohugo.io/templates/lists/#order-content"
-    hugo_templates = "https://gohugo.io/templates/introduction/"
-    hugo_toc = "https://gohugo.io/content-management/toc"
-    issue_tracker = "https://github.com/markdumay/hugo-theme-hinode/issues"
-    license = "https://github.com/markdumay/hugo-theme-hinode/blob/main/LICENSE"
-    markdown_emoji = "https://gist.github.com/rxaviers/7360908"
-    markdown_md013 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md013---line-length"
-    markdown_md024 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md024---multiple-headings-with-the-same-content"
-    markdown_md026 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md026---trailing-punctuation-in-heading"
-    markdown_md033 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md033---inline-html"
-    markdown_md034 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md034---bare-url-used"
-    markdown_md051 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md051---link-fragments-should-be-valid"
-    markdown_md053 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md053---link-and-image-reference-definitions-should-be-needed"
-    markdown_rules = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md"
-    markdownlint = "https://github.com/DavidAnson/markdownlint-cli2"
-    mozilla_image = "https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images"
-    netlify = "https://www.netlify.com"
-    nodejs = "https://nodejs.org"
-    npm = "https://www.npmjs.com"
-    observatory = "https://observatory.mozilla.org/analyze/hinode-demo.markdumay.org"
-    package_npm = "https://www.npmjs.com/package/@markdumay/hugo-theme-hinode"
-    pagespeed = "https://pagespeed.web.dev/report?url=https%3A%2F%2Fhinode-demo.markdumay.org%2F"
-    repository = "https://github.com/markdumay/hugo-theme-hinode"
-    repository_child = "https://github.com/markdumay/hugo-theme-hinode-child.git"
-    repository_owner = "https://github.com/markdumay/"
-    semver = "https://semver.org"
-    stylelint = "https://stylelint.io"
-    utterances = "https://utteranc.es"
-    wcag_contrast = "https://www.w3.org/TR/WCAG20/#visual-audio-contrast"

config/_default/server.toml

@@ -8,14 +8,15 @@ for = '/**'
     Content-Security-Policy = """\
         default-src 'self'; \
         script-src 'self' \
-            https://utteranc.es/client.js; \
+            https://utteranc.es/client.js https://*.google-analytics.com https://*.googletagmanager.com; \
         style-src 'self' https://utteranc.es https://fonts.googleapis.com https://www.youtube.com; \
         object-src 'none'; \
         base-uri 'self'; \
-        connect-src 'self'; \
+        connect-src 'self'
+            https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com; \
         font-src 'self' https://fonts.gstatic.com; \
         frame-src 'self' https://utteranc.es https://www.youtube-nocookie.com https://www.youtube.com; \
-        img-src 'self' https://i.vimeocdn.com https://i.ytimg.com; \
+        img-src 'self' data: https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com https://tile.openstreetmap.org; \
         manifest-src 'self'; \
         media-src 'self' \
         """
@@ -32,6 +33,11 @@ for = '/**'
         fullscreen=(), \
         payment=() \
         """
-    Cache-Control = "public, max-age=31536000"
+    cache-control = """\
+        max-age=0, \
+        no-cache, \
+        no-store, \
+        must-revalidate \
+        """
     Access-Control-Allow-Origin = "*"
 # toml-docs-end server-config

config/postcss.config.js

@@ -1,47 +1,43 @@
-const autoprefixer = require('autoprefixer');
+const autoprefixer = require('autoprefixer')({})
-const purgecss = require('@fullhuman/postcss-purgecss');
+const cssnano = require('cssnano')({
-const whitelister = require('purgecss-whitelister');
+  preset: 'advanced'
+})
+const whitelister = require('purgecss-whitelister')
+const purgecss = require('@fullhuman/postcss-purgecss')({
+  content: ['./hugo_stats.json'],
+  defaultExtractor: (content) => {
+    const els = JSON.parse(content).htmlElements
+    return [...(els.tags || []), ...(els.classes || []), ...(els.ids || [])]
+  },
+  dynamicAttributes: ['data-bs-theme'],
+  safelist: [
+    ...whitelister([
+      './assets/scss/components/_clipboard.scss',
+      './assets/scss/components/_command.scss',
+      './assets/scss/components/_navbar.scss',
+      './assets/scss/components/_search.scss',
+      './assets/scss/components/_syntax.scss',
+      './assets/scss/components/_syntax-dark.scss',
+      './assets/scss/components/_syntax-light.scss',
+      './assets/scss/theme/fonts.scss',
+      './assets/scss/theme/theme.scss',
+      './_vendor/github.com/gethinode/mod-flexsearch/assets/scss/modules/flexsearch/flexsearch.scss',
+      './_vendor/github.com/gethinode/mod-katex/dist/katex.scss',
+      './_vendor/github.com/gethinode/mod-leaflet/dist/leaflet.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_carousel.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_dropdown.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_reboot.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_tooltip.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_transitions.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_utilities.scss'
+    ])
+  ]
+})
 
 module.exports = {
   plugins: [
-    autoprefixer(),
+    autoprefixer,
-    purgecss({
+    cssnano,
-      content: [
+    purgecss
-        './layouts/**/*.html',
+  ]
-        './content/**/*.md',
-      ],
-      safelist: [
-        /lazyloaded/,
-        /table/,
-        /thead/,
-        /tbody/,
-        /tr/,
-        /th/,
-        /td/,
-        /h5/,
-        /alert-link/,
-        /container-xxl/,
-        /container-fluid/,
-        /^bg-opacity-\d+/,
-        /svg.*/, 
-        /fa.*/,
-        /ratio.*/,
-        /suggestion.*/,
-        ...whitelister([
-          './assets/scss/components/_blockquote.scss',
-          './assets/scss/components/_buttons.scss',
-          './assets/scss/components/_card.scss',
-          './assets/scss/components/_clipboard.scss',
-          './assets/scss/components/_img.scss',
-          './assets/scss/components/_navbar.scss',
-          './assets/scss/components/_search.scss',
-          './assets/scss/components/_syntax.scss',
-          './assets/scss/layouts/_reboot.scss',
-          './assets/scss/layouts/type.scss',
-          './node_modules/bootstrap/scss/_dropdown.scss',
-          './node_modules/bootstrap/scss/_utilities.scss',
-        ]),
-      ],
-    }),
-  ],
 }

config/production/config.toml

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

config/production/deployment.toml

@@ -0,0 +1,31 @@
+# toml-docs-start az-blob
+# By default, files are uploaded in an arbitrary order.
+# Files that match the regular expressions in the "Order" list
+# will be uploaded first, in the listed order.
+order = [".webp$", ".jpg$", ".gif$"]
+
+[targets]
+name = "hinode"
+URL = "azblob://$web"
+
+[[matchers]]
+# Cache static assets for 1 year.
+pattern = "^.+\\.(js|css|svg|ttf)$"
+cacheControl = "max-age=31536000, no-transform, public"
+gzip = true
+
+[[matchers]]
+pattern = "^.+\\.(png|jpg|webp)$"
+cacheControl = "max-age=31536000, no-transform, public"
+gzip = false
+
+[[matchers]]
+# Set custom content type for /sitemap.xml
+pattern = "^sitemap\\.xml$"
+contentType = "application/xml"
+gzip = true
+
+[[matchers]]
+pattern = "^.+\\.(html|xml|json)$"
+gzip = true
+# toml-docs-end az-blob

content/_index.md

@@ -0,0 +1,13 @@
+---
+title: Welcome to Hinode!
+thumbnail:
+    url: /img/sunrise.jpg
+    author: Harris Vo
+    authorURL: https://unsplash.com/@hoanvokim
+    origin: https://unsplash.com/photos/ZX6BPboJrYk
+    originName: Unsplash
+---
+
+A clean documentation and blog theme for your Hugo site based on Bootstrap 5.
+
+{{< button href="https://gethinode.com/docs" icon="fas book-open" order="first" >}}Get Started{{< /button>}}

content/en/_index.md

@@ -1,4 +0,0 @@
----
-author: Mark Dumay
-title: A Clean Theme for Hugo
----

content/en/blog/bundling.md

@@ -1,13 +0,0 @@
----
-author: Mark Dumay
-title: Javascript bundling
-date: 2023-01-23
-description: 
-status: draft
-tags: ["code"]
-thumbnail: img/notepad.jpg
-photoCredits: <a href="https://unsplash.com/@frederickjmedina">Frederick Medina</a>
-photoSource: <a href="https://unsplash.com/photos/PdfRE-xB--s">Unsplash</a>
----
-
-<!-- https://blog.wesleyac.com/posts/why-not-javascript-cdn -->

content/en/blog/code-highlighting.md

@@ -1,58 +0,0 @@
----
-author: "Mark Dumay"
-title: "Code Highlighting"
-date: 2022-04-16
-description: "Examples on how to enable code highlighting."
-tags: ["code"]
-thumbnail: img/notepad.jpg
-photoCredits: <a href="https://unsplash.com/@frederickjmedina">Frederick Medina</a>
-photoSource: <a href="https://unsplash.com/photos/PdfRE-xB--s">Unsplash</a>
----
-
-## Code Fencing
-
-Use code fencing to highlight the syntax of a specific language.
-
-```json
-{
-  "version": "0.2.0",
-  "themes": [],
-  "projects": [],
-  "configuration": {}
-}
-```
-
-```html
-<div class="highlight">
-    <pre>
-        <code>some code...</code>
-    </pre>
-</div>
-```
-
-## Highlight Shortcode
-
-Use the `highlight` shortcode to customize the layout of a specific code block.
-
-{{< highlight go "linenos=table,hl_lines=8 15-17,linenostart=199" >}}
-// GetTitleFunc returns a func that can be used to transform a string to
-// title case.
-//
-// The supported styles are
-//
-// - "Go" (strings.Title)
-// - "AP" (see https://www.apstylebook.com/)
-// - "Chicago" (see https://www.chicagomanualofstyle.org/home.html)
-//
-// If an unknown or empty style is provided, AP style is what you get.
-func GetTitleFunc(style string) func(s string) string {
-  switch strings.ToLower(style) {
-  case "go":
-    return strings.Title
-  case "chicago":
-    return transform.NewTitleConverter(transform.ChicagoStyle)
-  default:
-    return transform.NewTitleConverter(transform.APStyle)
-  }
-}
-{{< / highlight >}}

content/en/blog/emoji-support.md

@@ -1,24 +0,0 @@
----
-author: "Hugo Authors"
-title: "Emoji Support"
-date: 2021-07-15
-description: "Guide to emoji usage in Hugo."
-tags: ["emoji"]
-# thumbnail: img/dunes.jpg
-thumbnail: https://picsum.photos/id/184/4288/2848.jpg
-photoCredits: <a href="https://unsplash.com/@timdegroot">Tim de Groot</a>
-photoSource: <a href="https://unsplash.com/photos/yNGQ830uFB4">Unsplash</a>
----
-
-Emoji can be enabled in a Hugo project in a number of ways.
-
-<!--more-->
-
-The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes).
-
-To enable emoji globally, set `enableEmoji` to `true` in your site's [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g.
-
-<p><span class="nowrap"><span class="emojify">🙈</span> <code>:see_no_evil:</code></span>  <span class="nowrap"><span class="emojify">🙉</span> <code>:hear_no_evil:</code></span>  <span class="nowrap"><span class="emojify">🙊</span> <code>:speak_no_evil:</code></span></p>
-<br>
-
-The [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) is a useful reference for emoji shorthand codes.

content/en/blog/markdown-syntax.md

@@ -1,165 +0,0 @@
----
-author: Hugo Authors
-title: Markdown Syntax Guide
-description: Use Markdown syntax and basic HTML elements to style your Hugo content files.
-tags: ["markdown", "css", "html"]
-date: 2022-01-14
-thumbnail: img/phone.jpg # https://picsum.photos/id/160/3200/2119
-photoCredits: <a href="https://unsplash.com/@thomweerd">Thom</a> 
-photoSource: <a href="https://unsplash.com/photos/Zdcq3iKly6g">Unsplash</a>
----
-
-This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
-
-<!--more-->
-
-## Headings
-
-The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.
-
-<!-- markdownlint-disable-next-line -->
-# H1
-
-## H2
-
-### H3
-
-#### H4
-
-##### H5
-
-###### H6
-
-## Paragraph
-
-Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
-
-Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
-
-## Blockquotes
-
-The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
-
-### Blockquote without attribution
-
-> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
-> **Note** that you can use _Markdown syntax_ within a blockquote.
-{.blockquote}
-
-### Blockquote with attribution
-
-> Don't communicate by sharing memory, share memory by communicating.<br>
-> — <cite>Rob Pike[^1]</cite>
-{.blockquote}
-
-[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
-
-<figure>
-  <blockquote class="blockquote">
-    <p>A well-known quote, contained in a blockquote element.</p>
-  </blockquote>
-  <figcaption class="blockquote-footer">
-    Someone famous in <cite title="Source Title">Source Title</cite>
-  </figcaption>
-</figure>
-
-## Tables
-
-Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box.
-
-| Name  | Age |
-| ----- | --- |
-| Bob   | 27  |
-| Alice | 23  |
-{.table}
-
-### Inline Markdown within tables
-
-| Italics   | Bold     | Code   |
-| --------- | -------- | ------ |
-| _italics_ | **bold** | `code` |
-{.table}
-
-## Code Blocks
-
-### Code block with backticks
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>Example HTML5 Document</title>
-  </head>
-  <body>
-    <p>Test</p>
-  </body>
-</html>
-```
-
-<!-- markdownlint-disable MD046 -->
-### Code block indented with four spaces
-
-    <!doctype html>
-    <html lang="en">
-    <head>
-      <meta charset="utf-8">
-      <title>Example HTML5 Document</title>
-    </head>
-    <body>
-      <p>Test</p>
-    </body>
-    </html>
-<!-- markdownlint-enable MD046 -->
-
-### Code block with Hugo's internal highlight shortcode
-
-{{< highlight html >}}
-
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Example HTML5 Document</title>
-</head>
-<body>
-  <p>Test</p>
-</body>
-</html>
-{{< /highlight >}}
-
-## List Types
-
-### Ordered List
-
-1. First item
-2. Second item
-3. Third item
-
-### Unordered List
-
-- List item
-- Another item
-- And another item
-
-### Nested list
-
-- Fruit
-  - Apple
-  - Orange
-  - Banana
-- Dairy
-  - Milk
-  - Cheese
-
-## Other Elements — abbr, sub, sup, kbd, mark
-
-<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
-
-H<sub>2</sub>O
-
-X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
-
-Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.
-
-Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.

content/en/blog/rich-content.md

@@ -1,34 +0,0 @@
----
-author: "Hugo Authors"
-title: "Rich Content"
-date: 2021-07-13
-description: "A brief description of Hugo Shortcodes."
-tags: ["shortcode", "privacy"]
-thumbnail: img/flowers.jpg # https://picsum.photos/id/106/2592/1728
-photoCredits: <a href="https://unsplash.com/@flutterhappy">Arvee Marie</a>
-photoSource: <a href="https://unsplash.com/photos/YnfGtpt2gf4">Unsplash</a>
----
-
-Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-management/shortcodes/#use-hugos-built-in-shortcodes) for rich content, along with a [Privacy Config](https://gohugo.io/about/hugo-and-gdpr/) and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.
-
-## <!--more-->
-
-## YouTube Privacy Enhanced Shortcode
-
-{{< youtube id="ZJthWmvUzzc" class="video">}}
-
-<br>
-
----
-
-## Twitter Simple Shortcode
-
-{{< twitter_simple user="SanDiegoZoo" id="1453110110599868418" >}}
-
-<br>
-
----
-
-## Vimeo Simple Shortcode
-
-{{< vimeo_simple id="48912912" class="__h_video" >}}

content/en/docs/0.8/about/credits.md

@@ -1,26 +0,0 @@
----
-title: Credits
-description: Hinode is fully open source and uses several open-source frameworks and libraries.
-date: "2023-01-14"
-group: about
-layout: docs
----
-
-## Team
-
-Hinode is maintained by [Mark Dumay]({{< param "links.repository_owner" >}}) and several contributors as an open-source repository on GitHub. You are more than welcome to contribute. Get involved in the development by [opening an issue]({{< param "links.issue_tracker" >}}) or submitting a pull request. Read our [contributing guidelines]({{< ref "contribute" >}}) for information on how we develop.
-
-## Core components
-
-Hinode is based on the following core components:
-
-- [Hugo]({{< param "links.hugo" >}}) is a fast and modern static site generator written in Go. It is a so-called static site generator, meaning that the website is created when you update its content. This is a different approach to systems that dynamically build a page upon request.
-- [Bootstrap]({{< param "links.bootstrap" >}}) is a popular, open-source web development framework. Using a mobile-first approach, it provides several functions and components to simplify the creation of responsive websites.
-- [npm]({{< param "links.npm" >}}) is a software registry that enables the sharing and reuse of both open-source and private software packages. By taking advantage of its version management, software dependencies are easily tracked and updated.
-
-## Themes
-
-Hinode is inspired by the following themes:
-
-- [Blist]({{< param "links.blist" >}}) is a clean and fast blog theme for your Hugo site using Tailwind CSS.
-- [Doks]({{< param "links.doks" >}}) is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize.

content/en/docs/0.8/about/license.md

@@ -1,15 +0,0 @@
----
-title: License
-description: Hinode's open-source license for the codebase and documentation.
-date: "2023-01-14"
-group: about
-layout: docs
----
-
-## Codebase
-
-The codebase of Hinode is open source under the conditions of the [MIT license]({{< param "links.license" >}}) and is copyright &copy; 2023 by Mark Dumay. In short, the MIT license allows you to use the Hinode codebase for both personal and commercial use, as long as you include the original license and copyright notice. Licensed works, modifications, and larger works may be distributed under different terms and without source code. No liability or warranty is given.
-
-## Documentation
-
-The documentation of Hinode is licensed under the Creative Commons ([CC BY-NC 4.0)]({{< param "links.cc_by_nc_4_0" >}}) license. This includes all files within the repository's `/content` folder and its children, as well as the "README" in the repository root. The license allows you to share and adapt the materials, as long as you give appropriate credit and do not use the materials for commercial purposes. No warranties are given.

content/en/docs/0.8/components/accordion.md

@@ -1,50 +0,0 @@
----
-author: "Mark Dumay"
-title: "Accordion"
-date: 2023-01-27
-description: "Use the accordion shortcode to show a group of vertically collapsing and expanding items."
-group: components
-layout: docs
----
-
-## Overview
-
-Use the `accordion` shortcode to show a group of vertically collapsing and expanding items. Add `accordion-item` inner elements for each accordion item.
-
-## Arguments
-
-The shortcode supports the following arguments:
-
-| Argument    | Required | Description |
-|-------------|----------|-------------|
-| class       | No  | Optional class attribute of the accordion element, e.g. “w-50”. |
-{.table}
-
-Add an inner `accordion-item` element for each item of the accordion. The `accordion-item` element supports the following arguments:
-
-| Argument  | Required | Description |
-|-----------|----------|-------------|
-| header      | Yes | Required header of the accordion element. |
-| class       | No  | Optional class attribute of the inner accordion element, e.g. “show”. |
-{.table}
-
-## Example
-
-As an example, the following shortcode displays an accordion with three elements, of which the first element is expanded.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* accordion */>}}
-  {{</* accordion-item header="Accordion Item #1" class="show" */>}}
-    This is the first item's accordion body. It supports HTML content. The item is shown by adding the value
-    <code>show</code> to the <code>class</code> argument.
-  {{</* /accordion-item */>}}
-  {{</* accordion-item header="Accordion Item #2" */>}}
-    This is the second item's accordion body. It too supports HTML content.
-  {{</* /accordion-item */>}}
-  {{</* accordion-item header="Accordion Item #3" */>}}
-    This is the third item's accordion body.
-  {{</* /accordion-item */>}}
-{{</* /accordion */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->

content/en/docs/0.8/components/alert.md

@@ -1,34 +0,0 @@
----
-author: "Mark Dumay"
-title: "Alert"
-date: 2023-01-27
-description: "Use the alert shortcode to display a contextual feedback message."
-group: components
-layout: docs
----
-
-## Overview
-
-Use the `alert` shortcode to display a contextual feedback message. The inner content is used as alert text.
-
-## Arguments
-
-The shortcode supports the following arguments:
-
-| Argument    | Required | Description |
-|-------------|----------|-------------|
-| color       | No  | Optional theme color of the alert, either "primary" (default), "secondary", "success", "danger",  "warning", "info", "light", "dark", "white" or "black". |
-| dismissible | No  | Optional flag to indicate the alert is dismissible, defaults to false. |
-{.table}
-
-## Example
-
-As an example, the following shortcode displays a simple alert.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* alert color="danger" */>}}
-    A simple danger alert—check it out!
-{{</* /alert */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->

content/en/docs/0.8/components/badge.md

@@ -1,29 +0,0 @@
----
-author: "Mark Dumay"
-title: "Badge"
-date: 2023-01-25
-description: "Use the badge to enrich headings and buttons."
-group: components
-layout: docs
----
-
-## Overview
-
-Badges can be added to headings and buttons. The badge for a button is part of a [custom shortcode]({{< ref "button" >}} "custom shortcode"). The example below illustrates the HTML code for a heading.
-
-## Arguments
-
-The shortcode requires no arguments.
-
-## Example
-
-Use HTML code to display a badge for a heading. See the Bootstrap [documentation]({{< param "links.bs_badge_heading" >}}) for more options. The following example displays a badge for a heading of size four.
-
-{{< example >}}
-<h1>Example heading of size one <span class="badge bg-secondary">New</span></h1>
-<h2>Example heading of size two <span class="badge bg-secondary">New</span></h2>
-<h3>Example heading of size three <span class="badge bg-secondary">New</span></h3>
-<h4>Example heading of size four <span class="badge bg-secondary">New</span></h4>
-<h5>Example heading of size five <span class="badge bg-secondary">New</span></h5>
-<h6>Example heading of size six <span class="badge bg-secondary">New</span></h6>
-{{< /example >}}

content/en/docs/0.8/components/breadcrumb.md

@@ -1,31 +0,0 @@
----
-author: "Mark Dumay"
-title: "Breadcrumb"
-date: 2023-01-27
-description: "Use the breadcrumb shortcode to display the current page’s location within the site's navigational hierarchy."
-group: components
-layout: docs
----
-
-## Overview
-
-Use the `breadcrumb` shortcode to display the current page’s location within the site's navigational hierarchy.
-
-## Arguments
-
-The shortcode supports the following arguments:
-
-| Argument    | Required | Description |
-|-------------|----------|-------------|
-| path        | No       | Optional path of the page, defaults to current page.
-{.table}
-
-## Example
-
-As an example, the following shortcode displays a breadcrumb for the current page.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* breadcrumb path="breadcrumb" */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->

content/en/docs/0.8/components/button-group.md

@@ -1,35 +0,0 @@
----
-author: "Mark Dumay"
-title: "Button Group"
-date: 2023-01-27
-description: "Use the button-group shortcode to display a group of buttons."
-group: components
-layout: docs
----
-
-## Overview
-
-Use the `button-group` shortcode to display a group of buttons. Add inner `<button>` elements for each [button]({{< ref "button" >}} "button").
-
-## Arguments
-
-The shortcode supports the following arguments:
-
-| Argument    | Required | Description |
-|-------------|----------|-------------|
-| aria-label  | No   | Optional assistive label for the button group. |
-{.table}
-
-## Example
-
-As an example, the following shortcode displays a group of three buttons.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* button-group aria-label="Basic example" */>}}
-  {{</* button color="primary" href="#" */>}}Left{{</* /button */>}}
-  {{</* button color="primary" href="#" */>}}Middle{{</* /button */>}}
-  {{</* button color="primary" href="#" */>}}Right{{</* /button */>}}
-{{</* /button-group */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->

content/en/docs/0.8/components/button.md

@@ -1,42 +0,0 @@
----
-author: "Mark Dumay"
-title: "Button"
-date: 2023-01-27
-description: "Use the button shortcode to display a button with a hyperlink."
-group: components
-layout: docs
----
-
-## Overview
-
-Use the `button` shortcode to display a button with a hyperlink. The inner content is used as button title. The button supports an optional badge and tooltip.
-
-## Arguments
-
-The shortcode supports the following arguments:
-
-| Argument    | Required | Description |
-|-------------|----------|-------------|
-| href        | No   | Optional address for the button or hyperlink. Automatically assigned when using collapse. |
-| state       | No   | Optional state of the button, either "enabled" (default), "disabled", "active", or "inactive". |
-| size        | No   | Optional size of the button, either "sm", "md" (default), or "lg". |
-| color       | No   | Optional theme color of the element, either "primary" (default), "secondary", "success", "danger",  "warning", "info", "light", "dark", "white" or "black". |
-| badge       | No   | Optional positioned badge to display on top of the button. |
-| outline     | No   | Optional flag indicating the button should be outlined, either "false" (default) or "true". |
-| aria-label  | No   | Optional label for the badge. |
-| tooltip     | No   |  Optional text to display in a tooltip. Cannot be used together with collapse. Ignored for active/inactive buttons. |
-| collapse    | No   | Optional panel to collapse. Cannot be used together with tooltip. Ignored for active/inactive buttons. |
-| placement   | No   | How to position the tooltip: "top" (default), "bottom", "left", or "right". |
-{.table}
-
-## Example
-
-As an example, the following shortcode displays a tooltip for a dark button with a badge.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* button color="dark" tooltip="Click on the inbox to view your unread messages" href="#" badge="99+" */>}}
-    Inbox
-{{</* /button */>}}
-{{< /example>}}
-<!-- markdownlint-enable MD037 -->

content/en/docs/0.8/components/card.md

@@ -1,37 +0,0 @@
----
-author: "Mark Dumay"
-title: "Card"
-date: 2023-01-27
-description: "Use the card shortcode to display a card that links to a content page."
-group: components
-layout: docs
----
-
-## Overview
-
-Use the `card` shortcode to display a card that links to a content page. When using a rich layout, the card includes a thumbnail and a header.
-
-## Arguments
-
-The shortcode supports the following arguments:
-
-| Argument    | Required | Description |
-|-------------|----------|-------------|
-| path        | Yes | Required path of the page. |
-| class       | No  | Optional class attribute of the card element, e.g. “w-50”. |
-| color       | No  | Optional theme color of the card, either "primary", "secondary", "success", "danger", "warning", "info", "light", "dark", "white" or "black". By default, no color is specified. |
-| padding     | No  | Optional padding of the content, either "0", "1", "2", "3", "4", "5", or "auto" (default). |
-| header      | No  | Optional header components of the card, displayed in small caps. Supported values are "full" (default), "publication", "tags", and "none". |
-| footer      | No  | Optional footer components of the card, displayed in small caps. Supported values are "full", "publication", "tags", and "none" (default). |
-| orientation | No  | Optional placecement of the thumbnail, either "stacked" (default), "horizontal", or "none". |
-{.table}
-
-## Example
-
-As an example, the following shortcode displays a colored, borderless horizontal card that links to the [Rich Content]({{< ref "rich-content" >}} "Rich Content") page. It includes a custom header and footer.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* card path="rich-content" class="w-100 border-0" orientation="horizontal" color="info" header="publication" footer="tags" */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->

content/en/docs/0.8/components/carousel.md

@@ -1,44 +0,0 @@
----
-author: "Mark Dumay"
-title: "Carousel"
-date: 2023-01-27
-description: "Use the carousel shortcode to display a carousel of several images."
-group: components
-layout: docs
----
-
-## Overview
-
-Use the `carousel` shortcode to display a carousel of several images, with similar behavior as the [image]({{< ref "image" >}} "image")
-
-## Arguments
-
-The shortcode supports the following arguments:
-
-| Argument  | Required | Description |
-|-----------|----------|-------------|
-| ratio     | No  | Aspect ratio of the image, either "1x1", "4x3" (default), "16x9", or "21x9". |
-| class     | No  | Optional class attribute of the `carousel` element, e.g. "w-75". |
-{.table}
-
-Add an inner `img` element for each slide of the carousel. The `img` element supports the following arguments:
-
-| Argument  | Required | Description |
-|-----------|----------|-------------|
-| src       | Yes | Required url of the image, e.g. "img/boots.jpg". |
-| caption   | No  | Optional image caption. If set, the image is darkened to improve the contrast. The caption is hidden on smaller screens. |
-{.table}
-
-## Example
-
-As an example, the following shortcode displays a centered carousel with three slides, 16x9 aspect ratio, and a relative width of 67% on large screens.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* carousel ratio="16x9" class="col-sm-12 col-lg-8 mx-auto" */>}}
-  {{</* img src="img/coffee.jpg" caption="slide 1" */>}}
-  {{</* img src="img/phone.jpg" caption="slide 2" */>}}
-  {{</* img src="img/dunes.jpg" caption="slide 3" */>}}
-{{</* /carousel */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->

content/en/docs/0.8/components/collapse.md

@@ -1,39 +0,0 @@
----
-author: "Mark Dumay"
-title: "Collapse"
-date: 2023-01-27
-description: "Use the collapse shortcode to reveil or hide a panel."
-group: components
-layout: docs
----
-
-## Overview
-
-Use the `collapse` shortcode to reveil or hide a panel. The panel can contain both HTML code and plain text. Link a button to the panel by assigning it's ID to the `collapse` attribute.
-
-## Arguments
-
-The shortcode supports the following arguments:
-
-| Argument    | Required | Description |
-|-------------|----------|-------------|
-| id          | Yes      | Required unique id of the collapse element, e.g. "collapse-1". |
-| class       | No       | Optional class attribute of the inner panel element, e.g. “p-3”. |
-{.table}
-
-## Example
-
-As an example, the following shortcode displays a button that, when clicked, triggers a panel to appear or disappear.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* button collapse="collapse-1" */>}}
-    Trigger panel
-{{</* /button */>}}
-
-{{</* collapse id="collapse-1" class="p-3 border rounded" */>}}
-    Some placeholder content for the collapse component. This panel is <i>hidden by default</i> but
-    revealed when the user activates the relevant trigger.
-{{</* /collapse */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->

content/en/docs/0.8/components/command-prompt.md

@@ -1,104 +0,0 @@
----
-author: "Mark Dumay"
-title: "Command Prompt"
-date: 2023-01-27
-description: "The command shortcode generates terminal output for either Bash, PowerShell, or SQL shell languages."
-group: components
-layout: docs
----
-
-## Overview
-
-The `command` shortcode generates terminal output for either `bash`, `powershell`, or `sql` shell languages.
-
-## Arguments
-
-The shortcode supports the following arguments:
-
-| Argument  | Required | Description |
-|-----------|----------|-------------|
-| user      | No | Optional user to add to the prompt, e.g. "user". |
-| host      | No | Optional host to add to the prompt, e.g. "localhost". |
-| prompt    | No | Optional prompt override, e.g. "PS C:\Users\User>". |
-| shell     | No | Type of shell, either "bash" (default), "powershell", or "sql". |
-{.table}
-
-## Examples
-
-### Bash (default shell)
-
-Use the `command` shortcode to generate a block with a default bash command prompt.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* command */>}}
-export MY_VAR=123
-{{</* /command */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->
-
-Specify `user` and `host` to add the user context to the prompt. In addition, use `(out)` to specify an output line and use `\` to denote a line continuation.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* command user="user" host="localhost" */>}}
-export MY_VAR=123
-echo "hello"
-(out)hello
-echo one \
-two \
-three
-(out)one two three
-echo "goodbye"
-(out)goodbye
-{{</* /command */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->
-
-### PowerShell
-
-Set the `shell` argument to `powershell` to generate a PowerShell terminal. Override the `prompt` to add a directory if needed. Use the backtick `` ` `` symbol to denote a line continuation.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* command prompt="PS C:\Users\User>" shell="powershell" */>}}
-Write-Host `
-'Hello' `
-'from' `
-'PowerShell!'
-(out)Hello from PowerShell!
-Write-Host 'Goodbye from PowerShell!'
-(out)Goodbye from PowerShell!
-{{</* /command */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->
-
-### SQL
-
-Set the `shell` argument to `sql` to generate a SQL terminal. Use the `(con)` suffix to denote a line continuation.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* command prompt="mysql>" shell="sql" */>}}
-set @my_var = 'foo';
-set @my_other_var = 'bar';
-CREATE TABLE people ((con)
-first_name VARCHAR(30) NOT NULL,(con)
-last_name VARCHAR(30) NOT NULL(con)
-);
-(out)Query OK, 0 rows affected (0.09 sec)
-insert into people(con)
-values ('John', 'Doe');
-(out)Query OK, 1 row affected (0.02 sec)
-select *(con)
-from people(con)
-order by last_name;
-(out)+------------+-----------+
-(out)| first_name | last_name |
-(out)+------------+-----------+
-(out)| John       | Doe       |
-(out)+------------+-----------+
-(out)1 row in set (0.00 sec)
-{{</* /command */>}}
-{{< /example >}}
-<!-- markdownlint-ensable MD037 -->

content/en/docs/0.8/components/image.md

@@ -1,36 +0,0 @@
----
-author: "Mark Dumay"
-title: "Image"
-date: 2023-01-05
-description: "Use the image shortcode to display a responsive image with a specific aspect ratio."
-group: components
-layout: docs
----
-
-## Overview
-
-Use the `image` shortcode to display a responsive image with a specific aspect ratio. The source link can refer to either an image available in the `/assets/img` folder of your site or a public web location. The shortcode renders the image as a so-called [image set]({{< param "links.mozilla_image" >}}) to optimize the image for different screen sizes and resolutions. Behind the scenes, Hugo renders the images in `WebP` format and stores them in a local folder (`resources` or `public`). The images are processed using the quality setting specified in the `[imaging]` section of the main [config file]({{< param "links.hugo_imaging" >}}) (defaults to 75). Supported image types are `.png`, `.jpeg`, `.gif`, `.tiff`, `.bmp`, and `.webp`. A fallback image of type `.jpeg` is provided for older browsers.
-
-## Arguments
-
-The shortcode supports the following arguments:
-
-| Argument  | Required | Description |
-|-----------|----------|-------------|
-| src       | Yes | Required url of the image, e.g. "img/boots.jpg". |
-| ratio     | No  | Optional aspect ratio of the image, either "1x1", "4x3", "16x9", or "21x9". If set, the image is resized and cropped to match the ratio. Else the original aspect ratio of the image is kept. |
-| class     | No  | Optional class attribute of the inner `img` element, e.g. "rounded". |
-| title     | No  | Optional alternate text of the image. |
-| caption   | No  | Optional figure caption. |
-{.table}
-
-## Example
-
-As an example, the following shortcode displays an image with rounded corners and a 21x9 aspect ratio.
-
-```html
-{{</* image src="img/flowers.jpg" ratio="21x9" caption="Figure caption" class="rounded" */>}}
-```
-
-The result looks like this:
-{{< image src="img/flowers.jpg" ratio="21x9" caption="Figure caption" class="rounded">}}

content/en/docs/0.8/components/navbar.md

@@ -1,40 +0,0 @@
----
-author: "Mark Dumay"
-title: "Navbar"
-date: 2023-01-27
-description: "Use the navbar shortcode to display a navigation header with a toggler."
-group: components
-layout: docs
----
-
-## Overview
-
-Use the `navbar` shortcode to display a navigation header with a toggler. The menu items are derived from the site's configuration, which defaults to the menus defined under `main`. Nested items are supported at one-level depth. The navigation bar includes a search area and a language switcher if applicable. The items in the navigation header are accentuated if the current page or any of its descendants is active.
-
-<!-- TODO: add sidebar -->
-
-## Arguments
-
-The shortcode supports the following arguments:
-
-| Argument  | Required | Description |
-|-----------|----------|-------------|
-| path      | Yes | Required path of the active page. |
-| menus     | No  | Optional name of the menu configuration, defaults to "main". |
-| size      | No  | Optional breakpoint of the navbar toggler, either "xs", "sm", "md" (default), "lg", or "xl". |
-| style     | No  | Optional style of the navbar, either "light" (default) or "dark". |
-| color     | No  | Optional background color of the navbar, either "primary", "secondary", "success", "danger", "warning", "info", "light", "dark", "white" or "black". The default color is none. |
-| search    | No  | Optional flag to include a search input, defaults to the parameter "logo" set in the "navigation" section of the site's parameter configuration. |
-| logo      | No  | Optional address of the logo image, defaults to the parameter "logo" set in the "navigation" section of the site's parameter configuration. |
-| title     | No  | Optional brand title, displayed when the logo is not set. Defaults to the site's title. |
-{.table}
-
-## Example
-
-As an example, the following shortcode displays a light navigation header.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* navbar path="blog" color="light" size="sm" search="false" menus="sample" title="Brand" */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->

content/en/docs/0.8/components/overview.md

@@ -1,10 +0,0 @@
----
-author: Mark Dumay
-title: Overview
-date: 2023-01-14
-description: Use predefined shortcodes to embed Bootstrap components in your content.
-group: components
-layout: docs
----
-
-<!-- TODO: expand -->

content/en/docs/0.8/components/spinner.md

@@ -1,35 +0,0 @@
----
-author: "Mark Dumay"
-title: "Spinner"
-date: 2023-01-27
-description: "Use the spinner shortcode to indicate the loading state of a component or page."
-group: components
-layout: docs
----
-
-## Overview
-
-Use the `spinner` shortcode to indicate the loading state of a component or page. The inner content is used as alternative description.
-
-## Arguments
-
-The shortcode supports the following arguments:
-
-| Argument    | Required | Description |
-|-------------|----------|-------------|
-| color       | No  | Optional theme color of the spinner, either "primary" (default), "secondary", "success", "danger",  "warning", "info", "light", "dark", "white" or "black". |
-| grow        | No  | Optional flag to indicate the spinner is growing instead of rotating, defaults to false. |
-| class       | No  | Optional class attribute of the spinner wrapping element, e.g. “text-center”. |
-{.table}
-
-## Example
-
-As an example, the following shortcode displays a centered spinner.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* spinner color="info" class="text-center" */>}}
-Loading...
-{{</* /spinner */>}}
-{{< /example>}}
-<!-- markdownlint-enable MD037 -->

content/en/docs/0.8/components/toast.md

@@ -1,37 +0,0 @@
----
-author: "Mark Dumay"
-title: "Toast"
-date: 2023-01-27
-description: "Use the toast shortcode to display a dismissable message in the bottom-right corner of the screen."
-group: components
-layout: docs
----
-
-## Overview
-
-Use the `toast` shortcode to display a dismissable message in the bottom-right corner of the screen. Hinode defines a click event for a button with id `toastButton`. Modify the file `assets/js/toast.js` if needed.
-
-## Arguments
-
-The shortcode supports the following arguments:
-
-| Argument    | Required | Description |
-|-------------|----------|-------------|
-| header      | No  | Optional header of the toast message. Uses the site title by default. |
-{.table}
-
-## Example
-
-As an example, the following shortcode displays a button that, when clicked, triggers the toast message.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* button id="toastButton" */>}}
-    Show toast
-{{</* /button */>}}
-
-{{</* toast header="Custom title" */>}}
-    This is a toast message.
-{{</* /toast */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->

content/en/docs/0.8/components/tooltip.md

@@ -1,36 +0,0 @@
----
-author: "Mark Dumay"
-title: "Tooltip"
-date: 2023-01-27
-description: "Use the toast shortcode to display a dismissable message in the bottom-right corner of the screen."
-group: components
-layout: docs
----
-
-## Overview
-
-Use the `tooltip` shortcode to display a tooltip for a hyperlink. Refer to the [button]({{< ref "#button" >}} "button") on how to display a tooltip for a button instead. The inner content is used as hyperlink text.
-
-## Arguments
-
-The shortcode supports the following arguments:
-
-| Argument    | Required | Description |
-|-------------|----------|-------------|
-| color       | No   | Optional theme color of the element, either "primary" (default), "secondary", "success", "danger",  "warning", "info", "light", "dark", "white" or "black". |
-| title       | Yes  | Title to display in the tooltip. |
-| href        | Yes  | Address for the button or hyperlink. |
-| placement   | No   | How to position the tooltip: "top" (default), "bottom", "left", or "right". |
-{.table}
-
-## Example
-
-As an example, the following shortcode displays a tooltip for a colored hyperlink.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* tooltip color="warning" title="Tooltip" href="#" */>}}
-    Tooltip demonstration
-{{</* /tooltip */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->

content/en/docs/0.8/configuration/colors.md

@@ -1,99 +0,0 @@
----
-title: Colors
-description: Use Bootstrap's color system to easily adjust your website's colors.
-date: 2023-01-14
-group: configuration
-layout: docs
----
-
-## Theme colors
-
-Hinode uses Bootstrap's color system. You can adjust them in the `/config/_default/params.toml` file in the `style` section.
-
-{{< toml-docs name="theme-colors" file="config/_default/params.toml" >}}
-
-In addition, the background colors `black` and `white` are available too. Below is an overview of the rendered colors.
-
-<div class="row">
-    <div class="col-md-4">
-        <div class="p-3 mb-3 text-bg-primary rounded-3">Primary</div>
-    </div>
-    <div class="col-md-4">
-        <div class="p-3 mb-3 text-bg-secondary rounded-3">Secondary</div>
-    </div>
-    <div class="col-md-4">
-        <div class="p-3 mb-3 text-bg-success rounded-3">Success</div>
-    </div>
-    <div class="col-md-4">
-        <div class="p-3 mb-3 text-bg-danger rounded-3">Danger</div>
-    </div>
-    <div class="col-md-4">
-        <div class="p-3 mb-3 text-bg-warning rounded-3">Warning</div>
-    </div>
-    <div class="col-md-4">
-        <div class="p-3 mb-3 text-bg-info rounded-3">Info</div>
-    </div>
-    <div class="col-md-4">
-        <div class="p-3 mb-3 text-bg-light rounded-3">Light</div>
-    </div>
-    <div class="col-md-4">
-        <div class="p-3 mb-3 text-bg-dark rounded-3">Dark</div>
-    </div>
-    <div class="col-md-4">
-        <div class="p-3 mb-3 text-bg-white rounded-3">White</div>
-    </div>
-    <div class="col-md-4">
-        <div class="p-3 mb-3 bg-black text-white rounded-3">Black</div>
-    </div>
-</div>
-
-## Colored contrasting links
-
-Hinode defines additional classes to render links that contrast with their background. Simply add `link-bg-<color>` to the class of an `<a>` anchor element. The next example adds a link constrasting with the background color `bg-success`.
-
-```html
-<div class="col-md-2">
-    <div class="p-3 mb-3 bg-success rounded-3 text-center"><a class="link-bg-success" href="#">Success</a></div>
-</div>
-```
-
-The result looks like this.
-
-<div class="col-md-2">
-    <div class="p-3 mb-3 bg-success rounded-3 text-center"><a class="link-bg-success" href="#">Success</a></div>
-</div>
-
-Below grid illustrates the contrasting colors for each background.
-
-<div class="row">
-    <div class="col-md-4">
-        <div class="p-3 mb-3 bg-primary rounded-3"><a class="link-bg-primary" href="#">Primary</a></div>
-    </div>
-    <div class="col-md-4">
-        <div class="p-3 mb-3 bg-secondary rounded-3"><a class="link-bg-secondary" href="#">Secondary</a></div>
-    </div>
-    <div class="col-md-4">
-        <div class="p-3 mb-3 bg-success rounded-3"><a class="link-bg-success" href="#">Success</a></div>
-    </div>
-    <div class="col-md-4">
-        <div class="p-3 mb-3 bg-danger rounded-3"><a class="link-bg-danger" href="#">Danger</a></div>
-    </div>
-    <div class="col-md-4">
-        <div class="p-3 mb-3 bg-warning rounded-3"><a class="link-bg-warning" href="#">Warning</a></div>
-    </div>
-    <div class="col-md-4">
-        <div class="p-3 mb-3 bg-info rounded-3"><a class="link-bg-info" href="#">Info</a></div>
-    </div>
-    <div class="col-md-4">
-        <div class="p-3 mb-3 bg-light rounded-3"><a class="link-bg-light" href="#">Light</a></div>
-    </div>
-    <div class="col-md-4">
-        <div class="p-3 mb-3 bg-dark rounded-3"><a class="link-bg-dark" href="#">Dark</a></div>
-    </div>
-</div>
-
-## Generating helper
-
-The SCSS generator for the colored links is defined in `assets/scss/helpers/_colored-links.scss`.
-
-{{< scss-docs name="colored-links" file="assets/scss/helpers/_colored-links.scss" >}}