Merge pull request #660 from gethinode/develop

Add support for absolute paths

.eslintignore

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

.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

@@ -16,27 +16,24 @@ jobs:
         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'}}
+      - name: Comment on major updates of any dependencies
-        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**"
+        if: ${{steps.dependabot-metadata.outputs.update-type == 'version-update:semver-major'}}
-        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 comment $PR_URL --body "I'm **not approving** this PR because **it includes a major update of a dependency**"
           gh pr edit $PR_URL --add-label "requires-manual-qa"
         env:
           PR_URL: ${{github.event.pull_request.html_url}}

.github/workflows/build.yml

@@ -1,28 +0,0 @@
-name: build
-on:
-  push:
-    tags:
-      - v*
-    branches: [ main ]
-  pull_request:
-    branches: [ main ]
-
-jobs:
-  build:
-    strategy:
-      matrix:
-        os: [macos-latest, windows-latest, ubuntu-latest]
-        node-version: [14.x, 16.x, 18.x]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-
-    runs-on: ${{ matrix.os }}
-
-    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'
-    - run: npm ci
-    - run: npm run build

.github/workflows/lint-build.yml

@@ -0,0 +1,97 @@
+name: Lint & build
+on:
+  workflow_dispatch:
+  push:
+    tags:
+      - v*
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+env:
+  CACHE_KEY: 'hugo-hinode'
+  CACHE_PATH_DEBIAN: '/tmp/hugo_cache_runner'
+  CACHE_PATH_WIN: '~\AppData\Local\hugo_cache'
+  CACHE_PATH_MAC: '/Users/runner/Library/Caches/hugo_cache'
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Check out repository
+      uses: actions/checkout@v3
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: lts/*
+        cache: 'npm'
+        cache-dependency-path: '**/package-lock.json'
+
+    # [24/AUG/23] Adjusted from npm ci to prevent EBADPLATFORM error due to fsevents
+    - name: Install npm
+      run: npm i
+
+    - name: Lint the source files
+      run: npm run lint      
+
+  build:
+    needs: lint
+
+    strategy:
+      matrix:
+        os: [macos-latest, windows-latest, ubuntu-latest]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+        node-version: [18.x, 20.x]
+
+    runs-on: ${{ matrix.os }}
+
+    steps:
+    - name: Check out repository
+      uses: actions/checkout@v3
+
+    - name: Set up Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+        cache-dependency-path: '**/package-lock.json'
+
+    - name: Install Dart Sass
+      run:  |
+        if [ "$RUNNER_OS" == "Linux" ]; then
+          sudo snap install dart-sass
+        elif [ "$RUNNER_OS" == "macOS" ]; then
+          brew install sass/sass/sass
+        elif [ "$RUNNER_OS" == "Windows" ]; then
+          choco install sass
+        fi
+      shell: bash
+
+    # [24/AUG/23] Adjusted from npm ci for non-macOS to prevent EBADPLATFORM error due to fsevents
+    - name: Perform clean install of npm
+      run:  |
+        if [ "$RUNNER_OS" == "macOS" ]; then
+          npm ci
+        else
+          npm i
+        fi
+      shell: bash
+
+    # Cache Hugo cachedir and resourcedir (configured in config/ci/hugo.toml) for each OS
+    # No additional cache invalidation is needed, Hugo uses checksums itself
+    - name: Use Hugo cache
+      uses: actions/cache@v3
+      with:
+        path: ${{ runner.os == 'Windows' && env.CACHE_PATH_WIN || runner.os == 'macOS' && env.CACHE_PATH_MAC || env.CACHE_PATH_DEBIAN }}
+        key: ${{ runner.os }}-${{ env.CACHE_KEY }}
+        restore-keys: |
+          ${{ runner.os }}-${{ env.CACHE_KEY }}
+
+    - name: Build main site
+      run: npm run build:cache
+
+    # The example site is to be published to demo.gethinode.com
+    - name: Build example site
+      run: npm run build:example:ci

.github/workflows/lint.yml

@@ -1,28 +0,0 @@
-name: lint
-on:
-  push:
-    tags:
-      - v*
-    branches: [ main ]
-  pull_request:
-    branches: [ main ]
-
-jobs:
-  build:
-
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [14.x, 16.x, 18.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'
-    - run: npm ci --ignore-scripts
-    - run: npm run lint

.github/workflows/mod-update.yml

@@ -0,0 +1,62 @@
+name: Update Hugo dependencies
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '0 3 * * *' # run daily at 03:00 AM
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  update-mod:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v3
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: lts/*
+        cache: 'npm'
+        cache-dependency-path: '**/package-lock.json'
+
+    # [26/AUG/23] Adjusted from npm ci to prevent EBADPLATFORM error due to fsevents
+    - name: Install npm
+      run: npm i
+
+    - name: Update Hugo module dependencies
+      id: mod-updates
+      run: |
+        MOD_OUTPUT=$(npm run mod:update 2>&1)
+        echo "$MOD_OUTPUT"
+        MOD_UPDATES=$(echo "$MOD_OUTPUT" | grep '^go: upgraded' | sed 's/go: / - /' | sort -u)
+        echo 'MOD_UPDATES<<EOF' >> $GITHUB_OUTPUT
+        echo "$MOD_UPDATES" >> "$GITHUB_OUTPUT"
+        echo 'EOF' >> $GITHUB_OUTPUT
+
+    - name: Create Pull Request
+      uses: gethinode-actions/create-pull-request@v5
+      with:
+        token: ${{ secrets.HUGO_MOD_PR }}
+        commit-message: 'fix: update Hugo module dependencies'
+        committer: GitHub <noreply@github.com>
+        branch: hugo-mod-dependencies
+        delete-branch: true
+        title: 'Update Hugo module dependencies'
+        body: |
+          This PR is auto-generated by [create-pull-request][1].
+          
+          Changes to go.mod:
+          
+          ${{ steps.mod-updates.outputs.MOD_UPDATES }}
+
+          [1]: https://github.com/peter-evans/create-pull-request
+        labels: dependencies
+        add-paths: |
+          go.mod
+          go.sum
+          **/go.mod
+          **/go.sum

.github/workflows/npm-publish.yml

@@ -1,35 +1,41 @@
-# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# This workflow will run tests using node and then publish a package to npmjs.org when a release is created
-# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
-
+name: Publish package to npmjs
-name: Node.js Package
 
 on:
   workflow_dispatch:
-    branches: [ main ]
   release:
-    types: [created]
+    types: [published]
+
+env:
+  REGISTRY_URL: 'https://registry.npmjs.org/'
 
 jobs:
   build:
-    runs-on: ubuntu-latest
+    strategy:
-    steps:
+      matrix:
-      - uses: actions/checkout@v3
+        os: [ubuntu-latest]
-      - uses: actions/setup-node@v3
+        node-version: [20.x]
-        with:
+
-          node-version: 16
+    runs-on: ${{ matrix.os }}
-      - run: npm ci
-      - run: npm test
 
-  publish-npm:
-    needs: build
-    runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - name: Checkout repository
-      - uses: actions/setup-node@v3
+        uses: actions/checkout@v3
+
+      - name: Setup .npmrc file to publish to npm
+        uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: ${{ matrix.node-version }}
-          registry-url: https://registry.npmjs.org/
+          registry-url: ${{ env.REGISTRY_URL }}
-      - run: npm ci
+          cache: 'npm'
-      - run: npm publish
+          cache-dependency-path: '**/package-lock.json'
+  
+      # [27/AUG/23] Adjusted from npm ci to prevent EBADPLATFORM error due to fsevents
+      - name: Install npm
+        run: npm i
+
+      - name: Publish package to npm
+        run: npm publish
         env:
-          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

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

.markdownlint-cli2.jsonc

@@ -4,7 +4,6 @@
     "MD013": false,
     "MD024": false,
     "MD026": false,
-    "MD033": false,
     "MD034": false,
     "MD051": false,
     "MD053": false

.stylelintignore

@@ -1,8 +1,8 @@
 assets/scss/common/_variables.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-dart.scss
 assets/scss/app.scss
 node_modules

README.md

@@ -1,5 +1,6 @@
 # Hugo Theme Hinode
 
+<!-- markdownlint-disable MD033 -->
 <!-- Tagline -->
 <p align="center">
     <b>A clean documentation and blog theme for your Hugo site based on Bootstrap 5</b>
@@ -8,26 +9,32 @@
 
 <!-- Badges -->
 <p align="center">
-    <a href="https://gohugo.io" alt="Hugo website">
+    <a href="https://gohugo.io">
-        <img src="https://img.shields.io/badge/generator-hugo-brightgreen" />
+        <img src="https://img.shields.io/badge/generator-hugo-brightgreen" alt="Hugo website">
     </a>
-    <a href="https://app.netlify.com/sites/gethinode-demo/deploys" alt="Netlify Status">
+    <a href="https://gethinode.com">
-        <img src="https://img.shields.io/netlify/0ad42e3e-fdfa-4d37-8e26-58badd429a67" />
+        <img src="https://img.shields.io/badge/theme-hinode-blue" alt="Hinode theme">
     </a>
-    <a href="https://stats.uptimerobot.com/xyGVYhLJmV" alt="UptimeRobot Status">
+    <a href="https://www.npmjs.com/package/%40gethinode/hinode">
-        <img src="https://img.shields.io/uptimerobot/status/m791334689-73d9dfc82030f4f955b2d6bb" />
+        <img src="https://img.shields.io/npm/v/%40gethinode/hinode" alt="npm package">
     </a>
-    <a href="https://github.com/gethinode/hinode/commits/main" alt="Last commit">
+    <a href="https://app.netlify.com/sites/gethinode-demo/deploys">
-        <img src="https://img.shields.io/github/last-commit/gethinode/hinode.svg" />
+        <img src="https://img.shields.io/netlify/0ad42e3e-fdfa-4d37-8e26-58badd429a67"  alt="Netlify Status">
     </a>
-    <a href="https://github.com/gethinode/hinode/issues" alt="Issues">
+    <a href="https://stats.uptimerobot.com/xyGVYhLJmV">
-        <img src="https://img.shields.io/github/issues/gethinode/hinode.svg" />
+        <img src="https://img.shields.io/uptimerobot/status/m791334689-73d9dfc82030f4f955b2d6bb" alt="UptimeRobot Status">
     </a>
-    <a href="https://github.com/gethinode/hinode/pulls" alt="Pulls">
+    <a href="https://github.com/gethinode/hinode/commits/main">
-        <img src="https://img.shields.io/github/issues-pr-raw/gethinode/hinode.svg" />
+        <img src="https://img.shields.io/github/last-commit/gethinode/hinode.svg" alt="Last commit">
     </a>
-    <a href="https://github.com/gethinode/hinode/blob/main/LICENSE" alt="License">
+    <a href="https://github.com/gethinode/hinode/issues">
-        <img src="https://img.shields.io/github/license/gethinode/hinode" />
+        <img src="https://img.shields.io/github/issues/gethinode/hinode.svg" alt="Issues">
+    </a>
+    <a href="https://github.com/gethinode/hinode/pulls">
+        <img src="https://img.shields.io/github/issues-pr-raw/gethinode/hinode.svg" alt="Pulls">
+    </a>
+    <a href="https://github.com/gethinode/hinode/blob/main/LICENSE">
+        <img src="https://img.shields.io/github/license/gethinode/hinode" alt="License">
     </a>
 </p>
 
@@ -41,6 +48,7 @@
   <a href="#donate">Donate</a> •
   <a href="#license">License</a>
 </p>
+<!-- markdownlint-enable MD033 -->
 
 ## About
 
@@ -50,53 +58,42 @@
 - [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] (npm) to automate the build process and to keep track of dependencies.
-
-Additional features include:
-
-- Switching between light mode and dark mode
-- Support for multiple languages
-- Reusable Bootstrap components through configurable shortcodes and partials
-- Embedded comments through light-weight integration with GitHub via [utteranc.es][utterances]
-- Integrated sidebar navigation for content-heavy sections, such as documentation pages
-- 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]
 
 Detailed information about Hinode is available on the [official website][website].
 
 ## Prerequisites
 
-Hinode requires Git, Node.js and npm for local development and testing. Download the Git binary from the [official website][git_download]. Next, download and install [Node.js][nodejs] (it includes npm) for your platform.
+Hinode is a [Hugo theme that uses modules][hugo_modules] to install and maintain various components. It can be installed using either Hugo or npm. If you would like to take advantage of automation, the npm approach is recommended. Refer to the [Hinode template][repository_template] for installation instructions with npm.
+
+The installation instructions in this readme install Hinode as a regular Hugo theme. Hinode requires the following software to be installed on your local machine.
+
+- [Go binary][golang_download]
+- [Hugo][nodejs] (extended version)
+
+[Git][git_download] is recommended, but is not a strict requirement.
 
 ## Installation
 
 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. Unless you plan to customize a lot, it is recommended to use the child theme:
 
     ```bash
-    git clone https://github.com/gethinode/child.git my-hinode-site && cd my-hinode-site
+    hugo new site my-hinode-site && cd my-hinode-site
     ```
 
-    Use the main theme if you intend to customize the base code:
+1. **Initialize the module system**
 
     ```bash
-    git clone https://github.com/gethinode/hinode.git my-hinode-site && cd my-hinode-site
+    hugo mod init example.com/my-hinode-site
+    echo "[[module.imports]]\npath = 'github.com/gethinode/hinode'" >> hugo.toml
     ```
 
-1. Install dependencies
+1. **Start a development server**
 
     ```bash
-    npm install
+    hugo server
-    ```
-
-1. Start development server
-
-    ```bash
-    npm run start
     ```
 
 ## Configuration
