Merge pull request #134 from gethinode/develop

Refinement

.eslintignore

@@ -1,3 +1,3 @@
-assets/js/index.js
+assets/js/flexsearch.js
 assets/js/vendor
 node_modules

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,36 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: "[BUG]"
+labels: bug
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Log file**
+If applicable, add a copy of Hugo's log messages.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Environment (please complete the following information):**
+ - Host OS: [e.g. macOS Ventura 13.0]
+ - Node version: [e.g. node v18.10.0]
+ - Hugo version: [e.g. hugo v0.109.0-47b12b83e636224e5e601813ff3e6790c191e371+extended darwin/amd64 BuildDate=2022-12-23T10:38:11Z VendorInfo=gohugoio]
+ - Browser: [e.g. Google Chrome Version 108.0.5359.124 (Official Build) (arm64)]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: enhancement
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/dependabot.yml

@@ -0,0 +1,9 @@
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "daily"

.github/workflows/build.yml

@@ -0,0 +1,28 @@
+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

.markdownlint-cli2.jsonc

@@ -5,7 +5,9 @@
     "MD024": false,
     "MD026": false,
     "MD033": false,
-    "MD034": false
+    "MD034": false,
+    "MD051": false,
+    "MD053": false
   },
   "ignores": ["node_modules", "CHANGELOG.md"]
 }

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Mark Dumay
+Copyright (c) 2023 Mark Dumay
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -2,29 +2,32 @@
 
 <!-- Tagline -->
 <p align="center">
-    <b>A clean blog theme for your Hugo site based on Bootstrap 5</b>
+    <b>A clean documentation and blog theme for your Hugo site based on Bootstrap 5</b>
     <br />
 </p>
 
 <!-- Badges -->
 <p align="center">
+    <a href="https://gohugo.io" alt="Hugo website">
+        <img src="https://img.shields.io/badge/generator-hugo-brightgreen" />
+    </a>
     <a href="https://app.netlify.com/sites/hinode-demo/deploys" alt="Netlify Status">
         <img src="https://img.shields.io/netlify/151e88a3-d161-4045-856d-778fea43fc2f" />
     </a>
     <a href="https://stats.uptimerobot.com/xyGVYhLJmV" alt="UptimeRobot Status">
         <img src="https://img.shields.io/uptimerobot/status/m791334689-73d9dfc82030f4f955b2d6bb" />
     </a>
-    <a href="https://github.com/markdumay/hugo-theme-hinode/commits/main" alt="Last commit">
-        <img src="https://img.shields.io/github/last-commit/markdumay/hugo-theme-hinode.svg" />
+    <a href="https://github.com/gethinode/hinode/commits/main" alt="Last commit">
+        <img src="https://img.shields.io/github/last-commit/gethinode/hinode.svg" />
     </a>
-    <a href="https://github.com/markdumay/hugo-theme-hinode/issues" alt="Issues">
-        <img src="https://img.shields.io/github/issues/markdumay/hugo-theme-hinode.svg" />
+    <a href="https://github.com/gethinode/hinode/issues" alt="Issues">
+        <img src="https://img.shields.io/github/issues/gethinode/hinode.svg" />
     </a>
-    <a href="https://github.com/markdumay/hugo-theme-hinode/pulls" alt="Pulls">
-        <img src="https://img.shields.io/github/issues-pr-raw/markdumay/hugo-theme-hinode.svg" />
+    <a href="https://github.com/gethinode/hinode/pulls" alt="Pulls">
+        <img src="https://img.shields.io/github/issues-pr-raw/gethinode/hinode.svg" />
     </a>
-    <a href="https://github.com/markdumay/hugo-theme-hinode/blob/main/LICENSE" alt="License">
-        <img src="https://img.shields.io/github/license/markdumay/hugo-theme-hinode" />
+    <a href="https://github.com/gethinode/hinode/blob/main/LICENSE" alt="License">
+        <img src="https://img.shields.io/github/license/gethinode/hinode" />
     </a>
 </p>
 
@@ -41,13 +44,13 @@
 
 ## About
 
