Merge pull request #145 from gethinode/color

Sidebar

.eslintignore

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

.stylelintignore

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

README.md

@@ -11,8 +11,8 @@
     <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" />
@@ -54,17 +54,15 @@ Hinode is a clean documentation and blog theme for [Hugo][hugo], an open-source
 
 Additional features include:
 
-- Comments
-- Social links
-- Blog pagination
-- Code highlighting
-- Command prompt
-- Color customization
-- Language switcher
+- Support for multiple languages
+- Reusable Bootstrap components through configurable shortcodes and partials
+- Embedded comments through light-weight integration with GitHub via [utteranc.es][utterances]
+- Integrated sidebar navigation for content-heavy sections, such as documentation pages
+- Reponsive image handling for multiple screen sizes and resolutions
+- Optimized search results, scoring 100 points for SEO on [PageSpeed Insights][pagespeed]
+- Secure by default, scoring A+ on [Mozilla Observatory test][observatory]
 
-<!-- TODO: add tutorial deep-link 
-Detailed background information is available on the author's [personal blog][blog].
--->
+Detailed information about Hinode is available on the [official website][website].
 
 ## Prerequisites
 
@@ -74,56 +72,39 @@ Hinode requires Git, Node.js and npm for local development and testing. Download
 
 Start a new Hinode project in three steps:
 
-### 1. Create a new site
+1. Create a new site
 
-Hinode is available as a [child theme][repository_child], and a [main theme][repository]. The child theme uses [npm][npm] to link to the latest available version of Hinode. As such, it is less applicable if you plan to customize a lot. Vice versa, the main theme allows for heavy customization, but is not synchronized with the latest available Hinode theme automatically.
+    Hinode is available as a [child theme][repository_child], and a [main theme][repository]. The child theme uses [npm][npm] to link to the latest available version of Hinode. Unless you plan to customize a lot, it is recommended to use the child theme:
 
-Not quite sure? Use the Hinode child theme.
+    ```bash
+    git clone https://github.com/gethinode/child.git my-hinode-site && cd my-hinode-site
+    ```
 
-#### Hinode child theme
+    Use the main theme if you intend to customize the base code:
 
-```bash
-git clone https://github.com/gethinode/child.git my-hinode-site && cd my-hinode-site
-```
+    ```bash
+    git clone https://github.com/gethinode/hinode.git my-hinode-site && cd my-hinode-site
+    ```
 
-#### Hinode main theme
+1. Install dependencies
 
-```bash
-git clone https://github.com/gethinode/hinode.git my-hinode-site && cd my-hinode-site
-```
+    ```bash
+    npm install
+    ```
 
-### 2. Install dependencies
+1. Start development server
 
-```bash
-npm install
-```
-
-### 3. Start development server
-
-```bash
-npm run start
-```
+    ```bash
+    npm run start
+    ```
 
 ## Configuration
 
-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 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].
+See the [official documentation][getstarted] on how to configure your site.
 
 ## Contributing
 
-1. Clone the repository and create a new branch
-
-    ```console
-    git checkout https://github.com/gethinode/hinode.git -b name_for_new_branch
-    ```
-
-2. Make and test the changes
-3. Submit a Pull Request with a comprehensive description of the changes
+See the [official documentation][contribute] on how to contribute to the open-source development of Hinode.
 
 ## Credits
 
@@ -144,7 +125,6 @@ The `hinode` and `child` codebase is released under the [MIT license][license].
 [blist]: https://github.com/apvarun/blist-hugo-theme
 [bootstrap]: https://getbootstrap.com
 [cc-by-nc-4.0]: https://creativecommons.org/licenses/by-nc/4.0/
-[contrast_checker]: https://accessibleweb.com/color-contrast-checker/
 [doks]: https://github.com/h-enk/doks
 [flexsearch]: https://github.com/nextapps-de/flexsearch
 [git_download]: https://git-scm.com
@@ -157,11 +137,10 @@ The `hinode` and `child` codebase is released under the [MIT license][license].
 [utterances]: https://utteranc.es
 
 <!-- MARKDOWN MAINTAINED LINKS -->
-<!-- TODO: add blog link
-[blog]: https://markdumay.com
-[blog]: https://github.com/markdumay
--->
+[contribute]: https://gethinode.com/contribute
+[getstarted]: https://gethinode.com/docs
 [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
+[website]: https://gethinode.com/

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

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

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

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

assets/icons/btn-toggle-dark.svg

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

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

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

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

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

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

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

assets/js/color.js

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

assets/scss/app.scss

@@ -1,7 +1,6 @@
 // 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" }};
 $themeFont:                     {{ site.Params.style.themeFont | default "Inter" }};
 $primary:                       {{ site.Params.style.primary | default "#007bff" }};
 $secondary:                     {{ site.Params.style.secondary | default "#6c757d" }};
@@ -12,6 +11,7 @@ $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 }};
+$enable-dark-mode:              {{ site.Params.main.enableDarkMode | default true }} !default;
 
 // Include default variable overrides
 @import "common/variables.scss";
@@ -23,13 +23,14 @@ $navbar-offset:                 {{ if site.Params.navigation.fixed }}{{ site.Par
 @import "bootstrap/scss/functions";
 
 // Import Bootstrap configuration
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/maps";
+@import "hotfix/variables";
+@import "hotfix/variables-dark.scss";
+@import "hotfix/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
 
 // Import Bootstrap layout & components
-@import "bootstrap/scss/root";
+@import "hotfix/root";
 @import "bootstrap/scss/reboot";
 @import "bootstrap/scss/type";
 @import "bootstrap/scss/images";
@@ -96,6 +97,7 @@ $navbar-offset:                 {{ if site.Params.navigation.fixed }}{{ site.Par
 @import "layouts/type.scss";
 @import "common/export.scss";
 @import "helpers/colored-links.scss";
+@import "helpers/hidden.scss";
 
 // Import theme placeholder
 @import "theme.scss";

assets/scss/common/_export.scss

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

assets/scss/common/_icons.scss

@@ -3,18 +3,23 @@ $form-check-input-checked-bg-image:             url("icons/form-check-input-chec
 $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-bg-image-dark:                     url("icons/form-switch-bg-image-dark.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-select-indicator-dark:                    url("icons/form-select-indicator-dark.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-icon-dark:                    url("icons/accordion-button-icon-dark.svg") !default;
 $accordion-button-active-icon:                  url("icons/accordion-button-active-icon.svg") !default;
+$accordion-button-active-icon-dark:             url("icons/accordion-button-active-icon-dark.svg") !default;
 $carousel-control-prev-icon-bg:                 url("icons/carousel-control-prev-icon-bg.svg") !default;
 $carousel-control-next-icon-bg:                 url("icons/carousel-control-next-icon-bg.svg") !default;
 $btn-close-bg:                                  url("icons/btn-close-bg.svg") !default;
 $btn-toggle:                                    url("icons/btn-toggle.svg") !default;
+$btn-toggle-dark:                               url("icons/btn-toggle-dark.svg") !default;
 
 // scss-docs-end icons

assets/scss/common/_variables.scss

@@ -23,3 +23,7 @@ strong {
 
 $black:                       #000 !default;
 $btn-toggle-color:              $black !default;
+
+$carousel-dark-indicator-active-bg:  #ffffff !default;
+$carousel-dark-caption-color:        #ffffff !default;
+$carousel-dark-control-icon-filter:  invert(0) grayscale(100) !default;

assets/scss/components/_card.scss

@@ -1,3 +1,5 @@
+// stylelint-disable annotation-no-unknown
+
 // add zoom animation with opacity change on card img hover
 // source: https://stackoverflow.com/a/43816376
 
@@ -40,3 +42,30 @@
     transform: scale(1.01);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
 }
+
+.card-body-link {
+    color: $body-color if($enable-important-utilities, !important, null);
+
+    @if $link-shade-percentage != 0 {
+        &:hover,
+        &:focus {
+            color: tint-color($body-color, $link-shade-percentage) if($enable-important-utilities, !important, null);
+        }
+    }
+}
+
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        .card-body-link {
+            color: $gray-500 if($enable-important-utilities, !important, null);
+
+            @if $link-shade-percentage != 0 {
+                &:hover,
+                &:focus {
+                    color: shade-color($gray-500, $link-shade-percentage) if($enable-important-utilities, !important, null);
+                }
+            }
+        }
+    }
+}
+// stylelint-enable annotation-no-unknown

assets/scss/components/_navbar.scss

@@ -1,3 +1,5 @@
+// stylelint-disable annotation-no-unknown
+
 // Source: https://jsfiddle.net/njhgr40m/
 
 /* Remove border from toggler */
@@ -65,3 +67,17 @@
 .navbar-toggler.collapsed .toggler-icon {
     background-color: #777;
 }
+
+.emphasis {
+    background-color: $black if($enable-important-utilities, !important, null);
+}
+
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        .emphasis {
+            background-color: $white if($enable-important-utilities, !important, null);
+        }
+    }
+}
+
+// stylelint-enable annotation-no-unknown

assets/scss/components/_search.scss

@@ -11,7 +11,7 @@
 .form-control.is-search {
     padding-right: 4rem;
     border: 1px solid transparent;
-    background: $gray-100;
+    background: var(--bs-tertiary-bg);
 }
 
 .form-control.is-search:focus {
@@ -29,9 +29,9 @@
     padding-right: 0.3125rem;
     padding-left: 0.3125rem;
     font-size: $font-size-base * 0.75;
-    color: $gray-700;
+    color: var(--bs-secondary-color);
     content: "Ctrl + /";
-    border: 1px solid $gray-300;
+    border: 1px solid var(--bs-border-color);
     border-radius: 0.25rem;
 }
 
@@ -59,12 +59,12 @@
 }
 
 #suggestions a:focus {
-    background: $gray-100;
+    background-color: var(--bs-tertiary-bg);
     outline: 0;
 }
 
 #suggestions div:not(:first-child) {
-    border-top: 1px dashed $gray-200;
+    border-top: 1px dashed var(--bs-border-color);
 }
 
 #suggestions div:first-child {
@@ -76,7 +76,7 @@
 }
 
 #suggestions a:hover {
-    background: $gray-100;
+    background-color: var(--bs-tertiary-bg);
 }
 
 #suggestions span {
@@ -86,12 +86,11 @@
 
 .suggestion__title {
     font-weight: $headings-font-weight;
-    color: $black;
 }
 
 .suggestion__description,
 .suggestion__no-results {
-    color: $gray-700;
+    color: var(--bs-secondary-color);
 }
 
 @include media-breakpoint-up(sm) {
@@ -106,7 +105,7 @@
     .suggestion__title {
         width: 9rem;
         padding-right: 1rem;
-        border-right: 1px solid $gray-200;
+        border-right: 1px solid var(--bs-border-color);
         display: inline-block;
         text-align: right;
     }

assets/scss/components/_sidebar.scss

@@ -3,6 +3,10 @@
     top: $navbar-offset;
 }
 
+.sidebar-item {
+    color: black;
+}
+
 .btn-toggle {
     padding: 0.25rem 0.5rem;
     font-weight: 600;
@@ -11,7 +15,7 @@
 
     &:hover,
     &:focus {
-        color: rgba(0, 0, 0, 0.85);
+        color: black;
         background-color: tint-color($primary, 90%);
     }
 
@@ -24,10 +28,8 @@
     }
 }
 
-// scss-docs-end sidebar
-
 .btn-toggle[aria-expanded="true"] {
-    color: rgba(0, 0, 0, 0.85);
+    color: black;
 
     &::before {
         transform: rotate(90deg);
@@ -49,6 +51,50 @@
     }
 }
 
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        .sidebar-item {
+            color: var(--bs-tertiary-color);
+        }
+
+        .btn-toggle {
+            color: var(--bs-tertiary-color);
+        
+            &:hover,
+            &:focus {
+                color: $secondary;
+                background-color: tint-color($primary, 90%);
+            }
+        
+            &::before {
+                content: $btn-toggle-dark;
+            }
+        }
+
+        .btn-toggle[aria-expanded="true"] {
+            color: var(--bs-secondary-color);
+        }
+
+        .btn-toggle-nav a {
+            padding: 0.1875rem 0.5rem;
+            margin-top: 0.125rem;
+            margin-left: 1.25rem;
+
+            &:hover,
+            &:focus {
+                color: $secondary;
+                background-color: tint-color($primary, 90%);
+            }
+
+            &.active {
+                font-weight: bold;
+            }
+        }
+    }
+}
+
+// scss-docs-end sidebar
+
 .dropdown-toggle {
     outline: 0;
 }

assets/scss/components/_syntax-dark.scss

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

assets/scss/components/_syntax-light.scss

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

assets/scss/components/_syntax.scss

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

assets/scss/helpers/_hidden.scss

@@ -0,0 +1,3 @@
+.hidden {
+    display: none;
+}

assets/scss/hotfix/_maps.scss