@@ -116,11 +113,13 @@ 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>
+<!-- markdownlint-disable MD033 -->
+<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>
+<!-- markdownlint-enable MD033 -->
 
 ## License
 
-The `hinode` and `child` 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.
+The `hinode`, `docs`, and `template` codebase is released under the [MIT license][license]. The documentation of Hinode is licensed under the Creative Commons [(CC BY-NC 4.0)][cc-by-nc-4.0] license. This includes all files within the repository's `/content` and `/exampleSite/content` folders and their children, as well as the "README" in the repository root. This applies to all public repositories maintained by `gethinode` on GitHub, including the `gethinode/hinode`, `gethinode/template`, and `gethinode/docs` repositories, unless specified otherwise.
 
 <!-- MARKDOWN PUBLIC LINKS -->
 [blist]: https://github.com/apvarun/blist-hugo-theme
@@ -130,6 +129,8 @@ The `hinode` and `child` codebase is released under the [MIT license][license].
 [flexsearch]: https://github.com/nextapps-de/flexsearch
 [git_download]: https://git-scm.com
 [hugo]: https://gohugo.io
+[hugo_download]: https://gohugo.io/installation
+[hugo_modules]: https://gohugo.io/hugo-modules/
 [netlify]: https://www.netlify.com
 [nodejs]: https://nodejs.org
 [npm]: https://www.npmjs.com
@@ -140,8 +141,9 @@ The `hinode` and `child` codebase is released under the [MIT license][license].
 <!-- MARKDOWN MAINTAINED LINKS -->
 [contribute]: https://gethinode.com/contribute
 [getstarted]: https://gethinode.com/docs
+[golang_download]: https://go.dev/dl/
 [demo]: https://demo.gethinode.com/
 [license]: https://github.com/gethinode/hinode/blob/main/LICENSE
 [repository]: https://github.com/gethinode/hinode.git
-[repository_child]: https://github.com/gethinode/child.git
+[repository_template]: https://github.com/gethinode/template.git
 [website]: https://gethinode.com/

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/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 hugo.IsServer) (not $pc.Disable)) -}}
+    {{ with .Site.Config.Services.GoogleAnalytics.ID -}}
+        {{ 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/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

@@ -1,3 +1,5 @@
+{{- if site.Params.main.enableDarkMode -}}
+
 /*!
  * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
  * Copyright 2011-2022 The Bootstrap Authors
@@ -31,15 +33,14 @@
     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('i')
+      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].className = activeIcon.className
+        activeSelectors[i].innerHTML = activeIcon.innerHTML
-        activeSelectors[i].className = activeSelectors[i].className.replace('theme-icon', 'theme-icon-active')
       }
 
       for (let i = 0; i < activeButtons.length; ++i) {
@@ -68,3 +69,5 @@
       })
   })
 })()
+
+{{- 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

@@ -1,24 +1,33 @@
 const navbar = document.querySelector('.navbar')
-const toggler = document.getElementById('main-nav-toggler')
+const togglers = document.querySelectorAll('.main-nav-toggler')
 const modeSelectors = document.querySelectorAll('.switch-mode-collapsed')
 
-// set the navbar background color to opaque when scrolling past a breakpoint
+if (navbar !== null && togglers !== null) {
-window.onscroll = () => {
+  // set the navbar background color to opaque when scrolling past a breakpoint
-  if (window.scrollY > 75) {
+  window.onscroll = () => {
-    navbar.classList.add('nav-active')
+    if (window.scrollY > 75) {
-  } else {
+      navbar.classList.add('nav-active')
-    navbar.classList.remove('nav-active')
+    } else {
-  }
+      navbar.classList.remove('nav-active')
-}
+    }
-
+  }
-// set the navbar background color to opaque when expanded
+
-toggler.onclick = () => {
+  // set the navbar background color to opaque when expanded
-  navbar.classList.toggle('navbar-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 = () => {
+
-    toggler.click()
+  // 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-dart.scss

@@ -0,0 +1,59 @@
+@use "sass:meta";
+
+// Define template variables
+@use "hugo:vars" as h; // note: modified for dart-sass
+
+// Include default variable overrides
+@import "common/variables-dart.scss"; // note: modified for dart-sass
+@import "theme/variables.scss";
+@import "common/icons.scss";
+
+// Import Bootstrap configuration (mounted by core Bootstrap module)
+@import "bootstrap-dart.scss"; // note: modified for dart-sass
+
+// Include dark mode overrides
+@import "common/variables-dark.scss";
+
+// Import Hinode theme styles
+@import "components/abbr.scss";
+@import "components/alert.scss";
+@import "components/blockquote.scss";
+@import "components/breadcrumb.scss";
+@import "components/button.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/nav.scss";
+@import "components/navbar.scss";
+@import "components/img.scss";
+@import "components/pagination.scss";
+@import "components/persona.scss";
+@import "components/popover.scss";
+@import "components/sidebar.scss";
+@import "components/syntax-dart.scss"; // note: modified for dart-sass
+@import "components/table.scss";
+@import "components/timeline.scss";
+@import "components/toc.scss";
+@import "components/video.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";
+
+// note: modified for dart-sass
+@if h.$import-fonts {
+    @include meta.load-css(theme/fonts);
+}
+
+// Import theme placeholder
+@import "theme/theme.scss";
+
+// Import Bootstrap utilities API  (mounted by core Bootstrap module)
+@import "modules/bootstrap/utilities/api";

assets/scss/app.scss

@@ -3,81 +3,40 @@
 
 // Include default variable overrides
 @import "common/variables.scss";
+@import "theme/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/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 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/abbr.scss";
+@import "components/alert.scss";
 @import "components/blockquote.scss";
-@import "components/buttons.scss";
+@import "components/breadcrumb.scss";
+@import "components/button.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/nav.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/table.scss";
+@import "components/timeline.scss";
 @import "components/toc.scss";
-@import "components/vimeo.scss";
+@import "components/video.scss";
 @import "common/animation.scss";
 @import "common/styles.scss";
 @import "layouts/reboot.scss";
@@ -98,5 +57,5 @@
 // Import theme placeholder
 @import "theme/theme.scss";
 
-// Import Bootstrap utilities API
+// Import Bootstrap utilities API  (mounted by core Bootstrap module)
-@import "bootstrap/scss/utilities/api";
+@import "modules/bootstrap/utilities/api";

assets/scss/common/_styles.scss

@@ -15,6 +15,34 @@ a:active {
     min-height: 100vh;
 }
 
+.fullcover {
+    --navbar-height: #{$navbar-height};
+
+    min-height: calc(100vh - var(--navbar-height));
+}
+
+.fullscreen {
+    --navbar-offset: #{$navbar-offset};
+
+    min-height: calc(100vh - var(--navbar-offset));
+}
+
+.main-content {
+    margin-top: $navbar-offset;
+}
+
+$utilities: map-merge(
+  $utilities,
+  (
+    "cursor": (
+      property: margin-left margin-right,
+      class: mx,
+      responsive: true,
+      values: auto 0,
+    )
+  )
+);
+
 .tickmark li::marker {
     content: "✓ ";
 }

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-dart.scss

@@ -0,0 +1,47 @@
+// Bootstrap variables overrides for theme
+$enable-negative-margins:       true;
+$enable-important-utilities:    true !default;
+
+// Remove the border from the focused navigation toggler
+$navbar-toggler-focus-width:    0 !default;
+
+$font-family-sans-serif:        h.$theme-font, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-size-base:                h.$font-size-base !default;
+$headings-font-weight:          600 !default;
+$font-weight-lighter:           lighter !default;
+$font-weight-light:             200 !default;
+$font-weight-normal:            300 !default;
+$font-weight-bold:              600 !default;
+$font-weight-bolder:            bolder !default;
+
+strong {
+    font-weight:                600 if($enable-important-utilities, !important, null);
+}
+
+$navbar-height:                 h.$navbar-height;
+$navbar-offset:                 h.$navbar-offset;
+$primary:                       h.$primary;
+$secondary:                     h.$secondary;
+$success:                       h.$success;
+$info:                          h.$info;
+$warning:                       h.$warning;
+$danger:                        h.$danger;
+$light:                         h.$light;
+$dark:                          h.$dark;
+
+$black:                       #000 !default;
+$btn-toggle-color:              $black !default;
+
+$carousel-dark-indicator-active-bg:  #fff !default;
+$carousel-dark-caption-color:        #fff !default;
+$carousel-dark-control-icon-filter:  invert(0) grayscale(100) !default;
+
+$primary-text-emphasis-dark:        mix(white, h.$primary, h.$dark-mode-tint) !default;
+$secondary-text-emphasis-dark:      mix(white, h.$secondary, h.$dark-mode-tint) !default;
+$link-color-dark:                   mix(white, h.$primary, h.$dark-mode-tint) !default;
+$primary-bg-subtle-dark:            mix(black, h.$primary, h.$dark-mode-shade) !default;
+$primary-border-subtle-dark:        mix(black, h.$primary, calc(h.$dark-mode-shade / 2)) !default;
+
+$dropdown-transition: opacity .15s ease-in-out !default;
+$dropdown-horizontal-margin-top: calc((-1.5 * 1rem) - 2px);
+$dropdown-horizontal-padding-y: calc(1rem + 2px);

assets/scss/common/_variables.scss

@@ -2,14 +2,12 @@
 $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:        $theme-font, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-size-base:                $font-size-base !default;;
 $headings-font-weight:          600 !default;
 $font-weight-lighter:           lighter !default;
 $font-weight-light:             200 !default;
@@ -25,6 +23,20 @@ strong {
 $black:                       #000 !default;
 $btn-toggle-color:              $black !default;
 
-$carousel-dark-indicator-active-bg:  #ffffff !default;
+$carousel-dark-indicator-active-bg:  #fff !default;
-$carousel-dark-caption-color:        #ffffff !default;
+$carousel-dark-caption-color:        #fff !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
+
+// scss-docs-start horizontal-nav
+$dropdown-transition: opacity .15s ease-in-out !default;
+$dropdown-horizontal-margin-top: calc((-1.5 * 1rem) - 2px);
+$dropdown-horizontal-padding-y: calc(1rem + 2px);
+// scss-docs-end horizontal-nav

assets/scss/components/_abbr.scss

@@ -0,0 +1,22 @@
+@media (hover: none) {
+    abbr[title] {
+        position: relative;
+        text-decoration: underline dotted;
+    }
+    
+    abbr[title]:hover::after,
+    abbr[title]:focus::after {
+        content: attr(title);
+        position: absolute;
+        left: 0;
+        bottom: -30px;
+        width: auto;
+        white-space: nowrap;
+        background-color: var(--bs-body-bg);
+        color: var(--bs-tooltip-color);
+        border-radius: 3px;
+        box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.4);
+        font-size: 14px;
+        padding: 3px 5px;
+    }
+}

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/_button.scss

@@ -0,0 +1,43 @@
+/* Set hover color for primary button to white (overrides color contrast defined in mixin) */
+.btn-outline-primary:hover,
+.btn-primary:focus,
+.btn-primary:active,
+.btn-primary.active,
+.open > .dropdown-toggle.btn-primary {
+    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);
+}
+
+a.btn {
+    margin-top: $spacer * .25;
+    margin-bottom: $spacer * .25;
+}
+
+.btn-close {
+    background-color: transparent if($enable-important-utilities, !important, null);
+    background-image: var(--#{$prefix}btn-close-bg) if($enable-important-utilities, !important, null);
+    background-position: center if($enable-important-utilities, !important, null);
+    background-repeat: no-repeat if($enable-important-utilities, !important, null);
+    background-size: $btn-close-width if($enable-important-utilities, !important, null);
+}

assets/scss/components/_buttons.scss

@@ -1,8 +0,0 @@
-/* Set hover color for primary button to white (overrides color contrast defined in mixin) */
-.btn-outline-primary:hover,
-.btn-primary:focus,
-.btn-primary:active,
-.btn-primary.active,
-.open > .dropdown-toggle.btn-primary {
-    color: #fff if($enable-important-utilities, !important, null);
-}

assets/scss/components/_card.scss

@@ -15,6 +15,10 @@
     width: 100%;
 }
 
+.card-icon {
+    color: $secondary;
+}
+
 .card-zoom::after .card-img-wrap img {
     content: "";
     position: absolute;
@@ -48,6 +52,10 @@
     color: $body-color if($enable-important-utilities, !important, null);
 }
 
+.card-body-margin {
+    margin-bottom: $spacer * 1.5; // equals mb-4
+}
+
 @if $enable-dark-mode {
     @include color-mode(dark) {
         .card-body-link {
@@ -64,6 +72,18 @@
     }
 }
 
+@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.

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/_img.scss

@@ -14,3 +14,8 @@
     height: 100%;
     object-fit: cover;
 }
+
+.mirrorred {
+    -webkit-transform: scaleX(-1);
+    transform: scaleX(-1);
+}

assets/scss/components/_nav.scss

@@ -0,0 +1,103 @@
+.nav-tabs > .nav-link.active {
+    border-bottom-color: var(--bs-body-bg) !important;
+    border-bottom-style: solid !important;
+    z-index: 1;
+}
+
+.nav-callout {
+    --#{$prefix}nav-callout-bg: var(--#{$prefix}light);
+    --#{$prefix}nav-callout-active-bg: var(--bs-primary-bg-subtle);
+    --#{$prefix}nav-callout-gap: #{$nav-underline-gap};
+    
+    column-gap: var(--#{$prefix}nav-callout-gap) !important;
+}
+
+.nav-callout > .tab-content {
+    background-color: var(--#{$prefix}nav-callout-bg);
+    padding: 2 * $spacer;
+    margin-top: 0 !important;
+}
+
+.nav-callout > .nav-link {
+    display: flex;
+    text-align: start;
+    vertical-align: text-top;
+    border-radius: 0;
+    padding: 0 0 (4 * $spacer) 0;
+    border-bottom: none;
+}
+
+.nav-callout > .nav-link.active {
+    background-image: linear-gradient(to top right, var(--#{$prefix}nav-callout-bg) 50%, transparent 0);
+    background-size: 50% (3 * $spacer);
+    background-repeat: no-repeat;
+    background-position: 50% bottom;
+    font-weight: 600;
+    color: var(--bs-nav-underline-link-active-color);
+}
+
+.nav-callout .accordion-button {
+    background-color: var(--#{$prefix}nav-callout-bg) !important;
+    border: solid;
+    border-color: var(--#{$prefix}border-color);
+    border-radius: var(--#{$prefix}accordion-inner-border-radius) !important;
+    margin-bottom: 0;
+
+    &:focus {
+        border-bottom: none !important;
+        box-shadow: none;
+    }
+
+    &:not(.collapsed) {
+        box-shadow: none;
+    }
+}
+
+.nav-callout > .accordion-item {
+    margin-top: 2 * $spacer;
+    margin-bottom: 2 * $spacer;
+    border: none;
+}
+
+.nav-callout .accordion-button[aria-expanded="false"] {
+    border-bottom: solid !important;
+    border-color: var(--#{$prefix}border-color) !important;
+    border-radius: var(--#{$prefix}accordion-inner-border-radius);
+}
+
+.nav-callout .accordion-button[aria-expanded="true"] {
+    border-color: var(--#{$prefix}border-color) !important;
+    border-bottom: none !important;
+    border-radius: var(--#{$prefix}accordion-inner-border-radius) var(--#{$prefix}accordion-inner-border-radius) 0 0 !important;
+    padding-bottom: 3 * $spacer;
+    background-image: linear-gradient(to top right, var(--#{$prefix}nav-callout-active-bg) 50%, transparent 0);
+    background-size: 10% (2.5 * $spacer);
+    background-repeat: no-repeat;
+    background-position: 10% bottom;
+}
+
+.nav-callout .accordion-collapse {
+    background-color: var(--#{$prefix}nav-callout-active-bg) !important;
+    border-radius: 0 0 var(--#{$prefix}accordion-inner-border-radius) var(--#{$prefix}accordion-inner-border-radius);
+    border-top: none !important;
+    border-left: solid;
+    border-right: solid;
+    border-bottom: solid;
+    border-color: var(--#{$prefix}border-color);
+}
+
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        .nav-callout {
+            --#{$prefix}nav-callout-bg: var(--#{$prefix}tertiary-bg);
+        }
+
+        .nav-callout .accordion-button[aria-expanded="true"] {
+            background-image: linear-gradient(to top right, shade-color($primary, 70%) 50%, transparent 0);
+        }
+
+        .nav-callout .accordion-collapse {
+            background-color: shade-color($primary, 70%) !important;
+        }
+    }
+}

assets/scss/components/_navbar.scss

@@ -11,6 +11,22 @@
     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;
 }
@@ -36,7 +52,6 @@
 .toggler-icon {
     width: 30px;
     height: 3px;
-    background-color: $primary;
     display: block;
     transition: all 0.2s;
 }
@@ -85,16 +100,92 @@
     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);
 }
 
-@if $enable-dark-mode {
+@include color-mode(dark) {
-    @include color-mode(dark) {
+    .emphasis {
-        .emphasis {
+        background-color: $white if($enable-important-utilities, !important, null);
-            background-color: $white if($enable-important-utilities, !important, null);
-        }
     }
 }
 
 // stylelint-enable annotation-no-unknown
+
+:root {
+    --dropdown-horizontal-bg: var(--#{$prefix}light);
+}
+
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        --dropdown-horizontal-bg: var(--#{$prefix}tertiary-bg);
+    }
+}
+
+.dropdown-horizontal {
+    @each $breakpoint in map-keys($grid-breakpoints) {
+        $next: breakpoint-next($breakpoint, $grid-breakpoints);
+        $infix: breakpoint-infix($next, $grid-breakpoints);
+
+        @include media-breakpoint-up($next) {
+            &#{$infix} { 
+                position: static !important; 
+            } 
+    
+            &#{$infix} > .dropdown-menu {
+                opacity: 0;
+                display: block;
+                visibility: hidden;
+                background-color: var(--dropdown-horizontal-bg) if($enable-important-utilities, !important, null);
+                width: 100%;
+                height: auto;
+                text-align: center;
+                border-radius: 0;
+                border: 0;
+                margin-top: $dropdown-horizontal-margin-top;
+                padding-top: $dropdown-horizontal-padding-y;
+                padding-bottom: $dropdown-horizontal-padding-y;
+                box-shadow: 0.125rem 0.25rem rgba(0, 0, 0, .075);
+            
+                @include transition($dropdown-transition);
+            }
+    
+            &#{$infix} > .dropdown-menu.show {
+                visibility: visible;
+                opacity: 1;
+            }
+    
+            &#{$infix} > .dropdown-menu > li {
+                display: inline-block;
+                padding-left: $spacer;
+                padding-right: $spacer;
+            }
+    
+            &#{$infix} > .dropdown-menu > li > a {
+                padding-left: .25 * $spacer;
+                padding-right: .25 * $spacer;
+
+                &.active,
+                &:hover,
+                &:focus {
+                    color: var(--bs-body-color);
+                    border-bottom: solid 1px var(--bs-navbar-hover-color);
+                    margin-bottom: -1px;
+                    background-color: transparent;
+                }
+            }
+            
+            &#{$infix} > .nav-link.show {
+                background-color: var(--dropdown-horizontal-bg) if($enable-important-utilities, !important, null);
+            }            
+        }
+    }
+}

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/_search.scss

@@ -1,117 +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: var(--bs-tertiary-bg);
-}
-
-.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: var(--bs-secondary-color);
-    content: "Ctrl + /";
-    border: 1px solid var(--bs-border-color);
-    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-color: var(--bs-tertiary-bg);
-    outline: 0;
-}
-
-#suggestions div:not(:first-child) {
-    border-top: 1px dashed var(--bs-border-color);
-}
-
-#suggestions div:first-child {
-    margin-top: 0.5rem;
-}
-
-#suggestions div:last-child {
-    margin-bottom: 0.5rem;
-}
-
-#suggestions a:hover {
-    background-color: var(--bs-tertiary-bg);
-}
-
-#suggestions span {
-    display: flex;
-    font-size: $font-size-base;
-}
-
-.suggestion__title {
-    font-weight: $headings-font-weight;
-}
-
-.suggestion__description,
-.suggestion__no-results {
-    color: var(--bs-secondary-color);
-}
-
-@include media-breakpoint-up(sm) {
-    #suggestions {
-        width: 31.125rem;
-    }
-
-    #suggestions a {
-        display: flex;
-    }
-
-    .suggestion__title {
-        width: 9rem;
-        padding-right: 1rem;
-        border-right: 1px solid var(--bs-border-color);
-        display: inline-block;
-        text-align: right;
-    }
-
-    .suggestion__description {
-        width: 19rem;
-        padding-left: 1rem;
-    }
-}

