Merge pull request #567 from gethinode/develop

Refine layout

.github/release.yml

@@ -14,7 +14,7 @@ changelog:
       labels:
         - Semver-Minor
         - enhancement
-    - title: 🐛 Bug fixes
+    - title: 🐛 Bug Fixes
       labels:
         - fix
         - bugfix

.github/workflows/auto-merge.yml

@@ -16,27 +16,24 @@ jobs:
         uses: dependabot/fetch-metadata@v1
         with:
           github-token: "${{ secrets.GITHUB_TOKEN }}"
+
       - name: Enable auto-merge for Dependabot PRs
         run: gh pr merge --auto --merge "$PR_URL"
         env:
           PR_URL: ${{github.event.pull_request.html_url}}
           GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+
       - name: Approve patch and minor updates
         if: ${{steps.dependabot-metadata.outputs.update-type == 'version-update:semver-patch' || steps.dependabot-metadata.outputs.update-type == 'version-update:semver-minor'}}
         run: gh pr review $PR_URL --approve -b "I'm **approving** this pull request because **it includes a patch or minor update**"
         env:
           PR_URL: ${{github.event.pull_request.html_url}}
           GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
-      - name: Approve major updates of development dependencies
-        if: ${{steps.dependabot-metadata.outputs.update-type == 'version-update:semver-major' && steps.dependabot-metadata.outputs.dependency-type == 'direct:development'}}
-        run: gh pr review $PR_URL --approve -b "I'm **approving** this pull request because **it includes a major update of a dependency used only in development**"
-        env:
-          PR_URL: ${{github.event.pull_request.html_url}}
-          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
-      - name: Comment on major updates of non-development dependencies
-        if: ${{steps.dependabot-metadata.outputs.update-type == 'version-update:semver-major' && steps.dependabot-metadata.outputs.dependency-type == 'direct:production'}}
+          
+      - name: Comment on major updates of any dependencies
+        if: ${{steps.dependabot-metadata.outputs.update-type == 'version-update:semver-major'}}
         run: |
-          gh pr comment $PR_URL --body "I'm **not approving** this PR because **it includes a major update of a dependency used in production**"
+          gh pr comment $PR_URL --body "I'm **not approving** this PR because **it includes a major update of a dependency**"
           gh pr edit $PR_URL --add-label "requires-manual-qa"
         env:
           PR_URL: ${{github.event.pull_request.html_url}}

.github/workflows/build.yml

@@ -1,30 +0,0 @@
-name: build
-on:
-  push:
-    tags:
-      - v*
-    branches: [ main ]
-  pull_request:
-    branches: [ main ]
-
-jobs:
-  build:
-    strategy:
-      matrix:
-        os: [macos-latest, windows-latest, ubuntu-latest]
-        node-version: [16.x, 18.x, 20.x]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-
-    runs-on: ${{ matrix.os }}
-
-    steps:
-    - uses: actions/checkout@v3
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'npm'
-        cache-dependency-path: '**/package-lock.json'
-    - run: npm ci
-    - run: npm run build
-    - run: npm run build:example

.github/workflows/lint-build.yml

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

.github/workflows/lint.yml

@@ -1,31 +0,0 @@
-name: lint
-on:
-  push:
-    tags:
-      - v*
-    branches: [ main ]
-  pull_request:
-    branches: [ main ]
-
-jobs:
-  build:
-
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [16.x, 18.x, 20.x]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-
-    steps:
-    - uses: actions/checkout@v3
-
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'npm'
-        cache-dependency-path: '**/package-lock.json'
-  
-    - run: npm ci --ignore-scripts
-    - run: npm run lint

.github/workflows/mod-update.yml

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

.github/workflows/npm-publish.yml

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

.github/workflows/update.yml

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

.gitignore

@@ -4,5 +4,4 @@ resources/
 node_modules/
 
 .DS_store
-.hugo_build.lock
-hugo_stats.json
+.hugo_build.lock

.markdownlint-cli2.jsonc

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

.stylelintignore

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

README.md

@@ -1,5 +1,6 @@
 # Hugo Theme Hinode
 
+<!-- markdownlint-disable MD033 -->
 <!-- Tagline -->
 <p align="center">
     <b>A clean documentation and blog theme for your Hugo site based on Bootstrap 5</b>
@@ -47,6 +48,7 @@
   <a href="#donate">Donate</a> •
   <a href="#license">License</a>
 </p>
+<!-- markdownlint-enable MD033 -->
 
 ## About
 
@@ -56,54 +58,42 @@
 - [PageSpeed Insights][pagespeed]
 - [Mozilla Observatory][observatory]
 
-Hinode is a clean documentation and blog theme for [Hugo][hugo], an open-source static site generator. Based on the [Bootstrap 5][bootstrap] framework, the rendered site is fast, secure, and responsive. Hinode uses [FlexSearch][flexsearch] to enable full text search across your site. Finally, the theme supports [Node Package Manager][npm] to automate the build process and to keep track of dependencies.
-
-Additional features include:
-
-- Flexible configuration of Hugo modules
-- Switching between light mode and dark mode
-- Support for multiple languages
-- Reusable Bootstrap components through configurable shortcodes and partials
-- Embedded comments through light-weight integration with GitHub via [utteranc.es][utterances]
-- Integrated sidebar navigation for content-heavy sections, such as documentation pages
-- Reponsive image handling for multiple screen sizes and resolutions
-- Optimized search results, scoring 100 points for SEO on [PageSpeed Insights][pagespeed]
-- Secure by default, scoring A+ on [Mozilla Observatory test][observatory]
+Hinode is a clean documentation and blog theme for [Hugo][hugo], an open-source static site generator. Based on the [Bootstrap 5][bootstrap] framework, the rendered site is fast, secure, and responsive. Hinode uses [FlexSearch][flexsearch] to enable full text search across your site. Finally, the theme supports [Node Package Manager][npm] (npm) to automate the build process and to keep track of dependencies.
 
 Detailed information about Hinode is available on the [official website][website].
 
 ## Prerequisites
 
-Hinode requires Git, Node.js and npm for local development and testing. Download the Git binary from the [official website][git_download]. Next, download and install [Node.js][nodejs] (it includes npm) for your platform.
+Hinode is a [Hugo theme that uses modules][hugo_modules] to install and maintain various components. It can be installed using either Hugo or npm. If you would like to take advantage of automation, the npm approach is recommended. Refer to the [Hinode template][repository_template] for installation instructions with npm.
+
+The installation instructions in this readme install Hinode as a regular Hugo theme. Hinode requires the following software to be installed on your local machine.
+
+- [Go binary][golang_download]
+- [Hugo][nodejs] (extended version)
+
+[Git][git_download] is recommended, but is not a strict requirement.
 
 ## Installation
 
 Start a new Hinode project in three steps:
 
-1. Create a new site
-
-    Hinode is available as a [template][repository_template], and a [main repository][repository]. The template [npm][npm] to link to the latest available version of Hinode. Unless you plan to customize a lot, it is recommended to use the template:
+1. **Create a new site**
 
     ```bash
-    git clone https://github.com/gethinode/template.git my-hinode-site && cd my-hinode-site
+    hugo new site my-hinode-site && cd my-hinode-site
     ```
 
-    Use the main theme if you intend to customize the base code:
+1. **Initialize the module system**
 
     ```bash
-    git clone https://github.com/gethinode/hinode.git my-hinode-site && cd my-hinode-site
+    hugo mod init example.com/my-hinode-site
+    echo "[[module.imports]]\npath = 'github.com/gethinode/hinode'" >> hugo.toml
     ```
 
-1. Install dependencies
+1. **Start a development server**
 
     ```bash
-    npm install
-    ```
-
-1. Start development server
-
-    ```bash
-    npm run start
+    hugo server
     ```
 
 ## Configuration
@@ -123,11 +113,13 @@ Hinode is inspired by the following themes:
 
 ## Donate
 
+<!-- markdownlint-disable MD033 -->
 <a href="https://www.buymeacoffee.com/markdumay" target="_blank" rel="noopener noreferrer"><img src="https://cdn.buymeacoffee.com/buttons/lato-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;"></a>
+<!-- markdownlint-enable MD033 -->
 
 ## License
 
-The `hinode` and `template` codebase is released under the [MIT license][license]. The documentation (including the "README" and `docs` codebase) is licensed under the Creative Commons [(CC BY-NC 4.0)][cc-by-nc-4.0] license.
+The `hinode`, `docs`, and `template` codebase is released under the [MIT license][license]. The documentation of Hinode is licensed under the Creative Commons [(CC BY-NC 4.0)][cc-by-nc-4.0] license. This includes all files within the repository's `/content` and `/exampleSite/content` folders and their children, as well as the "README" in the repository root. This applies to all public repositories maintained by `gethinode` on GitHub, including the `gethinode/hinode`, `gethinode/template`, and `gethinode/docs` repositories, unless specified otherwise.
 
 <!-- MARKDOWN PUBLIC LINKS -->
 [blist]: https://github.com/apvarun/blist-hugo-theme
