Merge pull request #139 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/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

@@ -6,6 +6,7 @@
     "MD026": false,
     "MD033": 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,7 +2,7 @@
 
 <!-- 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>
 
@@ -11,23 +11,23 @@
     <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 href="https://app.netlify.com/sites/gethinode-demo/deploys" alt="Netlify Status">
+        <img src="https://img.shields.io/netlify/0ad42e3e-fdfa-4d37-8e26-58badd429a67" />
     </a>
     <a href="https://stats.uptimerobot.com/xyGVYhLJmV" alt="UptimeRobot Status">
         <img src="https://img.shields.io/uptimerobot/status/m791334689-73d9dfc82030f4f955b2d6bb" />
     </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>
 
@@ -44,13 +44,13 @@
 
 ## About
 
-![Logo](https://raw.githubusercontent.com/markdumay/hugo-theme-hinode/main/static/img/logo.png)
+![Logo](https://raw.githubusercontent.com/gethinode/hinode/main/static/img/logo.png)
 
 - [Online Demo][demo]
 - [PageSpeed Insights][pagespeed]
 - [Mozilla Observatory][observatory]
 
-Hinode is a clean 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:
 
@@ -76,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
@@ -110,7 +110,7 @@ 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 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].
 
@@ -119,7 +119,7 @@ The main site configuration is available in `./config/_default`. Some remarks:
 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
@@ -127,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.
@@ -138,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
@@ -152,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 -->
@@ -161,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,199 +0,0 @@
-/*
-Source:
-  - https://raw.githubusercontent.com/h-enk/doks/master/assets/js/index.js
-*/
-
-var suggestions = document.getElementById('suggestions');
-var search = document.getElementById('search');
-
-if (search !== null) {
-  document.addEventListener('keydown', inputFocus);
-}
-
-function inputFocus(e) {
-  if (e.ctrlKey && e.key === '/' ) {
-    e.preventDefault();
-    search.focus();
-  }
-  if (e.key === 'Escape' ) {
-    search.blur();
-    suggestions.classList.add('d-none');
-  }
-}
-
-document.addEventListener('click', function(event) {
-
-  var isClickInsideElement = suggestions.contains(event.target);
-
-  if (!isClickInsideElement) {
-    suggestions.classList.add('d-none');
-  }
-
-});
-
-/*
-Source:
-  - https://dev.to/shubhamprakash/trap-focus-using-javascript-6a3
-*/
-
-document.addEventListener('keydown',suggestionFocus);
-
-function suggestionFocus(e) {
-  const suggestionsHidden = suggestions.classList.contains('d-none');
-  if (suggestionsHidden) return;
-
-  const focusableSuggestions= [...suggestions.querySelectorAll('a')];
-  if (focusableSuggestions.length === 0) return;
-
-  const index = focusableSuggestions.indexOf(document.activeElement);
-
-  if (e.key === "ArrowUp") {
-    e.preventDefault();
-    const nextIndex = index > 0 ? index - 1 : 0;
-    focusableSuggestions[nextIndex].focus();
-  }
-  else if (e.key === "ArrowDown") {
-    e.preventDefault();
-    const nextIndex= index + 1 < focusableSuggestions.length ? index + 1 : index;
-    focusableSuggestions[nextIndex].focus();
-  }
-
-}
-
-/*
-Source:
-  - https://github.com/nextapps-de/flexsearch#index-documents-field-search
-  - https://raw.githack.com/nextapps-de/flexsearch/master/demo/autocomplete.html
-*/
-
-(function(){
-
-  var index = new FlexSearch.Document({
-    tokenize: "forward",
-    cache: 100,
-    document: {
-      id: "id",
-      tag: "tag",
-      store: ["href", "title", "description"],
-      index: ["title", "description", "content"]
-    }
-  });
-
-  // https://discourse.gohugo.io/t/range-length-or-last-element/3803/2
-  // Note: uses .Site.AllPages as .Site.RegularPages only returns content for the current language
-  //       pages without a title (such as browserconfig.xml) are excluded
-  {{ $list := where (where .Site.AllPages "Kind" "in" "page") "Title" "!=" "" }}
-  {{ $len := (len $list) -}}
-
-  index.add(
-    {{ range $index, $element := $list -}}
-      {
-        id: {{ $index }},
-        tag: "{{ .Lang }}",
-        href: "{{ .RelPermalink }}",
-        title: {{ .Title | jsonify }},
-        {{ with .Description -}}
-          description: {{ . | jsonify }},
-        {{ else -}}
-          description: {{ .Summary | plainify | jsonify }},
-        {{ end -}}
-        content: {{ .Plain | jsonify }}
-      })
-      {{ if ne (add $index 1) $len -}}
-        .add(
-      {{ end -}}
-    {{ end -}}
-  ;
-
-  search.addEventListener('input', show_results, true);
-
-  function show_results(){
-    const maxResult = 5;
-    var searchQuery = this.value;
-    // filter the results for the currently tagged language
-    const lang = document.documentElement.lang;
-    var results = index.search(searchQuery, { index: ['title', 'description', 'content'], limit: maxResult, tag: lang, enrich: true });
-
-    // flatten results since index.search() returns results for each indexed field
-    const flatResults = new Map(); // keyed by href to dedupe results
-    for (const result of results.flatMap(r => r.result)) {
-      if (flatResults.has(result.doc.href)) continue;
-      flatResults.set(result.doc.href, result.doc);
-    }
-
-    suggestions.innerHTML = "";
-    suggestions.classList.remove('d-none');
-
-    // inform user that no results were found
-    if (flatResults.size === 0 && searchQuery) {
-      const noResultsMessage = document.createElement('div')
-      noResultsMessage.innerHTML = `{{ T "ui_no_results" }} "<strong>${searchQuery}</strong>"`
-      noResultsMessage.classList.add("suggestion__no-results");
-      suggestions.appendChild(noResultsMessage);
-      return;
-    }
-
-    // construct a list of suggestions
-    for(const [href, doc] of flatResults) {
-        const entry = document.createElement('div');
-        suggestions.appendChild(entry);
-
-        const a = document.createElement('a');
-        a.href = href;
-        entry.appendChild(a);
-
-        const title = document.createElement('span');
-        title.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,14 +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" }};
-$carousel-control-prev-icon-bg: url("/img/carousel_prev.svg") !default;
-$carousel-control-next-icon-bg: url("/img/carousel_next.svg") !default;
-
-
-// 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";
@@ -56,11 +68,14 @@ $carousel-control-next-icon-bg: url("/img/carousel_next.svg") !default;
 @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";
@@ -70,9 +85,17 @@ $carousel-control-next-icon-bg: url("/img/carousel_next.svg") !default;
 @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/_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.en.toml

@@ -1,2 +0,0 @@
-# Multilingual
-mainSections = ["blog", "projects"]

config/_default/config.nl.toml

@@ -1,2 +0,0 @@
-# Multilingual
-mainSections = ["blog", "projecten"]

config/_default/config.toml

@@ -1,23 +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
-timeout = "60s"
 
-# Multilingual
+# toml-docs-start build
+timeout = "60s"
+# toml-docs-end build
+
+# toml-docs-start language
+languageCode = "en-us"
 defaultContentLanguage = "en"
-# disableLanguages = ["nl"]
-DefaultContentLanguageInSubdir = true
+defaultContentLanguageInSubdir = true
+# toml-docs-end language
 
 [taxonomies]
   tag = 'tags'
@@ -46,7 +53,6 @@ DefaultContentLanguageInSubdir = true
   [services.twitter]
     disableInlineCSS = true
 
-
 [outputFormats]
   [outputFormats.XML]
     isPlainText = false
@@ -67,6 +73,13 @@ DefaultContentLanguageInSubdir = true
   [[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,25 +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 = "/en/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]
-        introTitle = "Welkom bij Hinode!"
-        introCaption = "Een thema voor Hugo gebaseerd op Bootstrap 5."
-        introLink = "/nl/over-mij"
-        introLinkTitle = "Over mij"
+    [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

@@ -13,6 +13,18 @@
   url = "/projects/"
   weight = 30
 
+[[main]]
+  name = "Sample project"
+  url = "/en/projects/sample-project/"
+  parent = "Projects"
+  weight = 1
+
+[[main]]
+  name = "Another project"
+  url = "/en/projects/another-project/"
+  parent = "Projects"
+  weight = 2
+
 [[main]]
   name = "Tags"
   url = "/tags/"
@@ -35,3 +47,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

@@ -13,6 +13,18 @@
   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/"

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 = "img/logo512x512.png"
-schemaLogoWidth = 512
-schemaLogoHeight = 512
-schemaImage = "img/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 = "/img/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,16 +8,14 @@ for = '/**'
     Content-Security-Policy = """\
         default-src 'self'; \
         script-src 'self' \
-            https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js \
-            https://cdn.jsdelivr.net/gh/nextapps-de/flexsearch@0.7.31/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; \
-        img-src 'self' https: data:; \
+        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="/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,7 +2,7 @@
 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
 photoCredits: <a href="https://unsplash.com/@frederickjmedina">Frederick Medina</a>

content/en/blog/custom-shortcodes.md

@@ -1,206 +0,0 @@
----
-author: "Mark Dumay"
-title: "Custom Shortcodes"
-date: 2022-12-05
-description: "Available shortcodes using Bootstrap components and styling"
-tags: ["bootstrap", "shortcode"]
-thumbnail: img/boots.jpg
-photoCredits: <a href="https://unsplash.com/@nate_dumlao">Nathan Dumlao</a>
-photoSource: <a href="https://unsplash.com/photos/QLPWQvHvmII">Unsplash</a>
----
-
-Bootstrap is an open-source web development framework originally created by Twitter. It uses a responsive, mobile-first approach that scales seamlessly across different screen sizes. Bootstrap includes an extensive collection of ready-to-use components, such as navigation bars, pagination controls, buttons, and much more. The Hinode theme exposes several of those components as Hugo shortcodes to simplify their usage within markdown content. The below paragraphs illustrate the available shortcodes and how to use them.
-
-## Carousel Shortcode
-
-Use the `carousel` shortcode to display a carousel of several images, with behavior similar as the [Image Shortcode](#image-shortcode). The shortcode supports the following arguments:
-
-| Argument  | Required | Description |
-|-----------|----------|-------------|
-| ratio     | No  | Aspect ratio of the image, either "1x1", "4x3" (default), "16x9", or "21x9". |
-| class     | No  | Optional class attribute of the `carousel` element, e.g. "w-75". |
-{.table}
-
-Add an inner `img` element for each slide of the carousel. The `img` element supports the following arguments:
-
-| Argument  | Required | Description |
-|-----------|----------|-------------|
-| src       | Yes | Required url of the image, e.g. "img/boots.jpg" or "https://picsum.photos/id/27/3264/1836". |
-| caption   | No  | Optional image caption. If set, the image is darkened to improve the contrast. The caption is hidden on smaller screens. |
-{.table}
-
-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.
-
-```html
-{{</* 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 */>}}
-```
-
-The result looks like this:
-{{< 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 >}}
-
-## Command Prompt Shortcode
-
-The `command` shortcode generates terminal output for either `bash`, `powershell`, or `sql` shell languages. 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}
-
-### Bash (default shell)
-
-Use the `command` shortcode to generate a block with a default bash command prompt.
-
-```html
-{{%/* command */%}}
-export MY_VAR=123
-{{%/* /command */%}}
-```
-
-The result looks like this:
-{{% command %}}
-export MY_VAR=123
-{{% /command %}}
-
-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.
-
-```html
-{{%/* 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 */%}}
-```
-
-The result looks like this:
-{{% 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 %}}
-
-### 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.
-
-```html
-{{%/* 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 */%}}
-```
-
-The result looks like this:
-{{% 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 %}}
-
-### SQL
-
-Set the `shell` argument to `sql` to generate a SQL terminal. Use the `(con)` suffix to denote a line continuation.
-
-```html
-{{%/* 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 */%}}
-```
-
-The result looks like this:
-{{% 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 %}}
-
-## Image Shortcode
-
-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][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][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.The shortcode supports the following arguments:
-
-| Argument  | Required | Description |
-|-----------|----------|-------------|
-| src       | Yes | Required url of the image, e.g. "img/boots.jpg" or "https://picsum.photos/id/27/3264/1836". |
-| 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}
-
-As an example, the following shortcode displays an image with rounded corners and a 21x9 aspect ratio.
-
-```html
-{{</* image src="img/flowers.jpg" ratio="21x9" caption="Figure caption" class="rounded" */>}}
-```
-
-The result looks like this:
-{{< image src="img/flowers.jpg" ratio="21x9" caption="Figure caption" class="rounded">}}
-
-[mozilla_image]: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
-[hugo_imaging]: https://gohugo.io/content-management/image-processing/#imaging-configuration

content/en/blog/emoji-support.md

@@ -2,7 +2,7 @@
 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
 thumbnail: https://picsum.photos/id/184/4288/2848.jpg

content/en/blog/markdown-syntax.md

@@ -1,7 +1,7 @@
 ---
-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
@@ -88,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/rich-content.md

@@ -2,7 +2,7 @@
 author: "Hugo Authors"
 title: "Rich Content"
 date: 2021-07-13
-description: "A brief description of Hugo Shortcodes"
+description: "A brief description of Hugo Shortcodes."
 tags: ["shortcode", "privacy"]
 thumbnail: img/flowers.jpg # https://picsum.photos/id/106/2592/1728
 photoCredits: <a href="https://unsplash.com/@flutterhappy">Arvee Marie</a>

content/en/projects/another-project.md

@@ -1,8 +1,8 @@
 ---
-author: "Hugo Authors"
-title: "Another project"
+author: Mark Dumay
+title: Another project
 date: 2021-07-15
-description: "Another project"
+description: Another project.
 tags: ["javascript", "golang"]
 thumbnail: img/coffee.jpg # https://picsum.photos/id/1060/5598/3732
 photoCredits: <a href="https://unsplash.com/@kfred">Karl Fredrickson</a>

content/en/projects/sample-project.md

@@ -1,8 +1,8 @@
 ---
-author: "Hugo Authors"
-title: "Sample project"
+author: Hugo Authors
+title: Sample project
 date: 2021-07-15
-description: "A sample project"
+description: A sample project.
 tags: ["html", "css"]
 thumbnail: img/laptop.jpg # https://picsum.photos/id/0/5616/3744
 photoCredits: <a href="https://unsplash.com/@alejandroescamilla">Alejandro Escamilla</a> 

content/nl/_index.md

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

content/nl/blog/custom-shortcodes.md

@@ -2,15 +2,15 @@
 author: "Mark Dumay"
 title: "Extra shortcodes"
 date: 2022-12-05
-description: "Beschikbare shortcodes die gebruik maken van Bootstrap componenten en vormgeving"
+modified: 2022-12-31
+description: "Beschikbare shortcodes die gebruik maken van Bootstrap componenten en vormgeving."
 tags: ["bootstrap", "shortcode"]
 thumbnail: img/boots.jpg
 photoCredits: <a href="https://unsplash.com/@nate_dumlao">Nathan Dumlao</a>
 photoSource: <a href="https://unsplash.com/photos/QLPWQvHvmII">Unsplash</a>
 ---
 
-
-Bootstrap is een open-source raamwerk voor het ontwikkelen van websites gemaakt door Twitter. Het volgt een aanpak die geschikt is voor meerdere schermformaten, inclusief mobiele apparaten. Bootstrap bevat een uitgebreide collectie van direct bruikbare componenten, zoals navigatiemenu's, paginering, knoppen, en nog veel meer. Om het gebruik hiervan in markdown pagina's te vergemakkelijken, stelt het Hinode thema enkele van deze componenten beschikbaar als Hugo shortcode. De onderstaande paragrafen bieden een overzicht en uitleg van de beschikbare shortcodes.
+Bootstrap is een open-source raamwerk voor het ontwikkelen van websites gemaakt door Twitter. Het volgt een aanpak die geschikt is voor meerdere schermformaten, inclusief mobiele apparaten. Bootstrap bevat een uitgebreide collectie van direct bruikbare componenten, zoals navigatiemenu's, paginering, knoppen, en nog veel meer. Om het gebruik hiervan in markdown pagina's te vergemakkelijken, stelt Hinode enkele van deze componenten beschikbaar als Hugo shortcode. De onderstaande paragrafen bieden een overzicht en uitleg van de beschikbare shortcodes.
 
 ## Carousel Shortcode
 
@@ -183,7 +183,7 @@ order by last_name;
 
 ## Image Shortcode
 
-Gebruik de `image` shortcode om een adaptief plaatje met een specifieke verhouding te tonen. De bron kan verwijzen naar een bestand in de `/assets/img` folder van je website of naar een publieke weblocatie. De shortcode genereert het plaatje als een zogenaamde [image set][mozilla_image] om deze te optimaliseren voor meerdere schermformaten en verschillende resoluties. Achter de schermen converteert Hugo de plaatjes naar een `WebP` bestandsformaat en slaat deze op in een lokale folder (`resources` of `public`). De kwaliteit van het plaatje kan worden opgegeven in de sectie `[imaging]` van de site [configuratie][hugo_imaging] (75 is de standaardwaarde). De geschikte bestandsformaten zijn `.png`, `.jpeg`, `.gif`, `.tiff`, `.bmp` en `.webp`. Een plaatje in het formaat `.jpeg` is beschikbaar voor oudere browsers. De shortcode ondersteunt de volgende parameters:
+Gebruik de `image` shortcode om een adaptief plaatje met een specifieke verhouding te tonen. De bron kan verwijzen naar een bestand in de `/assets/img` folder van je website of naar een publieke weblocatie. De shortcode genereert het plaatje als een zogenaamde [image set]({{< param "links.mozilla_image" >}}) om deze te optimaliseren voor meerdere schermformaten en verschillende resoluties. Achter de schermen converteert Hugo de plaatjes naar een `WebP` bestandsformaat en slaat deze op in een lokale folder (`resources` of `public`). De kwaliteit van het plaatje kan worden opgegeven in de sectie `[imaging]` van de site [configuratie]({{< param "links.hugo_imaging" >}}) (75 is de standaardwaarde). De geschikte bestandsformaten zijn `.png`, `.jpeg`, `.gif`, `.tiff`, `.bmp` en `.webp`. Een plaatje in het formaat `.jpeg` is beschikbaar voor oudere browsers. De shortcode ondersteunt de volgende parameters:
 
 | Parameter | Verplicht | Toelichting |
 |-----------|----------|-------------|
@@ -202,6 +202,3 @@ Ter illustratie toont de volgende shortcode een plaatje met afgeronde hoeken en
 
 Het resultaat ziet er als volgt uit:
 {{< image src="img/flowers.jpg" ratio="21x9" caption="Onderschrift" class="rounded">}}
-
-[mozilla_image]: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
-[hugo_imaging]: https://gohugo.io/content-management/image-processing/#imaging-configuration

content/nl/blog/emoji-support.md

@@ -3,7 +3,7 @@ author: "Hugo Authors"
 slug: "emoji-ondersteuning"
 title: "Emoji ondersteuning"
 date: 2021-07-15
-description: "Gids voor het gebruik van emoji met Hugo"
+description: "Gids voor het gebruik van emoji met Hugo."
 tags: ["emoji"]
 # thumbnail: img/dunes.jpg
 thumbnail: https://picsum.photos/id/184/4288/2848.jpg

content/nl/blog/rich-content.md

@@ -3,7 +3,7 @@ author: "Hugo Authors"
 slug: "multimedia"
 title: "Multimedia"
 date: 2021-07-13
-description: "Een overzicht van enkele Hugo Shortcodes"
+description: "Een overzicht van enkele Hugo Shortcodes."
 tags: ["shortcode", "privacy"]
 thumbnail: img/flowers.jpg # https://picsum.photos/id/106/2592/1728
 photoCredits: <a href="https://unsplash.com/@flutterhappy">Arvee Marie</a>

content/nl/projects/another-project.md

@@ -2,8 +2,9 @@
 author: "Hugo Authors"
 slug: "ander-project"
 title: "Ander project"
+url: "projecten/ander-project"
 date: 2021-07-15
-description: "Ander project"
+description: "Een ander project."
 tags: ["javascript", "golang"]
 thumbnail: img/coffee.jpg # https://picsum.photos/id/1060/5598/3732
 photoCredits: <a href="https://unsplash.com/@kfred">Karl Fredrickson</a>

content/nl/projects/sample-project.md

@@ -2,8 +2,9 @@
 author: "Hugo Authors"
 slug: "voorbeeldproject"
 title: "Voorbeeldproject"
+url: "projecten/voorbeeldproject"
 date: 2021-07-15
-description: "Een voorbeeldproject"
+description: "Een voorbeeldproject."
 tags: ["html", "css"]
 thumbnail: img/laptop.jpg # https://picsum.photos/id/0/5616/3744
 photoCredits: <a href="https://unsplash.com/@alejandroescamilla">Alejandro Escamilla</a> 

i18n/de.yaml

@@ -0,0 +1,118 @@
+# Content
+- id: about
+  translation: "Über mich"
+- id: postedOnDate
+  translation: "Veröffentlicht am {{ . }}"
+- id: lastModified
+  translation: "Zuletzt verändert am {{ . }}"
+- id: translationsLabel
+  translation: "Andere Sprachen: "
+- id: translationsSeparator
+  translation: ", "
+- id: more
+  translation: "Weitere {{ . }}"
+- id: readMore
+  translation: "Weiterlesen"
+- id: moreBlog
+  translation: "Weitere Beiträge"
+- id: olderBlog
+  translation: "Ältere Beiträge"
+- id: recentBlog
+  translation: "Aktuelle Beiträge"
+- id: newerBlog
+  translation: "Neuere Beiträge"
+- id: previousBlog
+  translation: "Vorheriger Beitrag"
+- id: nextBlog
+  translation: "Nächster Beitrag"
+- id: recentProjects
+  translation: "Projekte"
+- id: moreProjects
+  translation: "Weitere Projekte"
+- id: read
+  translation: "Lesezeit"
+- id: minutesShort
+  translation: "Min."
+- id: words
+  translation: "Wörter"
+- id: copyright
+  translation: "Copyright"
+- id: photoBy
+  translation: "Foto von"
+- id: photoOn
+  translation: "auf"
+- id: article
+  translation: "Artikel"
+- id: articles
+  translation: "Artikel"
+- id: paginationPrevious
+  translation: "Vorherige"
+- id: paginationNext
+  translation: "Nächste"
+- id: paginationFirst
+  translation: "Erste"
+- id: paginationLast
+  translation: "Letzte"
+
+# 404 page
+- id: pageNotFound
+  translation: "Ups! Diese Seite existiert nicht. Versuche es über die"
+- id: pageNotFoundTitle
+  translation: "Nicht gefunden"
+- id: pageNotFoundHome
+  translation: "Startseite"
+
+
+# Navigation
+- id: toggleNavigation
+  translation: "Navigation umschalten"
+- id: languageSwitcherLabel
+  translation: "Sprache"
+- id: gcseLabelShort
+  translation: "Suche"
+- id: gcseLabelLong
+  translation: "Suche {{ .Site.Title }}"
+- id: gcseClose
+  translation: "Schließen"
+- id: home
+  translation: "Startseite"
+
+# Staticman
+- id: noComment
+  translation: "Kein Kommentar"
+- id: oneComment
+  translation: "Kommentar"
+- id: moreComment
+  translation: "Kommentare"
+- id: useMarkdown
+  translation: "Du kannst Markdown-Syntax benutzen"
+- id: yourName
+  translation: "Dein Name"
+- id: yourEmail
+  translation: "Deine E-Mail-Adresse"
+- id: yourWebsite
+  translation: "Deine Webseite"
+
+# Delayed Disqus
+- id: show
+  translation: "Zeige"
+- id: comments
+  translation: "Kommentare"
+
+# Related posts
+- id: seeAlso
+  translation: "Siehe auch"
+
+# Table of contents
+- id: toc
+  translation: "Auf dieser Seite"
+
+# Search
+- id: ui_search
+  translation: "Durchsuche diese Seite..."
+- id: ui_no_results
+  translation: "Keine Ergebnisse für"
+
+# Draft
+- id: draft
+  translation: "Entwurf"

i18n/en.yaml

@@ -1,26 +1,34 @@
 # Content
+- id: about
+  translation: "About"
 - id: postedOnDate
   translation: "Posted on {{ . }}"
 - id: lastModified
-  translation: "(Last modified on {{ . }})"
+  translation: "Last modified on {{ . }}"
 - id: translationsLabel
   translation: "Other languages: "
 - id: translationsSeparator
   translation: ", "
+- id: more
+  translation: "More {{ . }}"
 - id: readMore
   translation: "Read More"
-- id: morePosts
+- id: moreBlog
   translation: "More Posts"
-- id: olderPosts
+- id: olderBlog
   translation: "Older Posts"
-- id: recentPosts
+- id: recentBlog
   translation: "Recent Posts"
-- id: newerPosts
+- id: newerBlog
   translation: "Newer Posts"
-- id: previousPost
+- id: previousBlog
   translation: "Previous Post"
-- id: nextPost
+- id: nextBlog
   translation: "Next Post"
+- id: recentProjects
+  translation: "Projects"
+- id: moreProjects
+  translation: "More Projects"
 - id: read
   translation: "read"
 - id: minutesShort
@@ -37,7 +45,14 @@
   translation: "Article"
 - id: articles
   translation: "Articles"
-
+- id: paginationPrevious
+  translation: "Previous"
+- id: paginationNext
+  translation: "Next"
+- id: paginationFirst
+  translation: "First"
+- id: paginationLast
+  translation: "Last"
 
 # 404 page
 - id: pageNotFound
@@ -47,7 +62,6 @@
 - id: pageNotFoundHome
   translation: "home page"
 
-
 # Navigation
 - id: toggleNavigation
   translation: "Toggle navigation"
@@ -59,6 +73,8 @@
   translation: "Search {{ .Site.Title }}"
 - id: gcseClose
   translation: "Close"
+- id: home
+  translation: "Home"
 
 # Staticman
 - id: noComment

i18n/nl.yaml

@@ -1,26 +1,34 @@
 # Content
+- id: about
+  translation: "Over mij"
 - id: postedOnDate
   translation: "Gepubliceerd op {{ . }}"
 - id: lastModified
-  translation: "(Laatst gewijzigd op {{ . }})"
+  translation: "Laatst gewijzigd op {{ . }}"
 - id: translationsLabel
   translation: "Overige talen: "
 - id: translationsSeparator
   translation: ", "
+- id: more
+  translation: "Meer {{ . }}"
 - id: readMore
   translation: "Lees meer"
-- id: morePosts
+- id: moreBlog
   translation: "Meer berichten"
-- id: olderPosts
+- id: olderBlog
   translation: "Oudere berichten"
-- id: recentPosts
+- id: recentBlog
   translation: "Recente berichten"
-- id: newerPosts
+- id: newerBlog
   translation: "Nieuwere berichten"
-- id: previousPost
+- id: previousBlog
   translation: "Vorig bericht"
-- id: nextPost
+- id: nextBlog
   translation: "Volgend bericht"
+- id: recentProjects
+  translation: "Projecten"
+- id: moreProjects
+  translation: "Meer projecten"
 - id: read
   translation: "leestijd"
 - id: minutesShort
@@ -37,7 +45,14 @@
   translation: "Artikel"
 - id: articles
   translation: "Artikelen"
-
+- id: paginationPrevious
+  translation: "Vorige"
+- id: paginationNext
+  translation: "Volgende"
+- id: paginationFirst
+  translation: "Eerste"
+- id: paginationLast
+  translation: "Laatste"
 
 # 404 page
 - id: pageNotFound
@@ -59,6 +74,8 @@
   translation: "Zoeken op {{ .Site.Title }}"
 - id: gcseClose
   translation: "Sluiten"
+- id: home
+  translation: "Home"
 
 # Staticman
 - id: noComment

layouts/_default/_markup/render-codeblock.html

@@ -0,0 +1,4 @@
+<div class="bg-light mb-3">
+    {{- $result := transform.HighlightCodeBlock . -}}
+    {{- $result.Wrapped -}}
+</div>

layouts/_default/baseof.html

@@ -1,3 +1,5 @@
+{{- with partial "utilities/GetMenu" . }}{{ $.Scratch.Set "sidebar" . }}{{ end -}}
+
 <!doctype html>
 <html lang="{{ .Site.Language.Lang }}" class="no-js">
     <head>
@@ -5,22 +7,50 @@
     </head>
 
     <body>
-        <div class="main d-flex flex-column">
-            <div class="justify-content-center">
-                <header>
-                    {{- partial "assets/navbar.html" . -}}
-                </header>
+        <div class="d-flex flex-column min-vh-100">
+            <div class="{{ if .Site.Params.navigation.fixed }}mb-4{{ end }}">
+                {{- partial "assets/navbar.html" (dict
+                    "page" .
+                    "fixed" (string .Site.Params.navigation.fixed)
+                    "color" (default "white" .Site.Params.navigation.color)
+                    "style" (default "light" .Site.Params.navigation.style))
+                -}}
             </div>
-                  
-            <div class="justify-content-center flex-grow-1">
+            {{ if .IsHome -}}
+                {{ if .Site.Params.home.fullCover -}}
+                    <div class="d-flex flex-fill {{ if .Site.Params.navigation.fixed }}mt-5{{ end }}">
+                        {{ block "featured" . }}{{ end -}}
+                    </div>
+                {{ else -}}
+                    <div class="{{ if .Site.Params.navigation.fixed }}mt-5{{ end }}">
+                        {{ block "featured" . }}{{ end -}}
+                    </div>
+                    <div class="d-flex flex-column flex-fill">
                         {{ block "main" . }}{{ end -}}
                     </div>
-                  
-            <div class="justify-content-center">
+                    <div class="">
                         {{- partial "footer/social.html" . -}}
                         {{- partial "footer/footer.html" . -}}
                     </div>
+                {{ end -}}
+            {{ else -}}
+                <div class="d-flex flex-column flex-fill {{ if .Site.Params.navigation.fixed }}mt-5{{ end }}">
+                    {{ block "main" . }}{{ end -}}
                 </div>
+                <div class="">
+                    {{- partial "footer/social.html" . -}}
+                    {{- partial "footer/footer.html" . -}}
+                </div>
+            {{ end -}}
+        </div>
+
+        {{ if and .IsHome .Site.Params.home.fullCover -}}
+            <div class="">
+                {{ block "main" . }}{{ end -}}
+            </div>
+            {{- partial "footer/social.html" . -}}
+            {{- partial "footer/footer.html" . -}}
+        {{ end -}}
 
         {{- partialCached "footer/scripts.html" . -}}
     </body>

layouts/_default/list.html

@@ -1,22 +1,9 @@
-{{ define "main" -}}
-    <div class="p-4">
-        <h1>{{ .Title }}</h1>
-        <div class="container-fluid p-0">
-            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4">
-                {{ $max := sub (len .Pages) 1 -}}
-                {{ range $index, $element := (.Paginate .RegularPagesRecursive).Pages -}}
-                    <div class="col">
-                        {{- partial "assets/blog-card.html" $element -}}
-                    </div>
-                    {{ if (lt $index $max) -}}
-                        <div class="col d-block d-sm-none">
-                            <hr>
-                        </div>
-                    {{ end -}}
-                {{ end -}}
-            </div>
-        </div>
-
-        {{- partial "assets/pagination.html" . -}}
-    </div>
-{{ end -}}
+{{- define "main" -}}
+    {{- partial "assets/section-list.html" (dict 
+        "page" .
+        "section" .Section
+        "home" false
+        "title" .Title
+        "paginate" true)
+    -}}
+{{- end -}}

layouts/_default/single.html

@@ -1,47 +1,47 @@
-{{ define "main" -}}
+{{- define "partials/header.html" -}}
+    {{ if site.Params.navigation.breadcrumb }}{{ partial "breadcrumb.html" . }}{{ end -}}
+    {{ if in (slice "docs" "minimal") .Layout }}
+        <h1>{{ .Title }}</h1>
+    {{ else }}
         {{ $lastmodstr := (partial "utilities/date.html" (dict "date" .Lastmod "format" "long")) -}}
         {{ $datestr := (partial "utilities/date.html" (dict "date" .Date "format" "long")) -}}
-    
-    <div class="container-fluid">
-        <div class="row row-cols-1 row-cols-sm-3 align-items-center p-3">
-            <div class="col col-md-2 d-none d-md-block"></div>
-            <div class="col col-sm-12 col-md-8">
-                {{ range (.GetTerms "tags") -}}
-                    <a class="btn btn-light btn-sm" href="{{ (path.Join .Page.RelPermalink) | relURL }}" role="button">{{ .LinkTitle }}</a>    
-                {{ end -}}
-
         <h1>{{ .Title }}</h1>
         <small class="text-muted text-uppercase">
             {{ $datestr | i18n "postedOnDate" -}}
-                    {{ if ne $datestr $lastmodstr -}}
-                        &nbsp{{ $lastmodstr | i18n "lastModified" }}
-                    {{ else -}}
-                        &nbsp;&bull;&nbsp;
-                    {{ end -}}
-                    {{ .ReadingTime }}&nbsp;{{ i18n "minutesShort" }} {{ i18n "read" }}
-                    &nbsp;&bull;
-                    {{ .WordCount }}&nbsp;{{ i18n "words" }}
+            {{ if ne $datestr $lastmodstr -}}&nbsp;({{ $lastmodstr | i18n "lastModified" }}){{ end }} &bull;
+            {{ .ReadingTime | lang.FormatNumber 0 }}&nbsp;{{ i18n "minutesShort" }} {{ i18n "read" }} &bull;
+            {{ .WordCount | lang.FormatNumber 0 }}&nbsp;{{ i18n "words" }}
         </small>
-            </div>
-            <div class="col col-md-2 d-none d-md-block"></div>
-        </div>    
 
+        <div class="mt-3">
+            {{ range (.GetTerms "tags") -}}
+                <a class="btn btn-light btn-sm" href="{{ (path.Join .Page.RelPermalink) | relURL }}" role="button">{{ .LinkTitle }}</a>    
+            {{ end -}}
+        </div>
+    {{ end }}
+{{ end -}}
+
+{{ define "partials/body.html" -}}
+    {{ if eq .Layout "docs"}}
+        <p class="lead mb-5">{{ .Description }}</p>
+        {{ .Content }}
+    {{ else }}
+        <p class="lead mb-5 mt-3">{{ .Description }}</p>
         {{ if .Params.thumbnail -}}
-            <div class="row row-cols-1 row-cols-sm-3 align-items-center p-3">
-                <div class="col col-md-2 d-none d-md-block"></div>
-                <div class="col col-sm-12 col-md-8">
             {{- $credits := "" -}}
             {{- if .Params.photoCredits }}{{ if .Params.PhotoSource }}{{ $credits = printf "%s %s %s %s" (T "photoBy") .Params.photoCredits (T "photoOn") .Params.PhotoSource }}{{ end }}{{ end -}}
             {{- partial "image.html" (dict "url" .Params.thumbnail "ratio" "21x9" "outerClass" "img-wrap" "innerClass" "rounded" "title" .Params.title "caption" $credits) -}}
-                </div>
-                <div class="col col-md-2 d-none d-md-block"></div>
-            </div>    
+        {{ end -}}
+        {{ .Content }}
+{{ end }}
 {{ end -}}
 
-        <div class="row row-cols-1 row-cols-sm-2 p-3">
-            <div class="col col-md-2 d-none d-md-block"></div>
-            <div class="col col-sm-12 col-md-8">
-                {{ .Content }}
+{{ define "partials/footer.html" -}}
+    {{ if eq .Layout "docs"}}
+        <div class="mt-5 small">
+            {{ partial "utilities/git.html" . }}
+        </div>
+    {{ else }}
         <div class="row row-cols-2 mt-5">
             <div class="col">
                 {{ with .NextInSection -}}
@@ -60,24 +60,57 @@
                 {{ end -}}
             </div>
         </div>
+    {{ end }}
+    {{- if and .Site.Params.comments.enabled .Params.showComments | default true -}}
+        <hr>
+        {{ partial "assets/comments.html" . }}
+    {{ end -}}
+{{ end -}}
+
+{{ define "main" -}}
+    {{- $menu := .Scratch.Get "sidebar" -}}
+    {{- $sidebar := .Site.Params.navigation.sidebar | default true -}}
+    {{ if and $menu $sidebar -}}
+        <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvass-sidebar" aria-labelledby="offcanvas-label">
+            <div class="offcanvas-header">
+                <h5 class="offcanvas-title" id="offcanvas-label">{{ strings.FirstUpper .Section }}</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
             </div>
-            <div class="col col-md-2 d-none d-md-block">
-                {{- if and .Site.Params.toc.enabled .Params.includeToc | default true -}}
+            <div class="offcanvas-body">
+                {{ partial "assets/sidebar" (dict "page" . "menu" $menu) }}
+            </div>
+        </div>
+    
+        <div class="container-fluid">
+            <div class="row row-cols-md-2 row-cols-lg-3">
+                <div class="col col-md-3 col-lg-2 d-none mt-5 d-md-block">
+                    {{ partial "assets/sidebar" (dict "page" . "menu" $menu) }}
+                </div>
+                <div class="col col-md-9 col-lg-8 mb-5 p-4">
+                    {{ partial "partials/header.html" . }}
+                    {{ partial "partials/body.html" . }}
+                    {{ partial "partials/footer.html" . }}
+                </div>
+                <div class="col col-lg-2 d-none d-lg-block mt-5">
+                    {{- if and .Site.Params.navigation.toc .Params.includeToc | default true -}}
                         {{ partial "assets/toc.html" . -}}
                     {{ end -}}
                 </div>
             </div>
         </div>
-
-    {{- if and .Site.Params.comments.enabled .Params.showComments | default true -}}
+    {{ else }}
         <div class="container-fluid">
-            <div class="row row-cols-1 row-cols-sm-2 p-3">
+            <div class="row row-cols-1 row-cols-sm-3">
                 <div class="col col-md-2 d-none d-md-block"></div>
                 <div class="col col-sm-12 col-md-8">
-                    <hr>
-                    {{ partial "assets/comments.html" . }}
+                    {{ partial "partials/header.html" . }}
+                    {{ partial "partials/body.html" . }}
+                    {{ partial "partials/footer.html" . }}
                 </div>
                 <div class="col col-md-2 d-none d-md-block">
+                    {{- if and .Site.Params.navigation.toc .Params.includeToc | default true -}}
+                        {{ partial "assets/toc.html" . -}}
+                    {{ end -}}
                 </div>
             </div>    
         </div>

layouts/docs/list.html

@@ -0,0 +1,10 @@
+<!-- Hugo considers all first-level directories to be a root section. As such, as "/en/docs/" is considered to be a
+     branch bundle, despite it not having an "_index.md" page. Being a branch bundle, Hugo uses a list template to
+    render the "/en/docs/" page. This overwrites the alias defined in "/en/docs/<ver>/getting-started/introduction/". 
+    
+    This empty list template is deliberately added to the "/layouts/docs/" directory to prevent Hugo from generating 
+    a list page for "/en/docs/" (all other nested sections). This enables the alias defined in 
+    "/en/docs/<version>/getting-started/introduction/".
+
+    See https://gohugo.io/content-management/sections/ for more details.
+    -->

layouts/index.html

@@ -1,49 +1,24 @@
-{{ define "main" }}
-    {{- partial "intro.html" . -}}
+{{- define "featured" -}}
+    {{- partial "home/featured.html" . -}}
+{{- end -}}
 
-    {{ range $section, $taxonomy := .Site.Sections -}}
-        {{ if eq $section 0 -}}
-            <div class="p-4">
-                <h1>{{ T "recentPosts" }}</h1>
-                <div class="container-fluid p-0">
-                    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3">
-                        {{ $items := first 3 ($taxonomy.Pages.ByDate.Reverse) -}}
-                        {{ $max := sub (len $items) 1 -}}
-                        {{ range $index, $element := $items -}}
-                            <div class="col gx-4">
-                                {{- partial "assets/blog-card.html" $element -}}
-                            </div>
-                            {{ if (lt $index $max) -}}
-                            <div class="col d-block d-sm-none">
-                                <hr>
-                            </div>
-                            {{ end -}}
-                        {{ end -}}
-                    </div>
-                </div>
+{{- define "main" -}}
+    {{- $page := . -}}
+    {{- range $index, $section := site.Params.home.sections -}}
+        {{- $pages := where site.RegularPages "Type" "in" $section -}}
+        {{- $sectionURL := "" -}}
+        {{- range $page := first 1 $pages -}}
+            {{- $sectionURL = $page.Parent.RelPermalink -}}
+        {{- end -}}
 
-                {{ if gt (len $taxonomy.Pages) 3 -}}
-                    <a class="btn btn-outline-primary" href="{{ $taxonomy.Permalink | safeURL }}" role="button">{{ T "morePosts" }}</a>    
-                {{ end -}}
-            </div>
-        {{ else -}}
-            <div class="p-4">
-                <h1>{{ $taxonomy.Title }}</h1>
-                <div class="container-fluid">
-                    <div class="row row-cols-1 g-4">
-                        {{ $items := first 3 ($taxonomy.Pages) -}}
-                        {{ range $index, $element := $items -}}
-                            <div class="col p-0">
-                                {{- partial "assets/project-card.html" $element -}}
-                            </div>
-                        {{ end -}}
-                    </div>
-                </div>
+        {{- $moreTitle := (T (printf "more%s" (strings.FirstUpper $section))) -}}
 
-                {{ if gt (len $taxonomy.Pages) 3 -}}
-                    <a class="btn btn-outline-primary" href="{{ $taxonomy.Permalink | safeURL }}" role="button">More {{ $taxonomy.Title }}</a>
-                {{ end -}} 
-            </div>
-        {{ end -}}
-    {{ end -}}
-{{ end -}}
+        {{- partial "assets/section-list.html" (dict 
+            "page" $page 
+            "section" $section 
+            "home" true 
+            "moreTitle" $moreTitle
+            "sectionURL" $sectionURL)
+        -}}
+    {{- end -}}
+{{- end -}}

layouts/partials/assets/blog-card.html

@@ -1,25 +0,0 @@
-<div class="card border-0">
-    {{ if .Params.thumbnail -}}
-        <a href="{{ .Permalink }}" class="text-decoration-none link-dark">
-            {{- partial "image.html" (dict "url" .Params.thumbnail "ratio" "16x9" "outerClass" "card-img-wrap" "innerClass" "card-img-top" "title" .Params.title) -}}
-        </a>
-    {{ end }}
-    <div class="card-body d-flex flex-column p-0">
-        <p class="card-text">
-            <small class="text-muted text-uppercase">
-                {{- partial "utilities/date.html" (dict "date" .Date "format" "long") -}}
-                &bull; {{ .ReadingTime }}&nbsp;{{ i18n "minutesShort" }} {{ i18n "read" }}
-                {{ if isset .Params "tags" -}}
-                    {{ range first 1 (.GetTerms "tags") -}}
-                        &bull; <a href="{{ (path.Join .Page.RelPermalink) | relURL }}" class="text-decoration-none text-primary" aria-label="Tag: {{ .LinkTitle }}">{{ .LinkTitle }}</a>
-                    {{ end -}}
-                {{ end -}}
-            </small>
-        </p>
-
-        <a href="{{ .Permalink }}" class="text-decoration-none link-dark">
-            <p class="card-title fs-5 fw-bold">{{ .Params.title }}</p>
-            <p class="card-text mb-4">{{ .Params.description }}</p>
-        </a>
-    </div>
-</div>

layouts/partials/assets/card-group.html

@@ -0,0 +1,135 @@
+<!-- 
+    Displays a grid of Bootstrap cards with 1 to 5 columns. The cards are rendered using a provided list of pages.
+    Cards on the same row are aligned to each other. The grid renders pages up to a provided maximum amount. The
+    remaining items are accessible via either a paginator or button to a list page (default behavior). Be aware a page
+    can only contain one paginator at a time.
+    
+    The shortcode supports the following arguments:
+    "page"          Required context of the current page.
+    "list"          Required array of pages.
+    "max"           Required maximum number of cards to display.
+    "cols"          Required number of columns for the grid, must be a value between 1 and 5.
+    "title"         Optional title of the card group.
+    "paginate"      Optional flag indicating if pagination should be added to the card group, if the list exceeds the
+                    maximum number of cards to display. 
+    "href"          Optional address for the button or hyperlink. If set, a button is added if the list exceeds the
+                    maximum number of cards to display.
+    "hrefTitle"     Optional title of the button or hyperlink as companion to href.
+
+    In addition, the following arguments are passed to the individual cards.
+    "class"         Optional class attribute of the card element, e.g. “w-50”.
+    "color":        Optional theme color of the card, either "primary", "secondary", "success", "danger",
+                    "warning", "info", "light", or "dark". By default, no color is specified.
+    "padding":      Optional padding of the content, either "0", "1", "2", "3", "4", "5", or "auto" (default).
+    "header"        Optional header components of the card, displayed in small caps. Supported values are "full"
+                    (default), "publication", "tags", and "none".
+    "footer"        Optional footer components of the card, displayed in small caps. Supported values are "full",
+                    "publication", "tags", and "none" (default).
+    "orientation"   Optional placecement of the thumbnail, either "stacked" (default), "horizontal", or "none".
+-->
+
+{{- $page := .page -}}
+{{- if ne (printf "%T" $page) "*hugolib.pageState" -}}
+    {{- errorf "Invalid value for param 'page'" -}}
+{{- end -}}
+
+{{ $list := .list }}
+{{- if ne (printf "%T" $list) "page.Pages" -}}
+    {{- errorf "Invalid value for param 'items'" -}}
+{{- end -}}
+
+{{- $count := len $list -}}
+{{- $max := .max -}}
+{{- if ne (printf "%T" $max) "int" -}}
+    {{- errorf "Invalid value for param 'max'" -}}
+{{- end -}}
+{{- $max = math.Min $max $count -}}
+
+{{- $cols := .cols -}}
+{{- if or (lt $cols 1) (gt $cols 5) -}}
+    {{- errorf "Invalid value for param 'cols': %d" $cols -}}
+{{- end -}}
+{{- $colGrid := "row-cols-1" -}}
+{{- if eq $cols 2 }}{{ $colGrid = "row-cols-1 row-cols-sm-1 row-cols-md-2" -}}
+{{- else if eq $cols 3 }}{{ $colGrid = "row-cols-1 row-cols-sm-2 row-cols-md-3" -}}
+{{- else if eq $cols 4 }}{{ $colGrid = "row-cols-1 row-cols-sm-2 row-cols-md-4" -}}
+{{- else if eq $cols 5 }}{{ $colGrid = "row-cols-1 row-cols-sm-3 row-cols-md-5" }}{{ end -}}
+
+{{- $title := .title -}}
+
+{{ $paginate := false }}
+{{ with .paginate }}
+    {{ if ne (printf "%T" .) "bool" }}
+        {{ errorf "Invalid value for param 'paginate'"}}
+    {{ end }}
+    {{ $paginate = . }}
+{{ end }}
+{{ if not $paginate }}
+    {{ $list = first $max $list }}
+{{ end }}
+
+{{- $moreURL := .href -}}
+{{- $moreTitle := .hrefTitle -}}
+
+{{- $class := .class -}}
+{{- $color := .color -}}
+{{- $padding := .padding -}}
+{{- $header := .header -}}
+{{- $footer := .footer -}}
+{{- $orientation := .orientation -}}
+
+<div class="container-fluid p-4">
+    {{ with $title }}<h1>{{ . }}</h1>{{ end }}
+    {{ if $paginate }}
+        <div class="row {{ $colGrid }}">
+            {{ $paginator := $page.Paginate $list }}
+            {{ range $index, $element := first $paginator.PageSize (after (mul (sub $paginator.PageNumber 1) $paginator.PageSize) $list) }}
+                <div class="col pt-3 pb-3">
+                    {{- partial "assets/card.html" (dict
+                        "path" $element.File.Path
+                        "class" (printf "h-100 %s" $class)
+                        "color" $color
+                        "padding" $padding
+                        "header" $header
+                        "footer" $footer
+                        "orientation" $orientation
+                        )
+                    -}}
+                </div>
+                {{- if (lt $index (sub $max 1)) -}}
+                    <div class="col d-block d-sm-none">
+                        <hr>
+                    </div>
+                {{- end -}}
+            {{ end }}
+        </div>
+        {{- if gt $paginator.TotalPages 1 -}}
+            {{- partial "assets/pagination.html" $page -}}
+        {{- end -}} 
+    {{ else }}
+        <div class="row {{ $colGrid }}">
+            {{ range $index, $element := $list }}
+                <div class="col pt-3 pb-3">
+                    {{- partial "assets/card.html" (dict
+                        "path" $element.File.Path
+                        "class" (printf "h-100 %s" $class)
+                        "color" $color
+                        "padding" $padding
+                        "header" $header
+                        "footer" $footer
+                        "orientation" $orientation
+                        )
+                    -}}
+                </div>
+                {{- if (lt $index (sub $max 1)) -}}
+                    <div class="col d-block d-sm-none">
+                        <hr>
+                    </div>
+                {{- end -}}
+            {{ end }}
+        </div>
+        {{ if gt $count $max }}
+            <a class="btn btn-outline-primary" href="{{ $moreURL| safeURL }}" role="button">{{ $moreTitle }}</a>
+        {{ end }}
+    {{ end }}
+</div>

layouts/partials/assets/card.html

@@ -0,0 +1,178 @@
+<!-- 
+    Displays a Bootstrap card. Either specify a valid path, or set the arguments title, href, header, description, and
+    thumbnail individually. The latter arguments override any page attributes.
+    
+    The shortcode supports the following arguments:
+    "path"          Optional path of the page, override with other parameters.
+    "title"         Required title of the card.
+    "href"          Required address for the button or hyperlink.
+    "class"         Optional class attribute of the card element, e.g. “w-50”.
+    "color":        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":      Optional padding of the content, either "0", "1", "2", "3", "4", "5", or "auto" (default).
+    "header"        Optional header components of the card, displayed in small caps. Supported values are "full"
+                    (default), "publication", "tags", and "none".
+    "footer"        Optional footer components of the card, displayed in small caps. Supported values are "full",
+                    "publication", "tags", and "none" (default).
+    "description"   Optional description of the card.
+    "thumbnail"     Optional thumbnail image url, displayed on top or the left of the card.
+    "icon"          Optional Font Awesome icon, displayed on top or the left of the card.
+    "orientation"   Optional placecement of the thumbnail, either "stacked" (default), "horizontal", or "none".
+-->
+
+<!-- Inline partial to render the card's body -->
+{{- define "partials/card-body.html" -}}
+    {{- $title := .title -}}
+    {{- $href := .href -}}
+    {{- $color := .color -}}
+    {{- $description := .description -}}
+    
+    <a href="{{ $href }}" class="{{ if $color }}link-bg-{{ $color }}{{ else }}link-dark{{ end }}">
+        <p class="card-title fs-5 fw-bold">{{ $title }}</p>
+        {{ with $description }}<p class="card-text mb-4 {{ if $color }}link-bg-{{ $color }}{{ else }}link-dark{{ end }}">{{ . }}</p>{{ end -}}
+    </a>
+{{- end -}}
+
+<!-- Inline partial to render the card's header or footer -->
+{{- define "partials/card-caption.html" -}}
+    {{- $page := .page -}}
+    {{- $keywords := .keywords -}}
+    {{- $color := .color -}}
+    {{- $maxTags := 0 -}}
+    {{- $caption := "" -}}
+
+    {{- if eq $keywords "full" }}{{ $maxTags = 1 -}}
+    {{- else if eq $keywords "tags" }}{{ $maxTags = 3 }}{{ end -}}
+
+    <p class="card-text"><small class="{{ if $color }}text-bg-{{ $color }}{{ else }}text-muted{{ end }} text-uppercase">
+        {{- if in (slice "full" "publication") $keywords -}}
+            {{- partial "utilities/date.html" (dict "date" $page.Date "format" "long") -}}&nbsp;&bull;
+            {{- $page.ReadingTime | lang.FormatNumber 0 }} {{ i18n "minutesShort" }} {{ i18n "read" -}}
+        {{- end -}}
+
+        {{- if eq $keywords "full" -}}
+            {{ if gt (len ($page.GetTerms "tags")) 0 }}&nbsp;&bull;&nbsp;{{ end -}}
+        {{- end -}}
+
+        {{- $link := "text-decoration-none link-primary" -}}
+        {{- if $color }}{{ $link = printf "link-bg-%s" $color }}{{ end -}}
+
+        {{- range $index, $tag := first $maxTags ($page.GetTerms "tags") -}}
+            {{- if gt $index 0 }}&bull;&nbsp;{{ end -}}
+            <a href="{{ (path.Join $tag.Page.RelPermalink) | relURL }}" class="{{ $link }}" aria-label="tag: {{ $tag.LinkTitle }}">{{ $tag.LinkTitle }}</a>
+        {{- end -}}
+    </small></p>
+{{- end -}}
+
+{{- $page := "" }}
+{{- if .path }}
+    {{- $page = site.GetPage .path }}
+    {{- if not $page }}
+        {{- errorf "Cannot find page: %s" .path -}}
+    {{- end }}
+{{- end }}
+
+{{- $title := .title -}}
+{{- $href := .href -}}
+{{- $description := .description -}}
+{{- $thumbnail := .thumbnail -}}
+{{- $icon := .icon -}}
+
+{{- $color := "" -}}
+{{- with .color }}{{ $color = . }}{{ end -}}
+{{- if $color -}}
+    {{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" -}}
+    {{- if not (in $supportedColors $color) -}}
+        {{- errorf "Invalid value for param 'color': %s" $color -}}
+    {{- end -}}
+{{- end -}}
+
+{{- $header := "full" -}}
+{{- with .header }}{{ $header = . }}{{ end -}}
+{{- $supportedKeywords := slice "full" "publication" "tags" "none" -}}
+{{- if not (in $supportedKeywords $header) -}}
+    {{- errorf "Invalid value for param 'header': %s" $header -}}
+{{- end -}}
+
+{{- $footer := "none" -}}
+{{- with .footer }}{{ $footer = . }}{{ end -}}
+{{- if not (in $supportedKeywords $footer) -}}
+    {{- errorf "Invalid value for param 'footer': %s" $footer -}}
+{{- end -}}
+
+{{- with $page -}}
+    {{- if not $title }}{{ $title = .Title }}{{ end -}}
+    {{- if not $href }}{{ $href = .Permalink  }}{{ end -}}
+    {{- if not $description }}{{ $description = .Description }}{{ end -}}
+    {{- if not $thumbnail }}{{ $thumbnail = .Params.thumbnail }}{{ end -}}
+    {{- if not $icon }}{{ $icon = .Params.icon }}{{ end -}}
+{{- end -}}
+
+{{- if not $href -}}
+    {{- errorf "Missing value for param 'href'" -}}
+{{- end -}}
+
+{{- $class := .class -}}
+
+{{- $padding := "auto" -}}
+{{- with .padding }}{{ $padding = . }}{{ end -}}
+{{- $supportedPaddings := slice "0" "1" "2" "3" "4" "5" "auto" -}}
+{{- if not (in $supportedPaddings $padding) -}}
+    {{- errorf "Invalid value for param 'padding': %s" $padding -}}
+{{- end -}}
+
+{{- $orientation := "stacked" -}}
+{{- with .orientation }}{{ $orientation = . }}{{ end -}}
+{{- $supportedOrientations := slice "stacked" "horizontal" "none" -}}
+{{- if not (in $supportedOrientations $orientation) -}}
+    {{- errorf "Invalid value for param 'orientation': %s" $orientation -}}
+{{- end -}}
+{{- if eq $orientation "none" }}{{ $thumbnail = "" }}{{ $icon = "" }}{{ end -}}
+
+{{- if eq $orientation "horizontal" -}}
+    <div class="card mb-3 {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
+        <div class="row g-0">
+            <div class="col-4">
+                {{- if $thumbnail -}}
+                    <a href="{{ $href }}">
+                        {{- partial "image.html" (dict "url" $thumbnail "ratio" "1x1" "outerClass" "h-100 card-img-wrap" "innerClass" "rounded-start card-img-h100" "title" $title) -}}
+                    </a>
+                {{- else if $icon -}}
+                    <div class="pt-{{ $padding }} ps-{{ $padding }} pe-{{ $padding }}">
+                        <a href="{{ $href }}"> 
+                            {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-4x text-secondary" $icon)) -}}
+                        </a>
+                    </div>
+                {{- end -}}
+                </div>
+            <div class="col-8">
+                <div class="card-body d-flex p-{{ $padding }} flex-column h-100">
+                    <div>{{ partial "card-caption.html" (dict "page" $page "keywords" $header "color" $color) }}</div>
+                    <div class="h-100">
+                        {{- partial "card-body.html" (dict "title" $title "href" $href "color" $color "description" $description) -}}
+                    </div>
+                    <div>{{ partial "card-caption.html" (dict "page" $page "keywords" $footer "color" $color) }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+{{- else -}}
+    <div class="card {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
+        {{- if $thumbnail -}}
+            <a href="{{ $href }}">
+                {{- partial "image.html" (dict "url" $thumbnail "ratio" "16x9" "outerClass" "card-img-wrap" "innerClass" "card-img-top" "title" $title) -}}
+            </a>
+        {{- else if $icon -}}
+            <div class="pt-{{ $padding }} ps-{{ $padding }} pe-{{ $padding }}">
+                <a href="{{ $href }}"> 
+                    {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-4x text-secondary" $icon)) -}}
+                </a>
+            </div>
+        {{- end -}}
+        <div class="card-body d-flex flex-column p-{{ $padding }}">
+            {{- partial "card-caption.html" (dict "page" $page "keywords" $header "color" $color) -}} 
+            {{- partial "card-body.html" (dict "title" $title "href" $href "color" $color "description" $description) -}}
+            {{- partial "card-caption.html" (dict "page" $page "keywords" $footer "color" $color) -}}
+        </div>
+    </div>
+{{- end -}}

layouts/partials/assets/icon.html

@@ -0,0 +1,16 @@
+{{- $icon := .icon -}}
+{{- if not $icon -}}
+    {{- errorf "Expected value for param 'icon'" -}}
+{{- end -}}
+
+{{- $icon_class := split $icon " " -}}
+{{- $attr := delimit (after 1 $icon_class) " " -}}
+{{- if eq (index $icon_class 0) "fas" -}}
+    <i class="fa-solid fa-{{ $attr}}"></i>
+{{- else if eq (index $icon_class 0) "fab" -}}
+    <i class="fa-brands fa-{{ $attr }}"></i>
+{{- else if eq (index $icon_class 0) "fa" -}}
+    <i class="fa-regular fa-{{ $attr }}"></i>
+{{- else -}}
+    {{- errorf "Unrecognized icon class: %s" $icon_class -}}
+{{- end -}}

layouts/partials/assets/navbar.html

@@ -1,63 +1,176 @@
-<nav class="navbar navbar-expand-sm bg-white navbar-light m-3">
+<!-- 
+    Displays a navigation header with a toggler. The partial supports the following arguments:
+    "page"          Required object reference to the current page.
+    "menus"         Optional name of the menu configuration, defaults to "main".
+    "size"          Optional size of the button, either "sm", "md" (default), or "lg".
+    "style"         Optional style of the navbar, either "light" (default) or "dark".
+    "fixed"         Optional flag to indicate the navbar should stick to the top, defaults to false.
+    "color"         Optional background color of the navbar, either "primary", "secondary", "success",
+                    "danger", "warning", "info", "light", "dark", "white" or "black". The default color is none.
+    "search"        Optional flag to include a search input, default is "true".
+    "logo"          Optional address of the logo image, defaults to the parameter "logo" set in the "main" section of
+                    the site's parameter configuration. 
+    "title"         Optional brand title, displayed when the logo is not set. Defaults to the site's title.
+-->
+
+{{- $supportedFlags := slice "true" "false" -}}
+
+{{- $id := 0 -}}
+{{- with .id }}{{ $id = . }}{{ end -}}
+
+{{- $page := .page -}}
+{{- if not $page -}}
+    {{- errorf "Missing value for param 'page'" -}}
+{{- end -}}
+
+{{- $menuName := "main" }}
+{{- with .menus }}{{ $menuName = .}}{{ end -}}
+{{- $menus := index site.Menus $menuName -}}
+{{- if or (ne (printf "%T" $menus) "navigation.Menu") (ne (index $menus 0).Menu $menuName) -}}
+    {{- errorf "Invalid value for param 'menus': %s" $menuName -}}
+{{- end -}}
+
+{{- $size := "md" -}}
+{{- with .size }}{{ $size = . }}{{ end -}}
+{{- $supportedSizes := slice "xs" "sm" "md" "lg" "xl" -}}
+{{- if not (in $supportedSizes $size) -}}
+    {{- errorf "Invalid value for param 'size': %s" $size -}}
+{{- end -}}
+
+{{- $style := "light" -}}
+{{- with .style }}{{ $style = . }}{{ end -}}
+{{- $supportedStyles := slice "light" "dark" -}}
+{{- if not (in $supportedStyles $style) -}}
+    {{- errorf "Invalid value for param 'style': %s" $style -}}
+{{- end -}}
+
+{{- $fixedParam := "false" -}}
+{{- $fixed := false -}}
+{{- with .fixed }}{{ $fixedParam = . }}{{ end -}}
+{{- if in $supportedFlags $fixedParam -}}
+    {{- if eq $fixedParam "true" }}{{ $fixed = true }}{{ else }}{{ $fixed = false }}{{ end -}}
+{{- else -}}
+    {{- errorf "Invalid value for param 'fixed': %s" $fixedParam -}}
+{{- end -}}
+
+{{- $inverseStyle := "light" -}}
+{{- if eq $style "light" }}{{ $inverseStyle = "dark" }}{{ end -}}
+
+{{- $color := "" -}}
+{{- with .color -}}
+    {{- $color = . -}}
+    {{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" -}}
+    {{- if not (in $supportedColors $color) -}}
+        {{- errorf "Invalid value for param 'color': %s" $color -}}
+    {{- end -}}
+{{- end -}}
+
+{{- $search := default true site.Params.navigation.search -}}
+{{- with .search -}}
+    {{- $searchParam := . -}}
+    {{- if in $supportedFlags $searchParam -}}
+        {{- if eq $searchParam "true" }}{{ $search = true }}{{ else }}{{ $search = false }}{{ end -}}
+    {{- else -}}
+        {{- errorf "Invalid value for param 'search': %s" $searchParam -}}
+    {{- end -}}
+{{- end -}}
+
+{{- $logo := site.Params.navigation.logo -}}
+{{- with .logo }}{{ $logo = . }}{{ end -}}
+
+{{- $title := site.Title -}}
+{{- if .title -}}
+    {{- $title = .title -}}
+    {{- if not .logo }}{{ $logo = "" }}{{ end -}}
+{{- end -}}
+
+{{- $pre := .Pre -}}
+{{- $post := .Post -}}
+
+<nav class="navbar navbar-expand-{{ $size }} navbar-{{ $style }} {{ with $color }}bg-{{ . }}{{ end }} {{ if $fixed }}fixed-top{{ end }} p-3">
 	<div class="container-fluid">
-        <a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}">
-            {{ if .Site.Params.main.logo -}}
-                <img src="{{ .Site.Params.main.logo }}" alt="{{ .Site.Title }} logo" height="30">
-            {{ else -}}
-                <span class="fw-bold">{{ .Site.Title }}</span>
-            {{ end -}}
+        <!-- Insert sidebar toggler when applicable -->
+        {{- if $page.Scratch.Get "sidebar" -}}
+            <button class="navbar-toggler collapsed ms-n3" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="Toggle docs navigation">
+                {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
+            </button>
+        {{- end -}}
+
+        <!-- Insert the brand logo or name -->
+        <a class="navbar-brand mx-auto" href="{{ site.Home.RelPermalink }}">
+            {{- if $logo -}}
+                <img src="{{ $logo }}" alt="{{ $title }} logo" height="30">
+            {{- else -}}
+                <span class="fw-bold">{{ $title }}</span>
+            {{- end -}}
         </a>
 
-		<button class="navbar-toggler collapsed me-n3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
-			aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-			<span class="toggler-icon top-bar"></span>
-			<span class="toggler-icon middle-bar"></span>
-			<span class="toggler-icon bottom-bar"></span>
+        <!-- Insert main navigation toggler -->
+		<button class="navbar-toggler collapsed me-n3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent-{{ $id }}"
+			aria-controls="navbarSupportedContent-{{ $id }}" aria-expanded="false" aria-label="Toggle main navigation">
+			<span class="toggler-icon top-bar bg-{{ $inverseStyle }}"></span>
+			<span class="toggler-icon middle-bar bg-{{ $inverseStyle }}"></span>
+			<span class="toggler-icon bottom-bar bg-{{ $inverseStyle }}"></span>
 		</button>
 
-        <div class="navbar-collapse collapse" id="navbarSupportedContent">
-            {{ partial "assets/search-input.html" . -}}
+        <div class="navbar-collapse collapse" id="navbarSupportedContent-{{ $id }}">
+            <!-- Insert search input -->
+            {{- if $search }}{{ partial "assets/search-input.html" -}}{{ end -}}
+            
+            <!-- Render top-menu items (maximum depth of 2) -->
             <ul class="navbar-nav ms-auto">
-                {{ $currentPage := . -}}
-                {{ range .Site.Menus.main -}}
-                    {{ $active := or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) -}}
-                    {{ with .Page -}}
-                        {{ $active = or $active ( $.IsDescendant .)  -}}
-                    {{ end -}}
-                    {{ $pre := .Pre -}}
-                    {{ $post := .Post -}}
-                    {{ $url := urls.Parse .URL -}}
-                    {{ $baseurl := urls.Parse $.Site.Params.Baseurl -}}
+                {{- range $menu := $menus -}}
+                    {{- $menu_item_url := $menu.URL | relLangURL -}}
+                    {{- $page_url:= $page.RelPermalink | relLangURL -}}
+                    {{- $active := hasPrefix $page_url $menu_item_url -}}
 
+                    {{- $url := urls.Parse .URL -}}
+                    {{- $baseurl := urls.Parse $.Site.Params.Baseurl -}}
+                    {{- if .HasChildren -}}
+                        <li class="nav-item dropdown">
+                            <a class="nav-link {{ if $active }}link-dark{{ end }} dropdown-toggle" href="{{ .URL }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                                {{ .Name }}
+                            </a>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                {{- range .Children -}}
+                                    <li><a class="dropdown-item" href="{{ .URL }}">{{ .Name }}</a></li>
+                                {{- end -}}
+                            </ul>
+                          </li>
+                    {{- else -}}
                         <li class="nav-item">
-                        <a class="nav-link {{ if $active }}active{{ end }}" href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}" {{ if ne $url.Host $baseurl.Host }}target="_blank" {{ end }}>{{ with .Pre}}{{ $pre }}{{ end }}<span{{if $active }} class="active"{{end}}>{{ .Name }}</span>{{ with .Post}}{{ $post }}{{ end }}</a>
+                            {{- $external := ne $url.Host $baseurl.Host -}}
+                            <a class="nav-link {{ if $active }}active{{ end }}"
+                                href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}" {{ if $external }}target="_blank" {{ end }}>
+                                {{- with $pre}}{{ . }}{{ end -}}
+                                <span {{if $active }} class="active"{{end}}>{{ .Name }}</span>
+                                {{- with $post}}{{ . }}{{ end -}}
+                                {{- if $external }} {{ partial "assets/icon.html" (dict "icon" "fas up-right-from-square fa-2xs") }}{{ end -}}
+                            </a>
                         </li>
-                {{ end -}}
+                    {{- end -}}
+                {{- end -}}
 
-                {{ if .IsTranslated }}
-                {{ $currentLang := .Language.Lang }}
+                <!-- Insert language switcher if applicable -->
+                {{- if or $page.IsTranslated site.IsMultiLingual -}}
+                    {{- $currentLang := $page.Language.Lang -}}
                     <li class="nav-item dropdown">
                         <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                        <i class="fa-regular fa-globe"></i> {{ T "languageSwitcherLabel" }}
+                            {{- partial "assets/icon.html" (dict "icon" "fas globe") }} {{ T "languageSwitcherLabel" -}}
                         </a>
                         <ul class="dropdown-menu dropdown-menu-end ">
-                        {{ range .AllTranslations }}
+                            {{- if $page.IsTranslated -}}
+                                {{- range $page.AllTranslations -}}
                                     <li><a class="dropdown-item {{ if eq .Language.Lang $currentLang }}active{{ end }}" href="{{ .Permalink }}">{{ .Language.LanguageName  }}</a></li>
-                        {{ end -}}
-                    </ul>
-                  </li>
-                {{ else if .Site.IsMultiLingual }}
-                <li class="nav-item dropdown">
-                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                        <i class="fa-regular fa-globe"></i> {{ T "languageSwitcherLabel" }}
-                    </a>
-                    <ul class="dropdown-menu dropdown-menu-end">
-                        {{ range .Site.Languages }}
+                                {{- end -}}
+                            {{- else -}}
+                                {{- range site.Languages -}}
                                     <li><a class="dropdown-item" href="/{{ .Lang }}">{{ default .Lang .LanguageName }}</a></li>
-                        {{ end -}}
+                                {{- end -}}
+                            {{- end -}}
                         </ul>
                     </li>
-                {{ end -}}
+                {{- end -}}
             </ul>
         </div>
     </div>