@@ -0,0 +1,176 @@
+// Copied from https://github.com/twbs/bootstrap/commit/15744ee1d04bcca03155c3bb37ee7e65a7b011c6
+//
+// Re-assigned maps
+//
+// Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
+
+// scss-docs-start theme-colors-rgb
+$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
+// scss-docs-end theme-colors-rgb
+
+// scss-docs-start theme-text-map
+$theme-colors-text: (
+  "primary": $primary-text-emphasis,
+  "secondary": $secondary-text-emphasis,
+  "success": $success-text-emphasis,
+  "info": $info-text-emphasis,
+  "warning": $warning-text-emphasis,
+  "danger": $danger-text-emphasis,
+  "light": $light-text-emphasis,
+  "dark": $dark-text-emphasis,
+) !default;
+// scss-docs-end theme-text-map
+
+// scss-docs-start theme-bg-subtle-map
+$theme-colors-bg-subtle: (
+  "primary": $primary-bg-subtle,
+  "secondary": $secondary-bg-subtle,
+  "success": $success-bg-subtle,
+  "info": $info-bg-subtle,
+  "warning": $warning-bg-subtle,
+  "danger": $danger-bg-subtle,
+  "light": $light-bg-subtle,
+  "dark": $dark-bg-subtle,
+) !default;
+// scss-docs-end theme-bg-subtle-map
+
+// scss-docs-start theme-border-subtle-map
+$theme-colors-border-subtle: (
+  "primary": $primary-border-subtle,
+  "secondary": $secondary-border-subtle,
+  "success": $success-border-subtle,
+  "info": $info-border-subtle,
+  "warning": $warning-border-subtle,
+  "danger": $danger-border-subtle,
+  "light": $light-border-subtle,
+  "dark": $dark-border-subtle,
+) !default;
+// scss-docs-end theme-border-subtle-map
+
+$theme-colors-text-dark: null !default;
+$theme-colors-bg-subtle-dark: null !default;
+$theme-colors-border-subtle-dark: null !default;
+
+@if $enable-dark-mode {
+  // scss-docs-start theme-text-dark-map
+  $theme-colors-text-dark: (
+    "primary": $primary-text-emphasis-dark,
+    "secondary": $secondary-text-emphasis-dark,
+    "success": $success-text-emphasis-dark,
+    "info": $info-text-emphasis-dark,
+    "warning": $warning-text-emphasis-dark,
+    "danger": $danger-text-emphasis-dark,
+    "light": $light-text-emphasis-dark,
+    "dark": $dark-text-emphasis-dark,
+  ) !default;
+  // scss-docs-end theme-text-dark-map
+
+  // scss-docs-start theme-bg-subtle-dark-map
+  $theme-colors-bg-subtle-dark: (
+    "primary": $primary-bg-subtle-dark,
+    "secondary": $secondary-bg-subtle-dark,
+    "success": $success-bg-subtle-dark,
+    "info": $info-bg-subtle-dark,
+    "warning": $warning-bg-subtle-dark,
+    "danger": $danger-bg-subtle-dark,
+    "light": $light-bg-subtle-dark,
+    "dark": $dark-bg-subtle-dark,
+  ) !default;
+  // scss-docs-end theme-bg-subtle-dark-map
+
+  // scss-docs-start theme-border-subtle-dark-map
+  $theme-colors-border-subtle-dark: (
+    "primary": $primary-border-subtle-dark,
+    "secondary": $secondary-border-subtle-dark,
+    "success": $success-border-subtle-dark,
+    "info": $info-border-subtle-dark,
+    "warning": $warning-border-subtle-dark,
+    "danger": $danger-border-subtle-dark,
+    "light": $light-border-subtle-dark,
+    "dark": $dark-border-subtle-dark,
+  ) !default;
+  // scss-docs-end theme-border-subtle-dark-map
+}
+
+// Utilities maps
+//
+// Extends the default `$theme-colors` maps to help create our utilities.
+
+// Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
+// scss-docs-start utilities-colors
+$utilities-colors: $theme-colors-rgb !default;
+// scss-docs-end utilities-colors
+
+// scss-docs-start utilities-text-colors
+$utilities-text: map-merge(
+  $utilities-colors,
+  (
+    "black": to-rgb($black),
+    "white": to-rgb($white),
+    "body": to-rgb($body-color)
+  )
+) !default;
+$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
+
+$utilities-text-emphasis-colors: (
+  "primary-emphasis": var(--#{$prefix}primary-text-emphasis),
+  "secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),
+  "success-emphasis": var(--#{$prefix}success-text-emphasis),
+  "info-emphasis": var(--#{$prefix}info-text-emphasis),
+  "warning-emphasis": var(--#{$prefix}warning-text-emphasis),
+  "danger-emphasis": var(--#{$prefix}danger-text-emphasis),
+  "light-emphasis": var(--#{$prefix}light-text-emphasis),
+  "dark-emphasis": var(--#{$prefix}dark-text-emphasis)
+) !default;
+// scss-docs-end utilities-text-colors
+
+// scss-docs-start utilities-bg-colors
+$utilities-bg: map-merge(
+  $utilities-colors,
+  (
+    "black": to-rgb($black),
+    "white": to-rgb($white),
+    "body": to-rgb($body-bg)
+  )
+) !default;
+$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
+
+$utilities-bg-subtle: (
+  "primary-subtle": var(--#{$prefix}primary-bg-subtle),
+  "secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
+  "success-subtle": var(--#{$prefix}success-bg-subtle),
+  "info-subtle": var(--#{$prefix}info-bg-subtle),
+  "warning-subtle": var(--#{$prefix}warning-bg-subtle),
+  "danger-subtle": var(--#{$prefix}danger-bg-subtle),
+  "light-subtle": var(--#{$prefix}light-bg-subtle),
+  "dark-subtle": var(--#{$prefix}dark-bg-subtle)
+) !default;
+// scss-docs-end utilities-bg-colors
+
+// scss-docs-start utilities-border-colors
+$utilities-border: map-merge(
+  $utilities-colors,
+  (
+    "black": to-rgb($black),
+    "white": to-rgb($white)
+  )
+) !default;
+$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
+
+$utilities-border-subtle: (
+  "primary-subtle": var(--#{$prefix}primary-border-subtle),
+  "secondary-subtle": var(--#{$prefix}secondary-border-subtle),
+  "success-subtle": var(--#{$prefix}success-border-subtle),
+  "info-subtle": var(--#{$prefix}info-border-subtle),
+  "warning-subtle": var(--#{$prefix}warning-border-subtle),
+  "danger-subtle": var(--#{$prefix}danger-border-subtle),
+  "light-subtle": var(--#{$prefix}light-border-subtle),
+  "dark-subtle": var(--#{$prefix}dark-border-subtle)
+) !default;
+// scss-docs-end utilities-border-colors
+
+$utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default;
+
+$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
+
+$gutters: $spacers !default;

assets/scss/hotfix/_root.scss

@@ -0,0 +1,180 @@
+// Copied from https://github.com/twbs/bootstrap/commit/15744ee1d04bcca03155c3bb37ee7e65a7b011c6
+
+:root,
+[data-bs-theme="light"] {
+  // Note: Custom variable values only support SassScript inside `#{}`.
+
+  // Colors
+  //
+  // Generate palettes for full colors, grays, and theme colors.
+
+  @each $color, $value in $colors {
+    --#{$prefix}#{$color}: #{$value};
+  }
+
+  @each $color, $value in $grays {
+    --#{$prefix}gray-#{$color}: #{$value};
+  }
+
+  @each $color, $value in $theme-colors {
+    --#{$prefix}#{$color}: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-rgb {
+    --#{$prefix}#{$color}-rgb: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-text {
+    --#{$prefix}#{$color}-text-emphasis: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-bg-subtle {
+    --#{$prefix}#{$color}-bg-subtle: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-border-subtle {
+    --#{$prefix}#{$color}-border-subtle: #{$value};
+  }
+
+  --#{$prefix}white-rgb: #{to-rgb($white)};
+  --#{$prefix}black-rgb: #{to-rgb($black)};
+
+  // Fonts
+
+  // Note: Use `inspect` for lists so that quoted items keep the quotes.
+  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
+  --#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
+  --#{$prefix}font-monospace: #{inspect($font-family-monospace)};
+  --#{$prefix}gradient: #{$gradient};
+
+  // Root and body
+  // scss-docs-start root-body-variables
+  @if $font-size-root != null {
+    --#{$prefix}root-font-size: #{$font-size-root};
+  }
+  --#{$prefix}body-font-family: #{inspect($font-family-base)};
+  @include rfs($font-size-base, --#{$prefix}body-font-size);
+  --#{$prefix}body-font-weight: #{$font-weight-base};
+  --#{$prefix}body-line-height: #{$line-height-base};
+  @if $body-text-align != null {
+    --#{$prefix}body-text-align: #{$body-text-align};
+  }
+
+  --#{$prefix}body-color: #{$body-color};
+  --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
+  --#{$prefix}body-bg: #{$body-bg};
+  --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
+
+  --#{$prefix}emphasis-color: #{$body-emphasis-color};
+  --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
+
+  --#{$prefix}secondary-color: #{$body-secondary-color};
+  --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
+  --#{$prefix}secondary-bg: #{$body-secondary-bg};
+  --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
+
+  --#{$prefix}tertiary-color: #{$body-tertiary-color};
+  --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
+  --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
+  --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
+  // scss-docs-end root-body-variables
+
+  @if $headings-color != null {
+    --#{$prefix}heading-color: #{$headings-color};
+  }
+
+  --#{$prefix}link-color: #{$link-color};
+  --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
+  --#{$prefix}link-decoration: #{$link-decoration};
+
+  --#{$prefix}link-hover-color: #{$link-hover-color};
+  --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
+
+  @if $link-hover-decoration != null {
+    --#{$prefix}link-hover-decoration: #{$link-hover-decoration};
+  }
+
+  --#{$prefix}code-color: #{$code-color};
+  --#{$prefix}highlight-bg: #{$mark-bg};
+
+  // scss-docs-start root-border-var
+  --#{$prefix}border-width: #{$border-width};
+  --#{$prefix}border-style: #{$border-style};
+  --#{$prefix}border-color: #{$border-color};
+  --#{$prefix}border-color-translucent: #{$border-color-translucent};
+
+  --#{$prefix}border-radius: #{$border-radius};
+  --#{$prefix}border-radius-sm: #{$border-radius-sm};
+  --#{$prefix}border-radius-lg: #{$border-radius-lg};
+  --#{$prefix}border-radius-xl: #{$border-radius-xl};
+  --#{$prefix}border-radius-xxl: #{$border-radius-xxl};
+  --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v5.3.0 for consistency
+  --#{$prefix}border-radius-pill: #{$border-radius-pill};
+  // scss-docs-end root-border-var
+
+  --#{$prefix}box-shadow: #{$box-shadow};
+  --#{$prefix}box-shadow-sm: #{$box-shadow-sm};
+  --#{$prefix}box-shadow-lg: #{$box-shadow-lg};
+  --#{$prefix}box-shadow-inset: #{$box-shadow-inset};
+
+  // Focus styles
+  // scss-docs-start root-focus-variables
+  --#{$prefix}focus-ring-width: #{$focus-ring-width};
+  --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
+  --#{$prefix}focus-ring-color: #{$focus-ring-color};
+  // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
+  --#{$prefix}focus-ring-box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
+  // scss-docs-end root-focus-variables
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark, true) {
+    color-scheme: dark;
+
+    // scss-docs-start root-dark-mode-vars
+    --#{$prefix}body-color: #{$body-color-dark};
+    --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
+    --#{$prefix}body-bg: #{$body-bg-dark};
+    --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
+
+    --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
+    --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
+
+    --#{$prefix}secondary-color: #{$body-secondary-color-dark};
+    --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
+    --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
+    --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
+
+    --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
+    --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
+    --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
+    --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
+
+    @each $color, $value in $theme-colors-text-dark {
+      --#{$prefix}#{$color}-text-emphasis: #{$value};
+    }
+
+    @each $color, $value in $theme-colors-bg-subtle-dark {
+      --#{$prefix}#{$color}-bg-subtle: #{$value};
+    }
+
+    @each $color, $value in $theme-colors-border-subtle-dark {
+      --#{$prefix}#{$color}-border-subtle: #{$value};
+    }
+
+    @if $headings-color-dark != null {
+      --#{$prefix}heading-color: #{$headings-color-dark};
+    }
+
+    --#{$prefix}link-color: #{$link-color-dark};
+    --#{$prefix}link-hover-color: #{$link-hover-color-dark};
+    --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
+    --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
+
+    --#{$prefix}code-color: #{$code-color-dark};
+
+    --#{$prefix}border-color: #{$border-color-dark};
+    --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
+    // scss-docs-end root-dark-mode-vars
+  }
+}

assets/scss/hotfix/_variables-dark.scss

@@ -0,0 +1,77 @@
+// Copied from https://github.com/twbs/bootstrap/pull/37953
+
+// Dark color mode variables
+//
+// Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
+
+//
+// Global colors
+//
+
+// scss-docs-start sass-dark-mode-vars
+// scss-docs-start theme-text-dark-variables
+$primary-text-emphasis-dark:        tint-color($primary, 40%) !default;
+$secondary-text-emphasis-dark:      tint-color($secondary, 40%) !default;
+$success-text-emphasis-dark:        tint-color($success, 40%) !default;
+$info-text-emphasis-dark:           tint-color($info, 40%) !default;
+$warning-text-emphasis-dark:        tint-color($warning, 40%) !default;
+$danger-text-emphasis-dark:         tint-color($danger, 40%) !default;
+$light-text-emphasis-dark:          $gray-100 !default;
+$dark-text-emphasis-dark:           $gray-300 !default;
+// scss-docs-end theme-text-dark-variables
+
+// scss-docs-start theme-bg-subtle-dark-variables
+$primary-bg-subtle-dark:            shade-color($primary, 80%) !default;
+$secondary-bg-subtle-dark:          shade-color($secondary, 80%) !default;
+$success-bg-subtle-dark:            shade-color($success, 80%) !default;
+$info-bg-subtle-dark:               shade-color($info, 80%) !default;
+$warning-bg-subtle-dark:            shade-color($warning, 80%) !default;
+$danger-bg-subtle-dark:             shade-color($danger, 80%) !default;
+$light-bg-subtle-dark:              $gray-800 !default;
+$dark-bg-subtle-dark:               mix($gray-800, $black) !default;
+// scss-docs-end theme-bg-subtle-dark-variables
+
+// scss-docs-start theme-border-subtle-dark-variables
+$primary-border-subtle-dark:        shade-color($primary, 40%) !default;
+$secondary-border-subtle-dark:      shade-color($secondary, 40%) !default;
+$success-border-subtle-dark:        shade-color($success, 40%) !default;
+$info-border-subtle-dark:           shade-color($info, 40%) !default;
+$warning-border-subtle-dark:        shade-color($warning, 40%) !default;
+$danger-border-subtle-dark:         shade-color($danger, 40%) !default;
+$light-border-subtle-dark:          $gray-700 !default;
+$dark-border-subtle-dark:           $gray-800 !default;
+// scss-docs-end theme-border-subtle-dark-variables
+
+$body-color-dark:                   $gray-500 !default;
+$body-bg-dark:                      $gray-900 !default;
+$body-secondary-color-dark:         rgba($body-color-dark, .75) !default;
+$body-secondary-bg-dark:            $gray-800 !default;
+$body-tertiary-color-dark:          rgba($body-color-dark, .5) !default;
+$body-tertiary-bg-dark:             mix($gray-800, $gray-900, 50%) !default;
+$body-emphasis-color-dark:          $white !default;
+$border-color-dark:                 $gray-700 !default;
+$border-color-translucent-dark:     rgba($white, .15) !default;
+$headings-color-dark:               null !default;
+$link-color-dark:                   tint-color($primary, 40%) !default;
+$link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage) !default;
+$code-color-dark:                   tint-color($code-color, 40%) !default;
+
+
+//
+// Forms
+//
+
+$form-select-indicator-color-dark:  $body-color-dark !default;
+$form-select-indicator-dark:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
+
+$form-switch-color-dark:            rgba($white, .25) !default;
+$form-switch-bg-image-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
+
+
+//
+// Accordion
+//
+
+$accordion-button-icon-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-text-emphasis-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+$accordion-button-active-icon-dark:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-text-emphasis-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+// scss-docs-end sass-dark-mode-vars

config/_default/menus/menus.en.toml

@@ -3,20 +3,15 @@
   url = "/about/"
   weight = 10
 
-[[main]]
-  name = "Docs"
-  url = "/docs/"
-  weight = 20
-
 [[main]]
   name = "Blog"
   url = "/blog/"
-  weight = 30
+  weight = 20
 
 [[main]]
   name = "Projects"
   url = "/projects/"
-  weight = 40
+  weight = 30
 
 [[main]]
   name = "Sample project"
@@ -33,7 +28,7 @@
 [[main]]
   name = "Tags"
   url = "/tags/"
-  weight = 50
+  weight = 40
 
 [[social]]
   name = "LinkedIn"

config/_default/params.toml

@@ -2,6 +2,7 @@
 [main]
     separator = "-"
     description = "Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5."
+    enableDarkMode = true
 # toml-docs-end main
 
 # toml-docs-start docs
@@ -19,8 +20,8 @@
 
 # toml-docs-start navigation
 [navigation]
-    logo = "/img/logo_embedded.svg"
-    color = "white"
+    logo = "/img/logo_icon.svg"
+    color = "body"
     style = "light"
     fixed = true
     offset = "4em"
@@ -115,78 +116,11 @@
     #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"
+    hinode_docs = "https://gethinode.com/docs"
     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"
+ 

content/en/about.md

@@ -2,11 +2,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
+updated: 2023-02-11
 showComments: false
 ---
 
-<p class="text-center"><img src="/img/logo_embedded.svg" class="img-fluid w-50" alt="Logo"></p>
+<p class="text-center"><svg class="img-fluid w-50"><use href="/img/logo_var.svg#logo"></use></svg></p>
 
 <section class="section section-sm mt-5 mb-5">
     <div class="container-fluid">

content/en/blog/extra-shortcodes.md

@@ -0,0 +1,237 @@
+---
+author: Mark Dumay
+title: Extra shortcodes
+date: 2023-02-12
+description: Use shortcodes to add common Bootstrap elements with ease.
+tags: ["code"]
+thumbnail: img/paper.jpg
+photoCredits: <a href="https://www.pexels.com/@picjumbo-com-55570/">picjumbo.com</a>
+photoSource: <a href="https://www.pexels.com/photo/blue-pen-beside-black-smartphone-on-white-paper-196646/">Pexels</a>
+---
+
+Hinode provides several shortcodes that wrap common Bootstrap components. Refer to the [official documentation]({{< param "links.hinode_docs" >}}) for more details.
+
+## Accordion
+
+As an example, the following shortcode displays an accordion with three elements, of which the first element is expanded.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* accordion */>}}
+  {{</* accordion-item header="Accordion Item #1" show="true" */>}}
+    This is the first item's accordion body. It supports HTML content. The item is shown by adding the value
+    <code>show</code> to the <code>class</code> argument.
+  {{</* /accordion-item */>}}
+  {{</* accordion-item header="Accordion Item #2" */>}}
+    This is the second item's accordion body. It too supports HTML content.
+  {{</* /accordion-item */>}}
+  {{</* accordion-item header="Accordion Item #3" */>}}
+    This is the third item's accordion body.
+  {{</* /accordion-item */>}}
+{{</* /accordion */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Alert
+
+As an example, the following shortcode displays a simple alert.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* alert color="danger" dismissible="true" */>}}
+    A simple danger alert—check it out!
+{{</* /alert */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Badge
+
+Use HTML code to display a badge for a heading. See the Bootstrap [documentation]({{< param "links.bs_badge_heading" >}}) for more options. The following example displays a badge for a heading of size four.
+
+{{< example >}}
+<h1>Example heading of size one <span class="badge bg-secondary">New</span></h1>
+<h2>Example heading of size two <span class="badge bg-secondary">New</span></h2>
+<h3>Example heading of size three <span class="badge bg-secondary">New</span></h3>
+<h4>Example heading of size four <span class="badge bg-secondary">New</span></h4>
+<h5>Example heading of size five <span class="badge bg-secondary">New</span></h5>
+<h6>Example heading of size six <span class="badge bg-secondary">New</span></h6>
+{{< /example >}}
+
+## Breadcrumb
+
+As an example, the following shortcode displays a breadcrumb for the current page.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* breadcrumb path="blog" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Button
+
+As an example, the following shortcode displays a tooltip for a dark button with a badge.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* button color="secondary" tooltip="Click on the inbox to view your unread messages" href="#" badge="99+" */>}}
+    Inbox
+{{</* /button */>}}
+{{< /example>}}
+<!-- markdownlint-enable MD037 -->
+
+## Button group
+
+As an example, the following shortcode displays a group of three buttons.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* button-group aria-label="Basic example" */>}}
+  {{</* button color="primary" href="#" */>}}Left{{</* /button */>}}
+  {{</* button color="primary" href="#" */>}}Middle{{</* /button */>}}
+  {{</* button color="primary" href="#" */>}}Right{{</* /button */>}}
+{{</* /button-group */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Card
+
+As an example, the following shortcode displays a stacked card with icon that links to the [about]({{< ref "about" >}}) page. It includes a custom header and footer.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* card path="about" padding="3" class="w-50" color="light" header="publication" footer="none" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Carousel
+
+As an example, the following shortcode displays a centered carousel with three slides, 16x9 aspect ratio, and a relative width of 67% on large screens.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* carousel ratio="16x9" class="col-sm-12 col-lg-8 mx-auto" */>}}
+  {{</* img src="img/coffee.jpg" caption="slide 1" */>}}
+  {{</* img src="img/phone.jpg" caption="slide 2" */>}}
+  {{</* img src="img/dunes.jpg" caption="slide 3" */>}}
+{{</* /carousel */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Collapse
+
+As an example, the following shortcode displays a button that, when clicked, triggers a panel to appear or disappear.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* button collapse="collapse-1" */>}}
+    Trigger panel
+{{</* /button */>}}
+
+{{</* collapse id="collapse-1" class="p-3 border rounded" */>}}
+    Some placeholder content for the collapse component. This panel is <i>hidden by default</i> but
+    revealed when the user activates the relevant trigger.
+{{</* /collapse */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Command prompt
+
+Use the `command` shortcode to generate a block with a default bash command prompt.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* command */>}}
+export MY_VAR=123
+{{</* /command */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+Specify `user` and `host` to add the user context to the prompt. In addition, use `(out)` to specify an output line and use `\` to denote a line continuation.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* command user="user" host="localhost" */>}}
+export MY_VAR=123
+echo "hello"
+(out)hello
+echo one \
+two \
+three
+(out)one two three
+echo "goodbye"
+(out)goodbye
+{{</* /command */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Icon
+
+As an example, the following shortcodes show a square check, a brand logo, and a circle check.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* fa square-check */>}}
+{{</* fab linkedin */>}}
+{{</* fas circle-check */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Image
+
+As an example, the following shortcode displays an image with rounded corners and a 21x9 aspect ratio.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* image src="img/flowers.jpg" ratio="21x9" caption="Figure caption" class="rounded" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Navbar
+
+As an example, the following shortcode displays a light navigation header.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* navbar path="about" color="primary" size="sm" search="false" menus="sample" title="Brand" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Spinner
+
+As an example, the following shortcode displays a centered spinner.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* spinner color="info" class="text-center" */>}}
+Loading...
+{{</* /spinner */>}}
+{{< /example>}}
+<!-- markdownlint-enable MD037 -->
+
+## Toast
+
+As an example, the following shortcode displays a button that, when clicked, triggers the toast message.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* button id="toastButton" */>}}
+    Show toast
+{{</* /button */>}}
+
+{{</* toast header="Custom title" */>}}
+    This is a toast message.
+{{</* /toast */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Tooltip
+
+As an example, the following shortcode displays a tooltip for a colored hyperlink.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* tooltip color="primary" title="Tooltip" href="#" */>}}
+    Tooltip demonstration
+{{</* /tooltip */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,9 +0,0 @@
----
-title: Comments
-description: 
-date: 2023-01-14
-group: configuration
-layout: docs
----
-
-<!-- TODO: expand -->

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

@@ -1,23 +0,0 @@
----
-title: Fonts
-description: Configure a specific font to style your website.
-date: 2023-01-28
-group: configuration
-layout: docs
----
-
-Hinode uses a configurable font stack that includes support for Emoji across browsers and devices. Review the configuration settings below on how to update the font.
-
-## Font configuration
-
-Hinode uses Bootstrap's font configuration. The font stack includes support for Emoji across browsers and devices. You can adjust the main font in the `/config/_default/params.toml` file in the `style` section.
-
-{{< docs name="font" file="config/_default/params.toml" >}}
-
- By default, Hinode configures the `Inter` font provided by [Google Fonts]({{< param "links.google_fonts" >}}) with the weights 200, 300, and 600. If you use a different font provider, be sure to adjust the Content Security Policy in the [server configuration]({{< ref "server" >}}).
-
-## Customization
-
-The font stack is defined in the `assets/scss/common/_variables.scss` file. The variable `$themeFont` is initialized to the value in the [font configuration](#font-configuration).
-
-{{< docs name="font" file="assets/scss/common/_variables.scss" >}}

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

@@ -1,43 +0,0 @@
----
-title: Languages
-description: Configure multiple languages to enable multilingual sites.
-date: 2023-01-21
-group: configuration
-layout: docs
----
-
-Hinode supports Hugo's [multilingual mode]({{< param "links.hugo_lang" >}}) to create websites with multiple languages side by side. The next paragraphs explain how to configure multiple languages, how to provide content translations, and how to define multilingual messages and keywords.
-
-## Language configuration
-
-Define the languages available to your site in the main site configuration. The below configuration shows the default configuration set in `config/_default/languages.toml` for the English language.
-
-{{< docs name="lang-main" file="config/_default/languages.toml" >}}
-
-The default behavior is set in `config/_default/config.toml`. For example, you can set the `defaultContentLanguageInSubdir` to `false` to remove the language slug `/en` from your site entirely.
-
-{{< docs name="language" file="config/_default/config.toml" >}}
-
-## Content translation
-
-Hugo supports multiple ways to define translated content. Hinode uses an approach to define translations in separate directories for each language. In the default settings, content for the English language is defined in the folder `content/en`. It is recommended to use the same filename for each page translation. This enables Hugo to recognize if a page translation is available. Hinode links to this translation in the main navigation bar.
-
-For example, consider the `About` page. It is available in both English and Dutch. The content files are defined in `content/en/about.md` and `content/nl/about.md`. Hugo now recognizes the page is available in two languages. To translate the URL for the Dutch page, a `slug` is defined the page's frontmatter:
-
-```yml
----
-slug: "over-mij"
----
-```
-
-The English page is available by navigating to `/en/about` and the Dutch translation is available on `/nl/over-mij`. The [main navigation]({{< ref "navigation#main-navigation" >}}) item shows a language switcher for both translations.
-
-## Internationalization
-
-Hinode uses Hugo's [internationalization function]({{< param "links.hugo_i18n" >}}) to translate keywords and messages. Translations are available in English, Dutch, and German. For example, the translation for the word `about` in the Dutch language is defined in `i18n/nl.yaml` (strictly speaking, it translates to `about me`).
-
-```yml
-# Content
-- id: about
-  translation: "Over mij"
-```

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

@@ -1,319 +0,0 @@
----
-title: Layout
-description: Hinode uses a grid-based, responsive design for the home page, single pages and list pages.
-date: 2023-01-21
-group: configuration
-layout: docs
----
-
-Hinode uses Bootstrap's [grid system]({{< param "links.bs_grid" >}}) and [breakpoints]({{< param "links.bs_breakpoints" >}}) to create a responsive layout across devices or viewport sizes. All pages follow the same base layout, which includes headers and footers. The next paragraphs explain the layout styles in more detail.
-
-## Base layout
-
-The base layout defines a page skeleton of which all other pages are derived. It consists of four major sections, being a header, body, social footer, and bottom footer. It also loads sytlesheets, scripts, and generates the metadata. The header includes the [main navigation]({{< ref "navigation#main-navigation" >}}) and can be optionally fixed to the top. By default, the base layout is expanded to fill the entire available viewport. This means that all elements stretch horizontally across the entire viewport. The body also expands vertically, where the footers align to the bottom of the viewport.
-
-### Example
-
-The following diagram illustrates the conceptual base design:
-
-<div class="container-fluid text-center bg-light border rounded-3 bg-opacity-10 p-3">
-    <div class="row g-3">
-        <div class="col-12">
-            <div class="p-3 bg-primary bg-opacity-10 rounded-3">Header .col-12 <i>(optionally fixed)</i></div>
-        </div>
-        <div class="col-12">
-            <div class="p-3 bg-primary bg-opacity-10 rounded-3">
-                <p class="mb-5">Body .col-12 .flex-fill</p>
-                <i>expands to fill viewport</i>
-            </div>
-        </div>
-        <div class="col-12">
-            <div class="p-3 bg-primary bg-opacity-10 rounded-3">Social .col-12</div>
-        </div>
-        <div class="col-12">
-            <div class="p-3 bg-primary bg-opacity-10 rounded-3">Footer .col-12</div>
-        </div>
-    </div>
-</div>
-
-### Configuration
-
-Hinode uses several settings from Hugo's [main configuration]({{< param "links.hugo_config" >}}). Several extensions are defined in the [custom site parameters]({{< param "links.hugo_config_dir" >}}) and [language-specific configuration]({{< param "links.hugo_lang_config" >}}).
-
-#### Main configuration
-
-The base layout uses the [main configuration]({{< param "links.hugo_config" >}}) of Hugo. The settings below are actively used by Hinode:
-
-| Setting       | Default | Description |
-|---------------|---------|-------------|
-| title         | -       | Title of the website, joined with the separator and title of the current page. |
-| copyright     | -       | Copyright notice added to the page footer. |
-| paginate      | 9       | Maximum number of elements to display on a [list page](#list-pages) before pagination. |
-| enableGitInfo | -       | Enables git information, which is used by [documentation pages](#documentation-layout). |
-{.table}
-
-The below configuration shows the default configuration set in `config/_default/config.toml`.
-
-{{< docs name="main" file="config/_default/config.toml" >}}
-
-#### Extended configuration
-
-Hinode uses the following extended settings in the `main` section of the `site parameters`:
-
-| Setting      | Default | Description |
-|--------------|---------|-------------|
-| separator    | "-"     | Seperator to join the website title and page title. |
-| description  | -       | Short description of the website that is added to the page metadata. |
-{.table}
-
-The below configuration shows the default configuration set in `config/_default/params.toml`.
-
-{{< docs name="main" file="config/_default/params.toml" >}}
-
-#### Language-specific configuration
-
-Hinode supports [multilingual content]({{< param "links.hugo_lang_config" >}}). The following parameters are used in the site's footer, header, and meta data. Refer to the [languages]({{< ref "languages" >}}) section to review the various configuration options to enable multilingual content.
-
-| Section | Setting       | Default | Description |
-|---------|---------------|---------|-------------|
-| head    | tagline       | -       | Tagline used on the site's title for the home page. |
-| feature | link          | -       | Call to action link in the featured section on the home page. |
-| feature | caption       | "About" | Call to action title in the featured section on the home page. |
-| footer  | license       | -       | License displayed on the site's footer. |
-| footer  | socialTitle   | -       | Title displayed in the site's social footer. |
-| footer  | socialCaption | -       | Caption displayed in the site's social footer. |
-{.table}
-
-The below configuration shows the default configuration set in `config/_default/languages.toml` for the English language.
-
-{{< docs name="lang-param" file="config/_default/languages.toml" >}}
-
-## Home page
-
-The home page introduces a feature element and provides a selection of the three most recent items in a section, such as blog posts and project descriptions. The items are displayed as card groups and alternate between a vertical grid and a horizontal grid. A button that links to the related section is added below each group. The feature element can optionally cover the entire viewscreen.
-
-### Example
-
-The following diagram illustrates the conceptual layout of the home page:
-
-<div class="container-fluid text-center bg-light border rounded-3 bg-opacity-10 p-3">
-    <div class="row g-3">
-        <div class="col-12">
-            <div class="p-3 bg-secondary bg-opacity-10 rounded-3">Header .col-12</div>
-        </div>
-        <div class="col-12">
-            <div class="p-3 bg-primary bg-opacity-10 rounded-3">
-                <p>Feature .col-12</p>
-                <i>optionally spans viewport</i>
-            </div>
-        </div>
-        <div class="col-4">
-            <div class="p-3 bg-primary bg-opacity-10 rounded-3">Card .col-4</div>
-        </div>
-        <div class="col-4">
-            <div class="p-3 bg-primary bg-opacity-10 rounded-3">Card .col-4</div>
-        </div>
-        <div class="col-4">
-            <div class="p-3 bg-primary bg-opacity-10 rounded-3">Card .col-4</div>
-        </div>
-        <div class="col-12">
-            <div class="p-3 bg-primary bg-opacity-10 rounded-3">Card .col-12</div>
-        </div>
-        <div class="col-12">
-            <div class="p-3 bg-primary bg-opacity-10 rounded-3">Card .col-12</div>
-        </div>
-        <div class="col-12">
-            <div class="p-3 bg-primary bg-opacity-10 rounded-3">Card .col-12</div>
-        </div>
-        <div class="col-12">
-            <div class="p-3 bg-secondary bg-opacity-10 rounded-3">Social .col-12</div>
-        </div>
-        <div class="col-12">
-            <div class="p-3 bg-secondary bg-opacity-10 rounded-3">Footer .col-12</div>
-        </div>
-    </div>
-</div>
-
-### Configuration
-
-The configuration of the home page is set in the `home` section of the `site parameters`. The folllowing settings are supported:
-
-| Setting      | Default | Description |
-|--------------|---------|-------------|
-| sections     | -       | Sections to include on the home page, e.g. ["blog", "projects"]. |
-| featurePhoto | -       | Url of the photo to include in the feature element. |
-| fullCover    | false   | Flag to indicate if the feature element should cover the entire front page. |
-{.table}
-
-The below configuration shows the default configuration set in `config/_default/params.toml`.
-
-{{< docs name="home" file="config/_default/params.toml" >}}
-
-## List pages
-
-List pages provide an overview of available content within a section as a card group. By default, the most recent nine items are displayed. Adjust the setting `paginate` in the [main configuration](#configuration) as needed. If the section contains more items, a paginator is added below the card group.
-
-### Example
-
-The following diagram illustrates the conceptual layout of a list page:
-
-<div class="container-fluid text-center bg-light border rounded-3 bg-opacity-10 p-3">
-    <div class="row g-3">
-        <div class="col-12">
-            <div class="p-3 bg-secondary bg-opacity-10 rounded-3">Header .col-12</div>
-        </div>
-        <div class="col-4">
-            <div class="p-3 bg-primary bg-opacity-10 rounded-3">Card</div>
-        </div>
-        <div class="col-4">
-            <div class="p-3 bg-primary bg-opacity-10 rounded-3">Card</div>
-        </div>
-        <div class="col-4">
-            <div class="p-3 bg-primary bg-opacity-10 rounded-3">Card</div>
-        </div>
-        <div class="col-4">
-            <div class="p-3 bg-primary bg-opacity-10 rounded-3">Card</div>
-        </div>
-        <div class="col-4">
-            <div class="p-3 bg-primary bg-opacity-10 rounded-3">Card</div>
-        </div>
-        <div class="col-4">
-            <div class="p-3 bg-primary bg-opacity-10 rounded-3">Card</div>
-        </div>
-        <div class="col-4">
-            <div class="p-3 bg-primary bg-opacity-10 rounded-3">Card</div>
-        </div>
-        <div class="col-4">
-            <div class="p-3 bg-primary bg-opacity-10 rounded-3">Card</div>
-        </div>
-        <div class="col-4">
-            <div class="p-3 bg-primary bg-opacity-10 rounded-3">Card</div>
-        </div>
-        <div class="col-12">
-            <div class="p-3 bg-secondary bg-opacity-10 rounded-3">Social .col-12</div>
-        </div>
-        <div class="col-12">
-            <div class="p-3 bg-secondary bg-opacity-10 rounded-3">Footer .col-12</div>
-        </div>
-    </div>
-</div>
-
-### Configuration
-
-The configuration of the list pages is set in the `list` section of the `site parameters`. You can specify the settings for each section of your content. The entire configuration is fully optional and uses default settings if omitted. The folllowing settings are supported per section:
-
-| Setting      | Default      | Description |
-|--------------|--------------|-------------|
-| title        | Section name | Title of the list page, displayed above the card group. By default, the title defined in the page's frontmatter is used. |
-| sort         | "date"       | Type of sorting to be used, either "date" (default), "weight", "publication", "expiration", "lastmod", "length", "title", "linktitle", or "&lt;param&gt;". See Hugo's [content ordering]({{< param "links.hugo_ordering" >}}) for more details. |
-| reverse      | true         | Flag to indicate the sorting of the section content should be reversed, defaults to true. |
-| cols         | 3            | Number of columns to display in the card group, defaults to 3. |
-| color        | -            | Theme color of the card, either "primary", "secondary", "success", "danger", "warning", "info", "light", "dark", "white" or "black". By default, no color is specified. |
-| padding      | "auto"       | Padding of the content, either "0", "1", "2", "3", "4", "5", or "auto" (default). |
-| header       | "full"       | Header components of the card, displayed in small caps. Supported values are "full" (default), "publication", "tags", and "none". |
-| footer       | "none"       | Footer components of the card, displayed in small caps. Supported values are "full", "publication", "tags", and "none" (default). |
-| orientation  | "stacked"    | Placecement of the thumbnail, either "stacked" (default), "horizontal", or "none". |
-| style        | -            | Optional styling attributes added to card class, e.g. "border-0" to remove the borders. |
-| homepage     | 3            | Maximum number of items to display on the home page (if defined in the [configuration](#configuration-1)), defaults to 3. |
-{.table}
-
-The below configuration shows the default configuration set in `config/_default/params.toml`.
-
-{{< docs name="list" file="config/_default/params.toml" >}}
-
-## Single pages
-
-Single pages follow the base layout but introduce two columns next to the body content. The left column shows a [sidebar navigation]({{< ref "navigation#sidebar-navigation" >}}) if applicable and is left empty otherwise. The right column shows a [table of contents]({{< ref "navigation#table-of-contents" >}}) for the current page if applicable. On smaller viewscreens, the sidebar navigation folds into an offcanvas element, whilst the table of contents is hidden. On medium-sized screens the sidebar navigation takes precedence over the table of contents.
-
-### Default layout
-
-By default, single pages, such as a blog page, include the following elements in the body:
-
-- **Title** - the title of the page as set in the page's frontmatter.
-- **Metadata** - the date of the page, the modification date (if applicable), the read time, and the amount of words on the page.
-- **Tags** - links to any tags defined in the page's frontmatter.
-- **Description** - the description as defined in the page's frontmatter, or as summarized by Hugo if omitted in the frontmatter.
-- **Thumbnail** - a thumbnail image with figure caption that links to the photo credits (if defined in the frontmatter).
-- **Navigation links** - links on the bottom of the page that link to the previoud and next page within the current section.
-
-The below example illustrates the parameters used in the page's frontmatter:
-
-```yaml
----
-author: Mark Dumay
-title: Another project
-date: 2021-07-15
-description: Another project.
-tags: ["javascript", "golang"]
-thumbnail: img/coffee.jpg
-photoCredits: <a href="https://unsplash.com/@kfred">Karl Fredrickson</a>
-photoSource: <a href="https://unsplash.com/photos/TYIzeCiZ_60">Unsplash</a>
----
-```
-
-### Documentation layout
-
-Documentation pages use a more straightforward, simplified layout compared to the default layout. They include the following elements in their body:
-
-- **Title** - the title of the page as set in the page's frontmatter.
-- **Description** - the description as defined in the page's frontmatter, or as summarized by Hugo if omitted in the frontmatter.
-- **Metadata** - a revision date and link to the latest git commit on the bottom of the page. Enable `enableGitInfo` in the [main configuration](#main-configuration) for the git commit message to work.
-
-Be sure to select the `docs` layout in the page's frontmatter to enable the documentation layout:
-
-```yml
----
-layout: docs
----
-```
-
-### Example
-
-<div class="container-fluid text-center bg-light border rounded-3 bg-opacity-10 p-3">
-    <div class="row g-3">
-        <div class="col-12">
-            <div class="p-3 bg-secondary bg-opacity-10 rounded-3">Header .col-12</div>
-        </div>
-        <div class="col-12">
-            <div class="row">
-                <div class="col-3">
-                    <div class="bg-primary bg-opacity-10 rounded-3">
-                        <p>Sidebar</p>
-                        <i>sticky</i>
-                    </div>
-                </div>
-                <div class="col-6">
-                    <div class="bg-primary bg-opacity-10 rounded-3">
-                        <p>Body .col-8 .flex-fill</p>
-                        <i>expands to fill viewport</i>
-                    </div>
-                </div>
-                <div class="col-3">
-                    <div class="bg-primary bg-opacity-10 rounded-3">
-                        <p>TOC</p>
-                        <i>sticky</i>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="col-12">
-            <div class="p-3 bg-secondary bg-opacity-10 rounded-3">Social .col-12</div>
-        </div>
-        <div class="col-12">
-            <div class="p-3 bg-secondary bg-opacity-10 rounded-3">Footer .col-12</div>
-        </div>
-    </div>
-</div>
-
-### Configuration
-
-The configuration of the documentation pages is set in the `docs` section of the site parameters. The folllowing settings are supported:
-
-| Setting      | Default | Description |
-|--------------|---------|-------------|
-| docs_version | -       | Default version to use in documentation links. |
-{.table}
-
-The below configuration shows the default configuration set in `config/_default/params.toml`.
-
-{{< docs name="docs" file="config/_default/params.toml" >}}

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

@@ -1,9 +0,0 @@
----
-title: Metadata
-description: 
-date: 2023-01-18
-group: configuration
-layout: docs
----
-
-<!-- TODO: expand -->

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

@@ -1,106 +0,0 @@
----
-title: Navigation
-description: Help the user navigate your website using configurable navigation elements.
-date: 2023-01-15
-group: configuration
-layout: docs
----
-
-Hinode supports several types of navigation that utilize Bootstrap elements. The main navigation is positioned on the top of the screen and includes a search input element. An optional secondary navigation is available as sidebar. Next to these navigation items, pages may optionally include a breadcrumb to indicate the current page's location within the site's navigational hierarchy. Finally, pages may also include a table of contents element that is linked to the scroll position of the current page.
-
-## Basic configuration
-
-The basic configuration of the navigation elements is set in the `navigation` section of the site parameters. The folllowing settings are supported:
-
-| Setting    | Default | Description |
-|------------|---------|-------------|
-| logo       | -       | Address of the brand logo image, e.g. "/img/logo_embedded.svg". |
-| color      | "white" | [Theme color]({{< ref "colors" >}}) of the navigation bar. Set the style to set the correct contrast of the menu items. |
-| style      | "light" | Style of the navigation bar, either "light" or "dark". It changes the colors of the menu items accordingly. |
-| fixed      | false   | Flag indicating to keep the navigation bar fixed at the top of the screen. |
-| offset     | "3em"   | Applies an [offset to main elements]({{< param "links.bs_navbar_placement" >}}) when `fixed` is set to true. |
-| search     | true    | Flag indicating to include a search input. |
-| breadcrumb | false   | Flag indicating to add breadcrumb navigation to the top of any single page. List pages are excluded. |
-| toc        | true    | Flag indicating to enable table of contents globally. Individual pages can override this setting in the frontmatter using the value `includeToc`. |
-| sidebar    | true    | Flag indicating to enable sidebar navigation globally. If set, a sidebar is displayed when applicable. |
-{.table}
-
-The below configuration shows the default configuration set in `config/_default/params.toml`.
-
-{{< docs name="navigation" file="config/_default/params.toml" >}}
-
-## Main navigation
-
-The main navigation uses [Hugo's menu system]({{< param "links.hugo_menus" >}}) to generate a responsive navigation bar at the top of the page. The navigation bar uses a breakpoint to add a toggler for smaller screens. A language switcher is added automatically if your site supports multiple languages. The language switcher links to the currently translated page if available.
-
-### Menus
-
-The navigation bar uses [Hugo's menu system]({{< param "links.hugo_menus" >}}) to generate the menu items. The navigation supports nesting at one level depth. The following example defines an example menu configuration called `sample` (the main configuration is called `main`).
-
-{{< docs name="sample-navigation" file="config/_default/menus/menus.en.toml" >}}
-
-### Example
-
-Using the sample configuration defined in the previous paragraph, the navigation bar looks like this:
-
-{{< navbar color="light" size="sm" search="false" menus="sample" title="Sample" >}}
-
-### Customization
-
-Hinode includes a navigation bar at the top of the screen by default. You can modify the configuration in the `layouts/_default/baseof.html` file. The navigation bar is also available as [shortcode]({{< ref "navbar" >}}).
-
-## Sidebar navigation
-
-Hinode supports optional sidebar navigation. It is intended to be used as companion to the main navigation and is typically used in content-heavy sections, such as documentation pages. On smaller screens, the sidebar is replaced with an [offcanvas element]({{< param "links.bs_offcanvas" >}}). In this case, the main navigation receives an additional toggler on the left of the screen.
-
-### Menus
-
-Inspired by Bootstrap's documentation site, Hinode uses a separate configuration file for the sidebar menus. A sidebar can be configured for each main section of the site. For example, the sidebar menus of the `Docs` section are defined in `data/docs.yml`. The menus support group items and single page items. Below example defines a group section called `Getting started` with three siblings. A single page `About` is added next.
-
-```yml
-- title: Getting started
-  pages:
-    - title: Introduction
-    - title: Commands
-    - title: Contribute
-- title: About
-```
-
-An entry in the page's [frontmatter]({{< param "links.hugo_frontmatter" >}}) is needed to link the page to the correct entry in the sidebar. Below example highlights the relevant frontmatter elements from the `Introduction` page, which is part of the `Getting started` group. Please notice the group name needs to be defined in kebab-case, e.g. `getting-started`. You can omit the group name for single page entries, such as the `About` page in the example configuration above.
-
-```yml
----
-title: Introduction
-group: getting-started
----
-```
-
-### Customization
-
-The file `assets/scss/components/_sidebar.scss` contains the styling of the sidebar. It refers to a button `$btn-toggle` that is defined in `assets/scss/common/_icons.scss`. It also defines the spacing to be added to the page's main content section when using a fixed navigation bar:
-
-{{< docs name="sidebar" file="assets/scss/components/_sidebar.scss" >}}
-
-## Breadcrumb
-
-Hinode supports optional breadcrumb navigation. The breadcrumb indicates the current page's location within the site's navigational hierarchy. It is automatically populated by Hugo. Enable the breadcrumb in the [basic navigation configuration](#basic-configuration). If enabled, all single pages will add breadcrumb navigation to the top of the page.
-
-### Example
-
-When enabled, the breadcrumb looks like this:
-
-{{< breadcrumb >}}
-
-### Customization
-
-The breadcrumb is also available as [shortcode]({{< ref "breadcrumb" >}}).
-
-## Table of contents
-
-Single pages can optionally show an [table of contents]({{< param "links.hugo_toc" >}}) on the right of the screen. The table of contents is automatically popuplated based on the headings within the page content (two levels deep). The table of contents is hidden on smaller screens or if it has less than two items. Enable the table of contents in the [basic navigation configuration](#basic-configuration). If enabled, all single pages will show the element, unless disabled in the page's frontmatter.
-
-### Customization
-
-The file `assets/scss/components/_toc.scss` defines the styling of the table of contents element. It adds spacing to align the element to the sidebar, amongst other styling:
-
-{{< docs name="toc" file="assets/scss/components/_toc.scss" >}}

content/en/docs/0.8/content/icons.md

@@ -1,259 +0,0 @@
----
-title: Icons
-description: Use out-of-the-box Font Awesome icons to style your website.
-date: 2023-02-02
-group: content
-layout: docs
----
-
-Hinode provides out-of-the box access to the free icons of [Font Awesome]({{< param "links.fontawesome" >}}). The [shortcodes]({{< relref "icon" >}}) `fa`, `fab`, and `fas` are available to add these icons with as limited code as possible. The Font Awesome icon library provides various [styling options]({{< param "links.fa_styling" >}}). The below paragraphs illustrate how to apply the styling options compatible with Markdown, Bootstrap, and the [content security policy]({{< ref "server" >}}).
-
-## Styling basics
-
-The [Font Awesome icon library]({{< param "links.fa_icons" >}}) provides access to more than 2.000 free and open-source icons. Simply search for a keyword and review the presented options. For example, searching for the keyword `music` and filtering for `free` returns a list of nearly 30 icons. Use one of the following three [shortcodes]({{< relref "icon" >}}) to add an icon to your Markdown content:
-
-- `fa` - regular Font Awesome icon library
-- `fab` - brands Font Awesome icon library
-- `fas` - solid Font Awesome icon library
-
-Specify the correct icon library and omit the `fa-` prefix from the icon name to insert an icon.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* fas music */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->
-
-The icons inherit the current styling options and as such blend in with text inline. For example, appply the [theme color]({{< ref "colors" >}}) `text-primary` of the outer HTML element `span` to change the color of the icon. You can also pass the class attribute directly to the shortcode, such as `text-info`.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-<span class="text-primary">
-    {{</* fas music */>}}
-</span>
-{{</* fas music text-info */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->
-
-## Sizing icons
-
-Font Awesome supports both relative and absolute sizing. The following two section explain how to apply the sizing to an icon.
-
-### Relative sizing
-
-Font Awesome includes a range of t-shirt based sizes that are relative to the browser's default font size of 16px. The icons align to the inline text. The following example illustrative the available relative sizes.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-<p>{{</* fas coffee fa-2xs */>}} When my six o’clock alarm buzzes, I require a pot of good java.</p>
-<p>{{</* fas coffee fa-xs */>}} When my six o’clock alarm buzzes, I require a pot of good java.</p>
-<p>{{</* fas coffee fa-sm */>}} When my six o’clock alarm buzzes, I require a pot of good java.</p>
-<p>{{</* fas coffee fa */>}} When my six o’clock alarm buzzes, I require a pot of good java.</p>
-<p>{{</* fas coffee fa-lg */>}} When my six o’clock alarm buzzes, I require a pot of good java.</p>
-<p>{{</* fas coffee fa-xl */>}} When my six o’clock alarm buzzes, I require a pot of good java.</p>
-<p>{{</* fas coffee fa-2xl */>}} When my six o’clock alarm buzzes, I require a pot of good java.</p>
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->
-
-The table below illustrates the relative sizing classes and their equivalent relative and absolute font size.
-
-{{< table "table-striped w-auto" >}}
-| Relative Sizing Class | Font Size | Equivalent in Pixels |
-|----------|--------:|-----:|
-| `fa-2x`  | 0.625em | 10px |
-| `fa-xs`  | 0.75em  | 12px |
-| `fa-sm`  | 0.875em | 14px |
-| `fa`     | 1em     | 16px |
-| `fa-lg`  | 1.25em  | 20px |
-| `fa-xl`  | 1.5em   | 24px |
-| `fa-2xl` | 2em     | 32px |
-{{< /table >}}
-
-### Absolute sizing
-
-Font Awesome also supports absolute sizing on a scale of 1x to 10x. The icons do not necessarily align to their surrounding text. The following example illustrative the various absolute sizes.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* fas camera fa-1x */>}}
-{{</* fas camera fa-2x */>}}
-{{</* fas camera fa-3x */>}}
-{{</* fas camera fa-4x */>}}
-{{</* fas camera fa-5x */>}}
-{{</* fas camera fa-6x */>}}
-{{</* fas camera fa-7x */>}}
-{{</* fas camera fa-8x */>}}
-{{</* fas camera fa-9x */>}}
-{{</* fas camera fa-10x */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->
-
-The table below illustrates the absolute sizing classes and their equivalent font size.
-
-{{< table "table-striped w-auto" >}}
-| Absolute Sizing Class | Font Size |
-|---------|--------:|
-| `fa-1x` | 1em |
-| `fa-2x` | 2em |
-| `fa-3x` | 3em |
-| `fa-4x` | 4em |
-| `fa-5x` | 5em |
-| `fa-6x` | 6em |
-| `fa-7x` | 7em |
-| `fa-8x` | 8em |
-| `fa-9x` | 9em |
-| `fa-10x` | 10em |
-{{< /table >}}
-
-## Fixed width
-
-Add `fa-fw` to the class of the HTML element referencing your icon to apply a fixed width. This ensures icons of varying icon width are properly aligned to each other. The following example illustrates how this works.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-<div class="fa-3x">
-    <div>{{</* fas skating fa-fw bg-info */>}} Skating</div>
-    <div>{{</* fas skiing fa-fw bg-info */>}} Skiing</div>
-    <div>{{</* fas skiing-nordic fa-fw bg-info */>}} Nordic Skiing</div>
-    <div>{{</* fas snowboarding fa-fw bg-info */>}} Snowboarding</div>
-    <div>{{</* fas snowplow fa-fw bg-info */>}} Snowplow</div>
-</div>
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->
-
-## Lists
-
-Use the classes `fa-ul` and `fa-li` to replace default bullets in unordered lists. The following example illustrates how this works.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-<ul class="fa-ul">
-    <li><span class="fa-li">{{</* fas circle-check */>}}</span>List icons can</li>
-    <li><span class="fa-li">{{</* fas check-square */>}}</span>be used to</li>
-    <li><span class="fa-li">{{</* fas spinner fa-pulse */>}}</span>replace bullets</li>
-    <li><span class="fa-li">{{</* fa square */>}}</span>in lists</li>
-</ul>
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->
-
-## Rotating icons
-
-Use specific classes to rotate the icon with a specific degree. The following example illustrates how this works.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-<div class="fa-3x">
-    {{</* fas snowboarding */>}}
-    {{</* fas snowboarding fa-rotate-90 */>}}
-    {{</* fas snowboarding fa-rotate-180 */>}}
-    {{</* fas snowboarding fa-rotate-270 */>}}
-    {{</* fas snowboarding fa-flip-horizontal */>}}
-    {{</* fas snowboarding fa-flip-vertical */>}}
-    {{</* fas snowboarding fa-flip-both */>}}
-</div>
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->
-
-The following classes are available:
-
-{{< table "table-striped w-auto" >}}
-| Class | Details |
-|---------|--------|
-| `fa-rotate-90` | Rotates an icon 90° |
-| `fa-rotate-180` | Rotates an icon 180° |
-| `fa-rotate-270` | Rotates an icon 270° |
-| `fa-flip-horizontal` | Mirrors an icon horizontally |
-| `fa-flip-vertical` | Mirrors an icon vertically |
-| `fa-flip-both` | Mirrors an icon both vertically and horizontally |
-{{< /table >}}
-
-## Animating icons
-
-Font Awesome supports various animations by simply adding a animation class to the HTML element. The following example illustrates the available basic animations. Add custom styles to your [Sass files]({{< ref "styles" >}}) to apply additional [animation utilities]({{< param "links.fa_animation" >}}).
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-<div class="fa-3x">
-    {{</* fas heart fa-beat */>}}
-    {{</* fas triangle-exclamation fa-fade */>}}
-    {{</* fas circle-info fa-beat-fade */>}}
-    {{</* fas basketball fa-bounce */>}}
-    {{</* fas camera-rotate fa-flip */>}}
-    {{</* fas bell fa-shake */>}}
-    {{</* fas sync fa-spin */>}}
-</div>
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->
-
-The following table describes the available basic animation classes.
-
-{{< table "table-striped w-auto" >}}
-| Class | Details |
-|---------|--------|
-| `fa-beat` | Scales an icon up or down |
-| `fa-fade` | Fades an icon in and out |
-| `fa-beat-fade` | Scales and pulses an icon in and out |
-| `fa-bounce` | Bounces an icon up and down |
-| `fa-flip` | Rotates an icon about the Y axis 180 degrees |
-| `fa-shake` | Shakes an icon back and forth |
-| `fa-spin` | Roates an icon |
-{{< /table >}}
-
-## Bordered and pulled icons
-
-Use `fa-border` and `fa-pull-right` or `fa-pull-left` for easy pull quotes or article icons. The following example illustrates a quote.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* fas quote-left fa-2x fa-pull-left */>}}
-Gatsby believed in the green light, the orgastic future that year by year recedes before us.
-It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further...
-And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->
-
-The following table describes the available classes.
-
-{{< table "table-striped w-auto" >}}
-| Class | Details |
-|-------|---------|
-| `fa-border` | Creates a border with border-radius and padding applied around an icons |
-| `fa-pull-left` | Pulls an icon by floating it left and applying a margin-right |
-| `fa-pull-right` | Pulls an icon by floating it right and applying a margin-left |
-{{< /table >}}
-
-## Stacking icons
-
-Use the `fa-stack` class on the parent HTML element of the two icons you want to stack. Then add the `fa-stack-1x` class for the regularly sized icon and add the `fa-stack-2x` class for the larger icon. `fa-inverse` can be added to the icon with the `fa-stack-1x` to help with a knock-out looking effect. Add a [theme color]({{< ref "colors" >}}) such as `text-primary` to change the color of the icon. The following example illustrates the available options.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-<span class="fa-stack fa-2x">
-    {{</* fas square fa-stack-2x */>}}
-    {{</* fab twitter fa-stack-1x fa-inverse */>}}
-</span>
-<span class="fa-stack fa-2x">
-    {{</* fas circle fa-stack-2x */>}}
-    {{</* fas flag fa-stack-1x fa-inverse */>}}
-</span>
-<span class="fa-stack fa-2x">
-    {{</* fas camera fa-stack-1x */>}}
-    {{</* fas ban fa-stack-2x text-danger */>}}
-</span>
-<span class="fa-stack fa-4x">
-    {{</* fas square fa-stack-2x */>}}
-    {{</* fas terminal fa-stack-1x fa-inverse */>}}
-</span>
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->
-
-The following table describes the available classes.
-
-{{< table "table-striped w-auto" >}}
-| Class | Details |
-|-------|---------|
-| `fa-stack`    | Used on a parent HTML element of the two icons to be stacked |
-| `fa-stack-1x` | Used on the icon which should be displayed at base size when stacked |
-| `fa-stack-2x` | Used on the icon which should be displayed larger when stacked |
-| `fa-inverse`  | Inverts the color of the icon displayed at base size when stacked |
-{{< /table >}}

content/en/docs/0.8/content/images-and-figures.md

@@ -1,43 +0,0 @@
----
-title: Images and figures
-description: Use the image shortcode to display a responsive image with optional caption.
-date: 2023-01-28
-group: content
-layout: docs
----
-
-Hinode supports responsive images out-of-the-box. Although you can include images in your content natively with Markdown, these images are not optimized for your viewport or screen. Hinode uses Hugo's powerful [image processing]({{< param "links.hugo_image" >}}) to preprocess images on the server side. By taking advantage of so-called [image sets]({{< param "links.mozilla_image" >}}), the client's browser can decide which image to download whilst reducing the download size.
-
-## Images
-
-As an example, the following shortcode displays an image with rounded corners and a 21x9 aspect ratio. The [image shortcode documentation]({{< relref "image" >}}) provides more details.
-
-{{< alert >}}
-Be sure to store your local images in the `assets` folder to take advantage of the image processing features. Images stored in the `static` folder are not processed.
-{{< /alert >}}
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* image src="img/flowers.jpg" ratio="21x9" class="rounded" */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->
-
-You can also reference remote images by specifying an URL. Hinode downloads the image to the server and stores the processed images in the local `resources` folder (during debugging) or `public` folder (during build).
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-<div class="mx-auto w-25">
-    {{</* image src="https://picsum.photos/id/56/2880/1920" ratio="1x1" class="rounded" */>}}
-</div>
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->
-
-## Figures
-
-Similar to the [images support]({{< relref "#images" >}}), you can add a caption to display below the image. Add the argument `caption` to include a figure caption.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* image src="img/coffee.jpg" ratio="21x9" caption="Figure caption" class="rounded" */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->

content/en/docs/0.8/content/links-and-cross-references.md

@@ -1,96 +0,0 @@
----
-title: Links and cross-references
-description: Generate internal links and external links using a combination of Markdown and Hugo shortcodes.
-date: 2023-01-28
-group: content
-layout: docs
----
-
-<!-- TODO: expand -->
-
-## Internal links
-
-Hugo provides the shortcode `ref` to link to another page within the site. The shortcode returns an absolute path. You can provide the document path as input. If you omit the leading `/`, the page is first resolved relative to the current page, then to the remainder of the site. Review [Hugo's documentation]({{< param "links.hugo_links" >}}) for more examples and advanced options.
-
-{{< example lang="hugo" >}}
-[Tables]({{</*ref "tables" */>}})
-
-[About]({{</*ref "/about" */>}})
-{{< /example >}}
-
-Similar to the `ref` shortcode, Hugo provides the shortcode `relref` to return a path relative to the current page.
-
-{{< example lang="hugo" >}}
-[Tables]({{</*relref "tables" */>}})
-
-[About]({{</*relref "/about" */>}})
-{{< /example >}}
-
-## Cross-references
-
-When using Markdown document types, Hugo generates element IDs for every heading on a page. Spaces are replaced with `-`. For example:
-
-```markdown
-## An example reference
-```
-
-produces the following HTML:
-
-```html
-<h2 id="an-example-reference">An example reference</h2>
-```
-
-You can add a cross-reference to the section heading by specifying the generated ID as input for the `ref` and `relref` shortcodes, preceded by a `#`.
-
-{{< example lang="hugo" >}}
-[Reference]({{</* ref "#reference" */>}})
-
-[Reference]({{</* relref "#reference" */>}})
-{{< /example >}}
-
-## External links
-
-Hugo supports basic Markdown to create links to external websites. The following sections explain the various options.
-
-### Basic links
-
-Hugo supports basic Markdown to create links to external websites. To create a link, enclose the link text in brackets (e.g., `[Duck Duck Go]`) and then follow it immediately with the URL in parentheses (e.g., `(https://duckduckgo.com)`).
-
-{{< example lang="markdown" >}}
-My favorite search engine is [Duck Duck Go](https://duckduckgo.com).
-{{< /example >}}
-
-### URLs and email addresses
-
-To quickly turn a URL or email address into a link, enclose it in angle brackets.
-
-{{< example lang="markdown" >}}
-<https://www.markdownguide.org>
-
-<fake@example.com>
-{{< /example >}}
-
-### Reference-style links
-
-Instead of using parentheses, you can use brackets to link to a predefined address. The following example uses a named reference to link to the website of Font Awesome.
-
-{{< example lang="markdown" >}}
-[Font Awesome][fontawesome]
-
-[fontawesome]: https://fontawesome.com
-{{< /example >}}
-
-### Managed links
-
-Hinode uses `config/default/params.toml` to manage links to external addresses in a single place. You can use a combination of Markdown and Hugo shortcodes to generate a managed link. The following snippet of `config/default/params.toml` defines the link address for `fontawesome`:
-
-```toml
-[links]
-    fontawesome = "https://fontawesome.com"
-```
-
-You can then use the following statement to generate the link.
-
-{{< example lang="markdown" >}}
-[Font Awesome]({{</* param "links.fontawesome" */>}})
-{{< /example >}}

content/en/docs/0.8/content/tables.md

@@ -1,139 +0,0 @@
----
-title: Tables
-description: Enhance out-of-the-box Markdown tables with Bootstrap styling.
-date: 2023-01-22
-group: content
-layout: docs
----
-
-Hugo supports out-of-the box Markdown tables. Hinode enhances the basic tables with optional styling features provided by Bootstrap. The following paragraphs illustrate how to use basic tables, how to accent them, how to adjust the borders, and how to make the table more compact.
-
-## Basic tables
-
-Hugo supports tables out-of-the-box with extended Markdown. Use an optional shortcode as wrapper to align the table cells.
-
-### Default alignment
-
-Hugo supports tables out-of-the-box by using the `|` and `-` characters. Add `{.table}` at the bottom of the block to apply the correct styling. You can mix the content with inline Markdown.
-
-{{< example lang="markdown" >}}
-| Italics   | Bold     | Code   |
-| --------- | -------- | ------ |
-| _italics_ | **bold** | `code` |
-{.table}
-{{< /example >}}
-
-### Aligned cells and headers
-
-Hugo's Markdown processor applies inline styles to align cells in a table, which is blocked by Hinode's [Content Security Policy]({{< ref "server" >}}). Use the `table` shortcode to wrap your Markdown input instead. You can then align header and cell data to the left, center, or right of a column using the `:` character. Pass additional class attributes between double quotes, e.g. `"table-striped"`. See the [next section](#accented-tables) for more options.
-
-<!-- markdownlint-disable MD037 -->
-{{< example lang="hugo" >}}
-{{</* table "table-striped" */>}}
-| #  | Item        | Left aligned | Center aligned |   Right aligned|
-| -- | ----------- |:-------------|:--------------:| --------------:|
-| 1. | First item  | some text    | more text      | even more text |
-| 2. | Second item | some text    | more text      | even more text |
-| 3. | Third item  | some text    | more text      | even more text |
-{{</* /table */>}}
-{{< /example >}}
-<!-- markdownlint-enable MD037 -->
-
-## Accented tables
-
-Add optional class attributes to style the table using Bootstrap.
-
-### Striped rows
-
-Use `.table-striped` to add zebra-striping to any table row.
-
-{{< example lang="markdown" >}}
-| #  | Item        |
-| -- | ----------- |
-| 1. | First item  |
-| 2. | Second item |
-| 3. | Third item  |
-{.table .table-striped}
-{{< /example >}}
-
-### Striped columns
-
-Use `.table-striped-columns` to add zebra-striping to any table column.
-
-{{< example lang="markdown" >}}
-| #  | Item        | Description            |
-| -- | ----------- | ---------------------- |
-| 1. | First item  | This is the first row  |
-| 2. | Second item | This is the second row |
-| 3. | Third item  | This is the third row  |
-{.table .table-striped-columns}
-{{< /example >}}
-
-### Hoverable rows
-
-Add `.table-hover` to enable a hover state on the table rows.
-
-{{< example lang="markdown" >}}
-| #  | Item        |
-| -- | ----------- |
-| 1. | First item  |
-| 2. | Second item |
-| 3. | Third item  |
-{.table .table-hover}
-{{< /example >}}
-
-### Colored tables
-
-Add `table-<theme>` to apply [theme colors]({{< ref "colors" >}}) to your table. You can mix them with other classes, such as `.table-striped`.
-
-{{< example lang="markdown" >}}
-| #  | Item        |
-| -- | ----------- |
-| 1. | First item  |
-| 2. | Second item |
-| 3. | Third item  |
-{.table .table-success .table-striped}
-{{< /example>}}
-
-## Table borders
-
-Adjust the borders of a table to match your style preferences.
-
-### Bordered tables
-
-Add `.table-bordered` for borders on all sides of the table and cells. Add an optional `border-<theme>` class to apply [theme colors]({{< ref "colors" >}}) to the table borders.
-
-{{< example lang="markdown" >}}
-| #  | Item        |
-| -- | ----------- |
-| 1. | First item  |
-| 2. | Second item |
-| 3. | Third item  |
-{.table .table-bordered .border-primary}
-{{< /example >}}
-
-### Tables without borders
-
-Add `.table-borderless` for a table without borders.
-
-{{< example lang="markdown" >}}
-| #  | Item        |
-| -- | ----------- |
-| 1. | First item  |
-| 2. | Second item |
-| 3. | Third item  |
-{.table .table-borderless}
-{{< /example >}}
-
-## Small tables
-
-Add `.table-sm` to make any table more compact by cutting all cell padding in half.
-
-{{< example lang="markdown" >}}
-| #  | Item        |
-| -- | ----------- |
-| 1. | First item  |
-| 2. | Second item |
-| 3. | Third item  |
-{.table .table-sm}
-{{< /example >}}

content/en/docs/0.8/content/typography.md

@@ -1,219 +0,0 @@
----
-title: Typography
-description: Use a mix of Markdown and HTML syntax to style your content.
-date: 2023-01-22
-group: content
-layout: docs
----
-
-Hinode uses a mix of basic Markdown syntax enriched with Bootstrap styling for the typography. The following paragraphs illustrate the most common applications. Refer to the Hugo documentation to review the extended description of supported [content formats]({{< param "links.hugo_content" >}}). It also contains links to external resource about Markdown.
-
-## Headings
-
-Use the native Markdown character `#` to generate headings for your content. The following input represents six levels of section headings. They are generated as HTML `<h1>`—`<h6>` elements. `<h1>` is the highest section level while `<h6>` is the lowest.
-
-<!-- markdownlint-disable MD025 -->
-{{< example lang="markdown" >}}
-
-# H1. Heading
-
-## H2. Heading
-
-### H3. Heading
-
-#### H4. Heading
-
-##### H5. Heading
-
-###### H6. Heading
-
-{{< /example >}}
-<!-- markdownlint-enable MD025 -->
-
-Alternatively, you can use `.h1` through `.h6` classes, for when you want to match the font styling of a heading but cannot use the associated HTML element. For example, using a `.h2` class will exclude the section heading from the generated [table of contents]({{< ref "navigation#table-of-contents" >}}).
-
-{{< example lang="html" >}}
-<p class="h1">H1</p>
-<p class="h2">H2</p>
-<p class="h3">H3</p>
-<p class="h4">H4</p>
-<p class="h5">H5</p>
-<p class="h6">H6</p>
-{{< /example >}}
-
-## Display headings
-
-Display a larger, slightly more opinionated heading style by adding the `.display` class in HTML.
-
-{{< example lang="html" >}}
-<h1 class="display-1">Display 1</h1>
-<h1 class="display-2">Display 2</h1>
-<h1 class="display-3">Display 3</h1>
-<h1 class="display-4">Display 4</h1>
-<h1 class="display-5">Display 5</h1>
-<h1 class="display-6">Display 6</h1>
-{{< /example >}}
-
-## Lead
-
-Make a paragraph stand out by adding `.lead` class in HTML.
-
-{{< example lang="html" >}}
-<p class="lead">
-  This is a lead paragraph. It stands out from regular paragraphs.
-</p>
-{{< /example >}}
-
-## Inline text elements
-
-You can use native Markdown to apply basic styling. Use HTML elements for additional formatting options.
-
-### Native Markdown
-
-Use native Markdown apply basic styling to your text.
-
-<!-- markdownlint-disable MD049 -->
-{{< example lang="markdown" >}}
-~~This line of text is meant to be treated as deleted text.~~
-
-_This line of text renders as underlined._
-
-**This line of text renders as bold text.**
-
-*This line of text renders as italicized text.*
-{{< /example >}}
-<!-- markdownlint-enable MD049 -->
-
-### HTML Styling
-
-Use HTML tags for additional styling options. The following example illustrates highlighting, fine print, subscript, and superscript.
-
-{{< example lang="html" >}}
-<p>You can use the mark tag to <mark>highlight</mark> text.</p>
-<p><small>This line of text is meant to be treated as fine print.</small></p>
-<p>H<sub>2</sub>O is a liquid.</p>
-<p>2<sup>10</sup> is 1024.</p>
-{{< /example >}}
-
-## Emoji
-
-Use shortcodes to insert Emoji into your content. You can use this [list of emoji]({{< param "links.markdown_emoji" >}}) shortcodes as a reference, although the results may vary across browsers and devices. The following example inserts an inline smiley.
-
-<div class="bg-light p-3 mb-3">
-    That is so funny! <code>:<zero-width space>smiley:<zero-width space></code>
-</div>
-
-The result looks like this:
-
-That is so funny! :smiley:
-
-## Abbreviations
-
-Use the HTML element `<abbr>` for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.
-
-{{< example lang="html" >}}
-<p><abbr title="HyperText Markup Language">HTML</abbr></p>
-{{< /example >}}
-
-## Blockquotes
-
-The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations. Use the `>` Markdown character to generate a blockquote and add `{.blockquote}` at the bottom of the block to apply the correct styling.
-
-### Blockquote without attribution
-
-The following Markdown generates a blockquote without attribution.
-
-{{< example lang="markdown" >}}
-> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
-> **Note** that you can use _Markdown syntax_ within a blockquote.
-{.blockquote}
-{{< /example >}}
-
-### Blockquote with attribution
-
-The following Markdown generates a blockquote with attribution. The citation itself is added to the bottom of the page.
-
-{{< example lang="markdown" >}}
-> Don't communicate by sharing memory, share memory by communicating.<br>
-> — <cite>Rob Pike[^1]</cite>
-{.blockquote}
-
-[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
-{{< /example >}}
-
-## Code Blocks
-
-Use a single backtick `` ` `` character to denote an inline code element. Use triple backticks `` ``` `` to denote the start and end of a code block. Add the language to the opening backticks to specify the syntax. Hugo uses Chroma highlighting to style the syntax of [supported languages]({{< param "links.hugo_chroma" >}}). The following example defines an `HTML` code block.
-
-{{< example lang="markdown" >}}
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>Example HTML5 Document</title>
-  </head>
-  <body>
-    <p>Test</p>
-  </body>
-</html>
-```
-
-{{< /example >}}
-
-## List Types
-
-Use native Markdown to define ordered lists, unordered lists, and nested lists.
-
-### Ordered List
-
-The following Markdown defines an ordered list of three items. The sequence is automatically determined, so simply add `1.` at the start of each element. The [linting rules]({{< ref "contribute#markdown" >}}) will raise an error if you add the sequence numbering yourself.
-
-{{< example lang="markdown" >}}
-
-1. First item
-1. Second item
-1. Third item
-
-{{< /example >}}
-
-### Unordered List
-
-Use the `-` character to denote an unordered list.
-
-{{< example lang="markdown" >}}
-
-- List item
-- Another item
-- And another item
-
-{{< /example >}}
-
-### Nested list
-
-Use indendation and the `-` character to denote a nested list.
-
-{{< example lang="markdown" >}}
-
-- Fruit
-  - Apple
-  - Orange
-  - Banana
-- Dairy
-  - Milk
-  - Cheese
-
-{{< /example >}}
-
-### Task list
-
-Use the `-` character followed by either `[x]` or `[ ]` to indicate a (completed) task.
-
-{{< example lang="markdown" >}}
-
-- [x] Write the press release
-- [ ] Update the website
-- [ ] Contact the media
-
-{{< /example >}}

content/en/docs/0.8/getting-started/commands.md

@@ -1,75 +0,0 @@
----
-title: Commands
-description: Use npm commands to automate the build process and to keep track of dependencies.
-date: "2023-01-11"
-group: getting-started
-layout: docs
----
-
-Hinode uses [Node Package Manager]({{< param "links.npm" >}}) to automate the build process and to keep track of dependencies. The `package.json` file in the repository root defines several commands to simplify local development and testing. The following paragraphs describe the main commands.
-
-## Starting a local server
-
-Use the following command from the command prompt to start a local **development server**. The command removes any previous build artifacts in the `public` and `resources` folders. The command invokes the local web server from Hugo, which watches for changes in the key system files and configuration directory. By default the generated site is available at `http://localhost:1313/` and is responsive to changes. This alllows for interactive development and testing. When in development mode, the generated assets (such as javascripts and CSS files) are not minified to simplify debugging.
-
-{{% command %}}
-npm run start
-{{% /command %}}
-
-Use the following command to mimick the site in **production mode**. In this setting, generated assets are minified and compliant with the Content Security Policy. Although Hugo's web server is not meant to be run in a real production environment, it does allow validation of the site in an environment close to production.
-
-{{% command %}}
-npm run prod
-{{% /command %}}
-
-## Generating a web site
-
-Use the following command to generate the static site. The build artifacts are stored in the local `public` folder. You can deploy these files to your **production** server.
-
-{{% command %}}
-npm run build
-{{% /command %}}
-
-Add the prefix `debug` to generate a site suitable for **debugging**. The build artifacts are not minified to simplify review and testing.
-
-{{% command %}}
-npm run build:debug
-{{% /command %}}
-
-## Validating linting rules
-
-Use the the following command to analyze the source code and to test for any stylistic errors. The lint command validates three types of files in the `assets` folder and `content` folder:
-
-* Javascript (`assets/*.js`) using [eslint]({{< param "links.eslint" >}}).
-* CSS and SASS (`assets/scss/**/*.{css,sass,scss,sss,less}`) using [stylelint]({{< param "links.stylelint" >}}).
-* Markdown (`*.md` and `content/**/*.md`) using [markdownlint-cli2]({{< param "links.markdownlint" >}}).
-
-The basic configuration of these linting tools is defined in the repository root.
-
-{{% command %}}
-npm run lint
-{{% /command %}}
-
-Be sure to adhere to the linting rules before submitting any code changes / Pull Requests to Hinode's repository.
-
-## Upgrading dependencies
-
-Use the following command to test for any available upgrades of used packages. The command runs `npx` to validate the dependencies and to upgrade the dependency versions in `package.json`.
-
-{{% command %}}
-npm run upgrade
-{{% /command %}}
-
-The `npx` command does not validate the version of the Hugo binary. The version needs to be manually updated in the `package.json` file.
-
-```json
-  "otherDependencies": {
-    "hugo": "0.109.0"
-  }
-```
-
-Be sure to install the upgraded dependencies if needed:
-
-{{% command %}}
-npm install
-{{% /command %}}

content/en/docs/0.8/getting-started/contribute.md

@@ -1,124 +0,0 @@
----
-title: Contribute
-description: Contribute to the open-source development of Hinode.
-date: 2023-01-06
-group: getting-started
-layout: docs
----
-
-Hinode is fully open source and welcomes any contributions, either big or small. To streamline the contribution process, please take a moment to review the guidelines outlined in this article.
-
-## Using the issue tracker
-
-The [issue tracker]({{< param "links.issue_tracker" >}}) on GitHub is the preferred channel for bug reports, feature requests and submitting pull requests.
-
-## Bug reports
-
-A bug is a *demonstrable problem* that is caused by the code in the repository. This may also include issues with the documentation or configuration files. Before filing a bug report, please consider the following guidelines:
-
-- Validate your HTML and Markdown content to ensure your problem isn't caused by a simple error in your own code.
-- Use the GitHub [issue search]({{< param "links.issue_tracker" >}}) — check if the issue has already been reported.
-- Check if the issue has been fixed — try to reproduce it using the latest main in the [repository]({{< param "links.repository" >}}).
-- Isolate the problem — ideally create a reduced test case.
-- Use the provided template in the [issue tracker]({{< param "links.issue_tracker" >}}) to capture the context, evidence and steps on how to reproduce the issue.
-
-## Feature requests
-
-Feature requests are welcome. But take a moment to find out whether your idea fits with the scope and aims of the project. Please use the provided template in the [issue tracker]({{< param "links.issue_tracker" >}}) to capture the idea and context.
-
-## Pull requests
-
-Good pull requests—patches, improvements, new features—are a fantastic help. They should remain focused in scope and avoid containing unrelated commits.
-
-**Please ask first** before embarking on any **significant** pull request (e.g. implementing features, refactoring code, porting to a different language), otherwise you risk spending a lot of time working on something that the project's developers might not want to merge into the project. For trivial things, or things that don't require a lot of your time, you can go ahead and make a PR.
-
-Please adhere to the [coding guidelines](#coding-guidelines) used throughout the project (indentation, accurate comments, etc.) and any other requirements (such as test coverage).
-
-Adhering to the following process is the best way to get your work included in the project:
-
-1. Fork the project, clone your fork, and configure the remotes:
-
-    ```bash
-    git clone https://github.com/<your-username>/hinode.git
-    cd hinode
-    git remote add upstream https://github.com/gethinode/hinode
-    ```
-
-1. If you cloned a while ago, get the latest changes from upstream:
-
-    ```bash
-    git checkout main
-    git pull upstream main
-    ```
-
-1. Create a new topic branch (off the main project development branch) to contain your feature, change, or fix:
-
-    ```bash
-    git checkout -b <topic-branch-name>
-    ```
-
-1. Commit your changes in logical chunks. Please adhere to these [git commit message guidelines]({{< param "links.commit_message" >}}). Use Git's [interactive rebase]({{< param "links.github_rebase" >}}) feature to tidy up your commits before making them public.
-
-1. Locally merge (or rebase) the upstream development branch into your topic branch:
-
-    ```bash
-    git pull [--rebase] upstream main
-    ```
-
-1. Push your topic branch up to your fork:
-
-    ```bash
-    git push origin <topic-branch-name>
-    ```
-
-1. Open a [Pull Request]({{< param "links.github_pr" >}}) with a clear title and description against the main branch.
-
-{{< alert >}}
-**IMPORTANT**: By submitting a patch, you agree to allow the project owners to license your work under the terms of the [MIT license]({{< param "links.license" >}}) (if it includes code changes) and under the terms of the Creative Commons ([CC BY-NC 4.0)]({{< param "links.cc_by_nc_4_0" >}}) license (if it includes documentation changes).
-{{< /alert >}}
-
-## Coding guidelines
-
-In general, run `npm run lint` before committing to ensure your changes follow our coding standards.
-
-### HTML
-
-[Adhere to the Code Guide]({{< param "links.html_codeguide" >}}).
-
-- Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags).
-- Use npm packages for third-party JS when possible.
-- Use WAI-ARIA attributes in documentation examples to promote accessibility.
-
-### CSS
-
-[Adhere to the Code Guide]({{< param "links.css_codeguide" >}}).
-
-- When feasible, default color palettes should comply with [WCAG color contrast guidelines]({{< param "links.wcag_contrast" >}}).
-
-### Javascript
-
-Bundle related client-side javascript in a logically named file. Add the file to the `assets/js` when using Hugo templating. Adjust the eslint configuration as needed to handle necessary exceptions. When adapting someone else's code, please add a link to the original source to give them credit.
-
-- No semicolons (in client-side JS)
-- 2 spaces (no tabs)
-- strict mode
-- "Attractive"
-
-### Markdown
-
-See [markdown rules]({{< param "links.markdown_rules" >}}) for more details. The following rules are globally disabled:
-
-| #     | Rule | Remarks |
-|-------|-----------------------------------------------------------------------------------------------|---------------------------------|
-| MD013 | [Line length]({{< param "links.markdown_md013" >}})                                           | |
-| MD024 | [Multiple headings with the same content]({{< param "links.markdown_md024" >}})               | |
-| MD026 | [Trailing punctuation in heading]({{< param "links.markdown_md026" >}})                       | |
-| MD033 | [Inline HTML]({{< param "links.markdown_md033" >}})                                           | |
-| MD034 | [Bare URL used]({{< param "links.markdown_md034" >}})                                         | |
-| MD051 | [Link fragments should be valid]({{< param "links.markdown_md051" >}})                        | |
-| MD053 | [Link and image reference definitions should be needed]({{< param "links.markdown_md053" >}}) | Disabled due to false positives |
-{.table}
-
-## License
-
-By contributing your code, you agree to license your contribution under the [MIT license]({{< param "links.license" >}}). By contributing to the documentation, you agree to license your contribution under the Creative Commons ([CC BY-NC 4.0)]({{< param "links.cc_by_nc_4_0" >}}) license.

content/en/docs/0.8/getting-started/hosting-and-deployment.md

@@ -1,205 +0,0 @@
----
-title: Hosting and deployment
-description: Deploy your Hinode site to popular hosting providers.
-date: 2023-02-02
-group: getting-started
-layout: docs
----
-
-As a static website, your Hinode site can be deployed virtually anywhere. Hugo provides a comprehensive overview of the more popular [deployment solutions]({{< param "links.hugo_deployment" >}}). Hinode uses a different build process compared to a default Hugo site. Review the [considerations]({{< relref "#considerations" >}}) for more details. The next paragraphs highlight the specific build and deployment process of Hinode for a few selected hosting providers.
-
-## Considerations
-
-Before deciding on your hosting and deployment approach, review the following considerations.
-
-1. Include npm in your build process
-
-   Hinode uses npm to manage its dependencies. Visit the [Hinode introduction]({{< relref "introduction" >}}) and [commands overview]({{< relref "commands" >}}) for more details.
-
-2. Configure the build timeout
-
-   You might encounter timeout errors when you generate a large site that contains many resources (such as images). Adjust the `timout` in `config/_default/config.toml` as needed.
-
-   {{< docs name="build" file="config/_default/config.toml" >}}
-
-3. Consider using build automation
-
-   Many popular Git providers provide the option to automate the build and deployment process (<abbr title="Continous Integration/Continuous Deployment">CI/CD</abbr>). You can trigger this process on each release to your main repository branch, or set up a preview during a Pull Request. The examples on this page assume you have a Git repository with GitHub.
-
-4. Understand the support for custom domain names
-
-   Most hosting providers provide a subdomain, such as `<username>.github.io`, to access your website by default. Usually you have the ability to use a custom domain instead, although additional services and configuration might be needed.
-
-5. Decide on multiregion and CDN support
-
-   Websites that serve a global audience might benefit from a multiregion or edge deployment to increase availability and reduce latency. You can also consider adding a dedicated <abbr title="Content Delivery Network">CDN</abbr>, which has the ability to reduce the impact of <abbr title="Distributed Denial of Service">DDoS</abbr> attacks for example.
-
-6. Consider using custom HTTP headers
-
-   Hinode uses custom HTTP headers to enable the [Content Security Policy]({{< relref "server" >}}). The support for custom HTTP headers varies per provider, and might need additional services and configuration.
-
-The table below gives a brief overview of the features supported by a few selected hosting providers. The next paragraphs describe the build and deployment process for each provider in more detail.
-
-{{< table "table-striped-columns w-auto" >}}
-| Feature            | Azure blob storage | Netlify           |
-|--------------------|--------------------|-------------------|
-| Automation         | Custom action      | {{< fas check >}} |
-| Custom domain name | Requires Azure CDN | {{< fas check >}} |
-| CDN / Edge network | Requires Azure CDN | {{< fas check >}} |
-| HTTP headers       | Requires Azure CDN | {{< fas check >}} |
-{{< /table >}}
-
-<!-- | Feature            | Azure blob storage | Azure Static Web App | GitHub pages      | Netlify           |
-|--------------------|--------------------|----------------------|-------------------|-------------------|
-| Automation         | Custom action      | {{< fas check >}}    | {{< fas check >}} | {{< fas check >}} |
-| Custom domain name | Requires Azure CDN | {{< fas check >}}    | {{< fas check >}} | {{< fas check >}} |
-| CDN / Edge network | Requires Azure CDN | {{< fas check >}}    | {{< fas check >}} | {{< fas check >}} |
-| HTTP headers       | Requires Azure CDN | {{< fas check >}}    |                   | {{< fas check >}} |
-{.table} -->
-
-## Host on Azure blob storage
-
-Azure supports hosting a static website directly from its blob storage. The service is [available for free]({{< param "links.az_blob_pricing" >}}) for the first 12 months (conditions apply). The next sections describe how to configure the cloud storage correctly and how to deploy your website from your local computer to Azure.
-<!-- Consider using [Azure's Static Web App]({{< relref "#host-as-azure-static-web-app" >}}) if you plan to automate your deployments. The Static Web Apps have better support for integration with your Git provider and are easier to scale. -->
-
-### Assumptions
-
-- You have a Hinode website you are ready to deploy.
-- You do not already have a Azure storage account.
-
-### Preparations
-
-The configuration folder should include a file `config/production/deployment.toml`. If not, copy it from the [Hinode main repository]({{< param "links.repository" >}}). The deployment file contains the settings used by the command `hugo deploy`. The panel below shows the default deployment settings for Azure blob storage. A more detailed example is available on the [Hugo website]({{< param "links.hugo_config_deploy" >}}).
-
-{{< docs name="az-blob" file="config/production/deployment.toml" show="false" >}}
-
-### Configure your site
-
-Deploy your site to Azure blob storage in six steps.
-
-{{< carousel class="col-sm-12 col-lg-8 mx-auto" >}}
-  {{< img src="img/azblob-step1a.png" caption="Step 1a. Create a storage account" >}}
-  {{< img src="img/azblob-step1b.png" caption="Step 1b. Define the instance details" >}}
-  {{< img src="img/azblob-step1c.png" caption="Step 1c. Confirm the storage account deployment" >}}
-  {{< img src="img/azblob-step2.png" caption="Step 2. Enable the static website" >}}
-  {{< img src="img/azblob-step3.png" caption="Step 3. Configure environment variables" >}}
-{{< /carousel >}}
-
-<!-- markdownlint-disable MD037 -->
-{{< accordion >}}
-  {{< accordion-item header="Step 1. Create a storage account" >}}
-    If not done so already, sign up for an account on the [Azure website]({{< param "links.azure" >}}). Log in to the Azure portal and create a storage account. The storage account needs to have a unique name across Azure. Select a region that best fits your needs. Leave all other options to their default value.
-  {{< /accordion-item >}}
-  {{< accordion-item header="Step 2. Enable the static website" >}}
-    Go to the menu section `Data management` and select `Static website`. Set the toggle for `Static website` to `Enabled`. Azure will then create a storage container `$web` within your storage account to host your website. Capture the primary endpoint, for example `https://gethinode.z6.web.core.windows.net/`. Set the `Index document name` to `index.html`. Hit the `Save` button when done.
-  {{< /accordion-item >}}
-  {{< accordion-item header="Step 3. Configure environment variables" >}}
-    Go to the menu section `Security + networking` and select `Access keys`. Capture the storage account name, e.g. `gethinode`. Next, copy either of the two keys to your clipboard. Set the credentials on your local computer:
-    {{</* command user="user" host="localhost" */>}}
-    export AZURE_STORAGE_ACCOUNT="<account name>"
-    export AZURE_STORAGE_KEY="<storage key>"
-    {{</* /command */>}}
-  {{< /accordion-item >}}
-  {{< accordion-item header="Step 4. Build the website locally" >}}
-    Run the following command to build your website locally:
-    {{</* command user="user" host="localhost" */>}}
-    npm run build
-    {{</* /command */>}}
-  {{< /accordion-item >}}
-  {{< accordion-item header="Step 5. Deploy the files" >}}
-    Deploy the files to your Azure blob storage using the folling command. Add `--dryRun` to review the upload before actually publishing the files.
-    {{</* command user="user" host="localhost" */>}}
-    hugo deploy
-    {{</* /command */>}}
-  {{< /accordion-item >}}
-  {{< accordion-item header="Step 6. Visit the end point" >}}
-    Once the deployment has finished, visit the end point captured in step 2 to test the website in your browser.
-  {{< /accordion-item >}}
-{{< /accordion >}}
-<!-- markdownlint-enable MD037 -->
-
-You can make your static website available via a custom domain. Visit the [Azure documentation]({{< param "links.az_blob_domain" >}}) on how to map a custom domain to your blob storage endpoint. The static website does not support configuration of HTTP headers. Use Azure CDN to [configure HTTP headers]({{< param "links.az_cdn_rules" >}}) for your static website instead. Review the [server configuration]({{< relref "server" >}}) to identify the recommended configuration of the Content Security Policy.
-
-<!-- ## Host as Azure Static Web App -->
-
-<!-- TODO: expand for Azure Static Web Apps -->
-
-<!-- Azure provides a Static Web App service that is [available for free]({{< param "links.az_blob_pricing" >}}). The free service is limited to 100 GB bandwidth per subscription, 2 custom domains, and 0.5 GB storage per app.
-
-### Assumptions
-
-- You have an account and repository with GitHub.
-- You have a Hinode website you are ready to deploy.
-- You do not already have a Azure account.
-
-### Preparations
-
-### Configure your site
-
-## Host on GitHub pages -->
-
-<!-- TODO: expand for Github pages-->
-
-## Host on Netlify
-
-Netlify can host your website with continous deployment from your Git provider. The starter price plan is free for any public repository and provides 100 GB bandwidth and 300 build minutes each month. Review the next sections how to automatically deploy your site to Netlify on each update to the main branch of your repository.
-
-{{< alert >}}
-The starter plan requires your repository to be public. You will require a paid plan if your repository is set to private.
-{{< /alert >}}
-
-### Assumptions
-
-- You have an account and repository with GitHub, GitLab, or Bitbucket.
-- You have a Hinode website you are ready to deploy.
-- You do not already have a Netlify account.
-
-### Preparations
-
-The repository root should include a file `netlify.toml`. If not, copy it from the [Hinode main repository]({{< param "links.repository" >}}). The configuration file contains the build settings that Netlify will pick up when connecting to your repository. The panel below shows the default build settings. The key command to observe is `npm run build`, which ensures the site is built properly.
-
-{{< alert >}}
-The default configuration provides basic security headers. Please review the [server configuration]({{< relref "server" >}}) for more details about the Content Security Policy.
-{{< /alert >}}
-
-{{< docs name="netlify" file="netlify.toml" show="false" >}}
-
-### Configure your site
-
-Sign up for Netlify and configure your site in seven steps.
-
-{{< carousel class="col-sm-12 col-lg-8 mx-auto" >}}
-  {{< img src="img/netlify-step1.png" caption="Step 1. Sign up for Netlify" >}}
-  {{< img src="img/netlify-step2.png" caption="Step 2. Sign in with your Git provider" >}}
-  {{< img src="img/netlify-step3.png" caption="Step 3. Authenticate your sign in (2FA)" >}}
-  {{< img src="img/netlify-step4.png" caption="Step 4. Add a new site" >}}
-  {{< img src="img/netlify-step5.png" caption="Step 5. Connect to your Git provider" >}}
-  {{< img src="img/netlify-step6.png" caption="Step 6. Import an existing project" >}}
-  {{< img src="img/netlify-step7.png" caption="Step 7. Configure the build settings" >}}
-{{< /carousel >}}
-
-{{< accordion >}}
-  {{< accordion-item header="Step 1. Sign up for Netlify" >}}
-    Go to [netlify.com]({{< param "links.netlify" >}}) and click on the button `Sign up`. Select your preferred signup method next. This will likely be a hosted Git provider, although you also have the option to sign up with an email address. The next steps use GitHub, but other Git providers will follow a similar process.
-  {{< /accordion-item >}}
-  {{< accordion-item header="Step 2. Sign in with your Git provider" >}}
-    Enter the credentials for your Git provider and click the button to sign in.
-  {{< /accordion-item >}}
-  {{< accordion-item header="Step 3. Authenticate your sign in (2FA)" >}}
-    Assuming you have enabled two-factor authentication with your Git provider, authenticate the sign in next. This example uses the GitHub Mobile app.
-  {{< /accordion-item >}}
-  {{< accordion-item header="Step 4. Add a new site" >}}
-    Click on the button `Add new site` to set up a new site with Netlify.
-  {{< /accordion-item >}}
-  {{< accordion-item header="Step 5. Connect to your Git provider" >}}
-    Connect to your Git provider to import your existing Hinode repository.
-  {{< /accordion-item >}}
-  {{< accordion-item header="Step 6. Import an existing project" >}}
-    Pick a repository from your Git provider. Ensure Netlify has access to the correct repository.
-  {{< /accordion-item >}}
-  {{< accordion-item header="Step 7. Configure the build settings" >}}
-    Review the basic build settings. Netlify will use the settings provided in the [preparations]({{< relref "#preparations" >}}). Click on the button `Deploy site` to start the build and deployment process.
-  {{< /accordion-item >}}
-{{< /accordion >}}
-
-Your site is now ready to be used. Click on the domain settings of your site within the `Site overview` page to provide a domain alias and to edit the site name as needed. The same section also allows the configuration of a custom domain. Be sure to review your [server configuration]({{< relref "server" >}}) if you encounter any rendering issues, such as broken links or garbled stylesheets.

content/en/docs/0.8/getting-started/introduction.md

@@ -1,114 +0,0 @@
----
-title: Introduction
-description: Get started with Hinode, a clean documentation and blog theme for your Hugo site based on Bootstrap 5.
-date: 2023-01-29
-group: getting-started
-aliases:
-  - "/en/docs/0.8/getting-started/"
-  - "/en/docs/getting-started/"
-  - "/en/getting-started/"
-  - "/en/docs/"
-layout: docs
----
-
-Hinode is a clean documentation and blog theme for [Hugo]({{< param "links.hugo" >}}), an open-source static site generator. Based on the [Bootstrap 5]({{< param "links.bootstrap" >}}) framework, the rendered site is fast, secure, and responsive. Hinode uses [FlexSearch]({{< param "links.flexsearch" >}}) to enable full text search across your site. Finally, the theme uses [Node Package Manager]({{< param "links.npm" >}}) to automate the build process and to keep track of dependencies. More information is available on the [about]({{< ref "about" >}} "about") page.
-
-## Prerequisites
-
-Hinode requires Git, Node.js and npm for local development and testing. Download the Git binary from the [official website]({{< param "links.git_download" >}}). Next, download and install [Node.js]({{< param "links.nodejs" >}}) (it includes npm) for your platform.
-
-## Installation
-
-Start a new Hinode project in three steps:
-
-1. Create a new site
-
-    Hinode is available as a [child theme]({{< param "links.repository_child" >}}), and a [main theme]({{< param "links.repository" >}}). The child theme uses [npm]({{< param "links.npm" >}}) to link to the latest available version of Hinode. Unless you plan to customize a lot, it is recommended to use the child theme:
-
-    {{< command >}}
-    git clone https://github.com/gethinode/child.git my-hinode-site && cd my-hinode-site
-    {{< /command >}}
-
-    Use the main theme if you intend to customize the base code:
-
-    {{< command >}}
-    git clone https://github.com/gethinode/hinode.git my-hinode-site && cd my-hinode-site
-    {{< /command >}}
-
-2. Install dependencies
-
-    {{< command >}}
-    npm install
-    {{< /command >}}
-
-3. Start the development server
-
-    {{< command >}}
-    npm run start
-    {{< /command >}}
-
-## Quick configuration settings
-
-The main site configuration is available in `./config/_default`. Review the following items to get you started.
-
-{{< accordion >}}
-  {{< accordion-item header="Review the layout options" >}}
-    Hinode uses a base layout for the home page, list pages, and individual pages. Individual pages can also be configured as documentation page instead of a regular page. Review the [layout documentation]({{< relref "colors" >}}) for more details.
-  {{< /accordion-item >}}
-  {{< accordion-item header="Adjust the theme colors" >}}
-    Hinode uses eight configurable theme colors. You can adjust them in the `style` section of  `/config/_default/params.toml`. Review the [colors documentation]({{< relref "colors" >}}) for more details.
-  {{< /accordion-item >}}
-  {{< accordion-item header="Set the main font" >}}
-    Set the `themeFont` and `themeFontPath` in the `style` section of `/config/_default/params.toml` to adjust the main font. Hinode includes supports for [Emoji]({{< relref "emoji" >}}) by default. Review the [fonts documentation]({{< relref "fonts" >}}) for more details.
-  {{< /accordion-item >}}
-  {{< accordion-item header="Configure the supported languages">}}
-    Configure each supported language in `config/_default/languages.toml`. Set the default behavior in `config/_default/config.toml`. Review the [languages documentation]({{< relref "languages" >}}) for more details.
-  {{< /accordion-item >}}
-  {{< accordion-item header="Define the main menu" >}}
-    Define the main menu entries for each language in `config/_default/menus`. For example, the English menu entries are defined in `menus.en.toml`. See the [navigation documentation]({{< relref "navigation" >}}) for more details.
-  {{< /accordion-item >}}
-{{< /accordion >}}
-
-## Adding content
-
-Hinode contains sample content for a blog and a project portfolio. The examples are available in English and Dutch and can be found in the `content` folder. Review the following items on to how organize and enrich your content.
-
-{{< accordion >}}
-  {{< accordion-item header="Enrich Markdown content with Bootstrap styling" >}}
-    Hinode uses a mix of basic Markdown syntax enriched with Bootstrap styling for the typography. Review the [typography documentation]({{< relref "typography" >}}) for more details.
-  {{< /accordion-item >}}
-  {{< accordion-item header="Use Markdown and Hugo shortcodes to generate links and cross-references" >}}
-    Generate internal links and external links using a combination of Markdown and Hugo shortcodes. You can optionally manage your external links in a central configuration file. Review the [links documentation]({{< relref "links-and-cross-references" >}}) for more details.
-  {{< /accordion-item >}}
-  {{< accordion-item header="Add responsive images optimized for multiple screen sizes and devices">}}
-    Hinode supports responsive images out-of-the-box. Hinode uses Hugo’s powerful image processing to preprocess images on the server. By taking advantage of so-called image sets, the client’s browser can decide which image to download whilst reducing the download size. Review the [image documentation]({{< relref "images-and-figures" >}}) for more details.
-  {{< /accordion-item >}}
-  {{< accordion-item header="Apply Bootstrap styling to your tables" >}}
-    Hinode enhances the basic tables available in Markdown with optional styling features provided by Bootstrap. You can customize the accentuation, adjust the borders, and make tables more compact. Review the [tables documentation]({{< relref "tables" >}}) for more details.
-  {{< /accordion-item >}}
-  {{< accordion-item header="Include Font Awesome icons on the fly" >}}
-    Hinode provides out-of-the box access to the free icons of [Font Awesome]({{< param "links.fontawesome" >}}). The icon library provides various styling options. Review the [icons documentation]({{< relref "../content/icons" >}}) for more details.
-  {{< /accordion-item >}}
-{{< /accordion >}}
-
-## Advanced configuration settings
-
-The next topics give an overview of the advanced configuration settings.
-
-{{< accordion >}}
-  {{< accordion-item header="Review the approach to dependency management and virtualization" >}}
-    Hinode uses [npm]({{< param "links.npm" >}}) packages to manage its dependencies. In addition, it uses Hugo's [mounted folders]({{< param "links.hugo_mounts" >}}) to create a virtual file system. Review the [advanced settings overview]({{< relref "../advanced-settings/overview" >}}) for more details.
-  {{< /accordion-item >}}
-  {{< accordion-item header="Adjust the build pipeline for Sass files" >}}
-    Hinode uses Bootstrap's Sass files to generate the cascading style sheets of the website. The main entrypoint is defined in `assets/scss/app.scss`. See the [styles documentation]({{< relref "styles" >}}) for more details.
-  {{< /accordion-item >}}
-  {{< accordion-item header="Bundle JavaScript files for deployment">}}
-    Hinodes uses npm to include the latest JavaScript files of external packages such as [Bootstrap]({{< param "links.bootstrap" >}}) and [FlexSearch]({{< param "links.flexsearch" >}}). All local and external files are bundled in a single JavaScript file. See the [scripts documentation]({{< relref "scripts" >}}) for more details.
-  {{< /accordion-item >}}
-  {{< accordion-item header="Process icon files to apply theme colors" >}}
-    Hinode replaces Boostrap's embedded icons with file-based icons to comply with its security settings. The icon files are parameterized to use the theme colors. See the [icons documentation]({{< relref "../advanced-settings/icons" >}}) for more details.
-  {{< /accordion-item >}}
-  {{< accordion-item header="Refine header settings to adjust the Content Security Policy" >}}
-    Hinode uses rather strict security policies to ensure the site is secure 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 `config/_default/server.toml`. Similar settings are defined in the `netlify.toml` file provided in the repository's root when deploying to [Netlify]({{< param "links.netlify" >}}). See the [server documentation]({{< relref "server" >}}) for more details.
-  {{< /accordion-item >}}
-{{< /accordion >}}

data/docs.yml

@@ -1,82 +0,0 @@
-# This file holds all menu entries for the docs sidebar
-
-- title: Getting started
-  pages:
-    - title: Introduction
-    - title: Commands
-    - title: Hosting and deployment
-    - title: Contribute
-
-- title: Configuration
-  pages:
-    - title: Layout
-    - title: Colors
-    - title: Fonts
-    - title: Languages
-    - title: Navigation
-    # - title: Comments
-
-- title: Advanced settings
-  pages:
-    - title: Overview
-    - title: Styles
-    - title: Scripts
-    - title: Icons
-    # - title: Metadata
-    - title: Server
-
-- title: Content
-  pages:
-    - title: Typography
-    - title: Links and cross-references
-    - title: Images and figures
-    - title: Tables
-    - title: Icons
-
-# - title: Forms
-#   pages:
-#     - title: Overview
-#     - title: Form control
-#     - title: Select
-#     - title: Checks & radios
-#     - title: Range
-#     - title: Input group
-#     - title: Floating labels
-#     - title: Layout
-#     - title: Validation
-
-- title: Components
-  pages:
-    # - title: Overview
-    - title: Accordion
-    - title: Alert
-    - title: Badge
-    - title: Breadcrumb
-    - title: Button
-    - title: Button group
-    - title: Card
-    - title: Carousel
-    # - title: Close button
-    - title: Collapse
-    - title: Command prompt
-    # - title: Dropdowns
-    # - title: List group
-    - title: Icon
-    - title: Image
-    # - title: Modal
-    - title: Navbar
-    # - title: Navs & tabs
-    # - title: Offcanvas
-    # - title: Pagination
-    # - title: Placeholder
-    # - title: Popover
-    # - title: Progress
-    # - title: Scrollspy
-    - title: Spinner
-    - title: Toast
-    - title: Tooltip
-
-- title: About
-  pages:
-    - title: Credits
-    - title: License

i18n/de.yaml

@@ -53,6 +53,16 @@
   translation: "Erste"
 - id: paginationLast
   translation: "Letzte"
+- id: toggleSidebar
+  translation: "Menünavigation anzuzeigen oder auszublenden"
+- id: colorMode
+  translation: "Modus"
+- id: colorLight
+  translation: "Licht"
+- id: colorDark
+  translation: "Dunkel"
+- id: colorAuto
+  translation: "Automatisch"
 
 # 404 page
 - id: pageNotFound

i18n/en.yaml

@@ -53,6 +53,16 @@
   translation: "First"
 - id: paginationLast
   translation: "Last"
+- id: toggleSidebar
+  translation: "Toggle sidebar navigation"  
+- id: colorMode
+  translation: "Color mode"
+- id: colorLight
+  translation: "Light"
+- id: colorDark
+  translation: "Dark"
+- id: colorAuto
+  translation: "Auto"
 
 # 404 page
 - id: pageNotFound

i18n/nl.yaml

@@ -53,6 +53,16 @@
   translation: "Eerste"
 - id: paginationLast
   translation: "Laatste"
+- id: toggleSidebar
+  translation: "Toon of verberg navigatie"  
+- id: colorMode
+  translation: "Modus"
+- id: colorLight
+  translation: "Licht"
+- id: colorDark
+  translation: "Donker"
+- id: colorAuto
+  translation: "Automatisch"
 
 # 404 page
 - id: pageNotFound

layouts/_default/_markup/render-codeblock.html

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

layouts/_default/baseof.html

@@ -1,7 +1,7 @@
 {{- with partial "utilities/GetMenu" . }}{{ $.Scratch.Set "sidebar" . }}{{ end -}}
 
 <!doctype html>
-<html lang="{{ .Site.Language.Lang }}" class="no-js">
+<html lang="{{ .Site.Language.Lang }}" class="no-js" data-bs-theme="dark">
     <head>
         {{ block "head" . }}{{ end -}}
     </head>

layouts/_default/single.html

@@ -1,6 +1,6 @@
 {{- define "partials/header.html" -}}
     {{ if site.Params.navigation.breadcrumb }}{{ partial "breadcrumb.html" . }}{{ end -}}
-    {{ if eq .Layout "docs"}}
+    {{ if in (slice "docs" "minimal") .Layout }}
         <h1>{{ .Title }}</h1>
     {{ else }}
         {{ $lastmodstr := (partial "utilities/date.html" (dict "date" .Lastmod "format" "long")) -}}

layouts/partials/assets/card.html

@@ -27,9 +27,9 @@
     {{- $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 href="{{ $href }}" class="{{ if $color }}link-bg-{{ $color }}{{ else }}card-body-link{{ 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 }}card-body-link{{ end }}">{{ . }}</p>{{ end -}}
     </a>
 {{- end -}}
 

layouts/partials/assets/navbar.html

@@ -59,7 +59,7 @@
 {{- $color := "" -}}
 {{- with .color -}}
     {{- $color = . -}}
-    {{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" -}}
+    {{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" -}}
     {{- if not (in $supportedColors $color) -}}
         {{- errorf "Invalid value for param 'color': %s" $color -}}
     {{- end -}}
@@ -75,6 +75,9 @@
     {{- end -}}
 {{- end -}}
 
+{{- $enableDarkMode := default true site.Params.main.enableDarkMode -}}
+{{- $enableLanguage := or $page.IsTranslated site.IsMultiLingual -}}
+
 {{- $logo := site.Params.navigation.logo -}}
 {{- with .logo }}{{ $logo = . }}{{ end -}}
 
@@ -87,11 +90,11 @@
 {{- $pre := .Pre -}}
 {{- $post := .Post -}}
 
-<nav class="navbar navbar-expand-{{ $size }} navbar-{{ $style }} {{ with $color }}bg-{{ . }}{{ end }} {{ if $fixed }}fixed-top{{ end }} p-3">
+<nav class="navbar navbar-expand-{{ $size }} {{ with $color }}bg-{{ . }}{{ end }} {{ if $fixed }}fixed-top{{ end }} p-3">
 	<div class="container-fluid">
         <!-- 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">
+            <button class="navbar-toggler collapsed ms-n3" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
                 {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
             </button>
         {{- end -}}
@@ -108,9 +111,9 @@
         <!-- 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>
+			<span class="toggler-icon top-bar emphasis"></span>
+			<span class="toggler-icon middle-bar emphasis"></span>
+			<span class="toggler-icon bottom-bar emphasis"></span>
 		</button>
 
         <div class="navbar-collapse collapse" id="navbarSupportedContent-{{ $id }}">
@@ -128,8 +131,8 @@
                     {{- $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 class="nav-link {{ if $active }}active{{ end }} dropdown-toggle" href="{{ .URL }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                                {{ if $active }}<span  class="active">{{ .Name }}</span>{{ else }}{{ .Name }}{{ end }}
                             </a>
                             <ul class="dropdown-menu dropdown-menu-end">
                                 {{- range .Children -}}
@@ -151,12 +154,19 @@
                     {{- end -}}
                 {{- end -}}
 
+
+                {{- if or $enableLanguage $enableDarkMode -}}
+                    <li class="nav-item py-2 py-md-1 col-12 col-md-auto">
+                        <div class="vr d-none d-md-flex h-100 mx-md-2"></div>
+                    </li>
+                {{- end -}}
+
                 <!-- Insert language switcher if applicable -->
-                {{- if or $page.IsTranslated site.IsMultiLingual -}}
+                {{- if $enableLanguage -}}
                     {{- $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">
-                            {{- partial "assets/icon.html" (dict "icon" "fas globe") }} {{ T "languageSwitcherLabel" -}}
+                            {{- partial "assets/icon.html" (dict "icon" "fas globe") }} {{ T "languageSwitcherLabel" }}
                         </a>
                         <ul class="dropdown-menu dropdown-menu-end ">
                             {{- if $page.IsTranslated -}}
@@ -171,6 +181,36 @@
                         </ul>
                     </li>
                 {{- end -}}
+                              
+                <!-- Insert color mode switcher -->
+                {{- if $enableDarkMode -}}
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" id="navbar-color-theme">
+                            {{- partial "assets/icon.html" (dict "icon" "fas sun theme-icon-active") }}
+                            <span class="d-md-none"></span>
+                        </a>
+                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbar-color-theme">
+                            <li>
+                                <a class="dropdown-item" data-bs-theme-value="light">
+                                    {{- partial "assets/icon.html" (dict "icon" "fas sun theme-icon") }}
+                                    {{ T "colorLight" }}
+                                </a>
+                            </li>
+                            <li>
+                                <a class="dropdown-item" data-bs-theme-value="dark">
+                                    {{- partial "assets/icon.html" (dict "icon" "fas moon theme-icon") }}
+                                    {{ T "colorDark" }}
+                                </a>
+                            </li>
+                            <li>
+                                <a class="dropdown-item" data-bs-theme-value="auto">
+                                    {{- partial "assets/icon.html" (dict "icon" "fas circle-half-stroke theme-icon" ) }}
+                                    {{ T "colorAuto" }}
+                                </a>
+                            </li>
+                        </ul>
+                    </li>
+                {{- end -}}
             </ul>
         </div>
     </div>

layouts/partials/assets/search-input.html

@@ -1,6 +1,6 @@
-<div class="d-flex d-none d-sm-block ms-3">
+<div class="d-flex ms-md-3">
     <form class="search position-relative flex-grow-1 me-auto">
         <input id="search" class="form-control is-search" type="search" placeholder="{{ T "ui_search" }}" aria-label="{{ T "ui_search" }}" autocomplete="off">
-        <div id="suggestions" class="shadow bg-white rounded d-none"></div>
+        <div id="suggestions" class="shadow bg-body rounded d-none"></div>
     </form>
 </div>

layouts/partials/assets/sidebar.html

@@ -33,7 +33,7 @@
                                 {{- $doc_slug := $doc.title | urlize -}}
                                 {{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}}
                                 {{- $href := relLangURL (path.Join $section site.Params.docs.version $group_slug $doc_slug) -}}
-                                <li><a href="{{ $href }}" class="link-dark d-inline-flex text-decoration-none rounded {{ if $is_active }}active{{ end }}">{{ $doc.title }}</a></li>
+                                <li><a href="{{ $href }}" class="d-inline-flex sidebar-item text-decoration-none rounded {{ if $is_active }}active{{ end }}">{{ $doc.title }}</a></li>
                             {{- end }}
                         </ul>
                     </div>
@@ -47,7 +47,7 @@
                             {{- $doc_slug := $group.title | urlize -}}
                             {{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}}
                             {{- $href := relLangURL (path.Join $section site.Params.docs.version $doc_slug) -}}
-                            <a href="{{ $href }}" class="link-dark d-inline-flex text-decoration-none rounded {{ if $is_active }}active{{ end }}">
+                            <a href="{{ $href }}" class="d-inline-flex sidebar-item text-decoration-none rounded {{ if $is_active }}active{{ end }}">
                                 {{ $group.title }}
                             </a>      
                         </li>

layouts/partials/version.html

@@ -0,0 +1,18 @@
+<!-- 
+    Returns the current version defined in 'package.json` in the repository root, or in the documentation base path
+    ('params.docs.basePath') if specified. The returned version includes a 'v' prefix. The partial returns nothing
+    when no match is found. The partial does not require any arguments.
+-->
+
+{{- $file := "package.json" -}}
+{{- $basePath := .Site.Params.docs.basePath -}}
+{{- $file = path.Join $basePath (path.Clean $file) -}}
+
+{{- $regex := printf `"version":.*(\r\n|\r|\n)` -}}
+
+{{- $match := findRE $regex (readFile $file) -}}
+{{- $match = index $match 0 -}}
+
+{{- if $match -}}
+    {{- printf "v%s" (trim (index (split $match ":") 1) " \r\n,\"") -}}
+{{- end -}}

layouts/shortcodes/button.html

@@ -1,6 +1,7 @@
 <!-- 
     Displays a button. The shortcode supports the following arguments:
     "href"          Optional address for the button or hyperlink. Automatically assigned when using collapse.
+    "relref"        Optional name of the page to link to. Replaces "href" with a relative link if set.
     "id"            Optional id of the button, to be used in the DOM.
     "state"         Optional state of the button, either "enabled" (default), "disabled", "active", or "inactive".
     "size"          Optional size of the button, either "sm", "md" (default), or "lg".
@@ -62,7 +63,11 @@
 {{ $tooltip := .Get "tooltip" -}}
 {{ $collapse := .Get "collapse" -}}
 {{ $href := .Get "href" -}}
+{{ $relref := .Get "relref" }}
 {{ $id := .Get "id" -}}
+{{ if $relref }}
+    {{ $href = relref . $relref }}
+{{ end }}
 
 {{ $placement := "top" -}}
 {{ with .Get "placement" }}{{ $placement = . }}{{ end -}}

layouts/shortcodes/command.html

@@ -60,6 +60,6 @@
     {{- $output = (replace $output "<span class=\"c\">#" "<span class=\"c\">" | safeHTML) -}}
 {{- end -}}
 
-<div class="bg-light mb-3">
+<div class="mb-3 syntax-highlight">
     {{- $output -}}
 </div>

layouts/shortcodes/docs.html

@@ -58,7 +58,15 @@
 
     <ul class="nav nav-tabs">
         <li class="nav-item">
-          <a class="nav-link active font-monospace" href="#body-{{ $id }}" aria-current="page" data-bs-toggle="collapse" data-bs-target=".multi-{{ $id }}" aria-expanded="false" aria-controls="body-{{ $id }} footer-{{ $id }}"><small>{{ $file }}</small></a>
+            <a class="nav-link active font-monospace" 
+                href="#body-{{ $id }}" 
+                aria-current="page" 
+                data-bs-toggle="collapse" 
+                data-bs-target=".multi-{{ $id }}" 
+                aria-expanded="false" 
+                aria-controls="body-{{ $id }} footer-{{ $id }}">
+                <small>{{ strings.TrimPrefix $basePath $file }}</small>
+            </a>
         </li>
     </ul>
     <div class="border-start border-end border-bottom mb-3">

layouts/shortcodes/example.html

@@ -27,11 +27,11 @@
 
 <div class="rounded border mb-3">
     {{- if eq $show_preview true -}}
-        <div {{ with $id }}id="{{ . }}"{{ end }} class="p-3 {{ with $class }} {{ . }}{{ end }}">
+        <div {{ with $id }}id="{{ . }}"{{ end }} class="p-3 {{ with $class }} {{ . }}{{ end }} preview-background">
             {{- $content -}}
         </div>
     {{- end -}}
-    <div class="d-flex align-items-center bg-light ps-3 pe-3 py-1 border-top border-bottom">
+    <div class="d-flex align-items-center ps-3 pe-3 py-1 border-top border-bottom syntax-highlight">
         <small class="font-monospace text-muted text-uppercase">{{- $lang -}}</small>
         <!-- <div class="d-flex ms-auto">
             <button type="button" class="mt-0 me-0 border-0" title="Copy to clipboard">
@@ -39,7 +39,7 @@
             </button>
         </div> -->
     </div>
-    <div class="rounded bg-light">
+    <div class="rounded-bottom syntax-highlight">
         {{- if eq $show_markup true -}}
             {{- highlight (trim $input "\r\n") $lang "" -}}
         {{- end -}}

package-lock.json

@@ -1,22 +1,22 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.8.1",
+  "version": "0.9.0-alpha2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.8.1",
+      "version": "0.9.0-alpha2",
       "hasInstallScript": true,
       "license": "MIT",
       "devDependencies": {
-        "@fortawesome/fontawesome-free": "^6.2.1",
+        "@fortawesome/fontawesome-free": "^6.3.0",
         "@fullhuman/postcss-purgecss": "^5.0.0",
         "autoprefixer": "^10.4.13",
-        "bootstrap": "^5.2.3",
-        "eslint": "^8.31.0",
+        "bootstrap": "^5.3.0-alpha1",
+        "eslint": "^8.34.0",
         "eslint-config-standard": "^17.0.0",
-        "eslint-plugin-import": "^2.26.0",
+        "eslint-plugin-import": "^2.27.5",
         "eslint-plugin-n": "^15.6.1",
         "eslint-plugin-promise": "^6.1.1",
         "exec-bin": "^1.0.0",
@@ -27,8 +27,8 @@
         "purgecss-whitelister": "^2.4.0",
         "rimraf": "^4.1.2",
         "shx": "^0.3.4",
-        "stylelint": "^14.16.1",
-        "stylelint-config-standard-scss": "^6.1.0"
+        "stylelint": "^15.1.0",
+        "stylelint-config-standard-scss": "^7.0.0"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -137,20 +137,66 @@
         "node": ">=4"
       }
     },
-    "node_modules/@csstools/selector-specificity": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz",
-      "integrity": "sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==",
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.0.1.tgz",
+      "integrity": "sha512-B9/8PmOtU6nBiibJg0glnNktQDZ3rZnGn/7UmDfrm2vMtrdlXO3p7ErE95N0up80IRk9YEtB5jyj/TmQ1WH3dw==",
       "dev": true,
       "engines": {
-        "node": "^12 || ^14 || >=16"
+        "node": "^14 || ^16 || >=18"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/csstools"
       },
       "peerDependencies": {
-        "postcss": "^8.2",
+        "@csstools/css-tokenizer": "^2.0.0"
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.0.1.tgz",
+      "integrity": "sha512-sYD3H7ReR88S/4+V5VbKiBEUJF4FqvG+8aNJkxqoPAnbhFziDG22IDZc4+h+xA63SfgM+h15lq5OnLeCxQ9nPA==",
+      "dev": true,
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      }
+    },
+    "node_modules/@csstools/media-query-list-parser": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.0.1.tgz",
+      "integrity": "sha512-X2/OuzEbjaxhzm97UJ+95GrMeT29d1Ib+Pu+paGLuRWZnWRK9sI9r3ikmKXPWGA1C4y4JEdBEFpp9jEqCvLeRA==",
+      "dev": true,
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^2.0.0",
+        "@csstools/css-tokenizer": "^2.0.0"
+      }
+    },
+    "node_modules/@csstools/selector-specificity": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.1.1.tgz",
+      "integrity": "sha512-jwx+WCqszn53YHOfvFMJJRd/B2GqkCBt+1MJSG6o5/s8+ytHMvDZXsJgUEWLk12UnLd7HYKac4BYU5i/Ron1Cw==",
+      "dev": true,
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4",
         "postcss-selector-parser": "^6.0.10"
       }
     },
@@ -178,9 +224,9 @@
       }
     },
     "node_modules/@fortawesome/fontawesome-free": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.2.1.tgz",
-      "integrity": "sha512-viouXhegu/TjkvYQoiRZK3aax69dGXxgEjpvZW81wIJdxm5Fnvp3VVIP4VHKqX4SvFw6qpmkILkD4RJWAdrt7A==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.3.0.tgz",
+      "integrity": "sha512-qVtd5i1Cc7cdrqnTWqTObKQHjPWAiRwjUPaXObaeNPcy7+WKxJumGBx66rfSFgK6LNpIasVKkEgW8oyf0tmPLA==",
       "dev": true,
       "hasInstallScript": true,
       "engines": {
@@ -353,12 +399,6 @@
       "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==",
       "dev": true
     },
-    "node_modules/@types/parse-json": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
-      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
-      "dev": true
-    },
     "node_modules/@types/responselike": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz",
@@ -625,9 +665,9 @@
       }
     },
     "node_modules/bootstrap": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
-      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "version": "5.3.0-alpha1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0-alpha1.tgz",
+      "integrity": "sha512-ABZpKK4ObS3kKlIqH+ZVDqoy5t/bhFG0oHTAzByUdon7YIom0lpCeTqRniDzJmbtcWkNe800VVPBiJgxSYTYew==",
       "dev": true,
       "funding": [
         {
@@ -1044,28 +1084,18 @@
       "dev": true
     },
     "node_modules/cosmiconfig": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
-      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.0.0.tgz",
+      "integrity": "sha512-da1EafcpH6b/TD8vDRaWV7xFINlHlF6zKsGwS1TsuVJTZRkquaS5HTMq7uq6h31619QjbsYl21gVDOm32KM1vQ==",
       "dev": true,
       "dependencies": {
-        "@types/parse-json": "^4.0.0",
         "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
         "parse-json": "^5.0.0",
-        "path-type": "^4.0.0",
-        "yaml": "^1.10.0"
+        "path-type": "^4.0.0"
       },
       "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/cosmiconfig/node_modules/yaml": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
+        "node": ">=14"
       }
     },
     "node_modules/cross-spawn": {
@@ -1091,6 +1121,19 @@
         "node": ">=12.22"
       }
     },
+    "node_modules/css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "dev": true,
+      "dependencies": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1538,9 +1581,9 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.33.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.33.0.tgz",
-      "integrity": "sha512-WjOpFQgKK8VrCnAtl8We0SUOy/oVZ5NHykyMiagV1M9r8IFpIJX7DduK6n1mpfhlG7T1NLWm2SuD8QB7KFySaA==",
+      "version": "8.34.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.34.0.tgz",
+      "integrity": "sha512-1Z8iFsucw+7kSqXNZVslXS8Ioa4u2KM7GPwuKtkTFAqZ/cHMcEaR+1+Br0wLlot49cNxIiZk5wp8EAbPcYZxTg==",
       "dev": true,
       "dependencies": {
         "@eslint/eslintrc": "^1.4.1",
@@ -2777,9 +2820,9 @@
       ]
     },
     "node_modules/ignore": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.1.tgz",
-      "integrity": "sha512-d2qQLzTJ9WxQftPAuEQpSPmKqzxePjzVbpAVv62AQ64NTL+wR4JkrVqR/LqFsFEUsHDAiId52mJteHDFuDkElA==",
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
+      "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
       "dev": true,
       "engines": {
         "node": ">= 4"
@@ -3492,6 +3535,12 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "dev": true
+    },
     "node_modules/mdurl": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
@@ -3973,9 +4022,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.19",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz",
-      "integrity": "sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==",
+      "version": "8.4.21",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
+      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
       "dev": true,
       "funding": [
         {
@@ -4978,16 +5027,20 @@
       "dev": true
     },
     "node_modules/stylelint": {
-      "version": "14.16.1",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-14.16.1.tgz",
-      "integrity": "sha512-ErlzR/T3hhbV+a925/gbfc3f3Fep9/bnspMiJPorfGEmcBbXdS+oo6LrVtoUZ/w9fqD6o6k7PtUlCOsCRdjX/A==",
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.1.0.tgz",
+      "integrity": "sha512-Tw8OyIiYhxnIHUzgoLlCyWgCUKsPYiP3TDgs7M1VbayS+q5qZly2yxABg+YPe/hFRWiu0cOtptCtpyrn1CrnYw==",
       "dev": true,
       "dependencies": {
-        "@csstools/selector-specificity": "^2.0.2",
+        "@csstools/css-parser-algorithms": "^2.0.1",
+        "@csstools/css-tokenizer": "^2.0.1",
+        "@csstools/media-query-list-parser": "^2.0.1",
+        "@csstools/selector-specificity": "^2.1.1",
         "balanced-match": "^2.0.0",
         "colord": "^2.9.3",
-        "cosmiconfig": "^7.1.0",
+        "cosmiconfig": "^8.0.0",
         "css-functions-list": "^3.1.0",
+        "css-tree": "^2.3.1",
         "debug": "^4.3.4",
         "fast-glob": "^3.2.12",
         "fastest-levenshtein": "^1.0.16",
@@ -4996,7 +5049,7 @@
         "globby": "^11.1.0",
         "globjoin": "^0.1.4",
         "html-tags": "^3.2.0",
-        "ignore": "^5.2.1",
+        "ignore": "^5.2.4",
         "import-lazy": "^4.0.0",
         "imurmurhash": "^0.1.4",
         "is-plain-object": "^5.0.0",
@@ -5006,7 +5059,7 @@
         "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
         "picocolors": "^1.0.0",
-        "postcss": "^8.4.19",
+        "postcss": "^8.4.21",
         "postcss-media-query-parser": "^0.2.3",
         "postcss-resolve-nested-selector": "^0.1.1",
         "postcss-safe-parser": "^6.0.0",
@@ -5020,13 +5073,13 @@
         "svg-tags": "^1.0.0",
         "table": "^6.8.1",
         "v8-compile-cache": "^2.3.0",
-        "write-file-atomic": "^4.0.2"
+        "write-file-atomic": "^5.0.0"
       },
       "bin": {
         "stylelint": "bin/stylelint.js"
       },
       "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+        "node": "^14.13.1 || >=16.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -5034,27 +5087,27 @@
       }
     },
     "node_modules/stylelint-config-recommended": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-9.0.0.tgz",
-      "integrity": "sha512-9YQSrJq4NvvRuTbzDsWX3rrFOzOlYBmZP+o513BJN/yfEmGSr0AxdvrWs0P/ilSpVV/wisamAHu5XSk8Rcf4CQ==",
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-10.0.1.tgz",
+      "integrity": "sha512-TQ4xQ48tW4QSlODcti7pgSRqBZcUaBzuh0jPpfiMhwJKBPkqzTIAU+IrSWL/7BgXlOM90DjB7YaNgFpx8QWhuA==",
       "dev": true,
       "peerDependencies": {
-        "stylelint": "^14.10.0"
+        "stylelint": "^15.0.0"
       }
     },
     "node_modules/stylelint-config-recommended-scss": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-8.0.0.tgz",
-      "integrity": "sha512-BxjxEzRaZoQb7Iinc3p92GS6zRdRAkIuEu2ZFLTxJK2e1AIcCb5B5MXY9KOXdGTnYFZ+KKx6R4Fv9zU6CtMYPQ==",
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-9.0.0.tgz",
+      "integrity": "sha512-5e9pn3Ztfncd8s9OqvvCW7tZpYe+vGmPi7VEXX7XEp+Kj38PnKCrvFCBL+hQ7rkD4d5QzjB3BxlFEyo/30UWUw==",
       "dev": true,
       "dependencies": {
         "postcss-scss": "^4.0.2",
-        "stylelint-config-recommended": "^9.0.0",
-        "stylelint-scss": "^4.0.0"
+        "stylelint-config-recommended": "^10.0.1",
+        "stylelint-scss": "^4.4.0"
       },
       "peerDependencies": {
         "postcss": "^8.3.3",
-        "stylelint": "^14.10.0"
+        "stylelint": "^15.0.0"
       },
       "peerDependenciesMeta": {
         "postcss": {
@@ -5063,29 +5116,29 @@
       }
     },
     "node_modules/stylelint-config-standard": {
-      "version": "29.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-29.0.0.tgz",
-      "integrity": "sha512-uy8tZLbfq6ZrXy4JKu3W+7lYLgRQBxYTUUB88vPgQ+ZzAxdrvcaSUW9hOMNLYBnwH+9Kkj19M2DHdZ4gKwI7tg==",
+      "version": "30.0.1",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-30.0.1.tgz",
+      "integrity": "sha512-NbeHOmpRQhjZh5XB1B/S4MLRWvz4xxAxeDBjzl0tY2xEcayNhLbaRGF0ZQzq+DQZLCcPpOHeS2Ru1ydbkhkmLg==",
       "dev": true,
       "dependencies": {
-        "stylelint-config-recommended": "^9.0.0"
+        "stylelint-config-recommended": "^10.0.1"
       },
       "peerDependencies": {
-        "stylelint": "^14.14.0"
+        "stylelint": "^15.0.0"
       }
     },
     "node_modules/stylelint-config-standard-scss": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-6.1.0.tgz",
-      "integrity": "sha512-iZ2B5kQT2G3rUzx+437cEpdcnFOQkwnwqXuY8Z0QUwIHQVE8mnYChGAquyKFUKZRZ0pRnrciARlPaR1RBtPb0Q==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-7.0.0.tgz",
+      "integrity": "sha512-rHgydRJxN4Q9lDcwrLFoiFA3S8CRqsUcyBBCLwEMjIwzJViluFfsOKFPSomx6hScVQgQ4//Fx0hRKiSHyO0ihw==",
       "dev": true,
       "dependencies": {
-        "stylelint-config-recommended-scss": "^8.0.0",
-        "stylelint-config-standard": "^29.0.0"
+        "stylelint-config-recommended-scss": "^9.0.0",
+        "stylelint-config-standard": "^30.0.1"
       },
       "peerDependencies": {
         "postcss": "^8.3.3",
-        "stylelint": "^14.14.0"
+        "stylelint": "^15.0.0"
       },
       "peerDependenciesMeta": {
         "postcss": {
@@ -5094,9 +5147,9 @@
       }
     },
     "node_modules/stylelint-scss": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-4.3.0.tgz",
-      "integrity": "sha512-GvSaKCA3tipzZHoz+nNO7S02ZqOsdBzMiCx9poSmLlb3tdJlGddEX/8QzCOD8O7GQan9bjsvLMsO5xiw6IhhIQ==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-4.4.0.tgz",
+      "integrity": "sha512-Qy66a+/30aylFhPmUArHhVsHOun1qrO93LGT15uzLuLjWS7hKDfpFm34mYo1ndR4MCo8W4bEZM1+AlJRJORaaw==",
       "dev": true,
       "dependencies": {
         "lodash": "^4.17.21",
@@ -5106,7 +5159,7 @@
         "postcss-value-parser": "^4.1.0"
       },
       "peerDependencies": {
-        "stylelint": "^14.5.1"
+        "stylelint": "^14.5.1 || ^15.0.0"
       }
     },
     "node_modules/stylelint/node_modules/balanced-match": {
@@ -5500,16 +5553,16 @@
       "dev": true
     },
     "node_modules/write-file-atomic": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-4.0.2.tgz",
-      "integrity": "sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.0.tgz",
+      "integrity": "sha512-R7NYMnHSlV42K54lwY9lvW6MnSm1HSJqZL3xiSgi9E7//FYaI74r2G0rd+/X6VAMkHEdzxQaU5HUOXWUz5kA/w==",
       "dev": true,
       "dependencies": {
         "imurmurhash": "^0.1.4",
         "signal-exit": "^3.0.7"
       },
       "engines": {
-        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
     "node_modules/xtend": {
@@ -5689,10 +5742,30 @@
         }
       }
     },
+    "@csstools/css-parser-algorithms": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.0.1.tgz",
+      "integrity": "sha512-B9/8PmOtU6nBiibJg0glnNktQDZ3rZnGn/7UmDfrm2vMtrdlXO3p7ErE95N0up80IRk9YEtB5jyj/TmQ1WH3dw==",
+      "dev": true,
+      "requires": {}
+    },
+    "@csstools/css-tokenizer": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.0.1.tgz",
+      "integrity": "sha512-sYD3H7ReR88S/4+V5VbKiBEUJF4FqvG+8aNJkxqoPAnbhFziDG22IDZc4+h+xA63SfgM+h15lq5OnLeCxQ9nPA==",
+      "dev": true
+    },
+    "@csstools/media-query-list-parser": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.0.1.tgz",
+      "integrity": "sha512-X2/OuzEbjaxhzm97UJ+95GrMeT29d1Ib+Pu+paGLuRWZnWRK9sI9r3ikmKXPWGA1C4y4JEdBEFpp9jEqCvLeRA==",
+      "dev": true,
+      "requires": {}
+    },
     "@csstools/selector-specificity": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz",
-      "integrity": "sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.1.1.tgz",
+      "integrity": "sha512-jwx+WCqszn53YHOfvFMJJRd/B2GqkCBt+1MJSG6o5/s8+ytHMvDZXsJgUEWLk12UnLd7HYKac4BYU5i/Ron1Cw==",
       "dev": true,
       "requires": {}
     },
@@ -5714,9 +5787,9 @@
       }
     },
     "@fortawesome/fontawesome-free": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.2.1.tgz",
-      "integrity": "sha512-viouXhegu/TjkvYQoiRZK3aax69dGXxgEjpvZW81wIJdxm5Fnvp3VVIP4VHKqX4SvFw6qpmkILkD4RJWAdrt7A==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.3.0.tgz",
+      "integrity": "sha512-qVtd5i1Cc7cdrqnTWqTObKQHjPWAiRwjUPaXObaeNPcy7+WKxJumGBx66rfSFgK6LNpIasVKkEgW8oyf0tmPLA==",
       "dev": true
     },
     "@fullhuman/postcss-purgecss": {
@@ -5850,12 +5923,6 @@
       "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==",
       "dev": true
     },
-    "@types/parse-json": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
-      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
-      "dev": true
-    },
     "@types/responselike": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz",
@@ -6029,9 +6096,9 @@
       }
     },
     "bootstrap": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
-      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "version": "5.3.0-alpha1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0-alpha1.tgz",
+      "integrity": "sha512-ABZpKK4ObS3kKlIqH+ZVDqoy5t/bhFG0oHTAzByUdon7YIom0lpCeTqRniDzJmbtcWkNe800VVPBiJgxSYTYew==",
       "dev": true,
       "requires": {}
     },
@@ -6321,24 +6388,15 @@
       "dev": true
     },
     "cosmiconfig": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
-      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.0.0.tgz",
+      "integrity": "sha512-da1EafcpH6b/TD8vDRaWV7xFINlHlF6zKsGwS1TsuVJTZRkquaS5HTMq7uq6h31619QjbsYl21gVDOm32KM1vQ==",
       "dev": true,
       "requires": {
-        "@types/parse-json": "^4.0.0",
         "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
         "parse-json": "^5.0.0",
-        "path-type": "^4.0.0",
-        "yaml": "^1.10.0"
-      },
-      "dependencies": {
-        "yaml": {
-          "version": "1.10.2",
-          "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-          "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-          "dev": true
-        }
+        "path-type": "^4.0.0"
       }
     },
     "cross-spawn": {
@@ -6358,6 +6416,16 @@
       "integrity": "sha512-/9lCvYZaUbBGvYUgYGFJ4dcYiyqdhSjG7IPVluoV8A1ILjkF7ilmhp1OGUz8n+nmBcu0RNrQAzgD8B6FJbrt2w==",
       "dev": true
     },
+    "css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "dev": true,
+      "requires": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      }
+    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -6687,9 +6755,9 @@
       "dev": true
     },
     "eslint": {
-      "version": "8.33.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.33.0.tgz",
-      "integrity": "sha512-WjOpFQgKK8VrCnAtl8We0SUOy/oVZ5NHykyMiagV1M9r8IFpIJX7DduK6n1mpfhlG7T1NLWm2SuD8QB7KFySaA==",
+      "version": "8.34.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.34.0.tgz",
+      "integrity": "sha512-1Z8iFsucw+7kSqXNZVslXS8Ioa4u2KM7GPwuKtkTFAqZ/cHMcEaR+1+Br0wLlot49cNxIiZk5wp8EAbPcYZxTg==",
       "dev": true,
       "requires": {
         "@eslint/eslintrc": "^1.4.1",
@@ -7597,9 +7665,9 @@
       "dev": true
     },
     "ignore": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.1.tgz",
-      "integrity": "sha512-d2qQLzTJ9WxQftPAuEQpSPmKqzxePjzVbpAVv62AQ64NTL+wR4JkrVqR/LqFsFEUsHDAiId52mJteHDFuDkElA==",
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
+      "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
       "dev": true
     },
     "import-fresh": {
@@ -8119,6 +8187,12 @@
       "integrity": "sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==",
       "dev": true
     },
+    "mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "dev": true
+    },
     "mdurl": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
@@ -8461,9 +8535,9 @@
       }
     },
     "postcss": {
-      "version": "8.4.19",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz",
-      "integrity": "sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==",
+      "version": "8.4.21",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
+      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
       "dev": true,
       "requires": {
         "nanoid": "^3.3.4",
@@ -9165,16 +9239,20 @@
       "dev": true
     },
     "stylelint": {
-      "version": "14.16.1",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-14.16.1.tgz",
-      "integrity": "sha512-ErlzR/T3hhbV+a925/gbfc3f3Fep9/bnspMiJPorfGEmcBbXdS+oo6LrVtoUZ/w9fqD6o6k7PtUlCOsCRdjX/A==",
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.1.0.tgz",
+      "integrity": "sha512-Tw8OyIiYhxnIHUzgoLlCyWgCUKsPYiP3TDgs7M1VbayS+q5qZly2yxABg+YPe/hFRWiu0cOtptCtpyrn1CrnYw==",
       "dev": true,
       "requires": {
-        "@csstools/selector-specificity": "^2.0.2",
+        "@csstools/css-parser-algorithms": "^2.0.1",
+        "@csstools/css-tokenizer": "^2.0.1",
+        "@csstools/media-query-list-parser": "^2.0.1",
+        "@csstools/selector-specificity": "^2.1.1",
         "balanced-match": "^2.0.0",
         "colord": "^2.9.3",
-        "cosmiconfig": "^7.1.0",
+        "cosmiconfig": "^8.0.0",
         "css-functions-list": "^3.1.0",
+        "css-tree": "^2.3.1",
         "debug": "^4.3.4",
         "fast-glob": "^3.2.12",
         "fastest-levenshtein": "^1.0.16",
@@ -9183,7 +9261,7 @@
         "globby": "^11.1.0",
         "globjoin": "^0.1.4",
         "html-tags": "^3.2.0",
-        "ignore": "^5.2.1",
+        "ignore": "^5.2.4",
         "import-lazy": "^4.0.0",
         "imurmurhash": "^0.1.4",
         "is-plain-object": "^5.0.0",
@@ -9193,7 +9271,7 @@
         "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
         "picocolors": "^1.0.0",
-        "postcss": "^8.4.19",
+        "postcss": "^8.4.21",
         "postcss-media-query-parser": "^0.2.3",
         "postcss-resolve-nested-selector": "^0.1.1",
         "postcss-safe-parser": "^6.0.0",
@@ -9207,7 +9285,7 @@
         "svg-tags": "^1.0.0",
         "table": "^6.8.1",
         "v8-compile-cache": "^2.3.0",
-        "write-file-atomic": "^4.0.2"
+        "write-file-atomic": "^5.0.0"
       },
       "dependencies": {
         "balanced-match": {
@@ -9245,46 +9323,46 @@
       }
     },
     "stylelint-config-recommended": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-9.0.0.tgz",
-      "integrity": "sha512-9YQSrJq4NvvRuTbzDsWX3rrFOzOlYBmZP+o513BJN/yfEmGSr0AxdvrWs0P/ilSpVV/wisamAHu5XSk8Rcf4CQ==",
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-10.0.1.tgz",
+      "integrity": "sha512-TQ4xQ48tW4QSlODcti7pgSRqBZcUaBzuh0jPpfiMhwJKBPkqzTIAU+IrSWL/7BgXlOM90DjB7YaNgFpx8QWhuA==",
       "dev": true,
       "requires": {}
     },
     "stylelint-config-recommended-scss": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-8.0.0.tgz",
-      "integrity": "sha512-BxjxEzRaZoQb7Iinc3p92GS6zRdRAkIuEu2ZFLTxJK2e1AIcCb5B5MXY9KOXdGTnYFZ+KKx6R4Fv9zU6CtMYPQ==",
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-9.0.0.tgz",
+      "integrity": "sha512-5e9pn3Ztfncd8s9OqvvCW7tZpYe+vGmPi7VEXX7XEp+Kj38PnKCrvFCBL+hQ7rkD4d5QzjB3BxlFEyo/30UWUw==",
       "dev": true,
       "requires": {
         "postcss-scss": "^4.0.2",
-        "stylelint-config-recommended": "^9.0.0",
-        "stylelint-scss": "^4.0.0"
+        "stylelint-config-recommended": "^10.0.1",
+        "stylelint-scss": "^4.4.0"
       }
     },
     "stylelint-config-standard": {
-      "version": "29.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-29.0.0.tgz",
-      "integrity": "sha512-uy8tZLbfq6ZrXy4JKu3W+7lYLgRQBxYTUUB88vPgQ+ZzAxdrvcaSUW9hOMNLYBnwH+9Kkj19M2DHdZ4gKwI7tg==",
+      "version": "30.0.1",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-30.0.1.tgz",
+      "integrity": "sha512-NbeHOmpRQhjZh5XB1B/S4MLRWvz4xxAxeDBjzl0tY2xEcayNhLbaRGF0ZQzq+DQZLCcPpOHeS2Ru1ydbkhkmLg==",
       "dev": true,
       "requires": {
-        "stylelint-config-recommended": "^9.0.0"
+        "stylelint-config-recommended": "^10.0.1"
       }
     },
     "stylelint-config-standard-scss": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-6.1.0.tgz",