-![Logo](https://raw.githubusercontent.com/markdumay/hugo-theme-hinode/main/static/logo.png)
+![Logo](https://raw.githubusercontent.com/gethinode/hinode/main/static/img/logo.png)
 
 - [Online Demo][demo]
 - [PageSpeed Insights][pagespeed]
 - [Mozilla Observatory][observatory]
 
-Hinode is a clean 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 uses [Node Package Manager][npm] to automate the build process and to keep track of dependencies.
 
 Additional features include:
 
@@ -55,8 +58,9 @@ Additional features include:
 - Social links
 - Blog pagination
 - Code highlighting
+- Command prompt
 - Color customization
-- i18n support
+- Language switcher
 
 <!-- TODO: add tutorial deep-link 
 Detailed background information is available on the author's [personal blog][blog].
@@ -72,20 +76,20 @@ Start a new Hinode project in three steps:
 
 ### 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 the Hinode theme. As such, it is less applicable if you plan to customize a lot. Vice versa, the main theme allows for heavy customization, but is not synchronized with the latest available Hinode theme automatically.
+Hinode is available as a [child theme][repository_child], and a [main theme][repository]. The child theme uses [npm][npm] to link to the latest available version of Hinode. As such, it is less applicable if you plan to customize a lot. Vice versa, the main theme allows for heavy customization, but is not synchronized with the latest available Hinode theme automatically.
 
 Not quite sure? Use the Hinode child theme.
 
 #### Hinode child theme
 
 ```bash
-git clone https://github.com/markdumay/hugo-theme-hinode-child.git my-hinode-site && cd my-hinode-site
+git clone https://github.com/gethinode/child.git my-hinode-site && cd my-hinode-site
 ```
 
 #### Hinode main theme
 
 ```bash
-git clone https://github.com/markdumay/hugo-theme-hinode.git my-hinode-site && cd my-hinode-site
+git clone https://github.com/gethinode/hinode.git my-hinode-site && cd my-hinode-site
 ```
 
 ### 2. Install dependencies
@@ -106,16 +110,16 @@ The main site configuration is available in `./config/_default`. Some remarks:
 
 - **Menu items** - `menus/menus.en.toml` contains language-specific items for the navigation bar and social media links for the home page's footer.
 - **Content** - Ensure the `mainSections` in `config.toml` is synchronized with the `content` folder, default values are `["blog", "projects"]`.
-- **Theme color** - Update `themeColor` and `themeOpacity` within the `[style]` section of `params.toml` to update the site's primary color and opacity. You can use the [WCAG Color Contrast Checker][contrast_checker] to validate the contrast ratio of your color to improve accessibility.
+- **Theme style** - Update `primary` and `themeOpacity` within the `[style]` section of `params.toml` to update the site's primary color and opacity. Bootstrap's other key colors can be changed too. You can use the [WCAG Color Contrast Checker][contrast_checker] to validate the contrast ratio of your color to improve accessibility. Additionally, set `themeFont` and `themeFontPath` to override the default font.
 - **Comments** - Comments are powered by [utterances][utterances], a lightweight comments widget built on GitHub issues. Update the `repo`  of the `[comments]` section of `params.toml`.
-- **Security headings** - The local development server uses the header configuration as provided by `server.toml`. Similar settings are defined in the `netlify.toml` file provided in the repository's root when deploying to [Netlify][netlify].
+- **Security policy** - The theme uses rather strict security policies by default. Be sure to include references to external sources in the header configuration to avoid broken links. The settings of the local development server are defined in `server.toml`. Similar settings are defined in the `netlify.toml` file provided in the repository's root when deploying to [Netlify][netlify].
 
 ## Contributing
 
 1. Clone the repository and create a new branch
 
     ```console
-    git checkout https://github.com/markdumay/hugo-theme-hinode.git -b name_for_new_branch
+    git checkout https://github.com/gethinode/hinode.git -b name_for_new_branch
     ```
 
 2. Make and test the changes
@@ -123,7 +127,7 @@ The main site configuration is available in `./config/_default`. Some remarks:
 
 ## Credits
 
-The Hinode theme is inspired by the following themes:
+Hinode is inspired by the following themes:
 
 - [Blist][blist] - a clean and fast blog theme for your Hugo site using Tailwind CSS.
 - [Doks][doks] - a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize.
@@ -134,7 +138,7 @@ The Hinode theme is inspired by the following themes:
 
 ## License
 
-The `hugo-theme-hinode` and `hugo-theme-hinode-child` codebase is released under the [MIT license][license]. The documentation (including the "README") is licensed under the Creative Commons ([CC BY-NC 4.0)][cc-by-nc-4.0] license.
+The `hinode` and `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.
 
 <!-- MARKDOWN PUBLIC LINKS -->
 [blist]: https://github.com/apvarun/blist-hugo-theme
@@ -148,8 +152,8 @@ The `hugo-theme-hinode` and `hugo-theme-hinode-child` codebase is released under
 [netlify]: https://www.netlify.com
 [nodejs]: https://nodejs.org
 [npm]: https://www.npmjs.com
-[observatory]: https://observatory.mozilla.org/analyze/hinode-demo.markdumay.org
-[pagespeed]: https://pagespeed.web.dev/report?url=https%3A%2F%2Fhinode-demo.markdumay.org%2F
+[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
 
 <!-- MARKDOWN MAINTAINED LINKS -->
@@ -157,7 +161,7 @@ The `hugo-theme-hinode` and `hugo-theme-hinode-child` codebase is released under
 [blog]: https://markdumay.com
 [blog]: https://github.com/markdumay
 -->
-[demo]: https://hinode-demo.markdumay.org/
-[license]: https://github.com/markdumay/hugo-theme-hinode/blob/main/LICENSE
-[repository]: https://github.com/markdumay/hugo-theme-hinode.git
-[repository_child]: https://github.com/markdumay/hugo-theme-hinode-child.git
+[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

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

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

assets/icons/accordion-button-icon.svg

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

assets/icons/btn-close-bg.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='{{ .btn_close_color }}'>
+    <path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/>
+</svg>

assets/icons/btn-toggle.svg

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

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

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

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

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='{{ .carousel_control_color }}'>
+    <path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/>
+</svg>

assets/icons/form-check-input-checked-bg-image.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
+    <path fill='none' stroke='{{ .form_check_input_checked_color }}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
+</svg>

assets/icons/form-check-input-indeterminate-bg-image.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
+    <path fill='none' stroke='{{ .form_check_input_indeterminate_color }}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
+</svg>

assets/icons/form-check-radio-checked-bg-image.svg

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

assets/icons/form-feedback-icon-invalid.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='{{ .form_feedback_icon_invalid_color }}'>
+    <circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='{{ .form_feedback_icon_invalid_color }}' stroke='none'/>
+</svg>

assets/icons/form-feedback-icon-valid.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'>
+    <path fill='{{ .form_feedback_icon_valid_color }}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/>
+</svg>

assets/icons/form-select-indicator.svg

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

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

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

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

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

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

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

assets/icons/navbar-dark-toggler-icon-bg.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'>
+    <path stroke="{{ .navbar_dark_color }}" stroke-opacity="0.55" stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/>
+</svg>

assets/icons/navbar-light-toggler-icon-bg.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'>
+    <path stroke='{{ .navbar_light_icon_color }}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/>
+</svg>

assets/js/bootstrap.js

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

assets/js/clipboard.js

@@ -0,0 +1,38 @@
+/*
+Source:
+  - https://simplernerd.com/hugo-add-copy-to-clipboard-button/
+*/
+
+const svgCopy =
+  '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>'
+const svgCheck =
+  '<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" fill="rgb(63, 185, 80)" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>'
+
+const addCopyButtons = (clipboard) => {
+  // 1. Look for pre > code elements in the DOM
+  document.querySelectorAll('pre > code').forEach((codeBlock) => {
+    // 2. Create a button that will trigger a copy operation
+    const button = document.createElement('button')
+    button.className = 'clipboard-button'
+    button.type = 'button'
+    button.innerHTML = svgCopy
+    button.addEventListener('click', () => {
+      clipboard.writeText(codeBlock.innerText).then(
+        () => {
+          button.blur()
+          button.innerHTML = svgCheck
+          setTimeout(() => (button.innerHTML = svgCopy), 2000)
+        },
+        // eslint-disable-next-line n/handle-callback-err
+        (error) => (button.innerHTML = 'Error')
+      )
+    })
+    // 3. Append the button directly before the pre tag
+    const pre = codeBlock.parentNode
+    pre.parentNode.insertBefore(button, pre)
+  })
+}
+
+if (navigator && navigator.clipboard) {
+  addCopyButtons(navigator.clipboard)
+}

assets/js/flexsearch.js

@@ -0,0 +1,161 @@
+/*
+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/index.js

@@ -1,196 +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',
-      store: [
-        "href", "title", "description"
-      ],
-      index: ["title", "description", "content"]
-    }
-  });
-
-  // https://discourse.gohugo.io/t/range-length-or-last-element/3803/2
-
-  {{ $list := (site.RegularPages) -}}
-  {{ $len := (len $list) -}}
-
-  index.add(
-    {{ range $index, $element := $list -}}
-      {
-        id: {{ $index }},
-        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;
-    var results = index.search(searchQuery, {limit: maxResult, enrich: true});
-
-    // flatten results since index.search() returns results for each indexed field
-    const flatResults = new Map(); // keyed by href to dedupe results
-    for (const result of results.flatMap(r => r.result)) {
-      if (flatResults.has(result.doc.href)) continue;
-      flatResults.set(result.doc.href, result.doc);
-    }
-
-    suggestions.innerHTML = "";
-    suggestions.classList.remove('d-none');
-
-    // inform user that no results were found
-    if (flatResults.size === 0 && searchQuery) {
-      const noResultsMessage = document.createElement('div')
-      noResultsMessage.innerHTML = `{{ 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.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;
-    }
-  }
-}());
-
-
-/*
-Source:
-  - https://simplernerd.com/hugo-add-copy-to-clipboard-button/
-*/
-
-const svgCopy =
-  '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>';
-const svgCheck =
-  '<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" fill="rgb(63, 185, 80)" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>';
-
-const addCopyButtons = (clipboard) => {
-    // 1. Look for pre > code elements in the DOM
-    document.querySelectorAll("pre > code").forEach((codeBlock) => {
-      // 2. Create a button that will trigger a copy operation
-      const button = document.createElement("button");
-      button.className = "clipboard-button";
-      button.type = "button";
-      button.innerHTML = svgCopy;
-      button.addEventListener("click", () => {
-        clipboard.writeText(codeBlock.innerText).then(
-          () => {
-            button.blur();
-            button.innerHTML = svgCheck;
-            setTimeout(() => (button.innerHTML = svgCopy), 2000);
-          },
-          (error) => (button.innerHTML = "Error")
-        );
-      });
-      // 3. Append the button directly before the pre tag
-      const pre = codeBlock.parentNode;
-      pre.parentNode.insertBefore(button, pre);
-    });
-  };
-  
-  if (navigator && navigator.clipboard) {
-    addCopyButtons(navigator.clipboard);
-  }

assets/js/popover.js

@@ -0,0 +1,3 @@
+const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
+// eslint-disable-next-line no-undef, no-unused-vars
+const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

assets/js/toast.js

@@ -0,0 +1,10 @@
+// Bootstrap toast example: https://getbootstrap.com/docs/5.2/components/toasts/
+const toastTrigger = document.getElementById('toastButton')
+const toastLiveExample = document.getElementById('toastMessage')
+if (toastTrigger) {
+  toastTrigger.addEventListener('click', () => {
+    // eslint-disable-next-line no-undef
+    const toast = new bootstrap.Toast(toastLiveExample)
+    toast.show()
+  })
+}

assets/js/tooltip.js

@@ -0,0 +1,4 @@
+// Bootstrap tooltip example: https://getbootstrap.com/docs/5.2/components/tooltips/
+const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+// eslint-disable-next-line no-unused-vars, no-undef
+const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

assets/scss/app.scss

@@ -1,11 +1,26 @@
 // Define template variables
+// TODO: optimize, see https://discourse.gohugo.io/t/initialize-sass-variables-from-hugo-templates/42053
+//       requires installation of dart-sass, no cross-platform installation available yet
 $themeColor:                    {{ site.Params.style.themeColor | default "#007bff" }};
-
-// Import Bootstrap functions
-@import "bootstrap/scss/functions";
+$themeFont:                     {{ site.Params.style.themeFont | default "Inter" }};
+$primary:                       {{ site.Params.style.primary | default "#007bff" }};
+$secondary:                     {{ site.Params.style.secondary | default "#6c757d" }};
+$success:                       {{ site.Params.style.success | default "#198754" }};
+$info:                          {{ site.Params.style.info | default "#0dcaf0" }};
+$warning:                       {{ site.Params.style.warning | default "#ffc107" }};
+$danger:                        {{ site.Params.style.danger | default "#dc3545" }};
+$light:                         {{ site.Params.style.light | default "#f8f9fa" }};
+$dark:                          {{ site.Params.style.dark | default "#212529" }};
+$navbar-offset:                 {{ if site.Params.navigation.fixed }}{{ site.Params.navigation.offset | default "4em" }}{{ else }}0em{{ end }};
 
 // Include default variable overrides
 @import "common/variables.scss";
+@import "common/icons.scss";
+
+// Import Bootstrap banner and functions
+@import "bootstrap/scss/mixins/banner";
+@include bsBanner("");
+@import "bootstrap/scss/functions";
 
 // Import Bootstrap configuration
 @import "bootstrap/scss/variables";
@@ -53,21 +68,34 @@ $themeColor: {{ site.Params.style.themeColor | default "#007bff" }};
 @import "bootstrap/scss/utilities/api";
 
 // Import Font Awesome