@@ -137,6 +129,8 @@ The `hinode` and `template` codebase is released under the [MIT license][license
 [flexsearch]: https://github.com/nextapps-de/flexsearch
 [git_download]: https://git-scm.com
 [hugo]: https://gohugo.io
+[hugo_download]: https://gohugo.io/installation
+[hugo_modules]: https://gohugo.io/hugo-modules/
 [netlify]: https://www.netlify.com
 [nodejs]: https://nodejs.org
 [npm]: https://www.npmjs.com
@@ -147,6 +141,7 @@ The `hinode` and `template` codebase is released under the [MIT license][license
 <!-- MARKDOWN MAINTAINED LINKS -->
 [contribute]: https://gethinode.com/contribute
 [getstarted]: https://gethinode.com/docs
+[golang_download]: https://go.dev/dl/
 [demo]: https://demo.gethinode.com/
 [license]: https://github.com/gethinode/hinode/blob/main/LICENSE
 [repository]: https://github.com/gethinode/hinode.git

assets/scss/app-dart.scss

@@ -0,0 +1,57 @@
+@use "sass:meta";
+
+// Define template variables
+@use "hugo:vars" as h; // note: modified for dart-sass
+
+// Include default variable overrides
+@import "common/variables-dart.scss"; // note: modified for dart-sass
+@import "common/icons.scss";
+
+// Import Bootstrap configuration (mounted by core Bootstrap module)
+@import "bootstrap-dart.scss"; // note: modified for dart-sass
+
+// Include dark mode overrides
+@import "common/variables-dark.scss";
+
+// Import Hinode theme styles
+@import "components/abbr.scss";
+@import "components/alert.scss";
+@import "components/blockquote.scss";
+@import "components/breadcrumb.scss";
+@import "components/buttons.scss";
+@import "components/card.scss";
+@import "components/carousel.scss";
+@import "components/clipboard.scss";
+@import "components/command.scss";
+@import "components/comments.scss";
+@import "components/feature.scss";
+@import "components/footer.scss";
+@import "components/navbar.scss";
+@import "components/img.scss";
+@import "components/pagination.scss";
+@import "components/persona.scss";
+@import "components/popover.scss";
+@import "components/sidebar.scss";
+@import "components/syntax-dart.scss"; // note: modified for dart-sass
+@import "components/table.scss";
+@import "components/timeline.scss";
+@import "components/toc.scss";
+@import "components/vimeo.scss";
+@import "common/animation.scss";
+@import "common/styles.scss";
+@import "layouts/reboot.scss";
+@import "layouts/type.scss";
+@import "common/export.scss";
+@import "helpers/colored-links.scss";
+@import "helpers/display.scss";
+
+// note: modified for dart-sass
+@if h.$import-fonts {
+    @include meta.load-css(theme/fonts);
+}
+
+// Import theme placeholder
+@import "theme/theme.scss";
+
+// Import Bootstrap utilities API  (mounted by core Bootstrap module)
+@import "modules/bootstrap/utilities/api";

assets/scss/app.scss

@@ -12,6 +12,7 @@
 @import "common/variables-dark.scss";
 
 // Import Hinode theme styles
+@import "components/abbr.scss";
 @import "components/alert.scss";
 @import "components/blockquote.scss";
 @import "components/breadcrumb.scss";
@@ -30,6 +31,7 @@
 @import "components/popover.scss";
 @import "components/sidebar.scss";
 @import "components/syntax.scss";
+@import "components/table.scss";
 @import "components/timeline.scss";
 @import "components/toc.scss";
 @import "components/vimeo.scss";

assets/scss/common/_styles.scss

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

assets/scss/common/_variables-dart.scss

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

assets/scss/common/_variables.scss

@@ -7,6 +7,7 @@ $navbar-toggler-focus-width:    0 !default;
 
 // scss-docs-start font
 $font-family-sans-serif:        $theme-font, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-size-base:                $font-size-base !default;;
 $headings-font-weight:          600 !default;
 $font-weight-lighter:           lighter !default;
 $font-weight-light:             200 !default;
@@ -22,8 +23,8 @@ strong {
 $black:                       #000 !default;
 $btn-toggle-color:              $black !default;
 
-$carousel-dark-indicator-active-bg:  #ffffff !default;
-$carousel-dark-caption-color:        #ffffff !default;
+$carousel-dark-indicator-active-bg:  #fff !default;
+$carousel-dark-caption-color:        #fff !default;
 $carousel-dark-control-icon-filter:  invert(0) grayscale(100) !default;
 
 // scss-docs-start color-mode

assets/scss/components/_abbr.scss

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

assets/scss/components/_card.scss

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

assets/scss/components/_navbar.scss

@@ -108,7 +108,7 @@
     background-color: $white if($enable-important-utilities, !important, null);
 }
 
-.emphasis, {
+.emphasis {
     background-color: $black if($enable-important-utilities, !important, null);
 }
 

assets/scss/components/_syntax-dark.scss

@@ -6,9 +6,9 @@
 /* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
 /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
 /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
-/* LineHighlight */ .chroma .hl { background-color: #b8b800 }
+/* LineHighlight */ .chroma .hl { background-color: #373700 }
 /* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #64686c }
-/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #6e7681 }
+/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #999fa8 }
 /* Line */ .chroma .line { display: flex; }
 /* Keyword */ .chroma .k { color: #ff7b72 }
 /* KeywordConstant */ .chroma .kc { color: #79c0ff }
@@ -83,4 +83,4 @@
 /* GenericSubheading */ .chroma .gu { color: #79c0ff }
 /* GenericTraceback */ .chroma .gt { color: #ff7b72 }
 /* GenericUnderline */ .chroma .gl { text-decoration: underline }
-/* TextWhitespace */ .chroma .w { color: #6e7681 }
+/* TextWhitespace */ .chroma .w { color: #999fa8 }

assets/scss/components/_syntax-dart.scss

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

assets/scss/components/_syntax.scss

@@ -8,6 +8,14 @@
     background-color: transparent if($enable-important-utilities, !important, null);
 }
 
+.chroma {
+    display: flex;
+}
+
+.chroma code {
+    flex: 1;
+}
+
 .syntax-highlight {
     background-color: var(--bs-light) if($enable-important-utilities, !important, null);
     overflow-x: auto;
@@ -30,7 +38,10 @@
         }
 
         .bg,
-        .chroma {
+        .chroma,
+        .chroma .ge,
+        .chroma .gl,
+        .chroma .gs {
             color: #c9d1d9 if($enable-important-utilities, !important, null);
         }
     }

assets/scss/components/_table.scss

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

assets/scss/components/_toc.scss

@@ -75,6 +75,10 @@
         .toc-button {
             --bs-btn-color: var(--bs-body-color);
             --bs-btn-border-color: var(--bs-body-color);
+
+            &:hover {
+                background-color: transparent;
+            }
         }
 
         #toc-collapse {

assets/scss/layouts/_type.scss

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

config/_default/hugo.toml

@@ -94,6 +94,9 @@ home = ["HTML", "RSS", "REDIR"]
   [[module.mounts]]
     source = "assets"
     target = "assets"
+  [[module.mounts]]
+    source = "content"
+    target = "content"
   [[module.mounts]]
     source = "i18n"
     target = "i18n"
@@ -117,4 +120,6 @@ home = ["HTML", "RSS", "REDIR"]
     path = "github.com/gethinode/mod-katex"
   [[module.imports]]
     path = "github.com/gethinode/mod-leaflet"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-lottie"
 # toml-docs-end modules

config/_default/markup.toml

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

config/_default/params.toml

@@ -9,14 +9,18 @@
     [main.externalLinks]
         cue = false
         tab = false
+    [main.build]
+        transpiler = "libsass"
 # toml-docs-end main
 
 # toml-docs-start modules
 [modules]
     core = ["bootstrap", "flexsearch", "fontawesome"]
-    optional = ["leaflet", "katex"]
+    optional = ["leaflet", "katex", "lottie"]
     excludeSCSS = ["bootstrap"]
     disableTemplate = ["katex"]
+    [modules.katex]
+        state = "defer"
     [modules.fontawesome]
         inline = true
         debug = true
@@ -27,6 +31,7 @@
 [debugging]
     showJS = false
     showSCSS = false
+    purgeHTMLComments = false
 # toml-docs-end debugging
 
 # toml-docs-start docs
@@ -42,6 +47,11 @@
     fullCover = false
     centerHeadline = false
     style = ""
+    [home.feature]
+        orientation = "horizontal"
+        color = "primary"
+        width = 4
+        align = "start"
 # toml-docs-end home
 
 # toml-docs-start navigation
@@ -49,12 +59,13 @@
     anchor = true
     logo = "/img/logo_icon.svg"
     color = "body"
-    fixed = true
-    offset = "3.8em"
+    offset = "5.5rem"
     search = true
+    searchModal = false
     breadcrumb = true
     toc = true
     sidebar = true
+    size = "md"
 # toml-docs-end navigation
 
 # toml-docs-start messages
@@ -114,7 +125,7 @@
 #         header = "full"
 #         footer = "none"
 #         orientation = "stacked"
-#         style = "border-0 card-zoom"
+#         style = "border-0 card-zoom card-body-margin"
 #         homepage = 3
 #         separator = true
 # toml-docs-end sections
@@ -141,6 +152,7 @@
     themeFont = "Inter"
     # themeFontPath = "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap" # external path
     themeFontPath = "/fonts" # local path
+    fontSizeBase = "1rem" # assumes the browser default, typically '16px'
 # toml-docs-end font
 # toml-docs-start build
     purge = false

config/ci/hugo.toml

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

config/postcss.config.js

@@ -19,6 +19,7 @@ const purgecss = require('@fullhuman/postcss-purgecss')({
       './assets/scss/components/_syntax.scss',
       './assets/scss/components/_syntax-dark.scss',
       './assets/scss/components/_syntax-light.scss',
+      './assets/scss/components/_table.scss',
       './assets/scss/theme/fonts.scss',
       './assets/scss/theme/theme.scss',
       './_vendor/github.com/gethinode/mod-flexsearch/assets/scss/modules/flexsearch/flexsearch.scss',

content/_index.md

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

exampleSite/assets/svgs/custom/activity.svg

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

exampleSite/config/_default/hugo.toml

@@ -1,3 +1,4 @@
+resourcedir = '../resources/'
 title = "Hinode"
 copyright = "Copyright © 2023 Mark Dumay."
 paginate = 9

exampleSite/config/_default/markup.toml

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

exampleSite/config/_default/params.toml

@@ -7,10 +7,12 @@
     [main.externalLinks]
         cue = true
         tab = true
+    [main.build]
+        transpiler = "dartsass"
 
 [modules]
     core = ["bootstrap", "flexsearch", "fontawesome"]
-    optional = ["leaflet", "katex"]
+    optional = ["leaflet", "katex", "lottie"]
     excludeSCSS = ["bootstrap"]
     disableTemplate = ["katex"]
     [modules.fontawesome]
@@ -21,6 +23,7 @@
 [debugging]
     showJS = false
     showSCSS = false
+    purgeHTMLComments = true # prevents a Goldmark warning when processing HTML comments (as used by markdownlint)
 
 [docs]
     basePath = "/" # TODO: replace
@@ -33,17 +36,24 @@
     fullCover = false
     centerHeadline = false
     style = ""
+    [home.feature]
+        orientation = "horizontal"
+        color = "primary"
+        width = 4
+        align = "start"
 
 [navigation]
     anchor = true
     logo = "/img/logo_icon.svg"
     color = "body"
     fixed = true
-    offset = "3.8em"
+    offset = "5.5rem"
     search = true
+    searchModal = false
     breadcrumb = true
     toc = true
     sidebar = true
+    size = "md"
 
 [messages]
     placement = "bottom-right"
@@ -96,7 +106,7 @@
         header = "full"
         footer = "none"
         orientation = "stacked"
-        style = "border-0 card-zoom"
+        style = "border-0 card-zoom card-body-margin"
         homepage = 3
         separator = true
     [sections.projects]
@@ -111,7 +121,7 @@
         padding = "3"
         header = "none"
         footer = "tags"
-        orientation = "horizontal"
+        orientation = "horizontal-sm"
         style = "border-1 card-emphasize"
         homepage = 3
         separator = false

exampleSite/config/ci/hugo.toml

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

exampleSite/config/postcss.config.js

@@ -0,0 +1,44 @@
+const autoprefixer = require('autoprefixer')({})
+const cssnano = require('cssnano')({
+  preset: 'advanced'
+})
+const whitelister = require('purgecss-whitelister')
+const purgecss = require('@fullhuman/postcss-purgecss')({
+  content: ['./exampleSite/hugo_stats.json'],
+  defaultExtractor: (content) => {
+    const els = JSON.parse(content).htmlElements
+    return [...(els.tags || []), ...(els.classes || []), ...(els.ids || [])]
+  },
+  dynamicAttributes: ['data-bs-theme'],
+  safelist: [
+    ...whitelister([
+      './assets/scss/components/_clipboard.scss',
+      './assets/scss/components/_command.scss',
+      './assets/scss/components/_navbar.scss',
+      './assets/scss/components/_search.scss',
+      './assets/scss/components/_syntax.scss',
+      './assets/scss/components/_syntax-dark.scss',
+      './assets/scss/components/_syntax-light.scss',
+      './assets/scss/components/_table.scss',
+      './assets/scss/theme/fonts.scss',
+      './assets/scss/theme/theme.scss',
+      './_vendor/github.com/gethinode/mod-flexsearch/assets/scss/modules/flexsearch/flexsearch.scss',
+      './_vendor/github.com/gethinode/mod-katex/dist/katex.scss',
+      './_vendor/github.com/gethinode/mod-leaflet/dist/leaflet.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_carousel.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_dropdown.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_reboot.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_tooltip.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_transitions.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_utilities.scss'
+    ])
+  ]
+})
+
+module.exports = {
+  plugins: [
+    autoprefixer,
+    cssnano,
+    purgecss
+  ]
+}

exampleSite/content/en/_index.md

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

exampleSite/content/en/about.md

@@ -6,29 +6,19 @@ updated: 2023-08-02
 showComments: false
 ---
 
-<p class="text-center"><svg class="img-fluid w-50"><use href="/img/logo_var.svg#logo"></use></svg></p>
+{{< image src="/img/logo_var.svg#logo" class="img-fluid w-50" wrapper="text-center" >}}
 
-<section class="section section-sm mt-5 mb-5">
-    <div class="container-fluid">
-        <div class="row justify-content-center text-center">
-            <div class="col-lg-4">
-                {{< icon fab bootstrap fa-2xl >}}
-                <h2 class="h4">Bootstrap framework</h2>
-                <p>Build fast, responsive sites with Bootstrap 5. Easily customize your site with the source Sass files.</p>
-            </div>
-            <div class="col-lg-4">
-                {{< icon fas magnifying-glass fa-2xl >}}
-                <h2 class="h4">Full text search</h2>
-                <p>Search your site with FlexSearch, a full-text search library with zero dependencies.</p>
-            </div>
-            <div class="col-lg-4">
-                {{< icon fas code fa-2xl >}}
-                <h2 class="h4">Development tools</h2>
-                <p>Use Node Package Manager to automate the build process and to keep track of dependencies.</p>
-            </div>
-        </div>
-    </div>
-</section>
+{{< card-group class="text-center border-0" padding="3" >}}
+    {{< card title="Bootstrap framework" icon="fab bootstrap" >}}
+        Build fast, responsive sites with Bootstrap 5. Easily customize your site with the source Sass files.
+    {{< /card >}}
+    {{< card title="Full text search" icon="fas magnifying-glass" >}}
+        Search your site with FlexSearch, a full-text search library with zero dependencies.
+    {{< /card >}}
+    {{< card title="Development tools" icon="fas code" >}}
+        Use Node Package Manager to automate the build process and to keep track of dependencies.
+    {{< /card >}}
+{{< /card-group >}}
 
 Additional features include:
 

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

@@ -14,6 +14,16 @@ thumbnail:
 
 Hinode provides several shortcodes that wrap common Bootstrap components. Refer to the [official documentation]({{< param "links.hinode_docs" >}}) for more details.
 
+## Abbr
+
+As an example, the following shortcode displays the full text of an abbreviation on hover.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* abbr "CI/CD" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Accordion
 
 As an example, the following shortcode displays an accordion with three elements, of which the first element is expanded.
@@ -22,11 +32,11 @@ As an example, the following shortcode displays an accordion with three elements
 {{< example lang="hugo" >}}
 {{</* accordion */>}}
   {{</* accordion-item header="Accordion Item #1" show="true" */>}}
-    This is the first item's accordion body. It supports HTML content. The item is shown by adding the value
-    <code>show</code> to the <code>class</code> argument.
+    This is the first item's accordion body. It supports HTML content, if enabled in the goldmark
+    renderer. The item is shown by adding the value `show` to the `class` argument.
   {{</* /accordion-item */>}}
   {{</* accordion-item header="Accordion Item #2" */>}}
-    This is the second item's accordion body. It supports HTML content too.
+    This is the second item's accordion body.
   {{</* /accordion-item */>}}
   {{</* accordion-item header="Accordion Item #3" */>}}
     This is the third item's accordion body.
@@ -49,16 +59,29 @@ As an example, the following shortcode displays a simple alert.
 
 ## Badge
 
-Use HTML code to display a badge for a heading. See the Bootstrap [documentation]({{< param "links.bs_badge_heading" >}}) for more options.
+Use the badge shortcode to display a badge for a heading.
 
+<!-- markdownlint-disable MD037 -->
 {{< example >}}
-<h1>Example heading of size one <span class="badge bg-secondary">New</span></h1>
-<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>
+Heading 1 {{</* badge title="New" */>}}
+{.h1}
+
+Heading 2 {{</* badge title="New" */>}}
+{.h2}
+
+Heading 3 {{</* badge title="New" */>}}
+{.h3}
+
+Heading 4 {{</* badge title="New" */>}}
+{.h4}
+
+Heading 5 {{</* badge title="New" */>}}
+{.h5}
+
+Heading 6 {{</* badge title="New" */>}}
+{.h6}
 {{< /example >}}
+<!-- markdownlint-enable MD037 -->
 
 ## Breadcrumb
 
@@ -102,7 +125,28 @@ As an example, the following shortcode displays a stacked card that links to the
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* card path="about" padding="3" class="w-50" color="body-tertiary" header="publication" footer="none" */>}}
+{{</* card path="about" padding="3" class="col-6 mx-auto" color="body-tertiary" header="publication" footer="none" /*/>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Card group
+
+As an example, the following shortcode displays a card group of three elements.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* card-group padding="3" gutter="3" */>}}
+    {{</* card title="Bootstrap framework" icon="fab bootstrap" */>}}
+        Build fast, responsive sites with Bootstrap 5. Easily customize your site with the source
+        Sass files.
+    {{</* /card */>}}
+    {{</* card title="Full text search" icon="fas magnifying-glass" */>}}
+        Search your site with FlexSearch, a full-text search library with zero dependencies.
+    {{</* /card */>}}
+    {{</* card title="Development tools" icon="fas code" */>}}
+        Use Node Package Manager to automate the build process and to keep track of dependencies.
+    {{</* /card */>}}
+{{</* /card-group */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
@@ -131,7 +175,7 @@ As an example, the following shortcode displays a button that, when clicked, tri
 {{</* /button */>}}
 
 {{</* collapse id="collapse-1" class="p-3 border rounded bg-primary-subtle" */>}}
-    Some placeholder content for the collapse component. This panel is <i>hidden by default</i> but
+    Some placeholder content for the collapse component. This panel is *hidden by default* but
     revealed when the user activates the relevant trigger.
 {{</* /collapse */>}}
 {{< /example >}}
@@ -197,13 +241,14 @@ Use the `file` shortcode to print and highlight the full content of a given inpu
 
 ## Icon
 
-As an example, the following shortcodes show a square check, a brand logo, and a circle check.
+As an example, the following shortcodes show a square check, a brand logo, a circle check, and a custom icon.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
 {{</* fa square-check */>}}
 {{</* fab linkedin */>}}
 {{</* fas circle-check */>}}
+{{</* icon custom activity */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
@@ -217,6 +262,57 @@ As an example, the following shortcode displays an image with rounded corners an
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
+As an example, the following shortcode displays a regular vector image.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* image src="/img/logo_icon.svg" class="col-sm-6 col-lg-4" wrapper="text-center" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+As an example, the following shortcode displays a vector image with a symbol reference.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* image src="/img/logo_var.svg#logo" class="col-sm-6 col-lg-4" wrapper="text-center" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Link
+
+As an example, the following shortcodes render links in different formats.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+
+- {{</* link hinode >}}Named link with default settings{{< /link */>}}
+- {{</* link name=hinode cue=false tab=false >}}Named link opening in current tab w/o icon{{< /link */>}}
+- {{</* link name=hinode cue=true tab=true >}}Named link opening in new tab with icon{{< /link */>}}
+- {{</* link hinode /*/>}}
+- {{</* link href="https://developer.mozilla.org" >}}External link{{< /link */>}}
+- {{</* link "./projects/another-project" >}}Internal link with title{{< /link */>}}
+- {{</* link url="projects/another-project" /*/>}}
+- {{</* link url="/projects/another-project" /*/>}}
+- {{</* link url="../projects/another-project" case=false /*/>}}
+- {{</* link "/about/" /*/>}}
+- {{</* link "/fr/about/" /*/>}}
+- {{</* link "/fr/about" >}}About (French){{< /link */>}}
+- {{</* link "#image" /*/>}}
+- {{</* link "components/#map" /*/>}}
+
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Mark
+
+Use the `mark` shortcode to highlight text. The inner content is used as input.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+Use the mark shortcode to {{</* mark >}}highlight{{< /mark */>}} specific text.
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Nav
 
 As an example, the following shortcode displays a tab group with vertically aligned pills.
@@ -225,11 +321,11 @@ As an example, the following shortcode displays a tab group with vertically alig
 {{< example lang="hugo" >}}
   {{</* nav type="pills" vertical="true" */>}}
     {{</* nav-item header="Nav Item #1" show="true" */>}}
-      This is the first item's nav body. It supports HTML content. The item is shown by adding the value
-      <code>show</code> to the <code>class</code> argument.
+      This is the first item's nav body. It supports HTML content, if enabled in the goldmark
+      renderer. The item is shown by adding the value `show` to the `class` argument.
     {{</* /nav-item */>}}
     {{</* nav-item header="Nav Item #2" */>}}
-      This is the second item's nav body. It too supports HTML content.
+      This is the second item's nav body.
     {{</* /nav-item */>}}
     {{</* nav-item header="Nav Item #3" */>}}
       This is the third item's nav body.
@@ -270,13 +366,33 @@ Loading...
 {{< /example>}}
 <!-- markdownlint-enable MD037 -->
 
+## Sub
+
+As an example, the following shortcode displays subscript text.
+
+<!-- markdownlint-disable MD037 -->
+{{< example >}}
+H{{</* sub 2 */>}}O is a liquid.
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Sup
+
+As an example, the following shortcode displays superscript text.
+
+<!-- markdownlint-disable MD037 -->
+{{< example >}}
+2{{</* sup 10 */>}} is 1024.
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Timeline
 
-As an example, the following shortcode displays a timeline with the file `data/timeline-en.yml` as data.
+As an example, the following shortcode displays a timeline with the file `data/timeline.en.yml` as data.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* timeline data="timeline-en" background="dark" */>}}
+{{</* timeline data="timeline" background="dark" */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
@@ -295,11 +411,11 @@ As an example, the following shortcode displays a button that, when clicked, tri
 {{</* /button */>}}
 
 {{</* toast id="toast-example-1" header="First title" */>}}
-    This is the first toast message.
+    This is the first toast message. It supports `markdown.`
 {{</* /toast */>}}
 
 {{</* toast id="toast-example-2" header="Second title" */>}}
-    This is the second toast message.
+    This is the second toast message. It supports `markdown.`
 {{</* /toast */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
@@ -310,6 +426,6 @@ As an example, the following shortcode displays a tooltip for a colored hyperlin
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* tooltip color="primary" title="Tooltip" href="#!" */>}}Tooltip{{</* /tooltip */>}} demonstration
+{{</* tooltip color="primary" title="Tooltip caption" href="#!" */>}}Tooltip{{</* /tooltip */>}} demonstration
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->

exampleSite/content/en/blog/components.md

@@ -1,7 +1,7 @@
 ---
 author: Mark Dumay
 title: Components
-date: 2023-07-21
+date: 2023-09-23
 description: Use shortcodes to add predefined components powered by external libraries.
 tags: ["bootstrap", "shortcode"]
 thumbnail:
@@ -10,11 +10,21 @@ thumbnail:
   authorURL: https://unsplash.com/@ryoji__iwata
   origin: Unsplash
   originURL: https://unsplash.com/photos/5siQcvSxCP8
-modules: ["katex", "leaflet"]
+modules: ["katex", "leaflet", "lottie"]
 ---
 
 Hinode provides several shortcodes on top of the common [Bootstrap elements]({{< relref "bootstrap-elements" >}}). Refer to the [official documentation]({{< param "links.hinode_docs" >}}) for more details.
 
+## Animation
+
+As an example, the following shortcode shows an animation that plays on hover.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* animation data="gatin.json" auto=false hover=true class="col-6 mx-auto" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Formula (KaTeX)
 
 As an example, the following markdown renders two formulas using the KaTeX typesetting library.

exampleSite/content/fr/_index.md

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

exampleSite/content/fr/about.md

@@ -7,30 +7,19 @@ updated: 2023-08-02
 showComments: false
 ---
 
-<p class="text-center"><svg class="img-fluid w-50"><use href="/img/logo_var.svg#logo"></use></svg></p>
+{{< image src="/img/logo_var.svg#logo" class="img-fluid w-50" wrapper="text-center" >}}
 
-<section class="section section-sm mt-5">
-  <div class="container-fluid">
-    <div class="row justify-content-center text-center">
-    <div class="row justify-content-center text-center">
-      <div class="col-lg-4">
-        {{< icon fab bootstrap fa-2xl >}}
-        <h2 class="h4">Framework Bootstrap</h2>
-        <p>Créez des sites rapides et réactifs avec Bootstrap 5. Personnalisez facilement votre site avec les fichiers source Sass.</p>
-      </div>
-      <div class="col-lg-4">
-        {{< icon fas magnifying-glass fa-2xl >}}
-        <h2 class="h4">Recherche en texte intégral</h2>
-        <p>Recherchez votre site avec FlexSearch, une bibliothèque de recherche en texte intégral avec zéro dépendances.</p>
-      </div>
-      <div class="col-lg-4">
-        {{< icon fas code fa-2xl >}}
-        <h2 class="h4">Outils de développement</h2>
-        <p>Utilisez Node Package Manager pour automatiser le processus de construction et suivre les dépendances.</p>
-      </div>
-    </div>
-  </div>
-</section>
+{{< card-group class="text-center border-0" padding="3" >}}
+    {{< card title="Framework Bootstrap" icon="fab bootstrap" >}}
+        Créez des sites rapides et réactifs avec Bootstrap 5. Personnalisez facilement votre site avec les fichiers source Sass.
+    {{< /card >}}
+    {{< card title="Recherche en texte intégral" icon="fas magnifying-glass" >}}
+        Recherchez votre site avec FlexSearch, une bibliothèque de recherche en texte intégral avec zéro dépendances.
+    {{< /card >}}
+    {{< card title="Outils de développement" icon="fas code" >}}
+        Utilisez Node Package Manager pour automatiser le processus de construction et suivre les dépendances.
+    {{< /card >}}
+{{< /card-group >}}
 
 Les fonctionnalités supplémentaires incluent:
 
@@ -42,9 +31,4 @@ Les fonctionnalités supplémentaires incluent:
 - Gestion d'images adaptatives pour plusieurs tailles d'écran et résolutions.
 - Résultats de recherche optimisés, obtenant un score de 100 points pour le référencement (SEO) sur [PageSpeed Insights]({{< param "links.pagespeed" >}}).
 - Sécurisé par défaut, obtenant un score A+ au test [Mozilla Observatory]({{< param "links.observatory" >}})
-  {.tickmark}
-
-Hinode est inspiré par les thèmes suivants:
-
-- [Blist](https://github.com/apvarun/blist-hugo-theme) - Un thème de blog pour Hugo basé sur Tailwind CSS.
-- [Doks](https://github.com/h-enk/doks) - Un thème Hugo pour la création de sites de documentation sécurisés, rapides et optimisés pour le référencement (SEO), que vous pouvez facilement mettre à jour et personnaliser.
+{.tickmark}

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

@@ -0,0 +1,432 @@
+---
+author: Mark Dumay
+title: Éléments Bootstrap
+slug: elements-bootstrap
+date: 2023-08-12
+description: Utilisez des shortcodes pour ajouter facilement des éléments Bootstrap courants.
+tags: ["bootstrap", "shortcode"]
+thumbnail:
+  url: img/boots.jpg
+  author: Nathan Dumlao
+  authorURL: https://unsplash.com/@nate_dumlao
+  origin: Unsplash
+  originURL: https://unsplash.com/photos/QLPWQvHvmII
+---
+
+Hinode propose plusieurs shortcodes qui enveloppent des composants Bootstrap courants. Consultez la [documentation officielle]({{< param "links.hinode_docs" >}}) pour plus de détails.
+
+## Abbr
+
+À titre d'exemple, le shortcode suivant affiche le texte complet d'une abréviation lorsque survolé.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* abbr "CI/CD" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Accordéon
+
+À titre d'exemple, le shortcode suivant affiche un accordéon avec trois éléments, dont le premier élément est déplié.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* accordion */>}}
+  {{</* accordion-item header="Élément d'accordéon #1" show="true" */>}}
+    Il s'agit du contenu du corps du premier élément de l'accordéon. Il prend en charge le contenu HTML, s'il est activé dans le moteur de rendu goldmark. L'élément est affiché en ajoutant la valeur `show` à l'argument `class`.
+  {{</* /accordion-item */>}}
+  {{</* accordion-item header="Élément d'accordéon #2" */>}}
+    Il s'agit du contenu du corps du deuxième élément de l'accordéon.
+  {{</* /accordion-item */>}}
+  {{</* accordion-item header="Élément d'accordéon #3" */>}}
+    Il s'agit du contenu du corps du troisième élément de l'accordéon.
+  {{</* /accordion-item */>}}
+{{</* /accordion */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Alerte
+
+À titre d'exemple, le shortcode suivant affiche une alerte simple.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* alert color="danger" dismissible="true" */>}}
+    Une simple alerte de danger — vérifiez-la !
+{{</* /alert */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Badge
+
+Utilisez le shortcode "badge" pour afficher un badge avec un en-tête.
+
+<!-- markdownlint-disable MD037 -->
+{{< example >}}
+En-tête 1 {{</* badge title="Nouveau" */>}}
+{.h1}
+
+En-tête 2 {{</* badge title="Nouveau" */>}}
+{.h2}
+
+En-tête 3 {{</* badge title="Nouveau" */>}}
+{.h3}
+
+En-tête 4 {{</* badge title="Nouveau" */>}}
+{.h4}
+
+En-tête 5 {{</* badge title="Nouveau" */>}}
+{.h5}
+
+En-tête 6 {{</* badge title="Nouveau" */>}}
+{.h6}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Fil d'Ariane
+
+À titre d'exemple, le shortcode suivant affiche un fil d'Ariane pour la page du blog.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* breadcrumb path="blog" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Bouton
+
+À titre d'exemple, le shortcode suivant affiche une infobulle pour un bouton sombre avec un badge.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* button color="secondary" tooltip="Cliquez sur la boîte de réception pour voir vos messages non lus." href="#!" badge="99+" */>}}
+    Boîte de réception
+{{</* /button */>}}
+{{< /example>}}
+<!-- markdownlint-enable MD037 -->
+
+## Groupe de boutons
+
+À titre d'exemple, le shortcode suivant affiche un groupe de trois boutons.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* button-group aria-label="Basic example" */>}}
+  {{</* button color="primary" href="#!" */>}}Gauche{{</* /button */>}}
+  {{</* button color="primary" href="#!" */>}}Millieu{{</* /button */>}}
+  {{</* button color="primary" href="#!" */>}}Droite{{</* /button */>}}
+{{</* /button-group */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Carte
+
+À titre d'exemple, le shortcode suivant affiche une carte empilée qui renvoie à la page [à propos]({{< ref "about" >}}). Elle inclut un en-tête personnalisé.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* card path="about" padding="3" class="col-6 mx-auto" color="body-tertiary" header="publication" footer="none" /*/>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Groupe de cartes
+
+À titre d'exemple, le shortcode suivant affiche un groupe de cartes avec trois éléments.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* card-group padding="3" gutter="3" */>}}
+    {{</* card title="Framework Bootstrap" icon="fab bootstrap" */>}}
+        Créez des sites rapides et réactifs avec Bootstrap 5. Personnalisez facilement votre site
+        avec les fichiers source Sass.
+    {{</* /card */>}}
+    {{</* card title="Recherche en texte intégral" icon="fas magnifying-glass" */>}}
+        Recherchez votre site avec FlexSearch, une bibliothèque de recherche en texte intégral
+        avec zéro dépendances.
+    {{</* /card */>}}
+    {{</* card title="Outils de développement" icon="fas code" */>}}
+        Utilisez Node Package Manager pour automatiser le processus de construction et suivre
+        les dépendances.
+    {{</* /card */>}}
+{{</* /card-group */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Carrousel
+
+À titre d'exemple, le shortcode suivant affiche un carrousel centré avec trois slides, un rapport hauteur/largeur de 16:9 et une largeur relative de 67 % sur les grands écrans.
+
+<!-- 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 -->
+
+## Réduire
+
+À titre d'exemple, le shortcode suivant affiche un bouton qui, lorsqu'il est cliqué, déclenche l'apparition ou la disparition d'un panneau.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* button collapse="collapse-1" */>}}
+    Déclencher le panneau
+{{</* /button */>}}
+
+{{</* collapse id="collapse-1" class="p-3 border rounded bg-primary-subtle" */>}}
+    Un contenu de remplacement destiné au composant de repliement. Ce panneau est initialement masqué, mais il
+    sera révélé lorsque l'utilisateur active le déclencheur correspondant.
+{{</* /collapse */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Invite de commandes
+
+Utilisez le shortcode `command` pour générer un bloc avec un invite de commandes bash par défaut.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* command */>}}
+export MY_VAR=123
+{{</* /command */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+Spécifiez `user` et `host` pour ajouter le contexte de l'utilisateur à l'invite. De plus, utilisez `(out)` pour spécifier une ligne de sortie et utilisez `\` pour indiquer une continuation de ligne.
+
+<!-- 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 -->
+
+## Documentation
+
+Utilisez le shortcode `docs` pour afficher le contenu d'un fichier `js`, `scss` ou `toml` :
+
+{{< docs name="theme-colors" file="config/_default/params.toml" >}}
+
+## Exemple
+
+Utilisez le shortcode `example` pour afficher un exemple de code et pour afficher un aperçu de la même entrée.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* command */>}}
+export MY_VAR=123
+{{</* /command */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Fichier
+
+Utilisez le shortcode `file` pour afficher et mettre en évidence le contenu complet d'un fichier d'entrée donné.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* file path="./config/_default/languages.toml" id="file-collapse-1" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Icon
+
+À titre d'exemple, les shortcodes suivants affichent une coche carrée, un logo de marque et une coche circulaire.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* fa square-check */>}}
+{{</* fab linkedin */>}}
+{{</* fas circle-check */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Image
+
+À titre d'exemple, le shortcode suivant affiche une image avec des coins arrondis et un ratio d'aspect de 21:9.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* image src="img/flowers.jpg" ratio="21x9" caption="Légende de l'image" class="rounded" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+À titre d'exemple, le shortcode suivant affiche une image vectorielle classique.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* image src="/img/logo_icon.svg" class="col-sm-6 col-lg-4" wrapper="text-center" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+À titre d'exemple, le shortcode suivant affiche une image vectorielle avec une référence de symbole.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* image src="/img/logo_var.svg#logo" class="col-sm-6 col-lg-4" wrapper="text-center" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Lien
+
+À titre d'exemple, les shortcodes suivants rendent des liens dans différents formats.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+
+- {{</* link hinode >}}Lien nommé avec les paramètres par défaut{{< /link */>}}
+- {{</* link name=hinode cue=false tab=false >}}Lien nommé s'ouvrant dans l'onglet actuel sans icône{{< /link */>}}
+- {{</* link name=hinode cue=true tab=true >}}Lien nommé s'ouvrant dans un nouvel onglet avec icône{{< /link */>}}
+- {{</* link hinode /*/>}}
+- {{</* link href="https://developer.mozilla.org" >}}Lien externe{{< /link */>}}
+- {{</* link "./projects/another-project" >}}Lien interne avec titre{{< /link */>}}
+- {{</* link url="projects/another-project" /*/>}}
+- {{</* link url="/projects/another-project" /*/>}}
+- {{</* link url="../projects/another-project" case=false /*/>}}
+- {{</* link "/about/" /*/>}}
+- {{</* link "/en/about/" /*/>}}
+- {{</* link "/en/about" >}}About (Anglais){{< /link */>}}
+- {{</* link "#image" /*/>}}
+- {{</* link "components/#map" /*/>}}
+
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Mark
+
+Utilisez le shortcode `mark` pour mettre en évidence le texte. Le contenu interne est utilisé en tant qu'entrée.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+Utilisez le shortcode `mark` pour {{</* mark >}}mettre en évidence{{< /mark */>}} un texte spécifique.
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Navigation
+
+À titre d'exemple, le shortcode suivant affiche un groupe d'onglets avec des onglets alignés verticalement.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+  {{</* nav type="pills" vertical="true" */>}}
+    {{</* nav-item header="Élément de navigation #1" show="true" */>}}
+      Voici le contenu de navigation du premier élément. Il prend en charge le contenu HTML, s'il est
+      activé dans le moteur de rendu Goldmark. L'élément est affiché en ajoutant la valeur `show` à l'argument `class`.
+    {{</* /nav-item */>}}
+    {{</* nav-item header="Élément de navigation #2" */>}}
+      Voici le contenu de navigation du deuxième élément.
+    {{</* /nav-item */>}}
+    {{</* nav-item header="Élément de navigation #3" */>}}
+      Voici le contenu de navigation du troisième élément.
+    {{</* /nav-item */>}}
+  {{</* /nav */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Barre de navigation
+
+À titre d'exemple, le shortcode suivant affiche un en-tête de navigation clair.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* navbar id="navbar-sample" path="blog" color="primary" size="md" search="false" menus="sample" title="Marque" mode="false" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Publication
+
+À titre d'exemple, le shortcode suivant affiche un bouton de publication par défaut.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* release version="v0.14.1" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Indicateur de chargement
+
+À titre d'exemple, le raccourci suivant affiche un indicateur de chargement centré.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* spinner color="info" class="text-center" */>}}
+Chargement...
+{{</* /spinner */>}}
+{{< /example>}}
+<!-- markdownlint-enable MD037 -->
+
+## Sub
+
+À titre d'exemple, le shortcode suivant affiche du texte en indice.
+
+<!-- markdownlint-disable MD037 -->
+{{< example >}}
+H{{</* sub 2 */>}}O est un liquide.
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Sup
+
+À titre d'exemple, le shortcode suivant affiche du texte en exposant.
+
+<!-- markdownlint-disable MD037 -->
+{{< example >}}
+2{{</* sup 10 */>}} équivaut à 1024.
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Chronologie
+
+À titre d'exemple, le shortcode suivant affiche une chronologie avec le fichier `data/timeline-fr.yml` en tant que données.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* timeline data="timeline-fr" background="dark" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Notification
+
+À titre d'exemple, le shortcode suivant affiche un bouton qui, lorsqu'il est cliqué, déclenche le message de notification.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* button toast="toast-example-1" */>}}
+    Affiche la notifiaction #1
+{{</* /button */>}}
+
+{{</* button toast="toast-example-2" */>}}
+    Affiche la notifiaction #1
+{{</* /button */>}}
+
+{{</* toast id="toast-example-1" header="Premier titre" */>}}
+    Ceci est le premier message de notification. Il prend en charge le `markdown`.
+{{</* /toast */>}}
+
+{{</* toast id="toast-example-2" header="Deuxième titre" */>}}
+    Ceci est le deuxième message de notification. Il prend en charge le `markdown`.
+{{</* /toast */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Infobulle
+
+À titre d'exemple, le shortcode suivant affiche une infobulle pour un lien hypertexte coloré.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* tooltip color="primary" title="Légende de l'infobulle" href="#!" */>}}Démonstration{{</* /tooltip */>}} d'une infobulle
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->

exampleSite/content/fr/blog/components.md

@@ -0,0 +1,50 @@
+---
+author: Mark Dumay
+title: Composents
+slug: composents
+date: 2023-07-21
+description: Utilisez des shortcodes pour ajouter des composants prédéfinis alimentés par des bibliothèques externes.
+tags: ["bootstrap", "shortcode"]
+thumbnail:
+  url: img/puzzle.jpg
+  author: Ryoji Iwata
+  authorURL: https://unsplash.com/@ryoji__iwata
+  origin: Unsplash
+  originURL: https://unsplash.com/photos/5siQcvSxCP8
+modules: ["katex", "leaflet", "lottie"]
+---
+
+Hinode propose plusieurs shortcodes en plus des [éléments Bootstrap]({{< relref "bootstrap-elements" >}}) courants. Consultez la [documentation officielle]({{< param "links.hinode_docs" >}}) pour plus de détails.
+
+## Animation
+
+À titre d'exemple, le shortcode suivant affiche une animation qui se déclenche au survol.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* animation data="gatin.json" auto=false hover=true class="col-6 mx-auto" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Formule (KaTeX)
+
+À titre d'exemple, le markdown suivant affiche deux formules en utilisant la bibliothèque de composition typographique KaTeX.
+
+{{< example lang="markdown" >}}
+Voici une formule en ligne $-b \pm \sqrt{b^2 - 4ac} \over 2a$.
+
+Il s'agit d'une formule non en ligne:
+
+$$x = a_0 + \frac{1}{a_1 + \frac{1}{a_2 + \frac{1}{a_3 + a_4}}}$$  
+$$\forall x \in X, \quad \exists y \leq \epsilon$$
+{{< /example >}}
+
+## Map
+
+À titre d'exemple, le shortcode suivant affiche une carte interactive de la ville d'Amsterdam.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* map lat=52.377 long=4.90 zoom=13 popup="Gare centrale d'Amsterdam" popup-lat=52.378062 popup-long=4.900562 */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->

exampleSite/content/nl/_index.md

@@ -1,14 +1,15 @@
 ---
 author: Mark Dumay
 title: Welkom bij Hinode!
+description: Een documentatie en blog thema voor Hugo gebaseerd op Bootstrap 5.
 thumbnail:
     url: /img/sunrise.jpg
     author: Harris Vo
     authorURL: https://unsplash.com/@hoanvokim
     origin: https://unsplash.com/photos/ZX6BPboJrYk
     originName: Unsplash
+actions:
+  about:
+    url: "over-mij"
+    title: "Over mij"
 ---
-
-Een documentatie en blog thema voor Hugo gebaseerd op Bootstrap 5.
-
-{{< button href="over-mij" >}}Over mij{{< /button>}}

exampleSite/content/nl/about.md

@@ -7,30 +7,20 @@ updated: 2023-08-02
 showComments: false
 ---
 
-<p class="text-center"><svg class="img-fluid w-50"><use href="/img/logo_var.svg#logo"></use></svg></p>
 
-<section class="section section-sm mt-5">
-  <div class="container-fluid">
-    <div class="row justify-content-center text-center">
-    <div class="row justify-content-center text-center">
-      <div class="col-lg-4">
-        {{< icon fab bootstrap fa-2xl >}}
-        <h2 class="h4">Bootstrap raamwerk</h2>
-        <p>Bouw snelle websites geschikt voor mobiele en desktop schermen met Bootstrap 5. Pas de site eenvoudig aan met bronbestanden in Sass.</p>
-      </div>
-      <div class="col-lg-4">
-        {{< icon fas magnifying-glass fa-2xl >}}
-        <h2 class="h4">Volledig doorzoekbaar</h2>
-        <p>Doorzoek je site met FlexSearch, een software bibliotheek zonder afhankelijkheden.</p>
-      </div>
-      <div class="col-lg-4">
-        {{< icon fas code fa-2xl >}}
-        <h2 class="h4">Ontwikkelgereedschap</h2>
-        <p>Gebruik Node Package Manager om het bouwproces inclusief versiebeheer volledig te automatiseren.</p>
-      </div>
-    </div>
-  </div>
-</section>
+{{< image src="/img/logo_var.svg#logo" class="img-fluid w-50" wrapper="text-center" >}}
+
+{{< card-group class="text-center border-0" padding="3" >}}
+    {{< card title="Bootstrap raamwerk" icon="fab bootstrap" >}}
+        Bouw snelle websites geschikt voor mobiele en desktop schermen met Bootstrap 5. Pas de site eenvoudig aan met bronbestanden in Sass.
+    {{< /card >}}
+    {{< card title="Volledig doorzoekbaar" icon="fas magnifying-glass" >}}
+        Doorzoek je site met FlexSearch, een software bibliotheek zonder afhankelijkheden.
+    {{< /card >}}
+    {{< card title="Ontwikkelgereedschap" icon="fas code" >}}
+        Gebruik Node Package Manager om het bouwproces inclusief versiebeheer volledig te automatiseren.
+    {{< /card >}}
+{{< /card-group >}}
 
 Overige functies:
 
@@ -43,8 +33,3 @@ Overige functies:
 * Optimale zoekresultaten, met 100 punten voor SEO volgens [PageSpeed Insights]({{< param "links.pagespeed" >}})
 * Veilige communicatie, met een score van A+ volgens [Mozilla Observatory]({{< param "links.observatory" >}})
 {.tickmark}
-
-Hinode is geinspireerd door de volgende thema's:
-
-* [Blist](https://github.com/apvarun/blist-hugo-theme) - een blog thema voor Hugo op basis van Tailwind CSS.
-* [Doks](https://github.com/h-enk/doks) - een Hugo thema voor het bouwen van veilige, snelle, en SEO-geoptimaliseerde documentatiesites, die je eenvoudig kunt actualiseren en aanpassen.

exampleSite/data/abbr.yml

@@ -0,0 +1,11 @@
+- id: css
+  long: "Cascading Style Sheets"
+
+- id: html
+  long: "HyperText Markup Language"
+
+- id: svg
+  long: "Scalable Vector Graphics"
+
+- id: ci/cd
+  long: "Continuous Integration/Continuous Deployment"

exampleSite/data/timeline-fr.yml

@@ -0,0 +1,35 @@
+# This file holds all menu entries for the docs sidebar
+
+- title: Lancement de produit
+  icon: fas rocket
+  color: primary
+  date: 2023-07-01
+  url: https://github.com/gethinode/hinode/releases/tag/v0.15.2
+  content:
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.
+
+- title: Prise en charge I18N
+  icon: fas globe
+  color: success
+  date: 2023-05-06
+  url: v0.14.0
+  content:
+    Lorem ipsum dolor sit amet.
+
+- title: Nouvelle fonctionnalité
+  icon: fas house
+  color: warning
+  date: 2023-02-04
+  url: v0.8.1
+  content:
+    Cupiditate ducimus officiis quod!
+
+- title: Version bêta
+  icon: fas heart
+  color: info
+  date: 2022-11-30
+  # url: v0.1
+  content:
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.

exampleSite/go.mod

@@ -3,9 +3,4 @@ module github.com/gethinode/hinode-test
 go 1.19
 
 require (
-	github.com/gethinode/mod-bootstrap v1.1.1 // indirect
-	github.com/gethinode/mod-flexsearch v1.4.0 // indirect
-	github.com/gethinode/mod-fontawesome v1.2.5 // indirect
-	github.com/gethinode/mod-katex v1.0.2 // indirect
-	github.com/gethinode/mod-leaflet v0.3.4 // indirect
 )

exampleSite/go.sum

@@ -1,16 +1,51 @@
 github.com/gethinode/mod-bootstrap v1.1.1 h1:Tx4M5hGVOFrEaxnUONDAm6N9xuRi5UphKlT7F26HujU=
 github.com/gethinode/mod-bootstrap v1.1.1/go.mod h1:DcpPc2cNaXUPGEvhD7npuEEPA7573NvakTlrwFbyjr8=
+github.com/gethinode/mod-bootstrap v1.2.0 h1:JkTcImU3qpi25WgKvUxUYiMoiXtrxrG+Wf/utRB5UbU=
+github.com/gethinode/mod-bootstrap v1.2.0/go.mod h1:DcpPc2cNaXUPGEvhD7npuEEPA7573NvakTlrwFbyjr8=
+github.com/gethinode/mod-bootstrap v1.2.1 h1:z54dgsbhShhlri+X77Z+yLrg0wz/f8C8ojA/wnlhsJc=
+github.com/gethinode/mod-bootstrap v1.2.1/go.mod h1:DcpPc2cNaXUPGEvhD7npuEEPA7573NvakTlrwFbyjr8=
 github.com/gethinode/mod-flexsearch v1.2.0 h1:SSMpWzK9SMbi9QRYfil9PJZLLWWLHWzlTc69UxtSWAA=
 github.com/gethinode/mod-flexsearch v1.2.0/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
 github.com/gethinode/mod-flexsearch v1.3.0 h1:RbfEDw219Y1rOVp9lHmy5ePdF9lyPalDu2J5oVeejrU=
 github.com/gethinode/mod-flexsearch v1.3.0/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
 github.com/gethinode/mod-flexsearch v1.4.0 h1:5e/NVRLyWzUZ9fO/fNsM5o+O7nw+xyln2rfEOtbgfWc=
 github.com/gethinode/mod-flexsearch v1.4.0/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
+github.com/gethinode/mod-flexsearch v1.4.1 h1:z+GKvhJ4v6BsZsWVZRgbO9WcmSZEVUkb3Q9a09yXtd8=
+github.com/gethinode/mod-flexsearch v1.4.1/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
+github.com/gethinode/mod-flexsearch v1.5.1 h1:9fYlnHgiEXckL0EoC0zlSNO7BWZf5yiOroSWT13Kphc=
+github.com/gethinode/mod-flexsearch v1.5.1/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
 github.com/gethinode/mod-fontawesome v1.2.4 h1:SqE3CQ+boaBIhrVh3MPu4nz0uoHPfEH5t60nNY1CfsI=
 github.com/gethinode/mod-fontawesome v1.2.4/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
 github.com/gethinode/mod-fontawesome v1.2.5 h1:RqkLRj6+s+gM4nKd0IwNMMDA8cRmxfp0fxkVH4FdAGU=
 github.com/gethinode/mod-fontawesome v1.2.5/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-fontawesome v1.3.0 h1:oudeDBlAKu8vqYxumWuq5SG5F5itm33NgTrBLgvPulQ=
+github.com/gethinode/mod-fontawesome v1.3.0/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-fontawesome v1.3.1 h1:EdnBuG2B+bi06OcYmcL1NfSxHpRMEGu8TXUqEEpVH4g=
+github.com/gethinode/mod-fontawesome v1.3.1/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-fontawesome v1.3.2 h1:qLJSbAFR2T33BuBtC2Iulm9wZql3cy7AhXjxc2YGzBU=
+github.com/gethinode/mod-fontawesome v1.3.2/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-fontawesome v1.4.0 h1:JfmVYwQl19jmZxgxY64yvGqJAAEiFkKf2dbZ5Iv08Qw=
+github.com/gethinode/mod-fontawesome v1.4.0/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-fontawesome v1.5.0 h1:3mW5dnWauuF9wSWXNIY+PPgTNPlc/xQOQoG7XGic1Yk=
+github.com/gethinode/mod-fontawesome v1.5.0/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-katex v1.0.1/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
 github.com/gethinode/mod-katex v1.0.2 h1:pIG4n3qLl/IVe7BEiwn+GL8r5lOCtF6FDxlcrPKdAXk=
 github.com/gethinode/mod-katex v1.0.2/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
+github.com/gethinode/mod-katex v1.0.3 h1:fvlUWqcUQqv2zRNM2kfmJ6GhXA816Tl1nfVrUkmBStI=
+github.com/gethinode/mod-katex v1.0.3/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
 github.com/gethinode/mod-leaflet v0.3.4 h1:oY+YQ0JiJuhFQNrk9XgFdg0NMsTUQPXNfnILp4ia4r4=
 github.com/gethinode/mod-leaflet v0.3.4/go.mod h1:uGggt87x4Fw7wBoJpSiUvNkYg+s/Ujne7klAX2rxMRk=
+github.com/gethinode/mod-leaflet v0.3.5 h1:69Bv/6zRXhbcTzo7TMr58h3ry47srHRpM1k81LrLbYU=
+github.com/gethinode/mod-leaflet v0.3.5/go.mod h1:uGggt87x4Fw7wBoJpSiUvNkYg+s/Ujne7klAX2rxMRk=
+github.com/gethinode/mod-lottie v1.0.0 h1:1CUZMcgN5FAyjjyuP3qkaOQ6M5sv6HUAbosW4sIT5VE=
+github.com/gethinode/mod-lottie v1.0.0/go.mod h1:erRCgSL2FCfKHI0jQbSpM+g0jXl7SjKVJrh7kWGteKs=
+github.com/gethinode/mod-lottie v1.0.1 h1:+IE7xtnSVQpJS56oBJq9RWKZeFEfxrOZAqE3BSrS/u0=
+github.com/gethinode/mod-lottie v1.0.1/go.mod h1:erRCgSL2FCfKHI0jQbSpM+g0jXl7SjKVJrh7kWGteKs=
+github.com/gethinode/mod-lottie v1.0.2 h1:QM/PJqEl1UhNNoPx6y7pVtwev/mDxUyWNHLqDB76YzI=
+github.com/gethinode/mod-lottie v1.0.2/go.mod h1:erRCgSL2FCfKHI0jQbSpM+g0jXl7SjKVJrh7kWGteKs=
+github.com/gethinode/mod-lottie v1.1.0 h1:KnfOQ45xdv1tpsKCkF5OiE3QuT29ycppBfY6o+rWl/4=
+github.com/gethinode/mod-lottie v1.1.0/go.mod h1:erRCgSL2FCfKHI0jQbSpM+g0jXl7SjKVJrh7kWGteKs=
+github.com/gethinode/mod-lottie v1.2.0 h1:9S0Y4PlEO66dIvFxayatmDEf8WWxqbLNLi4z563i2gM=
+github.com/gethinode/mod-lottie v1.2.0/go.mod h1:erRCgSL2FCfKHI0jQbSpM+g0jXl7SjKVJrh7kWGteKs=
+github.com/gethinode/mod-lottie v1.3.0 h1:vQ8CXkjdp2IeFskTzu+ZnKOEio8GtN08urVK+oCH81E=
+github.com/gethinode/mod-lottie v1.3.0/go.mod h1:erRCgSL2FCfKHI0jQbSpM+g0jXl7SjKVJrh7kWGteKs=

exampleSite/hugo_stats.json

@@ -0,0 +1,510 @@
+{
+  "htmlElements": {
+    "tags": [
+      "a",
+      "abbr",
+      "body",
+      "br",
+      "button",
+      "code",
+      "div",
+      "em",
+      "figcaption",
+      "figure",
+      "footer",
+      "form",
+      "h2",
+      "head",
+      "hr",
+      "html",
+      "i",
+      "img",
+      "input",
+      "li",
+      "link",
+      "mark",
+      "meta",
+      "nav",
+      "nil",
+      "noscript",
+      "ol",
+      "p",
+      "path",
+      "pre",
+      "script",
+      "small",
+      "span",
+      "strong",
+      "sub",
+      "sup",
+      "svg",
+      "time",
+      "title",
+      "ul",
+      "use"
+    ],
+    "classes": [
+      "accordion",
+      "accordion-body",
+      "accordion-button",
+      "accordion-collapse",
+      "accordion-header",
+      "accordion-item",
+      "active",
+      "alert",
+      "alert-danger",
+      "alert-dismissible",
+      "align-content-center",
+      "align-items-center",
+      "align-items-end",
+      "align-items-start",
+      "align-middle",
+      "align-self-center",
+      "anchor",
+      "badge",
+      "bg-body",
+      "bg-body-tertiary",
+      "bg-danger",
+      "bg-opacity-10",
+      "bg-primary",
+      "bg-primary-subtle",
+      "bi",
+      "bi-activity",
+      "border",
+      "border-0",
+      "border-1",
+      "border-bottom",
+      "border-end",
+      "border-none",
+      "border-start",
+      "border-top",
+      "bottom-0",
+      "bottom-bar",
+      "breadcrumb",
+      "breadcrumb-item",
+      "btn",
+      "btn-close",
+      "btn-group",
+      "btn-light",
+      "btn-outline-primary",
+      "btn-outline-secondary",
+      "btn-primary",
+      "btn-secondary",
+      "btn-sm",
+      "btn-social",
+      "card",
+      "card-body",
+      "card-body-link",
+      "card-body-margin",
+      "card-emphasize",
+      "card-icon",
+      "card-img-top",
+      "card-img-wrap",
+      "card-text",
+      "card-title",
+      "card-zoom",
+      "carousel",
+      "carousel-caption",
+      "carousel-control-next",
+      "carousel-control-next-icon",
+      "carousel-control-prev",
+      "carousel-control-prev-icon",
+      "carousel-indicators",
+      "carousel-inner",
+      "carousel-item",
+      "chroma",
+      "col",
+      "col-12",
+      "col-3",
+      "col-4",
+      "col-6",
+      "col-8",
+      "col-9",
+      "col-lg-4",
+      "col-lg-8",
+      "col-md-10",
+      "col-md-2",
+      "col-md-4",
+      "col-md-8",
+      "col-md-auto",
+      "col-sm-12",
+      "col-sm-3",
+      "col-sm-6",
+      "collapse",
+      "collapsed",
+      "container",
+      "container-fluid",
+      "container-xxl",
+      "custom",
+      "d-block",
+      "d-flex",
+      "d-grid",
+      "d-inline",
+      "d-inline-flex",
+      "d-md-block",
+      "d-md-flex",
+      "d-md-none",
+      "d-none",
+      "d-none-dark",
+      "d-none-light",
+      "d-sm-block",
+      "d-sm-none",
+      "display-1",
+      "display-4",
+      "dropdown",
+      "dropdown-divider-bg",
+      "dropdown-item",
+      "dropdown-menu",
+      "dropdown-menu-end",
+      "dropdown-toggle",
+      "emphasis",
+      "emphasis-dark",
+      "end-0",
+      "fa",
+      "fa-10x",
+      "fa-2x",
+      "fa-2xs",
+      "fa-4x",
+      "fa-activity",
+      "fa-arrow-left",
+      "fa-arrow-right",
+      "fa-bootstrap",
+      "fa-circle-check",
+      "fa-circle-half-stroke",
+      "fa-code",
+      "fa-docker",
+      "fa-ellipsis",
+      "fa-face-frown",
+      "fa-facebook",
+      "fa-fluid",
+      "fa-fw",
+      "fa-github",
+      "fa-globe",
+      "fa-heart",
+      "fa-house",
+      "fa-link",
+      "fa-linkedin",
+      "fa-magnifying-glass",
+      "fa-medium",
+      "fa-moon",
+      "fa-rocket",
+      "fa-share-nodes",
+      "fa-sort",
+      "fa-square-check",
+      "fa-sun",
+      "fa-up-right-from-square",
+      "fa-whatsapp",
+      "fa-wrapper",
+      "fa-x-twitter",
+      "fab",
+      "fade",
+      "fas",
+      "feature",
+      "figure-caption",
+      "fixed-top",
+      "flex-column",
+      "flex-fill",
+      "flex-grow-1",
+      "flex-wrap",
+      "font-monospace",
+      "footer",
+      "form-control",
+      "fs-3",
+      "fs-5",
+      "fw-30",
+      "fw-bold",
+      "fw-semibold",
+      "g-0",
+      "g-3",
+      "g-4",
+      "gap-1",
+      "gap-2",
+      "gradient",
+      "h-100",
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6",
+      "heading",
+      "highlight",
+      "hstack",
+      "img-fluid",
+      "img-wrap",
+      "invisible",
+      "is-search",
+      "justify-content-between",
+      "justify-content-center",
+      "justify-content-end",
+      "justify-content-start",
+      "lead",
+      "leaflet-map",
+      "link-bg-body",
+      "link-bg-body-tertiary",
+      "link-bg-footer",
+      "link-primary",
+      "link-secondary",
+      "link-success",
+      "link-warning",
+      "lottie-animation",
+      "m-0",
+      "main-content",
+      "main-nav-toggler",
+      "mb-0",
+      "mb-3",
+      "mb-5",
+      "mb-lg-5",
+      "me-3",
+      "me-auto",
+      "middle-bar",
+      "min-vh-100",
+      "ms-1",
+      "ms-3",
+      "ms-auto",
+      "ms-md-3",
+      "mt-2",
+      "mt-3",
+      "mt-5",
+      "mt-auto",
+      "multi-docs-collapse-15",
+      "multi-file-collapse-1",
+      "mx-auto",
+      "mx-md-0",
+      "mx-md-2",
+      "my-2",
+      "my-auto",
+      "my-md-0",
+      "my-md-auto",
+      "nav",
+      "nav-item",
+      "nav-link",
+      "nav-pills",
+      "nav-tabs",
+      "navbar",
+      "navbar-brand",
+      "navbar-collapse",
+      "navbar-contrast",
+      "navbar-expand-md",
+      "navbar-fixed-top",
+      "navbar-nav",
+      "navbar-nav-scroll",
+      "navbar-toggler",
+      "next",
+      "no-js",
+      "order-0",
+      "order-1",
+      "order-first",
+      "order-md-0",
+      "order-md-1",
+      "p-0",
+      "p-1",
+      "p-2",
+      "p-3",
+      "p-4",
+      "pb-2",
+      "pb-3",
+      "pb-4",
+      "pb-5",
+      "pb-md-0",
+      "pe-3",
+      "position-absolute",
+      "position-fixed",
+      "position-relative",
+      "post-date",
+      "previous",
+      "ps-1",
+      "ps-3",
+      "ps-xl-3",
+      "pt-4",
+      "pt-5",
+      "pt-md-3",
+      "px-4",
+      "px-xxl-0",
+      "py-1",
+      "py-2",
+      "py-3",
+      "py-md-1",
+      "ratio",
+      "ratio-16x9",
+      "rounded",
+      "rounded-2",
+      "rounded-bottom",
+      "rounded-pill",
+      "rounded-top",
+      "row",
+      "row-cols-1",
+      "row-cols-2",
+      "row-cols-md-2",
+      "row-cols-md-3",
+      "row-cols-sm-2",
+      "row-cols-sm-3",
+      "search",
+      "search-input",
+      "search-suggestions",
+      "shadow",
+      "show",
+      "slide",
+      "small",
+      "spinner-border",
+      "start-100",
+      "sticky-top",
+      "stretched-link",
+      "svg-inline--fa",
+      "switch-mode-collapsed",
+      "syntax-highlight",
+      "tab-content",
+      "tab-pane",
+      "tag-link",
+      "text-bg-body",
+      "text-bg-body-tertiary",
+      "text-bg-info",
+      "text-bg-primary",
+      "text-bg-secondary",
+      "text-bg-success",
+      "text-bg-warning",
+      "text-body",
+      "text-body-secondary",
+      "text-break",
+      "text-center",
+      "text-decoration-none",
+      "text-end",
+      "text-info",
+      "text-muted",
+      "text-nowrap",
+      "text-right",
+      "text-secondary",
+      "text-sm-start",
+      "text-start",
+      "text-uppercase",
+      "theme-icon",
+      "theme-icon-active",
+      "tickmark",
+      "timeline",
+      "timeline-bg-dark",
+      "timeline-connector-end",
+      "timeline-connector-start",
+      "timeline-description-text-end",
+      "timeline-description-text-start",
+      "timeline-dot",
+      "timeline-info",
+      "timeline-panel-end",
+      "timeline-panel-start",
+      "timeline-primary",
+      "timeline-semi-circle-end",
+      "timeline-semi-circle-start",
+      "timeline-sm",
+      "timeline-success",
+      "timeline-warning",
+      "toast",
+      "toast-body",
+      "toast-container",
+      "toast-header",
+      "toc",
+      "toc-button",
+      "toc-panel",
+      "toc-sidebar",
+      "toggler-icon",
+      "top-0",
+      "top-bar",
+      "translate-middle",
+      "visually-hidden",
+      "vr",
+      "w-100",
+      "w-50"
+    ],
+    "ids": [
+      "-theme",
+      "-theme-collapsed",
+      "TableOfContents",
+      "abbr",
+      "accordion",
+      "accordion-0",
+      "accordion-0-heading-0",
+      "accordion-0-heading-1",
+      "accordion-0-heading-2",
+      "accordion-0-item-0",
+      "accordion-0-item-1",
+      "accordion-0-item-2",
+      "accordéon",
+      "alert",
+      "alerte",
+      "animation",
+      "badge",
+      "barre-de-navigation",
+      "blog",
+      "body-docs-collapse-15",
+      "body-file-collapse-1",
+      "bouton",
+      "breadcrumb",
+      "btn-webshare",
+      "button",
+      "button-group",
+      "card",
+      "card-group",
+      "carousel",
+      "carousel-0",
+      "carrousel",
+      "carte",
+      "chronologie",
+      "collapse",
+      "collapse-1",
+      "command-prompt",
+      "docs",
+      "documentation",
+      "example",
+      "exemple",
+      "fichier",
+      "fil-dariane",
+      "file",
+      "footer-docs-collapse-15",
+      "footer-file-collapse-1",
+      "formula-katex",
+      "formule-katex",
+      "groupe-de-boutons",
+      "groupe-de-cartes",
+      "icon",
+      "image",
+      "indicateur-de-chargement",
+      "infobulle",
+      "invite-de-commandes",
+      "leaflet-map-0",
+      "lien",
+      "link",
+      "lottie-animation-0",
+      "map",
+      "mark",
+      "nav",
+      "nav-0",
+      "nav-0-0",
+      "nav-0-1",
+      "nav-0-2",
+      "nav-0-btn-0",
+      "nav-0-btn-1",
+      "nav-0-btn-2",
+      "navbar",
+      "navbar-0-collapse",
+      "navbar-sample-collapse",
+      "navigation",
+      "notification",
+      "projecten",
+      "projects",
+      "projets",
+      "publication",
+      "release",
+      "réduire",
+      "spinner",
+      "sub",
+      "sup",
+      "timeline",
+      "toast",
+      "toast-container",
+      "toast-copied-code-message",
+      "toast-example-1",
+      "toast-example-2",
+      "toast-message-email-4",
+      "toc-collapse",
+      "tooltip"
+    ]
+  }
+}

go.mod

@@ -3,9 +3,10 @@ module github.com/gethinode/hinode
 go 1.19
 
 require (
-	github.com/gethinode/mod-bootstrap v1.1.1 // indirect
-	github.com/gethinode/mod-flexsearch v1.4.0 // indirect
-	github.com/gethinode/mod-fontawesome v1.2.5 // indirect
-	github.com/gethinode/mod-katex v1.0.2 // indirect
-	github.com/gethinode/mod-leaflet v0.3.4 // indirect
+	github.com/gethinode/mod-bootstrap v1.2.1 // indirect
+	github.com/gethinode/mod-flexsearch v1.5.1 // indirect
+	github.com/gethinode/mod-fontawesome v1.5.0 // indirect
+	github.com/gethinode/mod-katex v1.0.3 // indirect
+	github.com/gethinode/mod-leaflet v0.3.5 // indirect
+	github.com/gethinode/mod-lottie v1.3.0 // indirect
 )

go.sum

@@ -4,6 +4,10 @@ github.com/gethinode/mod-bootstrap v1.1.0 h1:BbalsW8kmFhv+J+dcc41TGcjIlM/p69AB0h
 github.com/gethinode/mod-bootstrap v1.1.0/go.mod h1:DcpPc2cNaXUPGEvhD7npuEEPA7573NvakTlrwFbyjr8=
 github.com/gethinode/mod-bootstrap v1.1.1 h1:Tx4M5hGVOFrEaxnUONDAm6N9xuRi5UphKlT7F26HujU=
 github.com/gethinode/mod-bootstrap v1.1.1/go.mod h1:DcpPc2cNaXUPGEvhD7npuEEPA7573NvakTlrwFbyjr8=
+github.com/gethinode/mod-bootstrap v1.2.0 h1:JkTcImU3qpi25WgKvUxUYiMoiXtrxrG+Wf/utRB5UbU=
+github.com/gethinode/mod-bootstrap v1.2.0/go.mod h1:DcpPc2cNaXUPGEvhD7npuEEPA7573NvakTlrwFbyjr8=
+github.com/gethinode/mod-bootstrap v1.2.1 h1:z54dgsbhShhlri+X77Z+yLrg0wz/f8C8ojA/wnlhsJc=
+github.com/gethinode/mod-bootstrap v1.2.1/go.mod h1:DcpPc2cNaXUPGEvhD7npuEEPA7573NvakTlrwFbyjr8=
 github.com/gethinode/mod-flexsearch v1.0.1 h1:FJkRsUzSnQTXl3MWCigT4E6vfff870UWTnkGqaDGIhA=
 github.com/gethinode/mod-flexsearch v1.0.1/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
 github.com/gethinode/mod-flexsearch v1.1.0 h1:7BCMyQDlYlskNXuazt8Jg/jg9WREexu2xVkYqThkAX4=
@@ -22,6 +26,10 @@ github.com/gethinode/mod-flexsearch v1.3.0 h1:RbfEDw219Y1rOVp9lHmy5ePdF9lyPalDu2
 github.com/gethinode/mod-flexsearch v1.3.0/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
 github.com/gethinode/mod-flexsearch v1.4.0 h1:5e/NVRLyWzUZ9fO/fNsM5o+O7nw+xyln2rfEOtbgfWc=
 github.com/gethinode/mod-flexsearch v1.4.0/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
+github.com/gethinode/mod-flexsearch v1.4.1 h1:z+GKvhJ4v6BsZsWVZRgbO9WcmSZEVUkb3Q9a09yXtd8=
+github.com/gethinode/mod-flexsearch v1.4.1/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
+github.com/gethinode/mod-flexsearch v1.5.1 h1:9fYlnHgiEXckL0EoC0zlSNO7BWZf5yiOroSWT13Kphc=
+github.com/gethinode/mod-flexsearch v1.5.1/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
 github.com/gethinode/mod-fontawesome v1.0.2 h1:ZSK6D20/w4y5GnfYfTBB58uHD0ChIfkpKfRGwioS9rg=
 github.com/gethinode/mod-fontawesome v1.0.2/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
 github.com/gethinode/mod-fontawesome v1.1.0 h1:rsDzUI+3ZlS/do2ff3ne8/z3KwHeysmuA+WsXlumXXk=
@@ -38,12 +46,24 @@ github.com/gethinode/mod-fontawesome v1.2.4 h1:SqE3CQ+boaBIhrVh3MPu4nz0uoHPfEH5t
 github.com/gethinode/mod-fontawesome v1.2.4/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
 github.com/gethinode/mod-fontawesome v1.2.5 h1:RqkLRj6+s+gM4nKd0IwNMMDA8cRmxfp0fxkVH4FdAGU=
 github.com/gethinode/mod-fontawesome v1.2.5/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-fontawesome v1.3.0 h1:oudeDBlAKu8vqYxumWuq5SG5F5itm33NgTrBLgvPulQ=
+github.com/gethinode/mod-fontawesome v1.3.0/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-fontawesome v1.3.1 h1:EdnBuG2B+bi06OcYmcL1NfSxHpRMEGu8TXUqEEpVH4g=
+github.com/gethinode/mod-fontawesome v1.3.1/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-fontawesome v1.3.2 h1:qLJSbAFR2T33BuBtC2Iulm9wZql3cy7AhXjxc2YGzBU=
+github.com/gethinode/mod-fontawesome v1.3.2/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-fontawesome v1.4.0 h1:JfmVYwQl19jmZxgxY64yvGqJAAEiFkKf2dbZ5Iv08Qw=
+github.com/gethinode/mod-fontawesome v1.4.0/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-fontawesome v1.5.0 h1:3mW5dnWauuF9wSWXNIY+PPgTNPlc/xQOQoG7XGic1Yk=
+github.com/gethinode/mod-fontawesome v1.5.0/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
 github.com/gethinode/mod-katex v1.0.0 h1:me/3dIIZBkfk1mRIFt8QiAGYwYDoSG5bc2hHRtIutFc=
 github.com/gethinode/mod-katex v1.0.0/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
 github.com/gethinode/mod-katex v1.0.1 h1:809QUztxmKgMNchU+v03iMO7Ma+ISc3ZzhXYauc21rs=
 github.com/gethinode/mod-katex v1.0.1/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
 github.com/gethinode/mod-katex v1.0.2 h1:pIG4n3qLl/IVe7BEiwn+GL8r5lOCtF6FDxlcrPKdAXk=
 github.com/gethinode/mod-katex v1.0.2/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
+github.com/gethinode/mod-katex v1.0.3 h1:fvlUWqcUQqv2zRNM2kfmJ6GhXA816Tl1nfVrUkmBStI=
+github.com/gethinode/mod-katex v1.0.3/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
 github.com/gethinode/mod-leaflet v0.2.3 h1:QQI4h+IH0jZ7fx4q0um2YIEiYBoW3OAfW8qHzbRCDPk=
 github.com/gethinode/mod-leaflet v0.2.3/go.mod h1:uGggt87x4Fw7wBoJpSiUvNkYg+s/Ujne7klAX2rxMRk=
 github.com/gethinode/mod-leaflet v0.3.1 h1:H5MaOa+BB1KuVw7abTqfIn/SNzzRsAyx/WQoSe+2Ykc=
@@ -52,3 +72,17 @@ github.com/gethinode/mod-leaflet v0.3.3 h1:isnjja6VRFvVWBatYSouh46TXSJg2C4/E2BQT
 github.com/gethinode/mod-leaflet v0.3.3/go.mod h1:uGggt87x4Fw7wBoJpSiUvNkYg+s/Ujne7klAX2rxMRk=
 github.com/gethinode/mod-leaflet v0.3.4 h1:oY+YQ0JiJuhFQNrk9XgFdg0NMsTUQPXNfnILp4ia4r4=
 github.com/gethinode/mod-leaflet v0.3.4/go.mod h1:uGggt87x4Fw7wBoJpSiUvNkYg+s/Ujne7klAX2rxMRk=
+github.com/gethinode/mod-leaflet v0.3.5 h1:69Bv/6zRXhbcTzo7TMr58h3ry47srHRpM1k81LrLbYU=
+github.com/gethinode/mod-leaflet v0.3.5/go.mod h1:uGggt87x4Fw7wBoJpSiUvNkYg+s/Ujne7klAX2rxMRk=
+github.com/gethinode/mod-lottie v1.0.0 h1:1CUZMcgN5FAyjjyuP3qkaOQ6M5sv6HUAbosW4sIT5VE=
+github.com/gethinode/mod-lottie v1.0.0/go.mod h1:erRCgSL2FCfKHI0jQbSpM+g0jXl7SjKVJrh7kWGteKs=
+github.com/gethinode/mod-lottie v1.0.1 h1:+IE7xtnSVQpJS56oBJq9RWKZeFEfxrOZAqE3BSrS/u0=
+github.com/gethinode/mod-lottie v1.0.1/go.mod h1:erRCgSL2FCfKHI0jQbSpM+g0jXl7SjKVJrh7kWGteKs=
+github.com/gethinode/mod-lottie v1.0.2 h1:QM/PJqEl1UhNNoPx6y7pVtwev/mDxUyWNHLqDB76YzI=
+github.com/gethinode/mod-lottie v1.0.2/go.mod h1:erRCgSL2FCfKHI0jQbSpM+g0jXl7SjKVJrh7kWGteKs=
+github.com/gethinode/mod-lottie v1.1.0 h1:KnfOQ45xdv1tpsKCkF5OiE3QuT29ycppBfY6o+rWl/4=
+github.com/gethinode/mod-lottie v1.1.0/go.mod h1:erRCgSL2FCfKHI0jQbSpM+g0jXl7SjKVJrh7kWGteKs=
+github.com/gethinode/mod-lottie v1.2.0 h1:9S0Y4PlEO66dIvFxayatmDEf8WWxqbLNLi4z563i2gM=
+github.com/gethinode/mod-lottie v1.2.0/go.mod h1:erRCgSL2FCfKHI0jQbSpM+g0jXl7SjKVJrh7kWGteKs=
+github.com/gethinode/mod-lottie v1.3.0 h1:vQ8CXkjdp2IeFskTzu+ZnKOEio8GtN08urVK+oCH81E=
+github.com/gethinode/mod-lottie v1.3.0/go.mod h1:erRCgSL2FCfKHI0jQbSpM+g0jXl7SjKVJrh7kWGteKs=

hugo_stats.json

@@ -0,0 +1,180 @@
+{
+  "htmlElements": {
+    "tags": [
+      "a",
+      "body",
+      "button",
+      "div",
+      "footer",
+      "form",
+      "head",
+      "html",
+      "img",
+      "input",
+      "li",
+      "link",
+      "meta",
+      "nav",
+      "p",
+      "path",
+      "script",
+      "small",
+      "span",
+      "strong",
+      "svg",
+      "title",
+      "ul"
+    ],
+    "classes": [
+      "active",
+      "align-content-center",
+      "align-items-center",
+      "align-self-center",
+      "bg-body",
+      "bg-opacity-10",
+      "bg-primary",
+      "bottom-0",
+      "bottom-bar",
+      "btn",
+      "btn-close",
+      "btn-primary",
+      "col",
+      "col-12",
+      "col-6",
+      "col-md-2",
+      "col-md-4",
+      "col-md-8",
+      "col-sm-12",
+      "collapse",
+      "collapsed",
+      "container-fluid",
+      "container-xxl",
+      "d-flex",
+      "d-inline",
+      "d-md-block",
+      "d-md-none",
+      "d-none",
+      "display-1",
+      "display-4",
+      "dropdown",
+      "dropdown-item",
+      "dropdown-menu",
+      "dropdown-menu-end",
+      "dropdown-toggle",
+      "emphasis",
+      "end-0",
+      "fa",
+      "fa-10x",
+      "fa-2x",
+      "fa-book-open",
+      "fa-circle-half-stroke",
+      "fa-ellipsis",
+      "fa-face-frown",
+      "fa-fw",
+      "fa-github",
+      "fa-linkedin",
+      "fa-medium",
+      "fa-moon",
+      "fa-sun",
+      "fab",
+      "fas",
+      "feature",
+      "flex-column",
+      "flex-fill",
+      "flex-grow-1",
+      "flex-wrap",
+      "footer",
+      "form-control",
+      "fs-3",
+      "fs-5",
+      "fw-30",
+      "fw-bold",
+      "hstack",
+      "img-fluid",
+      "img-wrap",
+      "invisible",
+      "is-search",
+      "justify-content-center",
+      "justify-content-end",
+      "justify-content-start",
+      "link-bg-footer",
+      "link-secondary",
+      "main-content",
+      "main-nav-toggler",
+      "me-auto",
+      "middle-bar",
+      "min-vh-100",
+      "ms-auto",
+      "ms-md-3",
+      "mt-3",
+      "mt-5",
+      "mx-auto",
+      "mx-md-0",
+      "my-auto",
+      "my-md-auto",
+      "nav-item",
+      "nav-link",
+      "navbar",
+      "navbar-brand",
+      "navbar-collapse",
+      "navbar-expand-md",
+      "navbar-nav",
+      "navbar-toggler",
+      "no-js",
+      "order-0",
+      "order-1",
+      "order-md-0",
+      "order-md-1",
+      "p-0",
+      "p-2",
+      "p-3",
+      "p-4",
+      "pb-4",
+      "pb-md-0",
+      "position-fixed",
+      "position-relative",
+      "ps-1",
+      "pt-4",
+      "pt-5",
+      "pt-md-3",
+      "px-4",
+      "px-xxl-0",
+      "py-3",
+      "rounded",
+      "row",
+      "row-cols-1",
+      "row-cols-2",
+      "row-cols-md-2",
+      "row-cols-sm-2",
+      "row-cols-sm-3",
+      "search",
+      "search-input",
+      "search-suggestions",
+      "shadow",
+      "svg-inline--fa",
+      "switch-mode-collapsed",
+      "text-center",
+      "text-decoration-none",
+      "text-muted",
+      "text-secondary",
+      "text-sm-start",
+      "text-start",
+      "theme-icon",
+      "theme-icon-active",
+      "toast",
+      "toast-body",
+      "toast-container",
+      "toast-header",
+      "toggler-icon",
+      "top-bar",
+      "w-100"
+    ],
+    "ids": [
+      "-theme",
+      "-theme-collapsed",
+      "navbar-0-collapse",
+      "toast-container",
+      "toast-copied-code-message"
+    ]
+  }
+}

i18n/en.yaml

@@ -25,6 +25,8 @@
   translation: "Articles"
 - id: more
   translation: "More {{ . }}"
+- id: emptyList
+  translation: "No articles found"
 
 # Sharing
 - id: shareLink
@@ -39,6 +41,8 @@
   translation: "Link"
 - id: code
   translation: "Code"
+- id: download
+  translation: "Download article"
 
 # Pagination
 - id: paginationNav

i18n/fr.yaml

@@ -94,7 +94,7 @@
 
 # 404 page
 - id: pageNotFound
-  translation: "La page que vous recherchez n'existe pas ou une autre erreur s'est produite.Essayez de revenir à notre {{ . }}."
+  translation: "La page que vous recherchez n'existe pas ou une autre erreur s'est produite. Essayez de revenir à notre {{ . }}."
 - id: pageNotFoundTitle
   translation: "Page non trouvée"
 - id: pageNotFoundHome
@@ -112,4 +112,4 @@
 - id: show
   translation: "Afficher"
 - id: comments
-  translation: "Commentaires" 
+  translation: "Commentaires"

i18n/nl.yaml

@@ -23,6 +23,8 @@
   translation: "Artikelen"
 - id: more
   translation: "Meer {{ . }}"
+- id: emptyList
+  translation: "Geen artikelen gevonden"
 
 # Sharing
 - id: shareLink
@@ -37,6 +39,8 @@
   translation: "Link"
 - id: code
   translation: "Code"
+- id: download
+  translation: "Download artikel"
 
 # Pagination
 - id: paginationNav

layouts/_default/baseof.html

@@ -1,8 +1,30 @@
-{{- $section := .Section }}
+{{- define "partials/optional-scripts.html" -}}
+    {{- $modules := site.Params.modules.optional | intersect .Params.modules -}}
+    {{- range $index, $mod := $modules -}}
+        {{- $filename := printf "js/%s.bundle.js" $mod -}}
+        {{- $match := printf "js/modules/%s/**.js" $mod -}}
+        {{- $skipTemplate := false -}}
+        {{- if reflect.IsSlice site.Params.modules.disableTemplate -}}
+            {{- if in site.Params.modules.disableTemplate $mod}}
+                {{- $skipTemplate = true -}}
+            {{- end -}}
+        {{- end -}}
+
+        {{ $state := "" }}
+        {{- with (index site.Params.modules $mod) -}}
+            {{- with index . "state" }}{{ $state = . }}{{ end -}}
+        {{- end -}}
+
+        {{- partial "footer/scripts.html" (dict "filename" $filename "match" $match "header" false "skipTemplate" $skipTemplate "state" $state "page" .) }}
+    {{- end -}}
+{{- end -}}
+
+{{- /* Set version-aware sidebar menu */ -}}
 {{- $version := partial "utilities/GetVersion.html" (dict "page" . "base" true) -}}
 {{- $.Scratch.Set "version" $version -}}
 {{ with partial "utilities/GetMenu" (dict "page" . "version" $version) }}{{ $.Scratch.Set "sidebar" . }}{{ end }}
 
+{{- /* Validate if current version is latest */ -}}
 {{- if and site.Params.docs.checkVersion $version -}}
     {{- if ne $version "latest" -}}
         {{- if partial "utilities/IsOlder" (dict "current" $version) -}}
@@ -12,10 +34,13 @@
     {{- end -}}
 {{- end -}}
 
+{{- /* Validate module configuration */ -}}
 {{- if and .IsPage (not (in .Site.Params.modules.core "bootstrap")) -}}
     {{- errorf "Bootstrap is a required module, please add it to 'modules.core' in your site parameters" -}}
 {{- end -}}
 
+{{- $section := .Section }}
+
 <!doctype html>
 <html lang="{{ .Site.Language.Lang }}" class="no-js">
     <head>
@@ -24,76 +49,25 @@
 
     <body>
         {{- partial "footer/scripts.html" (dict "filename" "js/critical.bundle.js" "match" "js/critical/**.js" "header" true "page" .) -}}
-        <div class="d-flex flex-column min-vh-100{{ if and .IsHome .Site.Params.home.style }} {{ .Site.Params.home.style }}{{ end }}">
-            <div class="{{ if .Site.Params.navigation.fixed }}mb-4{{ end }}">
-                {{- partial "assets/navbar.html" (dict
-                    "page" .
-                    "fixed" (string .Site.Params.navigation.fixed)
-                    "color" (.Site.Params.navigation.color)
-                    "style" (default "light" .Site.Params.navigation.style))
-                -}}
-            </div>
-            {{ if .IsHome -}}
-                {{ if .Site.Params.home.fullCover -}}
-                    <div class="d-flex flex-fill {{ if .Site.Params.navigation.fixed }}mt-5{{ end }}">
-                        {{ block "featured" . }}{{ end -}}
-                    </div>
-                {{ else -}}
-                    <div class="{{ if .Site.Params.navigation.fixed }}mt-5{{ end }}">
-                        {{ block "featured" . }}{{ end -}}
-                    </div>
-                    <div class="d-flex flex-column flex-fill">
-                        {{ block "main" . }}{{ end -}}
-                    </div>
-                    {{ if not .Site.Params.main.footerBelowFold }}
-                        <div class="">
-                            {{- partial "footer/social.html" . -}}
-                            {{- partial "footer/footer.html" . -}}
-                        </div>
-                    {{ end }}
-                {{ end -}}
-            {{ else -}}
-                <div class="d-flex flex-column flex-fill {{ if .Site.Params.navigation.fixed }}mt-5{{ end }}">
-                    {{ block "main" . }}{{ end -}}
-                </div>
-                {{ if not .Site.Params.main.footerBelowFold }}
-                    <div class="">
-                        {{- partial "footer/social.html" . -}}
-                        {{- partial "footer/footer.html" . -}}
-                    </div>
-                {{ end }}
-            {{ end -}}
-        </div>
+        <div class="d-flex flex-column min-vh-100{{ if .IsHome }}{{ with .Site.Params.home.style }} {{ . }}{{ end }}{{ end }}">
+            {{- partial "assets/navbar.html" (dict
+                "page" .
+                "fixed" (string site.Params.navigation.fixed)
+                "color" site.Params.navigation.color
+                "style" (default "light" site.Params.navigation.style)
+                "size" (default "md" site.Params.navigation.size))
+            -}}
 
-        {{ if and .IsHome .Site.Params.home.fullCover -}}
-            <div class="">
+            <div class="flex-fill main-content{{ if .Site.Params.main.footerBelowFold }} fullscreen{{ end }} pb-4">
                 {{ block "main" . }}{{ end -}}
             </div>
-            <div class="">
-                {{- partial "footer/social.html" . -}}
-                {{- partial "footer/footer.html" . -}}
-            </div>
-        {{ else if .Site.Params.main.footerBelowFold }}
-            <div class="">
-                {{- partial "footer/social.html" . -}}
-                {{- partial "footer/footer.html" . -}}
-            </div>
-        {{ end }}
+
+            {{- partial "footer/social.html" . -}}
+            {{- partial "footer/footer.html" . -}}
+        </div>
 
         {{- partial "footer/toast-container.html" . -}}
         {{- partialCached "footer/scripts.html" (dict "header" false "page" . "core" true) }}
-        {{- $modules := site.Params.modules.optional | intersect .Params.modules -}}
-        {{- range $index, $mod := $modules -}}
-            {{- $filename := printf "js/%s.bundle.js" $mod -}}
-            {{- $match := printf "js/modules/%s/**.js" $mod -}}
-            {{- $skipTemplate := false -}}
-            {{- if reflect.IsSlice site.Params.modules.disableTemplate -}}
-                {{- if in site.Params.modules.disableTemplate $mod}}
-                    {{- $skipTemplate = true -}}
-                {{- end -}}
-            {{- end -}}
-
-            {{- partial "footer/scripts.html" (dict "filename" $filename "match" $match "header" false "skipTemplate" $skipTemplate "page" .) }}
-        {{- end -}}
+        {{- partial "partials/optional-scripts.html" . -}}
     </body>
 </html>

layouts/_default/list.html

@@ -1,12 +1,135 @@
 {{- define "main" -}}
-    {{- partial "assets/section-list.html" (dict 
-        "page" .
-        "section" .Type
-        "home" false
-        "nested" .Params.Nested
-        "title" (or .Title .Type)
-        "description" .Description
-        "content" .Content
-        "paginate" true)
-    -}}
-{{- end -}}
+    {{- $page := . -}}
+    {{- $orientation :=  site.Params.list.feature.orientation | default "horizontal" -}}
+    {{- $width := site.Params.list.feature.width | default 6 -}}
+    {{- $justify := site.Params.list.feature.justify | default "center" -}}
+    {{- $align := site.Params.list.feature.align | default "center" -}}
+    {{- $sections := slice -}}
+    {{- $sections = $sections | append $page.Type -}}
+    {{ with $page.Params.sections }}
+        {{ $sections = $sections | append . }}
+    {{ end }}
+    {{- $actions := $page.Params.actions -}}
+    {{- $headings := slice -}}
+    {{- $layout := $page.Params.layout -}}
+
+    {{ if $page.IsHome }}
+        {{- $orientation = or site.Params.home.feature.orientation $orientation -}}
+        {{- $width = or site.Params.home.feature.width $width -}}
+        {{- $justify = or site.Params.home.feature.justify $justify -}}
+        {{- $align = or site.Params.home.feature.align $align -}}
+        {{- $actions = (or $actions site.Params.featured.actions) -}}
+        {{- if not $page.Params.sections -}}
+            {{- with site.Params.home.sections }}
+                {{ $sections = $sections | append . }}
+            {{ else }}
+                {{ range $section := site.Sections }}
+                    {{ $sections = $sections | append $section.Type }}
+                {{ end }}
+            {{ end }}
+        {{- end -}}
+    {{ else }}
+        {{ $headings = $headings | append $page.Title }}
+        {{- range .Fragments.Headings }}
+            {{- range .Headings }}
+                {{- $headings = $headings | append .Title -}}
+            {{- end -}}
+        {{- end -}}
+    {{ end }}
+
+    {{/* Generate section content first to determine headings */}}
+    {{ $body := "" }}
+    {{- range $index, $section := $sections -}}
+        {{- $sectionPage := site.GetPage "section" $section -}}
+        {{- $sectionURL := $sectionPage.RelPermalink -}}
+        {{- $title := or $sectionPage.Title $sectionPage.Type -}}
+
+        {{- with (index site.Params.sections $section) -}}
+            {{- with index . "title" }}{{ $title = or . $title }}{{ end -}}
+        {{- end -}}
+    
+        {{- $thumbnail := (or (and (reflect.IsMap $sectionPage.Params.Thumbnail) $sectionPage.Params.Thumbnail.url) $sectionPage.Params.Thumbnail) -}}
+        {{- $icon := $sectionPage.Params.Icon -}}
+        {{- $content := $sectionPage.Content -}}
+        {{- $sectionTitle := strings.FirstUpper $sectionPage.Type -}}
+        {{- $moreTitle := "" -}}
+        {{- with (index site.Params.sections $section) -}}
+            {{- with index . "reference" }}{{ $moreTitle = . }}{{ end -}}
+        {{- end -}}
+        {{- $moreTitle = or $moreTitle (printf (T "more" (pluralize $sectionTitle))) -}}
+
+        {{- $sectionContent := trim (partial "assets/section-list.html" (dict 
+            "page" $page 
+            "section" $section 
+            "home" $page.IsHome
+            "simple" (eq (len $sections) 1)
+            "nested" (and $page.IsHome (eq $section $page.Section))
+            "thumbnail" $thumbnail
+            "icon" $icon
+            "content" $content
+            "moreTitle" $moreTitle
+            "sectionURL" $sectionURL)) " \r\n"
+        -}}
+
+        {{ if $sectionContent }}
+            {{- if not $page.IsHome }}{{ $headings = $headings | append $title }}{{ end -}}
+            {{- $body = printf "%s%s" $body $sectionContent }}
+        {{ end }}
+    {{- end -}}
+
+    {{/* Display featured section */}}
+    {{- if or (eq $layout "featured") $page.IsHome -}}
+        {{- partial "list/featured.html" (dict 
+            "page" .
+            "headings" $headings
+            "actions" $actions
+            "orientation" $orientation
+            "width" $width
+            "justify" $justify
+            "align" $align) 
+        -}}
+    {{- end -}}
+
+    {{/* Display main content */}}
+    <div class="container-xxl px-4 px-xxl-0">
+        {{- if ne $layout "featured" -}}
+            {{ if and (not $page.IsHome) site.Params.navigation.breadcrumb }}
+                <div>{{ partial "assets/breadcrumb.html" $page }}</div>
+            {{ end -}}
+        {{- end -}}
+
+        <div class="row row-cols-1 row-cols-sm-2">
+            <div class="col col-sm-12 col-md-8">
+                {{ if not $page.IsHome }}
+                    {{ with $page.Title }}<p id="{{ anchorize . }}" class="display-4 mt-5{{ if and page.IsHome site.Params.home.centerHeadline }} text-center{{ end }}">{{ . }}</p>{{ end }}
+                {{ end }}
+                {{ if ($page.Params.menu) }}
+                    {{- partial "assets/section-menu.html" $page -}}
+                {{- end -}}
+                {{- $content := partial "utilities/ProcessContent" (dict "page" $page "raw" $page.RawContent) -}}
+                {{ $content | safeHTML }}
+                {{ if and (and (and $sections (eq (len $sections) 1)) (not $body)) (not $content) }}
+                    <p class="pt-4">{{- T "emptyList" }}.</p>
+                {{ end }}
+            </div>
+            {{ with $page.Params.contact }}
+                {{- $contact := site.GetPage . }}
+                {{- if not $contact }}
+                    {{- errorf "Error processing content file '%s' - Cannot find contact: %s" $page.File . -}}
+                {{- else -}}
+                    {{ $color := site.Params.contact.color | default "primary" }}
+                    {{ $style := site.Params.contact.style | default "shadow" }}
+                    <div class="col col-md-4 d-none d-md-block pt-5">
+                        {{- partial "assets/card.html" (dict "path" $page.Params.contact "color" $color "header" "none" "footer" "none" "ratio" "1x1" "class" (printf "w-75 mx-auto mt-4 %s" $style)) -}}
+                    </div>
+                    <div class="col col-sm-12 d-md-none pt-5">
+                        {{- partial "assets/card.html" (dict "path" $page.Params.contact "color" $color "header" "none" "footer" "none" "orientation" "horizontal" "class" $style) -}}
+                    </div>
+                {{- end }}
+            {{ end }}
+        </div>    
+    </div>
+
+    {{/* Display generated sections */}}
+    {{ $body | safeHTML }}
+{{- end -}}

layouts/_default/single.html

@@ -18,7 +18,7 @@
         {{- if gt (len (.GetTerms "tags")) 0 -}}
             <div class="mt-3">
                 <div class="d-none-dark">
-                    <div class="hstack gap-3">
+                    <div class="hstack gap-1">
                         {{ range (.GetTerms "tags") -}}
                             {{- $url := (path.Join .Page.RelPermalink) | relLangURL -}}
                             {{ partial "assets/button.html" (dict "href" $url "title" .LinkTitle "color" "light" "size" "sm") }}
@@ -27,7 +27,7 @@
                 </div>
                 
                 <div class="d-none-light">
-                    <div class="hstack gap-3">
+                    <div class="hstack gap-1">
                         {{ range (.GetTerms "tags") -}}
                             {{- $url := (path.Join .Page.RelPermalink) | relLangURL -}}
                             {{ partial "assets/button.html" (dict "href" $url "title" .LinkTitle "color" "primary" "size" "sm" "outline" "true") }}
@@ -83,7 +83,8 @@
             {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" "21x9" "outerClass" "img-wrap" "innerClass" "rounded" "title" .Params.title "caption" $credits) -}}
         {{ end -}}
     {{ end }}
-    {{ .Content }}
+
+    {{ partial "utilities/ProcessContent" (dict "page" .Page "raw" .RawContent) }}
 {{ end -}}
 
 {{ define "partials/footer.html" -}}
@@ -98,7 +99,7 @@
                     {{ $next := . -}}
                     {{ with .OutputFormats.Get "html" -}}
                         <a class="next" href="{{ $next.RelPermalink }}">
-                            {{- partial "assets/icon.html" (dict "icon" "fas arrow-left") }}&nbsp;{{ $next.Title }}</a>
+                            {{- partial "assets/icon.html" (dict "icon" "fas arrow-left") }}&nbsp;{{ $next.LinkTitle }}</a>
                     {{- end -}}
                 {{ end -}}
             </div>
@@ -106,7 +107,7 @@
                 {{ with .PrevInSection -}}
                     {{ $prev := . -}}
                     {{ with .OutputFormats.Get "html" -}}
-                        <a class="previous" href="{{ $prev.RelPermalink }}">{{ $prev.Title }}&nbsp;{{- partial "assets/icon.html" (dict "icon" "fas arrow-right") }}</a>
+                        <a class="previous" href="{{ $prev.RelPermalink }}">{{ $prev.LinkTitle }}&nbsp;{{- partial "assets/icon.html" (dict "icon" "fas arrow-right") }}</a>
                     {{- end -}}
                 {{ end -}}
             </div>
@@ -119,6 +120,11 @@
 {{ end -}}
 
 {{ define "main" -}}
+    {{- $download := .Params.download -}}
+    {{- if and $download (not (fileExists (path.Join "static" $download))) -}}
+        {{- errorf "Cannot find download file for page '%s': %s" .File.Path $download -}}
+    {{- end -}}
+    
     {{- $menu := .Scratch.Get "sidebar" -}}
     {{- $version := .Scratch.Get "version" -}}
     {{- $sidebar := .Site.Params.navigation.sidebar | default true -}}
@@ -133,7 +139,7 @@
             </div>
         </div>
     
-        <div class="container-xxl px-3 px-xxl-0">
+        <div class="container-xxl p-4 px-xxl-0">
             <div class="row row-cols-md-2 row-cols-lg-3">
                 <div class="col col-md-3 col-lg-2 d-none pt-5 d-md-block sidebar-overflow sticky-top">
                     {{ partial "assets/sidebar" (dict "page" . "menu" $menu "version" $version) }}
@@ -145,12 +151,12 @@
                 </div>
                 <div class="col col-lg-2 d-none d-lg-block pt-5">
                     {{- if and .Site.Params.navigation.toc .Params.includeToc | default true -}}
-                        {{ partial "assets/toc.html" . -}}
+                        {{ partial "assets/toc.html" (dict "page" . "download" $download) -}}
                     {{ end -}}
                 </div>
             </div>
         </div>
-    {{ else }}
+    {{ else if $sidebar }}
         <div class="container-xxl px-3 px-xxl-0">
             <div class="row row-cols-1 row-cols-sm-3">
                 <div class="col col-md-2 d-none d-md-block"></div>
@@ -161,7 +167,22 @@
                 </div>
                 <div class="col col-md-2 d-none d-md-block">
                     {{- if and .Site.Params.navigation.toc .Params.includeToc | default true -}}
-                        {{ partial "assets/toc.html" . -}}
+                        {{ partial "assets/toc.html" (dict "page" . "download" $download) -}}
+                    {{ end -}}
+                </div>
+            </div>    
+        </div>
+    {{ else }}
+        <div class="container-xxl px-3 px-xxl-0">
+            <div class="row row-cols-1 row-cols-sm-2">
+                <div class="col col-sm-12 col-md-9">
+                    {{ partial "partials/header.html" . }}
+                    {{ partial "partials/body.html" . }}
+                    {{ partial "partials/footer.html" . }}
+                </div>
+                <div class="col col-md-3 d-none d-md-block">
+                    {{- if and .Site.Params.navigation.toc .Params.includeToc | default true -}}
+                        {{ partial "assets/toc.html" (dict "page" . "download" $download) -}}
                     {{ end -}}
                 </div>
             </div>    

layouts/index.html

@@ -1,40 +0,0 @@
-{{- define "featured" -}}
-    {{- partial "home/featured.html" . -}}
-{{- end -}}
-
-{{- define "main" -}}
-    {{- $page := . -}}
-    {{- $sections := site.Params.home.sections -}}
-    {{- if not $sections -}}
-        {{ range $section := site.Sections }}
-            {{ $sections = $sections | append $section.Type }}
-        {{ end }}
-    {{- end -}}
-
-    {{- range $index, $section := $sections -}}
-        {{- $sectionPage := site.GetPage "section" $section -}}
-        {{- $sectionURL := $sectionPage.RelPermalink -}}
-        {{- $title := or $sectionPage.Title $sectionPage.Type -}}
-        {{- $thumbnail := (or (and (reflect.IsMap $sectionPage.Params.Thumbnail) $sectionPage.Params.Thumbnail.url) $sectionPage.Params.Thumbnail) -}}
-        {{- $icon := $sectionPage.Params.Icon -}}
-        {{- $content := $sectionPage.Content -}}
-        {{- $sectionTitle := strings.FirstUpper $sectionPage.Type -}}
-        {{- $moreTitle := "" -}}
-        {{- with (index site.Params.sections $section) -}}
-            {{- with index . "reference" }}{{ $moreTitle = . }}{{ end -}}
-        {{- end -}}
-        {{- $moreTitle = or $moreTitle (printf (T "more" (pluralize $sectionTitle))) -}}
-
-        {{- partial "assets/section-list.html" (dict 
-            "page" $page 
-            "section" $section 
-            "home" true 
-            "nested" true 
-            "thumbnail" $thumbnail
-            "icon" $icon
-            "content" $content
-            "moreTitle" $moreTitle
-            "sectionURL" $sectionURL)
-        -}}
-    {{- end -}}
-{{- end -}}

layouts/partials/assets/breadcrumb.html

@@ -1,7 +1,7 @@
 <nav aria-label="breadcrumb">
     <ol class="breadcrumb">
         {{- range $index, $item := .Page.Ancestors.Reverse -}}
-            {{- $title := .Title -}}
+            {{- $title := .LinkTitle -}}
             {{- if .IsHome }}{{ $title = T "home" }}{{ end -}} 
             {{- $address := or .RelPermalink (.Params.Redirect | relLangURL) -}}
             {{ if $address }}
@@ -10,6 +10,6 @@
                 <li class="breadcrumb-item">{{ $title }}</li>
             {{ end }}
         {{- end -}}
-        <li class="breadcrumb-item active" aria-current="page">{{ .Page.Title }}</li>
+        <li class="breadcrumb-item active" aria-current="page">{{ .Page.LinkTitle }}</li>
     </ol>
 </nav>

layouts/partials/assets/button.html

@@ -28,6 +28,7 @@
     "tab"           Optional flag to indicate if an external link should open in a new tab, defaults to setting
                     "main.externalLinks.tab" in the site's parameters.
     "attributes"    Optional dictionary of key-value pairs added as custom attributes to the button element ('<a>').
+    "spacing"       Optional flag to add spacing to the inline button, defaults to "true".
 -->
 
 {{- $title := trim .title " \r\n" -}}
@@ -126,6 +127,8 @@
 {{- $target := "" -}}
 {{- $rel := "" -}}
 
+{{- $spacing := .spacing | default true -}}
+
 {{- if $isExternal -}}
     {{- if $tab -}}
         {{- $target = "_blank" -}}
@@ -140,7 +143,7 @@
 
 {{- $attributes := .attributes -}}
 
-<a aria-label="{{ or $label $title }}" {{ if ne $state "disabled" }}{{ with $href }}href="{{ . }}"{{ end }}{{ end -}}
+<a aria-label="{{ (or $label $title) | safeHTML }}" {{ if ne $state "disabled" }}{{ with $href }}href="{{ . }}"{{ end }}{{ end -}}
     {{- with $id }} id="{{ . }}"{{ end -}}
     {{- with $target }} target="{{ . }}"{{ end }}{{ with $rel }} rel="{{ . }}"{{ end -}}
     {{- with $toast }} data-toast-target="{{ $toast }}"{{ end -}}
@@ -157,7 +160,7 @@
     {{- end -}}
     >
     <div class="d-flex justify-content-{{ $justify }}">
-        <div class="my-auto">{{ $title }}</div>
+        <div class="my-auto">{{ $title | safeHTML }}</div>
         {{- with $icon }}<div class="align-self-center{{ if $title }}{{ if eq $order "first" }} order-first pe-1{{ else }} ps-1{{ end }}{{ end }}">{{ partial "assets/icon.html" (dict "icon" $icon) }}</div>{{ end }}
     </div>
 
@@ -167,4 +170,4 @@
             {{ with $label }}<span class="visually-hidden">{{ . }}</span>{{ end }}
         </span>
     {{- end -}}  
-</a>
+</a>{{ if $spacing }}&nbsp;{{- end }}

layouts/partials/assets/card-group.html

@@ -7,8 +7,10 @@
     The shortcode supports the following arguments:
     "page"          Required context of the current page.
     "list"          Required array of pages.
+    "cards"         Optional string of rendered cards.
     "max"           Required maximum number of cards to display.
     "cols"          Required number of columns for the grid, must be a value between 1 and 5.
+    "gutter"        Gutter between columns in a group, either "0", "1", "2", "3", "4" (default), or "5".
     "title"         Optional title of the card group.
     "paginate"      Optional flag indicating if pagination should be added to the card group, if the list exceeds the
                     maximum number of cards to display. 
@@ -16,6 +18,8 @@
                     maximum number of cards to display.
     "hrefTitle"     Optional title of the button or hyperlink as companion to href.
     "separator"     Optional flag to indicate a horizontal line should be added between items on small screens.
+    "wrapper"       Optional class attributes of the wrapper element, e.g. "p-4 px-xxl-0".
+    "responsive"    Optional flag if the number of columns should be responsive, defaults to "true".
 
     In addition, the following arguments are passed to the individual cards.
     "class"         Optional class attribute of the card element, e.g. “w-50”.
@@ -27,36 +31,23 @@
     "footer"        Optional footer components of the card, displayed in small caps. Supported values are "full",
                     "publication", "tags", and "none" (default).
     "orientation"   Optional placecement of the thumbnail, either "stacked" (default), "horizontal", or "none".
+    "ratio"         Optional ratio of the thumbnail image, defaults to "16x9" (stacked orientation) or "1x1" (horizontal
+                    orientation).
 -->
 
 {{- $page := .page -}}
-{{- if ne (printf "%T" $page) "*hugolib.pageState" -}}
-    {{- errorf "partial [assets/card-group.html] - Invalid value for param 'page'" -}}
+
+{{- if not (in (slice "*hugolib.pageState" "*hugolib.pageForShortcode") (printf "%T" $page)) -}}
+    {{- errorf "partial [assets/card-group.html] - Invalid value for param 'page': %T" $page -}}
 {{- end -}}
 
 {{- $supportedTypes := slice "page.Pages" "resource.Resources" -}}
-{{ $list := .list }}
-{{- if not (in $supportedTypes (printf "%T" $list)) -}}
-    {{ warnf "Type: %T" $list }}
+{{ $pages := .list }}
+{{- if and $pages (not (in $supportedTypes (printf "%T" $pages))) -}}
+    {{ warnf "Type: %T" $pages }}
     {{- errorf "partial [assets/card-group.html] - Invalid value for param 'list'" -}}
 {{- end -}}
-
-{{- $count := len $list -}}
-{{- $max := .max -}}
-{{- if ne (printf "%T" $max) "int" -}}
-    {{- errorf "partial [assets/card-group.html] - Invalid value for param 'max'" -}}
-{{- end -}}
-{{- $max = math.Min $max $count -}}
-
-{{- $cols := .cols -}}
-{{- if or (lt $cols 1) (gt $cols 5) -}}
-    {{- errorf "partial [assets/card-group.html] - Invalid value for param 'cols': %d" $cols -}}
-{{- end -}}
-{{- $colGrid := "row-cols-1" -}}
-{{- if eq $cols 2 }}{{ $colGrid = "row-cols-1 row-cols-sm-1 row-cols-md-2" -}}
-{{- else if eq $cols 3 }}{{ $colGrid = "row-cols-1 row-cols-sm-2 row-cols-md-3" -}}
-{{- else if eq $cols 4 }}{{ $colGrid = "row-cols-1 row-cols-sm-2 row-cols-md-4" -}}
-{{- else if eq $cols 5 }}{{ $colGrid = "row-cols-1 row-cols-sm-3 row-cols-md-5" }}{{ end -}}
+{{ $cards := .cards }}
 
 {{- $paginate := false -}}
 {{- with .paginate -}}
@@ -65,6 +56,70 @@
     {{- end -}}
     {{- $paginate = . -}}
 {{- end -}}
+
+{{ $paginator := "" }}
+{{ if $paginate }}
+    {{ $paginator = $page.Paginate $pages }}
+    {{ $pages = first $paginator.PageSize (after (mul (sub $paginator.PageNumber 1) $paginator.PageSize) $pages) }}
+{{ end }}
+{{ $list := slice }}
+{{ range $index, $element := $pages }}
+    {{ $params := dict }}
+    <!-- regular page -->
+    {{- if $element.RelPermalink -}}
+        {{- $params = merge $params (dict "path" $element.File.Path) -}}
+    <!-- headless page -->
+    {{- else -}}
+        {{- $thumbnail := (or (and (reflect.IsMap $element.Params.Thumbnail) $element.Params.Thumbnail.url) $element.Params.Thumbnail) -}}
+        {{- $params = merge $params (dict
+            "title" $element.Title
+            "href" $element.RelPermalink
+            "description" (partial "utilities/GetDescription.html" $element)
+            "thumbnail" $thumbnail
+            "icon" $element.Params.icon
+        ) -}}
+    {{- end -}}
+
+    {{- $list = $list | append $params }}
+{{ end }}
+
+{{- $count := len $list -}}
+{{- $max := $count -}}
+{{- with .max }}
+    {{- if ne (printf "%T" .) "int" -}}
+        {{- warnf "partial [assets/card-group.html] - Invalid value for param 'max': %s" . -}}
+    {{- else -}}
+        {{- $max = . -}}
+    {{- end -}}
+{{- end -}}
+{{- $max = math.Min $max $count -}}
+
+{{- $responsive := .responsive | default true -}}
+{{- with .responsive -}}
+    {{- if ne (printf "%T" .) "bool" -}}
+        {{- errorf "partial [assets/card-group.html] - Invalid value for param 'responsive'" -}}
+    {{- end -}}
+{{- end -}}
+
+{{- $cols := string .cols | default "3" -}}
+{{- $supportedCols := slice "0" "1" "2" "3" "4" "5" "auto" -}}
+{{- if not (in $supportedCols $cols) -}}
+    {{- errorf "partial [assets/card-group.html] - Invalid value for param 'cols': %s" $cols -}}
+{{- end -}}
+{{- $colGrid := "" -}}
+{{- if eq $cols "1" }}{{ $colGrid = "row-cols-1" -}}
+{{- else if eq $cols "2" }}{{ if $responsive }}{{ $colGrid = "row-cols-1 row-cols-sm-1 row-cols-md-2" }}{{ else }}{{ $colGrid = "row-cols-2" }}{{ end -}}
+{{- else if eq $cols "3" }}{{ if $responsive }}{{ $colGrid = "row-cols-1 row-cols-sm-2 row-cols-md-3" }}{{ else }}{{ $colGrid = "row-cols-3" }}{{ end -}}
+{{- else if eq $cols "4" }}{{ if $responsive }}{{ $colGrid = "row-cols-1 row-cols-sm-2 row-cols-md-4" }}{{ else }}{{ $colGrid = "row-cols-4" }}{{ end -}}
+{{- else if eq $cols "5" }}{{ if $responsive }}{{ $colGrid = "row-cols-1 row-cols-sm-3 row-cols-md-5" }}{{ else }}{{ $colGrid = "row-cols-5" }}{{ end -}}
+{{ end -}}
+
+{{- $gutter := .gutter | default "4" -}}
+{{- $supportedGutters := slice "0" "1" "2" "3" "4" "5" -}}
+{{- if not (in $supportedGutters $gutter) -}}
+    {{- errorf "partial [assets/card-group.html] - Invalid value for param 'gutter': %s" $gutter -}}
+{{- end -}}
+
 {{- if not $paginate -}}
     {{- $list = first $max $list -}}
 {{- end -}}
@@ -86,17 +141,13 @@
 {{- $header := .header -}}
 {{- $footer := .footer -}}
 {{- $orientation := .orientation -}}
+{{- $ratio := .ratio -}}
+{{- $wrapper := .wrapper | default "p-0" -}}
 
 {{- if and (eq $cols 1) (eq $orientation "horizontal") }}{{ $orientation = "horizontal-sm" }}{{ end -}}
 
-<div class="container-fluid p-4 px-xxl-0">
-    {{ $paginator := "" }}
-    {{ if $paginate }}
-        {{ $paginator = $page.Paginate $list }}
-        {{ $list = first $paginator.PageSize (after (mul (sub $paginator.PageNumber 1) $paginator.PageSize) $list) }}
-    {{ end }}
-
-    <div class="row {{ $colGrid }}">
+<div class="container-fluid {{ $wrapper }}">
+    <div class="row {{ $colGrid }} g-{{ $gutter }}">
         {{ range $index, $element := $list }}
             {{- $params := (dict
                 "class" (printf "h-100 %s" $class)
@@ -105,22 +156,11 @@
                 "header" $header
                 "footer" $footer
                 "orientation" $orientation
+                "ratio" $ratio
             ) -}}
+            {{- $params = merge $params $element }}
 
-            {{- if $element.RelPermalink -}}
-                {{- $params = merge $params (dict "path" $element.File.Path) -}}
-            {{- else -}}
-                {{- $thumbnail := (or (and (reflect.IsMap $element.Params.Thumbnail) $element.Params.Thumbnail.url) $element.Params.Thumbnail) -}}
-                {{- $params = merge $params (dict
-                    "title" $element.Title
-                    "href" $element.RelPermalink
-                    "description" (partial "utilities/GetDescription.html" $element)
-                    "thumbnail" $thumbnail
-                    "icon" $element.Params.icon
-                ) -}}
-            {{- end -}}
-
-            <div class="col pt-3 pb-3">
+            <div class="col">
                 {{- partial "assets/card.html" $params -}}
             </div>
             {{- if and (lt $index (sub $max 1)) $separator -}}
@@ -129,6 +169,7 @@
                 </div>
             {{- end -}}
         {{- end -}}
+        {{- print $cards | safeHTML }}
     </div>
 
     {{ if $paginate }}

layouts/partials/assets/card.html

@@ -11,12 +11,16 @@
                     "warning", "info", "light", "dark", "white", "black", "body", or "body-tertiary". By default, no
                     color is specified.
     "padding":      Optional padding of the content, either "0", "1", "2", "3", "4", "5", or "auto" (default).
+    "gutter"        Gutter between columns in a group, either "0" (default), "1", "2", "3", "4", or "5".
     "header"        Optional header components of the card, displayed in small caps. Supported values are "full"
                     (default), "publication", "tags", and "none".
     "footer"        Optional footer components of the card, displayed in small caps. Supported values are "full",
                     "publication", "tags", and "none" (default).
     "description"   Optional description of the card.
     "thumbnail"     Optional thumbnail image url, displayed on top or the left of the card.
+    "ratio"         Optional ratio of the thumbnail image, defaults to "16x9" (stacked orientation) or "1x1" (horizontal
+                    orientation).
+    "alt"           Optional alternate text for the thumbnail, uses "title" by default.
     "icon"          Optional Font Awesome icon, displayed on top or the left of the card.
     "orientation"   Optional placecement of the thumbnail or icon, either "stacked" (default), "horizontal",
                     "horizontal-sm" or "none".
@@ -32,12 +36,12 @@
     {{- if $href -}}
         <a href="{{ $href }}" class="{{ if $color }}link-bg-{{ $color }}{{ else }}card-body-link{{ end }} stretched-link">
                 <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 -}}
+            {{ with $description }}<p class="card-text {{ if $color }}link-bg-{{ $color }}{{ else }}card-body-link{{ end }}">{{ . }}</p>{{ end -}}
         </a>
     {{- else -}}
         <div>
-            <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 -}}
+            {{ with $title }}<p class="card-title fs-5 fw-bold">{{ . }}</p>{{ end -}}
+            {{ with $description }}<p class="card-text">{{ . }}</p>{{ end -}}
         </div>
     {{- end -}}
 {{- end -}}
@@ -82,9 +86,11 @@
 {{- end }}
 
 {{- $title := .title -}}
+{{- $alt := .alt -}}
 {{- $href := .href -}}
 {{- $description := .description -}}
 {{- $thumbnail := .thumbnail -}}
+{{- $ratio := .ratio -}}
 {{- $icon := .icon -}}
 
 {{- $color := "" -}}
@@ -126,6 +132,12 @@
     {{- errorf "partial [assets/card.html] - Invalid value for param 'padding': %s" $padding -}}
 {{- end -}}
 
+{{- $gutter := .gutter | default "0" -}}
+{{ $supportedGutters:= slice "0" "1" "2" "3" "4" "5" -}}
+{{ if not (in $supportedGutters $gutter) -}}
+    {{- errorf "partial [assets/card.html] - Invalid value for param 'gutter': %s" $gutter -}}
+{{ end -}}
+
 {{- $orientation := "stacked" -}}
 {{- with .orientation }}{{ $orientation = . }}{{ end -}}
 {{- $supportedOrientations := slice "stacked" "horizontal" "horizontal-sm" "none" -}}
@@ -134,15 +146,16 @@
 {{- end -}}
 {{- if eq $orientation "none" }}{{ $thumbnail = "" }}{{ $icon = "" }}{{ end -}}
 
+{{ if ne $gutter "0" }}<div class="g-{{ $gutter }}">{{ end }}
 {{- if hasPrefix $orientation "horizontal" -}}
     <div class="card {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
         <div class="row g-0 row-cols-1 h-100">
             <div class="col-4{{ if eq  $orientation "horizontal-sm" }} col-md-2{{ end }}">
                 {{- if $thumbnail -}}
-                    {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" "1x1" "outerClass" "h-100 card-img-wrap" "innerClass" "rounded-start card-img-h100" "title" $title) -}}
+                    {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" (or $ratio "1x1") "outerClass" "h-100 card-img-wrap" "innerClass" "rounded-start card-img-h100" "title" $title) -}}
                 {{- else if $icon -}}
-                    <div class="p-{{ $padding }} h-100 fa-wrapper d-flex align-items-center justify-content-center">
-                        {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-fluid text-secondary fa-fw" $icon)) -}}
+                    <div class="card-icon p-{{ $padding }} h-100 fa-wrapper d-flex align-items-center justify-content-center">
+                        {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-fluid fa-fw" $icon)) -}}
                     </div>
                 {{- end -}}
             </div>
@@ -160,10 +173,10 @@
 {{- else -}}
     <div class="card {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
         {{- if $thumbnail -}}
-            {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" "16x9" "outerClass" "card-img-wrap" "innerClass" "card-img-top" "title" $title) -}}
+            {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" (or $ratio "16x9") "outerClass" "card-img-wrap" "innerClass" "card-img-top" "title" (or $alt $title)) -}}
         {{- else if $icon -}}
-            <div class="p-{{ $padding }}">
-                {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-4x text-secondary" $icon)) -}}
+            <div class="card-icon  p-{{ $padding }}">
+                {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-4x" $icon)) -}}
             </div>
         {{- end -}}
         <div class="card-body d-flex flex-column p-{{ $padding }}">
@@ -173,3 +186,4 @@
         </div>
     </div>
 {{- end -}}
+{{ if ne $gutter "0" }}</div>{{ end }}

layouts/partials/assets/carousel-item.html

@@ -0,0 +1,16 @@
+{{- $page := .page -}}
+{{- $active := .active -}}
+{{- $src := .src -}}
+{{- $caption := .caption -}}
+{{- $ratio := .ratio -}}
+{{- $portrait := .portrait -}}
+
+<div class="carousel-item{{ if $active }} active{{ end }}">
+    {{ partial "assets/image.html" (dict "url" $src "ratio" $ratio "page" $page "innerClass" "d-block w-100" "portrait" $portrait) }}
+    <div class="carousel-caption gradient"></div>
+    {{ with $caption }}
+        <div class="carousel-caption d-none d-md-block">
+            <div class="d-flex justify-content-center align-items-end h-100 w-100 p-4">{{ . }}</div>
+        </div>
+    {{ end }}
+</div>

layouts/partials/assets/image.html

@@ -2,22 +2,43 @@
     Render a local or remote image with responsive image sizing. Images are resized using default media breakpoints
     and are converted to webp format. The image is processed using the quality setting specified in the [imaging]
     section of the main config file (defaults to 75). A fallback image is provided for older browsers. The image is
-    wrapped in a figure if a caption is provided, else the image is wrapped in a div with a ratio constraint. The
-    partial supports the following arguments:
-    "url":          Required relative url of the image, e.g. "img/example.jpg"
+    wrapped in a figure if a caption is provided, else the image is wrapped in a div with a ratio constraint.
+    
+    If the url starts with 'http', the image is retrieved from an external location. Else, the url is matched with a
+    page resource and site asset (in that order). The path of a remote image is rewritten to ensure processed files are
+    stored in the final '/img' folder. 
+    
+    The partial supports the following bitmap image formats: "png", "jpeg", "gif", "tiff", "bmp", and  "webp". Vector
+    graphics of type "svg" are supported too, although these images do no support additional processing. This means
+    the arguments "ratio" and "portrait" have no effect for vector images. Vector graphics support an optional anchor
+    "#" in their url to denote a styling reference.
+    
+    The partial supports the following arguments:
+    "url":          Required path or url of the image, e.g. "img/example.jpg"
     "mode":         Optional flag indicating if the image should support color modes.
-    "ratio":        Optional 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.
+    "ratio":        Optional ratio of the image, either "1x1", "3x2", "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. Not
+                    applicable to vector graphics.
+    "portrait":     Optional flag to adjust the ratio from landscape to portrait. The image itself is not rotated, only
+                    the crop area is adjusted. Not applicable to vector graphics.
     "outerClass":   Optional class attribute of the outer div element, e.g. "img-wrap".
     "innerClass":   Optional class attribute of the inner img element, e.g. "rounded".
     "title":        Optional alternate text of the image.
     "caption":      Optional figure caption.
+    "page":         Optional page context, used to match page resources.
 -->
 
-{{- $validRatios := slice "1x1" "4x3" "16x9" "21x9" -}}
 {{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}}
+{{- $validRatios := slice "1x1" "3x2" "4x3" "16x9" "21x9" -}}
 {{- $ratio := .ratio -}}
+{{- if $ratio -}}
+    {{ if not (in $validRatios $ratio) -}}
+        {{- errorf "partial [assets/image.html] - Invalid value for param 'ratio'" -}}
+    {{ end -}}
+{{- end -}}
+{{- $portrait := .portrait -}}
 {{- $url := .url -}}
+
 {{- $mode := false -}}
 {{- with .mode -}}
     {{ $mode = . -}}
@@ -30,12 +51,37 @@
     {{- errorf "partial [assets/image.html] - Invalid value for param 'mode'" -}}
 {{- end -}}
 {{- $modes := site.Params.main.modes | default (slice "light" "dark") -}}
+{{- $page := .page -}}
 
 
+{{- define "partials/image-portrait.html" -}}
+    {{- $dimensions := slice }}
+    {{- $dim := .dim -}}
+    {{- $dimensions = $dimensions | append $dim -}}
+    {{- $portraits := slice }}
+    {{- range $d := $dimensions -}}
+        {{- $p := split $d "x" }}
+        {{ if ne (len $p) 2 }}
+            {{- warnf "partial [assets/image.html] - Invalid dimension: %s" $d -}}
+            {{- $portraits = $portraits | append $d -}}
+        {{- else -}}
+            {{- $portraits = $portraits | append (printf "%sx%s" (index $p 1) (index $p 0)) -}}
+        {{- end -}}
+    {{- end -}}
+    {{- $ret := "" }}
+    {{- if reflect.IsSlice $dim -}}
+        {{ $ret = $portraits -}}
+    {{- else if gt (len $portraits) 0 -}}
+        {{- $ret = index $portraits 0 -}}
+    {{- end -}}
+    {{- return $ret -}}
+{{- end -}}
+
 <!-- Generate a fallback image of type jpg -->
 {{- define "partials/image-default.html" -}}
     {{- $img := .img -}}
     {{- $ratio := .ratio -}}
+    {{- $portrait := and .portrait .ratio -}}
     {{- $width := "1400" -}}
     {{- $dim := "" -}}
     {{- $fallback := "" -}}
@@ -43,6 +89,8 @@
     {{- with $img -}}
         {{- if eq $ratio "4x3" -}}
             {{- $dim  = "1400x1050" }}
+        {{- else if eq $ratio "3x2" -}}
+            {{- $dim  = "1400x933" }}
         {{- else if eq $ratio "1x1" -}}
             {{- $dim  = "1400x1400" }}
         {{- else if eq $ratio "16x9" -}}
@@ -53,6 +101,10 @@
             {{- $dim = printf "%sx%d" $width (int (math.Round (mul (div (float $width) $img.Width) $img.Height))) -}}
         {{- end -}}
 
+        {{- if $portrait -}}
+            {{- $dim = partial "partials/image-portrait.html" (dict "dim" $dim) -}}
+        {{- end -}}
+
         {{- if $ratio -}}
             {{- $fallback = ($img.Fill (printf "%s jpg" $dim)) -}}
         {{- else -}}
@@ -72,13 +124,16 @@
     {{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}}
     {{- $img := .img -}}
     {{- $ratio := .ratio -}}
+    {{- $portrait := and .portrait .ratio -}}
     {{- $imgset := "" -}}
 
     {{- $widths := slice "576" "768" "992" "1200" "1400" -}}
     {{- $dims := slice -}}
     {{- with $img -}}
         {{- if eq $ratio "4x3" -}}
-            {{- $dims  = slice "576x432" "768x576" "992x744" "1200x900"  "1400x1050" -}}
+            {{- $dims = slice "576x432" "768x576" "992x744" "1200x900"  "1400x1050" -}}
+        {{- else if eq $ratio "3x2" -}}
+            {{- $dims = slice "576x384"  "768x512" "992x661" "1200x800"  "1400x933" -}}
         {{- else if eq $ratio "1x1" -}}
             {{- $dims  = slice "576x576" "768x768" "992x992" "1200x1200" "1400x1400" -}}
         {{- else if eq $ratio "16x9" -}}
@@ -91,6 +146,10 @@
             {{- end -}}
         {{- end -}}
 
+        {{- if $portrait -}}
+            {{- $dims = partial "partials/image-portrait.html" (dict "dim" $dims) -}}
+        {{- end -}}
+
         {{- $scaled := "" -}}
         {{- range $index, $dim := $dims -}}
             {{- $clean := path.Ext $img.RelPermalink -}}
@@ -116,28 +175,41 @@
 {{- define "partials/image-definition.html" -}}
     {{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}}
     {{- $ratio := .ratio -}}
+    {{- $portrait := .portrait -}}
     {{- $url := .url -}}
     {{- $outerClass := .outerClass -}}
     {{- $innerClass := .innerClass -}}
     {{- $title := .title -}}
     {{- $caption := .caption -}}
     {{- $fallbackURL := "" -}}
+    {{- $anchor := "" -}}
     {{- $imgset := "" -}}
     {{- $mode := .mode -}}
     {{- $modes := .modes -}}
+    {{- $page := .page -}}
+    {{- $isVector := false -}}
+
+    {{- $segments := split $url "#" -}}
+    {{- if gt (len $segments) 2 -}}
+        {{- errorf "Invalid path or url: %q" $url -}}
+    {{- else if eq (len $segments) 2 }}
+        {{- $url = index $segments 0 -}}
+        {{- $anchor = index $segments 1 -}}
+    {{- end -}}
 
     {{- if hasSuffix $url "svg" -}}
         {{- $fallbackURL = $url -}}
+        {{- $isVector = true -}}
     {{- else -}}
-        {{- $img := partial "utilities/GetImage.html" (dict "url" $url) -}}
+        {{- $img := partial "utilities/GetImage.html" (dict "url" $url "page" $page) -}}
         {{- if $img -}}
-            {{- $fallback := partial "partials/image-default.html" (dict "img" $img "ratio" $ratio) -}}
+            {{- $fallback := partial "partials/image-default.html" (dict "img" $img "ratio" $ratio "portrait" $portrait) -}}
                 {{- if $absoluteURL -}}
                     {{- $fallbackURL = $fallback.Permalink -}}
                 {{- else -}}
                     {{- $fallbackURL = $fallback.RelPermalink -}}
                 {{- end -}}
-            {{- $imgset = partial "partials/image-scaled.html " (dict "img" $img "ratio" $ratio) -}}
+            {{- $imgset = partial "partials/image-scaled.html " (dict "img" $img "ratio" $ratio "portrait" $portrait) -}}
         {{- end -}}
     {{- end -}}
 
@@ -150,19 +222,37 @@
     {{- if $caption -}}
         <figure {{ with $outerClass }}class="{{ . }}"{{ end }}>
     {{ end }}
-        <div class="{{ with $ratio }}ratio ratio-{{ . }}{{ end }}{{ if not $caption }} {{ $outerClass }}{{ end }}">
+    <div class="{{ if not $caption }}{{ $outerClass }}{{ end }}">
+        {{- if not $anchor -}}
+            {{- $input := (split (path.BaseName $fallbackURL) "-") | collections.Reverse -}}
+            {{- $width := "" -}}
+            {{- $height := "" -}}
+            {{- if gt ($input | len) 1 -}}
+                {{- $dim := (split (index $input 0) "x") -}}
+                {{- if eq ($dim | len) 2 -}}
+                    {{- $width = index $dim 0 -}}
+                    {{- $height = index $dim 1 -}}
+                {{- end -}}
+            {{- end }}
             <img class="img-fluid {{ $innerClass }}"
                 {{ with $imgset -}}
                 srcset="{{ . }}"
                 sizes="100vw"
                 {{- end }}
                 src="{{ $fallbackURL }}"
+                {{ with $height }}height="{{ . }}"{{ end }}
+                {{ with $width }}width="{{ . }}"{{ end }}
                 alt="{{ $title }}">
-        </div>
+        {{- else }}
+            <svg class="{{ $innerClass }}">
+                <use href="{{ $fallbackURL }}#{{ $anchor }}"></use>
+            </svg>
+        {{ end }}
+    </div>
     {{- if $caption -}}
         <figcaption class="figure-caption">{{ $caption | safeHTML }}</figcaption>
     </figure>
-{{- end -}}
+    {{- end -}}
 {{- end -}}
 
 <!-- Initiate the regular or color-mode image -->
@@ -177,22 +267,26 @@
         {{- $image := printf "%s-%s%s" $base $suffix $ext -}}
         {{- partial "partials/image-definition.html" (dict 
             "ratio" $ratio
+            "portrait" $portrait
             "url" $image
             "outerClass" $outerClass
             "innerClass" $innerClass
             "title" $title
             "caption" $caption
             "mode" $suffix
-            "modes" $modes)
+            "modes" $modes
+            "page" $page)
         -}}
     {{- end -}}
 {{- else -}}
     {{- partial "partials/image-definition.html" (dict 
         "ratio" $ratio
+        "portrait" $portrait
         "url" $url
         "outerClass" $outerClass
         "innerClass" $innerClass
         "title" $title
-        "caption" $caption)
+        "caption" $caption
+        "page" $page)
     -}}
 {{- end -}}

layouts/partials/assets/nav-item.html

@@ -0,0 +1,29 @@
+<!-- 
+    Defines an individual nav item. The shortcode supports the following arguments:
+    
+    "id"            Required unique ID of the nav-item.
+    "parentID"      Required ID of the parent (e.g. nav control).
+    "class"         Optional class attributes to be added to the nav-item.
+    "fade"          Optional flag to make the tab pane fade in.
+    "header"        Required header of the nav item.
+    "class"         Optional class attribute of the nav item.
+    "body"          The body content of the nav-item, supports Markdown and HTML (if enabled).
+    "show"          Optional flag to indicate the item should be shown as expanded (only one can be shown at a time).
+    "disabled"      Optional flag to indicate the item should be in a disabled state.
+-->
+
+{{- $id := .id -}}
+{{- $parentID := .parentID -}}
+{{- $class := .class -}}
+{{- $fade := .fade -}}
+{{- $header := .header -}}
+{{- $class := .class -}}
+{{- $body := .body -}}
+{{- $show := .show -}}
+{{- $disabled := .disabled -}}
+
+<div class="tab-pane{{ if $show }} active {{ if $fade }}show{{ end }}{{ end }} {{ if $fade}}fade{{ end }}{{ with $class }} {{ . }}{{ end }}" id="{{ $parentID }}-{{ $id }}" 
+    role="tabpanel" aria-labelledby="{{ $parentID }}-btn-{{ $id }}" tabindex="0" data-header="{{ $header }}" {{ if $show }}data-show-id="{{ $id }}"{{ end }} 
+    data-has-content="{{ gt (len $body) 0 }}" {{ if $disabled }} data-disabled-id="{{ $id }}"{{ end }}>
+    {{ $body }}
+</div>

layouts/partials/assets/nav.html

@@ -9,6 +9,7 @@
     "class"         Optional class attribute of the tab group, e.g. “nav-fill”.
     "pane"          Optional style of the panes, either "none" (default) or "persona".
     "width"         Optional responsive width of the tab group, either "50" or "100" (default).
+    "wrap"          Optional flag to enable word wrapping of tab titles, defaults to false.
 
     In addition, the following arguments are passed to the individual tabs.
     "class"         Optional class attribute of the tab element, e.g. “w-50”.
@@ -54,6 +55,7 @@
 {{- $title := .title -}}
 {{- $class := .class -}}
 {{- $color := .color -}}
+{{- $wrap := .wrap | default false -}}
 
 {{ $supportedFlags := slice "true" "false" -}}
 {{ $verticalParam := "false" -}}
@@ -81,7 +83,7 @@
     <div class="nav{{ with $type }} nav-{{ . }}{{ end }}{{ with $class }} {{ . }}{{ end }}{{ if $vertical }} flex-column{{ end }}" id="nav-{{ $id }}" role="tablist"{{ if $vertical }} aria-orientation="vertical"{{ end }}>
         {{- range $index, $item := $list -}}
             {{ $show := eq $index 0}}
-            <button class="nav-link text-nowrap{{ if $show }} active{{ end }}" id="nav-{{ $id }}-btn-{{ $index }}" data-bs-toggle="pill" data-bs-target="#nav-{{ $id }}-{{ $index }}" 
+            <button class="nav-link {{ if not $wrap }} text-nowrap{{ end }}{{ if $show }} active{{ end }}" id="nav-{{ $id }}-btn-{{ $index }}" data-bs-toggle="pill" data-bs-target="#nav-{{ $id }}-{{ $index }}" 
                     type="button" role="tab" aria-controls="nav-{{ $id }}-{{ $index }}" aria-selected="{{ if eq $index 0 }}true{{ else }}false{{ end }}">
                 {{ $item.Title }}
             </button>

layouts/partials/assets/navbar-item.html

@@ -6,7 +6,7 @@
 
 {{- $menuURL := (or $menu.PageRef $menu.URL) | relLangURL -}}
 {{- $pageURL := $page.RelPermalink | relLangURL -}}
-{{- $isActive := hasPrefix $pageURL $menuURL -}}
+{{- $isActive := or (and (hasPrefix $pageURL $menuURL) (ne $menuURL ("/" | relLangURL))) (eq $pageURL $menuURL) -}}
 {{- $isAlias := $menu.Params.alias -}}
 {{- $isIcon := $menu.Params.icon -}}
 {{- $cue := .cue | default site.Params.main.externalLinks.cue -}}

layouts/partials/assets/navbar.html

@@ -4,7 +4,7 @@
                     including a color mode switcher, version switcher, and collapse panel.
     "page"          Required object reference to the current page.
     "menus"         Optional name of the menu configuration, defaults to "main".
-    "size"          Optional size of the button, either "sm", "md" (default), or "lg".
+    "size"          Optional breakpoint of the navbar toggler, either "xs", "sm", "md" (default), "lg", or "xl".
     "fixed"         Optional flag to indicate the navbar should stick to the top, defaults to false.
     "color"         Optional background color of the navbar, either "primary", "secondary", "success",
                     "danger", "warning", "info", "white", "black", "body", or "body-tertiary". The default color is
@@ -25,25 +25,25 @@
 
     <li class="nav-item dropdown {{ if $collapsed }}d-{{ $size }}-none{{ else }}d-none d-{{ $size }}-block{{ end }}">
         <a class="nav-link dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" aria-label="{{ T "colorMode" }}" aria-expanded="false" id="{{ $id }}-theme{{ if $collapsed }}-collapsed{{ end }}">
-            <span class="theme-icon-active">{{- partial "assets/icon.html" (dict "icon" "fas sun fa-fw") }}</span>{{ if $collapsed }} {{ T "colorMode" }} {{ end }}
+            <span class="theme-icon-active">{{- partial "assets/icon.html" (dict "icon" "fas sun fa-fw") }}</span>{{ if $collapsed }}&nbsp;{{ T "colorMode" }} {{ end }}
             <span class="d-md-none"></span>
         </a>
         <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="{{ $id }}-theme{{ if $collapsed }}-collapsed{{ end }}">
             <li>
                 <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" data-bs-theme-value="light" href="#!">
-                    <span class="theme-icon">{{- partial "assets/icon.html" (dict "icon" "fas sun fa-fw") }}</span>&nbsp;
+                    <span class="theme-icon">{{- partial "assets/icon.html" (dict "icon" "fas sun fa-fw" "spacing" false) }}</span>&nbsp;
                     {{ T "colorLight" }}
                 </a>
             </li>
             <li>
                 <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" data-bs-theme-value="dark" href="#!">
-                    <span class="theme-icon">{{- partial "assets/icon.html" (dict "icon" "fas moon fa-fw") }}</span>&nbsp;
+                    <span class="theme-icon">{{- partial "assets/icon.html" (dict "icon" "fas moon fa-fw" "spacing" false) }}</span>&nbsp;
                     {{ T "colorDark" }}
                 </a>
             </li>
             <li>
                 <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" data-bs-theme-value="auto" href="#!">
-                    <span class="theme-icon">{{- partial "assets/icon.html" (dict "icon" "fas circle-half-stroke fa-fw" ) }}</span>&nbsp;
+                    <span class="theme-icon">{{- partial "assets/icon.html" (dict "icon" "fas circle-half-stroke fa-fw" "spacing" false) }}</span>&nbsp;
                     {{ T "colorAuto" }}
                 </a>
             </li>
@@ -154,6 +154,8 @@
         {{- errorf "partial [assets/navbar.html] - Invalid value for param 'search': %s" $searchParam -}}
     {{- end -}}
 {{- end -}}
+{{- $searchModal := and $search site.Params.navigation.searchModal -}}
+
 
 {{- $enableDarkMode := default false site.Params.main.enableDarkMode -}}
 {{- with .mode -}}
@@ -174,7 +176,32 @@
 {{- $enableLanguage := or $page.IsTranslated site.IsMultiLingual -}}
 
 {{- $logo := site.Params.navigation.logo -}}
-{{- with .logo }}{{ $logo = . }}{{ end -}}
+{{- $logoLight := "" -}}
+{{- $logoDark := "" -}}
+{{- with .logo }}
+    {{ $logo = . }}
+{{- end -}}
+{{- if $enableDarkMode -}}
+    {{ $ext := path.Ext $logo -}}
+    {{- $logoLight = printf "%s-light%s" (strings.TrimSuffix $ext $logo) $ext -}}
+    {{- $logoDark = printf "%s-dark%s" (strings.TrimSuffix $ext $logo) $ext -}}
+    {{- $light := fileExists (path.Join "/static" $logoLight) -}}
+    {{- $dark := fileExists (path.Join "/static" $logoDark) -}}
+    {{- if and $light (not $dark) -}}
+        {{- warnf "partial [assets/navbar.html] - Missing file: %s" $logoDark -}}
+        {{- $logoLight = "" -}}
+        {{- $logoDark = "" -}}
+    {{- end -}}
+    {{- if and (not $light) $dark -}}
+        {{- warnf "partial [assets/navbar.html] - Missing file: %s" $logoLight -}}
+        {{- $logoLight = "" -}}
+        {{- $logoDark = "" -}}
+    {{- end -}}
+    {{- if not (or $light $dark) -}}
+        {{- $logoLight = "" -}}
+        {{- $logoDark = "" -}}
+    {{- end -}}
+{{- end -}}
 
 {{- $title := site.Title -}}
 {{- if .title -}}
@@ -196,7 +223,7 @@
 
 <div class="container-fluid {{ if $fixed }}fixed-top{{ end }} p-0{{ with $class }} {{ . }}{{ end }}">
     {{- partial "assets/page-alert.html" (dict "page" $page) -}}
-    <nav class="navbar navbar-expand-{{ $size }}{{ if $contrast }} navbar-contrast{{ end }}{{ with $color }} bg-{{ . }}{{ end }} p-4"{{ with $theme }} data-bs-theme="{{ . }}"{{ end }}>
+    <nav class="navbar {{ if $fixed }}navbar-fixed-top{{ end }}  navbar-expand-{{ $size }}{{ if $contrast }} navbar-contrast{{ end }}{{ with $color }} bg-{{ . }}{{ end }} p-4"{{ with $theme }} data-bs-theme="{{ . }}"{{ end }}>
         <div class="container-xxl p-0">
             <!-- Insert sidebar toggler when applicable -->
             <div class="d-flex">
@@ -214,8 +241,12 @@
     
             <!-- Insert the brand logo or name -->
             <a class="navbar-brand mx-auto" href="{{ site.Home.RelPermalink }}">
-                {{- if $logo -}}
-                    <img src="{{if $absoluteURL }}{{ absURL $logo }}{{ else }}{{ $logo }}{{ end }}" alt="{{ $title }} logo" height="30">
+                {{- if (and $logoLight $logoDark) -}}
+                    <img src="{{if $absoluteURL }}{{ absURL $logoLight }}{{ else }}{{ $logoLight }}{{ end }}" class="d-none-dark" alt="{{ $title }} logo" height="30">
+                    <img src="{{if $absoluteURL }}{{ absURL $logoDark }}{{ else }}{{ $logoDark }}{{ end }}" class="d-none-light" alt="{{ $title }} logo" height="30">
+                {{- else if $logo -}}
+                    {{ $width := partial "utilities/GetWidth.html" (dict "path" $logo "height" 30) }}
+                    <img src="{{if $absoluteURL }}{{ absURL $logo }}{{ else }}{{ $logo }}{{ end }}" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
                 {{- else -}}
                     <span class="fw-bold">{{ $title }}</span>
                 {{- end -}}
@@ -233,7 +264,7 @@
     
             <div class="navbar-collapse collapse" id="{{ $id }}-collapse">
                 <!-- Insert search input -->
-                {{- if $search }}{{ partial "assets/search-input.html" -}}{{ end -}}
+                {{- if and $search (not $searchModal)  }}{{ partial "assets/search-input.html" }}{{ end -}}
                 
                 <!-- Render top-menu items (maximum depth of 2) -->
                 <ul class="navbar-nav ms-auto">
@@ -258,15 +289,21 @@
                         <li><hr class="dropdown-divider-bg"></li>
                     {{- end -}}
     
+                    <!-- Insert version switcher -->
+                    {{- if $enableVersions -}}
+                        {{- partial "partials/navbar-versions.html" (dict "page" $page "size" $size "collapsed" true "id" .id) -}}
+                        {{- partial "partials/navbar-versions.html" (dict "page" $page "size" $size "collapsed" false "id" .id) -}}
+                    {{- end -}}
+
                     <!-- Insert language switcher if applicable -->
                     {{- if $enableLanguage -}}
                         {{- $currentLang := $page.Language.Lang -}}
                         <li class="nav-item dropdown">
                             <a class="nav-link dropdown-toggle d-{{ $size }}-none" href="#!" role="button" data-bs-toggle="dropdown" aria-label="{{ T "languageSwitcherLabel" }}" aria-expanded="false">
-                                {{- partial "assets/icon.html" (dict "icon" "fas globe fa-fw") }} {{ T "languageSwitcherLabel" }}
+                                {{- partial "assets/icon.html" (dict "icon" "fas globe fa-fw" "spacing" false) }}&nbsp;{{ T "languageSwitcherLabel" }}&nbsp;
                             </a>
                             <a class="nav-link dropdown-toggle d-none d-{{ $size }}-block" href="#!" role="button" data-bs-toggle="dropdown" aria-label="{{ T "languageSwitcherLabel" }}" aria-expanded="false">
-                                {{- partial "assets/icon.html" (dict "icon" "fas globe fa-fw") }}
+                                {{- partial "assets/icon.html" (dict "icon" "fas globe fa-fw" "spacing" true) }}
                             </a>
                             <ul class="dropdown-menu dropdown-menu-end ">
                                 {{- if $page.IsTranslated -}}
@@ -282,25 +319,49 @@
                         </li>
                     {{- end -}}
                                     
-                    <!-- Insert version switcher -->
-                    {{- if $enableVersions -}}
-                        {{- partial "partials/navbar-versions.html" (dict "page" $page "size" $size "collapsed" true "id" .id) -}}
-                        {{- partial "partials/navbar-versions.html" (dict "page" $page "size" $size "collapsed" false "id" .id) -}}
-                    {{- end -}}
-    
                     <!-- Insert color mode switcher -->
                     {{- if $enableDarkMode -}}
-                        <!-- Insert divider -->
+                        {{- partial "partials/navbar-mode.html" (dict "size" $size "collapsed" true "id" .id) -}}
+                        {{- partial "partials/navbar-mode.html" (dict "size" $size "collapsed" false "id" .id) -}}
+                    {{- end -}}
+
+                    <!-- Insert modal search button -->
+                    {{- if $searchModal }}
                         <li class="nav-item py-2 py-md-1 col-12 col-md-auto d-none d-{{ $size }}-block">
                             <div class="vr d-none d-md-flex h-100 mx-md-2"></div>
                         </li>
                         <li><hr class="dropdown-divider-bg"></li>
     
-                        {{- partial "partials/navbar-mode.html" (dict "size" $size "collapsed" true "id" .id) -}}
-                        {{- partial "partials/navbar-mode.html" (dict "size" $size "collapsed" false "id" .id) -}}
-                    {{- end -}}
+                        <a class="nav-link d-{{ $size }}-none" href="#!" role="button" data-bs-toggle="modal" data-bs-target="#search-modal" aria-label="{{ T "ui_search" }}" aria-expanded="false">
+                            {{ partial "assets/icon.html" (dict "icon" "fas magnifying-glass fa-fw") }} {{ T "ui_search" }}
+                        </a>
+                        <a class="nav-link d-none d-{{ $size }}-block" href="#!" role="button" data-bs-toggle="modal" data-bs-target="#search-modal" aria-label="{{ T "ui_search" }}" aria-expanded="false">
+                            {{ partial "assets/icon.html" (dict "icon" "fas magnifying-glass fa-fw") }}
+                        </a>
+                    {{ end -}}
                 </ul>
             </div>
         </div>
     </nav>
 </div>
+
+{{/* Insert modal search element */}}
+{{- if $searchModal }}
+    <div class="modal fade search-modal" tabindex="-1" id="search-modal" aria-labelledby="searchModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
+            <div class="modal-content h-50">
+                <div class="modal-header">
+                    <div class="w-100">
+                        <form class="search position-relative me-auto">
+                            <input id="search-input-modal" class="search-input form-control is-search" tabindex="1" type="search" placeholder="{{ T "ui_search" }}..." aria-label="{{ T "ui_search" }}" autocomplete="off">
+                        </form>
+                    </div>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body p-2">
+                    <div class="search-suggestions bg-body" data-no-results="{{ T "ui_no_results" }}"></div>
+                </div>
+            </div>
+        </div>
+    </div> 
+{{ end -}}

layouts/partials/assets/section-header.html

@@ -20,27 +20,6 @@
     {{- end -}}
 {{- end -}}
 
-<div class="container-fluid p-4 px-xxl-0">
-    {{ with $title }}<p class="display-4 mt-3{{ if and page.IsHome site.Params.home.centerHeadline }} text-center{{ end }}">{{ . }}</p>{{ end }}
-    {{ with $description }} <p class="lead mb-5">{{ . }}</p>{{ end }}
-    {{- if $content -}}
-        <div class="row row-cols-1 row-cols-lg-3 pt-5">
-            <div class="col col-lg-3 d-none d-lg-block"></div>
-            <div class="col col-sm-12 col-lg-6 text-center">
-                <div class="row row-cols-1{{ if ne $sectionHeader "justify-content-center" }} row-cols-sm-2{{ end }} row-gap-5 p-0 align-items-center flex-fill">
-                    {{- if eq $sectionHeader "justify-content-center" -}}
-                        <div class="col p-0 w-50 mx-auto pb-5">{{ partial "partials/section-header-img.html" (dict "title" $title "thumbnail" $thumbnail "icon" $icon )}}</div>
-                        <div class="col fs-md-5 fs-6">{{ $content }}</div>
-                    {{- else if eq $sectionHeader "justify-content-end" -}}
-                        <div class="col p-0">{{ partial "partials/section-header-img.html" (dict "title" $title "thumbnail" $thumbnail "icon" $icon )}}</div>
-                        <div class="col fs-md-5 fs-6 text-sm-start">{{ $content }}</div>
-                    {{- else -}}
-                        <div class="col fs-md-5 fs-6 text-sm-start">{{ $content }}</div>
-                        <div class="col p-0">{{ partial "partials/section-header-img.html" (dict "title" $title "thumbnail" $thumbnail "icon" $icon )}}</div>
-                    {{- end -}}
-                </div>
-            </div>
-            <div class="col col-lg-3 d-none d-lg-block"></div>
-        </div>
-    {{- end -}}
-</div>
+{{ with $title }}<p id="{{ anchorize . }}" class="display-4 pt-4{{ if and page.IsHome site.Params.home.centerHeadline }} text-center{{ end }}">{{ . }}</p>{{ end }}
+{{ with $description }} <p class="lead mb-5">{{ . }}</p>{{ end }}
+{{ $content }}

layouts/partials/assets/section-list.html

@@ -14,7 +14,9 @@
 {{- $moreTitle := .moreTitle -}}
 {{- $sectionURL := .sectionURL -}}
 {{- $nested := .nested | default true -}}
+{{- $simple := .simple | default false -}}
 {{- $paginate := true -}}
+{{- $kind := .kind | default "regular" -}}
 {{- $sort := "date" -}}
 {{- $order := "desc" -}}
 {{- $separator := false -}}
@@ -32,6 +34,8 @@
 {{- $type := "pills" -}}
 {{- $vertical := "false" -}}
 {{- $width := 100 -}}
+{{- $ratio := "" -}}
+{{- $wrap := false -}}
 
 {{- with (index site.Params.sections $section) -}}
     {{- with index . "title" }}{{ $title = or $.title . }}{{ end -}}
@@ -54,13 +58,25 @@
     {{- with index . "type" }}{{ $type = . }}{{ end -}}
     {{- with index . "vertical" }}{{ $vertical = . }}{{ end -}}
     {{- with index . "width" }}{{ $width = . }}{{ end -}}
+    {{- with index . "kind" }}{{ $kind = . }}{{ end -}}
+    {{- with index . "ratio" }}{{ $ratio = . }}{{ end -}}
+    {{- with index . "wrap" }}{{ $wrap = . }}{{ end -}}
 {{- end -}}
 {{ if ne (printf "%T" $nested) "bool" }}
     {{ errorf "partial [assets/section-list.html] - Invalid value for param 'nested'"}}
 {{ end }}
 
-{{ $list := "" }}
-{{ if $nested }}
+{{ $list := slice }}
+{{ if eq $kind "taxonomy" }}
+    {{ $filter := page.Params.filter }}
+    {{ with $filter }}
+        {{ with index site.Taxonomies $section $filter }}
+            {{ $list = .Pages }}
+        {{ end }}
+    {{ else }}
+        {{ $list = where site.Pages (printf ".Params.%s" $section) "!=" nil }}
+    {{ end }}
+{{ else if $nested }}
     {{ $list = where site.RegularPages "Type" "in" $section }}
 {{ else if $home }}
     {{ $sectionPage := site.GetPage "section" $section }}
@@ -88,12 +104,18 @@
         {{- $max = int (math.Min $homepage $max) -}}
     {{ end -}}
 
+    {{ if $simple }}
+        {{ $title = "" }}
+        {{ $background = "" }}
+    {{ end }}
+
     {{- $params := (dict 
         "page" $page
         "list" $list
         "title" $title
         "icon" $icon
         "thumbnail" $thumbnail
+        "ratio" $ratio
         "sectionHeader" $sectionHeader
         "description" $description
         "content" $content
@@ -103,8 +125,8 @@
     -}}
     {{- $partial := "" -}}
 
-    <div class="container-fluid {{ with $background }} bg-{{ . }}{{  end }}">
-        <div class="container-xxl flex-fill p-0">
+    <div class="container-fluid {{ with $background }} bg-{{ . }}{{ end }} p-0">
+        <div class="container-xxl flex-fill p-4 px-xxl-0 pb-5">
             {{- partial "assets/section-header.html" $params -}}
             
             {{ if eq $layout "card" }}
@@ -131,6 +153,7 @@
                     "type" $type
                     "vertical" $vertical
                     "width" $width
+                    "wrap" $wrap
                     ) 
                 -}}
             {{- else -}}

layouts/partials/assets/section-menu.html

@@ -0,0 +1,20 @@
+{{- $page := . -}}
+{{ $items := $page.Parent.Sections }}
+{{ if not $page.Parent.Section }}
+    {{ $items = $page.Sections }}
+{{ end }}
+
+{{- if gt (len $items) 0 }}
+    <nav class="navbar navbar-expand navbar-services p-0 fs-5">
+        <div class="container-fluid p-0 pb-3">
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav">
+                    {{- range $items }}
+                        {{ $active := eq $page.RelPermalink .RelPermalink }}
+                        <li class="nav-item"><a class="nav-link{{ if $active }} active{{ end }}" href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+                    {{- end }}
+                </ul>
+            </div>
+        </div>
+    </nav>
+{{- end }}

layouts/partials/assets/sharing.html

@@ -6,7 +6,7 @@
         {{- if .Site.Params.sharing.reverse }}{{ $order = "desc" }}{{ else }}{{ $order = "asc" }}{{ end -}}
         {{- $sort := .Site.Params.sharing.sort | default "weight" -}}
         {{- $list = sort $list $sort $order -}}
-        <div class="py-3 text-body-secondary hstack gap-2">
+        <div class="py-3 text-body-secondary hstack gap-1">
             {{ T "shareLink" "" }}
             {{- range $index, $item := $list -}}
                 {{- $url := $item.url -}}
@@ -21,11 +21,11 @@
                     {{- $url = "#!" -}}
                     {{- partial "assets/toast.html" (dict "id" $target "message" (printf "%s %s" (T "link")  (T "copiedToClipboard"))) -}}
                 {{- end -}}
-                {{ partial "assets/button.html" (dict "toast" $target "clipboard" $clipboard "href" $url "icon" (printf "%s fa-fw" $item.icon) "class" "btn-social p-0" "label" (T "shareLink" $item.name)) }}
+                {{ partial "assets/button.html" (dict "toast" $target "clipboard" $clipboard "href" $url "icon" (printf "%s fa-fw" $item.icon) "class" "btn-social p-0" "label" (T "shareLink" $item.name) "spacing" false) }}
             {{- end -}}
             {{ if .Site.Params.sharing.webshare }}
                 {{ $attr := dict "data-sharing-title" .Title "data-sharing-description" .Description "data-sharing-url" .Permalink }}
-                {{ partial "assets/button.html" (dict "href" "#!" "icon" "fas share-nodes fa-fw" "id" "btn-webshare" "class" "btn-social p-0" "attributes" $attr "label" (T "shareLink" (T "shareSystem"))) }}
+                {{ partial "assets/button.html" (dict "href" "#!" "icon" "fas share-nodes fa-fw" "id" "btn-webshare" "class" "btn-social p-0" "attributes" $attr "label" (T "shareLink" (T "shareSystem")) "spacing" false) }}
             {{- end -}}
         </div>
     {{- end -}}

layouts/partials/assets/sidebar.html

@@ -9,9 +9,10 @@
     {{- $level := .level -}}
     {{- $baseURL := .baseURL -}}
     {{- $group := .group -}}
+    {{- $data := .menu -}}
 
     {{- $doc_slug := $group.title | urlize -}}
-    {{- $href := printf "%s/" (relLangURL (path.Join $baseURL $doc_slug)) -}}
+    {{- $href := or $group.link (printf "%s/" (relLangURL (path.Join $baseURL $doc_slug))) -}}
     {{- $collapsed := strings.HasPrefix $page.RelPermalink $href -}}
 
     <li class="mb-1">
@@ -28,6 +29,7 @@
                             "level" (add $level 1)
                             "baseURL" $href
                             "group" $item
+                            "menu" $data
                             )
                         }}
                     {{- else -}}
@@ -37,6 +39,8 @@
                             "level" $level
                             "baseURL" $href
                             "title" $item.title
+                            "href" $item.link
+                            "menu" $data
                             )
                         }}
                     {{ end -}}
@@ -47,15 +51,17 @@
 {{ end -}}
 
 {{- define "partials/sidebar/item.html" -}}
-    {{ $page := .page }}
-    {{ $sectionBreak := .sectionBreak }}
+    {{- $page := .page -}}
+    {{- $sectionBreak := .sectionBreak -}}
     {{- $level := .level -}}
-    {{ $baseURL := .baseURL}}
-    {{ $title := .title}}
+    {{- $baseURL := .baseURL -}}
+    {{- $title := .title -}}
+    {{- $href := .href -}}
+    {{- $data := .menu -}}
 
     {{- $doc_slug := $title | urlize -}}
-    {{- $href := printf "%s/" (relLangURL (path.Join $baseURL $doc_slug)) -}}
-    {{ $active := eq $page.RelPermalink $href }}
+    {{- $href := or $href (printf "%s/" (relLangURL (path.Join $baseURL $doc_slug))) -}}
+    {{- $active := eq (strings.TrimSuffix "/" $page.RelPermalink) (strings.TrimSuffix "/" $href) -}}
 
     {{ if eq $level 0}}
         <li class="mt-1 mb-1 {{ if $sectionBreak }}border-top{{ end }}"></li>
@@ -63,17 +69,27 @@
         <li>
             <ul class="btn-toggle-nav list-unstyled fw-bold pb-1">
                 <li>
-                    <a href="{{ $href }}" class="sidebar-item text-decoration-none rounded {{ if $active }}active{{ end }}">
-                        {{ $title }}
-                    </a>      
+                    {{ $class := "sidebar-item text-decoration-none rounded" }}
+                    {{ if $active }}{{ $class = printf "%s active" $class }}{{ end }}
+                    {{ $link := partial "utilities/link.html" (dict "destination" $href "text" $title "class" $class "page" $page) }}
+                    {{ if $link }}
+                        {{ print $link | safeHTML }}
+                    {{ else }}
+                        {{- errorf "partial [utilities/sidebar.html] - Invalid link in file: %s" ($page.Scratch.Get "sidebarFilename") -}}
+                    {{ end }}
                 </li>
             </ul>
         </li>
     {{ else }}
         <li>
-            <a href="{{ $href }}" class="sidebar-item text-decoration-none rounded small {{ if $active }}active{{ end }}">
-                {{ $title }}
-            </a>      
+            {{ $class := "sidebar-item text-decoration-none rounded small" }}
+            {{ if $active }}{{ $class = printf "%s active" $class }}{{ end }}
+            {{ $link := partial "utilities/link.html" (dict "destination" $href "text" $title "class" $class "page" $page) }}
+            {{ if $link }}
+                {{ print $link | safeHTML }}
+            {{ else }}
+                {{- errorf "partial [utilities/sidebar.html] - Invalid link in file: %s" ($page.Scratch.Get "sidebarFilename") -}}
+            {{ end }}
         </li>
     {{ end }}
 {{ end -}}
@@ -94,6 +110,7 @@
                     "level" (add $level 1)
                     "baseURL" $baseURL
                     "group" $item
+                    "menu" $data
                     )
                 }}
             {{- else }}
@@ -103,6 +120,8 @@
                     "level" $level
                     "baseURL" $baseURL
                     "title" $item.title
+                    "href" $item.link
+                    "menu" $data
                     )
                 }}
             {{- end }}

layouts/partials/assets/toc-main.html

@@ -0,0 +1,20 @@
+{{ $headings := .headings | default slice }}
+{{- range .Fragments.Headings }}
+    {{- range .Headings }}
+        {{- $headings = $headings | append .Title -}}
+    {{- end -}}
+{{- end -}}
+
+{{- if gt (len $headings) 1 }}
+<nav class="navbar navbar-expand navbar-services p-0 fs-5">
+    <div class="container-fluid p-0 pb-3 border-bottom">
+        <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav">
+                    {{- range $headings }}
+                        <li class="nav-item"><a class="nav-link" href="#{{ anchorize . }}">{{ . }}</a></li>
+                    {{- end }}
+                </ul>
+        </div>
+    </div>
+</nav>
+{{- end }}

layouts/partials/assets/toc.html

@@ -1,7 +1,17 @@
-{{ $items := len (findRE "<li.*?>(.|\n)*?</li>" .TableOfContents) -}}
-{{ if (gt $items 1) -}}
+{{- $page := .page -}}
+{{- $download := .download -}}
+
+{{ $items := len (findRE "<li.*?>(.|\n)*?</li>" $page.TableOfContents) -}}
+{{ if or $download (gt $items 1) -}}
     <div class="toc toc-sidebar mb-5 my-md-0 ps-xl-3 mb-lg-5 p-3 text-body-secondary sticky-top">
+        {{ with $download }}
+            <div class="mb-5">
+                {{ $attr := dict "download" (path.Base .) }}
+                {{ partial "assets/button.html" (dict "href" . "title" (T "download" ) "color" "primary" "outline" "true" "icon" "fas download" "attributes" $attr) }}
+            </div>
+        {{ end }}
+
         <strong class="d-block h6 my-2 pb-2 border-bottom">{{ T "toc" }}</strong>
-        {{ .TableOfContents }}
+        {{ $page.TableOfContents }}
     </div>
 {{ end -}}

layouts/partials/footer/scripts.html

@@ -6,6 +6,14 @@
 {{- $core := .core | default false -}}
 {{- $skipTemplate := .skipTemplate | default false -}}
 
+{{- $state := "async" -}}
+{{- with .state }}{{ $state = . }}{{ end -}}
+{{- if or $header (eq $state "immediate") }}{{ $state = "" }}{{ end -}}
+{{- $supportedStates := slice "defer" "async" "immediate" -}}
+{{- if and $state (not (in $supportedStates $state)) -}}
+    {{- errorf "partial [footer/script.html] - Invalid value for param 'processing': %s" $state -}}
+{{- end -}}
+
 {{- $modules := "" -}}
 {{ if $core }}
     {{- $modules = site.Params.modules.core -}}
@@ -26,9 +34,9 @@
 
 {{- if gt (len $js.Content) 0 -}}
     {{- if not hugo.IsProduction -}}
-        <script src="{{ if $absoluteURL }}{{ $js.Permalink }}{{ else }}{{ $js.RelPermalink }}{{ end }}"></script>
+        <script src="{{ if $absoluteURL }}{{ $js.Permalink }}{{ else }}{{ $js.RelPermalink }}{{ end }}"{{ with $state }} {{ . | safeHTMLAttr }}{{ end }}></script>
     {{ else -}}
         {{ $js = $js | minify | fingerprint -}}
-        <script src="{{ if $absoluteURL }}{{ $js.Permalink }}{{ else }}{{ $js.RelPermalink }}{{ end }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>
+        <script src="{{ if $absoluteURL }}{{ $js.Permalink }}{{ else }}{{ $js.RelPermalink }}{{ end }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"{{ with $state}} {{ . | safeHTMLAttr }}{{ end }}></script>
     {{ end -}}
 {{ end -}}

layouts/partials/footer/social.html

@@ -5,27 +5,31 @@
     {{ warnf "DEPRECATED: parameter `Params.home.socialCaption` has been deprecated in release v0.18"}}
 {{ end }}
 
-{{- $tab := site.Params.main.externalLinks.tab -}}
-<div class="container-fluid">
-    <div class="row row-cols-1 row-cols-sm-4 bg-primary p-3 bg-opacity-{{ .Site.Params.style.themeOpacity | default "25" | safeHTML }} align-items-center">
-        <div class="col col-md-2 d-none d-md-block"></div>
-        <div class="col col-sm-6 col-md-4">
-            {{ if gt .Site.Menus.social 0 }}
-                <div class="fs-3 fw-bold">{{ or .Site.Params.footer.socialTitle .Site.Params.social.title }}</div>
-                <p>{{ or .Site.Params.footer.socialCaption .Site.Params.social.caption }}</p>
-            {{ end }}
+{{ if gt .Site.Menus.social 0 }}
+    {{- $tab := site.Params.main.externalLinks.tab -}}
+    <div class="container-fluid bg-primary bg-opacity-{{ .Site.Params.style.themeOpacity | default "25" | safeHTML }}">
+        <div class="container-xxl px-4 px-xxl-0">
+            <div class="row row-cols-2 py-3 align-items-center">
+                <div class="col col-6">
+                    <div class="row justify-content-end p-0">
+                        <div class="col-12 col-md-8 p-0">
+                            <div class="fs-3 fw-bold">{{ or .Site.Params.footer.socialTitle .Site.Params.social.title }}</div>
+                            <p>{{ or .Site.Params.footer.socialCaption .Site.Params.social.caption }}</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col col-6 text-sm-start">
+                    {{ range .Site.Menus.social -}}
+                        <a href="{{ .URL }}" {{ if $tab }} target="_blank" rel="noopener noreferrer"{{ end }} aria-label="{{ .Name | safeHTML }}" class="text-decoration-none link-secondary d-inline p-2">
+                            {{ if hasPrefix .Pre "<i" }}
+                                {{ .Pre | safeHTML }}
+                            {{ else }}
+                                {{ partial "assets/icon.html" (dict "icon" (printf "%s fa-2x" .Pre) )}}
+                            {{ end }}
+                        </a>
+                    {{ end -}}
+                </div>
+            </div>
         </div>
-        <div class="col text-sm-start text-center col-sm-6 col-md-4">
-            {{ range .Site.Menus.social -}}
-                <a href="{{ .URL }}" {{ if $tab }} target="_blank" rel="noopener noreferrer"{{ end }} aria-label="{{ .Name | safeHTML }}" class="text-decoration-none link-secondary d-inline p-2">
-                    {{ if hasPrefix .Pre "<i" }}
-                        {{ .Pre | safeHTML }}
-                    {{ else }}
-                        {{ partial "assets/icon.html" (dict "icon" (printf "%s fa-2x" .Pre) )}}
-                    {{ end }}
-                </a>
-            {{ end -}}
-        </div>
-        <div class="col col-md-2 d-none d-md-block"></div>
     </div>
-</div>
+{{ end }}

layouts/partials/head/favicon.html

@@ -2,10 +2,14 @@
 {{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}}
 {{ if .Site.Params.favicon.logo -}}
     {{ $favicon := resources.Get .Site.Params.favicon.logo -}}
-    {{ range $i := .Site.Params.favicon.sizes -}} 
-        {{ $image := $favicon.Resize (printf "%dx%d CatmullRom" $i $i) -}}
-        <link rel="icon" type="image/png" sizes="{{$i}}x{{$i}}" href="{{ if $absoluteURL }}{{ $image.Permalink }}{{ else }}{{ $image.RelPermalink }}{{ end }}">
-    {{ end -}} 
-    {{ $image := $favicon.Resize "180x CatmullRom" -}}
-    <link rel="apple-touch-icon" sizes="180x180" href="{{ if $absoluteURL }}{{ $image.Permalink }}{{ else }}{{ $image.RelPermalink }}{{ end }}">
+    {{- if $favicon -}}
+        {{ range $i := .Site.Params.favicon.sizes -}} 
+            {{ $image := $favicon.Resize (printf "%dx%d CatmullRom" $i $i) -}}
+            <link rel="icon" type="image/png" sizes="{{$i}}x{{$i}}" href="{{ if $absoluteURL }}{{ $image.Permalink }}{{ else }}{{ $image.RelPermalink }}{{ end }}">
+        {{ end -}} 
+        {{ $image := $favicon.Resize "180x CatmullRom" -}}
+        <link rel="apple-touch-icon" sizes="180x180" href="{{ if $absoluteURL }}{{ $image.Permalink }}{{ else }}{{ $image.RelPermalink }}{{ end }}">
+    {{ else }}
+        {{- errorf "partial [head/favicon.html] - Cannot find file: %s" .Site.Params.favicon.logo -}}
+    {{ end }}
 {{ end -}}

layouts/partials/head/head.html

@@ -3,7 +3,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     {{ hugo.Generator}}
-    {{ partial "head/stylesheet.html" -}}
+    {{ partialCached "head/stylesheet-core.html" . -}}
     {{- $modules := site.Params.modules.optional | intersect .Page.Params.modules -}}
     {{- range $index, $mod := $modules -}}
         {{- $source := printf "scss/%s.scss" $mod -}}

layouts/partials/head/stylesheet-core.html

@@ -0,0 +1,3 @@
+{{/* Wrapper for the stylesheet partial with default arguments. */}}
+{{/* Added to avoid interference with the argument of partialCached. */}}
+{{ partial "head/stylesheet.html" -}}

layouts/partials/head/stylesheet.html

@@ -1,5 +1,14 @@
+{{- $transpiler := site.Params.main.build.transpiler | default "libsass" -}}
+{{- $supportedTranspilers := slice "libsass" "dartsass" -}}
+{{- if not (in $supportedTranspilers $transpiler) -}}
+    {{- errorf "partial [head/stylesheet.html] - Invalid value for param 'transpiler': %s" $transpiler -}}
+{{- end -}}
+
 {{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}}
-{{- $source := .source | default "scss/app.scss" -}}
+{{- $source := .source }}
+{{- if not $source -}}
+    {{- if eq $transpiler "dartsass" }}{{ $source = "scss/app-dart.scss" }}{{ else }}{{ $source = "scss/app.scss" }}{{ end -}}
+{{- end -}}
 {{- $target := .target | default "css/main.css" -}}
 {{- $page := .page -}}
 {{- $core := .core | default true -}}
@@ -21,6 +30,7 @@
 {{- if site.Params.navigation.fixed }}{{ $navbarOffset = site.Params.navigation.offset | default "4em" }}{{ end }}
 {{- $vars := dict 
     "theme-font"              (default "Inter" site.Params.style.themeFont)
+    "font-size-base"          (default "1rem" site.Params.style.fontSizeBase)
     "primary"                 (default "#007bff" site.Params.style.primary)
     "secondary"               (default "#6c757d" site.Params.style.secondary)
     "success"                 (default "#198754" site.Params.style.success)
@@ -36,22 +46,24 @@
     "dark-mode-tint"          (default "0%" site.Params.style.darkModeTint)
 -}}
 
-{{- $options := (dict "transpiler" "libsass" "targetPath" $target "enableSourceMap" (not hugo.IsProduction) "vars" $vars) -}}
+{{- $options := (dict "transpiler" $transpiler "targetPath" $target "enableSourceMap" (not hugo.IsProduction) "vars" $vars) -}}
 {{- $bundle := partial "utilities/bundle" (dict "match" $source "filename" (printf "scss/bundle-%d.scss" now.UnixNano) "modules" $modules "basepath" "scss" "debugging" site.Params.debugging.showSCSS) -}}
 
-{{- $css := $bundle | resources.ExecuteAsTemplate $target . | toCSS $options -}}
+{{- if gt ($bundle.Content | len) 0 }}
+    {{- $css := $bundle | resources.ExecuteAsTemplate $target . | toCSS $options -}}
 
-{{ if $core }}
-    {{- partial "head/icons.html" (dict "css" $css) -}}
-{{ end }}
-{{- if site.Params.style.purge -}}
-    {{- $post_options := dict "config" "config" -}}
-    {{- $css = $css | resources.PostCSS $post_options -}}
-{{- end -}}
+    {{ if $core }}
+        {{- partial "head/icons.html" (dict "css" $css) -}}
+    {{ end }}
+    {{- if site.Params.style.purge -}}
+        {{- $post_options := dict "config" "config" "noMap" hugo.IsProduction -}}
+        {{- $css = $css | resources.PostCSS $post_options -}}
+    {{- end -}}
 
-{{- if not hugo.IsProduction -}}
-    <link rel="stylesheet" href="{{ if $absoluteURL }}{{ $css.Permalink }}{{ else }}{{ $css.RelPermalink }}{{ end }}">
-{{- else -}}
-    {{- $css = $css | fingerprint | resources.PostProcess -}}
-    <link rel="stylesheet" href="{{ if $absoluteURL }}{{ $css.Permalink }}{{ else }}{{ $css.RelPermalink }}{{ end }}" integrity="{{ $css.Data.Integrity }}" crossorigin="anonymous">
+    {{- if not hugo.IsProduction -}}
+        <link rel="stylesheet" href="{{ if $absoluteURL }}{{ $css.Permalink }}{{ else }}{{ $css.RelPermalink }}{{ end }}">
+    {{- else -}}
+        {{- $css = $css | minify | fingerprint | resources.PostProcess -}}
+        <link rel="stylesheet" href="{{ if $absoluteURL }}{{ $css.Permalink }}{{ else }}{{ $css.RelPermalink }}{{ end }}" integrity="{{ $css.Data.Integrity }}" crossorigin="anonymous">
+    {{- end -}}
 {{- end -}}

layouts/partials/home/featured.html

@@ -1,21 +0,0 @@
-<div class="container-fluid flex-fill feature">
-    <div class="row row-cols-1 row-cols-sm-4 h-100 bg-primary px-4 py-5 bg-opacity-{{ .Site.Params.style.themeOpacity | default "25" | safeHTML }} align-items-center">
-        <div class="col col-lg-2 d-none d-lg-block bg-info order-1"></div>
-        <div class="col col-sm-6 col-lg-4 text-center text-sm-start order-3 order-sm-2">
-            <p class="display-4">{{ .Title }}</p>
-            <p>{{ .Content }}<p>
-        </div>
-        <div class="col text-sm-start text-center col-sm-6 col-lg-4 order-2 order-sm-3">
-            {{- $thumbnail := (or (and (reflect.IsMap .Params.Thumbnail) .Params.Thumbnail.url) .Params.Thumbnail) -}}
-            {{- $thumbnail = or $thumbnail .Site.Params.home.featurePhoto -}}
-            {{ if .Site.Params.home.featurePhoto }}
-                {{ warnf "DEPRECATED: parameter `Params.home.featurePhoto` has been deprecated in release v0.18"}}
-            {{ end }}
-            {{- if $thumbnail -}}
-                {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" "16x9" "outerClass" "img-wrap" "innerClass" "rounded" "title" .Site.Title) -}}
-            {{ end }}
-            <div class="pb-5 d-block d-sm-none"></div>
-        </div>
-        <div class="col col-lg-2 d-none d-lg-block bg-info order-4"></div>
-    </div>
-</div>

layouts/partials/list/featured.html

@@ -0,0 +1,93 @@
+{{- $page := .page -}}
+{{- $headings := .headings -}}
+{{- $orientation := .orientation | default "stacked" -}}
+{{- $actions := .actions -}}
+{{- $width := .width | default 6 }}
+{{- if or (lt $width 1) (gt $width 12) -}}
+    {{- $width = 6 -}}
+    {{- warnf "partial [list/featured.html] - Invalid column width: %d" $width -}}
+{{ end -}}
+{{- $justify := .justify | default "center" -}}
+{{- $supportedJustify := slice "start" "end" "center" "between" "around" "evenly" -}}
+{{- if not (in $supportedJustify $justify) -}}
+    {{- errorf "partial [list/featured.html] - Invalid value for param 'justify': %s" $justify -}}
+{{- end -}}
+{{- $align := .align | default "center" -}}
+{{- $supportedAlign := slice "start" "end" "center" -}}
+{{- if not (in $supportedAlign $align) -}}
+    {{- errorf "partial [list/featured.html] - Invalid value for param 'align': %s" $align -}}
+{{- end -}}
+{{- $breadcrumb := and (not $page.IsHome) site.Params.navigation.breadcrumb -}}
+
+{{- define "partials/list/featured-body.html" }}
+    {{- $page := .page -}}
+    {{- $headings := .headings -}}
+    {{- $orientation := .orientation | default "stacked" -}}
+    {{- $actions := .actions -}}
+    {{- $align := .align | default "center" -}}
+
+    <div class="text-{{ $align }}">
+        {{ with $page.Title }}<p class="display-4">{{ . }}</p>{{ end }}
+        <span class="fs-5 text-muted">{{ $page.Description }}</span>
+
+        {{ if $actions }}
+            <div class="hstack{{ if gt (len $actions) 1 }} gap-3{{ end }} justify-content-{{ $align}} pt-5 pt-md-3">
+                {{ range $actions }}
+                    {{ partial "assets/button.html" (dict "href" .url "icon" .icon "title" .title "outline" .outline "order" "last" "justify" "start") }}
+                {{ end }}
+            </div>
+        {{ end }}
+    </div>
+{{- end -}}
+
+{{- define "partials/list/featured-illustration.html" }}
+    {{- $page := .page -}}
+    {{- $style := printf "img-wrap mx-auto mx-md-0 %s" .style -}}
+
+    {{ if $page.Params.icon }}
+        {{- $icon := (or (and (reflect.IsMap $page.Params.Icon) $page.Params.Icon.url) $page.Params.Icon) -}}
+        {{- $mode := and (reflect.IsMap $page.Params.Icon) $page.Params.Icon.mode -}}
+        {{ if eq (lower (path.Ext $icon)) ".json" }}
+            {{ partial "assets/animation.html" (dict "data" $icon "mode" $mode "loop" false "hover" true "class" "col-6 mx-auto text-center") }}
+        {{ else }}
+            {{ partial "assets/icon.html" (dict "icon" "mode" $mode $icon "wrapper" "col-6 mx-auto text-center")}}
+        {{ end }}
+    {{ else }}
+        {{- $thumbnail := (or (and (reflect.IsMap $page.Params.Thumbnail) $page.Params.Thumbnail.url) $page.Params.Thumbnail) -}}
+        {{- if $thumbnail }}
+            {{ partial "assets/image.html" (dict "url" $thumbnail "ratio" "16x9" "outerClass" $style "innerClass" "rounded" "title" .Site.Title) }}
+        {{ end }}
+    {{ end }}
+{{- end -}}
+
+<div class="container-fluid p-0 {{ with site.Params.home.feature.color }} bg-{{ . }} bg-opacity-{{ site.Params.style.themeOpacity | default "25" | safeHTML }}{{ end }}">
+    <div class="container-xxl {{ if $breadcrumb }} pb-4 px-4 {{ else }} p-4 {{ end }} px-xxl-0 {{ if site.Params.home.fullCover }} fullscreen{{ end }} d-flex flex-column">
+        {{ if $breadcrumb }}
+            <div>{{ partial "assets/breadcrumb.html" $page }}</div>
+        {{ end -}}
+
+        {{ if eq $orientation "stacked" }}
+            <div class="row justify-content-center flex-fill">
+                <div class="col-12 col-md-{{ $width }} m-auto text-center">
+                    {{ partial "partials/list/featured-illustration.html" (dict "page" $page "style" "pb-4") }}
+                    {{ partial "partials/list/featured-body.html" (dict "page" $page "headings" $headings "orientation" $orientation "actions" $actions) }}
+                </div>
+            </div>
+        {{ else }}
+            <div class="flex-fill row row-cols-1 row-cols-md-2 justify-content-{{ $justify }}">
+                <div class="col col-12 col-md-{{ $width }} order-1 order-md-0 my-md-auto">
+                    {{ partial "partials/list/featured-body.html" (dict "page" $page "headings" $headings "orientation" $orientation "actions" $actions "align" $align) }}
+                </div>
+                <div class="col col-12 col-md-{{ if gt $width 6 }}{{ sub 12 $width }}{{ else }}{{ $width }}{{ end }} order-0 order-md-1 text-center my-md-auto">
+                    {{ partial "partials/list/featured-illustration.html" (dict "page" $page "style" "pb-4 pb-md-0") }}
+                </div>
+            </div>
+        {{ end }}
+
+        {{ with $headings }}
+            <div class="col col-12 p-0 pt-5">
+                {{ partial "assets/toc-main.html" (dict "headings" .) }}
+            </div>
+        {{ end }}
+    </div>
+</div>

layouts/partials/utilities/GetArg.html

@@ -0,0 +1,23 @@
+<!-- 
+    Retrieve the value from a given argument within the shortcode context. If a parent is set and merge is false, the
+    value of the parent's argument is retrieved when the current context is unavailable. If merge is true, the parent's
+    value is merged with the value of the shortcode context, separated by a single space.
+-->
+
+{{ $page := .page -}}
+{{ $arg := .arg -}}
+{{ $merge := .merge -}}
+{{ $val := "" }}
+{{ with $page.Get $arg }}{{ $val = . }}{{ end }}
+
+{{- with $page.Parent -}}
+    {{ with .Get $arg }}
+        {{ if $merge }}
+            {{ $val = trim (printf "%s %s" . $val) " " }}
+        {{ else if not $val }}
+            {{ $val = . }}
+        {{ end }}
+    {{ end }}
+{{- end -}}
+
+{{- return $val -}}

layouts/partials/utilities/GetImage.html

@@ -1,18 +1,28 @@
 <!-- 
-    Retrieve a local or remote resource compatible with Hugo's image processing. The path of a remote image is
-    rewritten to ensure processed files are stored in the final '/img' folder. The partial returns nil if the
-    resource cannot be found or is incompatibile. The partial supports the following arguments:
-    "url":          Required path or url of the image, e.g. "img/example.jpg" or "https://example.com/img.jpg"
+    Retrieve a local or remote resource compatible with Hugo's image processing. If the url starts with 'http', the
+    image is retrieved from an external location. Else, the url is matched with a page resource and site asset (in that
+    order). The path of a remote image is rewritten to ensure processed files are stored in the final '/img' folder. The
+    partial returns nil if the resource cannot be found or is incompatibile. The partial supports the following
+    arguments:
+    "url"           Required path or url of the image, e.g. "img/example.jpg" or "https://example.com/img.jpg"
+    "page"          Optional page context, used to retrieve an image from page resources.
 -->
 
 {{ $url := .url -}}
+{{ $page := .page -}}
+
 {{ $supportedMediaTypes := slice "image/png" "image/jpeg" "image/gif" "image/tiff" "image/bmp" "image/webp" -}}
 {{ $img := "" }}
 {{ $remote := hasPrefix (lower $url) "http" }}
 {{ if $remote }}
     {{ $img = resources.GetRemote $url -}}
 {{ else }}
-    {{ $img = resources.GetMatch $url -}}
+    {{ if $page }}
+        {{ $img = $page.Resources.Get $url -}}
+    {{ end }}
+    {{ if not $img }}
+        {{ $img = resources.GetMatch $url }}
+    {{ end }}
 {{ end }}
 
 {{ with $img -}}

layouts/partials/utilities/GetMenu.html

@@ -1,12 +1,17 @@
 {{- $page := .page -}}
 {{- $version := .version -}}
+{{- $sidebarFilename := "" -}}
 
 {{- $menu := "" -}}
 {{- if $page.IsPage -}}
-    {{- $menu = index site.Data (printf "%s-%s" $page.Section $version) -}}
+    {{- $sidebarFilename = printf "%s-%s" $page.Section $version -}}
+    {{- $menu = index site.Data $sidebarFilename -}}
     {{ if not $menu }}
-        {{ $menu = index site.Data $page.Section }}
+        {{- $sidebarFilename = $page.Section -}}
+        {{ $menu = index site.Data $sidebarFilename }}
     {{ end }}
 {{- end -}}
 
+{{ if $menu }}{{ with $sidebarFilename }}{{ $page.Scratch.Set "sidebarFilename" (path.Join "data" .) }}{{ end }}{{ end -}}
+
 {{- return $menu -}}

layouts/partials/utilities/GetWidth.html

@@ -0,0 +1,17 @@
+{{ $path := .path }}
+{{ $height := .height }}
+{{ $width := "" }}
+
+{{ if eq (path.Ext $path) ".svg" }}
+    {{ $path := path.Join "static" .path }}
+    {{ if fileExists $path }}
+        {{ with findRE `viewBox="\d+[\s,]\d+[\s,]\d+[\s,]\d+"` (readFile $path) 1 }}
+            {{ $content := split (index (split (index . 0) `"`) 1) " " }}
+            {{ $viewbox_width := float (index $content 2) }}
+            {{ $viewbox_height := float (index $content 3) }}
+            {{ $width = int (math.Round (mul (div $height $viewbox_height) $viewbox_width)) }}
+        {{ end }}
+    {{ end }}
+{{ end }}
+
+{{ return $width }}

layouts/partials/utilities/ProcessContent.html

@@ -0,0 +1,13 @@
+<!-- 
+    Purges any HTML comments from raw content, if applicable. The partial supports the following arguments:
+    "page"          Required page context, used to render shortcodes properly.
+    "raw"           Raw page content, e.g. .Page.RawContent.
+-->
+
+{{ $page := .page -}}
+{{ $raw := .raw -}}
+{{- if site.Params.debugging.purgeHTMLComments -}}
+    {{- $raw = replaceRE "<!--(.|\n)*?-->" "" $raw -}}
+{{- end -}}
+{{ $content := emojify $raw | $page.RenderString }}
+{{ return $content }}

layouts/partials/utilities/link.html

@@ -3,43 +3,74 @@
     {{- errorf "partial [utilities/link.html] - Missing param 'destination'" -}}
 {{- end -}}
 
+{{- $error := false -}}
 {{- $target := "" -}}
 {{- $rel := "" -}}
 {{- $case := .case | default true }}
 {{- $cue := .cue | default site.Params.main.externalLinks.cue -}}
 {{- $tab := .tab | default site.Params.main.externalLinks.tab -}}
 {{- $isExternal := ne (urls.Parse (absURL $destination)).Host (urls.Parse site.BaseURL).Host -}}
-
-{{ $text := .text }}
-{{- if not $text -}}
-    {{ if $isExternal }}
-        {{ $text = (urls.Parse (absURL $destination)).Host }}
-    {{ else }}
-        {{ $target := site.GetPage $destination }}
-        {{ if not $target }}
-            {{- errorf "partial [utilities/link.html] - Cannot find page: %s" $destination -}}
-        {{ else }}
-            {{ $text = $target.Title }}
-            {{ if not $case }}{{ $text = lower $text }}{{ end }}
-            {{ $destination = $target.RelPermalink }}
-        {{ end }}
-    {{ end }}
-{{- end -}}
+{{- $page := .page -}}
+{{- $anchor := "" -}}
+{{- $text := .text -}}
+{{- $class := .class -}}
 
 {{- if $isExternal -}}
+    {{- if not $text -}}
+        {{- $text = (urls.Parse (absURL $destination)).Host -}}
+    {{- end -}}
+
     {{- if $tab -}}
         {{- $target = "_blank" -}}
         {{- $rel = "noopener noreferrer" -}}
     {{- end -}}
 
     {{- if $cue -}}
-        {{ $suffix := partial "assets/icon.html" (dict "icon" "fas up-right-from-square fa-2xs") }}
+        {{ $suffix := partial "assets/icon.html" (dict "icon" "fas up-right-from-square fa-2xs" "spacing" false) }}
         {{- $text = printf "%s %s" $text $suffix | safeHTML -}}
     {{- end -}}
-{{ else }}
-    {{ $destination = relLangURL $destination }}
+{{- else -}}
+    {{- if strings.Contains $destination "#" }}
+        {{ $segments := split $destination "#" }}
+        {{- if ne (len $segments) 2 }}
+            {{- errorf "partial [utilities/link.html] - Malformed path, expected one anchor '#' only: %s" $destination -}}
+        {{ else }}
+            {{- $destination = index $segments 0 -}}            
+            {{- $anchor = index $segments 1 -}}            
+        {{ end }}
+    {{ end }}
+    {{- $destination = strings.TrimSuffix "/" $destination -}}
+    {{- $ref := $page.GetPage $destination -}}
+
+    {{- if not $ref }}
+        {{- $segments := split $destination "/" -}}
+        {{- if and (hasPrefix $destination "/")  (gt (len $segments) 1) -}}
+            {{- $prefix := index $segments 1 -}}
+            {{- $page := .Page -}}
+            {{ with index (where site.Sites "Language.Lang" $prefix) 0 }}
+                {{- $path := printf "/%s" (strings.TrimPrefix (printf "/%s/" $prefix) $destination) }}
+                {{- $ref = .GetPage $path -}}
+            {{ end }}
+        {{- end -}}
+    {{- end -}}
+
+    {{- if not $ref -}}
+        {{- errorf "partial [utilities/link.html] - Cannot find page: %s" $destination -}}
+        {{- $error = true -}}
+    {{- else -}}
+        {{- $destination = $ref.RelPermalink -}}
+        {{- with $anchor }}{{ $destination = printf "%s#%s" (strings.TrimSuffix "/" $destination) . -}}{{ end -}}
+        {{- if not $text -}}
+            {{- if $anchor -}}
+                {{- $text = $anchor -}}
+            {{- else -}}
+                {{- $text = $ref.LinkTitle -}}
+            {{- end -}}
+        {{ end -}}
+        {{- if not $case }}{{ $text = lower $text }}{{ end -}}
+    {{- end -}}
 {{- end -}}
 
-{{- $class := .class -}}
-
-<a {{ with $class }}class="{{ . }}" {{ end }}href="{{ $destination | safeURL }}"{{ with $target }} target="{{ . }}"{{ end }}{{ with $rel }} rel="{{ . }}"{{ end }}>{{ $text }}</a>
+{{ if not $error -}}
+    <a {{ with $class }}class="{{ . }}" {{ end }}href="{{ $destination | safeURL }}"{{ with $target }} target="{{ . }}"{{ end }}{{ with $rel }} rel="{{ . }}"{{ end }}>{{ $text }}</a>
+{{- end }}

layouts/shortcodes/abbr.html

@@ -0,0 +1,68 @@
+<!-- 
+    Creates an HTML element that shows the long form of an abbrevitation. The abbreviation data is centrally stored in a
+    data file. By default, the shortcode uses "abbr.yaml" with translation support.
+    
+    The data file is expected to store key-value pairs, where "id" is the lower-case abbrevation and "long" its long
+    form. The following example illustrates this using YML:
+
+    - id: css
+      long: "Cascading Style Sheets"
+
+    The shortcode supports the following arguments:
+    "key"           Required case-insensitive key of the abbreviation. In shorthand notation, this is the first (and
+                    only) matched argument.
+    "data"          Optional filename of the abbrevation input. It defaults to "abbr.yaml" with translation support.
+                    You can omit the file extension. The file should reside in the "data" folder. The data supports
+                    language extensions. For example, "abbr.en.yaml" refers to the English translation of the
+                    abbrevation data. The filename "abbr.yaml" is used when no suitable translation is found.
+    "class"         Optional class attribute of the abbr element. For example, specify "initialism" for a slightly
+                    smaller font size.
+-->
+
+{{ $error := false }}
+
+{{ $key := "" }}
+{{- if .IsNamedParams }}{{ $key = .Get "key" }}{{ else }}{{ $key = .Get 0 }}{{ end }}
+
+{{ if not $key -}}
+    {{ errorf "Missing param 'key': %s" .Position -}}
+    {{ $error = true }}
+{{ end -}}
+
+{{- $data := .Get "data" | default "abbr" -}}
+{{ if not $data -}}
+    {{ errorf "Missing param 'data': %s" .Position -}}
+    {{ $error = true }}
+{{ end -}}
+
+{{- $class := .Get "class" | default "" -}}
+
+{{ if not $error }}
+    {{/* Try language-specific file first */}}
+    {{ $path := path.Join (path.Dir $data) (printf "%s.%s" (path.BaseName $data) .Page.Language.Lang) (path.Ext $data) }}
+    {{ $entries := index site.Data $path }}
+    {{/* Use exact provided path as backup */}}
+    {{ if not $entries -}}
+        {{ $entries = index site.Data $data }}
+    {{ end }}
+    {{ if not $entries -}}
+        {{ errorf "Invalid abbrevation data '%s': %s" $data .Position -}}
+        {{ $error = true }}
+    {{ end -}}
+
+    {{ $title := "" }}
+    {{ if not $error }}
+        {{ $elements := (where $entries "id" (lower $key)) }}
+        {{ if gt (len $elements) 0 }}
+            {{ $title = index (index $elements 0) "long" }}
+        {{ end -}}
+        {{ if not $title -}}
+            {{ errorf "Cannot find value for '%s': %s" $key .Position -}}
+            {{ $error = true }}
+        {{ end -}}
+    {{ end }}
+
+    {{ if not $error }}
+        <abbr {{ with $class }}class="{{ . }}"{{ end }} title="{{ $title }}" tabindex="0">{{ $key }}</abbr>
+    {{ end }}
+{{ end }}

layouts/shortcodes/accordion-item.html

@@ -12,7 +12,7 @@
 {{- end -}}
 
 {{- $id := .Ordinal -}}
-{{ $header := .Get "header" -}}
+{{ $header := .Get "header" | default "" -}}
 {{ if not $header -}}
     {{ if .Parent }}
         {{ errorf "Missing value for param 'header': %s" .Parent.Position -}}
@@ -21,7 +21,7 @@
     {{ end }}
 {{ end -}}
 
-{{ $class := .Get "class" -}}
+{{ $class := .Get "class" | default "" -}}
 {{ $body := trim .Inner " \r\n" -}}
 {{ if not $body -}}
     {{ if .Parent }}
@@ -50,6 +50,6 @@
     </h2>
     {{- end -}}
     <div id="{{ $parent }}-item-{{ $id }}" class="accordion-collapse collapse{{ if $show }} show{{ end }}{{ with $class }} {{ . }}{{ end }}" aria-labelledby="{{ $parent }}-heading-{{ $id }}" data-bs-parent="#{{ $parent }}">
-        <div class="accordion-body">{{ $body | markdownify | safeHTML }}</div>
+        <div class="accordion-body">{{ $body | .Page.RenderString | safeHTML }}</div>
     </div>
 </div>

layouts/shortcodes/accordion.html

@@ -10,7 +10,7 @@
 {{ with .Get "id" }}
     {{ $id = . }}
 {{ end }}
-{{- $class := .Get "class" -}}
+{{- $class := .Get "class" | default "" -}}
 
 {{- $openParam := "false" -}}
 {{- $open := false -}}
@@ -26,7 +26,7 @@
 {{- $body := .Inner -}}
 {{- if $open -}}
     {{- $pattern := printf "data-bs-parent=\"#%s\"" $id -}}
-    {{- $body = (replace .Inner $pattern "") | markdownify | safeHTML }}
+    {{- $body = (replace .Inner $pattern "") | .Page.RenderString | safeHTML }}
 {{- end -}}
 
 <div id="{{ $id }}" class="accordion mb-3{{ with $class }} {{ . }}{{ end }}">