-      "integrity": "sha512-iZ2B5kQT2G3rUzx+437cEpdcnFOQkwnwqXuY8Z0QUwIHQVE8mnYChGAquyKFUKZRZ0pRnrciARlPaR1RBtPb0Q==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-7.0.0.tgz",
+      "integrity": "sha512-rHgydRJxN4Q9lDcwrLFoiFA3S8CRqsUcyBBCLwEMjIwzJViluFfsOKFPSomx6hScVQgQ4//Fx0hRKiSHyO0ihw==",
       "dev": true,
       "requires": {
-        "stylelint-config-recommended-scss": "^8.0.0",
-        "stylelint-config-standard": "^29.0.0"
+        "stylelint-config-recommended-scss": "^9.0.0",
+        "stylelint-config-standard": "^30.0.1"
       }
     },
     "stylelint-scss": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-4.3.0.tgz",
-      "integrity": "sha512-GvSaKCA3tipzZHoz+nNO7S02ZqOsdBzMiCx9poSmLlb3tdJlGddEX/8QzCOD8O7GQan9bjsvLMsO5xiw6IhhIQ==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-4.4.0.tgz",
+      "integrity": "sha512-Qy66a+/30aylFhPmUArHhVsHOun1qrO93LGT15uzLuLjWS7hKDfpFm34mYo1ndR4MCo8W4bEZM1+AlJRJORaaw==",
       "dev": true,
       "requires": {
         "lodash": "^4.17.21",
@@ -9566,9 +9644,9 @@
       "dev": true
     },
     "write-file-atomic": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-4.0.2.tgz",
