Merge pull request #1609 from gethinode/develop

Develop

.github/codeql/codeql-config.yml

@@ -0,0 +1,9 @@
+paths:
+  - 'assets/js'
+paths-ignore:
+  - '**/vendor'
+  - '**/critical/languageSelector.js'
+  - '**/critical/color.js'
+  - '**/clipboard.js'
+  - '**/navbar.js'
+  - '**/sharing.js'

.github/workflows/codeql.yml

@@ -0,0 +1,102 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL Advanced"
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+  schedule:
+    - cron: '44 1 * * 3'
+
+jobs:
+  analyze:
+    name: Analyze (${{ matrix.language }})
+    # Runner size impacts CodeQL analysis time. To learn more, please see:
+    #   - https://gh.io/recommended-hardware-resources-for-running-codeql
+    #   - https://gh.io/supported-runners-and-hardware-resources
+    #   - https://gh.io/using-larger-runners (GitHub.com only)
+    # Consider using larger runners or machines with greater resources for possible analysis time improvements.
+    runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
+    permissions:
+      # required for all workflows
+      security-events: write
+
+      # required to fetch internal or private CodeQL packs
+      packages: read
+
+      # only required for workflows in private repositories
+      actions: read
+      contents: read
+
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+        - language: actions
+          build-mode: none
+        - language: javascript-typescript
+          build-mode: none
+        # CodeQL supports the following values keywords for 'language': 'actions', 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'rust', 'swift'
+        # Use `c-cpp` to analyze code written in C, C++ or both
+        # Use 'java-kotlin' to analyze code written in Java, Kotlin or both
+        # Use 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both
+        # To learn more about changing the languages that are analyzed or customizing the build mode for your analysis,
+        # see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/customizing-your-advanced-setup-for-code-scanning.
+        # If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how
+        # your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v5
+
+    # Add any setup steps before running the `github/codeql-action/init` action.
+    # This includes steps like installing compilers or runtimes (`actions/setup-node`
+    # or others). This is typically only required for manual builds.
+    # - name: Setup runtime (example)
+    #   uses: actions/setup-example@v1
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v3
+      with:
+        languages: ${{ matrix.language }}
+        build-mode: ${{ matrix.build-mode }}
+        config-file: ./.github/codeql/codeql-config.yml
+
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+
+        # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+    # If the analyze step fails for one of the languages you are analyzing with
+    # "We were unable to automatically build your code", modify the matrix above
+    # to set the build mode to "manual" for that language. Then modify this step
+    # to build your code.
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+    - if: matrix.build-mode == 'manual'
+      shell: bash
+      run: |
+        echo 'If you are using a "manual" build mode for one or more of the' \
+          'languages you are analyzing, replace this with the commands to build' \
+          'your code, for example:'
+        echo '  make bootstrap'
+        echo '  make release'
+        exit 1
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v3
+      with:
+        category: "/language:${{matrix.language}}"

.github/workflows/lint-build.yml

@@ -14,16 +14,20 @@ env:
   CACHE_PATH_WIN: '~\AppData\Local\hugo_cache'
   CACHE_PATH_MAC: '/Users/runner/Library/Caches/hugo_cache'
 
+permissions:
+  pull-requests: read
+  contents: read
+
 jobs:
   lint:
     runs-on: ubuntu-latest
 
     steps:
     - name: Check out repository
-      uses: actions/checkout@v4
+      uses: actions/checkout@v5
 
     - name: Set up Node.js
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@v5
       with:
         node-version: lts/*
         cache: 'npm'
@@ -49,15 +53,15 @@ jobs:
 
     steps:
     - name: Check out repository
-      uses: actions/checkout@v4
+      uses: actions/checkout@v5
 
     - name: Install Go
-      uses: actions/setup-go@v5
+      uses: actions/setup-go@v6
       with:
         go-version: ">1.0.0"
       
     - name: Set up Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@v5
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'npm'

.github/workflows/mod-update.yml

@@ -14,10 +14,10 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v4
+      uses: actions/checkout@v5
 
     - name: Setup Node.js
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@v5
       with:
         node-version: lts/*
         cache: 'npm'

.github/workflows/npm-publish.yml

@@ -1,41 +0,0 @@
-# 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:
-  release:
-    types: [published]
-
-env:
-  REGISTRY_URL: 'https://registry.npmjs.org/'
-
-jobs:
-  build:
-    strategy:
-      matrix:
-        os: [ubuntu-latest]
-        node-version: [20.x]
-
-    runs-on: ${{ matrix.os }}
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Setup .npmrc file to publish to npm
-        uses: actions/setup-node@v4
-        with:
-          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 }}

.github/workflows/release.yml

@@ -0,0 +1,44 @@
+name: Release
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+
+env:
+  HUSKY: 0
+
+permissions:
+  contents: read # for checkout
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write # to be able to publish a GitHub release
+      issues: write # to be able to comment on released issues
+      pull-requests: write # to be able to comment on released pull requests
+      id-token: write # to enable use of OIDC for npm provenance
+    
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v5
+        with:
+          fetch-depth: 0
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v5
+        with:
+          node-version: "lts/*"
+
+      - name: Install dependencies
+        run: npm clean-install
+
+      - name: Verify the integrity of provenance attestations and registry signatures for installed dependencies
+        run: npm audit signatures
+
+      - name: Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: npx semantic-release

.gitignore

@@ -1,5 +1,6 @@
 _vendor/
 prebuild/
+prebuild-headers/
 public/
 resources/
 node_modules/

.husky/commit-msg

@@ -0,0 +1 @@
+npx --no -- commitlint --edit $1

.husky/install.mjs

@@ -0,0 +1,6 @@
+// Skip Husky install in production and CI
+if (process.env.NODE_ENV === 'production' || process.env.CI === 'true') {
+    process.exit(0)
+}
+const husky = (await import('husky')).default
+console.log(husky())

.husky/pre-commit

@@ -0,0 +1 @@
+npm test

.stylelintrc.json

@@ -11,6 +11,7 @@
     "selector-id-pattern": null,
     "selector-class-pattern": null,
     "scss/no-global-function-names": null,
+    "color-function-alias-notation": null,
     "number-max-precision": null,
     "hue-degree-notation": null,
     "value-no-vendor-prefix": null,

LICENSE

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

README.md

@@ -15,9 +15,6 @@
     <a href="https://gethinode.com">
         <img src="https://img.shields.io/badge/theme-hinode-blue" alt="Hinode theme">
     </a>
-    <a href="https://www.npmjs.com/package/%40gethinode/hinode">
-        <img src="https://img.shields.io/npm/v/%40gethinode/hinode" alt="npm package">
-    </a>
     <a href="https://app.netlify.com/sites/gethinode-demo/deploys">
         <img src="https://img.shields.io/netlify/0ad42e3e-fdfa-4d37-8e26-58badd429a67"  alt="Netlify Status">
     </a>

assets/js/critical/color.js

@@ -1,4 +1,4 @@
-{{- if site.Params.main.enableDarkMode -}}
+{{- if (or site.Params.main.enableDarkMode site.Params.main.colorMode.enabled) -}}
 
 /*!
  * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
@@ -38,14 +38,13 @@
     setLocalStorage('theme', theme, 'functional')
 
     if (theme === 'auto') {
-      document.documentElement.setAttribute('data-bs-theme', (getPreferredTheme()))
+      theme = getPreferredTheme()
-    } else {
-      document.documentElement.setAttribute('data-bs-theme', theme)
     }
+    document.documentElement.setAttribute('data-bs-theme', theme)
+    // store main theme separately, to avoid the navbar mode icon uses a local variable
+    document.documentElement.setAttribute('data-bs-main-theme', theme)
 
-    document.querySelectorAll('.navbar-mode-selector').forEach(chk => {
+    updateSelectors()
-      chk.checked = (document.documentElement.getAttribute('data-bs-theme') === 'light')
-    })
   }
 
   // alternates the currently active theme
@@ -54,6 +53,12 @@
     setTheme(target)
   }
 
+  function updateSelectors() {
+    document.querySelectorAll('.navbar-mode-selector').forEach(chk => {
+      chk.checked = (document.documentElement.getAttribute('data-bs-theme') === 'light')
+    })
+  }
+
   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
     if (storedTheme !== 'light' || storedTheme !== 'dark') {
       setTheme(getPreferredTheme())
@@ -69,7 +74,12 @@
     })
   })
 
-  // initialize theme directly when script is invoked
+  window.addEventListener('load', () => {
+    // update the selectors when all elements are ready
+    updateSelectors()
+  })
+
+  // initialize theme as soon as possible to reduce screen flickering
   setTheme(getTheme())
 })()
 

assets/js/critical/languageSelector.js

@@ -25,17 +25,37 @@
           window.location.href = href
         }
       } else {
-        window.location.href = folder + language + '/'
+        let target = folder + language + '/'
+        if (window.location.href !== target) {
+          window.location.href = target
+        }
       }
     }
   }
 
   // Event listener for language selection
   document.addEventListener('DOMContentLoaded', () => {
-    const storedLanguage = getLanguage()
+    // override stored language when query string contains force is true
-    const languageItems = document.querySelectorAll('#language-selector .dropdown-item')
+    let params = new URLSearchParams(document.location.search)
+    let force = params.get('force')
+    if (force !== null && force.toLowerCase() == 'true') {
+      setLanguage(document.documentElement.lang)
+      return
+    }
 
-    if (languageItems.length > 0) {
+    // continue with regular code
+    const storedLanguage = getLanguage()
+    const languageItems = document.querySelectorAll('#language-selector[data-translated=true] .dropdown-item')
+
+    const link = document.querySelector("link[rel='canonical']")
+    let alias = ''
+    if (link !== null) {
+      alias = link.getAttribute('href')
+    }
+    
+    if ((alias !== '') && (window.location.href !== alias)) {
+      window.location.href = alias
+    } else if (languageItems.length > 0) {
       // Redirect if the stored language differs from the active language
       if ((storedLanguage) && (document.documentElement.lang !== storedLanguage)) {
         languageItems.forEach(item => {
@@ -57,10 +77,8 @@
       })
     }
     else {
-      // Redirect to the localized homepage
+      // overrule the current stored language when no translation is available
-      const defaultLang = '{{ site.LanguageCode | default site.Language.Lang }}'
+      setLanguage(document.documentElement.lang)
-      let language = storedLanguage ? storedLanguage : defaultLang
-      window.location.href = folder + language + '/'
     }
   })
 })()

assets/js/modal.js

@@ -0,0 +1,6 @@
+document.addEventListener('hide.bs.modal', function (event) {
+  // Remove the focus from the active element
+  if (document.activeElement) {
+    document.activeElement.blur()
+  }
+})

assets/js/nav.js

@@ -0,0 +1,45 @@
+function updateDropdown (element, id, label) {
+  const dropdown = document.getElementById(element)
+  if (dropdown != null) {
+    dropdown.querySelector('.dropdown-toggle').textContent = label
+    dropdown.querySelectorAll('.panel-dropdown .dropdown-item').forEach(item => {
+      item.classList.remove('active')
+      let target = item.getAttribute('data-link')
+      if (target != null) {
+        target = target.replace(/^#+/, '')
+        if (target === id) {
+          item.classList.add('active')
+        }
+      }
+    })
+  }
+}
+
+document.querySelectorAll('.panel-dropdown').forEach(trigger => {
+  trigger.addEventListener('hide.bs.dropdown', event => {
+    if (event.clickEvent != null) {
+      let target = event.clickEvent.srcElement.getAttribute('data-link')
+      if (target != null) {
+        trigger.querySelectorAll('.panel-dropdown .dropdown-item').forEach(item => {
+          item.classList.remove('active')
+        })
+        target = target.replace(/^#+/, '')
+        const btn = document.getElementById(target)
+        if (btn != null) {
+          event.clickEvent.srcElement.classList.add('active')
+          trigger.querySelector('.dropdown-toggle').textContent = event.clickEvent.srcElement.textContent
+          btn.click()
+        }
+      }
+    }
+  })
+})
+
+document.querySelectorAll('.nav-panel .nav-link').forEach(trigger => {
+  trigger.addEventListener('click', event => {
+    const companion = event.srcElement.parentElement.parentElement.getAttribute('data-companion')
+    if (companion != null) {
+      updateDropdown(companion, trigger.getAttribute('id'), trigger.textContent.trim())
+    }
+  })
+})

assets/js/navbar.js

@@ -4,24 +4,161 @@ const togglers = document.querySelectorAll('.main-nav-toggler')
 const modeSelectors = document.querySelectorAll('.switch-mode-collapsed')
 const colorsBG = ['body', 'secondary', 'tertiary']
 
-function updateNavbar () {
+function sleep(ms) {
-  let storedTheme
+  return new Promise(resolve => setTimeout(resolve, ms))
-  if (typeof getLocalStorage === "function") {
+}
-    storedTheme = getLocalStorage('theme', null, 'functional')
+
+function getStyle(el, styleProp) {
+    let y
+    
+    if (window.getComputedStyle) {
+      y = document.defaultView.getComputedStyle(el).getPropertyValue(styleProp)
+    } else if (el.currentStyle) {
+      y = el.currentStyle[styleProp]
+    }
+
+    return y
+}
+
+function updateNavbarColor () {
+  const scrollTop = window.pageYOffset
+  const scrollBottom = scrollTop + navbar.offsetHeight
+
+  // find which section is currently under the navbar
+  let currentSection = null
+  const sections = document.querySelectorAll('article,section,footer')
+  let currentIndex = -1
+
+  sections.forEach(section => {
+    const rect = section.getBoundingClientRect()
+    const sectionTop = scrollTop + rect.top
+    const sectionBottom = sectionTop + section.offsetHeight - 1
+
+    // check if navbar overlaps with this section
+    if (scrollTop <= sectionBottom && scrollBottom >= sectionTop) {
+      let index = getStyle(section, 'z-index')
+      if (index === 'auto') {
+        index = 1
+      }
+      if (index > currentIndex) {
+        currentSection = section
+        currentIndex = index
+      }
+    }
+  })
+
+  // use main part as backup (defined in baseof.html template)
+  if (!currentSection) {
+    currentSection = document.querySelector('main')
   }
 
-  if (window.scrollY > 75) {
+  if (currentSection) {
-    navbar.classList.add('nav-active')
+    adaptToSection(currentSection)
-    if (storedTheme) {
+  }
-      navbar.setAttribute('data-bs-theme', storedTheme)
+}
+
+function getBackgroundColor (section) {
+  // get computed background color of the section
+  let color = window.getComputedStyle(section).backgroundColor
+
+  // use body background when section background is undefined or transparent
+  if (color === 'rgba(0, 0, 0, 0)' || color === 'transparent') {
+    color = window.getComputedStyle(document.body).getPropertyValue('background-color')
+  }
+
+  return color
+}
+
+function adaptToSection (section) {
+  // retrieve the section background color, using body color as fallback
+  const color = getBackgroundColor(section)
+
+  // determine if the background is light or dark
+  const isLightBackground = isLightColor(section, color)
+
+  // set appropriate mode class
+  const nav = document.querySelector('.navbar')
+  if (isLightBackground) {
+    if (navbar.dataset.bsTheme !== 'light') {
+      navbar.dataset.bsTheme = 'light'
     }
   } else {
-    navbar.classList.remove('nav-active')
+    if (navbar.dataset.bsTheme !== 'dark') {
-    const defaultTheme = navbar.getAttribute('data-bs-overlay')
+      navbar.dataset.bsTheme = 'dark'
+    }
+  }
 
-    const targetTheme = defaultTheme ? defaultTheme : storedTheme
+  // update semi-transparent background color of navbar
-    if (targetTheme) {
+  const rgb = parseRGB(color)
-      navbar.setAttribute('data-bs-theme', defaultTheme)
+  if (rgb) {
+    navbar.style.backgroundColor = `rgba(${rgb.r},${rgb.g},${rgb.b},.4)`
+  }
+}
+
+function isLightColor (section, color) {
+  if (section.dataset.bsTheme === 'light') {
+    return true
+  }
+
+  if (section.dataset.bsTheme === 'dark') {
+    return false
+  }
+
+  // parse RGB color of the section backgroiund
+  const rgb = parseRGB(color)
+  if (!rgb) return true // Default to light if can't parse
+
+  // calculate relative luminance
+  const luminance = calculateLuminance(rgb.r, rgb.g, rgb.b)
+
+  // return true if light (luminance > 0.5)
+  return luminance > 0.5
+}
+
+function parseRGB (color) {
+  const match = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/)
+  if (match) {
+    return {
+      r: parseInt(match[1]),
+      g: parseInt(match[2]),
+      b: parseInt(match[3])
+    }
+  }
+  return null
+}
+
+function calculateLuminance (r, g, b) {
+  // convert RGB to relative luminance using sRGB formula
+  const [rs, gs, bs] = [r, g, b].map(c => {
+    c = c / 255
+    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
+  })
+
+  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs
+}
+
+function updateNavbar () {
+  if (navbar.dataset.transparent) {
+    updateNavbarColor()
+  } else {
+    let storedTheme
+    if (typeof getLocalStorage === "function") {
+      storedTheme = getLocalStorage('theme', null, 'functional')
+    }
+
+    if (window.scrollY > 75) {
+      navbar.classList.add('nav-active')
+      if (storedTheme) {
+        navbar.setAttribute('data-bs-theme', storedTheme)
+      }
+    } else {
+      navbar.classList.remove('nav-active')
+      const defaultTheme = navbar.getAttribute('data-bs-overlay')
+
+      const targetTheme = defaultTheme ? defaultTheme : storedTheme
+      if (targetTheme) {
+        navbar.setAttribute('data-bs-theme', defaultTheme)
+      }
     }
   }
 }
@@ -33,28 +170,35 @@ if ((navbar !== null) && (window.performance.getEntriesByType)) {
 }
 
 if (navbar !== null && togglers !== null) {
+  // initialize and update the navbar on load, on resize, and on scroll
+  document.addEventListener('DOMContentLoaded', () => { fixed && updateNavbar() })
+  document.addEventListener('resize', () => fixed && updateNavbar())
+  document.addEventListener('scroll', () => fixed && updateNavbar())
+
   // observe state changes to the site's color mode
   const html = document.querySelector('html')
   const config = {
     attributes: true,
     attributeFilter: ['data-bs-theme']
   }
-  const Observer = new MutationObserver((mutationrecords) => {
+  const Observer = new MutationObserver(() => {
-    fixed && updateNavbar()
+    if (fixed) {
+      // wait for the theme animation to finish
+      sleep(600).then(() => { 
+        updateNavbar() 
+      })
+    }
   })
   Observer.observe(html, config)
 
   // initialize background color
-  const color = (navbar.getAttribute('data-navbar-color') || 'body')
+  if (!navbar.dataset.transparent) {
-  const bg = colorsBG.includes(color) ? `var(--bs-${color}-bg)` : `var(--bs-navbar-color-${color})`
+    const color = (navbar.getAttribute('data-navbar-color') || 'body')
-  navbar.style.setProperty('--bs-navbar-expanded-color', bg)
+    const bg = colorsBG.includes(color) ? `var(--bs-${color}-bg)` : `var(--bs-navbar-color-${color})`
-
+    navbar.style.setProperty('--bs-navbar-expanded-color', bg)
-  // set the navbar background color to opaque when scrolling past a breakpoint
-  window.onscroll = () => {
-    fixed && updateNavbar()
   }
 
-  // set the navbar background color to opaque when expanded
+  // update the navbar background color when expanded
   for (let i = 0; i < togglers.length; ++i) {
     togglers[i].onclick = () => {
       navbar.classList.toggle('navbar-expanded')

assets/js/toc.js

@@ -0,0 +1,13 @@
+const btnTOCShowMore = document.getElementById('btnTOCShowMore')
+if (btnTOCShowMore !== null) {
+  btnTOCShowMore.addEventListener('click', (e) => {
+    btnTOCShowMore.style.display = 'none'
+  })
+}
+
+const btnTOCShowLess = document.getElementById('btnTOCShowLess')
+if ((btnTOCShowLess !== null) && (btnTOCShowMore !== null)) {
+  btnTOCShowLess.addEventListener('click', (e) => {
+    btnTOCShowMore.style.display = 'initial'
+  })
+}

assets/scss/app-dart.scss

@@ -24,8 +24,10 @@
 @import "components/carousel.scss";
 @import "components/clipboard.scss";
 @import "components/command.scss";
+@import "components/docs.scss";
 @import "components/feature.scss";
 @import "components/footer.scss";
+@import "components/kbd.scss";
 @import "components/nav.scss";
 @import "components/navbar.scss";
 @import "components/img.scss";
@@ -35,6 +37,7 @@
 @import "components/sidebar.scss";
 @import "components/syntax-dart.scss"; // note: modified for dart-sass
 @import "components/table.scss";
+@import "components/toast.scss";
 @import "components/timeline.scss";
 @import "components/toc.scss";
 @import "components/video.scss";

assets/scss/app.scss

@@ -22,8 +22,10 @@
 @import "components/carousel.scss";
 @import "components/clipboard.scss";
 @import "components/command.scss";
+@import "components/docs.scss";
 @import "components/feature.scss";
 @import "components/footer.scss";
+@import "components/kbd.scss";
 @import "components/nav.scss";
 @import "components/navbar.scss";
 @import "components/img.scss";
@@ -33,6 +35,7 @@
 @import "components/sidebar.scss";
 @import "components/syntax.scss";
 @import "components/table.scss";
+@import "components/toast.scss";
 @import "components/timeline.scss";
 @import "components/toc.scss";
 @import "components/video.scss";

assets/scss/common/_scrollbar.scss

@@ -21,6 +21,7 @@
 
 	// Standard version (Firefox, only appears on scroll)
 	@supports (-moz-appearance:none) {
+		/* stylelint-disable-next-line no-invalid-position-declaration */
 		scrollbar-color: $foreground-color $background-color;
 	}
 }