+// scss-docs-start awesome
 @import "@fortawesome/fontawesome-free/scss/fontawesome";
+@import "@fortawesome/fontawesome-free/scss/regular";
 @import "@fortawesome/fontawesome-free/scss/solid";
 @import "@fortawesome/fontawesome-free/scss/brands";
+// scss-docs-end awesome
 
-// Import theme styles
+// Import Hinode theme styles
 @import "components/blockquote.scss";
 @import "components/buttons.scss";
 @import "components/card.scss";
+@import "components/carousel.scss";
 @import "components/clipboard.scss";
+@import "components/command.scss";
 @import "components/comments.scss";
 @import "components/navbar.scss";
 @import "components/img.scss";
+@import "components/popover.scss";
 @import "components/search.scss";
+@import "components/sidebar.scss";
 @import "components/syntax.scss";
+@import "components/toc.scss";
 @import "components/vimeo.scss";
 @import "common/styles.scss";
 @import "layouts/reboot.scss";
 @import "layouts/type.scss";
+@import "common/export.scss";
+@import "helpers/colored-links.scss";
+
+// Import theme placeholder
+@import "theme.scss";

assets/scss/common/_export.scss

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

assets/scss/common/_icons.scss

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

assets/scss/common/_styles.scss

@@ -15,44 +15,6 @@ a:active {
     min-height: 100vh;
 }
 
-//
-// Table of contents sidebar
-//
-.toc {
-    grid-area: toc;
-    top: 5rem;
-    right: 0;
-    z-index: 2;
-    height: calc(100vh - 7rem);
-    overflow-y: auto;
-}
-
-.toc nav {
-    font-size: 0.875rem;
-}
-
-.toc nav ul {
-    padding-left: 0;
-    list-style: none;
-}
-
-.toc nav ul ul {
-    padding-left: 1rem;
-    margin-top: 0.25rem;
-}
-
-.toc nav li {
-    margin-bottom: 0.25rem;
-}
-
-.toc nav a {
-    color: inherit;
-}
-
-.toc nav a:not(:hover) {
-    text-decoration: none;
-}
-
-.toc nav a code {
-    font: inherit;
+.tickmark li::marker {
+    content: "✓ ";
 }

assets/scss/common/_variables.scss

@@ -1,5 +1,4 @@
 // Bootstrap variables overrides for theme
-$primary:                       $themeColor;
 $enable-negative-margins:       true;
 
 // Font awesome variables overrides for theme
@@ -8,10 +7,19 @@ $fa-font-path:                  "../fonts";
 // Remove the border from the focused navigation toggler
 $navbar-toggler-focus-width:    0 !default;
 
-$font-family-sans-serif:        "Inter", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+// scss-docs-start font
+$font-family-sans-serif:        $themeFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $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 !important;
+}
+// scss-docs-end font
+
+$black:                       #000 !default;
+$btn-toggle-color:              $black !default;

assets/scss/components/_card.scss

@@ -31,12 +31,12 @@
     opacity: 1;
 }
 
-.project-card {
+.card-emphasize {
     transition: 0.3s transform cubic-bezier(0.155, 1.105, 0.295, 1.12), 0.3s box-shadow, 0.3s -webkit-transform cubic-bezier(0.155, 1.105, 0.295, 1.12);
     cursor: pointer;
 }
 
-.project-card:hover {
+.card-emphasize:hover {
     transform: scale(1.01);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
 }

assets/scss/components/_carousel.scss

@@ -0,0 +1,8 @@
+.gradient {
+    width: 100%;
+    height: 100%;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.3);
+}

assets/scss/components/_command.scss

@@ -0,0 +1,43 @@
+/* Adapted from PrismJS 1.29.0
+https://prismjs.com/download.html#themes=prism&plugins=command-line */
+
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+.command-line-prompt {
+    border-right: 1px solid #999;
+    display: block;
+    float: left;
+    font-size: 100%;
+    letter-spacing: -1px;
+    margin-right: 1em;
+    pointer-events: none;
+    text-align: right;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.command-line-prompt > span::before {
+    opacity: 0.7;
+    content: " ";
+    display: block;
+    padding-right: 0.8em;
+}
+
+.command-line-prompt > span[data-prompt]::before {
+    content: attr(data-prompt);
+}
+
+.command-line-prompt > span[data-continuation-prompt]::before {
+    content: attr(data-continuation-prompt);
+}
+
+.command-line span.token.output {
+    /* Make shell output lines a bit lighter to distinguish them from shell commands */
+    opacity: 0.7;
+}

assets/scss/components/_img.scss

@@ -8,3 +8,9 @@
     width: 100%;
     object-fit: cover;
 }
+
+.card-img-h100 {
+    width: auto;
+    height: 100%;
+    object-fit: cover;
+}

assets/scss/components/_popover.scss

@@ -0,0 +1,3 @@
+.popover-header {
+    margin-top: 0;
+}

assets/scss/components/_sidebar.scss

@@ -0,0 +1,54 @@
+// scss-docs-start sidebar
+.sidebar {
+    top: $navbar-offset;
+}
+
+.btn-toggle {
+    padding: 0.25rem 0.5rem;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.65);
+    background-color: transparent;
+
+    &:hover,
+    &:focus {
+        color: rgba(0, 0, 0, 0.85);
+        background-color: tint-color($primary, 90%);
+    }
+
+    &::before {
+        width: 1.25em;
+        line-height: 0;
+        content: $btn-toggle;
+        transition: transform 0.35s ease;
+        transform-origin: 0.5em 50%;
+    }
+}
+
+// scss-docs-end sidebar
+
+.btn-toggle[aria-expanded="true"] {
+    color: rgba(0, 0, 0, 0.85);
+
+    &::before {
+        transform: rotate(90deg);
+    }
+}
+
+.btn-toggle-nav a {
+    padding: 0.1875rem 0.5rem;
+    margin-top: 0.125rem;
+    margin-left: 1.25rem;
+
+    &:hover,
+    &:focus {
+        background-color: tint-color($primary, 90%);
+    }
+
+    &.active {
+        font-weight: bold;
+    }
+}
+
+.dropdown-toggle {
+    outline: 0;
+}

assets/scss/components/_syntax.scss