-      "integrity": "sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.0.tgz",
+      "integrity": "sha512-R7NYMnHSlV42K54lwY9lvW6MnSm1HSJqZL3xiSgi9E7//FYaI74r2G0rd+/X6VAMkHEdzxQaU5HUOXWUz5kA/w==",
       "dev": true,
       "requires": {
         "imurmurhash": "^0.1.4",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.8.3",
+  "version": "0.9.0-alpha2",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",
@@ -35,7 +35,9 @@
     "precheck": "npm version",
     "check": "exec-bin node_modules/.bin/hugo/hugo version",
     "copy:fonts": "shx cp ./node_modules/@fortawesome/fontawesome-free/webfonts/* ./static/fonts/",
-    "create:syntax": "exec-bin node_modules/.bin/hugo/hugo gen chromastyles --style=monokailight > ./assets/scss/components/_syntax.scss",
+    "create:syntax-light": "exec-bin node_modules/.bin/hugo/hugo gen chromastyles --style=github > ./assets/scss/components/_syntax-light.scss",
+    "create:syntax-dark": "exec-bin node_modules/.bin/hugo/hugo gen chromastyles --style=github-dark > ./assets/scss/components/_syntax-dark.scss",
+    "create:syntax": "npm run -s create:syntax-light & npm run -s create:syntax-dark",
     "postinstall": "hugo-installer --version otherDependencies.hugo --extended --destination node_modules/.bin/hugo",
     "upgrade": "npx npm-check-updates -u"
   },