assets/scss/common/_styles.scss

@@ -14,27 +14,21 @@ a:active {
     text-decoration: none;
 }
 
+div.rounded, img.rounded {
+    --bs-border-radius: #{$theme-border-radius};
+}
+
 //
 // Ensure main page is rendered to full viewport height
 //
 .main {
-    min-height: 100vh;
-}
-
-.fullcover {
     --navbar-height: #{$navbar-height};
-
-    min-height: calc(100vh - var(--navbar-height));
-}
-
-.fullscreen {
     --overlay-offset: #{$overlay-offset};
+    --section-height: 88vh;
+    --max-section-height: 1024px;
 
-    min-height: calc(100vh - var(--overlay-offset));
+    min-height: 100vh;
-}
+    margin-top: var(--overlay-offset);
-
-.main-content {
-    margin-top: var(--navbar-offset);
 }
 
 $utilities: map-merge(
@@ -100,66 +94,24 @@ $utilities: map-merge(
     )
 );
 
-@media screen and (orientation: portrait) {
-    .min-vh-custom {
-        min-height: 25vh !important
-    }
-}
-
-@media screen and (orientation: landscape) {
-    .min-vh-custom {
-        min-height: 50vh !important
-    }
-}
-
 :root {
     --nav-height: 90px;
 }
 