@@ -1,8 +1,9 @@
-/* Background */ .bg { color: #272822; background-color: #fafafa }
-/* PreWrapper */ .chroma { color: #272822; background-color: #fafafa; }
+/* Background */ .bg { color: #272822; }
+/* PreWrapper */ .chroma { color: #272822 }
 /* Other */ .chroma .x {  }
-/* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
+/* Error */ .chroma .err { color: #960050 }
 /* CodeLine */ .chroma .cl {  }
+/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
 /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
 /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
 /* LineHighlight */ .chroma .hl { background-color: #ffffcc }

assets/scss/components/_toc.scss

@@ -0,0 +1,44 @@
+//
+// Table of contents sidebar
+//
+// scss-docs-start toc
+.toc {
+    grid-area: toc;
+    right: 0;
+    z-index: 2;
+    height: calc(100vh - 7rem);
+    overflow-y: auto;
+    top: $navbar-offset;
+}
+
+// scss-docs-end toc
+
+.toc nav {
+    font-size: 0.875rem;
+}
+
+.toc nav ul {
+    padding-left: 0;
+    list-style: none;
+}
+
+.toc nav ul ul {
+    padding-left: 1rem;
+    margin-top: 0.25rem;
+}
+
+.toc nav li {
+    margin-bottom: 0.25rem;
+}
+
+.toc nav a {
+    color: inherit;
+}
+
+.toc nav a:not(:hover) {
+    text-decoration: none;
+}
+
+.toc nav a code {
+    font: inherit;
+}

assets/scss/helpers/_colored-links.scss

@@ -0,0 +1,21 @@
+// stylelint-disable function-name-case
+
+// scss-docs-start colored-links
+@each $color, $value in $theme-colors {
+    $contrast-color: color-contrast($value);
+    $color-rgb: to-rgb($value);
+
+    .link-bg-#{$color} {
+        color: $contrast-color !important; // stylelint-disable-line declaration-no-important
+        background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null); // stylelint-disable-line annotation-no-unknown
+
+        @if $link-shade-percentage != 0 {
+            &:hover,
+            &:focus {
+                color: if($contrast-color == $color-contrast-light, shade-color($contrast-color, $link-shade-percentage), tint-color($contrast-color, $link-shade-percentage)) !important; // stylelint-disable-line declaration-no-important
+            }
+        }
+    }
+}
+
+// scss-docs-end colored-links

assets/scss/layouts/_reboot.scss

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

assets/scss/layouts/_type.scss

@@ -3,24 +3,30 @@
 //
 h1 {
     margin-top: $spacer * 2.5;
+    scroll-margin-top: $navbar-offset;
 }
 
 h2 {
     margin-top: $spacer * 2;
+    scroll-margin-top: $navbar-offset;
 }
 
 h3 {
     margin-top: $spacer * 1.75;
+    scroll-margin-top: $navbar-offset;
 }
 
 h4 {
     margin-top: $spacer * 1.5;
+    scroll-margin-top: $navbar-offset;
 }
 
 h5 {
     margin-top: $spacer * 1.25;
+    scroll-margin-top: $navbar-offset;
 }
 
 h6 {
     margin-top: $spacer;
+    scroll-margin-top: $navbar-offset;
 }

assets/scss/theme.scss

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

config/_default/config.toml

@@ -1,25 +1,30 @@
-baseURL = "https://hinode-demo.markdumay.org/"
-canonifyURLs = false
-
+# toml-docs-start main
 title = "Hinode"
-author = "Mark Dumay"
-copyright = "Copyright © 2022 Mark Dumay."
+copyright = "Copyright © 2023 Mark Dumay."
 paginate = 9
+enableGitInfo = true
+# toml-docs-end main
+
+# additional settings
+baseURL = "https://demo.gethinode.com/"
+canonifyURLs = false
+enableEmoji = true
 enableRobotsTXT = true
-languageCode = "en-us"
 enableInlineShortcodes = true
+
 # 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"]
-enableEmoji = true
 
-# Multilingual
+# toml-docs-start build
+timeout = "60s"
+# toml-docs-end build
+
+# toml-docs-start language
+languageCode = "en-us"
 defaultContentLanguage = "en"
-disableLanguages = ["nl"]
-
-
-
-mainSections = ["blog", "projects"]
+defaultContentLanguageInSubdir = true
+# toml-docs-end language
 
 [taxonomies]
   tag = 'tags'
@@ -48,7 +53,6 @@ mainSections = ["blog", "projects"]
   [services.twitter]
     disableInlineCSS = true
 
-
 [outputFormats]
   [outputFormats.XML]
     isPlainText = false
@@ -69,6 +73,13 @@ mainSections = ["blog", "projects"]
   [[module.mounts]]
     source = "static"
     target = "static"
+# toml-docs-start javascript
   [[module.mounts]]
-    source = "node_modules/flexsearch"
+    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

config/_default/languages.toml

@@ -1,12 +1,31 @@
+# toml-docs-start lang-main
 [en]
     languageName = "English"
     contentDir = "content/en"
     weight = 1
-    [en.params]
-        introTitle = "Welcome to Hinode!"
-        introCaption = "A clean blog theme for your Hugo site based on Bootstrap 5."
-        introLink = "/about"
-        introLinkTitle = "About"
+# toml-docs-end lang-main
+# toml-docs-start lang-param
+    [en.params.head]
+        tagline = "A Hugo Theme"
+    [en.params.feature]
+        link = "/en/about"
+        caption = "About"
+    [en.params.footer]
         license = "Licensed under Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank'>CC BY-NC-SA 4.0</a>)."
         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

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

config/_default/menus/menus.en.toml

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

config/_default/menus/menus.nl.toml

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

config/_default/params.toml

@@ -1,56 +1,109 @@
-## Homepage
-title = "Hinode"
-titleSeparator = "-"
-titleAddition = "Clean Blog Theme"
-description = "Hinode is a clean blog theme for your Hugo site based on Bootstrap 5."
+# toml-docs-start main
+[main]
+    separator = "-"
+    description = "Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5."
+# toml-docs-end main
 
-## Open Graph
-images = ["logo.png"]
-ogLocale = "en_US"
-domainTLD = "hinode-demo.markdumay.org"
+# toml-docs-start docs
+[docs]
+    version = "0.8"
+    basePath = ""
+# toml-docs-end docs
 
-## Twitter Cards
-# twitterSite = "@gethinode"
-# twitterCreator = "@markdumay"
+# toml-docs-start home
+[home]
+    sections = ["blog", "projects"]
+    featurePhoto = "/img/sunrise.jpg" # source: https://unsplash.com/photos/ZX6BPboJrYk
+    fullCover = false
+# toml-docs-end home
 
-## JSON-LD
-schemaType = "Organization"
-schemaName = "Hinode"
-schemaAuthor = "Mark Dumay"
-schemaAuthorTwitter = "https://twitter.com/markdumay"
-schemaAuthorLinkedIn = "https://www.linkedin.com/in/markdumay/"
-schemaAuthorGitHub = "https://github.com/markdumay"
-schemaLocale = "en-US"
-schemaLogo = "logo512x512.png"
-schemaLogoWidth = 512
-schemaLogoHeight = 512
-schemaImage = "logo1280x640.png"
-schemaImageWidth = 1280
-schemaImageHeight = 640
-# schemaTwitter = "https://twitter.com/gethinode"
-# schemaLinkedIn = ""
-schemaGitHub = "https://github.com/markdumay/hugo-theme-hinode"
-schemaSection = "blog"
+# toml-docs-start navigation
+[navigation]
+    logo = "/img/logo_embedded.svg"
+    color = "white"
+    style = "light"
+    fixed = true
+    offset = "4em"
+    search = true
+    breadcrumb = false
+    toc = true
+    sidebar = true
+# toml-docs-end navigation
 
+# toml-docs-start list
+[list]
+    [blog]
+        title = "Blog"
+        sort = "date"
+        reverse = false
+        cols = 3
+        color = ""
+        padding = "0"
+        header = "full"
+        footer = "none"
+        orientation = "stacked"
+        style = "border-0"
+        homepage = 3
+    [projects]
+        title = "Projects"
+        sort = "title"
+        reverse = false
+        cols = 1
+        color = ""
+        padding = "3"
+        header = "none"
+        footer = "tags"
+        orientation = "none"
+        style = "border-1 card-emphasize"
+        homepage = 3
+# toml-docs-end list
 
 [favicon]
     logo = "img/favicon.png"
     sizes = [16, 32, 48]
 
-[search]
-    enabled = true
-
-[toc]
-    enabled = true
-
+# toml-docs-start theme-colors
 [style]
-    themeColor = "#D43900" #00b0f0
+    primary = "#D43900"
+    secondary = "#6c757d"
+    success = "#198754"
+    info = "#0dcaf0"
+    warning = "#ffc107"
+    danger = "#dc3545"
+    light = "#f8f9fa"
+    dark = "#212529"
+# toml-docs-end theme-colors
     themeOpacity = "10"
+# toml-docs-start font
+    themeFont = "Inter"
+    themeFontPath = "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap"
+# toml-docs-end font
 
-[main]
-    featurePhoto = "img/sunrise.jpg" # source: https://unsplash.com/photos/ZX6BPboJrYk
-    logo = "/logo_embedded.svg"
+[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
@@ -60,3 +113,80 @@ schemaSection = "blog"
     # 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]
+    azure = "https://azure.microsoft.com"
+    az_blob_domain = "https://learn.microsoft.com/en-us/azure/storage/blobs/storage-custom-domain-name"
+    az_blob_pricing = "https://azure.microsoft.com/en-us/free"
+    az_cdn_rules = "https://learn.microsoft.com/en-us/azure/cdn/cdn-standard-rules-engine-reference"
+    blist = "https://github.com/apvarun/blist-hugo-theme"
+    bootstrap = "https://getbootstrap.com"
+    bs_badge_heading = "https://getbootstrap.com/docs/5.2/components/badge/#headings"
+    bs_breakpoints = "https://getbootstrap.com/docs/5.3/layout/breakpoints"
+    bs_grid = "https://getbootstrap.com/docs/5.3/layout/grid"
+    bs_offcanvas = "https://getbootstrap.com/docs/5.3/components/offcanvas"
+    bs_navbar_placement = "https://getbootstrap.com/docs/5.3/components/navbar/#placement"
+    bs_tables = "https://getbootstrap.com/docs/5.3/content/tables"
+    cc_by_nc_4_0 = "https://creativecommons.org/licenses/by-nc/4.0/"
+    commit_message = "https://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html"
+    contrast_checker = "https://accessibleweb.com/color-contrast-checker/"
+    css_codeguide = "https://codeguide.co/#css"
+    doks = "https://github.com/h-enk/doks"
+    eslint = "https://eslint.org"
+    flexsearch = "https://github.com/nextapps-de/flexsearch"
+    fontawesome = "https://fontawesome.com"
+    fa_icons = "https://fontawesome.com/icons"
+    fa_styling = "https://fontawesome.com/docs/web/style/styling"
+    fa_animation = "https://fontawesome.com/docs/web/style/animate"
+    git_download = "https://git-scm.com"
+    github_pr = "https://help.github.com/articles/about-pull-requests/"
+    github_rebase = "https://help.github.com/articles/about-git-rebase/"
+    google_fonts = "https://fonts.google.com"
+    html_codeguide = "https://codeguide.co/#html"
+    hugo = "https://gohugo.io"
+    hugo_config = "https://gohugo.io/getting-started/configuration/#all-configuration-settings"
+    hugo_config_dir = "https://gohugo.io/getting-started/configuration/#configuration-directory"
+    hugo_content = "https://gohugo.io/content-management/formats"
+    hugo_chroma = "https://gohugo.io/content-management/syntax-highlighting/#list-of-chroma-highlighting-languages"
+    hugo_deploy = "https://gohugo.io/hosting-and-deployment/hugo-deploy"
+    hugo_deployment = "https://gohugo.io/hosting-and-deployment"
+    hugo_config_deploy = "https://gohugo.io/hosting-and-deployment/hugo-deploy/#configure-the-deployment"
+    hugo_fingerprint = "https://gohugo.io/hugo-pipes/fingerprint"
+    hugo_frontmatter = "https://gohugo.io/content-management/front-matter"
+    hugo_i18n = "https://gohugo.io/functions/i18n"
+    hugo_image = "https://gohugo.io/content-management/image-processing"
+    hugo_lang = "https://gohugo.io/content-management/multilingual"
+    hugo_lang_config = "https://gohugo.io/content-management/multilingual/#configure-languages"
+    hugo_links = "https://gohugo.io/content-management/cross-references"
+    hugo_menus = "https://gohugo.io/content-management/menus/"
+    hugo_mounts = "https://gohugo.io/hugo-modules/configuration/#module-config-mounts"
+    hugo_imaging = "https://gohugo.io/content-management/image-processing/#imaging-configuration"
+    hugo_ordering = "https://gohugo.io/templates/lists/#order-content"
+    hugo_templates = "https://gohugo.io/templates/introduction/"
+    hugo_toc = "https://gohugo.io/content-management/toc"
+    issue_tracker = "https://github.com/gethinode/hinode/issues"
+    license = "https://github.com/gethinode/hinode/blob/main/LICENSE"
+    markdown_emoji = "https://gist.github.com/rxaviers/7360908"
+    markdown_md013 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md013---line-length"
+    markdown_md024 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md024---multiple-headings-with-the-same-content"
+    markdown_md026 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md026---trailing-punctuation-in-heading"
+    markdown_md033 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md033---inline-html"
+    markdown_md034 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md034---bare-url-used"
+    markdown_md051 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md051---link-fragments-should-be-valid"
+    markdown_md053 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md053---link-and-image-reference-definitions-should-be-needed"
+    markdown_rules = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md"
+    markdownlint = "https://github.com/DavidAnson/markdownlint-cli2"
+    mozilla_image = "https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images"
+    netlify = "https://www.netlify.com"
+    nodejs = "https://nodejs.org"
+    npm = "https://www.npmjs.com"
+    observatory = "https://observatory.mozilla.org/analyze/demo.gethinode.com"
+    package_npm = "https://www.npmjs.com/package/@gethinode/hinode"
+    pagespeed = "https://pagespeed.web.dev/report?url=https%3A%2F%2Fdemo.gethinode.com%2F"
+    repository = "https://github.com/gethinode/hinode"
+    repository_child = "https://github.com/gethinode/child.git"
+    repository_owner = "https://github.com/gethinode/"
+    semver = "https://semver.org"
+    stylelint = "https://stylelint.io"
+    utterances = "https://utteranc.es"
+    wcag_contrast = "https://www.w3.org/TR/WCAG20/#visual-audio-contrast"

config/_default/server.toml

@@ -1,3 +1,4 @@
+# toml-docs-start server-config
 [[headers]]
 for = '/**'
 [headers.values]
@@ -7,15 +8,13 @@ for = '/**'
     Content-Security-Policy = """\
         default-src 'self'; \
         script-src 'self' \
-            https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js \
-            https://cdn.jsdelivr.net/npm/flexsearch@0.7.21/dist/flexsearch.bundle.js \
             https://utteranc.es/client.js; \
-        style-src 'self' localhost:1313 https://utteranc.es https://fonts.googleapis.com https://www.youtube.com; \
+        style-src 'self' https://utteranc.es https://fonts.googleapis.com https://www.youtube.com; \
         object-src 'none'; \
         base-uri 'self'; \
-        connect-src 'self' localhost:1313 ws://localhost:1313/livereload; \
+        connect-src 'self'; \
         font-src 'self' https://fonts.gstatic.com; \
-        frame-src 'self' localhost:1313 https://utteranc.es https://www.youtube-nocookie.com https://www.youtube.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; \
         manifest-src 'self'; \
         media-src 'self' \
@@ -35,3 +34,4 @@ for = '/**'
         """
     Cache-Control = "public, max-age=31536000"
     Access-Control-Allow-Origin = "*"
+# toml-docs-end server-config

config/production/deployment.toml

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

content/en/_index.md

@@ -1,3 +1,6 @@
 ---
-author: "Hugo Authors"
+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,17 +1,15 @@
 ---
-title: "About"
-description: "A clean blog theme for your Hugo site based on Bootstrap 5."
-date: "2022-04-11"
+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-01-14
 showComments: false
 ---
 
-<p class="text-center"><img src="/logo_embedded.svg" class="img-fluid w-50" alt="Logo"></p>
+<p class="text-center"><img src="/img/logo_embedded.svg" class="img-fluid w-50" alt="Logo"></p>
 
-<center>Hinode is a clean blog theme for Hugo, an open-source static site generator.</center>
-
-<section class="section section-sm mt-5">
+<section class="section section-sm mt-5 mb-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>
@@ -34,15 +32,11 @@ showComments: false
 
 Additional features include:
 
-* Comments
-* Social links
-* Blog pagination
-* Scrollspy
-* Code highlighting
-* Color customization
-* i18n support
-
-The Hinode theme is inspired by the following themes:
-
-* [Blist](https://github.com/apvarun/blist-hugo-theme) - a clean and fast blog theme for your Hugo site using Tailwind CSS.
-* [Doks](https://github.com/h-enk/doks) - a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize.
+* 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/en/blog/_index.md

@@ -1,4 +1,4 @@
 ---
-author: Katheryn Fox
+author: Mark Dumay
 title: Blog
 ---

content/en/blog/code-highlighting.md

@@ -2,10 +2,11 @@
 author: "Mark Dumay"
 title: "Code Highlighting"
 date: 2022-04-16
-description: "Examples on how to enable code highlighting"
+description: "Examples on how to enable code highlighting."
 tags: ["code"]
 thumbnail: img/notepad.jpg
-credits: Photo by <a href="https://unsplash.com/@frederickjmedina">Frederick Medina</a> on <a href="https://unsplash.com/photos/PdfRE-xB--s">Unsplash</a>
+photoCredits: <a href="https://unsplash.com/@frederickjmedina">Frederick Medina</a>
+photoSource: <a href="https://unsplash.com/photos/PdfRE-xB--s">Unsplash</a>
 ---
 
 ## Code Fencing
@@ -29,9 +30,9 @@ Use code fencing to highlight the syntax of a specific language.
 </div>
 ```
 
-## Highlight Partial
+## Highlight Shortcode
 
-Use the `highlight` partial to customize the layout of a specific code block.
+Use the `highlight` shortcode to customize the layout of a specific code block.
 
 {{< highlight go "linenos=table,hl_lines=8 15-17,linenostart=199" >}}
 // GetTitleFunc returns a func that can be used to transform a string to

content/en/blog/emoji-support.md

@@ -2,10 +2,12 @@
 author: "Hugo Authors"
 title: "Emoji Support"
 date: 2021-07-15
-description: "Guide to emoji usage in Hugo"
+description: "Guide to emoji usage in Hugo."
 tags: ["emoji"]
-thumbnail: img/dunes.jpg # https://picsum.photos/id/184/4288/2848
-credits: Photo by <a href="https://unsplash.com/@timdegroot">Tim de Groot</a> on <a href="https://unsplash.com/photos/yNGQ830uFB4">Unsplash</a>
+# thumbnail: img/dunes.jpg
+thumbnail: https://picsum.photos/id/184/4288/2848.jpg
+photoCredits: <a href="https://unsplash.com/@timdegroot">Tim de Groot</a>
+photoSource: <a href="https://unsplash.com/photos/yNGQ830uFB4">Unsplash</a>
 ---
 
 Emoji can be enabled in a Hugo project in a number of ways.

content/en/blog/markdown-syntax.md

@@ -1,11 +1,12 @@
 ---
-author: "Hugo Authors"
-title: "Markdown Syntax Guide"
-description: "Sample article showcasing basic Markdown syntax and formatting for HTML elements."
+author: Hugo Authors
+title: Markdown Syntax Guide
+description: Use Markdown syntax and basic HTML elements to style your Hugo content files.
 tags: ["markdown", "css", "html"]
 date: 2022-01-14
 thumbnail: img/phone.jpg # https://picsum.photos/id/160/3200/2119
-credits: Photo by <a href="https://unsplash.com/@thomweerd">Thom</a> on <a href="https://unsplash.com/photos/Zdcq3iKly6g">Unsplash</a>
+photoCredits: <a href="https://unsplash.com/@thomweerd">Thom</a> 
+photoSource: <a href="https://unsplash.com/photos/Zdcq3iKly6g">Unsplash</a>
 ---
 
 This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
@@ -87,7 +88,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
+    <meta charset="utf-8">
     <title>Example HTML5 Document</title>
   </head>
   <body>

content/en/blog/placeholder-text.md

@@ -1,40 +0,0 @@
----
-author: "Hugo Authors"
-title: "Placeholder Text"
-date: 2021-07-13
-description: "Lorem Ipsum Dolor Si Amet"
-tags: ["markdown", "text"]
-thumbnail: img/city.jpg # https://picsum.photos/id/1067/5760/3840
-credits: Photo by <a href="https://unsplash.com/@kevinjyoung">Kevin Young</a> on <a href="https://unsplash.com/photos/-icmOdYWXuQ">Unsplash</a>
----
-
-Lorem est tota propiore conpellat pectoribus de pectora summo. <!--more-->Redit teque digerit hominumque toris verebor lumina non cervice subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.
-
-{{< image src="img/flowers.jpg" ratio="21x9" caption="Figure caption" class="rounded">}}
-
-1. Exierant elisi ambit vivere dedere
-2. Duce pollice
-3. Eris modo
-4. Spargitque ferrea quos palude
-
-Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria tractus malis.
-
-1. Comas hunc haec pietate fetum procerum dixit
-2. Post torum vates letum Tiresia
-3. Flumen querellas
-4. Arcanaque montibus omnes
-5. Quidem et
-
-## Vagus elidunt
-
-<svg xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="373" width="496"><g fill="none"><path stroke="#000" stroke-width=".75" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width=".75" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"></ellipse></g></svg>
-
-[The Van de Graaf Canon](https://en.wikipedia.org/wiki/Canons_of_page_construction#Van_de_Graaf_canon)
-
-## Mane refeci capiebant unda mulcebat
-
-Victa caducifer, malo vulnere contra dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. **Faces illo pepulere** tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.
-
-Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae vulnus haerentia iuste et exercebat, sui et.
-
-Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel **mitis temploque** vocatus, inque alis, _oculos nomen_ non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem Propoetides **parte**.

content/en/blog/rich-content.md

@@ -2,10 +2,11 @@
 author: "Hugo Authors"
 title: "Rich Content"
 date: 2021-07-13
-description: "A brief description of Hugo Shortcodes"
-tags: ["shortcodes", "privacy"]
+description: "A brief description of Hugo Shortcodes."
+tags: ["shortcode", "privacy"]
 thumbnail: img/flowers.jpg # https://picsum.photos/id/106/2592/1728
-credits: Photo by <a href="https://unsplash.com/@flutterhappy">Arvee Marie</a> on <a href="https://unsplash.com/photos/YnfGtpt2gf4">Unsplash</a>
+photoCredits: <a href="https://unsplash.com/@flutterhappy">Arvee Marie</a>
+photoSource: <a href="https://unsplash.com/photos/YnfGtpt2gf4">Unsplash</a>
 ---
 
 Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-management/shortcodes/#use-hugos-built-in-shortcodes) for rich content, along with a [Privacy Config](https://gohugo.io/about/hugo-and-gdpr/) and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.

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

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

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

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

content/en/docs/0.8/advanced-settings/icons.md

@@ -0,0 +1,67 @@
+---
+title: Icons
+description: Configure secure access to icons from Bootstrap and Font Awesome.
+date: 2023-01-28
+group: advanced-settings
+layout: docs
+---
+
+Hinode processes the Bootstrap icons to ensure they adhere to the strict [content security policy]({{< ref "server" >}}). In addition, it provides access to the free icons of [Font Awesome]({{< param "links.fontawesome" >}}).
+
+## Bootstrap icons
+
+Bootstrap uses various embedded vector images (in <abbr title="Scalable Vector Graphics">SVG</abbr> format) throughout its Sass source files. Hinode replaces these embedded images with file-based vector images, as the [content security policy]({{< ref "server" >}}) prohibits loading of embedded images. To ensure the images are consistent with the [theme colors]({{< ref "colors" >}}), the images are postprocessed using [Hugo templating]({{< param "links.hugo_templates">}}).
+
+### Build pipeline
+
+Hinodes uses npm and mounted folders to create a flexibile virtual file system that is automatically kept up to date. Review the [overview]({{< ref "overview" >}}) for a detailed explanation. The build pipeline of the Bootstrap icons consists of four steps. It is intertwined with the [build process for the stylesheets]({{< ref "styles" >}}).
+
+1. Override the inline Bootstrap icon definitions
+
+   Replace the default inline icon definitions within the Bootstrap Sass files with references to local vector images. Use the file `assets/scss/common/_icons.scss` to ensure the definitions take precedence over the default Bootstrap values. For example, the following statement updates the value of the `$form-switch-focus-bg-image`:
+
+   ```scss
+   $form-switch-focus-bg-image: url("icons/form-switch-focus-bg-image.svg") !default;
+   ```
+
+2. Export the Sass variables
+
+   Export the required Sass variables by defining them in the `assets/scss/common/_export.scss` file. Hinode converts the variable names from kebab case to snake case to make them compatible with Hugo's variable naming convention. For example, the css variable `--form-switch-focus-color` is exposed as `.form_switch_focus_color` to the Hugo templates.
+
+   ```scss
+   :hinode-theme {
+       --form-switch-focus-color: #{$form-switch-focus-color};
+   }
+   ```
+
+3. Reference the Sass variables within each icon file
+
+   Use [Hugo templating]({{< param "links.hugo_templates">}}) to reference the Sass variables for fill colors and stroke colors. For example, the file `assets/icons/form-switch-focus-bg-image.svg` defines the fill color as `{{ .form_switch_focus_color }}`. The entire vector definition is as such:
+
+   ```html
+   <svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'>
+       <circle r='3' fill='{{ .form_switch_focus_color }}'/>
+   </svg>
+   ```
+
+4. Process the icon files
+
+   Add the local icon files to the `assets/icons` folder with a filename as defined in step 1. The partial `partials/head/stylesheet.html` calls the partial `partials/head/icons.html` to process all icon files with the `.svg` extension recursively. The output is stored in the `icons` folder within the output directory (usually `public` when building the site). The icon files are referenced in the main stylesheet automatically.
+
+### Icons definitions
+
+The icons are defined in the file `assets/scss/common/_icons.scss`. The current configuration is the following:
+
+{{< docs name="icons" file="assets/scss/common/_icons.scss" >}}
+
+### Export definitions
+
+The exported variables are defined in the file `assets/scss/common/_export.scss`. The current configuration is the following:
+
+{{< docs name="export" file="assets/scss/common/_export.scss" >}}
+
+## Font Awesome icons
+
+[Font Awesome]({{< param "links.fontawesome" >}}) provides a collection of icons to be used freely on websites and other media. See the [icons documentation]({{< relref "../content/icons" >}}) in the content section on how to use them to style your website. Hinode uses the <abbr title="Cascading Style Sheets">CSS</abbr> files and web fonts of Font Awesome, as the [content security policy]({{< ref "server" >}}) prohibits the inline execution of stylesheets by the JavaScripts of Font Awesome. The CSS files are bundled with the main stylesheet. The web fonts are copied to the `/static/fonts` folder with the repository. Use the npm command `npm run copy:fonts` to copy the latest version of the files. The CSS files are referenced in the `assets/scss/app.scss` file. This is the current configuration:
+
+{{< docs name="awesome" file="assets/scss/app.scss" >}}

content/en/docs/0.8/advanced-settings/overview.md

@@ -0,0 +1,66 @@
+---
+title: Overview
+description: Configure and customize Hinode to your liking using Hugo Templating and npm dependencies.
+date: 2023-01-28
+group: advanced-settings
+layout: docs
+---
+
+As a theme for Hugo, Hinode is highly configurable and customizable. Based on Go's template libraries, Hugo enriches plain Markdown content with powerful features to generate websites. More information is available in [Hugo's documentation]({{< param "links.hugo_templates" >}}). To take advantage of package versioning and dependency management, Hinode takes a slightly different approach compared to most themes. The below paragraphs clarify the build system.
+
+## npm packages
+
+Both the [main theme]({{< param "links.repository" >}}) and [child theme]({{< param "links.repository_child" >}}) packages of Hinode are defined in the file `package.json` in the repository root. The extract below defines the key elements of the package configuration. The `name` is a unique identifier to identify the [package on npm]({{< param "links.package_npm" >}}). The `version` tag uses [semantic versioning]({{< param "links.semver" >}}), consisting of a `MAJOR` version, `MINOR` version, and `PATCH` version. In short, anything below `MAJOR` version `1` is considered to be in development and may not be backwards compatible. Starting from `1`, each `MAJOR` version may introduce breaking changes, whilst `MINOR` version usually introduce new features that are compatible with the `MAJOR` version. Lastly, `PATCH` usually indicates a bug fix or small revision.
+
+The other two sections of interest are `devDependencies` and `otherDependencies`. As an Hugo theme, Hinode does not require any packages in production. Instead the development dependencies are used to generate the static site and its assets. For example, Bootstrap's JavaScript distribution file `/node_modules/bootstrap/dist/js` is bundled into the `js/main.bundle<.min>.js` file during build. The path `/node_modules/bootstrap/` refers to the Bootstap package defined as dependency. Lastly, the Hugo binary is installed as version-controlled dependency too. This ensures the build process is transparent and traceable, which simplifies debugging. Please refer to the [commands]({{< ref "commands" >}}) section to review the various npm commands available.
+
+```yml
+{
+    "name": "@gethinode/hinode",
+    "version": "0.8.0",
+    "scripts": {
+        [...]
+    },
+    [...]
+    "devDependencies": {
+        "bootstrap": "^5.2.3",
+        [...]
+    },
+    "otherDependencies": {
+        "hugo": "0.110.0"
+    }
+}
+```
+
+## Mounted folders
+
+Hugo supports the [mounting of folders]({{< param "links.hugo_mounts" >}}) since version 0.56.0. Hinode takes advantage of this feature to create a virtual file system, combining assets from multiple sources. For example, the below section of the `/config/_default/config.toml` instructs Hugo to make Bootstrap's JavaScript distribution file `/node_modules/bootstrap/dist/js` available in the `/assets/js` folder. This file is then bundled with the JavaScript files defined in the `/assets/js` folder of Hinode.
+
+{{< alert color="primary" >}}
+    When you add a mount, the default mount for the concerned target root is ignored: be sure to explicitly add it.
+{{< /alert >}}
+
+```toml
+[module]
+    [...]
+    [[module.mounts]]
+        source = "assets"
+        target = "assets"
+    [[module.mounts]]
+        source = "node_modules/bootstrap/dist/js"
+        target = "assets/js/vendor/bootstrap"
+        includeFiles = "*.bundle.js"
+```
+
+As another example, the Hinode child theme merges the key folders of the main theme with its own folder. This simplifies the modification of any base files, as the files in the local repository take precedence over the files of the main theme.
+
+```toml
+[module]
+    [...]
+    [[module.mounts]]
+        source = "node_modules/@gethinode/hinode/i18n"
+        target = "i18n"
+    [[module.mounts]]
+        source = "i18n"
+        target = "i18n"  
+```

content/en/docs/0.8/advanced-settings/scripts.md

@@ -0,0 +1,35 @@
+---
+title: Scripts
+description: Automatically bundle local and external JavaScript files into a single file.
+date: 2023-01-28
+group: advanced-settings
+layout: docs
+---
+
+Hinode bundles local and external JavaScript into a single file. By utilizing [npm]({{< ref "overview" >}}), external JavaScript files are automatically ingested and kept up to date.
+
+## Build pipeline
+
+Hinodes uses npm and mounted folders to create a flexibile virtual file system that is automatically kept up to date. Review the [overview]({{< ref "overview" >}}) for a detailed explanation. The build pipeline of the JavaScript files consists of four steps.
+
+1. Add the local JavaScript files
+
+   Add the local JavaScript files to the `assets/js` folder with a recognizable filename.
+
+2. Mount the JavaScript files maintained within a node package
+
+   Make JavaScripts defined in node packages available by mounting them into the `assets/js/vendor` folder. Define the mount points in `config/_default/config.toml`.
+
+3. Bundle the JavaScript files
+
+   The partial `partials/footer/scripts.html` bundles all files that end with `.js` recursively into a single file called `js/main.bundle.js`. In production mode, the output is minified and linked to with a [fingerprint]({{< param "links.hugo_fingerprint" >}}).
+
+4. Link to the JavaScript in the base layout
+
+   Hinode's base layout `layouts/_default/baseof.html` imports the bundled JavaScript file in the footer. The file is cached to improve performance.
+
+## Example
+
+Mount the external JavaScript files to Hugo's virtual file system within the file `config/_default/config.toml`. The current configuration imports the relevant files of [Bootstrap]({{< param "links.bootstrap" >}}) and [FlexSearch]({{< param "links.flexsearch" >}}).
+
+{{< docs name="javascript" file="config/_default/config.toml" >}}

content/en/docs/0.8/advanced-settings/server.md

@@ -0,0 +1,15 @@
+---
+title: Server
+description: Configure the server headers to refine the content security policy.
+date: 2023-01-28
+group: advanced-settings
+layout: docs
+---
+
+<!-- TODO: expand -->
+
+## Server headers
+
+Hinode uses rather strict security policies by default. This ensures the site is [secure by default]({{< param "links.observatory" >}}). However, if you want to include external resources, such as images and videos, you will need to explicity add these sources to the server headers. If omitted, the browser will refuse to load these resources, resulting in broken links or missing elements. The settings of the local development server are defined in `server.toml`. See the below configuration, which captures the external resources currently used by Hinode. Refine these settings as needed. Similar settings are defined in the `netlify.toml` file provided in the repository's root when deploying to [Netlify]({{< param "links.netlify" >}}).
+
+{{< docs name="server-config" file="config/_default/server.toml" >}}

content/en/docs/0.8/advanced-settings/styles.md

@@ -0,0 +1,59 @@
+---
+title: Styles
+description: Use extensible Sass files to generate the stylesheets for your website.
+date: 2023-01-28
+group: advanced-settings
+layout: docs
+---
+
+<!-- TODO: include dartsass -->
+
+Hinode uses Sass files to take advantage of variables, maps, and functions to generate the cascading style sheets of the website. By utilizing [npm]({{< ref "overview" >}}), Bootstrap's source Sass file are automatically ingested and kept up to date.
+
+## Build pipeline
+
+Hinodes uses npm and mounted folders to create a flexibile virtual file system that is automatically kept up to date. Review the [overview]({{< ref "overview" >}}) for a detailed explanation. The build pipeline of the stylesheet consists of five steps.
+
+1. Define the Sass entrypoint
+
+   The main entrypoint for the Sass files is defined in `assets/scss/app.scss`. It supports Hugo templating. For example, it defines a variable `$themeFont` that links to the [font configuration]({{< ref "fonts" >}}). The variable is available within all source Sass files.
+
+2. Import the source Sass files
+
+   The application entrypoint imports the various source Sass files defined in `assets/scss`, which are combined with the Sass files of [Bootstrap]({{< param "links.bootstrap" >}}) and [Font Awesome (Free)]({{< param "links.fontawesome" >}}). The vendor paths are relative to the `node_modules` folder, which are installed by [npm]({{< ref "commands" >}}).
+
+3. Override and expand the Sass configuration
+
+   The import order of the source files defines which variables and functions to use. In Sass, the first definition of a variable or function takes precedence. For example, to override the setting for the variable `$primary`, is needs to be defined prior to Bootstrap's definition in `_variables.scss`.
+
+4. Transpile the Sass files
+
+   The partial `partials/head/stylesheet.html` reads the application entrypoint, configures the `node_modules` folder as import path, and transpiles the stylesheet into a single file `main.css`. In production mode, the output is minified and linked to with a [fingerprint]({{< param "links.hugo_fingerprint" >}}).
+
+5. Link to the stylesheet in the base layout
+
+   Hinode's base layout `layouts/_default/baseof.html` imports the generated stylesheet in the header section of the webpage via the partial `layouts/partials/head/head.html`.
+
+## Example
+
+The below Sass file defines a skeleton configuration for the main entrypoint. The full configuration is defined in `assets/scss/app.scss`.
+
+```scss
+// 1) Define template variables (linking to Hugo config)
+$primary:  {{ site.Params.style.primary | default "#007bff" }};
+
+// 2) Include default variable overrides
+@import "common/variables.scss";
+
+// 3) Import Bootstrap configuration
+@import "bootstrap/scss/variables";
+
+// 4) Import Bootstrap layout & components
+@import "bootstrap/scss/root";
+
+// 5) Import Font Awesome
+@import "@fortawesome/fontawesome-free/scss/fontawesome";
+
+// 6) Import Hinode theme styles
+@import "common/styles.scss";
+```

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

@@ -0,0 +1,338 @@
+---
+author: "Mark Dumay"
+title: "Bootstrap Components"
+date: 2022-12-26
+draft: true
+description: "Overview of available Bootstrap components."
+tags: ["bootstrap"]
+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>
+layout: docs
+---
+
+
+## Close button
+
+Use HTML code to display a generic close button. See the Bootstrap [documentation][bs_close_button] for more options. The following example displays a button with default styling.
+
+```html
+<button type="button" class="btn-close" aria-label="Close"></button>
+```
+
+The result looks like this.
+
+<button type="button" class="btn-close" aria-label="Close"></button>
+
+## Dropdowns
+
+### Single button
+
+<div class="dropdown">
+  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+    Dropdown button
+  </button>
+  <ul class="dropdown-menu">
+    <li><a class="dropdown-item" href="#">Action</a></li>
+    <li><a class="dropdown-item" href="#">Another action</a></li>
+    <li><a class="dropdown-item" href="#">Something else here</a></li>
+  </ul>
+</div>
+
+### Split button
+
+<!-- Example split danger button -->
+<div class="btn-group">
+  <button type="button" class="btn btn-danger">Action</button>
+  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+    <span class="visually-hidden">Toggle Dropdown</span>
+  </button>
+  <ul class="dropdown-menu">
+    <li><a class="dropdown-item" href="#">Action</a></li>
+    <li><a class="dropdown-item" href="#">Another action</a></li>
+    <li><a class="dropdown-item" href="#">Something else here</a></li>
+    <li><hr class="dropdown-divider"></li>
+    <li><a class="dropdown-item" href="#">Separated link</a></li>
+  </ul>
+</div>
+
+## List group
+
+<div class="list-group">
+  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
+    The current link item
+  </a>
+  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
+  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
+  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
+  <a class="list-group-item list-group-item-action disabled">A disabled link item</a>
+</div>
+
+## Modal
+
+<!-- Button trigger modal -->
+<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
+  Launch demo modal
+</button>
+
+<!-- Modal -->
+<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        ...
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary">Save changes</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+## Navs & tabs
+
+<ul class="nav nav-tabs">
+  <li class="nav-item">
+    <a class="nav-link active" aria-current="page" href="#">Active</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled">Disabled</a>
+  </li>
+</ul>
+
+## Offcanvas
+
+<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
+  Link with href
+</a>
+<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
+  Button with data-bs-target
+</button>
+
+<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
+  <div class="offcanvas-header">
+    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+  </div>
+  <div class="offcanvas-body">
+    <div>
+      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
+    </div>
+    <div class="dropdown mt-3">
+      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
+        Dropdown button
+      </button>
+      <ul class="dropdown-menu">
+        <li><a class="dropdown-item" href="#">Action</a></li>
+        <li><a class="dropdown-item" href="#">Another action</a></li>
+        <li><a class="dropdown-item" href="#">Something else here</a></li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+## Pagination
+
+<nav aria-label="Page navigation example">
+  <ul class="pagination justify-content-center">
+    <li class="page-item disabled">
+      <a class="page-link">Previous</a>
+    </li>
+    <li class="page-item"><a class="page-link" href="#">1</a></li>
+    <li class="page-item"><a class="page-link" href="#">2</a></li>
+    <li class="page-item"><a class="page-link" href="#">3</a></li>
+    <li class="page-item">
+      <a class="page-link" href="#">Next</a>
+    </li>
+  </ul>
+</nav>
+
+## Placeholders
+
+<div class="card w-50" aria-hidden="true">
+  <img src="/img/bd_placeholder_img.svg" class="card-img-top" alt="...">
+  <div class="card-body">
+    <h5 class="card-title placeholder-glow">
+      <span class="placeholder col-6"></span>
+    </h5>
+    <p class="card-text placeholder-glow">
+      <span class="placeholder col-7"></span>
+      <span class="placeholder col-4"></span>
+      <span class="placeholder col-4"></span>
+      <span class="placeholder col-6"></span>
+      <span class="placeholder col-8"></span>
+    </p>
+    <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
+  </div>
+</div>
+
+## Popovers
+
+<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
+
+## Progress
+
+<div class="progress">
+  <div class="progress-bar progress-bar-striped progress-bar-animated w-75" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+
+## Scrollspy
+
+### Navbar
+
+<nav id="navbar-example2" class="navbar bg-light px-3 mb-3">
+  <a class="navbar-brand" href="#">Navbar</a>
+  <ul class="nav nav-pills">
+    <li class="nav-item">
+      <a class="nav-link" href="#scrollspyHeading1">First</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#scrollspyHeading2">Second</a>
+    </li>
+    <li class="nav-item dropdown">
+      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
+      <ul class="dropdown-menu">
+        <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
+        <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
+        <li><hr class="dropdown-divider"></li>
+        <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
+      </ul>
+    </li>
+  </ul>
+</nav>
+<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-light p-3 rounded-2" tabindex="0">
+  <h4 id="scrollspyHeading1">First heading</h4>
+  <p>...</p>
+  <h4 id="scrollspyHeading2">Second heading</h4>
+  <p>...</p>
+  <h4 id="scrollspyHeading3">Third heading</h4>
+  <p>...</p>
+  <h4 id="scrollspyHeading4">Fourth heading</h4>
+  <p>...</p>
+  <h4 id="scrollspyHeading5">Fifth heading</h4>
+  <p>...</p>
+</div>
+
+### Nested nav
+
+<div class="row">
+  <div class="col-4">
+    <nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
+      <nav class="nav nav-pills flex-column">
+        <a class="nav-link" href="#item-1">Item 1</a>
+        <nav class="nav nav-pills flex-column">
+          <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
+          <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
+        </nav>
+        <a class="nav-link" href="#item-2">Item 2</a>
+        <a class="nav-link" href="#item-3">Item 3</a>
+        <nav class="nav nav-pills flex-column">
+          <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
+          <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
+        </nav>
+      </nav>
+    </nav>
+  </div>
+
+  <div class="col-8">
+    <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
+      <div id="item-1">
+        <h4>Item 1</h4>
+        <p>...</p>
+      </div>
+      <div id="item-1-1">
+        <h5>Item 1-1</h5>
+        <p>...</p>
+      </div>
+      <div id="item-1-2">
+        <h5>Item 1-2</h5>
+        <p>...</p>
+      </div>
+      <div id="item-2">
+        <h4>Item 2</h4>
+        <p>...</p>
+      </div>
+      <div id="item-3">
+        <h4>Item 3</h4>
+        <p>...</p>
+      </div>
+      <div id="item-3-1">
+        <h5>Item 3-1</h5>
+        <p>...</p>
+      </div>
+      <div id="item-3-2">
+        <h5>Item 3-2</h5>
+        <p>...</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+### List group
+
+<div class="row">
+  <div class="col-4">
+    <div id="list-example" class="list-group">
+      <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
+      <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
+      <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
+      <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
+    </div>
+  </div>
+  <div class="col-8">
+    <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
+      <h4 id="list-item-1">Item 1</h4>
+      <p>...</p>
+      <h4 id="list-item-2">Item 2</h4>
+      <p>...</p>
+      <h4 id="list-item-3">Item 3</h4>
+      <p>...</p>
+      <h4 id="list-item-4">Item 4</h4>
+      <p>...</p>
+    </div>
+  </div>
+</div>
+
+### Simple anchors
+
+<!-- TODO: fix Simple anchors -->
+
+<div class="row">
+  <div class="col-4">
+    <div id="simple-list-example" class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center">
+      <a class="p-1 rounded" href="#simple-list-item-1">Item 1</a>
+      <a class="p-1 rounded" href="#simple-list-item-2">Item 2</a>
+      <a class="p-1 rounded" href="#simple-list-item-3">Item 3</a>
+      <a class="p-1 rounded" href="#simple-list-item-4">Item 4</a>
+      <a class="p-1 rounded" href="#simple-list-item-5">Item 5</a>
+    </div>
+  </div>
+  <div class="col-8">
+    <div data-bs-spy="scroll" data-bs-target="#simple-list-example" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
+      <h4 id="simple-list-item-1">Item 1</h4>
+      <p>...</p>
+      <h4 id="simple-list-item-2">Item 2</h4>
+      <p>...</p>
+      <h4 id="simple-list-item-3">Item 3</h4>
+      <p>...</p>
+      <h4 id="simple-list-item-4">Item 4</h4>
+      <p>...</p>
+      <h4 id="simple-list-item-5">Item 5</h4>
+      <p>...</p>
+    </div>
+  </div>
+</div>
+
+<!-- MARKDOWN PUBLIC LINKS -->
+[bs_close_button]: https://getbootstrap.com/docs/5.2/components/close-button/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,28 @@
+---
+author: Mark Dumay
+title: Icon
+date: 2023-02-02
+description: Use the fa shortcode to add a Font Awesome icon with ease.
+group: components
+layout: docs
+---
+
+## Overview
+
+Use the `fa` shortcode to quickly add a Font Awesome icon to your content. Use `fa` for regular icons, `fab` for brand icons, and `fas` for solid icons.
+
+## Arguments
+
+The shortcode supports unnamed arguments only and requires at least one argument. The first argument is used as the icon name without the `fa-` prefix. Additional (unnamed) arguments are passed as `class` attributes to the inner HTML element.
+
+## Example
+
+As an example, the following shortcodes show a square check, a brand logo, and a circle check.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* fa square-check */>}}
+{{</* fab linkedin */>}}
+{{</* fas circle-check */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->

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

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

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

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