@@ -50,13 +52,13 @@
   },
   "homepage": "https://gethinode.com",
   "devDependencies": {
-    "@fortawesome/fontawesome-free": "^6.2.1",
+    "@fortawesome/fontawesome-free": "^6.3.0",
     "@fullhuman/postcss-purgecss": "^5.0.0",
     "autoprefixer": "^10.4.13",
-    "bootstrap": "^5.2.3",
-    "eslint": "^8.31.0",
+    "bootstrap": "^5.3.0-alpha1",
+    "eslint": "^8.34.0",
     "eslint-config-standard": "^17.0.0",
-    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-n": "^15.6.1",
     "eslint-plugin-promise": "^6.1.1",
     "exec-bin": "^1.0.0",
@@ -67,8 +69,8 @@
     "purgecss-whitelister": "^2.4.0",
     "rimraf": "^4.1.2",
     "shx": "^0.3.4",
-    "stylelint": "^14.16.1",
-    "stylelint-config-standard-scss": "^6.1.0"
+    "stylelint": "^15.1.0",
+    "stylelint-config-standard-scss": "^7.0.0"
   },
   "otherDependencies": {
     "hugo": "0.110.0"

static/img/logo.svg

@@ -6,7 +6,14 @@
 </clipPath>
 </defs>
 <g transform="translate(333.63 175.02)">
-<text x="-4.0170074" y="49.55217" fill="#000000" font-family="sans-serif" font-size="211.67px" stroke-width=".26458" style="line-height:1.25" xml:space="preserve"><tspan x="-4.0170074" y="49.55217" font-family="Inter" font-size="211.67px" font-weight="bold" stroke-width=".26458">Hinode</tspan></text>
+<g stroke-width=".26458" aria-label="Hinode">
+<path d="m9.3627 49.552v-153.94h32.547v63.516h66.072v-63.516h32.472v153.94h-32.472v-63.591h-66.072v63.591z"/>
+<path d="m166.69 49.552v-115.46h32.021v115.46zm16.086-130.34q-7.1409 0-12.252-4.7355-5.0362-4.8107-5.0362-11.501 0-6.6147 5.0362-11.35 5.1114-4.8107 12.252-4.8107 7.1408 0 12.177 4.8107 5.1114 4.7355 5.1114 11.35 0 6.6899-5.1114 11.501-5.0362 4.7355-12.177 4.7355z"/>
+<path d="m256.29-17.196v66.748h-32.021v-115.46h30.518v20.37h1.353q3.8335-10.072 12.854-15.935 9.02-5.9382 21.874-5.9382 12.027 0 20.972 5.2617t13.906 15.033q4.961 9.6965 4.961 23.151v73.513h-32.021v-67.801q0.0752-10.599-5.412-16.537-5.4872-6.0134-15.109-6.0134-6.4644 0-11.425 2.7812-4.8858 2.7812-7.667 8.118-2.706 5.2617-2.7812 12.703z"/>
+<path d="m408.05 51.807q-17.514 0-30.292-7.4415-12.703-7.5167-19.619-20.896-6.9154-13.455-6.9154-31.194 0-17.89 6.9154-31.269 6.9154-13.455 19.619-20.896 12.778-7.5167 30.292-7.5167t30.217 7.5167q12.778 7.4415 19.694 20.896 6.9154 13.38 6.9154 31.269 0 17.739-6.9154 31.194-6.9154 13.38-19.694 20.896-12.703 7.4415-30.217 7.4415zm0.15034-24.805q7.9677 0 13.305-4.51 5.3368-4.5852 8.0429-12.478 2.7812-7.8925 2.7812-17.965 0-10.072-2.7812-17.965-2.706-7.8925-8.0429-12.478t-13.305-4.5852q-8.0429 0-13.53 4.5852-5.412 4.5852-8.1932 12.478-2.706 7.8925-2.706 17.965 0 10.072 2.706 17.965 2.7812 7.8925 8.1932 12.478 5.4872 4.51 13.53 4.51z"/>
+<path d="m528.31 51.431q-13.154 0-23.828-6.765-10.599-6.8402-16.837-20.07-6.1637-13.305-6.1637-32.622 0-19.844 6.3892-32.998 6.3892-13.229 16.988-19.769 10.674-6.6147 23.377-6.6147 9.6965 0 16.161 3.3073 6.5395 3.2322 10.523 8.118 4.059 4.8107 6.1637 9.471h0.97717v-57.879h31.946v153.94h-31.57v-18.491h-1.353q-2.255 4.8107-6.3892 9.5462-4.059 4.6603-10.599 7.7422-6.4644 3.0818-15.785 3.0818zm10.148-25.482q7.7422 0 13.079-4.2093 5.412-4.2845 8.2684-11.952 2.9315-7.667 2.9315-17.965 0-10.298-2.8563-17.89-2.8564-7.5919-8.2684-11.726-5.412-4.1342-13.154-4.1342-7.8925 0-13.305 4.2845-5.412 4.2845-8.1932 11.876-2.7812 7.5919-2.7812 17.589 0 10.072 2.7812 17.815 2.8564 7.667 8.1932 12.027 5.412 4.2845 13.305 4.2845z"/>
+<path d="m672.86 51.807q-17.815 0-30.668-7.216-12.778-7.2912-19.694-20.596-6.9154-13.38-6.9154-31.645 0-17.815 6.9154-31.269 6.9154-13.455 19.468-20.972 12.628-7.5167 29.616-7.5167 11.425 0 21.272 3.6832 9.922 3.608 17.288 10.899 7.4415 7.2912 11.576 18.341 4.1342 10.974 4.1342 25.707v8.7945h-97.491v-19.844h67.35q0-6.9154-3.0067-12.252-3.0067-5.3368-8.3435-8.3435-5.2617-3.0818-12.252-3.0818-7.2912 0-12.929 3.3825-5.5624 3.3073-8.7194 8.9449-3.157 5.5624-3.2322 12.403v18.867q0 8.569 3.157 14.808 3.2322 6.2389 9.0952 9.6214 5.863 3.3825 13.906 3.3825 5.3368 0 9.7717-1.5033 4.4348-1.5033 7.5918-4.51 3.157-3.0067 4.8107-7.3664l29.616 1.9543q-2.255 10.674-9.2455 18.641-6.9154 7.8925-17.89 12.327-10.899 4.3597-25.181 4.3597z"/>
+</g>
 <g transform="matrix(.26458 0 0 .26458 -333.63 -176.34)">
 <g transform="translate(0,-687)" clip-path="url(#a)" fill-rule="evenodd">
 <path d="m0 933.5c0-133.38 108.12-241.5 241.5-241.5h607.99c133.38 0 241.5 108.12 241.5 241.5v608c0 133.37-108.12 241.5-241.5 241.5h-607.99c-133.38 0-241.5-108.13-241.5-241.5z" fill="#D43900"/>

static/img/logo_design.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1059mm" height="288.66mm" version="1.1" viewBox="0 0 1059 288.66" xmlns="http://www.w3.org/2000/svg">
+<defs>
+<clipPath id="a">
+<rect y="687" width="1095" height="1100"/>
+</clipPath>
+</defs>
+<g transform="translate(333.63 175.02)">
+<text x="-4.0170074" y="49.55217" fill="#000000" font-family="sans-serif" font-size="211.67px" stroke-width=".26458" style="line-height:1.25" xml:space="preserve"><tspan x="-4.0170074" y="49.55217" font-family="Inter" font-size="211.67px" font-weight="bold" stroke-width=".26458">Hinode</tspan></text>
+<g transform="matrix(.26458 0 0 .26458 -333.63 -176.34)">
+<g transform="translate(0,-687)" clip-path="url(#a)" fill-rule="evenodd">
+<path d="m0 933.5c0-133.38 108.12-241.5 241.5-241.5h607.99c133.38 0 241.5 108.12 241.5 241.5v608c0 133.37-108.12 241.5-241.5 241.5h-607.99c-133.38 0-241.5-108.13-241.5-241.5z" fill="#D43900"/>
+<path d="m954.7 1354.9c0 16.01-13.078 29-29.25 29h-58.5c-16.172 0-29.25-12.99-29.25-29s13.078-29 29.25-29h58.5c16.172 0 29.25 12.99 29.25 29z" fill="#fff"/>
+<path d="m252.7 1354.9c0 16.01-13.078 29-29.25 29h-58.5c-16.172 0-29.25-12.99-29.25-29s13.078-29 29.25-29h58.5c16.172 0 29.25 12.99 29.25 29z" fill="#fff"/>
+<path d="m256.14 1107.1c-11.261-11.51-11.261-30.12 0-41.63 11.274-11.51 29.481-11.51 40.755 0l34.354 35.1c11.261 11.51 11.261 30.12 0 41.63-11.274 11.52-29.481 11.52-40.755 0z" fill="#fff"/>
+<path d="m758.23 1142.2c-11.379-11.51-11.379-30.12 0-41.63l34.732-35.1c11.379-11.51 29.797-11.51 41.19 0 11.392 11.51 11.392 30.12 0 41.63l-34.732 35.1c-11.379 11.52-29.798 11.52-41.19 0z" fill="#fff"/>
+<path d="m719.36 1379.5c15.301-105.6-67.029-200.26-173.67-200.26-106.72 0-188.96 94.78-173.67 200.26 2.287 15.94-8.828 30.75-24.831 33.02-16.055 2.19-30.797-8.81-33.098-24.75-20.241-141.79 90.247-266.92 231.6-266.92 141.47 0 251.81 125.28 231.61 266.94-2.314 15.92-17.082 27.04-33.112 24.76-15.99-2.3-27.105-17.11-24.83-33.05z" fill="#fff"/>
+<path d="m837.7 1500.4c0 16.28-13.078 29.5-29.25 29.5h-526.5c-16.172 0-29.25-13.22-29.25-29.5 0-16.29 13.078-29.5 29.25-29.5h526.5c16.172 0 29.25 13.21 29.25 29.5z" fill="#fff"/>
+<path d="m544.7 1061.9c-16.008 0-29-13.08-29-29.25v-58.502c0-16.176 12.992-29.25 29-29.25 16.009 0 29 13.074 29 29.25v58.502c0 16.17-12.991 29.25-29 29.25z" fill="#fff"/>
+</g>
+</g>
+</g>
+</svg>

static/img/logo_icon.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="288mm" height="288mm" version="1.1" viewBox="0 0 288 288" xmlns="http://www.w3.org/2000/svg">
+<defs>
+<clipPath id="a">
+<rect y="687" width="1095" height="1100"/>
+</clipPath>
+</defs>
+<g transform="matrix(.26398 0 0 .26398 0 -1.317)">
+<g transform="translate(0,-687)" clip-path="url(#a)" fill-rule="evenodd">
+<path d="m0 933.5c0-133.38 108.12-241.5 241.5-241.5h607.99c133.38 0 241.5 108.12 241.5 241.5v608c0 133.37-108.12 241.5-241.5 241.5h-607.99c-133.38 0-241.5-108.13-241.5-241.5z" fill="#d43900"/>
+<path d="m954.7 1354.9c0 16.01-13.078 29-29.25 29h-58.5c-16.172 0-29.25-12.99-29.25-29s13.078-29 29.25-29h58.5c16.172 0 29.25 12.99 29.25 29z" fill="#fff"/>
+<path d="m252.7 1354.9c0 16.01-13.078 29-29.25 29h-58.5c-16.172 0-29.25-12.99-29.25-29s13.078-29 29.25-29h58.5c16.172 0 29.25 12.99 29.25 29z" fill="#fff"/>
+<path d="m256.14 1107.1c-11.261-11.51-11.261-30.12 0-41.63 11.274-11.51 29.481-11.51 40.755 0l34.354 35.1c11.261 11.51 11.261 30.12 0 41.63-11.274 11.52-29.481 11.52-40.755 0z" fill="#fff"/>
+<path d="m758.23 1142.2c-11.379-11.51-11.379-30.12 0-41.63l34.732-35.1c11.379-11.51 29.797-11.51 41.19 0 11.392 11.51 11.392 30.12 0 41.63l-34.732 35.1c-11.379 11.52-29.798 11.52-41.19 0z" fill="#fff"/>
+<path d="m719.36 1379.5c15.301-105.6-67.029-200.26-173.67-200.26-106.72 0-188.96 94.78-173.67 200.26 2.287 15.94-8.828 30.75-24.831 33.02-16.055 2.19-30.797-8.81-33.098-24.75-20.241-141.79 90.247-266.92 231.6-266.92 141.47 0 251.81 125.28 231.61 266.94-2.314 15.92-17.082 27.04-33.112 24.76-15.99-2.3-27.105-17.11-24.83-33.05z" fill="#fff"/>
+<path d="m837.7 1500.4c0 16.28-13.078 29.5-29.25 29.5h-526.5c-16.172 0-29.25-13.22-29.25-29.5 0-16.29 13.078-29.5 29.25-29.5h526.5c16.172 0 29.25 13.21 29.25 29.5z" fill="#fff"/>
+<path d="m544.7 1061.9c-16.008 0-29-13.08-29-29.25v-58.502c0-16.176 12.992-29.25 29-29.25 16.009 0 29 13.074 29 29.25v58.502c0 16.17-12.991 29.25-29 29.25z" fill="#fff"/>
+</g>
+</g>
+</svg>

static/img/logo_var.svg

@@ -0,0 +1,31 @@
+<svg width="1059mm" height="288.66mm" version="1.1" viewBox="0 0 1059 288.66" xmlns="http://www.w3.org/2000/svg" class="hidden">
+<symbol id="logo" viewBox="0 0 1059 288.66">
+<defs>
+<clipPath id="a">
+<rect y="687" width="1095" height="1100"/>
+</clipPath>
+</defs>
+<g transform="translate(333.63 175.02)">
+<g stroke-width=".26458" aria-label="Hinode" fill="var(--bs-emphasis-color)">
+<path d="m9.3627 49.552v-153.94h32.547v63.516h66.072v-63.516h32.472v153.94h-32.472v-63.591h-66.072v63.591z"/>
+<path d="m166.69 49.552v-115.46h32.021v115.46zm16.086-130.34q-7.1409 0-12.252-4.7355-5.0362-4.8107-5.0362-11.501 0-6.6147 5.0362-11.35 5.1114-4.8107 12.252-4.8107 7.1408 0 12.177 4.8107 5.1114 4.7355 5.1114 11.35 0 6.6899-5.1114 11.501-5.0362 4.7355-12.177 4.7355z"/>
+<path d="m256.29-17.196v66.748h-32.021v-115.46h30.518v20.37h1.353q3.8335-10.072 12.854-15.935 9.02-5.9382 21.874-5.9382 12.027 0 20.972 5.2617t13.906 15.033q4.961 9.6965 4.961 23.151v73.513h-32.021v-67.801q0.0752-10.599-5.412-16.537-5.4872-6.0134-15.109-6.0134-6.4644 0-11.425 2.7812-4.8858 2.7812-7.667 8.118-2.706 5.2617-2.7812 12.703z"/>
+<path d="m408.05 51.807q-17.514 0-30.292-7.4415-12.703-7.5167-19.619-20.896-6.9154-13.455-6.9154-31.194 0-17.89 6.9154-31.269 6.9154-13.455 19.619-20.896 12.778-7.5167 30.292-7.5167t30.217 7.5167q12.778 7.4415 19.694 20.896 6.9154 13.38 6.9154 31.269 0 17.739-6.9154 31.194-6.9154 13.38-19.694 20.896-12.703 7.4415-30.217 7.4415zm0.15034-24.805q7.9677 0 13.305-4.51 5.3368-4.5852 8.0429-12.478 2.7812-7.8925 2.7812-17.965 0-10.072-2.7812-17.965-2.706-7.8925-8.0429-12.478t-13.305-4.5852q-8.0429 0-13.53 4.5852-5.412 4.5852-8.1932 12.478-2.706 7.8925-2.706 17.965 0 10.072 2.706 17.965 2.7812 7.8925 8.1932 12.478 5.4872 4.51 13.53 4.51z"/>
+<path d="m528.31 51.431q-13.154 0-23.828-6.765-10.599-6.8402-16.837-20.07-6.1637-13.305-6.1637-32.622 0-19.844 6.3892-32.998 6.3892-13.229 16.988-19.769 10.674-6.6147 23.377-6.6147 9.6965 0 16.161 3.3073 6.5395 3.2322 10.523 8.118 4.059 4.8107 6.1637 9.471h0.97717v-57.879h31.946v153.94h-31.57v-18.491h-1.353q-2.255 4.8107-6.3892 9.5462-4.059 4.6603-10.599 7.7422-6.4644 3.0818-15.785 3.0818zm10.148-25.482q7.7422 0 13.079-4.2093 5.412-4.2845 8.2684-11.952 2.9315-7.667 2.9315-17.965 0-10.298-2.8563-17.89-2.8564-7.5919-8.2684-11.726-5.412-4.1342-13.154-4.1342-7.8925 0-13.305 4.2845-5.412 4.2845-8.1932 11.876-2.7812 7.5919-2.7812 17.589 0 10.072 2.7812 17.815 2.8564 7.667 8.1932 12.027 5.412 4.2845 13.305 4.2845z"/>
+<path d="m672.86 51.807q-17.815 0-30.668-7.216-12.778-7.2912-19.694-20.596-6.9154-13.38-6.9154-31.645 0-17.815 6.9154-31.269 6.9154-13.455 19.468-20.972 12.628-7.5167 29.616-7.5167 11.425 0 21.272 3.6832 9.922 3.608 17.288 10.899 7.4415 7.2912 11.576 18.341 4.1342 10.974 4.1342 25.707v8.7945h-97.491v-19.844h67.35q0-6.9154-3.0067-12.252-3.0067-5.3368-8.3435-8.3435-5.2617-3.0818-12.252-3.0818-7.2912 0-12.929 3.3825-5.5624 3.3073-8.7194 8.9449-3.157 5.5624-3.2322 12.403v18.867q0 8.569 3.157 14.808 3.2322 6.2389 9.0952 9.6214 5.863 3.3825 13.906 3.3825 5.3368 0 9.7717-1.5033 4.4348-1.5033 7.5918-4.51 3.157-3.0067 4.8107-7.3664l29.616 1.9543q-2.255 10.674-9.2455 18.641-6.9154 7.8925-17.89 12.327-10.899 4.3597-25.181 4.3597z"/>
+</g>
+<g transform="matrix(.26458 0 0 .26458 -333.63 -176.34)">
+<g transform="translate(0,-687)" clip-path="url(#a)" fill-rule="evenodd">
+<path d="m0 933.5c0-133.38 108.12-241.5 241.5-241.5h607.99c133.38 0 241.5 108.12 241.5 241.5v608c0 133.37-108.12 241.5-241.5 241.5h-607.99c-133.38 0-241.5-108.13-241.5-241.5z" fill="#D43900"/>
+<path d="m954.7 1354.9c0 16.01-13.078 29-29.25 29h-58.5c-16.172 0-29.25-12.99-29.25-29s13.078-29 29.25-29h58.5c16.172 0 29.25 12.99 29.25 29z" fill="#fff"/>
+<path d="m252.7 1354.9c0 16.01-13.078 29-29.25 29h-58.5c-16.172 0-29.25-12.99-29.25-29s13.078-29 29.25-29h58.5c16.172 0 29.25 12.99 29.25 29z" fill="#fff"/>
+<path d="m256.14 1107.1c-11.261-11.51-11.261-30.12 0-41.63 11.274-11.51 29.481-11.51 40.755 0l34.354 35.1c11.261 11.51 11.261 30.12 0 41.63-11.274 11.52-29.481 11.52-40.755 0z" fill="#fff"/>
+<path d="m758.23 1142.2c-11.379-11.51-11.379-30.12 0-41.63l34.732-35.1c11.379-11.51 29.797-11.51 41.19 0 11.392 11.51 11.392 30.12 0 41.63l-34.732 35.1c-11.379 11.52-29.798 11.52-41.19 0z" fill="#fff"/>
+<path d="m719.36 1379.5c15.301-105.6-67.029-200.26-173.67-200.26-106.72 0-188.96 94.78-173.67 200.26 2.287 15.94-8.828 30.75-24.831 33.02-16.055 2.19-30.797-8.81-33.098-24.75-20.241-141.79 90.247-266.92 231.6-266.92 141.47 0 251.81 125.28 231.61 266.94-2.314 15.92-17.082 27.04-33.112 24.76-15.99-2.3-27.105-17.11-24.83-33.05z" fill="#fff"/>
+<path d="m837.7 1500.4c0 16.28-13.078 29.5-29.25 29.5h-526.5c-16.172 0-29.25-13.22-29.25-29.5 0-16.29 13.078-29.5 29.25-29.5h526.5c16.172 0 29.25 13.21 29.25 29.5z" fill="#fff"/>
+<path d="m544.7 1061.9c-16.008 0-29-13.08-29-29.25v-58.502c0-16.176 12.992-29.25 29-29.25 16.009 0 29 13.074 29 29.25v58.502c0 16.17-12.991 29.25-29 29.25z" fill="#fff"/>
+</g>
+</g>
+</g>
+</symbol>
+</svg>