-@include media-breakpoint-up(sm) {
+.section-cover {
-    .ratio-section {
+    min-height: calc(var(--section-height) - var(--overlay-offset));
-        min-height: calc(min(100vh, 576px) - var(--nav-height));
-    }    
-}
-
-@include media-breakpoint-up(md) {
-    .ratio-section {
-        min-height: calc(min(100vh, 768px) - var(--nav-height));
-    }    
-}
-
-@include media-breakpoint-up(lg) {
-    .ratio-section {
-        min-height: calc(min(100vh, 992px) - var(--nav-height));
-    }    
-}
-
-@include media-breakpoint-up(xl) {
-    .ratio-section {
-        min-height: calc(min(100vh, 1200px) - var(--nav-height));
-    }    
-}
-
-@include media-breakpoint-up(xxl) {
-    .ratio-section {
-        min-height: calc(min(100vh, 1400px) - var(--nav-height));
-    }    
-}
-
-.main-cover {
-    min-height: 100vh;
 }    
 
 @include media-breakpoint-up(xxl) {
-    .main-cover {
+    .section-cover {
-        min-height: calc(min(100vh, 1000px));
+        min-height: calc(min(calc(var(--section-height) - var(--overlay-offset)), var(--max-section-height)));
     }    
 }
 
 /* stylelint-disable media-feature-range-notation */
 @media (min-height: 1400px) { 
-    .main-cover {
+    .section-cover {
-        min-height: calc(min(100vh, 1000px));
+        min-height: calc(min(calc(var(--section-height) - var(--overlay-offset)), var(--max-section-height)));
     }
 }
 /* stylelint-enable media-feature-range-notation */
@@ -199,3 +151,17 @@ $utilities: map-merge(
         )
     )
 );
+
+.width-100 {
+    width: 100%;
+}
+
+$utilities: (
+  "width": (
+    property: width,
+    responsive: true,
+    values: (
+      auto: auto
+    )
+  )
+);

assets/scss/common/_variables-dark.scss

@@ -5,6 +5,8 @@
         --bs-primary-dark: #{$primary-bg-subtle-dark};
         --bs-primary-bg-subtle: #{$primary-bg-subtle-dark};
         --bg-primary-subtle: rgba(var(--bs-primary-rgb), var(--bs-link-opacity, 0.1));
+        --bs-body: var(--bs-body-bg);
+        --bs-body-tertiary: var(--bs-tertiary-bg);
 
         .bg-primary-subtle {
             background-color: var(--bg-primary-subtle) if($enable-important-utilities, !important, null);

assets/scss/common/_variables-dart.scss

@@ -20,6 +20,8 @@ strong {
     font-weight:                600 if($enable-important-utilities, !important, null);
 }
 
+$theme-border-radius:           0.375rem;
+
 $navbar-height:                 h.$navbar-height;
 $navbar-offset:                 h.$navbar-offset;
 $navbar-offset-xs:              h.$navbar-offset-xs;
@@ -33,8 +35,10 @@ $warning:                       h.$warning;
 $danger:                        h.$danger;
 $light:                         h.$light;
 $dark:                          h.$dark;
-
+$white:                       #fff !default;
 $black:                       #000 !default;
+$body-bg:                     #fff !default;
+$gray-100:                    #f8f9fa !default;
 $btn-toggle-color:              $black !default;
 
 $carousel-dark-indicator-active-bg:  #fff !default;
@@ -50,3 +54,23 @@ $primary-border-subtle-dark:        mix(black, h.$primary, calc(h.$dark-mode-sha
 $dropdown-transition: opacity .15s ease-in-out !default;
 $dropdown-horizontal-margin-top: calc((-1.5 * 1rem) - 2px);
 $dropdown-horizontal-padding-y: calc(1rem + 2px);
+
+$theme-colors: (
+  "primary":       $primary,
+  "secondary":     $secondary,
+  "success":       $success,
+  "info":          $info,
+  "warning":       $warning,
+  "danger":        $danger,
+  "light":         $light,
+  "dark":          $dark,
+  "white":         $white,
+  "black":         $black,
+  "body":          $body-bg,
+  "body-tertiary": $gray-100,
+);
+
+$btn-padding-y-xs:            .08rem !default;
+$btn-padding-x-xs:            0.3rem !default;
+$btn-font-size-xs:            $font-size-base * .6 !default;
+$btn-border-radius-xs:        .2rem !default;

assets/scss/common/_variables.scss

@@ -22,7 +22,12 @@ strong {
 }
 // scss-docs-end font
 
+$theme-border-radius:           0.375rem;
+
+$white:                       #fff !default;
 $black:                       #000 !default;
+$body-bg:                     #fff !default;
+$gray-100:                    #f8f9fa !default;
 $btn-toggle-color:              $black !default;
 
 $card-color:                    var(--bs-body-color);
@@ -44,3 +49,23 @@ $dropdown-transition: opacity .15s ease-in-out !default;
 $dropdown-horizontal-margin-top: calc((-1.5 * 1rem) - 2px);
 $dropdown-horizontal-padding-y: calc(1rem + 2px);
 // scss-docs-end horizontal-nav
+
+$theme-colors: (
+  "primary":       $primary,
+  "secondary":     $secondary,
+  "success":       $success,
+  "info":          $info,
+  "warning":       $warning,
+  "danger":        $danger,
+  "light":         $light,
+  "dark":          $dark,
+  "white":         $white,
+  "black":         $black,
+  "body":          $body-bg,
+  "body-tertiary": $gray-100,
+);
+
+$btn-padding-y-xs:            .08rem !default;
+$btn-padding-x-xs:            0.3rem !default;
+$btn-font-size-xs:            $font-size-base * .6 !default;
+$btn-border-radius-xs:        .2rem !default;

assets/scss/components/_button.scss

@@ -48,3 +48,11 @@ a.btn {
 
     margin: 0 !important;
 }
+
+.btn-xs {
+  @include button-size($btn-padding-y-xs, $btn-padding-x-xs, $btn-font-size-xs, $btn-border-radius-xs);
+}
+
+.btn {
+    --bs-border-radius: #{$theme-border-radius};
+}

assets/scss/components/_card.scss

@@ -5,6 +5,13 @@
     background-color: var(--#{$prefix}secondary-bg);
 }
 
+.card {
+    --bs-card-border-radius: #{$theme-border-radius};
+    --bs-card-inner-border-radius: #{$theme-border-radius};
+    --bs-border-radius: #{$theme-border-radius};
+    --bs-card-bg: transparent;
+}
+
 .card .card-img-wrap {
     overflow: hidden;
     position: relative;
@@ -24,6 +31,13 @@
     cursor: pointer;
 }
 
+.card-img-top {
+    --bs-border-radius: #{$theme-border-radius};
+
+    border-top-left-radius: var(--bs-border-radius) !important;
+    border-top-right-radius: var(--bs-border-radius) !important;
+}
+
 .card-img-wrap img {
     transition: transform 0.25s ease;
     width: 100%;

assets/scss/components/_carousel.scss

@@ -1,3 +1,7 @@
+.carousel-inner {
+    border-radius: #{$theme-border-radius};
+}
+
 .gradient {
     width: 100%;
     height: 100%;

assets/scss/components/_docs.scss

@@ -0,0 +1,22 @@
+.docs-controls .nav-link,
+.file-controls .nav-link {
+    border-top-left-radius: #{$theme-border-radius};
+    border-top-right-radius: #{$theme-border-radius};
+    margin-left: #{$theme-border-radius};
+
+    &:hover,
+    &:focus {
+        border-bottom: 0;
+    }
+}
+
+.docs-panel,
+.file-panel {
+    border: 1px solid var(--#{$prefix}border-color);
+    overflow: hidden;
+}
+
+.docs-panel, .docs-panel .collapse,
+.file-panel, .file-panel .collapse {
+    border-radius: #{$theme-border-radius};
+}

assets/scss/components/_img.scss

@@ -27,3 +27,7 @@
     width: 100vw;
     object-fit: cover;
 }
+
+.figure-caption {
+    margin-left: #{$theme-border-radius};
+}

assets/scss/components/_kbd.scss

@@ -0,0 +1,3 @@
+kbd {
+    border-radius: #{$theme-border-radius};
+}

assets/scss/components/_nav.scss

@@ -1,14 +1,8 @@
-.nav-tabs .nav-tabs {
+.nav-tabs {
-    border: none;
+    border: none !important;
 }
 
-.nav-tabs .nav-link.active {
+.nav-callout, .tab-content {
-    border-bottom-color: var(--bs-body-bg) !important;
-    border-bottom-style: solid !important;
-    z-index: 1;
-}
-
-.nav-callout {
     --#{$prefix}nav-callout-bg: var(--#{$prefix}light);
     --#{$prefix}nav-callout-active-bg: var(--bs-primary-bg-subtle);
     --#{$prefix}nav-callout-gap: #{$nav-underline-gap};
@@ -90,9 +84,17 @@
     border-color: var(--#{$prefix}border-color);
 }
 
+.nav-callout, .pagination {
+    --bs-border-radius: #{$theme-border-radius};
+}
+
+.nav-callout .tab-content {
+    border-radius: #{$theme-border-radius};
+}
+
 @if $enable-dark-mode {
     @include color-mode(dark) {
-        .nav-callout {
+        .nav-callout, .tab-content {
             --#{$prefix}nav-callout-bg: var(--#{$prefix}tertiary-bg);
         }
 

assets/scss/components/_navbar.scss

@@ -7,7 +7,7 @@
 }
 
 .mode-switch {
-    --#{$prefix}mode-switch-width: 50px;
+    --#{$prefix}mode-switch-width: 3em;
 }
 
 .mode-switch .label {
@@ -64,6 +64,18 @@
     transform: scale(0.8);
 }
 
+.mode-toggle > input {
+	z-index: 1;
+	cursor: pointer;
+    height: 25px;
+    width: 25px;
+}
+
+.mode-toggle > label {
+	z-index: 0;
+	cursor: pointer;
+}
+
 // Source: https://jsfiddle.net/njhgr40m/
 
 @if $enable-dark-mode {
@@ -83,6 +95,11 @@
     }
 }
 
+.navbar[data-transparent="true"] {
+    backdrop-filter: blur(10px);
+    transition: all 0.3s ease;
+}
+
 .nav-active, .navbar-expanded {
     background-color: var(--bs-navbar-expanded-color);
     border-bottom: 1px solid var(--bs-secondary-bg);
@@ -92,20 +109,27 @@
     margin: 0 .15rem;
 }
 
-.navbar-title {
+.navbar-title, .navbar-title-center, .navbar-title-start {
     display: inline-block;
     white-space: normal;
-    text-align: center !important;
     vertical-align: middle;
     padding: 0 $spacer;
     width: 100% !important;
 }
 
+.navbar-title, .navbar-title-center {
+    text-align: center !important;
+}
+
 .navbar-contrast .nav-link.active, .navbar-contrast .nav-link.show, .navbar-contrast .nav-link:hover {
     border-bottom: solid 1px var(--bs-navbar-hover-color);
     margin-bottom: -1px;
 }
 
+.navbar-brand {
+    margin-right: 0;
+}
+
 .navbar-contrast {
     --bs-navbar-color: white !important;
     --bs-navbar-hover-color: white !important;
@@ -113,7 +137,7 @@
     --bs-navbar-active-color: white !important;
     --bs-navbar-toggler-color: white;
 
-    .navbar-title, .mode-switch {
+    .navbar-title, .navbar-brand, .mode-switch {
         --#{$prefix}border-color: white;
 
         color: white !important;
@@ -126,12 +150,65 @@
 
 .navbar-expanded {
     box-shadow: $box-shadow-sm;
+    min-height: 100vh;
+    align-items: start;
+}
+
+.navbar-expanded .navbar-collapse {
+    margin-top: 2rem;
+}
+
+@each $h, $size in $font-sizes {
+    .navbar-fs-#{$h} {
+        font-size: #{$size};
+    }
+}
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+    $next: breakpoint-next($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($next, $grid-breakpoints);
+
+    @if $infix != '' {
+        @include media-breakpoint-up($next) {
+            .navbar#{$infix}-fs { 
+                font-size: inherit;
+            } 
+        }
+    }
+}
+
+.navbar-icon {
+    padding-right: var(--bs-navbar-nav-link-padding-x);
+    padding-left: var(--bs-navbar-nav-link-padding-x);
 }
 
 .nav-item .vr {
     color: var(--bs-navbar-color);
 }
 
+.navbar .nav-item {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+}
+
+.navbar-collapse .dropdown {
+    display: inline;
+    align-items: normal;
+}
+
+.navbar-expanded .btn {
+    font-size: 1em;
+}
+
+.navbar .btn {
+    border-radius: #{$theme-border-radius};    
+}
+
+.navbar-expanded .search-input {
+    margin-bottom: 1rem;
+}
+
 /* Remove border from toggler */
 .navbar-toggler {
     border: 0 if($enable-important-utilities, !important, null);
@@ -223,13 +300,10 @@
 }
 
 .navbar-container {
+    min-height: calc(2rem + 10px);
     width: 100% !important;
 }
 
-.navbar-brand {
-    margin-right: 0;
-}
-
 @include media-breakpoint-up(#{$navbar-size}) {
     :root {
         --navbar-offset: #{$navbar-offset};
@@ -319,3 +393,45 @@
     position: absolute;
     z-index: $zindex-fixed;
 }
+
+.form-control.is-search {
+    border: 1px solid var(--bs-border-color) !important;
+}
+
+.d-none-main-light, .d-none-inline-main-light {
+  display: none !important;
+}
+
+.d-none-main-dark {
+  display: block !important;
+}
+
+.d-none-inline-main-dark {
+  display: inline !important;
+}
+
+[data-bs-main-theme="dark"] .d-none-main-light {
+  display: block !important;
+}
+
+[data-bs-main-theme="dark"] .d-none-inline-main-light {
+  display: inline !important;
+}
+
+[data-bs-main-theme="dark"] .d-none-main-dark, [data-bs-main-theme="dark"] .d-none-inline-main-dark {
+  display: none !important;
+}
+
+.inline-menu li {
+  display: inline-block;
+  padding: 0.5rem;
+  color: var(--bs-nav-link-color);
+}
+
+.inline-menu li .active, .inline-menu li>a:hover {
+    box-shadow: inset 0 -1px 0 var(--bs-navbar-hover-color);
+}
+
+ul.inline-menu {
+  padding: 0;
+}

assets/scss/components/_sidebar.scss

@@ -7,22 +7,53 @@
     top: var(--navbar-offset);
     max-height: 90vh;
     overflow-y: auto;
+    scrollbar-gutter: stable;
 }
 
 .sidebar-item {
+    --bs-border-radius: #{$theme-border-radius};
+    --bs-border-radius-sm: #{$theme-border-radius};
+    --bs-border-radius-lg: #{$theme-border-radius};
+    --bs-border-radius-xl: #{$theme-border-radius};
+    --bs-border-radius-xxl: #{$theme-border-radius};
+
     color: rgba(0, 0, 0, 0.65);
     margin-left: 0 !important;
-    padding-left: 0.85rem !important;
     display: inline-block;
+    padding: 0.1875rem 0.5rem !important;
+
+    &.active {
+        color: $primary;
+    }
 
-    &.active,
     &:hover,
     &:focus {
-        color: black;
+        color: $primary;
+        background-color: tint-color($primary, 90%);
     }
 }
 
-.btn-toggle {
+.sidebar-item-group {
+    border-radius: #{$theme-border-radius};
+
+    &:hover,
+    &:focus {
+        color: $primary;
+        background-color: tint-color($primary, 90%);
+    }
+    
+    > div > a {
+        color: var(--bs-body-color) !important;
+        text-decoration: none;
+        cursor: pointer;
+    }
+}
+
+.sidebar-item-group > div {
+    padding: 0.1875rem 0.5rem !important;
+}
+
+.btn-toggle-group {
     padding: 0.25rem 0.5rem;
     font-weight: 600;
     color: rgba(0, 0, 0, 0.65);
@@ -30,8 +61,7 @@
 
     &:hover,
     &:focus {
-        color: black;
+        background-color: transparent;
-        background-color: tint-color($primary, 90%);
     }
 
     &::before {
@@ -43,50 +73,49 @@
     }
 }
 
-.btn-toggle[aria-expanded="true"] {
+.btn-toggle-group[aria-expanded="true"] {
-    color: black;
-
     &::before {
         transform: rotate(90deg);
     }
 }
 
-.btn-toggle-nav a {
-    padding: 0.1875rem 0.5rem;
-    margin-top: 0.125rem;
-    margin-left: 1.25rem;
-
-    &:hover,
-    &:focus {
-        background-color: tint-color($primary, 90%);
-    }
-
-    &.active {
-        font-weight: bold;
-    }
-}
-
 @if $enable-dark-mode {
     @include color-mode(dark) {
         .sidebar-item {
             color: var(--bs-body-color);
-            margin-left: 0 !important;
+
-            padding-left: 0.85rem !important;
+            &.active {
-        
+                color: $primary-text-emphasis-dark !important;
-            &.active,
+            }
+
+            &:hover,
+            &:focus {
+                color: $primary-text-emphasis-dark !important;
+                background-color: transparent;
+                box-shadow: inset 0 0 0 1px $primary-bg-subtle-dark;
+    }
+        }
+
+        .sidebar-item-group {
+            color: var(--bs-body-color) !important;
+
+            &.active {
+                color: $primary-text-emphasis-dark !important;
+            }
+
             &:hover,
             &:focus {
                 color: white !important;
                 background-color: transparent;
+                box-shadow: inset 0 0 0 1px $primary-bg-subtle-dark;
             }
         }
 
-        .btn-toggle {
+        .btn-toggle-group {
             color: var(--bs-body-color);
         
             &:hover,
             &:focus {
-                color: white !important;
                 background-color: transparent;
             }
         
@@ -95,30 +124,16 @@
             }
         }
 
-        .btn-toggle[aria-expanded="true"] {
+        .btn-toggle-group[aria-expanded="true"] {
             color: var(--bs-secondary-color);
         }
-
+                    }
-        .btn-toggle-nav a {
-            padding: 0.1875rem 0.5rem;
-            margin-top: 0.125rem;
-            margin-left: 1.25rem;
-
-            &:hover,
-            &:focus {
-                color: white !important;
-                background-color: transparent;
-            }
-
-            &.active {
-                font-weight: bold;
-            }
-        }
-    }
 }
 
 // scss-docs-end sidebar
 
 .dropdown-toggle {
     outline: 0;
+    display: flex;
+    align-items: center;
 }

assets/scss/components/_syntax-dart.scss

@@ -16,6 +16,10 @@
     flex: 1;
 }
 
+.codeblock.syntax-highlight, .command.syntax-highlight {
+    border-radius: #{$theme-border-radius};
+}
+
 .syntax-highlight {
     background-color: var(--bs-light) if($enable-important-utilities, !important, null);
     overflow-x: auto;

assets/scss/components/_syntax.scss

@@ -16,6 +16,10 @@
     flex: 1;
 }
 
+.codeblock.syntax-highlight, .command.syntax-highlight {
+    border-radius: #{$theme-border-radius};
+}
+
 .syntax-highlight {
     background-color: var(--bs-light) if($enable-important-utilities, !important, null);
     overflow-x: auto;

assets/scss/components/_table.scss

@@ -11,6 +11,10 @@
     padding-right: 1rem;
 }
 
+.table-border-bottom-wrap {
+    border-bottom-style: none !important
+}
+
 @if $enable-dark-mode {
     @include color-mode(dark) {
         .table-striped, .table-striped-columns {

assets/scss/components/_timeline.scss

@@ -12,12 +12,24 @@ $semi-circle-border: 0.2rem;
 
 @each $state in map-keys($theme-colors) {
     .timeline-#{$state} {
-      --timeline-highlight: var(--#{$prefix}#{$state});
+        --timeline-highlight: var(--#{$prefix}#{$state});
+    }
+
+    .timeline-bg-#{$state} {
+        --timeline-connector-bg: var(--#{$prefix}#{$state});
+    }
+
+    .timeline-bg-#{$state}-subtle {
+        --timeline-connector-bg: var(--#{$prefix}#{$state}-bg-subtle);
     }
 }
 
 // scss-docs-end timeline
 
+.timeline-container {
+    border-radius: #{$theme-border-radius}; 
+}
+
 .timeline, .timeline-sm {
     position: relative;
 }

assets/scss/components/_toast.scss

@@ -0,0 +1,4 @@
+.toast {
+    border-radius: #{$theme-border-radius};
+    overflow: hidden;
+}

assets/scss/components/_toc.scss

@@ -3,12 +3,11 @@
 //
 // scss-docs-start toc
 .toc-sidebar {
-    grid-area: toc;
     right: 0;
     z-index: 2;
-    height: calc(100vh - 5rem);
     overflow-y: auto;
     top: 5rem;
+    max-height: calc(100vh - var(--navbar-offset));
 }
 
 // scss-docs-end toc
@@ -75,6 +74,43 @@
     }
 }
 
+.btn-link.toc-item {
+    font-size: inherit;
+}
+
+#btnTOCShowMore {
+    padding-top: 0.875rem;
+}
+
+a.toc-item {
+    display: block;
+}
+
+a.toc-level-1 {
+    margin-left: 0;
+}
+
+a.toc-level-2 {
+    margin-left: 1em;
+}
+
+a.toc-level-3 {
+    margin-left: 2em;
+}
+
+a.toc-level-4 {
+    margin-left: 3em;
+}
+
+a.toc-level-5 {
+    margin-left: 4em;
+}
+
+a.toc-level-6 {
+    margin-left: 5em;
+}
+
+
 @if $enable-dark-mode {
     [data-bs-theme="dark"] {
         .toc-button {

assets/scss/components/_video.scss

@@ -3,6 +3,7 @@
     padding-bottom: 56.25%;
     height: 0;
     overflow: hidden;
+    border-radius: #{$theme-border-radius};
 }
 
 .video-embedded > iframe {
@@ -11,7 +12,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    border:0;
+    border: 0;
 }
 
 // Adapted from https://github.com/gohugoio/hugo/tpl/tplimpl/embedded/templates/shortcodes/vimeo_simple.html

assets/scss/theme/fonts.scss

@@ -10,7 +10,7 @@
 
 /* inter-200 - latin */
 @font-face {
-    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-display: block; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
     font-family: 'Inter';
     font-style: normal;
     font-weight: 200;
@@ -23,7 +23,7 @@
   }
   /* inter-300 - latin */
   @font-face {
-    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-display: block; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
     font-family: 'Inter';
     font-style: normal;
     font-weight: 300;
@@ -36,7 +36,7 @@
   }
   /* inter-regular - latin */
   @font-face {
-    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-display: block; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
     font-family: 'Inter';
     font-style: normal;
     font-weight: 400;
@@ -49,7 +49,7 @@
   }
   /* inter-600 - latin */
   @font-face {
-    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-display: block; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
     font-family: 'Inter';
     font-style: normal;
     font-weight: 600;

commitlint.config.js

@@ -0,0 +1 @@
+module.exports = {extends: ['@commitlint/config-conventional']}

component-library/bookshop.scss

@@ -0,0 +1,12 @@
+@import "modules/bookshop/shared/styles/global";
+@import "modules/bookshop/components/about/about";
+@import "modules/bookshop/components/articles/articles";
+@import "modules/bookshop/components/cards/cards";
+@import "modules/bookshop/components/cta/cta";
+@import "modules/bookshop/components/faq/faq";
+@import "modules/bookshop/components/hero/hero";
+@import "modules/bookshop/components/panels/panels";
+@import "modules/bookshop/components/releases/releases";
+@import "modules/bookshop/components/separator/separator";
+@import "modules/bookshop/components/video-message/video-message";
+@import "modules/bookshop/theme";

component-library/components/about/about.bookshop.yml

@@ -0,0 +1,43 @@
+# Metadata about this component, to be used in the CMS
+spec:
+  structures:
+    - content_blocks
+  label: About
+  description: About section
+  icon: fingerprint
+  tags: []
+
+# Defines the structure of this component, as well as the default values
+blueprint:
+  heading:
+    preheading:
+    title:
+    content:
+    align:
+    arrangement:
+    width:
+    size:
+  background:
+    backdrop:
+    color:
+    subtle:
+  illustration:
+    image:
+    icon:
+    ratio:
+    class:
+    anchor:
+    mode:
+  order:
+  width:
+  justify:
+  link-type:
+  fluid:
+  theme:
+  cover:
+  links:
+    -
+      title:
+      url:
+      icon:
+      force:

component-library/components/about/about.hugo.html

@@ -0,0 +1,33 @@
+{{/* 
+    Copyright © 2025 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+*/}}
+
+{{/* Initialize arguments */}}
+{{ $args := partial "utilities/InitArgs.html" (dict "bookshop" "about" "args" .) }}
+{{ if or $args.err $args.warnmsg }}
+    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
+        "partial" "component-library/components/about/about.hugo.html" 
+        "warnid"  "warn-invalid-arguments"
+        "msg"     "Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+{{- end -}}
+
+{{/* Main code */}}
+{{ if not $args.error }}
+    {{ partial "assets/hero.html"  (dict 
+        "page"         page
+        "heading"      $args.heading
+        "background"   $args.background
+        "illustration" (merge (dict "ratio" "auto") $args.illustration)
+        "order"        $args.order
+        "link-type"    $args.linkType
+        "links"        $args.links
+        "orientation"  "horizontal"
+        "width"        (or $args.width 8)
+        )
+    }}
+{{- end -}}

component-library/components/about/about.scss

@@ -0,0 +1,3 @@
+.about {
+    scroll-margin-block: var(--navbar-offset);
+}

component-library/components/articles/articles.bookshop.yml

@@ -0,0 +1,55 @@
+# Metadata about this component, to be used in the CMS
+spec:
+  structures:
+    - content_blocks
+  label: Articles
+  description: Articles section
+  icon: post
+  tags: []
+
+# Defines the structure of this component, as well as the default values
+blueprint:
+  heading:
+    preheading:
+    heading:
+    content:
+    align:
+    width:
+  hide-empty:
+  input:
+    section:
+    nested:
+    keywords:
+    categories:
+    tags:
+    reverse:
+    sort:
+  more:
+    title:
+    link:
+    link-type:
+    icon:
+  icon-rounded:
+  icon-style:
+  cols:
+  padding:
+  limit:
+  pagination:
+  paginate:
+  background:
+    backdrop:
+    color:
+    subtle:
+  scroll:
+  bento:
+  cover:
+  header-style:
+  body-style:
+  footer-style:
+  orientation:
+  class:
+  width:
+  justify:
+  fluid:
+  theme:
+  cover:

component-library/components/articles/articles.hugo.html

@@ -0,0 +1,127 @@
+{{/* 
+    Copyright © 2025 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+*/}}
+
+{{ $error := false }}
+
+{{/* Initialize arguments */}}
+{{ $args := partial "utilities/InitArgs.html" (dict "bookshop" "articles" "args" .)}}
+{{ if or $args.err $args.warnmsg }}
+    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
+        "partial" "component-library/components/articles/articles.hugo.html" 
+        "warnid"  "warn-invalid-arguments"
+        "msg"     "Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+    {{ $error = $args.err }}
+{{ end }}
+
+{{/* Initialize global arguments */}}
+{{- $padding := partial "utilities/GetPadding.html" -}}
+
+{{/* Initialize local variables */}}
+{{ $pages := slice }}
+{{ $result := partial "assets/live-pages.html" (dict 
+	"page"       $args.page
+	"section"    $args.input.section
+	"nested"     $args.input.nested
+	"keywords"   $args.input.keywords
+	"categories" $args.input.categories
+	"tags"       $args.input.tags
+	"sort"       $args.input.sort
+	"reverse"    $args.input.reverse
+)}}
+{{ $pages = $result.pages }}
+
+<!-- Add style definitions -->
+{{ $styles := slice 
+	(dict "ratio" "1x1"  "orientation" "overlay" "portrait" false "width" "6")
+	(dict "ratio" "4x3"  "orientation" "stacked" "portrait" true  "width" "3")
+	(dict "ratio" "1x1"  "orientation" "stacked" "portrait" false "width" "3")
+	(dict "ratio" "16x9" "orientation" "stacked" "portrait" true  "width" "3")
+	(dict "ratio" "1x1"  "orientation" "stacked" "portrait" false "width" "3")
+}}
+
+<!-- Define more button -->
+{{ $moreButton := site.Params.modules.bookshop.articles.moreButton | default false }}
+{{ $moreTitle := T "more" (pluralize $args.input.section) }}
+{{ $moreLink := $args.input.section }}
+{{ $moreType := "button" }}
+{{ $moreIcon := "" }}
+{{ with $args.more }}
+	{{ if .title }}{{ $moreTitle = .title }}{{ end }}
+	{{ if .link }}{{ $moreLink = .link }}{{ end }}
+	{{ if index . "link-type" }}{{ $moreType = index . "link-type" }}{{ end }}
+	{{ if .icon }}{{ $moreIcon = .icon }}{{ end }}
+{{ end }}
+
+{{ $paginate := $args.paginate }}
+{{ if and $paginate page.IsPage }}
+    {{ partial "utilities/LogWarn.html" (dict 
+        "partial" "component-library/components/articles/articles.hugo.html"
+        "msg"     "Pagination not supported"
+        "file"    page.File
+    )}}
+	{{ $paginate = false }}
+{{ end }}
+
+{{/* Main code */}}
+{{ if not $error }}
+	{{ if or (gt (len $pages) 0) (not $args.hideEmpty) }}
+		{{- partial "assets/section-title.html" (dict
+			"heading" $args.heading
+			"justify" $args.justify
+			"class" (printf "pb-%d" $padding.y))
+		-}}
+
+		{{ $partial := "assets/card-group.html" }}
+		{{ $params := dict }}
+		{{- $params = merge $params (dict
+			"page"           page
+			"list"           $pages
+			"cols"           $args.cols
+			"limit"          $args.limit
+			"padding"        $args.padding
+			"href"           (cond $moreButton $moreLink "")
+			"href-force"     (gt $result.total (len $result.pages))
+		)}}
+
+		{{ if $args.scroll }}
+			{{ $partial = "assets/stack.html" }}
+			{{ $params = merge $params (dict 
+				"header-style" "none"
+				"body-style"   "title"
+				"footer-style" "none"
+				"gutter"       1
+				"ratio"        "1x1"
+				"orientation"  "horizontal-sm"
+				"styles"       (cond $args.bento $styles "")
+			) -}}
+		{{ else }}
+			{{ $params = merge $params (dict 
+				"header-style"   $args.headerStyle
+				"body-style"     $args.bodyStyle
+				"footer-style"   $args.footerStyle
+				"class"          (or $args.class "border-0")
+				"align"          "start"
+				"orientation"    $args.orientation
+				"href-title"     (cond $moreButton $moreTitle "")
+				"icon-rounded"   $args.iconRounded
+				"icon-style"     $args.iconStyle
+				"hook"           "assets/live-card.html"
+				"more-link-type" $moreType
+				"more-link-icon" $moreIcon
+				"pagination"     $args.pagination
+				"paginate"       $paginate
+			) -}}
+		{{ end }}
+		{{ if gt (len $pages) 0 }}
+			{{ partial $partial $params }}
+		{{ else }}
+			<p class="pt-{{ $padding.y }}">{{- T "emptyList" }}.</p>
+		{{ end }}
+	{{ end }}
+{{ end }}

component-library/components/articles/articles.scss

@@ -0,0 +1,8 @@
+.card-overlay-gradient {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    bottom: 0;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0),rgba(0, 0, 0, 1));
+}

component-library/components/cards/cards.bookshop.yml

@@ -0,0 +1,39 @@
+# Metadata about this component, to be used in the CMS
+spec:
+  structures:
+    - content_blocks
+  label: Benefits
+  description: Introduction section
+  icon: check
+  tags: []
+
+# Defines the structure of this component, as well as the default values
+blueprint:
+  heading:
+    preheading:
+    heading:
+    content:
+    align:
+    width:
+  cols:
+  icon-rounded:
+  icon-style:
+  padding:
+  background:
+    backdrop:
+    color:
+    subtle:
+  elements:
+    - title:
+      icon:
+      image:
+      mode:
+      content:
+  orientation:
+  class:
+  width:
+  justify:
+  align:
+  fluid:
+  theme:
+  cover:

component-library/components/cards/cards.hugo.html

@@ -0,0 +1,82 @@
+{{/* 
+    Copyright © 2025 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+*/}}
+
+{{ $error := false }}
+
+{{/* Initialize arguments */}}
+{{ $args := partial "utilities/InitArgs.html" (dict "bookshop" "cards" "args" .)}}
+{{ if or $args.err $args.warnmsg }}
+    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
+        "partial" "component-library/components/cards/cards.hugo.html" 
+        "warnid"  "warn-invalid-arguments"
+        "msg"     "Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+    {{ $error = $args.err }}
+{{ end }}
+
+{{/* Initialize global arguments */}}
+{{- $breakpoint := partial "utilities/GetBreakpoint.html" -}}
+{{- $padding := partial "utilities/GetPadding.html" -}}
+
+{{/* Initialize local variables */}}
+{{ $list := slice }}
+{{ range $args.elements }}
+	<!-- TODO: check mode -->
+	{{ $list = $list | append (dict 
+		"title"       .title
+		"description" (.content | page.RenderString)
+		"icon"        .icon
+		"thumbnail"   .image
+	) }}
+{{ end}}
+
+{{/* Main code */}}
+{{ if not $error }}
+	{{- partial "assets/section-title.html" (dict
+		"heading" $args.heading
+		"justify" $args.justify
+		"class" (printf "pb-%d" $padding.y))
+	-}}
+
+	{{/* Layout for small screens */}}
+	{{- partial "assets/card-group.html" (dict 
+		"page"         page
+		"list"         $list
+		"class"        (printf "border-0 card-icon-primary %s" (or $args.class ""))
+		"wrapper"      (printf "d-%s-none" $breakpoint.prev)
+		"cols"         $args.cols
+		"gutter"       "4"
+		"padding"      $args.padding
+		"header-style" "none"
+		"footer-style" "none"
+		"icon-rounded" $args.iconRounded
+		"icon-style"   (or $args.iconStyle "fa-2x")
+		"align"        $args.align
+		"orientation"  ($args.orientation | default "horizontal-sm")
+		"hook"         "assets/live-card.html"
+	) -}}
+
+	{{/* Layout for regular screens */}}
+	{{- partial "assets/card-group.html" (dict 
+		"page"         page
+		"list"         $list
+		"class"        (printf "border-0 card-icon-primary %s" (or $args.class ""))
+		"wrapper"      (printf "d-none d-%s-block" $breakpoint.prev)
+		"cols"         $args.cols
+		"gutter"       "4"
+		"padding"      $args.padding
+		"header-style" "none"
+		"footer-style" "none"
+		"icon-rounded" $args.iconRounded
+		"icon-style"   (or $args.iconStyle "fa-2x")
+		"align"        $args.align
+		"orientation"  ($args.orientation | default "stacked")
+		"hook"         "assets/live-card.html"
+	) -}}
+{{ end }}
+

component-library/components/cta/cta.bookshop.yml

@@ -0,0 +1,45 @@
+# Metadata about this component, to be used in the CMS
+spec:
+  structures:
+    - content_blocks
+  label: CTA
+  description: Call to action
+  icon: contact_page
+  tags: []
+
+# Defines the structure of this component, as well as the default values
+blueprint:
+  heading:
+    preheading:
+    title:
+    content:
+    align:
+    arrangement:
+    width:
+    size:
+  contact:
+  caption-url:
+  illustration:
+    image:
+    icon:
+    ratio:
+    class:
+    anchor:
+    mode:
+  background:
+    backdrop:
+    color:
+    subtle:
+  links:
+    -
+      title:
+      url:
+      icon:
+      force:
+  align:
+  padding:
+  order:
+  width:
+  fluid:
+  theme:
+  cover:

component-library/components/cta/cta.hugo.html

@@ -0,0 +1,43 @@
+{{/* 
+    Copyright © 2025 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+*/}}
+
+{{/* Initialize arguments */}}
+{{ $args := partial "utilities/InitArgs.html" (dict "bookshop" "cta" "args" .) }}
+{{ if or $args.err $args.warnmsg }}
+    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
+        "partial" "component-library/components/cta/cta.hugo.html" 
+        "warnid"  "warn-invalid-arguments"
+        "msg"     "Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+{{- end -}}
+
+{{/* Main code */}}
+{{ if not $args.error }}
+	{{ $links := slice }}
+	{{ if and (reflect.IsSlice .links) (gt (len .links) 0) }}
+		{{ $links = .links }}
+	{{ else }}
+		{{ with site.Params.modules.bookshop.cta.defaultURL }}
+			{{ $links = $links | append (dict "title" (T "contactAction") "url" . "icon" "fas chevron-right") }}
+		{{ end }}
+	{{ end }}
+
+	{{ partial "assets/contact.html" (dict 
+		"page"         page
+		"orientation"  "horizontal"
+		"heading"      $args.heading
+		"contact"      $args.contact
+		"caption-url"  $args.captionUrl
+		"illustration" $args.illustration
+		"class"        "contact-img"
+		"links"        $links
+		"align"        $args.align
+		"order"        $args.order
+		"data"         site.Params.modules.bookshop.cta.section 
+	) }}
+{{ end }}

component-library/components/cta/cta.scss

@@ -0,0 +1,12 @@
+.cta {
+    background-color: var(--#{$prefix}primary-bg-subtle);
+}
+
+.cta, .background-img-fluid  {
+    border-radius: #{$theme-border-radius} if($enable-important-utilities, !important, null);
+}
+
+.cta .contact-img {
+    background-color: var(--#{$prefix}body-bg);
+    border-radius: var(--bs-border-radius);
+}

component-library/components/faq/faq.bookshop.yml

@@ -0,0 +1,31 @@
+# Metadata about this component, to be used in the CMS
+spec:
+  structures:
+    - content_blocks
+  label: FAQ
+  description: Accordion of frequently asked questions
+  icon: expand_more
+  tags: []
+
+# Defines the structure of this component, as well as the default values
+blueprint:
+  heading:
+    preheading:
+    title:
+    content:
+    align:
+    width:
+    size:
+  contrast:
+  width:
+  justify:
+  background:
+    backdrop:
+    color:
+    subtle:
+  items:
+    - title:
+      description:
+  fluid:
+  theme:
+  cover:

component-library/components/faq/faq.hugo.html

@@ -0,0 +1,62 @@
+{{/* 
+    Copyright © 2025 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+*/}}
+
+{{/* Initialize arguments */}}
+{{ $args := partial "utilities/InitArgs.html" (dict "bookshop" "faq" "args" .)}}
+{{ if or $args.err $args.warnmsg }}
+    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
+        "partial" "component-library/components/faq/faq.hugo.html" 
+        "warnid"  "warn-invalid-arguments"
+        "msg"     "Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+{{ end }}
+
+{{/* Initialize global arguments */}}
+{{- $padding := partial "utilities/GetPadding.html" -}}
+
+{{/* Main code */}}
+{{ if not $args.err }}
+	{{ $color := "" }}
+	{{ if $args.contrast }}{{ $color = "white" }}{{ end }}
+	{{- partial "assets/section-title.html" (dict
+		"heading" $args.heading
+		"justify" $args.justify
+		"class" (printf "pb-%d" $padding.y))
+	-}}
+
+	{{ $class := "" }}
+	{{ $id := printf "faq-%s" (md5 (delimit (slice . now) "-")) }}
+
+	<div id="{{ $id }}" class="accordion accordion-faq {{ if $args.contrast }}accordion-faq-contrast text-white {{ end -}}
+		accordion-flush{{ with $class }} {{ . }}{{ end }} col-12 col-md-6 mx-auto">
+		{{ range $index, $item := $args.items }}
+			<div class="accordion-item">
+				{{- with $item.title -}}
+					<div class="accordion-header m-0" id="{{ $id }}-heading-{{ $id }}">
+						<button class="accordion-button collapsed" 
+							type="button" 
+							data-bs-toggle="collapse"
+							data-bs-target="#{{ $id }}-item-{{ $index }}"
+							aria-expanded="false"
+							aria-controls="{{ $id }}-item-{{ $index }}"
+						>
+						{{ if $args.color }}<div class="text-{{ $args.color }}">{{ . }}</div>{{ else }}{{ . }}{{ end }}
+						</button>
+					</div>
+				{{- end -}}
+				<div id="{{ $id }}-item-{{ $index }}" 
+					class="accordion-collapse collapse"
+					aria-labelledby="{{ $id }}-heading-{{ $index }}"
+					data-bs-parent="#{{ $id }}"
+				>
+					<div class="accordion-body">{{ $item.description | page.RenderString | safeHTML }}</div>
+				</div>
+			</div>
+		{{ end }}
+	</div>
+{{ end }}

component-library/components/faq/faq.scss

@@ -0,0 +1,44 @@
+$accordion-button-icon-white:                         url("/icons/accordion-button-icon-white.svg") !default;
+$accordion-button-active-icon-white:                  url("/icons/accordion-button-active-icon-white.svg") !default;
+
+
+.accordion-faq {
+    --#{$prefix}accordion-btn-padding-x: 0;
+    --#{$prefix}accordion-btn-focus-border-color: none;
+    --#{$prefix}accordion-btn-focus-box-shadow: none;
+    --#{$prefix}accordion-body-padding-x: 0;
+    --#{$prefix}accordion-active-color: var(--#{$prefix}primary);
+    --#{$prefix}accordion-active-bg: none;
+    --#{$prefix}accordion-border-color: var(--#{$prefix}body-color);
+    --#{$prefix}accordion-bg: none;
+}
+
+.accordion-faq .accordion-button {
+    font-size: $h5-font-size;
+}
+
+// note: explicitly suppresses border in Safari
+.accordion-faq [aria-expanded="true"] {
+    --#{$prefix}accordion-border-color: none;
+}
+
+.accordion-faq-contrast {
+    --#{$prefix}accordion-active-color: var(--#{$prefix}white);
+    --#{$prefix}accordion-border-color: white;
+}
+
+.accordion-faq-contrast .accordion-button, .accordion-faq-contrast .accordion-body {
+    --#{$prefix}accordion-btn-icon: #{$accordion-button-icon-white};
+    --#{$prefix}accordion-btn-active-icon: #{$accordion-button-active-icon-white};
+    --#{$prefix}accordion-border-color: white;
+
+    color: white;
+}
+
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        .accordion-faq .accordion-button {
+            background-color: transparent;
+        }
+    }
+}

component-library/components/hero/hero.bookshop.yml

@@ -0,0 +1,43 @@
+# Metadata about this component, to be used in the CMS
+spec:
+  structures:
+    - content_blocks
+  label: Hero
+  description: Main page Hero block
+  icon: title
+  tags: []
+
+# Defines the structure of this component, as well as the default values
+blueprint:
+  breadcrumb:
+  heading:
+    preheading:
+    title:
+    content:
+    align:
+    arrangement:
+    width:
+    size:
+  background:
+    backdrop:
+    color:
+    subtle:
+  illustration:
+    image:
+    icon:
+    ratio:
+    class:
+    anchor:
+    mode:
+    width:
+  link-type:
+  links:
+  align:
+  order:
+  overlay-mode:
+  fluid:
+  theme:
+  cover:
+  orientation:
+  width:
+  justify:

component-library/components/hero/hero.hugo.html

@@ -0,0 +1,37 @@
+{{/* 
+    Copyright © 2025 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+*/}}
+
+{{/* Initialize arguments */}}
+{{ $args := partial "utilities/InitArgs.html" (dict "bookshop" "hero" "args" .) }}
+{{ if or $args.err $args.warnmsg }}
+    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
+        "partial" "component-library/components/hero/hero.hugo.html" 
+        "warnid"  "warn-invalid-arguments"
+        "msg"     "Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+{{ end }}
+
+{{ if not $args.err }}
+	{{ partial "assets/hero.html"  (dict 
+        "page"         page
+		"breadcrumb"   $args.breadcrumb
+		"heading"      $args.heading
+		"background"   $args.background
+		"illustration" $args.illustration
+		"align"        $args.align
+		"order"        $args.order
+		"overlay-mode" $args.overlayMode
+		"cover"        $args.cover
+		"link-type"    $args.linkType
+		"links"        $args.links
+		"orientation"  $args.orientation
+		"width"        $args.width
+		"justify"      $args.justify
+		)
+	}}
+{{ end }}

component-library/components/hero/hero.scss

@@ -0,0 +1,18 @@
+.background-img-fluid {
+    position: absolute;
+    object-fit: cover;
+    height: 100%;
+    width: 100%;
+    z-index: -1;
+}
+
+.background-container {
+    position: relative;
+    width: 100%;
+    height: auto;
+    background-color: rgba($dark, 0.8);
+}
+
+.hero-content {
+    z-index: 1;
+}

component-library/components/panels/panels.bookshop.yml

@@ -0,0 +1,38 @@
+# Metadata about this component, to be used in the CMS
+spec:
+  structures:
+    - content_blocks
+  label: Panels
+  description: Introduction section
+  icon: check
+  tags: []
+
+# Defines the structure of this component, as well as the default values
+blueprint:
+  heading:
+    preheading:
+    heading:
+    content:
+    align:
+    width:
+  cols:
+  padding:
+  background:
+    backdrop:
+    color:
+    subtle:
+  elements:
+    - title:
+      icon:
+      image:
+      mode:
+      content:
+  tab-type:
+  ratio:
+  responsive:
+  class:
+  width:
+  justify:
+  fluid:
+  theme:
+  cover:

component-library/components/panels/panels.hugo.html

@@ -0,0 +1,88 @@
+{{/* 
+    Copyright © 2025 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+*/}}
+
+{{ $error := false }}
+
+{{/* Initialize arguments */}}
+{{ $args := partial "utilities/InitArgs.html" (dict "bookshop" "panels" "args" .)}}
+{{ if or $args.err $args.warnmsg }}
+    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
+        "partial" "component-library/components/panels/panels.hugo.html" 
+        "warnid"  "warn-invalid-arguments"
+        "msg"     "Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+    {{ $error = $args.err }}
+{{ end }}
+
+{{/* Initialize global arguments */}}
+{{- $breakpoint := partial "utilities/GetBreakpoint.html" -}}
+{{- $padding := partial "utilities/GetPadding.html" -}}
+
+{{/* Initialize local variables */}}
+{{ $list := slice }}
+{{ $titles := slice }}
+{{ $toc := slice }}
+{{ $parentID := printf "panel-%v" (cond (isset . "_ordinal") (index . "_ordinal") (md5 (delimit (slice . now) "-"))) }}
+{{ $inner := "" }}
+{{ range $i, $element := $args.elements }}
+	{{ $toc = $toc | append (dict "href" "panel-0-1" "level" 2 "title" $element.title) }}
+
+    {{ $hero := partial "assets/hero.html"  (dict 
+        "page"          page
+        "heading"       (dict "content" $element.content "width" 8)
+        "background"    $args.background
+        "illustration"  (dict "ratio" $args.ratio "icon" $element.icon "image" $element.image "mode" $element.mode "justify" "end")
+		"order"         $args.order
+        "link-type"     $args.linkType
+        "links"         $args.links
+        "orientation"   "horizontal"
+		"align"         "start"
+		"width"         12
+        "content-style" "fs-6"
+        )
+    }}
+
+	{{- $output := partial "assets/nav-item.html" (dict 
+        "page"      page
+        "id"        $i
+        "parent-id" $parentID
+        "fade"      false
+        "title"     $element.title
+		"show"      (eq $i 0)
+        "raw"       $hero
+        )
+    -}}
+
+	{{ $inner = printf "%s\n%s" $inner $output }}
+	{{ $titles = $titles | append $element.title }}
+{{ end}}
+
+{{/* Main code */}}
+{{ if not $error }}
+	{{- partial "assets/section-title.html" (dict
+		"heading" $args.heading
+		"justify" $args.justify
+		"class" (printf "pb-%d" $padding.y))
+	-}}
+
+	{{- partial "assets/nav.html" (dict 
+        "id"           (or $args.id $parentID)
+        "page"         page
+		"nav-items"    $inner
+        "nav-titles"   $titles
+        "tab-type"     $args.tabType
+        "vertical"     $args.vertical
+        "word-wrap"    $args.wordWrap
+        "class"        $args.class
+        "pane"         $args.pane
+        "width"        $args.width
+		"responsive"   $args.responsive
+        ) 
+    -}}
+{{ end }}
+

component-library/components/panels/panels.scss

@@ -0,0 +1,13 @@
+.panels .dropdown-toggle {
+    text-decoration: none !important;
+}
+
+.panels .nav-tabs {
+    border-top-left-radius: #{$theme-border-radius};
+    border-top-right-radius: #{$theme-border-radius};
+    margin-left: #{$theme-border-radius};
+}
+
+.panels .tab-content {
+    border-radius: #{$theme-border-radius};
+}

component-library/components/releases/releases.bookshop.yml

@@ -0,0 +1,29 @@
+# Metadata about this component, to be used in the CMS
+spec:
+  structures:
+    - content_blocks
+  label: Releases
+  description: Release timeline
+  icon: fingerprint
+  tags: []
+
+# Defines the structure of this component, as well as the default values
+blueprint:
+  heading:
+    preheading:
+    title:
+    content:
+    align:
+    arrangement:
+    width:
+    size:
+  background:
+    backdrop:
+    color:
+    subtle:
+  width:
+  justify:
+  data:
+  fluid:
+  theme:
+  cover:

component-library/components/releases/releases.hugo.html

@@ -0,0 +1,28 @@
+{{/* 
+    Copyright © 2025 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+*/}}
+
+{{/* Initialize arguments */}}
+{{ $args := partial "utilities/InitArgs.html" (dict "bookshop" "releases" "args" .) }}
+{{ if or $args.err $args.warnmsg }}
+    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
+        "partial" "component-library/components/releases/releases.hugo.html" 
+        "warnid"  "warn-invalid-arguments"
+        "msg"     "Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+{{- end -}}
+
+{{/* Main code */}}
+{{ if not $args.error }}
+    {{ partial "assets/timeline.html"  (dict 
+        "page"       page
+        "background" $args.background
+        "heading"    $args.heading
+        "data"       $args.data
+        )
+    }}
+{{- end -}}

component-library/components/separator/separator.bookshop.yml

@@ -0,0 +1,10 @@
+# Metadata about this component, to be used in the CMS
+spec:
+  structures:
+    - content_blocks
+  label: Separator
+  description: Inserts a horizontal page section separator
+  icon: horizontal_rule
+  tags: []
+
+blueprint:

component-library/components/separator/separator.hugo.html

@@ -0,0 +1,20 @@
+{{/* 
+    Copyright © 2025 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+*/}}
+
+{{ $args := partial "utilities/InitArgs.html" (dict "bookshop" "separator" "args" .) }}
+{{ if or $args.err $args.warnmsg }}
+    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
+        "partial" "component-library/components/separator/separator.hugo.html" 
+        "warnid"  "warn-invalid-arguments"
+        "msg"     "Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+{{ end }}
+
+{{ if not $args.err }}
+    <hr class="w-100">
+{{ end }}

component-library/components/video-message/video-message.bookshop.yml

@@ -0,0 +1,57 @@
+# Metadata about this component, to be used in the CMS
+spec:
+  structures:
+    - content_blocks
+  label: Video
+  description: Video section
+  icon: build
+  tags: []
+
+# Defines the structure of this component, as well as the default values
+blueprint:
+  heading:
+    preheading:
+    title:
+    content:
+    align:
+    arrangement:
+    width:
+    size:
+  background:
+    backdrop:
+    color:
+    subtle:
+  link-type:
+  orientation:
+  icon-rounded:
+  icon-style:
+  video:
+    provider:
+    account:
+    media-id:
+    autoplay:
+    query-args:
+    color:
+  cols:
+  messages:
+    - title:
+      icon:
+      content:
+      link:
+      label:
+  border:
+  width:
+  justify:
+  fluid:
+  theme:
+  cover:
+
+_structures:
+  messages:
+    values:
+      value:
+        title:
+        icon:
+        content:
+        link:
+        label:

component-library/components/video-message/video-message.hugo.html

@@ -0,0 +1,163 @@
+{{/* 
+    Copyright © 2025 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+*/}}
+
+{{/* Initialize arguments */}}
+{{ $args := partial "utilities/InitArgs.html" (dict "bookshop" "video-message" "args" .) }}
+{{ if or $args.err $args.warnmsg }}
+    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
+        "partial" "component-library/components/video-message/video-message.hugo.html" 
+        "warnid"  "warn-invalid-arguments"
+        "msg"     "Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+{{ end }}
+
+{{/* Initialize global variables */}}
+{{- $breakpoint := partial "utilities/GetBreakpoint.html" -}}
+{{- $padding := partial "utilities/GetPadding.html" -}}
+
+{{- define "_partials/inline/video.html" -}}
+	{{ $provider := .provider }}
+	{{ $account := .account }}
+	{{ $mediaID := (index . "media-id") }}
+	{{ $autoplay := .autoplay }}
+	{{ $queryArgs := .queryArgs }}
+	{{ $border := .border }}
+	{{ $padding := .padding }}
+	{{ $color := .color }}
+
+	{{ if site.Params.env_bookshop_live }}
+		{{/* Define dummy content as we cannot retrieve video data in live mode */}}
+		{{- partial "assets/live-image.html" (dict
+			"src" "/img/placeholder-video.svg"
+			"ratio" "21x9"
+			"wrapper" (printf "text-center mb-%d" $padding.y)) -}}
+	{{ else }}
+        <div class="video-container{{ if $border }} video-container-border{{ end}} {{ with $color }}bg-{{ . }}{{ end }}">
+			{{ partial "assets/video.html" (dict
+				"page"       page
+				"provider"   $provider
+				"account"    $account
+				"media-id"   $mediaID
+				"autoplay"   $autoplay
+				"query-args" $queryArgs
+			) -}}
+			{{ if $border }}
+				<div class="video-overlay video-overlay-start"></div>
+				<div class="video-overlay video-overlay-top"></div>
+				<div class="video-overlay video-overlay-end"></div>
+				<div class="video-overlay video-overlay-bottom"></div>
+			{{ end }}
+        </div>
+	{{ end }}
+{{ end }}
+
+{{- define "_partials/inline/messages.html" -}}
+	{{ $list := .list }}
+	{{ $cols := .cols }}
+	{{ $type := .type }}
+	{{ $iconRounded := .iconRounded }}
+	{{ $iconStyle := .iconStyle }}
+
+	{{- partial "assets/card-group.html" (dict 
+		"page"         page
+		"list"         $list
+		"class"        "border-0 card-icon card-icon-secondary"
+		"cols"         $cols
+		"gutter"       ""
+		"padding"      "0"
+		"header-style" "none"
+		"footer-style" "none"
+		"icon-style"   "fa-fluid fa-fw"
+		"align"        "start"
+		"orientation"  "horizontal-sm"
+		"button"       true
+		"link-type"    $type
+		"icon-rounded" $iconRounded
+		"icon-style"   $iconStyle
+	) -}}
+{{ end }}
+
+{{/* Main code */}}
+{{ if not $args.err }}
+	{{ $list := slice }}
+
+	{{ range $args.messages }}
+		{{ $path := "" }}
+		{{ $href := "" }}
+		{{ with .link }}{{ if hasPrefix . "http" }}{{ $href = . }}{{ else }}{{ $path = . }}{{ end }}{{ end }}
+
+		{{ $list = $list | append (dict 
+			"title"        .title
+			"description"  (.content | page.RenderString) 
+			"icon"         .icon
+			"href"         $href
+			"path"         $path
+			"button-label" .label
+		) }}
+	{{ end}}
+
+	{{- partial "assets/section-title.html" (dict
+		"heading" $args.heading
+		"justify" $args.justify
+		"class" (printf "pb-%d" $padding.y))
+	-}}
+
+	{{ if eq $args.orientation "stacked" }}
+		<div class="col-{{ $breakpoint.current }}-{{ $args.width }} mx-auto">
+		{{ with $args.video }}
+			{{- partial "inline/video.html" (dict
+				"provider"   .provider
+				"account"    .account
+				"media-id"   (index . "media-id")
+				"autoplay"   .autoplay
+				"query-args" .queryArgs
+				"border"     $.border
+				"padding"    $padding
+				"color"      .color
+			) -}}
+		{{ end }}
+		</div>
+		<div class="mt-{{ $padding.y }} w-100">
+			{{- partial "inline/messages.html" (dict
+				"list"        $list
+				"cols"        $args.cols
+				"type"        $args.type
+				"iconRounded" $args.iconRounded
+				"iconStyle"   $args.iconStyle
+			) -}}
+		</div>
+	{{ else }}
+		<div class="container grid gap-{{ $padding.x }}">
+			<div class="row row-cols-1 row-cols-{{ $breakpoint.current }}-2">
+				<div class="col col-{{ $breakpoint.current }}-{{ $args.width }} p-0">
+					{{ with $args.video }}
+						{{- partial "inline/video.html" (dict
+							"provider"   .provider
+							"account"    .account
+							"media-id"   (index . "media-id")
+							"autoplay"   .autoplay
+							"query-args" .queryArgs
+							"border"     $.border
+							"padding"    $padding
+							"color"      .color
+						) -}}
+					{{ end }}
+				</div>
+				<div class="col col-{{ $breakpoint.current }}-{{ sub 12 $args.width }} mt-{{ $padding.y }} mt-{{ $breakpoint.current }}-0">
+					{{- partial "inline/messages.html" (dict
+						"list"        $list
+						"cols"        1
+						"type"        $args.type
+						"iconRounded" $args.iconRounded
+						"iconStyle"   $args.iconStyle
+					) -}}
+				</div>
+			</div>
+		</div>
+	{{ end }}
+{{ end }}

component-library/components/video-message/video-message.scss

@@ -0,0 +1,60 @@
+.video-container { 
+    --bs-video-border-color: var(--bs-primary);
+    --bs-video-border-width: 1rem;
+    
+    border-radius: $theme-border-radius;
+    position: relative;
+}
+
+.video-container > .video-embedded { 
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+}
+
+.video-container-border > .video-embedded { 
+    width: calc(100% - var(--bs-video-border-width) / 2);
+    height: calc(100% - var(--bs-video-border-width) / 2);
+    margin-left: calc(var(--bs-video-border-width) / 2);
+    padding: 1rem;
+}
+
+.video-overlay {
+    border: calc(var(--bs-video-border-width) / 2) solid var(--bs-video-border-color);
+    background: var(--bs-video-border-color);
+    overflow: hidden;
+    position: absolute;
+}
+
+.video-overlay-start {
+    border-bottom-left-radius: $theme-border-radius;
+    border-top-left-radius: $theme-border-radius;
+    width: 1;
+    height: 100%;
+    left: 0;
+    bottom: 0;
+}
+
+.video-overlay-top {
+    width: calc(100% - 1rem);
+    height: 1;
+    left: 1rem;
+    top: 0;
+}
+
+.video-overlay-bottom {
+    width: calc(100% - 1rem);
+    height: 1;
+    left: 1rem;
+    bottom: 0;
+}
+
+.video-overlay-end {
+    border-bottom-right-radius: $theme-border-radius;
+    border-top-right-radius: $theme-border-radius;
+    width: 1;
+    height: 100%;
+    left: 100%;
+    bottom: 0;
+}

component-library/helpers/component.html

@@ -0,0 +1,109 @@
+{{/* Adapted from https://github.com/CloudCannon/bookshop/blob/main/hugo/v3/core/helpers/component.html */}}
+
+{{/*
+    Renders a single Bookshop component, 
+    wrapping in in a live editing context tag.
+
+    Expects a slice:
+    [
+        <string>, # Component name
+        <_>       # Component props
+    ]
+*/}}
+
+{{- $component_name := index . 0 -}}
+{{- $component_props := index . 1 -}}
+{{- $class := index . 2 | default "p-0" -}}
+{{- $bgclass := index . 3 | default "" -}}
+{{- $padding := partial "utilities/GetPadding.html" -}}
+{{- with index $component_props "padding" }}{{ $padding = dict "x" . "y" . }}{{ end -}}
+{{- $component_path := partial "_bookshop/helpers/component_key" $component_name -}}
+{{- $flat_component_path := partial "_bookshop/helpers/flat_component_key" $component_name -}}
+
+{{- $resolved_component := false -}}
+{{- if templates.Exists ( printf "_partials/%s" $component_path ) -}}
+    {{- $resolved_component = $component_path -}}
+{{- else if templates.Exists ( printf "_partials/%s" $flat_component_path ) -}}
+    {{- $resolved_component = $flat_component_path -}}
+{{- end -}}
+
+<!-- TODO: use initialized component args instead of component_props -->
+{{ $error := false }}
+{{ $args := dict }}
+{{- if $resolved_component -}}
+    {{ $args = partial "utilities/InitArgs.html" (dict "bookshop" $component_name "args" $component_props) }}
+    {{ if or $args.err $args.warnmsg }}
+        {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
+            "partial" $resolved_component
+            "warnid"  "warn-invalid-arguments"
+            "msg"     "Invalid arguments"
+            "details" ($args.errmsg | append $args.warnmsg)
+            "file"    page.File
+        )}}
+    {{ end }}
+{{ end }}
+
+{{ if and $resolved_component (not $args.err) }}
+    {{- $id := index $component_props "id" -}}
+    {{- $cover := index $component_props "cover" -}}
+    {{- $background := index $component_props "background" -}}
+    {{- $backdrop := "" -}}
+    {{- $fluid := index $component_props "fluid" | default true -}}
+    {{- $wrapper := index $component_props "wrapper" -}}
+    {{- $width := index $component_props "width" -}}
+    {{- $justify := index $component_props "justify" | default "start" -}}
+    {{- $paddingOuter := cond (ne $component_name "separator") (printf "px-xxl-0 px-%d py-0" $padding.x) "" -}}
+    {{- $padding := cond (ne $component_name "separator") (printf "px-%d %spy-%d" $padding.x (cond $fluid "px-xxl-0 " "") $padding.y) "" -}}
+    {{ with $background }}
+        {{ $wrapper = partial "utilities/GetBackgroundStyle.html" (dict "background" . "class" $wrapper) }}
+        {{ if reflect.IsMap $background }}
+            {{ with $background.backdrop }}{{ $wrapper = "" }}{{ $backdrop = . }}{{ end }}
+        {{ end }}
+    {{ end }}
+    {{- $theme := index $component_props "theme" -}}
+    {{- $overlayMode := (or (index $component_props "overlay-mode") page.Params.overlayMode) | default "dark" -}}
+    {{ if not $backdrop }}{{ $overlayMode = page.Params.overlayMode }}{{ end }}
+    {{ if eq $overlayMode "none" }}{{ $overlayMode = "" }}{{ end }}
+    
+    {{ (printf "<!--bookshop-live name(%s)-->" $component_name) | safeHTML }}
+    {{ if not $fluid }}<div class="container-xxl {{ $paddingOuter }}">{{ end }}
+    <section {{ with $id }}id="{{ . }}" {{ end }}class="{{ $component_name }}
+        container-fluid {{ $class }}
+        {{ with $wrapper }}{{ . }}{{ end -}}
+        {{- if and $backdrop $overlayMode }} background-container{{ end -}}
+        {{- if $cover }} section-cover d-flex align-items-center{{ end }}" 
+        {{ with $overlayMode -}}
+            data-bs-theme="{{ . }}"
+            data-bs-overlay="{{ . }}"
+        {{- else -}}
+        {{- with $theme }}data-bs-theme="{{ . }}"{{ end -}}
+        {{- end -}}
+        >
+        {{- if $backdrop -}}
+            {{ partial "assets/live-image.html" (dict
+                "src" $backdrop
+                "class" (printf "background-img-fluid %s" $bgclass)
+                "title" (T "backgroundImage"))
+            }}
+        {{- end -}}
+
+        {{ $col := cond (and $width (lt $width 12)) (printf "col-12 col-md-%d" $width) "" }}
+        {{ if $args.passthrough }}
+            {{ partial $resolved_component $component_props }}
+        {{ else }}
+            <div class="container-{{ cond $fluid "xxl" "fluid" }} {{ $padding }} d-flex flex-column align-items-{{ $justify }}">
+                {{ with $col }}
+                    <div class="{{ . }}">{{ partial $resolved_component $component_props }}</div>
+                {{ else }}
+                    {{ partial $resolved_component $component_props }}
+                {{ end}}
+            </div>
+        {{ end }}
+    </section>
+    {{ if not $fluid }}</div>{{ end }}
+    {{ "<!--bookshop-live end-->" | safeHTML }}
+{{- else if (not $args.err) -}}
+    {{- $file_loc := slicestr $component_path 9 -}}
+    {{- $flat_file_loc := slicestr $flat_component_path 9 -}}
+    {{- partial "_bookshop/errors/err" (printf "Component \"%s\" does not exist.\n     Create this component by placing a file in your bookshop at %s or %s" $component_name $file_loc $flat_file_loc) -}}
+{{- end -}}

component-library/helpers/partial.html

@@ -0,0 +1,27 @@
+{{/* Adapted from https://github.com/CloudCannon/bookshop/blob/main/hugo/v3/core/helpers/partial.html */}}
+
+{{/*
+    Renders a single Bookshop partial, 
+    wrapping in in a live editing context tag.
+
+    Expects a slice:
+    [
+        <string>, # Partial name
+        <_>       # Partial props
+    ]
+*/}}
+
+{{- $partial_name := index . 0 -}}
+{{- $partial_props := index . 1 -}}
+{{- $partial_path := partial "_bookshop/helpers/partial_key" $partial_name -}}
+
+{{- if templates.Exists ( printf "partials/%s" $partial_path ) -}}
+
+{{ (printf "<!--bookshop-live name(%s)-->" $partial_name) | safeHTML }}
+{{ partial $partial_path $partial_props }}
+{{ "<!--bookshop-live end-->" | safeHTML }}
+
+{{- else -}}
+    {{- $file_loc := slicestr $partial_path 9 -}}
+    {{- partial "_bookshop/errors/err" (printf "Partial \"%s\" does not exist.\n     Create this partial by placing a file in your bookshop at %s" $partial_name $file_loc) -}}
+{{- end -}}

component-library/shared/hugo/page.hugo.html

@@ -0,0 +1,5 @@
+<div>
+{{ range . }}
+  {{ partial "bookshop" . }}
+{{ end }}
+</div>

component-library/shared/styles/global.scss

@@ -0,0 +1,23 @@
+// Files in shared/styles will be used as global stylesheets on your site,
+// as well as in the component browser and screenshots.
+
+.display-1 > strong {
+    color: var(--bs-primary);
+    font-weight: normal !important;
+}
+
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        .preheading.text-primary {
+            color: #{$primary-text-emphasis-dark} !important;
+        }
+    }
+}
+
+h1[class*="display-"] {
+    margin-top: 0;
+}
+
+.navbar-offset {
+    padding-top: var(--navbar-offset);
+}

component-library/theme.scss

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

config/_default/hugo.toml

@@ -1,6 +1,6 @@
 # toml-docs-start main
 title = "Hinode"
-copyright = "Copyright © 2024 Mark Dumay."
+copyright = "Copyright © 2022 - 2025 Mark Dumay."
 enableGitInfo = true
 # toml-docs-end main
 
@@ -84,7 +84,7 @@ home = ["HTML", "RSS", "REDIR", "netlify", "server"]
     disabled = false
     simple = true
 
-  [privacy.twitter]
+  [privacy.x]
     disabled = false
     enableDNT = true
     simple = true
@@ -100,7 +100,7 @@ home = ["HTML", "RSS", "REDIR", "netlify", "server"]
 [services]
   [services.instagram]
     disableInlineCSS = true
-  [services.twitter]
+  [services.x]
     disableInlineCSS = true
   [services.googleAnalytics]
     # ID = "G-xxxxxxxxxx"
@@ -116,8 +116,7 @@ home = ["HTML", "RSS", "REDIR", "netlify", "server"]
 [module]
   [module.hugoVersion]
     extended = true
-    min = "0.134.0"
+    min = "0.146.0"
-    max = ""
   [[module.mounts]]
     source = "archetypes"
     target = "archetypes"
@@ -139,18 +138,47 @@ home = ["HTML", "RSS", "REDIR", "netlify", "server"]
   [[module.mounts]]
     source = "static"
     target = "static"
+  [[module.mounts]]
+    source = 'component-library'
+    target = 'layouts/partials/bookshop'
+    includeFiles = ['**/*.hugo.html']
+  [[module.mounts]]
+    source = 'component-library'
+    target = 'data/structures'
+    includeFiles = ['**/*.bookshop.yml']
+  [[module.mounts]]
+    source = 'component-library'
+    target = 'assets/bookshop'
+  [[module.mounts]]
+    source = 'component-library'
+    target = 'assets/scss/modules/bookshop'
+    includeFiles = ['**/*.scss']
+    excludeFiles = ['bookshop.scss']
+  [[module.mounts]]
+    source = 'component-library/bookshop.scss'
+    target = 'assets/scss/bookshop.scss'
+  [[module.mounts]]
+    source = 'component-library/helpers'
+    target = 'layouts/partials/_bookshop/helpers'
+  # ensures main package.json is always available, even when using workspaces
+  # in workspaces, the package.json is pointing to the first imported module
+  [[module.mounts]]
+    source = "package.json"
+    target = "assets/data/package-hinode.json"
   [[module.mounts]]
     source = "netlify.toml"
     target = "assets/config/netlify.toml"
 # toml-docs-start modules
+  [[module.imports]]
+    path = "github.com/cloudcannon/bookshop/hugo/v3"
   [[module.imports]]
     path = "github.com/gethinode/mod-bootstrap"
   [[module.imports]]
     path = "github.com/gethinode/mod-csp"
   [[module.imports]]
-    path = "github.com/gethinode/mod-flexsearch/v2"
+    path = "github.com/gethinode/mod-flexsearch/v3"
   [[module.imports]]
-    path = "github.com/gethinode/mod-fontawesome"
+    path = "github.com/gethinode/mod-fontawesome/v2"
   [[module.imports]]
     path = "github.com/gethinode/mod-google-analytics"
   [[module.imports]]
@@ -160,9 +188,11 @@ home = ["HTML", "RSS", "REDIR", "netlify", "server"]
   [[module.imports]]
     path = "github.com/gethinode/mod-lottie"
   [[module.imports]]
-    path = "github.com/gethinode/mod-simple-datatables"
+    path = "github.com/gethinode/mod-mermaid/v3"
   [[module.imports]]
-    path = "github.com/gethinode/mod-utils/v2"
+    path = "github.com/gethinode/mod-simple-datatables/v2"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-utils/v4"
 # toml-docs-end modules
 
 # toml-docs-start segments

config/_default/params.toml

@@ -2,21 +2,30 @@
 [main]
     separator = "-"
     description = "Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5."
-    enableDarkMode = true
     enableLanguageSelectionStorage = false
-    modes = ["light", "dark"]
     canonifyAssetsURLs = false
     endorse = true
     footerBelowFold = false
     loading = "lazy"
     breakpoint = "md"
+    titleCase = false
+    [main.padding]
+        x = 4
+        y = 4
     [main.internalLinks]
         validate = true
+        pretty = false
     [main.externalLinks]
         cue = false
         tab = false
     [main.build]
         transpiler = "libsass"
+    [main.colorMode]
+        enabled = true
+        modes = ["light", "dark"]
+        toggle = false
+        iconLight = "fas sun"
+        iconDark = "fas moon"
 # toml-docs-end main
 
 # toml-docs-start images
@@ -40,6 +49,12 @@
         host = "youtube"
 # toml-docs-end videos
 
+[dam]
+    videoCodecs = [
+        "webm/vp9",
+        "mp4/h265",
+        "mp4"
+    ]
 
 # toml-docs-start debugging
 [debugging]
@@ -73,18 +88,31 @@
 [navigation]
     anchor = true
     logo = "/img/logo_icon.svg"
+    logo-mode = false
+    logo-align = "center"
+    logo-height = 30
     color = "body"
     fixed = true
     overlay = false
     overlayMode = "dark"
     horizontal = false
-    offset = "5.5rem"
+    offset = "5.7rem"
-    search = true
-    searchModal = false
     breadcrumb = true
     toc = true
     sidebar = true
     size = "md"
+    startLevel = 2
+    endLevel = 3
+    maxNumHeadings = 9
+    [navigation.padding]
+        x = 4
+        y = 4
+    [navigation.language]
+        icon = "fas globe"
+    [navigation.search]
+        enabled = true
+        modal = true
+        icon = "fas magnifying-glass"
 # toml-docs-end navigation
 
 # toml-docs-start messages
@@ -241,3 +269,25 @@
     frame-src = ["player.vimeo.com"]
     img-src = ["i.vimeocdn.com"]
     script-src = ["player.vimeo.com"]
+
+# define module integration
+[modules.bookshop]
+  integration = "core"
+
+# provide default hero settings
+[modules.bookshop.hero]
+  align = "start"
+#   backdrop = "/assets/img/nat-9l98kFByiao-unsplash.jpg"
+  overlayMode = "dark"
+  section = true
+  default = ["section"]
+#   default = ["page", "home", "section"]
+
+[modules.bookshop.title]
+  size = 4
+  arrangement = "above"
+  headingStyle = "display"
+  bodyStyle = "lead text-muted"
+
+[modules.bookshop.articles]
+  moreButton = true

config/_default/server.toml

@@ -7,17 +7,17 @@
     Access-Control-Allow-Origin = '*'
     Content-Security-Policy = """
         base-uri 'self'; \
-        connect-src 'self' *.google-analytics.com *.analytics.google.com *.googletagmanager.com; \
+        connect-src 'self' *.analytics.google.com *.google.com *.google-analytics.com *.googletagmanager.com; \
         default-src 'none'; \
-        font-src 'self' fonts.gstatic.com; \
+        font-src 'self' fonts.gstatic.com data:; \
         form-action 'self'; \
-        frame-src player.cloudinary.com www.youtube-nocookie.com www.youtube.com player.vimeo.com; \
+        frame-src *.googletagmanager.com player.cloudinary.com www.youtube-nocookie.com www.youtube.com player.vimeo.com; \
-        img-src 'self' *.google-analytics.com *.googletagmanager.com data: *.imgix.net *.imagekit.io *.cloudinary.com i.ytimg.com tile.openstreetmap.org i.vimeocdn.com; \
+        img-src 'self' *.google-analytics.com *.googletagmanager.com googletagmanager.com ssl.gstatic.com www.gstatic.com data: *.imgix.net *.imagekit.io *.cloudinary.com i.ytimg.com tile.openstreetmap.org i.vimeocdn.com; \
         manifest-src 'self'; \
         media-src 'self'; \
         object-src 'none'; \
-        script-src 'self' *.google-analytics.com *.googletagmanager.com player.vimeo.com; \
+        script-src 'self' *.google-analytics.com *.googletagmanager.com *.analytics.google.com googletagmanager.com tagmanager.google.com player.vimeo.com; \
-        style-src 'self' www.youtube.com; \
+        style-src 'self' googletagmanager.com tagmanager.google.com fonts.googleapis.com www.youtube.com; \
         """
     Permissions-Policy = 'geolocation=(), midi=(), sync-xhr=(), microphone=(), camera=(), magnetometer=(), gyroscope=(), fullscreen=(), payment=() '
     Referrer-Policy = 'strict-origin'

config/postcss.config.js

@@ -3,13 +3,15 @@ const cssnano = require('cssnano')({
   preset: 'advanced'
 })
 const whitelister = require('purgecss-whitelister')
-const purgecss = require('@fullhuman/postcss-purgecss')({
+const purgeImport = require('@fullhuman/postcss-purgecss')
+const purgeCSSPlugin = purgeImport.purgeCSSPlugin || purgeImport.default || purgeImport
+const purgecss = purgeCSSPlugin({
   content: ['./hugo_stats.json'],
   defaultExtractor: (content) => {
     const els = JSON.parse(content).htmlElements
     return [...(els.tags || []), ...(els.classes || []), ...(els.ids || [])]
   },
-  dynamicAttributes: ['data-bs-theme'],
+  dynamicAttributes: ['data-bs-theme', 'data-bs-theme-animate'],
   safelist: ['was-validated',
     ...whitelister([
       './assets/scss/components/_clipboard.scss',
@@ -25,10 +27,11 @@ const purgecss = require('@fullhuman/postcss-purgecss')({
       './assets/scss/theme/fonts.scss',
       './assets/scss/theme/theme.scss',
       './_vendor/github.com/gethinode/mod-cookieyes/v2/assets/scss/cookieyes.scss',
-      './_vendor/github.com/gethinode/mod-flexsearch/v2/assets/scss/modules/flexsearch/flexsearch.scss',
+      './_vendor/github.com/gethinode/mod-flexsearch/v3/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/gethinode/mod-simple-datatables/dist/simple-datatables.scss',
+      './_vendor/github.com/gethinode/mod-mermaid/v3/assets/scss/mermaid.scss',
+      './_vendor/github.com/gethinode/mod-simple-datatables/v2/dist/simple-datatables.scss',
       './_vendor/github.com/twbs/bootstrap/scss/_carousel.scss',
       './_vendor/github.com/twbs/bootstrap/scss/_dropdown.scss',
       './_vendor/github.com/twbs/bootstrap/scss/_modal.scss',

content/_index.md

@@ -1,15 +1,24 @@
 ---
 title: Welcome to Hinode!
 description: A clean documentation and blog theme for your Hugo site based on Bootstrap 5.
-thumbnail:
+content_blocks:
-    url: /img/sunrise.jpg
+  - _bookshop_name: hero
-    author: Harris Vo
+    heading:
-    authorURL: https://unsplash.com/@hoanvokim
+      title: Welcome to Hinode!
-    origin: https://unsplash.com/photos/ZX6BPboJrYk
+      content: |-
-    originName: Unsplash
+        A clean documentation and blog theme for your Hugo site based on Bootstrap 5.
-actions:
+      width: 6
-  get-started:
+    background:
-    url: "https://gethinode.com/docs"
+      color: primary
-    title: "Get started"
+      subtle: true
-    icon: "fas book-open"
+    illustration:
+      image: /img/sunrise.jpg
+      ratio: 16x9
+    width: 8
+    links:
+      - title: Getting started
+        url: https://gethinode.com/docs
+        icon: fas chevron-right
+    orientation: horizontal
+    justify: center
 ---

content/_modals/_index.md

@@ -0,0 +1,8 @@
+---
+title: Modal elements
+cascade:
+- build:
+    list: local
+    publishResources: false
+    render: never
+---

data/netlify.toml

@@ -4,12 +4,12 @@
     command = "npm run build:example"
 
 [build.environment]
-    DART_SASS_VERSION = "1.78.0"
+    DART_SASS_VERSION = "1.89.2"
-    HUGO_VERSION = "0.134.1"
+    HUGO_VERSION = "0.147.9"
     HUGO_ENV = "production"
     HUGO_ENABLEGITINFO = "true"
-    NODE_VERSION = "20.17.0"
+    NODE_VERSION = "22.13.0"
-    NPM_VERSION = "10.8.2"
+    NPM_VERSION = "10.9.2"
 # toml-docs-end netlify
 
 [context.deploy-preview]

data/structures/abbr.yml

@@ -19,7 +19,7 @@ arguments:
       the first (and only) matched argument. Non-alphanumeric keys must be quoted.
   data:
     type: string
-    default: abbr.yaml
+    default: abbr
     optional: true
     comment: >-
       Filename of the abbrevation input. You can omit the file extension. The

data/structures/accordion-item.yml

@@ -1,18 +1,17 @@
 comment: >-
   Defines an individual accordion item.
 arguments:
+  title:
+    release: v1.0.0
+  show:
+  class:
+  # deprecated arguments
   header:
     type: string
-    optional: false
+    optional: true
     comment: Header of the accordion item.
-  show:
+    deprecated: v1.0.0
-    type: bool
+    alternative: title
-    optional: true
-    comment: Flag to indicate an item should be shown as collapsed.
-  class:
-    type: string
-    optional: true
-    comment: Class attribute of the accordion item.
 body:
   optional: false
   comment: Content of the accordion item.

data/structures/accordion.yml

@@ -3,16 +3,5 @@ comment: >-
   items. Add accordion-item inner elements for each accordion item.
 arguments:
   id:
-    type: string
-    optional: true
-    comment: >-
-      ID of the accordion, defaults to `accordion-n` with a sequential number n.
   always-open:
-    type: bool
-    optional: true
-    comment: >-
-      Flag to make accordion items stay open when another item is opened.
   class:
-    type: string
-    optional: true
-    comment: Class attribute of the accordion, e.g. `w-50`.

data/structures/alert.yml

@@ -2,36 +2,14 @@ comment: >-
   Use the alert shortcode to display a contextual feedback message. The inner
   content is used as alert text.
 arguments:
+  alert-type:
+    release: v1.0.0
   class:
-    type: string
-    optional: true
-    comment: Class attribute of the alert element.
   color:
-    type: select
-    optional: true
     default: danger
-    comment: Theme color of the alert.
-    options:
-      values:
-        - primary
-        - secondary
-        - success
-        - danger
-        - warning
-        - info
-        - light
-        - dark
-        - white
-        - black
   dismissible:
-    type: bool
-    optional: true
-    default: false
-    comment: Flag to indicate the alert is dismissible.
   icon:
-    type: string
+  # deprecated arguments
-    optional: true
-    comment: Font Awesome icon to include.
   type:
     type: select
     optional: true
@@ -40,6 +18,8 @@ arguments:
       values:
         - danger
         - info
+    deprecated: v1.0.0
+    alternative: alert-type
 body:
   optional: false
   comment: Alert text.

data/structures/args.yml

@@ -2,6 +2,9 @@ comment: >-
   Generates a markdown table of structured arguments. The argument definitions are
   expected to be defined in a data file identified by a provided structure name.
 arguments:
+  page:
+    optional: false
+    group: partial
   structure:
     type: string
     position: 0
@@ -9,7 +12,8 @@ arguments:
     comment: >-
       Name of the data file that contains argument definitions. Supported data
       formats include JSON, TOML, YAML, and XML. You can omit the file
-      extension. The file should reside in the `data/structures` folder.
+      extension. The file should reside in the `data/structures` folder. For
+      bookshop components, add the `bookshop-` prefix to the structure name.
   group:
     type: string
     position: 1
@@ -25,3 +29,28 @@ arguments:
     comment: >-
       Flag to filter only arguments that have a parent attribute (either
       `cascade` or `merge`).
+  render-type:
+    type: select
+    position: 3
+    default: both
+    optional: true
+    comment: >-
+      Option whether to render arguments, user-defined types, or both. Please
+      note that the arguments will render a link to a user-defined type in any
+      case.
+    options:
+      values:
+        - arguments
+        - types
+        - both
+    release: v1.0.0
+  header-level:
+    type: int
+    default: 3
+    optional: true
+    options:
+      min: 1
+      max: 6
+    comment: >-
+      The header level to use for the user-defined type headers.
+    release: v1.0.0

data/structures/background.yml

@@ -0,0 +1,5 @@
+comment: >-
+  Applies styling to the background of a element.
+arguments:
+  background:
+  class:

data/structures/badge.yml

@@ -1,27 +1,6 @@
 comment: Use the badge shortcode to enrich headings.
 arguments:
   title:
-    type: string
-    optional: false
-    comment: Title of the badge.
   class:
-    type: string
-    optional: true
-    comment: Class attribute of the badge element.
   color:
-    type: select
-    optional: true
     default: secondary
-    comment: Theme color of the element.
-    options:
-      values:
-        - primary
-        - secondary
-        - success
-        - danger
-        - warning
-        - info
-        - light
-        - dark
-        - white
-        - black

data/structures/breadcrumb.yml

@@ -1,16 +1,4 @@
 comment: Displays a breadcrumb for a specific page.
 arguments:
   page:
-    type:
-      - '*hugolib.pageState'
-      - '*hugolib.pageForShortcode'
-    optional: false
-    comment: Page to display the breadcrumb for.
-    group: partial
   path:
-    type: string
-    optional: true
-    comment: Path of the page to display the breadcrumb for.
-    group: shortcode
-
-

data/structures/button-group.yml

@@ -2,13 +2,7 @@ comment: >-
   Displays a group of buttons. Add inner <button> elements for each button.
 arguments:
   label:
-    type: string
-    optional: true
-    comment: Assistive label for the button group.
   aria-label:
-    type: string
-    optional: true
-    comment: Alias for label.
 body:
   type: string
   optional: false

data/structures/button.yml

@@ -2,50 +2,51 @@ comment: >-
   Display a button with a hyperlink.
 arguments:
   title:
-    type:
-      - string
-      - template.HTML
-    optional: true
-    comment: Title of the button, required unless icon is set.
   class:
-    type: string
-    optional: true
-    comment: Class attribute of the button element, e.g. `p-5`.
   color:
-    type: select
-    optional: true
     default: primary
-    comment: Theme color of the element.
-    options:
-      values:
-        - primary
-        - secondary
-        - success
-        - danger
-        - warning
-        - info
-        - light
-        - dark
-        - white
-        - black
   href:
-    type:
-      - string
-      - template.URL
-    optional: true
-    comment: >-
-      Address for the button or hyperlink. Automatically assigned when using
-      collapse.
   relref:
-    type: string
-    optional: true
-    comment: >-
-      Name of the page to link to. Replaces `href` with a relative link if set.
     group: shortcode
   id:
-    type: string
+  button-state:
+    release: v1.0.0
+  button-size:
+    release: v1.0.0
+  outline:
+  badge:
+  label:
+  aria-label:
+    group: shortcode
+  tooltip:
+  collapse-id:
+  link-type:
+    release: v1.0.0
+  placement:
+  icon:
+  order:
+  justify:
+  toast-id:
+    release: v1.0.0
+  clipboard:
+  cue:
+  tab:
+  attributes:
+  spacing:
+  wrapper:
+    group: shortcode
+  # deprecated arguments  
+  type:
+    type: select
     optional: true
-    comment: Identifier of the button, to be used in the DOM.
+    default: button
+    comment: Type of the element.
+    options:
+      values:
+        - link
+        - button
+    deprecated: v1.0.0
+    alternative: link-type
   state:
     type: select
     optional: true
@@ -57,6 +58,8 @@ arguments:
         - disabled
         - active
         - inactive
+    deprecated: v1.0.0
+    alternative: button-state
   size:
     type: select
     optional: true
@@ -67,124 +70,19 @@ arguments:
         - sm
         - md
         - lg
-  outline:
+    deprecated: v1.0.0
-    type: bool
+    alternative: button-size
-    optional: true
-    default: false
-    comment: Flag indicating the button should be outlined.
-  badge:
-    type: string
-    optional: true
-    comment: Positioned badge to display on top of the button.
-  label:
-    type: string
-    optional: true
-    comment: >-         
-      Assistive label for the button or badge. The label is applied
-      to the badge instead of the button when a badge has been defined.
-      The default value of the button's assistive label is its title.
-  aria-label:
-    type: string
-    optional: true
-    comment: Alias for label.
-    group: shortcode
-  tooltip:
-    type: string
-    optional: true
-    comment: >-
-      Text to display in a tooltip. Cannot be used together with 
-      collapse. Ignored for active/inactive buttons.
-  collapse:
-    type: string
-    optional: true
-    comment: >-
-      Panel to collapse. Cannot be used together with tooltip. Ignored for
-      active/inactive buttons.
-  type:
-    type: select
-    optional: true
-    default: button
-    comment: Type of the element.
-    options:
-      values:
-        - link
-        - button
-  placement:
-    type: select
-    optional: true
-    default: top
-    comment: Position of the tooltip.
-    options:
-      values:
-        - top
-        - bottom
-        - left
-        - right
-  icon:
-    type: string
-    optional: true
-    comment: >-
-      Font Awesome icon class attribute, required unless title is set. An
-      example value is `fas sort`.
-  order:
-    type: select
-    optional: true
-    default: last
-    comment: Order of the icon
-    options:
-      values:
-        - first
-        - last
-  justify:
-    type: select
-    optional: true
-    default: center
-    comment: Justification of the button title and icon.
-    options:
-      values:
-        - start
-        - end
-        - center
-        - between
-        - around
-        - evenly
   toast:
     type: string
     optional: true
     comment: Identifier (ID) of the toast to display when the button is clicked.
-  clipboard:
+    deprecated: v1.0.0
-    type:
+    alternative: toast-id
-      - string
+  collapse:
-      - template.URL
-    optional: true
-    comment: Text to be copied to the clipboard when the button is clicked.
-  cue:
-    type: bool
-    optional: true
-    comment: >-
-      Flag to indicate if an external link should show a visual cue, defaults
-      to the setting `main.externalLinks.cue` in the site's parameters.
-  tab:
-    type: bool
-    optional: true
-    comment: >-
-      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:
-    type: map[string]interface {}
-    optional: true
-    comment: >-
-      Dictionary of key-value pairs added as custom attributes to the button
-      element ('<a>').
-    group: partial
-  spacing:
-    type: bool
-    optional: true
-    default: true
-    comment: >-
-      Flag to add spacing to the inline button.
-  wrapper:
     type: string
     optional: true
-    comment: Element class of the button wrapper.
+    comment: >-
-    group: shortcode
+      ID of the panel to collapse. Cannot be used together with tooltip. Ignored
+      for active/inactive buttons.
+    deprecated: v1.0.0
+    alternative: collapse-id

data/structures/card-group.yml

@@ -6,161 +6,185 @@ comment: >-
   behavior). Be aware a page can only contain one paginator at a time.
 arguments:
   page:
-    type:
-      - '*hugolib.pageState'
-      - '*hugolib.pageForShortcode'
     optional: true
-    comment: Context of the current page.
-    group: partial
   title:
-    type: string
     optional: true
-    comment: Title of the card group.
+  class:
+  color:
+  padding:
+    default: 3
   gutter:
-    type: int
-    optional: true
-    default: 4
-    comment: Gutter between columns in a group.
-    options:
-      min: 0
-      max: 5
     release: v0.19.0
+  header-style:
+    release: 1.0.0
+  body-style:
+    release: 1.0.0
+  footer-style:
+    release: 1.0.0
   list:
-    type:
-      - 'page.Pages'
-      - 'resource.Resources'
-      - '[]map[string]interface {}'
-    optional: true
-    comment: Array of pages or structured content to be rendered as cards.
-    group: partial
   cards:
-    type: string
+  limit:
-    optional: true
+    release: v1.0.0
-    comment: String of rendered cards.
-    group: partial
-  max:
-    type: int
-    optional: true
-    comment: Maximum number of cards to display.
-    group: partial
-    options:
-      min: 1
   cols:
-    type: select
-    optional: true
-    default: "3"
-    comment: Number of grid columns.
-    options:
-      values:
-        - "1"
-        - "2"
-        - "3"
-        - "4"
-        - "5"
-        - "auto"
     release: v0.19.0
   paginate:
-    type: bool
-    optional: true
-    comment: >-
-      Flag indicating if pagination should be added to the card group, if the
-      list exceeds the maximum number of cards to display. 
-    group: partial
   pagination:
-    type: int
-    optional: true
-    comment: >-
-      Number of elements per page in pagination, overrides site settings.
-    group: partial
-    options:
-      min: 1
     release: v0.23.12
   href:
+    group: partial
+  href-title:
+    release: v1.0.0
+  href-force:
+    release: v1.0.0
+    group: partial
+  separator:
+  loading:
+  ratio:
+  portrait:
+  icon-rounded:
+    release: v1.0.0
+  align:
+    default: start
+  wrapper:
+    default: p-0
+  responsive:
+  link-type:
+    release: v1.0.0
+  scroll:
+  icon-style:
+    release: v1.0.0
+  orientation:
+  subtle:
+  button:
+  spacer:
+    release: v0.24.16
+  hook:
+    default: assets/card.html
+    group: partial
+  bento:
+    release: v0.27.0
+  valign:
+    release: v0.27.0
+  styles:
+    release: v0.27.0
+  button-label:
+    release: v1.0.0
+  more-link-type:
+    type: select
+    optional: true
+    default: button
+    comment: Style of the more button or link.
+    options:
+      values:
+        - button
+        - link
+    release: v1.16.0
+  more-link-icon:
     type: string
     optional: true
     comment: >-
-      Address for the button or hyperlink. If set, a button is added if the
+      Icon to include. You can use shorthand notation such as `fas sort` to
-      list exceeds the maximum number of cards to display.
+      include a Font Awesome icon. The argument also supports files with an
-    group: partial
+      `.svg` or `.json` extension.
+    release: v1.16.0
+
+  # deprecated arguments
+  header:
+    type: select
+    optional: true
+    default: full
+    parent: cascade
+    comment: >-
+      Header components of the card, displayed in small caps. 
+    options:
+      values:
+        - full
+        - publication
+        - tags
+        - none
+    deprecated: v1.0.0
+    alternative: header-style
+  body:
+    type: select
+    optional: true
+    default: full
+    parent: cascade
+    release: v0.24.16
+    comment: >-
+      Body components of the element. 
+    options:
+      values:
+        - full
+        - title
+        - none
+    deprecated: v1.0.0
+    alternative: body-style
+  footer:
+    type: select
+    optional: true
+    default: none
+    parent: cascade
+    comment: >-
+      Footer components of the element, displayed in small caps.
+    options:
+      values:
+        - full
+        - publication
+        - tags
+        - none
+    deprecated: v1.0.0
+    alternative: footer-style
+  iconRounded:
+    type: bool
+    parent: cascade
+    optional: true
+    release: v0.24.8
+    deprecated: v1.0.0
+    alternative: icon-rounded
+    comment: Stack the icon in a round container.
+  buttonType:
+    type: select
+    parent: cascade
+    optional: true
+    default: button
+    comment: Type of the button element.
+    release: v0.23.18
+    deprecated: v1.0.0
+    alternative: link-type
+    options:
+      values:
+        - link
+        - button
+  style:
+    type: string
+    parent: cascade
+    optional: true
+    release: v0.23.0
+    comment: Icon style.
+    deprecated: v1.0.0
+    alternative: icon-style
+  buttonLabel:
+    type: string
+    optional: true
+    release: v0.23.2
+    comment: >-
+      Label of the link button, defaults to the card title.
+    deprecated: v1.0.0
+    alternative: button-label
   hrefTitle:
     type: string
     optional: true
     comment: >-
       Title of the button or hyperlink as companion to href.
     group: partial
-  separator:
+    deprecated: v1.0.0
-    type: bool
+    alternative: href-title
+  max:
+    type: int
     optional: true
-    comment: >-
+    comment: Maximum number of elements to display.
-      Flag to indicate a horizontal line should be added between items on small
-      screens.
-  wrapper:
-    type: string
-    default: p-0
-    optional: true
-    comment: >-
-      Class attributes of the wrapper element, e.g. `p-4 px-xxl-0`.
-  responsive:
-    type: bool
-    optional: true
-    default: true
-    comment: >-
-      Flag indicating if the number of columns should be responsive, defaults to
-      `true`.
-  buttonType:
-    type: select
-    optional: true
-    default: button
-    release: v0.23.18
-    comment: Type of the button elements.
-    options:
-      values:
-        - link
-        - button
-  scroll:
-    type: bool
-    optional: true
-    comment: >-
-      Enables horizontal scrolling of the cards. By default, the card group
-      wraps any cards beyond the amount of defined columns to a new line. When
-      `scroll` is set to true, a horizontal scroll bar is added instead.
-  spacer:
-    type: bool
-    optional: true
-    comment: >-
-      Inserts a spacer before the card.
-    release: v0.24.16
     group: partial
-  hook:
-    type: string
-    optional: true
-    default: assets/card.html
-    comment: Render hook for the card partial.
-    group: partial
-  bento:
-    type: bool
-    optional: true
-    default: false
-    comment: >-
-      Trigger to use a bento-style layout instead of default grid layout.
-    release: v0.27.0
-  valign:
-    type: select
-    optional: true
-    comment: >-
-      Defines the vertical card alignment, only applicable in bento layout.
-    release: v0.27.0
     options:
-      values:
+      min: 1
-        - start
+    deprecated: v1.0.0
-        - center
+    alternative: limit
-        - end
-  styles:
-    type:
-      - '[]map[string]interface {}'
-    optional: true
-    comment: >-
-      Styles to apply to the individual cards. Supported elements are `ratio`,
-      `orientation`, `portrait`, and `width`. The styles are rotated when the
-      amount of cards exceeds the available amount of styles.
-    release: v0.27.0

data/structures/card.yml

@@ -4,79 +4,78 @@ comment: >-
   arguments override any page attributes.
 arguments:
   title:
-    type: string
     optional: true
-    comment: >-
-      Title of the card, replaces the title of the referenced page (if any).
   path:
-    type: path
-    optional: true
-    comment: >-
-      Path of the page that the card reference to. If omitted, specify the
-      title, icon, thumbnail, and description (inner content) as needed.
   href:
-    type: url
-    optional: true
-    comment: >-
-      Address for the button or hyperlink.
     group: partial
   class:
-    type: string
-    optional: true
     parent: merge
-    comment: >-
-      Class attribute of the card element, e.g. “w-50”.
   color:
-    type: select
     optional: true
     parent: cascade
-    comment: >-
-      Theme color of the card. By default, no color is specified.
-    options:
-      values:
-        - primary
-        - secondary
-        - success
-        - danger
-        - warning
-        - info
-        - light
-        - dark
-        - white
-        - black
-        - body
-        - body-tertiary
   padding:
-    type: select
-    optional: true
-    default: auto
     parent: cascade
-    comment: >-
+    default: 3
-      Padding of the content.
-    options:
-      values:
-        - "0"
-        - "1"
-        - "2"
-        - "3"
-        - "4"
-        - "5"
-        - "auto"
   gutter:
-    type: select
+    default: 0
-    optional: true
-    default: "0"
     parent: cascade
-    comment: >-
+  header-style:
-      Gutter between columns in a group.
+    parent: cascade
-    options:
+    release: 1.0.0
-      values:
+  body-style:
-        - "0"
+    parent: cascade
-        - "1"
+    release: 1.0.0
-        - "2"
+  footer-style:
-        - "3"
+    parent: cascade
-        - "4"
+    release: 1.0.0
-        - "5"
+  description:
+    group: partial
+  loading:
+    parent: cascade
+    group: partial
+  thumbnail:
+  ratio:
+    parent: cascade
+    group: partial
+  portrait:
+    parent: cascade
+    release: v0.24.16
+  alt:
+    release: v0.19.0
+  icon:
+  icon-rounded:
+    release: v1.0.0
+  align:
+    default: start
+    parent: cascade
+    release: v0.23.0
+  scroll:
+    parent: cascade
+    group: partial
+  wrapper:
+  icon-style:
+    release: v1.0.0
+  orientation:
+    parent: cascade
+  subtle:
+    parent: cascade
+    release: v0.23.0
+  button:
+    parent: cascade
+    release: v0.23.0
+  button-label:
+    release: v1.0.0
+  link-type:
+  hook:
+    default: assets/image.html
+    group: partial
+  sizes:
+    group: partial
+  anchor:
+    release: v0.24.23
+  links:
+    release: v1.14.0
+  # deprecated arguments
   header:
     type: select
     optional: true
@@ -90,6 +89,8 @@ arguments:
         - publication
         - tags
         - none
+    deprecated: 1.0.0
+    alternative: header-style
   body:
     type: select
     optional: true
@@ -97,158 +98,37 @@ arguments:
     parent: cascade
     release: v0.24.16
     comment: >-
-      Body of the card. 
+      Body components of the element. 
     options:
       values:
         - full
         - title
         - none
+    deprecated: 1.0.0
+    alternative: body-style
   footer:
     type: select
     optional: true
     default: none
     parent: cascade
     comment: >-
-      Footer components of the card, displayed in small caps.
+      Footer components of the element, displayed in small caps.
     options:
       values:
         - full
         - publication
         - tags
         - none
-  description:
+    deprecated: v1.0.0
-    type:
+    alternative: footer-style
-      - string
-      - template.HTML
-    optional: true
-    comment: >-
-      Description of the card.
-    group: partial
-  loading:
-    type: select
-    optional: true
-    parent: cascade
-    default: eager
-    comment: >-
-      Loading behavior of the image. The loading of lazily loaded images is
-      deferred until the image is within scrolling range of the viewport. This
-      should reduce the initial loading time of the website. It is recommended
-      to lazily load only those images that are below the page fold.
-    options:
-      values:
-        - lazy
-        - eager
-    group: partial
-  thumbnail:
-    type: path
-    optional: true
-    comment: >-
-      Thumbnail image url, displayed on top or the left of the card.
-  ratio:
-    type: select
-    optional: true
-    parent: cascade
-    comment: >-
-      Ratio of the thumbnail image, defaults to `16x9` (stacked orientation)
-      or `1x1` (horizontal orientation).
-    options:
-      values:
-        - 1x1
-        - 3x2
-        - 4x3
-        - 16x9
-        - 21x9
-    group: partial
-  portrait:
-    type: bool
-    parent: cascade
-    optional: true
-    default: false
-    release: v0.24.16
-    comment: >-
-      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.
-  alt:
-    type: string
-    optional: true
-    release: v0.19.0
-    comment: >-
-      Alternate text for the thumbnail, uses `title` by default.
-  icon:
-    type: string
-    optional: true
-    comment: >-
-      Font Awesome icon, displayed on top or the left of the card.
   iconRounded:
     type: bool
     parent: cascade
     optional: true
     release: v0.24.8
+    deprecated: v1.0.0
+    alternative: icon-rounded
     comment: Stack the icon in a round container.
-  align:
-    type: select
-    parent: cascade
-    optional: true
-    default: start
-    release: v0.23.0
-    comment: Icon alignment.
-    options:
-      values:
-        - start
-        - end
-        - center
-  scroll:
-    type: bool
-    parent: cascade
-    optional: true
-    group: partial
-    comment: >-
-      Enables horizontal scrolling of the cards. By default, the card group
-      wraps any cards beyond the amount of defined columns to a new line. When
-      `scroll` is set to true, a horizontal scroll bar is added instead.
-  wrapper:
-    type: string
-    optional: true
-    comment: Element class of the card wrapper.
-  style:
-    type: string
-    parent: cascade
-    optional: true
-    release: v0.23.0
-    comment: Icon style.
-  orientation:
-    type: select
-    optional: true
-    default: stacked
-    parent: cascade
-    comment: Placement of the thumbnail or icon.
-    options:
-      values:
-        - stacked
-        - horizontal
-        - horizontal-sm
-        - overlay
-        - none
-  subtle:
-    type: bool
-    parent: cascade
-    optional: true
-    release: v0.23.0
-    comment: Apply subtle background colors.
-  button:
-    type: bool
-    parent: cascade
-    optional: true
-    release: v0.23.0
-    comment: >-
-      Flag indicating the cards should include a button that links to the provided address.
-  buttonLabel:
-    type: string
-    optional: true
-    release: v0.23.2
-    comment: >-
-      Label of the link button, defaults to the card title.
   buttonType:
     type: select
     parent: cascade
@@ -256,42 +136,28 @@ arguments:
     default: button
     comment: Type of the button element.
     release: v0.23.18
+    deprecated: v1.0.0
+    alternative: link-type
     options:
       values:
         - link
         - button
-  hook:
+  style:
+    type: string
+    parent: cascade
+    optional: true
+    release: v0.23.0
+    comment: Icon style.
+    deprecated: v1.0.0
+    alternative: icon-style
+  buttonLabel:
     type: string
     optional: true
-    comment: Render hook for the image partial.
+    release: v0.23.2
-    group: partial
-  sizes:
-    type: string
-    default: 100vw
-    optional: true
     comment: >-
-      One or more strings separated by commas, indicating the source sizes of an
+      Label of the link button, defaults to the card title.
-      image set.
+    deprecated: v1.0.0
-    group: partial
+    alternative: button-label
-  anchor:
-    type: select
-    optional: true
-    comment: 
-      Anchor of the thumbnail's crop box, defaults to anchor value set in
-      `imaging` section of the site configuration (usually `Smart`).
-    options:
-      values:
-        - TopLeft
-        - Top
-        - TopRight
-        - Left
-        - Center
-        - Right
-        - BottomLeft
-        - Bottom
-        - BottomRight
-        - Smart
-    release: v0.24.23
 body:
   optional: true
   comment: >-

data/structures/carousel-item.yml

@@ -1,59 +1,11 @@
 comment: Renders a carousel item with a responsive image.
 arguments:
   page:
-    type:
-      - '*hugolib.pageState'
-      - '*hugolib.pageForShortcode'
-    optional: false
-    comment: Context of the current page.
-    group: partial
   src:
-    type: string
-    optional: false
-    comment: Path or url of the image, e.g. `img/example.jpg`.
   ratio:
-    type: string
-    optional: true
-    comment: >-
-      Ratio of the image. If set, the image is resized and cropped to match the
-      ratio. Else the original aspect ratio of the image is kept.
-    options:
-      values:
-        - 1x1
-        - 3x2
-        - 4x3
-        - 16x9
-        - 21x9
     group: partial
   portrait:
-    type: bool
-    optional: true
-    default: false
-    comment: >-
-      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.
     group: partial
   loading:
-    type: select
-    default: eager
-    optional: true
-    comment: >-
-      Loading behavior of the image. The loading of lazily loaded images is
-      deferred until the image is within scrolling range of the viewport. This
-      should reduce the initial loading time of the website. It is recommended
-      to lazily load only those images that are below the pagefold.
-    options:
-      values:
-        - eager
-        - lazy
   caption:
-    type: string
-    optional: true
-    comment: Carousel slide caption.
   active:
-    type: bool
-    optional: true
-    comment: >-
-      Sets the current carousel item as active (only one item at a time). By
-      default, the first slide is made active.