assets/scss/components/_sidebar.scss

@@ -69,24 +69,25 @@
 @if $enable-dark-mode {
     @include color-mode(dark) {
         .sidebar-item {
-            color: var(--bs-tertiary-color);
+            color: var(--bs-body-color);
             margin-left: 0 !important;
             padding-left: 0.85rem !important;
         
             &.active,
             &:hover,
             &:focus {
-                color: var(--bs-secondary-color);
+                color: white !important;
+                background-color: transparent;
             }
         }
 
         .btn-toggle {
-            color: var(--bs-tertiary-color);
+            color: var(--bs-body-color);
         
             &:hover,
             &:focus {
-                color: $secondary;
+                color: white !important;
-                background-color: tint-color($primary, 90%);
+                background-color: transparent;
             }
         
             &::before {
@@ -105,8 +106,8 @@
 
             &:hover,
             &:focus {
-                color: $secondary;
+                color: white !important;
-                background-color: tint-color($primary, 90%);
+                background-color: transparent;
             }
 
             &.active {

assets/scss/components/_syntax-dark.scss

@@ -6,9 +6,9 @@
 /* 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 }
+/* LineHighlight */ .chroma .hl { background-color: #373700 }
-/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #64686c }
+/* 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; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #6e7681 }
+/* 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: #999fa8 }
 /* Line */ .chroma .line { display: flex; }
 /* Keyword */ .chroma .k { color: #ff7b72 }
 /* KeywordConstant */ .chroma .kc { color: #79c0ff }
@@ -18,8 +18,8 @@
 /* KeywordReserved */ .chroma .kr { color: #ff7b72 }
 /* KeywordType */ .chroma .kt { color: #ff7b72 }
 /* Name */ .chroma .n {  }
-/* NameAttribute */ .chroma .na {  }
+/* NameAttribute */ .chroma .na { color: #00cccc }
-/* NameBuiltin */ .chroma .nb {  }
+/* NameBuiltin */ .chroma .nb { color: #00a2d8 }
 /* NameBuiltinPseudo */ .chroma .bp {  }
 /* NameClass */ .chroma .nc { color: #f0883e; font-weight: bold }
 /* NameConstant */ .chroma .no { color: #79c0ff; font-weight: bold }
@@ -64,23 +64,23 @@
 /* Operator */ .chroma .o { color: #ff7b72; font-weight: bold }
 /* OperatorWord */ .chroma .ow { color: #ff7b72; font-weight: bold }
 /* Punctuation */ .chroma .p {  }
-/* Comment */ .chroma .c { color: #8b949e; font-style: italic }
+/* Comment */ .chroma .c { color: #979fa8; font-style: italic }
-/* CommentHashbang */ .chroma .ch { color: #8b949e; font-style: italic }
+/* CommentHashbang */ .chroma .ch { color: #979fa8; font-style: italic }
-/* CommentMultiline */ .chroma .cm { color: #8b949e; font-style: italic }
+/* CommentMultiline */ .chroma .cm { color: #979fa8; font-style: italic }
-/* CommentSingle */ .chroma .c1 { color: #8b949e; font-style: italic }
+/* CommentSingle */ .chroma .c1 { color: #979fa8; font-style: italic }
-/* CommentSpecial */ .chroma .cs { color: #8b949e; font-weight: bold; font-style: italic }
+/* CommentSpecial */ .chroma .cs { color: #979fa8; font-weight: bold; font-style: italic }
-/* CommentPreproc */ .chroma .cp { color: #8b949e; font-weight: bold; font-style: italic }
+/* CommentPreproc */ .chroma .cp { color: #979fa8; font-weight: bold; font-style: italic }
-/* CommentPreprocFile */ .chroma .cpf { color: #8b949e; 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: #8b949e }
+/* GenericOutput */ .chroma .go { color: #979fa8 }
-/* GenericPrompt */ .chroma .gp { color: #8b949e }
+/* 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 }
+/* TextWhitespace */ .chroma .w { color: #999fa8 }

assets/scss/components/_syntax-dart.scss

@@ -0,0 +1,49 @@
+// stylelint-disable annotation-no-unknown
+@import "syntax-light";
+
+.bg,
+.chroma,
+.chroma .err {
+    // set to transparent background to avoid rendering issues with example shortcode
+    background-color: transparent if($enable-important-utilities, !important, null);
+}
+
+.chroma {
+    display: flex;
+}
+
+.chroma code {
+    flex: 1;
+}
+
+.syntax-highlight {
+    background-color: var(--bs-light) if($enable-important-utilities, !important, null);
+    overflow-x: auto;
+}
+
+@if $enable-dark-mode {
+    [data-bs-theme="dark"] {
+        @include meta.load-css(syntax-dark);
+
+        .bg,
+        .chroma,
+        .chroma .err {
+            // set to transparent background to avoid rendering issues with example shortcode
+            background-color: transparent if($enable-important-utilities, !important, null);
+        }
+
+        .syntax-highlight {
+            background-color: var(--bs-tertiary-bg) if($enable-important-utilities, !important, null);
+            overflow-x: auto;
+        }
+
+        .bg,
+        .chroma,
+        .chroma .ge,
+        .chroma .gl,
+        .chroma .gs {
+            color: #c9d1d9 if($enable-important-utilities, !important, null);
+        }
+    }
+}
+// stylelint-enable annotation-no-unknown

assets/scss/components/_syntax-light.scss

@@ -7,8 +7,8 @@
 /* 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; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* 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; 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 }
@@ -19,7 +19,7 @@
 /* KeywordType */ .chroma .kt { color: #445588; font-weight: bold }
 /* Name */ .chroma .n {  }
 /* NameAttribute */ .chroma .na { color: #008080 }
-/* NameBuiltin */ .chroma .nb { color: #0086b3 }
+/* NameBuiltin */ .chroma .nb { color: #006b8f }
 /* NameBuiltinPseudo */ .chroma .bp { color: #999999 }
 /* NameClass */ .chroma .nc { color: #445588; font-weight: bold }
 /* NameConstant */ .chroma .no { color: #008080 }
@@ -54,20 +54,20 @@
 /* LiteralStringRegex */ .chroma .sr { color: #009926 }
 /* LiteralStringSingle */ .chroma .s1 { color: #dd1144 }
 /* LiteralStringSymbol */ .chroma .ss { color: #990073 }
-/* LiteralNumber */ .chroma .m { color: #009999 }
+/* LiteralNumber */ .chroma .m { color: #007a7a }
-/* LiteralNumberBin */ .chroma .mb { color: #009999 }
+/* LiteralNumberBin */ .chroma .mb { color: #007a7a }
-/* LiteralNumberFloat */ .chroma .mf { color: #009999 }
+/* LiteralNumberFloat */ .chroma .mf { color: #007a7a }
-/* LiteralNumberHex */ .chroma .mh { color: #009999 }
+/* LiteralNumberHex */ .chroma .mh { color: #007a7a }
-/* LiteralNumberInteger */ .chroma .mi { color: #009999 }
+/* LiteralNumberInteger */ .chroma .mi { color: #007a7a }
-/* LiteralNumberIntegerLong */ .chroma .il { color: #009999 }
+/* LiteralNumberIntegerLong */ .chroma .il { color: #007a7a }
-/* LiteralNumberOct */ .chroma .mo { color: #009999 }
+/* 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: #999988; font-style: italic }
+/* Comment */ .chroma .c { color: #6d6d5d; font-style: italic }
-/* CommentHashbang */ .chroma .ch { color: #999988; font-style: italic }
+/* CommentHashbang */ .chroma .ch { color: #6d6d5d; font-style: italic }
-/* CommentMultiline */ .chroma .cm { color: #999988; font-style: italic }
+/* CommentMultiline */ .chroma .cm { color: #6d6d5d; font-style: italic }
-/* CommentSingle */ .chroma .c1 { color: #999988; 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 }

assets/scss/components/_syntax.scss

@@ -8,12 +8,17 @@
     background-color: transparent if($enable-important-utilities, !important, null);
 }
 
-.syntax-highlight {
+.chroma {
-    background-color: var(--bs-light) if($enable-important-utilities, !important, null);
+    display: flex;
 }
 
-.preview-background {
+.chroma code {
-    background-color: var(--bs-secondary-bg) if($enable-important-utilities, !important, null);
+    flex: 1;
+}
+
+.syntax-highlight {
+    background-color: var(--bs-light) if($enable-important-utilities, !important, null);
+    overflow-x: auto;
 }
 
 @if $enable-dark-mode {
@@ -29,10 +34,14 @@
 
         .syntax-highlight {
             background-color: var(--bs-tertiary-bg) if($enable-important-utilities, !important, null);
+            overflow-x: auto;
         }
 
         .bg,
-        .chroma {
+        .chroma,
+        .chroma .ge,
+        .chroma .gl,
+        .chroma .gs {
             color: #c9d1d9 if($enable-important-utilities, !important, null);
         }
     }

assets/scss/components/_table.scss

@@ -0,0 +1,13 @@
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        .table-striped, .table-striped-columns {
+            --bs-table-striped-bg: var(--bs-tertiary-bg);
+            --bs-table-striped-color: var(--bs-body-color);
+        }
+
+        .table-hover {
+            --bs-table-hover-bg: var(--bs-tertiary-bg);
+            --bs-table-striped-color: var(--bs-body-color);
+        }
+    }
+}

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,8 +1,8 @@
 //
-// 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;
@@ -15,6 +15,7 @@
 
 .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,54 @@
 .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);
+
+            &:hover {
+                background-color: transparent;
+            }
+        }
+
+        #toc-collapse {
+            border-color: var(--bs-body-color) !important;
+        }
+
+        .toc nav a {
+            color: var(--bs-body-color);
+
+            &:hover {
+                color: white;
+            }
+        }
+    }
+}
+
+.section-menu > .nav-link.active, .section-menu > .nav-link:hover {
+    color: var(--bs-primary);
+}

assets/scss/components/_video.scss

@@ -1,3 +1,19 @@
+.youtube-embedded {
+    position: relative;
+    padding-bottom: 56.25%;
+    height: 0;
+    overflow: hidden;
+}
+
+.youtube-embedded > iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border:0;
+}
+
 // Adapted from https://github.com/gohugoio/hugo/tpl/tplimpl/embedded/templates/shortcodes/vimeo_simple.html
 .__h_video {
     position: relative;

assets/scss/layouts/_type.scss

@@ -30,3 +30,7 @@ h6 {
     margin-top: $spacer;
     scroll-margin-top: $navbar-offset;
 }
+
+.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
+    scroll-margin-top: $navbar-offset;
+}

assets/scss/theme/_variables.scss

@@ -0,0 +1,2 @@
+// Placeholder to quickly add your own theme variable overrides
+// The file is included at the beginning of 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,135 @@
+# toml-docs-start main
+title = "Hinode"
+copyright = "Copyright © 2023 Mark Dumay."
+paginate = 9
+enableGitInfo = true
+# toml-docs-end main
+
+# additional settings
+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
+  [services.googleAnalytics]
+    # ID = "G-xxxxxxxxxx"
+
+[outputFormats]
+  [outputFormats.XML]
+    isPlainText = false
+    mediaType = "application/xml"
+    isHtml = false
+    noUgly = true
+    permalinkable = false
+    name = "xml"
+
+[minify]
+  [minify.tdewolff.js]
+    keepVarNames = true
+    precision = 0
+    version = 2022
+
+[module]
+  [module.hugoVersion]
+    extended = true
+    min = "0.120.0"
+    max = ""
+  [[module.mounts]]
+    source = "archetypes"
+    target = "archetypes"
+  [[module.mounts]]
+    source = "assets"
+    target = "assets"
+  [[module.mounts]]
+    source = "content"
+    target = "content"
+  [[module.mounts]]
+    source = "data"
+    target = "data"
+  [[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"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-lottie"
+# toml-docs-end modules

config/_default/languages.toml

@@ -1,31 +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]
-        link = "/en/about"
+        title = "Follow me"
-        caption = "About"
+        caption = "I work on everything coding and tweet developer memes"
     [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]
-        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

@@ -31,5 +31,5 @@ defaultMarkdownHandler = "goldmark"
         block = true
     [goldmark.renderer]
         hardWraps = false
-        unsafe = true
+        unsafe = false
         xhtml = false

config/_default/menus/menus.en.toml

@@ -1,73 +1,51 @@
 [[main]]
-  name = "About"
+  name = "Home"
-  url = "/about/"
+  pageRef = "/"
   weight = 10
 
-[[main]]
-  name = "Blog"
-  url = "/blog/"
-  weight = 20
-
-[[main]]
-  name = "Projects"
-  url = "/projects/"
-  weight = 30
-
-[[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 = 40
+  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/params.toml

@@ -4,21 +4,57 @@
     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
+    footerBelowFold = false
+    loading = "lazy"
+    breakpoint = "md"
+    [main.externalLinks]
+        cue = false
+        tab = false
+    [main.build]
+        transpiler = "libsass"
 # toml-docs-end main
 
+# toml-docs-start modules
+[modules]
+    core = ["bootstrap", "flexsearch", "fontawesome"]
+    optional = ["leaflet", "katex", "lottie"]
+    excludeSCSS = ["bootstrap"]
+    disableTemplate = ["katex"]
+    [modules.katex]
+        state = "defer"
+    [modules.fontawesome]
+        inline = true
+        debug = true
+        skipMissing = false
+# toml-docs-end modules
+
+# toml-docs-start debugging
+[debugging]
+    showJS = false
+    showSCSS = false
+    purgeHTMLComments = false
+# toml-docs-end debugging
+
 # toml-docs-start docs
 [docs]
-    version = "0.8"
+    github = "https://github.com/gethinode/hinode"
-    basePath = ""
+    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 = ""
+    [home.feature]
+        orientation = "horizontal"
+        color = "primary"
+        width = 4
+        align = "start"
 # toml-docs-end home
 
 # toml-docs-start navigation
@@ -27,42 +63,77 @@
     logo = "/img/logo_icon.svg"
     color = "body"
     fixed = true
-    offset = "3.8em"
+    horizontal = false
+    offset = "5.5rem"
     search = true
-    breadcrumb = false
+    searchModal = false
+    breadcrumb = true
     toc = true
     sidebar = true
+    size = "md"
 # 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 card-zoom"
+[[sharing.providers]]
-        homepage = 3
+    name = "LinkedIn"
-        separator = true
+    url = "https://www.linkedin.com/sharing/share-offsite/?url={url}"
-    [projects]
+    icon = "fab linkedin"
-        title = "Projects"
+    weight = 10
-        sort = "title"
+
-        reverse = false
+[[sharing.providers]]
-        cols = 1
+    name = "Twitter"
-        color = "body-tertiary"
+    url = "https://twitter.com/home?status={url}"
-        padding = "3"
+    icon = "fab x-twitter"
-        header = "none"
+    weight = 20
-        footer = "tags"
+
-        orientation = "none"
+[[sharing.providers]]
-        style = "border-1 card-emphasize"
+    name = "Facebook"
-        homepage = 3
+    url = "https://www.facebook.com/sharer.php?u={url}"
-        separator = false
+    icon = "fab facebook"
-# toml-docs-end list
+    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 card-body-margin"
+#         homepage = 3
+#         separator = true
+# toml-docs-end sections
 
 [favicon]
     logo = "img/favicon.png"
@@ -80,10 +151,13 @@
     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" # external path
     themeFontPath = "/fonts" # local path
+    fontSizeBase = "1rem" # assumes the browser default, typically '16px'
 # toml-docs-end font
 # toml-docs-start build
     purge = false
@@ -125,11 +199,4 @@
     #theme = "" 
 
 [links]
-    bs_badge_heading = "https://getbootstrap.com/docs/5.2/components/badge/#headings"
+    hinode = "https://gethinode.com"
-    hinode_docs = "https://gethinode.com/docs"
-    hugo_imaging = "https://gohugo.io/content-management/image-processing/#imaging-configuration"
-    mozilla_image = "https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images"
-    observatory = "https://observatory.mozilla.org/analyze/demo.gethinode.com"
-    pagespeed = "https://pagespeed.web.dev/report?url=https%3A%2F%2Fdemo.gethinode.com%2F"
-    utterances = "https://utteranc.es"
- 

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' \
         """

config/ci/hugo.toml

@@ -0,0 +1,23 @@
+# cachedir default on POSIX: '/tmp/hugo_cache_runner'
+# cachedir default on Windows: '~\AppData\Local\hugo_cache'
+# cachedir default on macOS: '/Users/runner/Library/Caches/hugo_cache'
+
+[caches]
+  [caches.assets]
+    dir = ':cacheDir/resources/_gen' # map to cacheDir instead of resourceDir to utilize GitHub action/cache
+    maxAge = -1
+  [caches.getcsv]
+    dir = ':cacheDir/:project'
+    maxAge = -1
+  [caches.getjson]
+    dir = ':cacheDir/:project'
+    maxAge = -1
+  [caches.getresource]
+    dir = ':cacheDir/:project'
+    maxAge = -1
+  [caches.images]
+    dir = ':cacheDir/resources/_gen' # map to cacheDir instead of resourceDir to utilize GitHub action/cache
+    maxAge = -1
+  [caches.modules]
+    dir = ':cacheDir/modules'
+    maxAge = -1

config/postcss.config.js

@@ -14,19 +14,25 @@ const purgecss = require('@fullhuman/postcss-purgecss')({
     ...whitelister([
       './assets/scss/components/_clipboard.scss',
       './assets/scss/components/_command.scss',
+      './assets/scss/components/_nav.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/components/_table.scss',
       './assets/scss/theme/fonts.scss',
       './assets/scss/theme/theme.scss',
-      './node_modules/bootstrap/scss/_carousel.scss',
+      './_vendor/github.com/gethinode/mod-flexsearch/assets/scss/modules/flexsearch/flexsearch.scss',
-      './node_modules/bootstrap/scss/_dropdown.scss',
+      './_vendor/github.com/gethinode/mod-katex/dist/katex.scss',
-      './node_modules/bootstrap/scss/_reboot.scss',
+      './_vendor/github.com/gethinode/mod-leaflet/dist/leaflet.scss',
-      './node_modules/bootstrap/scss/_tooltip.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_carousel.scss',
-      './node_modules/bootstrap/scss/_transitions.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_dropdown.scss',
-      './node_modules/bootstrap/scss/_utilities.scss'
+      './_vendor/github.com/twbs/bootstrap/scss/_modal.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'
     ])
   ]
 })

config/production/config.toml

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

content/_index.md

@@ -0,0 +1,15 @@
+---
+title: Welcome to Hinode!
+description: A clean documentation and blog theme for your Hugo site based on Bootstrap 5.
+thumbnail:
+    url: /img/sunrise.jpg
+    author: Harris Vo
+    authorURL: https://unsplash.com/@hoanvokim
+    origin: https://unsplash.com/photos/ZX6BPboJrYk
+    originName: Unsplash
+actions:
+  get-started:
+    url: "https://gethinode.com/docs"
+    title: "Get started"
+    icon: "fas book-open"
+---

content/en/_index.md

@@ -1,6 +0,0 @@
----
-author: Mark Dumay
-title: Welcome to Hinode!
----
-
-A clean documentation and blog theme for your Hugo site based on Bootstrap 5.

content/en/about.md

@@ -1,43 +0,0 @@
----
-title: About
-description: Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5.
-date: 2022-04-11
-updated: 2023-02-11
-showComments: false
----
-
-<p class="text-center"><svg class="img-fluid w-50"><use href="/img/logo_var.svg#logo"></use></svg></p>
-
-<section class="section section-sm mt-5 mb-5">
-    <div class="container-fluid">
-        <div class="row justify-content-center text-center">
-            <div class="col-lg-4">
-                <i class="fa-brands fa-bootstrap fa-2xl"></i>
-                <h2 class="h4">Bootstrap framework</h2>
-                <p>Build fast, responsive sites with Bootstrap 5. Easily customize your site with the source Sass files.</p>
-            </div>
-            <div class="col-lg-4">
-                <i class="fa-solid fa-magnifying-glass fa-2xl"></i>
-                <h2 class="h4">Full text search</h2>
-                <p>Search your site with FlexSearch, a full-text search library with zero dependencies.</p>
-            </div>
-            <div class="col-lg-4">
-                <i class="fa-solid fa-code fa-2xl"></i>
-                <h2 class="h4">Development tools</h2>
-                <p>Use Node Package Manager to automate the build process and to keep track of dependencies.</p>
-            </div>
-        </div>
-    </div>
-</section>
-
-Additional features include:
-
-* Switching between light mode and dark mode
-* Support for multiple languages
-* Reusable Bootstrap components through configurable shortcodes and partials
-* Embedded comments through light-weight integration with GitHub via [utteranc.es]({{< param "links.utterances" >}})
-* Integrated sidebar navigation for content-heavy sections, such as documentation pages
-* Reponsive image handling for multiple screen sizes and resolutions
-* Optimized search results, scoring 100 points for SEO on [PageSpeed Insights]({{< param "links.pagespeed" >}})
-* Secure by default, scoring A+ on [Mozilla Observatory test]({{< param "links.observatory" >}})
-{.tickmark}

content/nl/_index.md

@@ -1,6 +0,0 @@
----
-author: Mark Dumay
-title: Welkom bij Hinode!
----
-
-Een documentatie en blog thema voor Hugo gebaseerd op Bootstrap 5.

content/nl/about.md

@@ -1,49 +0,0 @@
----
-slug: over-mij
-title: Over mij
-description: Een blog en documentatie thema voor Hugo gebaseerd op Bootstrap 5.
-date: 2023-02-17
-showComments: false
----
-
-<p class="text-center"><svg class="img-fluid w-50"><use href="/img/logo_var.svg#logo"></use></svg></p>
-
-<section class="section section-sm mt-5">
-  <div class="container-fluid">
-    <div class="row justify-content-center text-center">
-    <div class="row justify-content-center text-center">
-      <div class="col-lg-4">
-        <i class="fa-brands fa-bootstrap fa-2xl"></i>
-        <h2 class="h4">Bootstrap raamwerk</h2>
-        <p>Bouw snelle websites geschikt voor mobiele en desktop schermen met Bootstrap 5. Pas de site eenvoudig aan met bronbestanden in Sass.</p>
-      </div>
-      <div class="col-lg-4">
-        <i class="fa-solid fa-magnifying-glass fa-2xl"></i>
-        <h2 class="h4">Volledig doorzoekbaar</h2>
-        <p>Doorzoek je site met FlexSearch, een software bibliotheek zonder afhankelijkheden.</p>
-      </div>
-      <div class="col-lg-4">
-      <i class="fa-solid fa-code fa-2xl"></i>
-        <h2 class="h4">Ontwikkelgereedschap</h2>
-        <p>Gebruik Node Package Manager om het bouwproces inclusief versiebeheer volledig te automatiseren.</p>
-      </div>
-    </div>
-  </div>
-</section>
-
-Overige functies:
-
-* Omschakelen tussen donkere en lichte modus
-* Ondersteuning voor meerdere talen
-* Herbruikbare Bootstrap componenten via shortcodes en partials
-* Integreren van commentaar via [utteranc.es]({{< param "links.utterances" >}})
-* Secundaire navigatie voor bijvoorbeeld documentatie
-* Optimalisering van foto's voor meerdere schermafmetingen en resoluties
-* Optimale zoekresultaten, met 100 punten voor SEO volgens [PageSpeed Insights]({{< param "links.pagespeed" >}})
-* Veilige communicatie, met een score van A+ volgens [Mozilla Observatory]({{< param "links.observatory" >}})
-{.tickmark}
-
-Hinode is geinspireerd door de volgende thema's:
-
-* [Blist](https://github.com/apvarun/blist-hugo-theme) - een blog thema voor Hugo op basis van Tailwind CSS.
-* [Doks](https://github.com/h-enk/doks) - een Hugo thema voor het bouwen van veilige, snelle, en SEO-geoptimaliseerde documentatiesites, die je eenvoudig kunt actualiseren en aanpassen.

content/nl/blog/bootstrap-elements.md

@@ -1,264 +0,0 @@
----
-author: Mark Dumay
-title: Bootstrap elementen
-date: 2023-02-17
-description: Gebruik shortcodes om eenvoudig Bootstrap elementen toe te voegen.
-tags: ["bootstrap", "shortcode"]
-thumbnail: img/boots.jpg
-photoCredits: <a href="https://unsplash.com/@nate_dumlao">Nathan Dumlao</a>
-photoSource: <a href="https://unsplash.com/photos/QLPWQvHvmII">Unsplash</a>
----
-
-Hinode beschikt over meerdere shortcodes om eenvoudig Bootstrap elementen toe te voegen aan je website. De [officiële documentatie]({{< param "links.hinode_docs" >}}) bevat meer details.
-
-## Accordion
-
-De volgende shortcode toont een accordion met drie elementen, waarvan de eerste is uitgeklapt.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* accordion */>}}
-  {{</* accordion-item header="Accordion Item #1" show="true" */>}}
-    Dit is de inhoud van het eerste element met ondersteuning voor HTML. De waarde <code>show</code>
-    voor het argument <code>class</code> geeft aan dat het element uitgeklapt moet worden.
-  {{</* /accordion-item */>}}
-  {{</* accordion-item header="Accordion Item #2" */>}}
-    Dit is de inhoud van het tweede element. Het ondersteunt ook HTML.
-  {{</* /accordion-item */>}}
-  {{</* accordion-item header="Accordion Item #3" */>}}
-    Dit is de inhoud van het derde element.
-  {{</* /accordion-item */>}}
-{{</* /accordion */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->
-
-## Alert
-
-De volgende shortcode toont een waarschuwing.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* alert color="danger" dismissible="true" */>}}
-    Een eenvoudige waarschuwing
-{{</* /alert */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->
-
-## Badge
-
-Gebruik HTML code om een label toe te voegen aan een titel. De Bootstrap [documentatie]({{< param "links.bs_badge_heading" >}}) beschrijft meer opties.
-
-{{< example >}}
-<h1>Voorbeeldtekst met grootte één <span class="badge bg-secondary">Nieuw</span></h1>
-<h2>Voorbeeldtekst met grootte twee <span class="badge bg-secondary">Nieuw</span></h2>
-<h3>Voorbeeldtekst met grootte drie <span class="badge bg-secondary">Nieuw</span></h3>
-<h4>Voorbeeldtekst met grootte vier <span class="badge bg-secondary">Nieuw</span></h4>
-<h5>Voorbeeldtekst met grootte vijf <span class="badge bg-secondary">Nieuw</span></h5>
-<h6>Voorbeeldtekst met grootte zes <span class="badge bg-secondary">Nieuw</span></h6>
-{{< /example >}}
-
-## Breadcrumb
-
-De volgende shortcode toont het navigatiepad voor de blog pagina.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* breadcrumb path="blog" */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->
-
-## Button
-
-De volgende shortcode toont een knop met een label en een aanwijzing.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* button color="secondary" tooltip="Toon je ongelezen berichten" href="#!" badge="99+" */>}}
-    Inbox
-{{</* /button */>}}
-{{< /example>}}
-<!-- markdownlint-enable MD037 -->
-
-## Button group
-
-De volgende shortcode toont een groep van drie knoppen.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* button-group aria-label="Basic example" */>}}
-  {{</* button color="primary" href="#!" */>}}Links{{</* /button */>}}
-  {{</* button color="primary" href="#!" */>}}Midden{{</* /button */>}}
-  {{</* button color="primary" href="#!" */>}}Rechts{{</* /button */>}}
-{{</* /button-group */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->
-
-## Card
-
-De volgende shortcode toont een kaart dat linkt naar de [over mij]({{< ref "about" >}}) pagina. De kaart bevat een titel.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* card path="about" padding="3" class="w-50" color="body-tertiary" header="publication" footer="none" */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->
-
-## Carousel
-
-De volgende shortcode toont een carousel met drie pagina's, in een verhouding van 16x9 voor een breedte van 67% op grotere schermen.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* carousel ratio="16x9" class="col-sm-12 col-lg-8 mx-auto" */>}}
-  {{</* img src="img/coffee.jpg" caption="pagina 1" */>}}
-  {{</* img src="img/phone.jpg" caption="pagina 2" */>}}
-  {{</* img src="img/dunes.jpg" caption="pagina 3" */>}}
-{{</* /carousel */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->
-
-## Collapse
-
-De volgende shortcode toont een knop die een informatiepaneel toont of verbergt.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* button collapse="collapse-1" */>}}
-    Trigger panel
-{{</* /button */>}}
-
-{{</* collapse id="collapse-1" class="p-3 border rounded" */>}}
-    Dit is een voorbeeldtekst. Het informatiepaneel is <i>standaard verborgen </i> maar wordt getoond als
-    de gebruiker op de bijbehorende knop drukt.
-{{</* /collapse */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->
-
-## Command prompt
-
-De volgende shortcode toont een prompt voor bash.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* command */>}}
-export MY_VAR=123
-{{</* /command */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->
-
-Voeg  `user` en `host` om de gebruikerscontext op te geven. Als aanvulling, `(out)` definieert een outputregel en `\` is een markering die aangeeft dat de regel doorgaat op de volgende regel.
-
-<!-- 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 -->
-
-## Docs
-
-Gebruik de volgende shortcode om de inhoud van een `toml` of `scss` bestand te tonen.
-
-{{< docs name="theme-colors" file="config/_default/params.toml" >}}
-
-## Icon
-
-De volgende shortcodes tonen drie verschillende iconen:
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* fa square-check */>}}
-{{</* fab linkedin */>}}
-{{</* fas circle-check */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->
-
-## Image
-
-De volgende shortcode toont een plaatje met afgeronde hoeken en een 21x9 verhouding.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* image src="img/flowers.jpg" ratio="21x9" caption="Onderschrift" class="rounded" */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->
-
-## Nav
-
-De volgende shortcode toont een groep met verticale tabbladen.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-  {{</* nav type="pills" vertical="true" */>}}
-    {{</* nav-item header="Nav Item #1" show="true" */>}}
-    Dit is de inhoud van het eerste element met ondersteuning voor HTML. De waarde <code>show</code>
-    voor het argument <code>class</code> geeft aan dat het element uitgeklapt moet worden.
-    {{</* /nav-item */>}}
-    {{</* nav-item header="Nav Item #2" */>}}
-    Dit is de inhoud van het tweede element. Het ondersteunt ook HTML.
-    {{</* /nav-item */>}}
-    {{</* nav-item header="Nav Item #3" */>}}
-    Dit is de inhoud van het derde element.
-    {{</* /nav-item */>}}
-  {{</* /nav */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->
-
-## Navbar
-
-De volgende shortcode toont een navigatiemenu.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* navbar path="about" color="primary" size="md" search="false" menus="sample" title="Brand" mode="false" */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->
-
-## Spinner
-
-De volgende shortcode toont een ronddraaiende cirkel.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* spinner color="info" class="text-center" */>}}
-Loading...
-{{</* /spinner */>}}
-{{< /example>}}
-<!-- markdownlint-enable MD037 -->
-
-## Toast
-
-De volgende shortcode toont een knop die een bericht laat verschijnen op het scherm.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* button id="toastButton" */>}}
-    Toon bericht
-{{</* /button */>}}
-
-{{</* toast header="Titel" */>}}
-    Dit is een bericht.
-{{</* /toast */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->
-
-## Tooltip
-
-De volgende shortcode toont een uitleg voor een gekleurde link.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* tooltip color="primary" title="Tooltip" href="#!" */>}}
-    Tooltip demonstration
-{{</* /tooltip */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->

exampleSite/assets/svgs/custom/activity.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-activity" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2Z"/>
+</svg>

exampleSite/config/_default/hugo.toml

@@ -1,9 +1,8 @@
-# toml-docs-start main
+resourcedir = '../resources/'
 title = "Hinode"
 copyright = "Copyright © 2023 Mark Dumay."
 paginate = 9
 enableGitInfo = true
-# toml-docs-end main
 
 # additional settings
 baseURL = "https://demo.gethinode.com/"
@@ -16,20 +15,26 @@ enableInlineShortcodes = true
 # See https://github.com/gohugoio/hugo/issues/7228#issuecomment-714490456
 ignoreErrors = ["error-remote-getjson"]
 
-# toml-docs-start timeout
+timeout = "180s"
-timeout = "60s"
-# toml-docs-end timeout
 
-# toml-docs-start language
 languageCode = "en-us"
 defaultContentLanguage = "en"
 defaultContentLanguageInSubdir = true
-# toml-docs-end language
 
-# toml-docs-start build
+[outputFormats.REDIR]
+mediaType = "text/netlify"
+baseName = "_redirects"
+isPlainText = true
+notAlternative = true
+
+[mediaTypes."text/netlify"]
+delimiter = ""
+
+[outputs]
+home = ["HTML", "RSS", "REDIR"]
+
 [build]
   writeStats = true
-# toml-docs-end build
   
 [taxonomies]
   tag = 'tags'
@@ -57,6 +62,8 @@ defaultContentLanguageInSubdir = true
     disableInlineCSS = true
   [services.twitter]
     disableInlineCSS = true
+  [services.googleAnalytics]
+    ID = "G-T85PPZ36GN"
 
 [outputFormats]
   [outputFormats.XML]
@@ -67,24 +74,13 @@ defaultContentLanguageInSubdir = true
     permalinkable = false
     name = "xml"
 
+[minify]
+  [minify.tdewolff.js]
+    keepVarNames = true
+    precision = 0
+    version = 2022
+
 [module]
-  [module.hugoVersion]
+  replacements = 'github.com/gethinode/hinode -> ../..'
-    extended = true
+  [[module.imports]]
-    min = "0.81.0"
+    path = "github.com/gethinode/hinode"
-    max = ""
-  [[module.mounts]]
-    source = "assets"
-    target = "assets"
-  [[module.mounts]]
-    source = "static"
-    target = "static"
-# toml-docs-start javascript
-  [[module.mounts]]
-    source = "node_modules/bootstrap/dist/js"
-    target = "assets/js/vendor/bootstrap"
-    includeFiles = "*.bundle.js"
-  [[module.mounts]]
-    source = "node_modules/flexsearch/dist"
-    target = "assets/js/vendor/flexsearch"
-    includeFiles = "*.bundle.js"
-# toml-docs-end javascript

exampleSite/config/_default/languages.toml

@@ -0,0 +1,53 @@
+# toml-docs-start lang-main
+[en]
+languageName = "English"
+contentDir = "content/en"
+weight = 1
+# toml-docs-end lang-main
+# toml-docs-start lang-param
+[en.params.head]
+tagline = "A Hugo Theme"
+[en.params.social]
+title = "Follow me"
+caption = "I work on everything coding and tweet developer memes"
+[en.params.footer]
+# 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>)."
+# toml-docs-end lang-param
+[en.params.sections.blog]
+reference = "More Posts"
+[en.params.sections.projects]
+reference = "More Projects"
+
+[nl]
+languageName = "Nederlands"
+contentDir = "content/nl"
+weight = 2
+[nl.params.head]
+tagline = "Een Hugo Thema"
+[nl.params.social]
+title = "Volg mij"
+caption = "Ik doe aan programmeren en tweet memes"
+[nl.params.footer]
+# license = "Gelicenseerd onder 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>)."
+[nl.params.sections.blog]
+reference = "Meer artikelen"
+[nl.params.sections.projects]
+title = "Projecten"
+reference = "Meer projecten"
+
+[fr]
+languageName = "Français"
+contentDir = "content/fr"
+weight = 2
+[fr.params.head]
+tagline = "Un thème Hugo"
+[fr.params.social]
+title = "Suivez-moi"
+caption = "Je code et je tweet des mèmes de développeurs."
+[fr.params.footer]
+# license = "Gelicenseerd onder 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>)."
+[fr.params.sections.blog]
+reference = "Plus d'articles"
+[fr.params.sections.projects]
+title = "Projets"
+reference = "Plus de projets"

exampleSite/config/_default/markup.toml

@@ -0,0 +1,35 @@
+defaultMarkdownHandler = "goldmark"
+
+[highlight]
+    anchorLineNos = false
+    codeFences = true
+    guessSyntax = true
+    hl_Lines = ""
+    lineAnchors = ""
+    lineNoStart = 1
+    lineNos = false
+    lineNumbersInTable = false
+    noClasses = false
+    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]
+        definitionList = true
+        footnote = true
+        linkify = true
+        strikethrough = true
+        table = true
+        taskList = true
+        typographer = true
+    [goldmark.parser]
+        autoHeadingID = true
+        autoHeadingIDType = 'github'
+    [goldmark.parser.attribute]
+        block = true
+    [goldmark.renderer]
+        hardWraps = false
+        unsafe = false
+        xhtml = false

exampleSite/config/_default/menus/menus.en.toml

@@ -0,0 +1,73 @@
+[[main]]
+  name = "About"
+  pageRef = "/about/"
+  weight = 10
+
+[[main]]
+  name = "Blog"
+  pageRef = "/blog/"
+  weight = 20
+
+[[main]]
+  name = "Projects"
+  pageRef = "/projects/"
+  weight = 30
+
+[[main]]
+  name = "Sample project"
+  pageRef = "/projects/sample-project/"
+  parent = "Projects"
+  weight = 1
+
+[[main]]
+  name = "Another project"
+  pageRef = "/projects/another-project/"
+  parent = "Projects"
+  weight = 2
+
+[[main]]
+  name = "Tags"
+  pageRef = "/tags/"
+  weight = 40
+
+[[social]]
+  name = "LinkedIn"
+  pre = "fab linkedin"
+  url = "https://linkedin.com/"
+  weight = 10
+
+[[social]]
+  name = "GitHub"
+  pre = "fab fa-github"
+  url = "https://github.com/"
+  weight = 20
+
+[[social]]
+  name = "Medium"
+  pre = "fab medium"
+  url = "https://medium.com/"
+  weight = 30
+
+# toml-docs-start sample-navigation
+[[sample]]
+  name = "Blog"
+  pageRef = "/blog/"
+  weight = 10
+
+[[sample]]
+  name = "Projects"
+  pageRef = "/projects/"
+  weight = 20
+
+[[sample]]
+  name = "Sample project"
+  pageRef = "/projects/sample-project/"
+  parent = "Projects"
+  weight = 1
+
+[[sample]]
+  name = "Another project"
+  pageRef = "/projects/another-project/"
+  parent = "Projects"
+  weight = 2
+# toml-docs-end sample-navigation

exampleSite/config/_default/menus/menus.fr.toml

@@ -0,0 +1,73 @@
+[[main]]
+name = "À propos"
+pageRef = "/a-propos/"
+weight = 10
+
+[[main]]
+name = "Blog"
+pageRef = "/blog/"
+weight = 20
+
+[[main]]
+name = "Projets"
+pageRef = "/projets/"
+weight = 30
+
+[[main]]
+name = "Exemple de projet"
+pageRef = "/projets/exemple-de-projet/"
+parent = "Projets"
+weight = 1
+
+[[main]]
+name = "Autre projet"
+pageRef = "/projets/autre-projet/"
+parent = "Projets"
+weight = 2
+
+[[main]]
+name = "Tags"
+pageRef = "/tags/"
+weight = 40
+
+[[social]]
+name = "LinkedIn"
+pre = "fab linkedin"
+url = "https://linkedin.com/"
+weight = 10
+
+[[social]]
+name = "GitHub"
+pre = "fab fa-github"
+url = "https://github.com/"
+weight = 20
+
+[[social]]
+name = "Medium"
+pre = "fab medium"
+url = "https://medium.com/"
+weight = 30
+
+# toml-docs-start sample-navigation
+[[sample]]
+name = "Blog"
+pageRef = "/blog/"
+weight = 10
+
+[[sample]]
+name = "Projets"
+pageRef = "/projets/"
+weight = 20
+
+[[sample]]
+name = "Exemple de projet"
+pageRef = "/projets/exemple-de-projet/"
+parent = "Projets"
+weight = 1
+
+[[sample]]
+name = "Autre projet"
+pageRef = "/projets/autre-projet/"
+parent = "Projets"
+weight = 2
+# toml-docs-end sample-navigation

exampleSite/config/_default/menus/menus.nl.toml

@@ -1,73 +1,73 @@
 [[main]]
   name = "Over mij"
-  url = "/over-mij/"
+  pageRef = "/over-mij/"
   weight = 10
 
 [[main]]
   name = "Blog"
-  url = "/blog/"
+  pageRef = "/blog/"
   weight = 20
 
 [[main]]
   name = "Projecten"
-  url = "/projecten/"
+  pageRef = "/projecten/"
   weight = 30
 
 [[main]]
   name = "Voorbeeldproject"
-  url = "/nl/projecten/voorbeeldproject/"
+  pageRef = "/projecten/voorbeeldproject/"
   parent = "Projecten"
   weight = 1
 
 [[main]]
   name = "Ander project"
-  url = "/nl/projecten/ander-project/"
+  pageRef = "/projecten/ander-project/"
   parent = "Projecten"
   weight = 2
 
 [[main]]
   name = "Tags"
-  url = "/tags/"
+  pageRef = "/tags/"
   weight = 40
 
 [[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 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 = "Projecten"
-  url = "/projecten/"
+  pageRef = "/projecten/"
   weight = 20
 
 [[sample]]
   name = "Voorbeeldproject"
-  url = "/nl/projecten/voorbeeldproject/"
+  pageRef = "/projecten/voorbeeldproject/"
   parent = "Projecten"
   weight = 1
 
 [[sample]]
   name = "Ander project"
-  url = "/nl/projecten/ander-project/"
+  pageRef = "/projecten/ander-project/"
   parent = "Projecten"
   weight = 2
 # toml-docs-end sample-navigation

exampleSite/config/_default/params.toml

@@ -0,0 +1,201 @@
+[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
+    footerBelowFold = false
+    loading = "lazy"
+    breakpoint = "md"
+    [main.externalLinks]
+        cue = true
+        tab = true
+    [main.build]
+        transpiler = "dartsass"
+
+[modules]
+    core = ["bootstrap", "flexsearch", "fontawesome"]
+    optional = ["leaflet", "katex", "lottie"]
+    excludeSCSS = ["bootstrap"]
+    disableTemplate = ["katex"]
+    [modules.katex]
+        state = "defer"
+    [modules.fontawesome]
+        inline = true
+        debug = true
+        skipMissing = false
+
+[debugging]
+    showJS = false
+    showSCSS = false
+    purgeHTMLComments = true # prevents a Goldmark warning when processing HTML comments (as used by markdownlint)
+
+[docs]
+    basePath = "/" # TODO: replace
+    github = "https://github.com/gethinode/hinode"
+    release = "https://github.com/gethinode/hinode/releases/tag/"
+    checkVersion = false
+
+[home]
+    sections = ["blog", "projects"]
+    fullCover = false
+    centerHeadline = false
+    style = ""
+    [home.feature]
+        orientation = "horizontal"
+        color = "primary"
+        width = 4
+        align = "start"
+
+[navigation]
+    anchor = true
+    logo = "/img/logo_icon.svg"
+    color = "body"
+    fixed = true
+    horizontal = false
+    offset = "5.5rem"
+    search = true
+    searchModal = false
+    breadcrumb = true
+    toc = true
+    sidebar = true
+    size = "md"
+
+[messages]
+    placement = "bottom-right"
+
+[sharing]
+    enabled = true
+    sort = "weight"
+    reverse = false
+    webshare = true
+
+[[sharing.providers]]
+    name = "LinkedIn"
+    url = "https://www.linkedin.com/sharing/share-offsite/?url={url}"
+    icon = "fab linkedin"
+    weight = 10
+
+[[sharing.providers]]
+    name = "Twitter"
+    url = "https://twitter.com/home?status={url}"
+    icon = "fab x-twitter"
+    weight = 20
+
+[[sharing.providers]]
+    name = "Facebook"
+    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
+
+[sections]
+    [sections.blog]
+        title = "Blog"
+        sort = "date"
+        reverse = true
+        cols = 3
+        color = ""
+        padding = "0"
+        header = "full"
+        footer = "none"
+        orientation = "stacked"
+        style = "border-0 card-zoom card-body-margin"
+        homepage = 3
+        separator = true
+    [sections.projects]
+        title = "Projects"
+        layout = "card"
+        sort = "title"
+        reverse = false
+        nested = true
+        cols = 1
+        background = "body-tertiary"
+        color = "body"
+        padding = "3"
+        header = "none"
+        footer = "tags"
+        orientation = "horizontal-sm"
+        style = "border-1 card-emphasize"
+        homepage = 3
+        separator = false
+
+[favicon]
+    logo = "img/favicon.png"
+    sizes = [16, 32, 48]
+
+# toml-docs-start theme-colors
+[style]
+    primary = "#d43900"
+    secondary = "#6c757d"
+    success = "#198754"
+    info = "#0dcaf0"
+    warning = "#ffc107"
+    danger = "#dc3545"
+    light = "#f8f9fa"
+    dark = "#212529"
+    themeOpacity = "10"
+    darkModeShade = "20%"
+    darkModeTint = "40%"
+    themeFont = "Inter"
+    # themeFontPath = "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap" # external path
+    themeFontPath = "/fonts" # local path
+    purge = true
+# toml-docs-end theme-colors
+
+[schema]
+    type = "Organization"
+    name = "Hinode"
+    locale = "en-US"
+    # twitter = "https://twitter.com/gethinode"
+    # linkedIn = ""
+    github = "https://github.com/gethinode/hinode"
+    section = "blog"
+    [author]
+        name = "Mark Dumay"
+        # twitter = "https://twitter.com/markdumay"
+        linkedin = "https://www.linkedin.com/in/markdumay/"
+        github = "https://github.com/markdumay"
+    [logo]
+        url = "img/logo512x512.png"
+        width = 512
+        height = 512
+    [image]
+        url = "img/logo1280x640.png"
+        width = 1280
+        height = 640
+
+[opengraph]
+    images = ["logo.png"]
+    locale = "en_US"
+
+[comments]
+    enabled = false
+    repo = "" # Replace with your repository.
+    #issueTerm = "pathname" # pathname, url, title, og:title
+    #label = "comment"
+    # By default, light and dark mode correspond to github-light and github-dark, respectively.
+    # Optional values: github-light, github-dark, preferred-color-scheme, github-dark-orange, icy-dark, dark-blue, photon-dark.
+    #theme = "" 
+
+[links]
+    bs_badge_heading = "https://getbootstrap.com/docs/5.3/components/badge/#headings"
+    hinode_docs = "https://gethinode.com"
+    hugo_imaging = "https://gohugo.io/content-management/image-processing/#imaging-configuration"
+    mozilla_image = "https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images"
+    observatory = "https://observatory.mozilla.org/analyze/demo.gethinode.com"
+    pagespeed = "https://pagespeed.web.dev/report?url=https%3A%2F%2Fdemo.gethinode.com%2F"
+    utterances = "https://utteranc.es"
+    hinode = "https://gethinode.com"

exampleSite/config/_default/server.toml

@@ -0,0 +1,43 @@
+# toml-docs-start server-config
+[[headers]]
+for = '/**'
+[headers.values]
+    Strict-Transport-Security = "max-age=31536000; includeSubDomains; preload"
+    X-Content-Type-Options = "nosniff"
+    X-XSS-Protection = "1; mode=block"
+    Content-Security-Policy = """\
+        default-src 'self'; \
+        script-src 'self' \
+            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'
+            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' 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' \
+        """
+    X-Frame-Options = "SAMEORIGIN"
+    Referrer-Policy = "strict-origin"
+    Permissions-Policy = """\
+        geolocation=(), \
+        midi=(), \
+        sync-xhr=(), \
+        microphone=(), \
+        camera=(), \
+        magnetometer=(), \
+        gyroscope=(), \
+        fullscreen=(), \
+        payment=() \
+        """
+    cache-control = """\
+        max-age=0, \
+        no-cache, \
+        no-store, \
+        must-revalidate \
+        """
+    Access-Control-Allow-Origin = "*"
+# toml-docs-end server-config

exampleSite/config/ci/hugo.toml

@@ -0,0 +1,22 @@
+# cachedir default on POSIX: '/tmp/hugo_cache_runner'
+# cachedir default on Windows: '~\AppData\Local\hugo_cache'
+
+[caches]
+  [caches.assets]
+    dir = ':cacheDir/resources/_gen' # map to cacheDir instead of resourceDir to utilize GitHub action/cache
+    maxAge = -1
+  [caches.getcsv]
+    dir = ':cacheDir/:project'
+    maxAge = -1
+  [caches.getjson]
+    dir = ':cacheDir/:project'
+    maxAge = -1
+  [caches.getresource]
+    dir = ':cacheDir/:project'
+    maxAge = -1
+  [caches.images]
+    dir = ':cacheDir/resources/_gen' # map to cacheDir instead of resourceDir to utilize GitHub action/cache
+    maxAge = -1
+  [caches.modules]
+    dir = ':cacheDir/modules'
+    maxAge = -1

exampleSite/config/postcss.config.js

@@ -0,0 +1,46 @@
+const autoprefixer = require('autoprefixer')({})
+const cssnano = require('cssnano')({
+  preset: 'advanced'
+})
+const whitelister = require('purgecss-whitelister')
+const purgecss = require('@fullhuman/postcss-purgecss')({
+  content: ['./exampleSite/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/_nav.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/components/_table.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/_modal.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,
+    cssnano,
+    purgecss
+  ]
+}

exampleSite/content/en/_index.md

@@ -0,0 +1,15 @@
+---
+author: Mark Dumay
+title: Welcome to Hinode!
+description: A clean documentation and blog theme for your Hugo site based on Bootstrap 5.
+thumbnail:
+    url: /img/sunrise.jpg
+    author: Harris Vo
+    authorURL: https://unsplash.com/@hoanvokim
+    origin: https://unsplash.com/photos/ZX6BPboJrYk
+    originName: Unsplash
+actions:
+  about:
+    url: "about"
+    title: "About"
+---

exampleSite/content/en/about.md

@@ -0,0 +1,33 @@
+---
+title: About
+description: Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5.
+date: 2022-04-11
+updated: 2023-08-02
+showComments: false
+---
+
+{{< image src="/img/logo_var.svg#logo" class="img-fluid w-50" wrapper="text-center" >}}
+
+{{< card-group class="text-center border-0" padding="3" >}}
+    {{< card title="Bootstrap framework" icon="fab bootstrap" >}}
+        Build fast, responsive sites with Bootstrap 5. Easily customize your site with the source Sass files.
+    {{< /card >}}
+    {{< card title="Full text search" icon="fas magnifying-glass" >}}
+        Search your site with FlexSearch, a full-text search library with zero dependencies.
+    {{< /card >}}
+    {{< card title="Development tools" icon="fas code" >}}
+        Use Node Package Manager to automate the build process and to keep track of dependencies.
+    {{< /card >}}
+{{< /card-group >}}
+
+Additional features include:
+
+* Switching between light mode and dark mode
+* Support for multiple languages
+* Reusable Bootstrap components through configurable shortcodes and partials
+* Versioned documentation, including sidebar navigation and version switcher
+* Embedded comments through light-weight integration with GitHub via [utteranc.es]({{< param "links.utterances" >}})
+* Reponsive image handling for multiple screen sizes and resolutions
+* Optimized search results, scoring 100 points for SEO on [PageSpeed Insights]({{< param "links.pagespeed" >}})
+* Secure by default, scoring A+ on [Mozilla Observatory test]({{< param "links.observatory" >}})
+{.tickmark}

exampleSite/content/en/blog/_index.md

@@ -0,0 +1,5 @@
+---
+author: Mark Dumay
+title: Blog
+nested: true
+---

exampleSite/content/en/blog/bootstrap-elements.md

@@ -1,16 +1,29 @@
 ---
 author: Mark Dumay
 title: Bootstrap elements
-date: 2023-02-17
+date: 2023-08-12
 description: Use shortcodes to add common Bootstrap elements with ease.
 tags: ["bootstrap", "shortcode"]
-thumbnail: img/boots.jpg
+thumbnail:
-photoCredits: <a href="https://unsplash.com/@nate_dumlao">Nathan Dumlao</a>
+  url: img/boots.jpg
-photoSource: <a href="https://unsplash.com/photos/QLPWQvHvmII">Unsplash</a>
+  author: Nathan Dumlao
+  authorURL: https://unsplash.com/@nate_dumlao
+  origin: Unsplash
+  originURL: https://unsplash.com/photos/QLPWQvHvmII
 ---
 
 Hinode provides several shortcodes that wrap common Bootstrap components. Refer to the [official documentation]({{< param "links.hinode_docs" >}}) for more details.
 
+## Abbr
+
+As an example, the following shortcode displays the full text of an abbreviation on hover.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* abbr "CI/CD" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Accordion
 
 As an example, the following shortcode displays an accordion with three elements, of which the first element is expanded.
@@ -19,11 +32,11 @@ As an example, the following shortcode displays an accordion with three elements
 {{< example lang="hugo" >}}
 {{</* accordion */>}}
   {{</* accordion-item header="Accordion Item #1" show="true" */>}}
-    This is the first item's accordion body. It supports HTML content. The item is shown by adding the value
+    This is the first item's accordion body. It supports HTML content, if enabled in the goldmark
-    <code>show</code> to the <code>class</code> argument.
+    renderer. The item is shown by adding the value `show` to the `class` argument.
   {{</* /accordion-item */>}}
   {{</* accordion-item header="Accordion Item #2" */>}}
-    This is the second item's accordion body. It supports HTML content too.
+    This is the second item's accordion body.
   {{</* /accordion-item */>}}
   {{</* accordion-item header="Accordion Item #3" */>}}
     This is the third item's accordion body.
@@ -46,16 +59,29 @@ As an example, the following shortcode displays a simple alert.
 
 ## Badge
 
-Use HTML code to display a badge for a heading. See the Bootstrap [documentation]({{< param "links.bs_badge_heading" >}}) for more options.
+Use the badge shortcode to display a badge for a heading.
 
+<!-- markdownlint-disable MD037 -->
 {{< example >}}
-<h1>Example heading of size one <span class="badge bg-secondary">New</span></h1>
+Heading 1 {{</* badge title="New" */>}}
-<h2>Example heading of size two <span class="badge bg-secondary">New</span></h2>
+{.h1}
-<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>
+Heading 2 {{</* badge title="New" */>}}
-<h5>Example heading of size five <span class="badge bg-secondary">New</span></h5>
+{.h2}
-<h6>Example heading of size six <span class="badge bg-secondary">New</span></h6>
+
+Heading 3 {{</* badge title="New" */>}}
+{.h3}
+
+Heading 4 {{</* badge title="New" */>}}
+{.h4}
+
+Heading 5 {{</* badge title="New" */>}}
+{.h5}
+
+Heading 6 {{</* badge title="New" */>}}
+{.h6}
 {{< /example >}}
+<!-- markdownlint-enable MD037 -->
 
 ## Breadcrumb
 
@@ -99,7 +125,28 @@ As an example, the following shortcode displays a stacked card that links to the
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* card path="about" padding="3" class="w-50" color="body-tertiary" header="publication" footer="none" */>}}
+{{</* card path="about" padding="3" class="col-6 mx-auto" color="body-tertiary" header="publication" footer="none" /*/>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Card group
+
+As an example, the following shortcode displays a card group of three elements.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* card-group padding="3" gutter="3" */>}}
+    {{</* card title="Bootstrap framework" icon="fab bootstrap" */>}}
+        Build fast, responsive sites with Bootstrap 5. Easily customize your site with the source
+        Sass files.
+    {{</* /card */>}}
+    {{</* card title="Full text search" icon="fas magnifying-glass" */>}}
+        Search your site with FlexSearch, a full-text search library with zero dependencies.
+    {{</* /card */>}}
+    {{</* card title="Development tools" icon="fas code" */>}}
+        Use Node Package Manager to automate the build process and to keep track of dependencies.
+    {{</* /card */>}}
+{{</* /card-group */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
@@ -127,8 +174,8 @@ As an example, the following shortcode displays a button that, when clicked, tri
     Trigger panel
 {{</* /button */>}}
 
-{{</* collapse id="collapse-1" class="p-3 border rounded" */>}}
+{{</* collapse id="collapse-1" class="p-3 border rounded bg-primary-subtle" */>}}
-    Some placeholder content for the collapse component. This panel is <i>hidden by default</i> but
+    Some placeholder content for the collapse component. This panel is *hidden by default* but
     revealed when the user activates the relevant trigger.
 {{</* /collapse */>}}
 {{< /example >}}
@@ -170,15 +217,38 @@ Use the `docs` shortcode to display the content of a `js`, `scss` or `toml` file
 
 {{< docs name="theme-colors" file="config/_default/params.toml" >}}
 
+## Example
+
+Use the `example` shortcode to display a code example and to render a preview of the same input.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* command */>}}
+export MY_VAR=123
+{{</* /command */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## File
+
+Use the `file` shortcode to print and highlight the full content of a given input file.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* file path="./config/_default/languages.toml" id="file-collapse-1" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Icon
 
-As an example, the following shortcodes show a square check, a brand logo, and a circle check.
+As an example, the following shortcodes show a square check, a brand logo, a circle check, and a custom icon.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
 {{</* fa square-check */>}}
 {{</* fab linkedin */>}}
 {{</* fas circle-check */>}}
+{{</* icon custom activity */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
@@ -192,6 +262,57 @@ As an example, the following shortcode displays an image with rounded corners an
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
+As an example, the following shortcode displays a regular vector image.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* image src="/img/logo_icon.svg" class="col-sm-6 col-lg-4" wrapper="text-center" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+As an example, the following shortcode displays a vector image with a symbol reference.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* image src="/img/logo_var.svg#logo" class="col-sm-6 col-lg-4" wrapper="text-center" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Link
+
+As an example, the following shortcodes render links in different formats.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+
+- {{</* link hinode >}}Named link with default settings{{< /link */>}}
+- {{</* link name=hinode cue=false tab=false >}}Named link opening in current tab w/o icon{{< /link */>}}
+- {{</* link name=hinode cue=true tab=true >}}Named link opening in new tab with icon{{< /link */>}}
+- {{</* link hinode /*/>}}
+- {{</* link href="https://developer.mozilla.org" >}}External link{{< /link */>}}
+- {{</* link "./projects/another-project" >}}Internal link with title{{< /link */>}}
+- {{</* link url="projects/another-project" /*/>}}
+- {{</* link url="/projects/another-project" /*/>}}
+- {{</* link url="../projects/another-project" case=false /*/>}}
+- {{</* link "about" /*/>}}
+- {{</* link "/fr/a-propos/" /*/>}}
+- {{</* link "/fr/a-propos" >}}About (French){{< /link */>}}
+- {{</* link "#image" /*/>}}
+- {{</* link "components/#map" /*/>}}
+
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Mark
+
+Use the `mark` shortcode to highlight text. The inner content is used as input.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+Use the mark shortcode to {{</* mark >}}highlight{{< /mark */>}} specific text.
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Nav
 
 As an example, the following shortcode displays a tab group with vertically aligned pills.
@@ -200,11 +321,11 @@ As an example, the following shortcode displays a tab group with vertically alig
 {{< example lang="hugo" >}}
   {{</* nav type="pills" vertical="true" */>}}
     {{</* nav-item header="Nav Item #1" show="true" */>}}
-      This is the first item's nav body. It supports HTML content. The item is shown by adding the value
+      This is the first item's nav body. It supports HTML content, if enabled in the goldmark
-      <code>show</code> to the <code>class</code> argument.
+      renderer. The item is shown by adding the value `show` to the `class` argument.
     {{</* /nav-item */>}}
     {{</* nav-item header="Nav Item #2" */>}}
-      This is the second item's nav body. It too supports HTML content.
+      This is the second item's nav body.
     {{</* /nav-item */>}}
     {{</* nav-item header="Nav Item #3" */>}}
       This is the third item's nav body.
@@ -219,7 +340,17 @@ As an example, the following shortcode displays a light navigation header.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* navbar path="about" color="primary" size="md" search="false" menus="sample" title="Brand" mode="false" */>}}
+{{</* navbar id="navbar-sample" path="blog" color="primary" size="md" search="false" menus="sample" title="Brand" mode="false" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Release
+
+As an example, the following shortcode displays a default release button.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* release version="v0.14.1" */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
@@ -235,18 +366,56 @@ Loading...
 {{< /example>}}
 <!-- markdownlint-enable MD037 -->
 
+## Sub
+
+As an example, the following shortcode displays subscript text.
+
+<!-- markdownlint-disable MD037 -->
+{{< example >}}
+H{{</* sub 2 */>}}O is a liquid.
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Sup
+
+As an example, the following shortcode displays superscript text.
+
+<!-- markdownlint-disable MD037 -->
+{{< example >}}
+2{{</* sup 10 */>}} is 1024.
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Timeline
+
+As an example, the following shortcode displays a timeline with the file `data/timeline.en.yml` as data.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* timeline data="timeline" background="dark" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Toast
 
 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" */>}}
+{{</* button toast="toast-example-1" */>}}
-    Show toast
+    Show toast 1
 {{</* /button */>}}
 
-{{</* toast header="Custom title" */>}}
+{{</* button toast="toast-example-2" */>}}
-    This is a toast message.
+    Show toast 2
+{{</* /button */>}}
+
+{{</* toast id="toast-example-1" header="First title" */>}}
+    This is the first toast message. It supports `markdown.`
+{{</* /toast */>}}
+
+{{</* toast id="toast-example-2" header="Second title" */>}}
+    This is the second toast message. It supports `markdown.`
 {{</* /toast */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
@@ -257,8 +426,6 @@ As an example, the following shortcode displays a tooltip for a colored hyperlin
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* tooltip color="primary" title="Tooltip" href="#!" */>}}
+{{</* tooltip color="primary" title="Tooltip caption" href="#!" */>}}Tooltip{{</* /tooltip */>}} demonstration
-    Tooltip demonstration
-{{</* /tooltip */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->

exampleSite/content/en/blog/components.md

@@ -0,0 +1,49 @@
+---
+author: Mark Dumay
+title: Components
+date: 2023-09-23
+description: Use shortcodes to add predefined components powered by external libraries.
+tags: ["bootstrap", "shortcode"]
+thumbnail:
+  url: img/puzzle.jpg
+  author: Ryoji Iwata
+  authorURL: https://unsplash.com/@ryoji__iwata
+  origin: Unsplash
+  originURL: https://unsplash.com/photos/5siQcvSxCP8
+modules: ["katex", "leaflet", "lottie"]
+---
+
+Hinode provides several shortcodes on top of the common [Bootstrap elements]({{< relref "bootstrap-elements" >}}). Refer to the [official documentation]({{< param "links.hinode_docs" >}}) for more details.
+
+## Animation
+
+As an example, the following shortcode shows an animation that plays on hover.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* animation data="gatin.json" auto=false hover=true class="col-6 mx-auto" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Formula (KaTeX)
+
+As an example, the following markdown renders two formulas using the KaTeX typesetting library.
+
+{{< example lang="markdown" >}}
+This is an inline $-b \pm \sqrt{b^2 - 4ac} \over 2a$ formula
+
+This is not an inline formula:
+
+$$x = a_0 + \frac{1}{a_1 + \frac{1}{a_2 + \frac{1}{a_3 + a_4}}}$$  
+$$\forall x \in X, \quad \exists y \leq \epsilon$$
+{{< /example >}}
+
+## Map
+
+As an example, the following shortcode displays an interactive map of the city of Amsterdam.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* map lat=52.377 long=4.90 zoom=13 popup="Amsterdam Central Station" popup-lat=52.378062 popup-long=4.900562 */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->

exampleSite/content/en/blog/first-post.md

@@ -4,9 +4,12 @@ title: First post
 date: 2022-10-01
 description: This is my first blog post.
 tags: ["blog"]
-thumbnail: img/notepad.jpg
+thumbnail:
-photoCredits: <a href="https://unsplash.com/@frederickjmedina">Frederick Medina</a>
+  url: img/notepad.jpg
-photoSource: <a href="https://unsplash.com/photos/PdfRE-xB--s">Unsplash</a>
+  author: Frederick Medina
+  authorURL: https://unsplash.com/@frederickjmedina
+  origin: Unsplash
+  originURL: https://unsplash.com/photos/PdfRE-xB--s
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate, ante in luctus congue, leo risus semper justo, vel consequat sapien lectus quis ipsum. In imperdiet urna justo. Nulla vel pellentesque ipsum. Cras congue feugiat dolor ac aliquam. Pellentesque eget dui venenatis, ultrices urna ac, vehicula nibh. Curabitur est lectus, dapibus eu vehicula non, malesuada et dui. Nam enim nulla, egestas et nunc non, elementum aliquet justo. Mauris euismod mauris sapien, eget vestibulum odio dictum sit amet. Morbi nisl elit, placerat at auctor in, finibus ac neque. Curabitur placerat feugiat risus non vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis cursus est, nec posuere libero.

exampleSite/content/en/blog/fourth-post.md

@@ -0,0 +1,20 @@
+---
+author: Mark Dumay
+title: Fourth post (excluded from search)
+date: 2023-01-01
+description: This is my fourth blog post. It is excluded from the search index.
+tags: ["blog"]
+searchExclude: true
+thumbnail:
+  url: img/flowers.jpg
+  author: Arvee Marie
+  authorURL: https://unsplash.com/@flutterhappy
+  origin: Unsplash
+  originURL: https://unsplash.com/photos/YnfGtpt2gf4
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus libero in felis accumsan, vitae imperdiet metus vehicula. Quisque nec dignissim purus. In id dui porta sapien posuere viverra nec vel nisi. Sed varius tincidunt lectus, quis sagittis felis interdum id. Proin purus odio, ultrices auctor libero convallis, volutpat gravida turpis. Ut commodo metus orci, quis sagittis lectus rhoncus non. Nulla et lectus tortor. Suspendisse quam felis, molestie non odio quis, consequat venenatis orci. Etiam sed turpis sit amet elit scelerisque imperdiet. Sed suscipit felis non nibh suscipit egestas. Nulla sodales libero non rhoncus consequat. Nunc in elit at est cursus congue ut ac velit. Cras luctus libero augue, id semper sapien volutpat ultrices.
+
+Pellentesque sit amet sollicitudin nibh. Cras in dolor eget quam feugiat ultricies in ac lectus. Ut venenatis vitae justo quis pretium. Pellentesque vulputate nulla ac est iaculis vulputate. Proin pellentesque sem nec molestie imperdiet. Duis eu molestie sapien, vel ultricies lacus. Donec in felis tempus, rutrum ipsum at, fermentum felis. Praesent mi odio, semper non vulputate vitae, vulputate quis ex.
+
+Nunc rhoncus eleifend gravida. Aliquam feugiat tristique pellentesque. Pellentesque vel elit sed nulla commodo convallis. Curabitur placerat sapien augue, ac semper metus volutpat non. Sed semper ultricies enim, consequat convallis justo placerat eget. Ut fermentum leo facilisis metus congue commodo. Vestibulum consectetur magna vitae ullamcorper sodales. Nulla lobortis aliquam odio id tincidunt. Suspendisse efficitur auctor tortor non consequat. Quisque sit amet posuere lorem, convallis bibendum nisi. Proin ullamcorper justo tempus dignissim scelerisque. Quisque sit amet sapien libero. Phasellus eget enim velit. Proin ut fermentum dui. Proin gravida tortor in ligula lacinia, id dapibus dui tincidunt. Mauris suscipit nisi et urna consectetur, non venenatis nisi euismod.

exampleSite/content/en/blog/second-post.md

@@ -4,9 +4,12 @@ title: Second post
 date: 2022-11-01
 description: This is my second blog post.
 tags: ["blog"]
-thumbnail: img/phone.jpg # https://picsum.photos/id/160/3200/2119
+thumbnail:
-photoCredits: <a href="https://unsplash.com/@thomweerd">Thom</a> 
+  url: img/phone.jpg
-photoSource: <a href="https://unsplash.com/photos/Zdcq3iKly6g">Unsplash</a>
+  author: Thom
+  authorURL: https://unsplash.com/@thomweerd
+  origin: Unsplash
+  originURL: https://unsplash.com/photos/Zdcq3iKly6g
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sollicitudin sapien. Ut porttitor lectus eu tempor ultricies. Sed semper tincidunt nibh pellentesque condimentum. Vivamus dictum sem eu rhoncus semper. Vestibulum convallis congue tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Mauris magna urna, egestas sit amet ligula quis, viverra semper arcu. Praesent laoreet nunc vitae nulla posuere facilisis.

exampleSite/content/en/blog/third-post.md

@@ -4,9 +4,12 @@ title: Third post
 date: 2022-12-01
 description: This is my third blog post.
 tags: ["blog"]
-thumbnail: https://picsum.photos/id/184/4288/2848.jpg
+thumbnail:
-photoCredits: <a href="https://unsplash.com/@timdegroot">Tim de Groot</a>
+  url: https://picsum.photos/id/184/4288/2848.jpg
-photoSource: <a href="https://unsplash.com/photos/yNGQ830uFB4">Unsplash</a>
+  author: Tim de Groot
+  authorURL: https://unsplash.com/@timdegroot
+  origin: Unsplash
+  originURL: https://unsplash.com/photos/yNGQ830uFB4
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id scelerisque ligula. Vestibulum eu lorem tortor. Suspendisse tristique ultrices mauris, non maximus lorem faucibus in. Suspendisse sagittis eleifend dapibus. Curabitur dignissim luctus sapien eu consequat. Proin congue dui vel ipsum bibendum varius. Pellentesque cursus nisi metus, egestas eleifend ipsum sollicitudin vitae. Sed vitae erat elementum, semper turpis sed, molestie nulla.

exampleSite/content/en/browserconfig.md

@@ -3,4 +3,4 @@ draft: false
 outputs:
 - xml
 url: browserconfig.xml
----
+---

exampleSite/content/en/projects/another-project.md

@@ -4,9 +4,7 @@ title: Another project
 date: 2021-07-15
 description: Another project.
 tags: ["javascript", "golang"]
-thumbnail: img/coffee.jpg # https://picsum.photos/id/1060/5598/3732
+icon: fas rocket
-photoCredits: <a href="https://unsplash.com/@kfred">Karl Fredrickson</a>
-photoSource: <a href="https://unsplash.com/photos/TYIzeCiZ_60">Unsplash</a>
 ---
 
 Vivamus iaculis metus sed magna porta tincidunt. Aliquam molestie eget orci eu elementum. Integer pellentesque dolor sit amet suscipit maximus. Duis consequat, massa vitae volutpat rhoncus, erat augue venenatis velit, a auctor leo nulla nec turpis. Nunc ut libero sapien. Vivamus aliquam ultrices vestibulum. Sed sit amet vestibulum dolor, ut vehicula diam. Sed felis purus, feugiat vitae vulputate quis, sodales vitae dui. Pellentesque volutpat fringilla sapien varius condimentum. Integer odio massa, pharetra at bibendum vitae, aliquam nec erat.

exampleSite/content/en/projects/sample-project.md

@@ -4,9 +4,7 @@ title: Sample project
 date: 2021-07-15
 description: A sample project.
 tags: ["html", "css"]
-thumbnail: img/laptop.jpg # https://picsum.photos/id/0/5616/3744
+icon: fab docker
-photoCredits: <a href="https://unsplash.com/@alejandroescamilla">Alejandro Escamilla</a> 
-photoSource: <a href="https://unsplash.com/photos/yC-Yzbqy7PY">Unsplash</a>
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

exampleSite/content/fr/_index.md

@@ -0,0 +1,15 @@
+---
+author: Mark Dumay
+title: Bienvenue sur Hinode!
+description: Un thème de blog et de documentation pour Hugo basé sur Bootstrap 5.
+thumbnail:
+  url: /img/sunrise.jpg
+  author: Harris Vo
+  authorURL: https://unsplash.com/@hoanvokim
+  origin: https://unsplash.com/photos/ZX6BPboJrYk
+  originName: Unsplash
+actions:
+  about:
+    url: "a-propos"
+    title: "À propos"
+---

exampleSite/content/fr/about.md

@@ -0,0 +1,34 @@
+---
+slug: a-propos
+title: À propos
+description: Un thème de blog et de documentation pour Hugo basé sur Bootstrap 5.
+date: 2023-02-17
+updated: 2023-08-02
+showComments: false
+---
+
+{{< image src="/img/logo_var.svg#logo" class="img-fluid w-50" wrapper="text-center" >}}
+
+{{< card-group class="text-center border-0" padding="3" >}}
+    {{< card title="Framework Bootstrap" icon="fab bootstrap" >}}
+        Créez des sites rapides et réactifs avec Bootstrap 5. Personnalisez facilement votre site avec les fichiers source Sass.
+    {{< /card >}}
+    {{< card title="Recherche en texte intégral" icon="fas magnifying-glass" >}}
+        Recherchez votre site avec FlexSearch, une bibliothèque de recherche en texte intégral avec zéro dépendances.
+    {{< /card >}}
+    {{< card title="Outils de développement" icon="fas code" >}}
+        Utilisez Node Package Manager pour automatiser le processus de construction et suivre les dépendances.
+    {{< /card >}}
+{{< /card-group >}}
+
+Les fonctionnalités supplémentaires incluent:
+
+- Passer du mode clair au mode sombre
+- Prise en charge de plusieurs langues
+- Composants bootstrap réutilisables à travers des codes et partiels configurables
+- Documentation versionnée, incluant une navigation latérale et un sélecteur de version.
+- Commentaires intégrés via une intégration légère avec GitHub via [utteranc.es]({{< param "links.utterances" >}})
+- Gestion d'images adaptatives pour plusieurs tailles d'écran et résolutions.
+- Résultats de recherche optimisés, obtenant un score de 100 points pour le référencement (SEO) sur [PageSpeed Insights]({{< param "links.pagespeed" >}}).
+- Sécurisé par défaut, obtenant un score A+ au test [Mozilla Observatory]({{< param "links.observatory" >}})
+{.tickmark}