Showing preview only (946K chars total). Download the full file or copy to clipboard to get everything.
Repository: gethinode/hinode
Branch: main
Commit: 01357a2c7eea
Files: 453
Total size: 842.2 KB
Directory structure:
gitextract_pae652cm/
├── .eslintrc.yml
├── .github/
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ ├── codeql/
│ │ └── codeql-config.yml
│ ├── dependabot.yml
│ ├── release.yml
│ └── workflows/
│ ├── auto-merge.yml
│ ├── codeql.yml
│ ├── lint-build.yml
│ ├── mod-update.yml
│ └── release.yml
├── .gitignore
├── .gitmodules
├── .husky/
│ ├── commit-msg
│ ├── install.mjs
│ └── pre-commit
├── .markdownlint-cli2.jsonc
├── .stylelintignore
├── .stylelintrc.json
├── CLAUDE.md
├── LICENSE
├── README.md
├── archetypes/
│ └── default.md
├── assets/
│ ├── js/
│ │ ├── alert.js
│ │ ├── animation.js
│ │ ├── clipboard.js
│ │ ├── critical/
│ │ │ ├── _cookie.js
│ │ │ ├── color.js
│ │ │ ├── languageSelector.js
│ │ │ └── sidebar-pre-init.js
│ │ ├── menu.js
│ │ ├── modal.js
│ │ ├── nav.js
│ │ ├── navbar.js
│ │ ├── optional/
│ │ │ └── .gitkeep
│ │ ├── popover.js
│ │ ├── sharing.js
│ │ ├── sidebar-group.js
│ │ ├── sidebar-toggle.js
│ │ ├── testimonial.js
│ │ ├── toast.js
│ │ ├── toc.js
│ │ ├── tooltip.js
│ │ ├── vendor/
│ │ │ └── .gitkeep
│ │ └── video.js
│ └── scss/
│ ├── app-dart.scss
│ ├── app.scss
│ ├── common/
│ │ ├── _animation.scss
│ │ ├── _export.scss
│ │ ├── _icons.scss
│ │ ├── _masonry.scss
│ │ ├── _scrollbar.scss
│ │ ├── _styles.scss
│ │ ├── _utilities-custom.scss
│ │ ├── _utilities-responsive.scss
│ │ ├── _variables-dark.scss
│ │ ├── _variables-dart.scss
│ │ └── _variables.scss
│ ├── components/
│ │ ├── _abbr.scss
│ │ ├── _alert.scss
│ │ ├── _blockquote.scss
│ │ ├── _button.scss
│ │ ├── _card.scss
│ │ ├── _carousel.scss
│ │ ├── _clipboard.scss
│ │ ├── _command.scss
│ │ ├── _docs.scss
│ │ ├── _feature.scss
│ │ ├── _footer.scss
│ │ ├── _img.scss
│ │ ├── _kbd.scss
│ │ ├── _nav.scss
│ │ ├── _navbar.scss
│ │ ├── _pagination.scss
│ │ ├── _persona.scss
│ │ ├── _popover.scss
│ │ ├── _sidebar.scss
│ │ ├── _syntax-dark.scss
│ │ ├── _syntax-dart.scss
│ │ ├── _syntax-light.scss
│ │ ├── _syntax.scss
│ │ ├── _table.scss
│ │ ├── _testimonial.scss
│ │ ├── _timeline.scss
│ │ ├── _toast.scss
│ │ ├── _toc.scss
│ │ ├── _tooltip.scss
│ │ └── _video.scss
│ ├── helpers/
│ │ ├── _colored-links.scss
│ │ └── _display.scss
│ ├── layouts/
│ │ ├── _reboot.scss
│ │ └── _type.scss
│ ├── theme/
│ │ ├── _variables.scss
│ │ ├── base.scss
│ │ ├── fonts.scss
│ │ └── theme.scss
│ └── vendor/
│ └── .gitkeep
├── commitlint.config.js
├── config/
│ ├── _default/
│ │ ├── hugo.toml
│ │ ├── languages.toml
│ │ ├── markup.toml
│ │ ├── menus/
│ │ │ └── menus.en.toml
│ │ ├── params.toml
│ │ └── server.toml
│ ├── ci/
│ │ └── hugo.toml
│ ├── development/
│ │ └── params.toml
│ ├── postcss.config.js
│ └── production/
│ ├── deployment.toml
│ ├── hugo.toml
│ └── params.toml
├── content/
│ ├── _index.md
│ └── _modals/
│ └── _index.md
├── data/
│ ├── .gitkeep
│ ├── dimensions.yml
│ ├── netlify.toml
│ ├── server.toml
│ └── structures/
│ ├── abbr.yml
│ ├── accordion-item.yml
│ ├── accordion.yml
│ ├── alert.yml
│ ├── args.yml
│ ├── background.yml
│ ├── badge.yml
│ ├── breadcrumb.yml
│ ├── button-group.yml
│ ├── button.yml
│ ├── card-group.yml
│ ├── card-icon.yml
│ ├── card.yml
│ ├── carousel-item.yml
│ ├── carousel.yml
│ ├── collapse.yml
│ ├── command.yml
│ ├── docs.yml
│ ├── download.yml
│ ├── example.yml
│ ├── featured-illustration.yml
│ ├── file.yml
│ ├── form-hook.yml
│ ├── get-dimension.yml
│ ├── hero-image.yml
│ ├── image-adapter-rewrite.yml
│ ├── image-adapter.yml
│ ├── image-definition.yml
│ ├── image-dimension.yml
│ ├── image-rewrite.yml
│ ├── image-set.yml
│ ├── image.yml
│ ├── ins.yml
│ ├── kbd.yml
│ ├── link.yml
│ ├── links.yml
│ ├── list.yml
│ ├── live-pages.yml
│ ├── mark.yml
│ ├── menu-item.yml
│ ├── nav-item.yml
│ ├── nav.yml
│ ├── navbar-item.yml
│ ├── navbar.yml
│ ├── page-alert.yml
│ ├── pagination.yml
│ ├── persona.yml
│ ├── release.yml
│ ├── script.yml
│ ├── scripts.yml
│ ├── section-header.yml
│ ├── section-menu.yml
│ ├── section-title.yml
│ ├── sidebar.yml
│ ├── spinner.yml
│ ├── stack.yml
│ ├── sub.yml
│ ├── sup.yml
│ ├── table.yml
│ ├── testimonial.yml
│ ├── timeline.yml
│ ├── toast.yml
│ ├── toc.yml
│ ├── tooltip.yml
│ ├── version.yml
│ └── video.yml
├── eslint.config.mjs
├── exampleSite/
│ ├── .gitignore
│ ├── config/
│ │ ├── _default/
│ │ │ ├── hugo.toml
│ │ │ ├── languages.toml
│ │ │ ├── markup.toml
│ │ │ ├── menus/
│ │ │ │ ├── menus.en.toml
│ │ │ │ ├── menus.fr.toml
│ │ │ │ └── menus.nl.toml
│ │ │ ├── netlify.toml
│ │ │ ├── params.fr.toml
│ │ │ ├── params.nl.toml
│ │ │ ├── params.toml
│ │ │ └── server.toml
│ │ ├── ci/
│ │ │ └── hugo.toml
│ │ ├── development/
│ │ │ └── params.toml
│ │ └── postcss.config.js
│ ├── content/
│ │ ├── en/
│ │ │ ├── _index.md
│ │ │ ├── about.md
│ │ │ ├── blog/
│ │ │ │ ├── _index.md
│ │ │ │ ├── first-post.md
│ │ │ │ ├── fourth-post.md
│ │ │ │ ├── second-post.md
│ │ │ │ └── third-post.md
│ │ │ ├── browserconfig.md
│ │ │ ├── cookies.md
│ │ │ ├── privacy.md
│ │ │ └── team/
│ │ │ ├── _content.gotmpl
│ │ │ └── _index.en.md
│ │ ├── fr/
│ │ │ ├── _index.md
│ │ │ ├── about.md
│ │ │ ├── blog/
│ │ │ │ ├── _index.md
│ │ │ │ ├── first-post.md
│ │ │ │ ├── fourth-post.md
│ │ │ │ ├── second-post.md
│ │ │ │ └── third-post.md
│ │ │ ├── browserconfig.md
│ │ │ ├── cookies.md
│ │ │ └── privacy.md
│ │ └── nl/
│ │ ├── _index.md
│ │ ├── about.md
│ │ ├── blog/
│ │ │ ├── _index.md
│ │ │ ├── first-post.md
│ │ │ ├── fourth-post.md
│ │ │ ├── second-post.md
│ │ │ └── third-post.md
│ │ ├── browserconfig.md
│ │ ├── cookies.md
│ │ └── privacy.md
│ ├── data/
│ │ └── server.toml
│ ├── go.mod
│ ├── go.sum
│ ├── hinode.work
│ ├── hinode.work.sum
│ ├── hugo_stats.json
│ └── layouts/
│ └── _partials/
│ ├── footer/
│ │ └── footer.html
│ └── templates/
│ └── script.html
├── go.mod
├── go.sum
├── hugo_stats.json
├── i18n/
│ ├── de.yaml
│ ├── en.yaml
│ ├── fr.yaml
│ ├── nl.yaml
│ ├── pl.yaml
│ ├── pt-br.yaml
│ ├── zh-hans.yaml
│ └── zh-hant.yaml
├── layouts/
│ ├── 404.html
│ ├── _markup/
│ │ ├── render-blockquote.html
│ │ ├── render-codeblock-math.html
│ │ ├── render-codeblock.html
│ │ ├── render-heading.html
│ │ ├── render-image.html
│ │ ├── render-link.html
│ │ ├── render-passthrough.html
│ │ └── render-table.html
│ ├── _partials/
│ │ ├── assets/
│ │ │ ├── adapters/
│ │ │ │ ├── cloudinary.html
│ │ │ │ ├── hugo.html
│ │ │ │ ├── imagekit-rewrite.html
│ │ │ │ ├── imagekit.html
│ │ │ │ └── imgix.html
│ │ │ ├── args.html
│ │ │ ├── breadcrumb.html
│ │ │ ├── button.html
│ │ │ ├── card-group.html
│ │ │ ├── card-icon.html
│ │ │ ├── card.html
│ │ │ ├── carousel-item.html
│ │ │ ├── download.html
│ │ │ ├── featured-illustration.html
│ │ │ ├── helpers/
│ │ │ │ ├── GetDimension.html
│ │ │ │ ├── image-definition.html
│ │ │ │ ├── image-dimension.html
│ │ │ │ ├── image-rewrite.html
│ │ │ │ ├── image-set.html
│ │ │ │ ├── navbar-item.html
│ │ │ │ ├── navbar-languages.html
│ │ │ │ ├── navbar-mode.html
│ │ │ │ ├── navbar-render-menu.html
│ │ │ │ ├── navbar-versions.html
│ │ │ │ └── sidebar-menu-entry.html
│ │ │ ├── hero-image.html
│ │ │ ├── image.html
│ │ │ ├── link.html
│ │ │ ├── links.html
│ │ │ ├── live-card.html
│ │ │ ├── live-image.html
│ │ │ ├── live-pages.html
│ │ │ ├── menu-item.html
│ │ │ ├── modals.html
│ │ │ ├── nav-item.html
│ │ │ ├── nav.html
│ │ │ ├── navbar.html
│ │ │ ├── page-alert.html
│ │ │ ├── pagination.html
│ │ │ ├── persona.html
│ │ │ ├── section-title.html
│ │ │ ├── sidebar.html
│ │ │ ├── spinner.html
│ │ │ ├── stack.html
│ │ │ ├── table.html
│ │ │ ├── testimonial.html
│ │ │ ├── timeline.html
│ │ │ ├── toast.html
│ │ │ ├── toc-dropdown.html
│ │ │ ├── toc-headings.html
│ │ │ ├── toc-main.html
│ │ │ ├── toc-parse-content.html
│ │ │ ├── toc.html
│ │ │ ├── version.html
│ │ │ └── video.html
│ │ ├── footer/
│ │ │ ├── footer.html
│ │ │ ├── scripts.html
│ │ │ ├── social.html
│ │ │ └── toast-container.html
│ │ ├── head/
│ │ │ ├── favicon.html
│ │ │ ├── head.html
│ │ │ ├── icons.html
│ │ │ ├── opengraph.html
│ │ │ ├── seo.html
│ │ │ ├── structured-data.html
│ │ │ ├── stylesheet-core.html
│ │ │ ├── stylesheet.html
│ │ │ └── twitter_cards.html
│ │ ├── page/
│ │ │ ├── articles.html
│ │ │ ├── blocks.html
│ │ │ ├── metadata.html
│ │ │ ├── navbar-extra.html
│ │ │ ├── navigation.html
│ │ │ ├── sharing.html
│ │ │ ├── sidebar-offcanvas.html
│ │ │ ├── sidebar.html
│ │ │ ├── tags.html
│ │ │ ├── taxonomy-list.html
│ │ │ ├── taxonomy-tag.html
│ │ │ └── thumbnail.html
│ │ ├── templates/
│ │ │ └── script.html
│ │ └── utilities/
│ │ ├── AddModule.html
│ │ ├── GetBackgroundStyle.html
│ │ ├── GetIllustration.html
│ │ ├── GetIncludeTOC.html
│ │ ├── GetLink.html
│ │ ├── GetMetadata.html
│ │ ├── GetSharing.html
│ │ ├── InitModules.html
│ │ └── git.html
│ ├── _shortcodes/
│ │ ├── abbr.html
│ │ ├── abbr.md
│ │ ├── accordion-item.html
│ │ ├── accordion-item.md
│ │ ├── accordion.html
│ │ ├── accordion.md
│ │ ├── alert.html
│ │ ├── alert.md
│ │ ├── args.html
│ │ ├── args.md
│ │ ├── badge.html
│ │ ├── badge.md
│ │ ├── breadcrumb.html
│ │ ├── breadcrumb.md
│ │ ├── button-group.html
│ │ ├── button-group.md
│ │ ├── button.html
│ │ ├── button.md
│ │ ├── card-group.html
│ │ ├── card-group.md
│ │ ├── card.html
│ │ ├── card.md
│ │ ├── carousel.html
│ │ ├── carousel.md
│ │ ├── collapse.html
│ │ ├── collapse.md
│ │ ├── command.html
│ │ ├── command.md
│ │ ├── docs.html
│ │ ├── docs.md
│ │ ├── example-bookshop.html
│ │ ├── example-bookshop.md
│ │ ├── example.html
│ │ ├── example.md
│ │ ├── file.html
│ │ ├── file.md
│ │ ├── image.html
│ │ ├── image.md
│ │ ├── img.html
│ │ ├── img.md
│ │ ├── ins.html
│ │ ├── ins.md
│ │ ├── kbd.html
│ │ ├── kbd.md
│ │ ├── link.html
│ │ ├── link.md
│ │ ├── mark.html
│ │ ├── mark.md
│ │ ├── nav-item.html
│ │ ├── nav-item.md
│ │ ├── nav.html
│ │ ├── nav.md
│ │ ├── navbar.html
│ │ ├── navbar.md
│ │ ├── persona.html
│ │ ├── persona.md
│ │ ├── release.html
│ │ ├── release.md
│ │ ├── spinner.html
│ │ ├── spinner.md
│ │ ├── sub.html
│ │ ├── sub.md
│ │ ├── sup.html
│ │ ├── sup.md
│ │ ├── table.html
│ │ ├── table.md
│ │ ├── testimonial.html
│ │ ├── testimonial.md
│ │ ├── timeline.html
│ │ ├── timeline.md
│ │ ├── toast.html
│ │ ├── toast.md
│ │ ├── tooltip.html
│ │ ├── tooltip.md
│ │ ├── video.html
│ │ ├── video.md
│ │ ├── vimeo.html
│ │ ├── vimeo.md
│ │ ├── youtube.html
│ │ └── youtube.md
│ ├── alias.html
│ ├── baseof.html
│ ├── baseof.xml
│ ├── body.html
│ ├── docs/
│ │ ├── all.html
│ │ ├── body.html
│ │ ├── footer.html
│ │ └── header.html
│ ├── footer.html
│ ├── form/
│ │ └── single.html
│ ├── header.html
│ ├── index.redir
│ ├── list.html
│ ├── minimal/
│ │ ├── body.html
│ │ ├── footer.html
│ │ └── header.html
│ ├── robots.txt
│ ├── single.html
│ ├── single.xml
│ ├── tags/
│ │ └── list.html
│ └── toc.html
├── netlify.toml
├── package.json
├── static/
│ └── js/
│ └── alias.js
└── theme.toml
================================================
FILE CONTENTS
================================================
================================================
FILE: .eslintrc.yml
================================================
env:
browser: true
es6: true
extends:
- standard
globals:
Atomics: readonly
SharedArrayBuffer: readonly
parserOptions:
ecmaVersion: 2018
sourceType: module
rules: {}
================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.md
================================================
---
name: Bug report
about: Create a report to help us improve
title: "[BUG]"
labels: bug
assignees: ''
---
<!---
Please use the discussion forum (https://github.com/gethinode/hinode/discussions) for questions and troubleshooting. We prefer to use GitHub issues for verified bugs and vetted enhancements.
When submitting a bug, please include the exact steps to reproduce the issue. Ideally, use a minimal repo created with the Hinode installation steps for either Hugo or npm (https://gethinode.com/docs/getting-started/introduction/#installation). Add any additional commands and configuration adjustments from there on.
-->
## Describe the bug
A clear and concise description of what the bug is.
## To reproduce
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
Alternatively, include the commands from your terminal as bash script.
## Expected behavior
If applicable, a clear and concise description of what you expected to happen.
## Log file
If applicable, add a copy of Hugo's log messages.
## Screenshots
If applicable, add screenshots to help explain your problem.
## Host environment
Please complete the following information where applicable.
- Hinode version: [e.g. v0.11.3]
- Host OS: [e.g. macOS Ventura 13.3]
- Node version: [e.g. node v18.15.0]
- Browser: [e.g. Google Chrome Version 108.0.5359.124 (Official Build) (arm64)]
## Hugo environment
Copy the output of `hugo env` or `npm run env` here.
```bash
[env output]
```
## Additional context
Add any other context about the problem here.
================================================
FILE: .github/ISSUE_TEMPLATE/feature_request.md
================================================
---
name: Feature request
about: Suggest an idea for this project
title: ''
labels: enhancement
assignees: ''
---
## Problem or enhancement idea
A clear and concise description of what the problem is. E.g. I'm always frustrated when ... Or else, the enhancement idea to further improve Hinode.
## Proposed solution
A clear and concise description of what you want to happen.
## Alternatives
A clear and concise description of any alternative solutions or features you've considered.
## Additional context
Add any other context or screenshots about the feature request here.
================================================
FILE: .github/codeql/codeql-config.yml
================================================
paths:
- 'assets/js'
paths-ignore:
- '**/vendor'
- '**/critical/languageSelector.js'
- '**/critical/color.js'
- '**/clipboard.js'
- '**/navbar.js'
- '**/sharing.js'
================================================
FILE: .github/dependabot.yml
================================================
# Please see the documentation for all configuration options:
# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
version: 2
updates:
- package-ecosystem: "github-actions"
directory: "/"
schedule:
interval: "weekly"
open-pull-requests-limit: 10
- package-ecosystem: "npm"
directory: "/"
schedule:
interval: "daily"
versioning-strategy: increase
================================================
FILE: .github/release.yml
================================================
changelog:
exclude:
labels:
- skip-changelog
categories:
- title: ❗ Breaking Changes
labels:
- Semver-Major
- breaking-change
- title: 🚀 Highlights
labels:
- release-highlight
- title: 🎉 New Features
labels:
- Semver-Minor
- enhancement
- title: 🐛 Bug Fixes
labels:
- fix
- bugfix
- bug
- title: 📦 Dependencies
labels:
- dependencies
- title: 🧰 Other Changes
labels:
- "*"
================================================
FILE: .github/workflows/auto-merge.yml
================================================
# Source: https://nicolasiensen.github.io/2022-07-23-automating-dependency-updates-with-dependabot-github-auto-merge-and-github-actions/
name: Dependabot auto-merge
on: pull_request_target
permissions:
pull-requests: write
contents: write
jobs:
review-dependabot-pr:
runs-on: ubuntu-latest
if: ${{ github.event.pull_request.user.login == 'dependabot[bot]' }}
steps:
- name: Dependabot metadata
id: metadata
uses: dependabot/fetch-metadata@v3
with:
github-token: "${{ secrets.GITHUB_TOKEN }}"
- name: Enable auto-merge for Dependabot PRs
run: gh pr merge --auto --merge "$PR_URL"
env:
PR_URL: ${{github.event.pull_request.html_url}}
GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
- name: Approve patch and minor updates
if: ${{steps.dependabot-metadata.outputs.update-type == 'version-update:semver-patch' || steps.dependabot-metadata.outputs.update-type == 'version-update:semver-minor'}}
run: gh pr review $PR_URL --approve -b "I'm **approving** this pull request because **it includes a patch or minor update**"
env:
PR_URL: ${{github.event.pull_request.html_url}}
GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
- name: Comment on major updates of any dependencies
if: ${{steps.dependabot-metadata.outputs.update-type == 'version-update:semver-major'}}
run: |
gh pr comment $PR_URL --body "I'm **not approving** this PR because **it includes a major update of a dependency**"
gh pr edit $PR_URL --add-label "requires-manual-qa"
env:
PR_URL: ${{github.event.pull_request.html_url}}
GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
================================================
FILE: .github/workflows/codeql.yml
================================================
# 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@v6
# 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@v4
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@v4
with:
category: "/language:${{matrix.language}}"
================================================
FILE: .github/workflows/lint-build.yml
================================================
name: Lint & build
on:
workflow_dispatch:
push:
tags:
- v*
branches: [ main, beta ]
pull_request:
branches: [ main, beta ]
env:
CACHE_KEY: 'hugo-hinode'
permissions:
pull-requests: read
contents: read
jobs:
lint:
runs-on: ubuntu-latest
steps:
- name: Check out repository
uses: actions/checkout@v6
- name: Set up Node.js
uses: actions/setup-node@v6
with:
node-version: lts/*
cache: 'npm'
cache-dependency-path: '**/package-lock.json'
# [24/AUG/23] Adjusted from npm ci to prevent EBADPLATFORM error due to fsevents
- name: Install npm
run: npm i
- name: Lint the source files
run: npm run lint
build:
needs: lint
strategy:
matrix:
os: [macos-latest, windows-latest, ubuntu-latest]
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
node-version: [22.x, 24.x]
include:
- os: ubuntu-latest
hugo_cachedir: '/tmp/hugo_cache_runner'
- os: macos-latest
hugo_cachedir: '/Users/runner/Library/Caches/hugo_cache'
- os: windows-latest
hugo_cachedir: '~\AppData\Local\hugo_cache'
runs-on: ${{ matrix.os }}
env:
HUGO_CACHEDIR: ${{ matrix.hugo_cachedir }}
steps:
- name: Check out repository
uses: actions/checkout@v6
- name: Install Go
uses: actions/setup-go@v6
with:
go-version: "stable"
- name: Set up Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v6
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'
cache-dependency-path: '**/package-lock.json'
- name: Install Dart Sass
env:
DART_SASS_VERSION: "1.98.0"
run: |
if [ "$RUNNER_OS" == "Linux" ]; then
curl -fsSL "https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz" \
| tar -xz -C "$HOME"
echo "$HOME/dart-sass" >> $GITHUB_PATH
elif [ "$RUNNER_OS" == "macOS" ]; then
ARCH=$(uname -m)
if [ "$ARCH" == "arm64" ]; then
SASS_ARCH="macos-arm64"
else
SASS_ARCH="macos-x64"
fi
curl -fsSL "https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-${SASS_ARCH}.tar.gz" \
| tar -xz -C "$HOME"
echo "$HOME/dart-sass" >> $GITHUB_PATH
elif [ "$RUNNER_OS" == "Windows" ]; then
choco install sass
fi
shell: bash
# [24/AUG/23] Adjusted from npm ci for non-macOS to prevent EBADPLATFORM error due to fsevents
- name: Perform clean install of npm
run: |
if [ "$RUNNER_OS" == "macOS" ]; then
npm ci
else
npm i
fi
shell: bash
# On Windows, HUGO_CACHEDIR is initialised from the matrix as '~\AppData\Local\hugo_cache'.
# Hugo requires an absolute path, so expand ~ to %LOCALAPPDATA% before using the cache.
- name: Expand Hugo cache directory on Windows
if: runner.os == 'Windows'
run: echo "HUGO_CACHEDIR=$env:LOCALAPPDATA\hugo_cache" >> $env:GITHUB_ENV
shell: pwsh
# Cache Hugo cachedir and resourcedir (configured in config/ci/hugo.toml) for each OS.
# Rolling key restores the previous snapshot as a warm start, then saves a fresh one after build.
# No additional content-based invalidation is needed; Hugo uses checksums itself.
- name: Use Hugo cache
uses: actions/cache@v5
with:
path: ${{ env.HUGO_CACHEDIR }}
key: ${{ runner.os }}-${{ env.CACHE_KEY }}-${{ github.run_id }}
restore-keys: |
${{ runner.os }}-${{ env.CACHE_KEY }}-
- name: Display environment
run: npm run env
- name: Build main site
run: npm run build:cache
# The example site is to be published to demo.gethinode.com
- name: Build example site
run: npm run build:example:ci
================================================
FILE: .github/workflows/mod-update.yml
================================================
name: Update Hugo dependencies
on:
workflow_dispatch:
schedule:
- cron: '0 3 * * *' # run daily at 03:00 AM
permissions:
contents: write
pull-requests: write
jobs:
update-mod:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v6
- name: Setup Node.js
uses: actions/setup-node@v6
with:
node-version: lts/*
cache: 'npm'
cache-dependency-path: '**/package-lock.json'
# [26/AUG/23] Adjusted from npm ci to prevent EBADPLATFORM error due to fsevents
- name: Install npm
run: npm i
- name: Update Hugo module dependencies
id: mod-updates
run: |
MOD_OUTPUT=$(npm run mod:update 2>&1)
echo "$MOD_OUTPUT"
MOD_UPDATES=$(echo "$MOD_OUTPUT" | grep '^go: upgraded' | sed 's/go: / - /' | sort -u)
echo 'MOD_UPDATES<<EOF' >> $GITHUB_OUTPUT
echo "$MOD_UPDATES" >> "$GITHUB_OUTPUT"
echo 'EOF' >> $GITHUB_OUTPUT
- name: Create Pull Request
uses: gethinode-actions/create-pull-request@v8
with:
token: ${{ secrets.HUGO_MOD_PR }}
commit-message: 'fix: update Hugo module dependencies'
committer: GitHub <noreply@github.com>
branch: hugo-mod-dependencies
delete-branch: true
title: 'Update Hugo module dependencies'
body: |
This PR is auto-generated by [create-pull-request][1].
Changes to go.mod:
${{ steps.mod-updates.outputs.MOD_UPDATES }}
[1]: https://github.com/peter-evans/create-pull-request
labels: dependencies
add-paths: |
go.mod
go.sum
**/go.mod
**/go.sum
================================================
FILE: .github/workflows/release.yml
================================================
name: Release
on:
workflow_dispatch:
push:
branches:
- main
- beta
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@v6
with:
fetch-depth: 0
- name: Set up Node.js
uses: actions/setup-node@v6
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
================================================
FILE: .gitignore
================================================
_vendor/
prebuild/
prebuild-headers/
prebuild-headers-dev/
prebuild-headers-prod/
public/
resources/
node_modules/
.DS_store
.hugo_build.lock
# Local Netlify folder and build files
.netlify
dart-sass/
================================================
FILE: .gitmodules
================================================
================================================
FILE: .husky/commit-msg
================================================
npx --no -- commitlint --edit $1
================================================
FILE: .husky/install.mjs
================================================
// 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())
================================================
FILE: .husky/pre-commit
================================================
npm test
================================================
FILE: .markdownlint-cli2.jsonc
================================================
{
"config": {
"default": true,
"MD013": false,
"MD024": false,
"MD026": false,
"MD034": false,
"MD051": false,
"MD053": false,
"MD055": false,
"MD056": false
},
"ignores": ["node_modules", "CHANGELOG.md"]
}
================================================
FILE: .stylelintignore
================================================
assets/scss/common/_variables.scss
assets/scss/components/_syntax-dark.scss
assets/scss/components/_syntax-light.scss
assets/scss/vendor
assets/scss/theme/fonts.scss
assets/scss/app-dart.scss
assets/scss/app.scss
node_modules
================================================
FILE: .stylelintrc.json
================================================
{
"extends": "stylelint-config-standard-scss",
"rules": {
"no-empty-source": null,
"scss/comment-no-empty": null,
"scss/at-extend-no-missing-placeholder": null,
"scss/dollar-variable-colon-space-after": null,
"scss/dollar-variable-empty-line-before": null,
"color-function-notation": null,
"alpha-value-notation": null,
"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,
"property-no-vendor-prefix": null,
"at-rule-no-unknown": [
true,
{
"ignoreAtRules": [
"extend",
"at-root",
"debug",
"warn",
"error",
"if",
"else",
"for",
"each",
"while",
"mixin",
"include",
"content",
"return",
"function",
"tailwind",
"apply",
"responsive",
"variants",
"screen"
]
}
]
}
}
================================================
FILE: CLAUDE.md
================================================
# CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
## Overview
Hinode is a Hugo theme for documentation and blog sites built on Bootstrap 5. It uses Hugo's module system to manage dependencies. The theme is designed for performance, security (with CSP headers), and SEO.
**Version 2 (templatev2 branch)** is a minimal core theme. Optional extensions like mod-blocks add features like pre-built Bookshop components for page building.
## Common Development Commands
### Development Server
```bash
npm start # Start Hugo server with module vendoring
npm run start:example # Start server using exampleSite
npm run start:prod # Start server in production mode
npm run start:example:prod # Start exampleSite in production mode
```
### Building
```bash
npm run build # Build site with minification
npm run build:example # Build exampleSite
npm run build:debug # Build with debug output
npm run build:headers # Generate Netlify/server headers
```
### Linting & Testing
```bash
npm test # Run all linters
npm run lint # Run all linters
npm run lint:scripts # ESLint for JavaScript (assets/js)
npm run lint:styles # Stylelint for SCSS
npm run lint:markdown # Markdownlint for Markdown files
```
### Module Management
```bash
npm run mod:vendor # Vendor Hugo modules to _vendor/
npm run mod:update # Update all Hugo modules
npm run mod:tidy # Clean up unused module dependencies
npm run mod:clean # Remove module cache
```
### Maintenance
```bash
npm run clean:public # Remove generated public/ directories
npm run clean:install # Remove node_modules and package-lock.json
npm run upgrade # Update npm and Hugo module dependencies
```
## Architecture
### Hugo Module System
The theme uses Hugo's module system extensively. All modules are vendored to `_vendor/` for reproducible builds. Key modules include:
**Core modules (always loaded):**
- `mod-bootstrap` - Bootstrap 5 framework
- `mod-utils` - Utility functions and helpers (GetPadding, GetBreakpoint, LogWarn, InitArgs, etc.)
- `mod-flexsearch` - Full-text search functionality
- `mod-fontawesome` - Icon support
**Optional modules:**
- `mod-blocks` - Pre-built Bookshop blocks for page building (NOT loaded by default in v2)
- `mod-katex`, `mod-mermaid`, `mod-leaflet`, `mod-lottie` - Feature modules
Module configuration is in `config/_default/hugo.toml` under `[module.imports]`. Always run `npm run mod:vendor` after module changes.
### Partial Ownership (v2 Architecture)
**Hinode owns (core partials):**
- `assets/card-group.html`, `assets/nav.html`, `assets/video.html`, `assets/table.html`, `assets/timeline.html` - Used by Hinode shortcodes
- `assets/live-image.html`, `assets/live-pages.html` - Used by Hinode templates
- `assets/section-title.html` - Section heading utility (used by Hinode pages and mod-blocks components)
- All `mod-utils` utilities (GetPadding, GetBreakpoint, LogWarn, InitArgs, etc.)
**mod-blocks owns (block-specific partials):**
- `assets/hero.html`, `assets/contact.html`, `assets/faq.html`, `assets/menu.html`, `assets/testimonial-carousel.html`, `assets/preview.html`
- `utilities/section.html` - Component wrapper
- `page/contact.html` - Contact page template
**Dependency flow:**
```text
Hinode v2 (core theme)
├── mod-utils (GetPadding, LogWarn, etc.)
├── Shared partials (card-group, video, table, section-title, etc.)
└── Does NOT import mod-blocks by default
mod-blocks v1.1+ (optional extension)
├── 16 Bookshop components
├── Block-specific partials (7 files)
└── Depends on Hinode v2 (inherits section-title from Hinode)
```
### Component Library (Bookshop) - Optional via mod-blocks
Bookshop components are provided by the optional **mod-blocks** module. When installed, components live in `component-library/components/`. Each component has:
- `*.hugo.html` - Hugo template
- `*.scss` - Component styles
- `*.bookshop.yml` - Schema definition
Components are mounted to multiple locations via `hugo.toml`:
- `layouts/partials/bookshop/` - Templates
- `data/structures/` - Schemas
- `assets/scss/modules/bookshop/` - Styles
#### Bookshop Component Architecture
Bookshop components follow a two-layer architecture:
**1. Component partial** (e.g., `layouts/partials/assets/preview.html`):
- Contains the core component logic and rendering
- Uses **component-specific arguments** (e.g., `url`, `device`, `heading` for preview)
- These arguments should be defined in the component's structure file
**2. Bookshop wrapper** (e.g., `component-library/components/preview/preview.hugo.html`):
- Calls the component partial with component-specific arguments
- Wraps output with `utilities/section.html` for section-level styling
- Passes **section arguments** to the wrapper (e.g., `id`, `background`, `width`, `justify`, `wrapper`, `fluid`, `theme`, `cover`, `overlay-mode`, `section-class`, `bg-class`)
**Important distinctions:**
- **Section arguments are NOT part of the component partial** - they're handled by the section wrapper
- **Structure files should only include component-specific arguments** - arguments actively used by the partial
- **Section arguments are defined in Bookshop specs** (`.hugo.html` and `.bookshop.yml`) but not in the component's structure file
- Example: `preview.yml` defines `url`, `device`, `heading` (used by `preview.html`), but NOT `background`, `width`, etc. (only used by section wrapper)
**Example structure:**
```hugo
{{/* preview.hugo.html - Bookshop wrapper */}}
{{ $raw := partial "assets/preview.html" (dict
"url" .url {{/* component-specific */}}
"device" .device {{/* component-specific */}}
"heading" .heading {{/* component-specific */}}
) }}
{{ partial "utilities/section.html" (dict
"raw" $raw
"background" .background {{/* section argument */}}
"width" .width {{/* section argument */}}
"theme" .theme {{/* section argument */}}
{{/* ... other section arguments ... */}}
)}}
```
### Version 2 Architecture Philosophy
**Design Goal:** Hinode v2 is a minimal core theme that works standalone for documentation and blog sites. Optional features are provided through separate modules.
**What's in Hinode v2 core:**
- Hugo templates for pages, lists, and singles
- Shortcode library (accordion, alert, card, carousel, etc.)
- Shared partials (section-title, card-group, video, table, timeline)
- Bootstrap 5 styling via mod-bootstrap
- Search via mod-flexsearch
- Icons via mod-fontawesome
- Core utilities via mod-utils
**What's optional (via modules):**
- **mod-blocks** - Pre-built Bookshop components for visual page building
- **mod-katex** - LaTeX math rendering
- **mod-mermaid** - Diagram rendering
- **mod-leaflet** - Interactive maps
- **mod-lottie** - Lottie animations
**Key architectural decisions:**
1. **No circular dependencies** - Hinode doesn't import mod-blocks; mod-blocks imports Hinode
2. **Clear ownership** - Block-specific partials (hero, contact, faq) live in mod-blocks; shared utilities (section-title, card-group) live in Hinode
3. **Module inheritance** - mod-blocks inherits Hinode's shared partials automatically
4. **Backwards compatibility** - Sites can still use mod-blocks by explicitly importing it
### Directory Structure
- `layouts/` - Theme templates and shortcodes
- `baseof.html` - Base template with navbar, footer, and content blocks
- `_partials/` - Reusable template components
- `_shortcodes/` - Hugo shortcodes for content (accordion, alert, card, etc.)
- `assets/` - Source assets (JS, SCSS, images, icons)
- `scss/` - Organized into components/, layouts/, theme/, helpers/
- `js/` - JavaScript modules
- `config/` - Hugo configuration
- `_default/hugo.toml` - Main config with module imports
- `postcss.config.js` - PostCSS with PurgeCSS and autoprefixer
- `content/` - Theme content (minimal, main content in exampleSite)
- `data/` - Data files for theme configuration
- `i18n/` - Translation files (en, nl, fr, de, pl, pt-br, zh-hans, zh-hant)
- `exampleSite/` - Full example site for testing theme
- `static/` - Static assets copied directly to output
### CSS Pipeline
CSS uses PostCSS with:
1. **Autoprefixer** - Adds vendor prefixes
2. **cssnano** - Minification
3. **PurgeCSS** - Removes unused CSS based on `hugo_stats.json`
PurgeCSS safelist is defined in `config/postcss.config.js`. When adding new dynamic classes or Bootstrap components, update the safelist to prevent removal.
### Version Management
The theme supports versioned documentation with sidebar menus per version. Version detection happens in `baseof.html` using `utilities/GetVersion.html` partial.
### Shortcodes System
Extensive shortcode library in `layouts/_shortcodes/` provides Bootstrap components accessible in Markdown:
- Layout: accordion, card, carousel, collapse, navbar, tabs
- UI: alert, badge, button, spinner, toast, tooltip
- Content: image, video, table, timeline
- Typography: abbr, kbd, mark, sub, sup
### Argument and Type Initialization System
Hinode uses `mod-utils` to provide a robust argument validation and initialization system
for shortcodes, partials, and Bookshop components.
**Key components:**
- `utilities/InitArgs.html` - Validates and initializes arguments with type checking and
defaults
- `utilities/InitTypes.html` - Loads type definitions and merges structure-specific with
global definitions
- `data/structures/_arguments.yml` - Global argument definitions (type, default, options,
etc.)
- `data/structures/<name>.yml` - Structure-specific argument definitions for each shortcode
or component
**How it works:**
1. **Structure definition inheritance:** Each shortcode/component has a structure file
(e.g., `example.yml`) that defines its arguments. These definitions automatically
inherit from the global `_arguments.yml` file.
2. **Automatic camelCase conversion:** Hyphenated argument names (e.g., `show-preview`)
are automatically converted to camelCase (e.g., `showPreview`) for easier access in
templates. Both versions are available: `$args.show-preview` and `$args.showPreview`.
3. **Default value application:** Arguments with `default` or `config` fields in their
definition are automatically initialized with those values if not provided by the user.
4. **Type validation:** Arguments are validated against their declared types. The system
automatically casts between compatible types (e.g., string `"true"` to boolean `true`).
5. **Deprecation warnings:** Deprecated arguments (marked with `deprecated` field) trigger
warnings when used, guiding users to the preferred alternative.
**Structure definition format:**
Structure files follow the DRY principle with clear separation of concerns:
**Global definitions** (`mod-utils/data/structures/_arguments.yml`):
- `type` - Argument data type
- `default` - Default value (if applicable)
- `options` - Valid values for select types
- `comment` - Description of what the argument does
**Component-specific definitions** (`data/structures/<name>.yml`):
- `optional` - Whether argument is required or optional
- `deprecated` - Version when argument was deprecated (component-specific)
- `alternative` - Replacement argument when deprecated (component-specific)
- `release` - Version when argument was introduced (component-specific)
```yaml
# Component structure file (e.g., data/structures/preview.yml)
comment: >-
Renders a live URL preview with switchable device views.
arguments:
url:
optional: false
release: v1.0.0
device:
optional: true
release: v1.0.0
heading:
optional: true
release: v1.0.0
old-param:
optional: true
deprecated: v1.1.0
alternative: device
```
```yaml
# Global argument definitions (mod-utils/data/structures/_arguments.yml)
arguments:
url:
type: string
comment: >-
Address of the link destination, either a local reference or an external
address. Include the `scheme` when referencing an external address.
device:
type: select
default: desktop
comment: >-
Device view to display by default in preview component. Determines the
initial iframe dimensions and active tab.
options:
values:
- desktop
- tablet
- mobile
heading:
type: heading
comment: >-
Heading of the content block, including a preheading and content element.
```
**When to add to _arguments.yml:**
- New argument used by multiple components - add full type definition to global file
- Component-specific argument - can define inline in structure file (but prefer global for reusability)
- Override default or add options - define inline in structure file (inherits base type from global)
**Common pitfall - Boolean argument handling:**
When accessing boolean arguments that could be explicitly set to `false`, **DO NOT use the
`or` operator** for fallback logic:
```hugo
{{/* WRONG - or operator treats false as falsy and skips it */}}
{{- $showPreview := or $args.showPreview $args.show_preview }}
{{/* CORRECT - directly access the camelCase version */}}
{{- $showPreview := $args.showPreview }}
```
The `or` operator returns the first truthy value, so `or false <fallback>` will skip
`false` and return the fallback instead of honoring the explicit `false` value.
**Best practices:**
- Always use `InitArgs` at the start of shortcodes and partials to validate arguments
- Define structure files in `data/structures/` for all shortcodes and components
- **Structure files should only reference arguments by name** - type definitions go in `_arguments.yml`
- **Only include arguments actively used by the component partial** - section arguments (like `id`, `background`, `width`, `justify`, `wrapper`, `fluid`, `theme`, `cover`, `overlay-mode`, `section-class`, `bg-class`) are handled by the Bookshop section wrapper and should NOT be in the component's structure file
- Add new argument types to `mod-utils/data/structures/_arguments.yml` for reuse across components
- Mark `deprecated`, `alternative`, and `release` in **component structure files** (component-specific metadata)
- Use hyphenated names for new arguments (e.g., `show-preview` not `show_preview`)
- Access arguments via their camelCase versions (e.g., `$args.showPreview`)
**Example usage in a shortcode:**
```hugo
{{/* Initialize and validate arguments */}}
{{- $args := partial "utilities/InitArgs.html" (dict
"structure" "example"
"args" .Params
"named" .IsNamedParams
"group" "shortcode"
) -}}
{{/* Check for errors/warnings */}}
{{- if or $args.err $args.warnmsg -}}
{{- partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict
"partial" "shortcodes/example.html"
"msg" "Invalid arguments"
"details" ($args.errmsg | append $args.warnmsg)
"file" page.File
"position" .Position
)}}
{{- end -}}
{{/* Access arguments using camelCase */}}
{{- $showPreview := $args.showPreview }}
{{- $showMarkup := $args.showMarkup }}
```
### Content Security Policy
CSP headers are auto-generated via Hugo's segments feature. The theme includes `mod-csp` for Content Security Policy management. Headers are defined in `netlify.toml` and generated via `npm run build:headers`.
### Internationalization
Multi-language support with translations in `i18n/`. Default language is English (`en-us`). Language configuration in `config/_default/hugo.toml`.
### Page Templates (v2)
**List pages** (`layouts/list.html`):
- If page has `content_blocks` frontmatter → renders via `page/blocks.html` (requires mod-blocks)
- Otherwise → renders via `page/articles.html` (core Hinode, uses section-title.html for header)
**Single pages** (`layouts/single.html`):
- Renders content via `utilities/ProcessContent` partial
- If page has `content_blocks` → also renders via `page/blocks.html`
**Key partials:**
- `page/articles.html` - Default list page rendering with section-title header and card grid
- `page/blocks.html` - Renders Bookshop content blocks (requires mod-blocks)
- `assets/section-title.html` - Shared heading utility with preheading, subtitle, links support
## Key Configuration Files
- `hugo.toml` - Main Hugo config with modules, mounts, build settings
- `package.json` - npm scripts and dependencies
- `go.mod` - Hugo module dependencies (Go modules)
- `postcss.config.js` - PostCSS pipeline with PurgeCSS safelist
- `netlify.toml` - Netlify build config and security headers
- `.eslintrc.yml` - JavaScript linting (ES6, browser environment)
- `.stylelintrc.json` - SCSS linting (standard-scss)
- `.markdownlint-cli2.jsonc` - Markdown linting rules
## Important Development Notes
### When Working with mod-blocks (Optional)
**Note:** Hinode v2 does NOT include mod-blocks by default. If you need Bookshop components:
1. Add mod-blocks to `hugo.toml`: `path = "github.com/gethinode/mod-blocks"`
2. Run `npm run mod:vendor` to vendor the module
3. Components live in mod-blocks repository at `component-library/components/`
4. Each component has three files: `.hugo.html`, `.scss`, `.bookshop.yml`
5. Update PurgeCSS safelist in `config/postcss.config.js` if components add dynamic classes
### When Adding Hugo Modules
1. Add to `go.mod` requires section
2. Add to `[module.imports]` in `hugo.toml`
3. Run `npm run mod:vendor` to vendor the module
4. If module has styles, add to PurgeCSS safelist in `postcss.config.js`
### When Working with Layouts
- `baseof.html` is the main template; it sets up version-aware menus, content blocks, overlay mode
- Partials in `_partials/` are organized: `head/`, `footer/`, `page/`, `utilities/`, `assets/`
- The theme uses `.Scratch` extensively for passing data between partials
### Build Process
1. `hugo mod vendor` - Vendors modules to `_vendor/`
2. Hugo build generates `hugo_stats.json` with used classes/tags/ids
3. PostCSS processes SCSS, using `hugo_stats.json` to purge unused CSS
4. Final output in `public/` or `exampleSite/public/`
### Testing Changes
Test with both main site and exampleSite:
- `npm start` - Test theme directly
- `npm run start:example` - Test with full example content
- `npm run lint` - Check code quality before committing
### Git Workflow
- Main branch: `main` (production releases)
- Development branch: `develop`
- Uses semantic-release for automated versioning
- Commits follow Angular Conventional Commits (enforced by commitlint)
- Husky pre-commit hooks run linters automatically
### Commit Message Format
Follow Angular Conventional Commits format:
```text
<type>(<scope>): <subject>
<body>
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
```
**Common types:**
- `feat` - New feature
- `fix` - Bug fix
- `refactor` - Code refactoring
- `style` - Styling changes (CSS/SCSS only, no logic changes)
- `docs` - Documentation changes
- `test` - Adding or updating tests
- `chore` - Build process, dependencies, tooling
**Common scopes:**
- `i18n` - Internationalization/translations
- `components` - Component changes
- `docs` - Documentation
- `theme` - Theme styling
- `build` - Build process
**Example commits:**
- `feat(i18n): add missing translations for testimonials`
- `fix(components): correct variable reference in testimonials`
- `style: add width constraint to section-title class`
- `refactor(components): improve testimonials component layout`
### Linting & Code Quality
Run linters before committing (pre-commit hooks will enforce this):
```bash
npm test # Run all linters (recommended before commits)
npm run lint:scripts # Check JavaScript
npm run lint:styles # Check SCSS
npm run lint:markdown # Check Markdown documentation
```
**Linting tools:**
- **ESLint** (`.eslintrc.yml`) - JavaScript linting with ES6 and browser environment
- **Stylelint** (`.stylelintrc.json`) - SCSS linting with standard-scss rules
- **Markdownlint** (`.markdownlint-cli2.jsonc`) - Markdown file linting
**Markdown linting rules** (`.markdownlint-cli2.jsonc`):
- Enforced: MD040 (fenced code blocks must have language specified), MD032 (lists must be surrounded by blank lines), and others
- Disabled rules: MD013 (line length), MD024 (duplicate headers), MD026 (trailing punctuation), MD034 (bare URLs), MD051 (link fragments), MD053 (link reference definitions), MD055 (table pipe escaping), MD056 (table header/body cell count)
- Ignored: `node_modules/`, `CHANGELOG.md`
**Commit message linting** (enforced by commitlint via pre-commit hooks):
- Body lines must not exceed 100 characters (enforced by `body-max-line-length`)
- When formatting multi-line bullet points, break long lines at 100 characters
- Use indentation (2 spaces) for continuation lines to maintain readability
Example of correctly formatted commit message:
```text
refactor: consolidate version detection into modular partials
- Replace theme-version.html with improved version.html partial
- Extract version detection logic into reusable modular partials
(mod-version and env-version)
- Update version regex to support both major version (v2) and
non-versioned module paths
- Add fallback to HUGO_HINODE_VERSION environment variable for
CI/CD builds
```
**Important notes:**
- Pre-commit hooks run automatically when committing
- If hooks modify files (e.g., formatting), the commit will fail and you should commit again
- Always test changes with the example site: `npm run build:example`
- Check for i18n warnings when modifying translations
- Ensure all language variants build without warnings
- If using mod-blocks, test that components still work after Hinode changes
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2022 - 2026 Hinode Team / 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
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# Hugo Theme Hinode
<!-- markdownlint-disable MD033 -->
<!-- Tagline -->
<p align="center">
<b>A clean documentation and blog theme for your Hugo site based on Bootstrap 5</b>
<br />
</p>
<!-- Badges -->
<p align="center">
<a href="https://gohugo.io">
<img src="https://img.shields.io/badge/generator-hugo-brightgreen" alt="Hugo website">
</a>
<a href="https://gethinode.com">
<img src="https://img.shields.io/badge/theme-hinode-blue" alt="Hinode theme">
</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>
<a href="https://stats.uptimerobot.com/xyGVYhLJmV">
<img src="https://img.shields.io/uptimerobot/status/m791334689-73d9dfc82030f4f955b2d6bb" alt="UptimeRobot Status">
</a>
<a href="https://github.com/gethinode/hinode/commits/main">
<img src="https://img.shields.io/github/last-commit/gethinode/hinode.svg" alt="Last commit">
</a>
<a href="https://github.com/gethinode/hinode/issues">
<img src="https://img.shields.io/github/issues/gethinode/hinode.svg" alt="Issues">
</a>
<a href="https://github.com/gethinode/hinode/pulls">
<img src="https://img.shields.io/github/issues-pr-raw/gethinode/hinode.svg" alt="Pulls">
</a>
<a href="https://github.com/gethinode/hinode/blob/main/LICENSE">
<img src="https://img.shields.io/github/license/gethinode/hinode" alt="License">
</a>
</p>
<!-- Table of Contents -->
<p align="center">
<a href="#about">About</a> •
<a href="#prerequisites">Prerequisites</a> •
<a href="#installation">Installation</a> •
<a href="#configuration">Configuration</a> •
<a href="#contributing">Contributing</a> •
<a href="#donate">Donate</a> •
<a href="#license">License</a>
</p>
<!-- markdownlint-enable MD033 -->
## About
- [Online Demo][demo]
- [PageSpeed Insights][pagespeed]
- [Mozilla Observatory][observatory]
Hinode is a clean documentation and blog theme for [Hugo][hugo], an open-source static site generator. Based on the [Bootstrap 5][bootstrap] framework, the rendered site is fast, secure, and responsive. Hinode uses [FlexSearch][flexsearch] to enable full text search across your site. Finally, the theme supports [Node Package Manager][npm] (npm) to automate the build process and to keep track of dependencies.
Detailed information about Hinode is available on the [official website][website].
## Prerequisites
Hinode is a [Hugo theme that uses modules][hugo_modules] to install and maintain various components. It can be installed using either Hugo or npm. If you would like to take advantage of automation, the npm approach is recommended. Refer to the [Hinode template][repository_template] for installation instructions with npm.
The installation instructions in this readme install Hinode as a regular Hugo theme. Hinode requires the following software to be installed on your local machine.
- [Go binary][golang_download]
- [Hugo][hugo_download] (extended version)
[Git][git_download] is recommended, but is not a strict requirement.
## Installation
<!-- markdownlint-disable MD033 -->
<details>
<summary>Installation notes for Windows</summary>
The installation for Windows requires PowerShell v7. Download it from the Microsoft Store as needed. Check your current version with the command `$PSVersionTable`.
</details>
<!-- markdownlint-enable MD033 -->
Start a new Hinode project in three steps:
1. **Create a new site**
```bash
hugo new site my-hinode-site && cd my-hinode-site
```
2. **Initialize the module system**
```bash
hugo mod init example.com/my-hinode-site
echo "[[module.imports]]" >> hugo.toml
echo "path = 'github.com/gethinode/hinode'" >> hugo.toml
```
3. **Start a development server**
```bash
hugo server
```
## Optional Extensions
Hinode v2 is a minimal core theme. Optional extensions are available to add features:
- **[mod-blocks][mod-blocks]** - Pre-built Bookshop blocks for quickly building page layouts (hero, cards, FAQ, testimonials, etc.)
- Other modules - See the [official modules list][modules]
To add mod-blocks to your site:
```toml
[[module.imports]]
path = "github.com/gethinode/mod-blocks"
```
## Configuration
See the [official documentation][getstarted] on how to configure your site.
## Contributing
See the [official documentation][contribute] on how to contribute to the open-source development of Hinode.
## Credits
Hinode is inspired by the following themes:
- [Blist][blist] - a clean and fast blog theme for your Hugo site using Tailwind CSS.
- [Doks][doks] - a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize.
## Donate
<!-- markdownlint-disable MD033 -->
<a href="https://www.buymeacoffee.com/markdumay" target="_blank" rel="noopener noreferrer nofollow"><img src="https://cdn.buymeacoffee.com/buttons/lato-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;"></a>
<!-- markdownlint-enable MD033 -->
## License
The `hinode`, `docs`, and `template` codebase is released under the [MIT license][license]. The documentation of Hinode is licensed under the Creative Commons [(CC BY-NC 4.0)][cc-by-nc-4.0] license. This includes all files within the repository's `/content` and `/exampleSite/content` folders and their children, as well as the "README" in the repository root. This applies to all public repositories maintained by `gethinode` on GitHub, including the `gethinode/hinode`, `gethinode/template`, and `gethinode/docs` repositories, unless specified otherwise.
<!-- MARKDOWN PUBLIC LINKS -->
[blist]: https://github.com/apvarun/blist-hugo-theme
[bootstrap]: https://getbootstrap.com
[cc-by-nc-4.0]: https://creativecommons.org/licenses/by-nc/4.0/
[doks]: https://github.com/h-enk/doks
[flexsearch]: https://github.com/nextapps-de/flexsearch
[git_download]: https://git-scm.com
[hugo]: https://gohugo.io
[hugo_download]: https://gohugo.io/installation
[hugo_modules]: https://gohugo.io/hugo-modules/
[netlify]: https://www.netlify.com
[nodejs]: https://nodejs.org
[npm]: https://www.npmjs.com
[observatory]: https://observatory.mozilla.org/analyze/demo.gethinode.com
[pagespeed]: https://pagespeed.web.dev/report?url=https%3A%2F%2Fdemo.gethinode.com%2F
<!-- MARKDOWN MAINTAINED LINKS -->
[contribute]: https://gethinode.com/contribute
[getstarted]: https://gethinode.com/docs
[golang_download]: https://go.dev/dl/
[mod-blocks]: https://github.com/gethinode/mod-blocks
[modules]: https://gethinode.com/docs/getting-started/modules/
[demo]: https://demo.gethinode.com/
[license]: https://github.com/gethinode/hinode/blob/main/LICENSE
[repository]: https://github.com/gethinode/hinode.git
[repository_template]: https://github.com/gethinode/template.git
[website]: https://gethinode.com/
================================================
FILE: archetypes/default.md
================================================
---
# author:
title: {{ replace .Name "-" " " | title }}
date: {{ .Date }}
draft: true
# layout:
# description:
# tags:
# icon:
# thumbnail:
# url:
# author:
# authorURL:
# origin:
# originURL:
---
================================================
FILE: assets/js/alert.js
================================================
/* eslint-disable no-undef */
const alert = document.getElementById('page-alert')
const closeBtn = document.getElementById('page-alert-btn-close')
if (alert !== null && closeBtn !== null) {
const version = alert.getAttribute('data-page-alert-version') || 'unknown'
const hideAlert = getSessionStorage(`page-alert-${version}`, null, 'functional') !== null
if (hideAlert) {
alert.classList.add('d-none')
}
closeBtn.addEventListener('click', () => {
setSessionStorage(`page-alert-${version}`, 'seen', 'functional')
alert.classList.add('d-none')
})
}
================================================
FILE: assets/js/animation.js
================================================
function reveal () {
const reveals = document.querySelectorAll('.reveal')
for (let i = 0; i < reveals.length; i++) {
const windowHeight = window.innerHeight
const elementTop = reveals[i].getBoundingClientRect().top
const elementVisible = 150
if (elementTop < windowHeight - elementVisible) {
reveals[i].classList.add('active')
reveals[i].classList.remove('reveal')
} else {
reveals[i].classList.remove('active')
}
}
}
window.addEventListener('scroll', reveal)
================================================
FILE: assets/js/clipboard.js
================================================
/*
Source:
- https://simplernerd.com/hugo-add-copy-to-clipboard-button/
*/
const svgCopy =
'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>'
const svgCheck =
'<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" fill="rgb(63, 185, 80)" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>'
const addCopyButtons = clipboard => {
// 1. Look for pre > code elements in the DOM
document.querySelectorAll('pre > code').forEach(codeBlock => {
// 2. Create a button that will trigger a copy operation
const button = document.createElement('button')
button.className = 'clipboard-button'
button.setAttribute('data-toast-target', 'toast-copied-code-message')
button.setAttribute('aria-label', '{{ T "copyToClipboard" }}')
button.type = 'button'
button.innerHTML = svgCopy
button.addEventListener('click', () => {
const text = codeBlock.innerText.split('\n').filter(Boolean).join('\n')
clipboard.writeText(text).then(
() => {
button.blur()
button.innerHTML = svgCheck
setTimeout(() => (button.innerHTML = svgCopy), 2000)
},
() => (button.innerHTML = 'Error')
)
})
// 3. Append the button directly before the pre tag
const pre = codeBlock.parentNode
pre.parentNode.insertBefore(button, pre)
})
}
if (navigator && navigator.clipboard) {
addCopyButtons(navigator.clipboard)
}
document.querySelectorAll('[data-clipboard]').forEach(trigger => {
const text = trigger.getAttribute('data-clipboard')
trigger.addEventListener('click', () => {
navigator.clipboard.writeText(text)
})
})
================================================
FILE: assets/js/critical/_cookie.js
================================================
/* eslint-disable no-unused-vars */
function hasConsent (category) {
// TODO: placeholder function
return true
}
function getLocalStorage (key, def, category) {
if (hasConsent(category)) {
return localStorage.getItem(key)
} else {
return def
}
}
function setLocalStorage (key, val, category) {
if (hasConsent(category)) {
localStorage.setItem(key, val)
}
}
function getSessionStorage (key, def, category) {
if (hasConsent(category)) {
return sessionStorage.getItem(key)
} else {
return def
}
}
function setSessionStorage (key, val, category) {
if (hasConsent(category)) {
sessionStorage.setItem(key, val)
}
}
================================================
FILE: assets/js/critical/color.js
================================================
{{- if (or site.Params.main.enableDarkMode site.Params.main.colorMode.enabled) -}}
/*!
* Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
* Copyright 2011-2022 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License.
*/
(() => {
'use strict'
const supportedThemes = ['auto', 'dark', 'light'];
// retrieves the currently stored theme from local storage
const storedTheme = getLocalStorage('theme', 'auto', 'functional')
// retrieves the theme preferred by the client, defaults to light
function getPreferredTheme() {
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
}
// retrieves the current theme, either from local storage or client's preferences
function getTheme() {
if (storedTheme) {
return storedTheme
} else {
const preference = getPreferredTheme()
setLocalStorage('theme', preference, 'functional')
return preference
}
}
// applies and stores requested theme
function setTheme(theme) {
if (!supportedThemes.includes(theme)) {
theme = 'auto'
}
setLocalStorage('theme', theme, 'functional')
if (theme === 'auto') {
theme = getPreferredTheme()
}
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)
updateSelectors()
}
// alternates the currently active theme
function toggleTheme() {
const target = document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark'
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())
}
})
window.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.navbar-mode-selector').forEach(chk => {
chk.addEventListener('change', function () {
document.documentElement.setAttribute('data-bs-theme-animate', 'true')
toggleTheme()
})
})
})
window.addEventListener('load', () => {
// update the selectors when all elements are ready
updateSelectors()
})
// initialize theme as soon as possible to reduce screen flickering
setTheme(getTheme())
})()
{{- end -}}
================================================
FILE: assets/js/critical/languageSelector.js
================================================
/* eslint-disable */
{{- if site.Params.main.enableLanguageSelectionStorage -}}
{{- $folder := (urls.Parse site.BaseURL).Path | default "/" -}}
(() => {
'use strict'
const folder = '{{ $folder }}'
// Function to get the selected language from local storage
function getLanguage () {
return getLocalStorage('selectedLanguage', document.documentElement.lang, 'functional')
}
// Function to set the selected language in local storage
function setLanguage (language) {
setLocalStorage('selectedLanguage', language, 'functional')
}
// Function to apply the selected language to the website
function applyLanguage (language, href) {
if (document.documentElement.lang !== language) {
if (href) {
if (window.location.pathname !== href) {
window.location.href = href
}
} else {
let target = folder + language + '/'
if (window.location.href !== target) {
window.location.href = target
}
}
}
}
// Event listener for language selection
document.addEventListener('DOMContentLoaded', () => {
// override stored language when query string contains force is true
let params = new URLSearchParams(document.location.search)
let force = params.get('force')
if (force !== null && force.toLowerCase() == 'true') {
setLanguage(document.documentElement.lang)
return
}
// 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 => {
if (item.getAttribute('hreflang') === storedLanguage) {
applyLanguage(storedLanguage, item.getAttribute('href'))
}
})
}
// Update the stored language when the user selects a new one
languageItems.forEach(item => {
item.addEventListener('click', () => {
const selectedLanguage = item.getAttribute('hreflang')
if (selectedLanguage) {
setLanguage(selectedLanguage)
}
})
})
}
else {
// overrule the current stored language when no translation is available
setLanguage(document.documentElement.lang)
}
})
})()
{{- end -}}
/* eslint-enable */
================================================
FILE: assets/js/critical/sidebar-pre-init.js
================================================
// Pre-apply sidebar collapsed state before body renders to prevent label flash.
(function () {
try {
if (localStorage.getItem('sidebar-collapsed') === '1') {
document.documentElement.classList.add('sidebar-pre-collapsed')
}
} catch { /* ignore localStorage errors */ }
}())
================================================
FILE: assets/js/menu.js
================================================
const url = new URL(window.location.href)
const menu = url.searchParams.get('menu')
const child = url.searchParams.get('child')
const menuItems = document.querySelectorAll('[data-nav="main"]')
if (menu !== null) {
menuItems.forEach(element => {
element.classList.remove('active')
})
const targetMainItems = document.querySelectorAll(`[data-nav-main="${menu}"]:not([data-nav-child])`)
targetMainItems.forEach(element => {
element.classList.add('active')
})
const targetChildItems = document.querySelectorAll(`[data-nav-main="${menu}"][data-nav-child="${child}"]`)
targetChildItems.forEach(element => {
element.classList.add('active')
})
}
================================================
FILE: assets/js/modal.js
================================================
document.addEventListener('hide.bs.modal', function (_event) {
// Remove the focus from the active element
if (document.activeElement) {
document.activeElement.blur()
}
})
================================================
FILE: assets/js/nav.js
================================================
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())
}
})
})
================================================
FILE: assets/js/navbar.js
================================================
const fixed = {{ site.Params.navigation.fixed }}
const navbar = document.querySelector('.navbar')
const togglers = document.querySelectorAll('.main-nav-toggler')
const modeSelectors = document.querySelectorAll('.switch-mode-collapsed')
const colorsBG = ['body', 'secondary', 'tertiary']
let scrollPosition = 0
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms))
}
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 (currentSection) {
adaptToSection(currentSection)
}
}
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 {
if (navbar.dataset.bsTheme !== 'dark') {
navbar.dataset.bsTheme = 'dark'
}
}
// update semi-transparent background color of navbar
const rgb = parseRGB(color)
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) {
if (window.scrollY > 0) {
navbar.classList.add('navbar-scrolled')
} else {
navbar.classList.remove('navbar-scrolled')
}
updateNavbarColor()
if (window.scrollY === 0) {
navbar.style.backgroundColor = ''
}
} 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)
}
}
}
}
if ((navbar !== null) && (window.performance.getEntriesByType)) {
if (window.performance.getEntriesByType('navigation')[0].type === 'reload') {
fixed && updateNavbar()
}
}
if (navbar !== null && togglers !== null) {
// initialize and update the navbar on load, on resize, and on scroll
document.addEventListener('DOMContentLoaded', () => { fixed && updateNavbar() })
window.addEventListener('resize', () => {
fixed && updateNavbar()
for (let i = 0; i < togglers.length; ++i) {
const toggler = togglers[i]
if (toggler.getAttribute('aria-expanded') === 'true') {
toggler.click()
}
}
})
document.addEventListener('scroll', () => fixed && updateNavbar())
// hook up collapse events
document.querySelectorAll('.navbar-collapse').forEach((collapse) => {
collapse.addEventListener('show.bs.collapse', function () {
scrollPosition = window.pageYOffset
document.body.style.top = `-${scrollPosition}px`
document.body.classList.add('navbar-open')
})
collapse.addEventListener('hide.bs.collapse', function () {
document.body.classList.remove('navbar-open')
document.body.style.top = ''
window.scrollTo({ top: scrollPosition, behavior: 'instant' })
})
})
// 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(() => {
if (fixed) {
// wait for the theme animation to finish
sleep(600).then(() => {
updateNavbar()
})
}
})
Observer.observe(html, config)
// initialize background color
if (!navbar.dataset.transparent) {
const color = (navbar.getAttribute('data-navbar-color') || 'body')
const bg = colorsBG.includes(color) ? `var(--bs-${color}-bg)` : `var(--bs-navbar-color-${color})`
navbar.style.setProperty('--bs-navbar-expanded-color', bg)
}
// update the navbar background color when expanded
for (let i = 0; i < togglers.length; ++i) {
togglers[i].onclick = () => {
navbar.classList.toggle('navbar-expanded')
}
}
// invoke the navbar toggler for each mode switcher to collapse the main menu afterwards
for (let i = 0; i < modeSelectors.length; ++i) {
modeSelectors[i].onclick = () => {
for (let j = 0; j < togglers.length; ++j) {
const toggler = togglers[j]
if (toggler.getAttribute('aria-expanded') === 'true') {
toggler.click()
}
}
}
}
}
================================================
FILE: assets/js/optional/.gitkeep
================================================
================================================
FILE: assets/js/popover.js
================================================
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
// eslint-disable-next-line no-undef, no-unused-vars
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
================================================
FILE: assets/js/sharing.js
================================================
{{- if site.Params.sharing.webshare -}}
// Adapted from: https://dev.to/j471n/how-to-share-anything-from-your-website-by-web-share-api-1h5g
// function for Web Share API
function webShareAPI (title, description, link) {
navigator
.share({
title,
text: description,
url: link
})
.then(() => console.log('Successful share'))
.catch((error) => console.log('Error sharing', error))
}
const shareButtons = document.querySelectorAll('[data-sharing-url]')
shareButtons.forEach(btn => {
if (navigator.share) {
const title = btn.getAttribute('data-sharing-title')
const description = btn.getAttribute('data-sharing-description')
const url = btn.getAttribute('data-sharing-url')
// show button if it supports webShareAPI
btn.style.display = 'block'
btn.addEventListener('click', () =>
webShareAPI(title, description, url)
)
} else {
// hide button if host does not support Web Share API
btn.style.display = 'none'
}
})
{{- end -}}
================================================
FILE: assets/js/sidebar-group.js
================================================
(function () {
'use strict'
var STORAGE_KEY = 'sidebar-secondary-collapsed'
function init () {
var nav = document.querySelector('.sidebar-collapsible')
if (!nav) return
var btn = nav.querySelector('[data-bs-toggle="collapse"][data-bs-target^="#sidebar-secondary-"]')
if (!btn) return
var target = document.querySelector(btn.getAttribute('data-bs-target'))
if (!target) return
// Restore persisted state — default is collapsed (stored = true)
var stored = true
try {
var v = localStorage.getItem(STORAGE_KEY)
if (v !== null) stored = v === '1'
} catch { /* ignore localStorage errors */ }
if (!stored) {
target.classList.add('show')
btn.setAttribute('aria-expanded', 'true')
}
target.addEventListener('show.bs.collapse', function () {
btn.setAttribute('aria-expanded', 'true')
try { localStorage.setItem(STORAGE_KEY, '0') } catch { /* ignore localStorage errors */ }
})
target.addEventListener('hide.bs.collapse', function () {
btn.setAttribute('aria-expanded', 'false')
try { localStorage.setItem(STORAGE_KEY, '1') } catch { /* ignore localStorage errors */ }
})
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init)
} else {
init()
}
}())
================================================
FILE: assets/js/sidebar-toggle.js
================================================
(function () {
'use strict'
function setCollapsed (nav, collapsed) {
var storageKey = nav.getAttribute('data-storage-key') || 'sidebar-collapsed'
nav.classList.toggle('sidebar-collapsed', collapsed)
var btn = nav.querySelector('.sidebar-toggle-btn')
if (btn) btn.setAttribute('aria-expanded', String(!collapsed))
if (typeof bootstrap !== 'undefined') {
var items = nav.querySelectorAll('[data-sidebar-label]')
if (collapsed) {
items.forEach(function (el) {
el.setAttribute('data-bs-toggle', 'tooltip')
el.setAttribute('data-bs-placement', 'right')
el.setAttribute('title', el.getAttribute('data-sidebar-label'))
if (!bootstrap.Tooltip.getInstance(el)) {
new bootstrap.Tooltip(el)
}
})
} else {
items.forEach(function (el) {
var tt = bootstrap.Tooltip.getInstance(el)
if (tt) tt.dispose()
el.removeAttribute('data-bs-toggle')
el.removeAttribute('data-bs-placement')
el.removeAttribute('title')
})
}
}
try { localStorage.setItem(storageKey, collapsed ? '1' : '0') } catch { /* ignore localStorage errors */ }
nav.dispatchEvent(new CustomEvent('hinode:sidebar-toggle', {
bubbles: true,
detail: { collapsed: collapsed }
}))
}
function init () {
var nav = document.querySelector('.sidebar-collapsible')
if (!nav) return
var btn = nav.querySelector('.sidebar-toggle-btn')
if (!btn) return
var storageKey = nav.getAttribute('data-storage-key') || 'sidebar-collapsed'
var stored = false
try { stored = localStorage.getItem(storageKey) === '1' } catch { /* ignore localStorage errors */ }
nav.classList.add('sidebar-no-transition')
setCollapsed(nav, stored)
document.documentElement.classList.remove('sidebar-pre-collapsed')
nav.offsetHeight // force reflow before re-enabling transitions
nav.classList.remove('sidebar-no-transition')
btn.addEventListener('click', function () {
setCollapsed(nav, !nav.classList.contains('sidebar-collapsed'))
})
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init)
} else {
init()
}
}())
================================================
FILE: assets/js/testimonial.js
================================================
function adjustCarouselHeight () {
let max = 0
document.querySelectorAll('.testimonials .carousel-item').forEach(container => {
const clone = container.cloneNode(true)
clone.style.display = 'block'
clone.style.visibility = 'hidden'
clone.style.height = 'auto'
container.parentNode.appendChild(clone)
if (clone.offsetHeight > max) max = clone.offsetHeight
container.parentNode.removeChild(clone)
})
document.querySelectorAll('.testimonials .carousel-item').forEach(container => {
container.style.height = max + 'px'
})
}
window.addEventListener('load', () => { adjustCarouselHeight() })
window.addEventListener('resize', () => { adjustCarouselHeight() })
================================================
FILE: assets/js/toast.js
================================================
// Script to move all embedded toast messages into a container with id 'toast-container'. The container ensures multiple
// toast messages are stacked properly. The script targets all elements specified by a 'data-toast-target' and ensures
// the click event of the origin is linked as well.
const container = document.getElementById('toast-container')
if (container !== null) {
// process all data-toast-target elements
document.querySelectorAll('[data-toast-target]').forEach(trigger => {
const target = document.getElementById(trigger.getAttribute('data-toast-target'))
if (target !== null) {
// move the element to the toast containr
container.appendChild(target)
// eslint-disable-next-line no-undef
const toast = bootstrap.Toast.getOrCreateInstance(target)
if (toast !== null) {
// associate the click event of the origin with the toast element
trigger.addEventListener('click', () => {
toast.show()
})
}
}
})
}
================================================
FILE: assets/js/toc.js
================================================
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'
})
}
================================================
FILE: assets/js/tooltip.js
================================================
// Bootstrap tooltip example: https://getbootstrap.com/docs/5.2/components/tooltips/
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
// eslint-disable-next-line no-unused-vars, no-undef
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
================================================
FILE: assets/js/vendor/.gitkeep
================================================
================================================
FILE: assets/js/video.js
================================================
document.querySelectorAll('[data-video-padding]').forEach(element => {
element.style.paddingBottom = element.getAttribute('data-video-padding')
})
================================================
FILE: assets/scss/app-dart.scss
================================================
@use "sass:meta";
// Define template variables
@use "hugo:vars" as h; // note: modified for dart-sass
// Include default variable overrides
@import "common/variables-dart.scss"; // note: modified for dart-sass
@import "theme/variables.scss";
@import "common/icons.scss";
// Import custom utilities (must be before Bootstrap)
@import "common/utilities-custom.scss";
// Import Bootstrap configuration (mounted by core Bootstrap module)
@import "bootstrap-dart.scss"; // note: modified for dart-sass
// Import responsive utilities (requires Bootstrap variables to be defined)
@import "common/utilities-responsive.scss";
// Include dark mode overrides
@import "common/variables-dark.scss";
// Import Hinode theme styles
@import "components/abbr.scss";
@import "components/alert.scss";
@import "components/blockquote.scss";
@import "components/button.scss";
@import "components/card.scss";
@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";
@import "components/pagination.scss";
@import "components/persona.scss";
@import "components/popover.scss";
@import "components/sidebar.scss";
@import "components/syntax-dart.scss"; // note: modified for dart-sass
@import "components/table.scss";
@import "components/testimonial.scss";
@import "components/toast.scss";
@import "components/timeline.scss";
@import "components/toc.scss";
@import "components/tooltip.scss";
@import "components/video.scss";
@import "common/animation.scss";
@import "common/masonry.scss";
@import "common/scrollbar.scss";
@import "common/styles.scss";
@import "layouts/reboot.scss";
@import "layouts/type.scss";
@import "common/export.scss";
@import "helpers/colored-links.scss";
@import "helpers/display.scss";
// note: modified for dart-sass
@if h.$import-fonts {
@include meta.load-css(theme/fonts);
}
// Import theme placeholders
@import "theme/base.scss";
@import "theme/theme.scss";
// Import Bootstrap utilities API (mounted by core Bootstrap module)
@import "modules/bootstrap/utilities/api";
================================================
FILE: assets/scss/app.scss
================================================
// Define template variables
@import "hugo:vars";
// Include default variable overrides
@import "common/variables.scss";
@import "theme/variables.scss";
@import "common/icons.scss";
// Import custom utilities (must be before Bootstrap)
@import "common/utilities-custom.scss";
// Import Bootstrap configuration (mounted by core Bootstrap module)
@import "bootstrap.scss";
// Import responsive utilities (requires Bootstrap variables to be defined)
@import "common/utilities-responsive.scss";
// Include dark mode overrides
@import "common/variables-dark.scss";
// Import Hinode theme styles
@import "components/abbr.scss";
@import "components/alert.scss";
@import "components/blockquote.scss";
@import "components/button.scss";
@import "components/card.scss";
@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";
@import "components/pagination.scss";
@import "components/persona.scss";
@import "components/popover.scss";
@import "components/sidebar.scss";
@import "components/syntax.scss";
@import "components/table.scss";
@import "components/testimonial.scss";
@import "components/toast.scss";
@import "components/timeline.scss";
@import "components/toc.scss";
@import "components/tooltip.scss";
@import "components/video.scss";
@import "common/animation.scss";
@import "common/masonry.scss";
@import "common/scrollbar.scss";
@import "common/styles.scss";
@import "layouts/reboot.scss";
@import "layouts/type.scss";
@import "common/export.scss";
@import "helpers/colored-links.scss";
@import "helpers/display.scss";
{{ if (not (hasPrefix (lower site.Params.style.themeFontPath) "http")) }}
@import "theme/fonts.scss";
{{ end }}
// Import theme placeholders
@import "theme/base.scss";
@import "theme/theme.scss";
// Import Bootstrap utilities API (mounted by core Bootstrap module)
@import "modules/bootstrap/utilities/api";
================================================
FILE: assets/scss/common/_animation.scss
================================================
.rotate-5 {
transform: rotate(5deg);
}
.rotate-n5 {
transform: rotate(-5deg);
}
@media (prefers-reduced-motion: no-preference) {
.reveal {
position: relative;
opacity: 0;
animation-iteration-count: 1;
}
.reveal.active {
opacity: 1;
}
.active.fade-bottom {
animation: fade-bottom 1s ease-in;
}
.active.fade-bottom-5 {
animation: fade-bottom-5 1s ease-in;
}
.active.fade-bottom-n5 {
animation: fade-bottom-n5 1s ease-in;
}
.active.fade-left {
animation: fade-left 1s ease-in;
}
.active.fade-right {
animation: fade-right 1s ease-in;
}
@keyframes fade-bottom {
0% {
transform: translateY(50px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes fade-bottom-5 {
0% {
transform: translateY(50px) rotate(5deg);
opacity: 0;
}
100% {
transform: translateY(0) rotate(5deg);
opacity: 1;
}
}
@keyframes fade-bottom-n5 {
0% {
transform: translateY(50px) rotate(-5deg);
opacity: 0;
}
100% {
transform: translateY(0) rotate(-5deg);
opacity: 1;
}
}
@keyframes fade-left {
0% {
transform: translateX(-100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes fade-right {
0% {
transform: translateX(100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
}
================================================
FILE: assets/scss/common/_export.scss
================================================
// stylelint-disable selector-pseudo-class-no-unknown
// scss-docs-start export
:hinode-theme {
--accordion-icon-active-color: #{$accordion-icon-active-color};
--accordion-icon-active-color-dark: #{$gray-300};
--accordion-icon-color: #{$accordion-icon-color};
--accordion-icon-color-dark: #{$gray-600};
--btn-close-color: #{$btn-close-color};
--btn-toggle-color: #{$btn-toggle-color};
--btn-toggle-color-dark: #{$gray-600};
--carousel-control-color: #{$carousel-control-color};
--form-check-input-checked-color: #{$form-check-input-checked-color};
--form-check-input-indeterminate-color: #{$form-check-input-indeterminate-color};
--form-feedback-icon-invalid-color: #{$form-feedback-icon-invalid-color};
--form-feedback-icon-valid-color: #{$form-feedback-icon-valid-color};
--form-select-indicator-color: #{$form-select-indicator-color};
--form-select-indicator-color-dark: #{$form-select-indicator-color-dark};
--form-switch-checked-color: #{$form-switch-checked-color};
--form-switch-color: #{$form-switch-color};
--form-switch-color-dark: #{$form-switch-color-dark};
--form-switch-focus-color: #{$form-switch-focus-color};
--navbar-dark-color: #{$navbar-dark-color};
--navbar-light-icon-color: rgba($body-color, 0.75); // TODO: See https://github.com/twbs/bootstrap/pull/37720
}
// scss-docs-end export
// stylelint-enable selector-pseudo-class-no-unknown
================================================
FILE: assets/scss/common/_icons.scss
================================================
// scss-docs-start icons
$form-check-input-checked-bg-image: url("#{$base-url}icons/form-check-input-checked-bg-image.svg") !default;
$form-check-radio-checked-bg-image: url("#{$base-url}icons/form-check-radio-checked-bg-image.svg") !default;
$form-check-input-indeterminate-bg-image: url("#{$base-url}icons/form-check-input-indeterminate-bg-image.svg") !default;
$form-switch-bg-image: url("#{$base-url}icons/form-switch-bg-image.svg") !default;
$form-switch-bg-image-dark: url("#{$base-url}icons/form-switch-bg-image-dark.svg") !default;
$form-switch-focus-bg-image: url("#{$base-url}icons/form-switch-focus-bg-image.svg") !default;
$form-switch-checked-bg-image: url("#{$base-url}icons/form-switch-checked-bg-image.svg") !default;
$form-select-indicator: url("#{$base-url}icons/form-select-indicator.svg") !default;
$form-select-indicator-dark: url("#{$base-url}icons/form-select-indicator-dark.svg") !default;
$form-feedback-icon-valid: url("#{$base-url}icons/form-feedback-icon-valid.svg") !default;
$form-feedback-icon-invalid: url("#{$base-url}icons/form-feedback-icon-invalid.svg") !default;
$navbar-light-toggler-icon-bg: url("#{$base-url}icons/navbar-light-toggler-icon-bg.svg") !default;
$navbar-dark-toggler-icon-bg: url("#{$base-url}icons/navbar-dark-toggler-icon-bg.svg") !default;
$accordion-button-icon: url("#{$base-url}icons/accordion-button-icon.svg") !default;
$accordion-button-icon-dark: url("#{$base-url}icons/accordion-button-icon-dark.svg") !default;
$accordion-button-active-icon: url("#{$base-url}icons/accordion-button-active-icon.svg") !default;
$accordion-button-active-icon-dark: url("#{$base-url}icons/accordion-button-active-icon-dark.svg") !default;
$carousel-control-prev-icon-bg: url("#{$base-url}icons/carousel-control-prev-icon-bg.svg") !default;
$carousel-control-next-icon-bg: url("#{$base-url}icons/carousel-control-next-icon-bg.svg") !default;
$btn-close-bg: url("#{$base-url}icons/btn-close-bg.svg") !default;
$btn-toggle: url("#{$base-url}icons/btn-toggle.svg") !default;
$btn-toggle-dark: url("#{$base-url}icons/btn-toggle-dark.svg") !default;
// scss-docs-end icons
================================================
FILE: assets/scss/common/_masonry.scss
================================================
.masonry {
--masonry-padding: 4px;
}
.m-row {
display: flex;
flex-wrap: wrap;
padding: 0 var(--masonry-padding);
}
.m-col {
flex: 100%;
max-width: 100%;
padding: 0 var(--masonry-padding);
}
.m-col div {
margin-top: calc(2 * var(--masonry-padding));
border-radius: #{$theme-border-radius} if($enable-important-utilities, !important, null);
}
================================================
FILE: assets/scss/common/_scrollbar.scss
================================================
@mixin scrollbar(
$foreground-color: var(--bs-primary),
$background-color: var(--bs-tertiary-bg),
$size: 10px
) {
// For Safari and Chrome (to force appearance in Chrome)
&::-webkit-scrollbar {
width: $size;
height: $size;
}
&::-webkit-scrollbar-thumb {
border-radius: calc($size / 2);
background: $foreground-color;
}
&::-webkit-scrollbar-track {
border-radius: calc($size / 2);
background: $background-color;
}
// 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;
}
}
.scrollbar-horizontal
{
@include scrollbar;
overflow-x: scroll;
margin: auto;
}
================================================
FILE: assets/scss/common/_styles.scss
================================================
@if $enable-dark-mode {
[data-bs-theme-animate="true"] body {
transition: background-color 0.5s, color 0.5s;
}
}
//
// Remove underline from all links
//
a:link,
a:visited,
a:hover,
a:active {
text-decoration: none;
}
div.rounded, img.rounded {
--bs-border-radius: #{$theme-border-radius};
}
//
// Sticky-footer: body fills at least the full viewport; .main grows to fill
// remaining space, pushing the footer to the bottom without JS measurement.
//
body {
display: flex;
flex-direction: column;
min-height: 100dvh;
}
//
// Ensure main page is rendered to full viewport height
//
.main {
--navbar-height: #{$navbar-height};
--overlay-offset: #{$overlay-offset};
--section-height: 88vh;
--max-section-height: 1024px;
flex: 1;
}
// Fixed navbar is out of flow: offset .main so content starts below the navbar
.navbar-fixed .main {
margin-top: var(--navbar-offset);
}
// footerBelowFold: push footer just past the viewport edge.
// Fixed (--navbar-offset = navbar height): margin-top = --navbar-offset, so subtract once.
// Non-fixed (--navbar-offset = 0): navbar is in flow; subtract --navbar-height (actual height,
// always set from site.Params.navigation.offset regardless of the fixed setting).
.navbar-fixed.footer-below-fold .main {
min-height: calc(100vh - var(--navbar-offset));
}
.footer-below-fold:not(.navbar-fixed) .main {
min-height: calc(100vh - var(--navbar-height));
}
main:has(section:first-of-type.section-cover), main:has(section:first-of-type.background-container) {
margin-top: var(--overlay-offset);
}
.overlay-spacer {
padding-top: var(--navbar-height);
}
.tickmark li::marker {
content: "✓ ";
}
.anchor
{
color: transparent;
}
.heading:hover .anchor
{
transition: 0.25s ease-in-out;
color: $primary;
}
:root {
--nav-height: 90px;
}
.section-cover {
min-height: calc(var(--section-height) - var(--overlay-offset));
}
.hero-title {
width: 100%;
}
@include media-breakpoint-up(xxl) {
.section-cover {
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) {
.section-cover {
min-height: calc(min(calc(var(--section-height) - var(--overlay-offset)), var(--max-section-height)));
}
}
/* stylelint-enable media-feature-range-notation */
.width-100 {
width: 100%;
}
================================================
FILE: assets/scss/common/_utilities-custom.scss
================================================
// Custom Bootstrap utilities extensions
// This file must be imported BEFORE bootstrap.scss to ensure utilities are processed
// Initialize utilities map if not already defined
$utilities: () !default;
// Add custom masonry column utilities
$utilities: map-merge(
$utilities,
(
"m-col": (
property: max-width,
responsive: true,
class: m-col,
values: (
1: 100%,
2: 50%,
3: 33.3%,
4: 25%,
5: 20%,
)
)
)
);
// Add custom margin utilities (mx auto/0)
$utilities: map-merge(
$utilities,
(
"cursor": (
property: margin-left margin-right,
class: mx,
responsive: true,
values: auto 0,
)
)
);
// Add wide padding utilities (using hardcoded rem values since $spacer not yet available)
$utilities: map-merge(
$utilities,
(
"padding-start-wide": (
property: padding-left,
responsive: true,
class: psw,
values: (
0: 0,
1: 1.5rem,
2: 3rem,
3: 6rem,
4: 9rem,
5: 12rem,
)
),
"padding-top-wide": (
property: padding-top,
responsive: true,
class: ptw,
values: (
0: 0,
1: 1.5rem,
2: 3rem,
3: 6rem,
4: 9rem,
5: 12rem,
)
),
"width": (
property: width,
responsive: true,
values: (
auto: auto
)
)
)
);
================================================
FILE: assets/scss/common/_utilities-responsive.scss
================================================
// Responsive utilities that require Bootstrap variables to be defined
// Must be imported AFTER bootstrap.scss
// Make the font-size class responsive (requires $font-sizes from Bootstrap)
$utilities: map-merge(
$utilities,
(
"font-size": (
responsive: true,
rfs: true,
property: font-size,
class: fs,
values: $font-sizes
),
)
);
================================================
FILE: assets/scss/common/_variables-dark.scss
================================================
@if $enable-dark-mode {
@include color-mode(dark) {
--bs-primary: #{$primary-text-emphasis-dark};
--bs-secondary: #{$secondary-text-emphasis-dark};
--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);
}
.accordion-button {
background-color: var(--bg-primary-subtle);
}
.dropdown-item {
--bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
}
.form-check-input:checked {
background-color: var(--bs-primary);
border-color: var(--bs-primary); }
.form-check-input[type="checkbox"]:indeterminate {
background-color: var(--bs-primary);
border-color: var(--bs-primary);
}
.form-range::-webkit-slider-thumb {
background-color: var(--bs-primary);
}
.form-range::-moz-range-thumb {
background-color: var(--bs-primary);
}
.alert-primary {
--bs-alert-bg: var(--bg-primary-subtle);
}
.btn-outline-primary {
--bs-btn-color: var(--bs-primary);
--bs-btn-border-color: var(--bs-primary);
--bs-btn-hover-bg: var(--bs-primary);
--bs-btn-hover-border-color: var(--bs-primary);
--bs-btn-active-bg: var(--bs-primary);
--bs-btn-active-border-color: var(--bs-primary);
--bs-btn-disabled-color: var(--bs-primary);
--bs-btn-disabled-border-color: var(--bs-primary);
}
.btn-outline-secondary {
--bs-btn-color: var(--bs-secondary);
--bs-btn-border-color: var(--bs-secondary);
--bs-btn-hover-bg: var(--bs-secondary);
--bs-btn-hover-border-color: var(--bs-secondary);
--bs-btn-active-bg: var(--bs-secondary);
--bs-btn-active-border-color: var(--bs-secondary);
--bs-btn-disabled-color: var(--bs-secondary);
--bs-btn-disabled-border-color: var(--bs-secondary);
}
.link-primary {
color: var(--bs-primary) if($enable-important-utilities, !important, null);
text-decoration-color: var(--bs-primary) if($enable-important-utilities, !important, null);
&:hover,
&:focus {
color: var(--bs-primary-dark) if($enable-important-utilities, !important, null);
text-decoration-color: var(--bs-primary-dark) if($enable-important-utilities, !important, null);
}
}
.pagination {
--bs-pagination-color: var(--bs-body-bg);
--bs-pagination-bg: var(--bs-primary);
}
.progress,
.progress-stacked {
--bs-progress-bar-bg: var(--bs-primary);
}
.list-group {
--bs-list-group-active-bg: var(--bs-primary);
--bs-list-group-active-border-color: var(--bs-primary);
}
.clipboard-button:hover {
color: var(--bs-primary); }
.clipboard-button:hover > svg {
fill: var(--bs-primary);
}
.toggler-icon {
background-color: var(--bs-primary);
}
.heading:hover .anchor {
color: var(--bs-primary);
}
}
}
================================================
FILE: assets/scss/common/_variables-dart.scss
================================================
// Bootstrap variables overrides for theme
$enable-negative-margins: true;
$enable-important-utilities: true !default;
// Remove the border from the focused navigation toggler
$navbar-toggler-focus-width: 0 !default;
$base-url: h.$base-url;
$font-family-sans-serif: h.$theme-font, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-size-base: h.$font-size-base !default;
$headings-font-weight: 600 !default;
$font-weight-lighter: lighter !default;
$font-weight-light: 200 !default;
$font-weight-normal: 300 !default;
$font-weight-bold: 600 !default;
$font-weight-bolder: bolder !default;
strong {
font-weight: 600 if($enable-important-utilities, !important, null);
}
$theme-border-radius: 0.375rem;
$navbar-height: h.$navbar-height;
$navbar-offset: h.$navbar-offset;
$navbar-offset-xs: h.$navbar-offset-xs;
$navbar-size: h.$navbar-size;
$overlay-offset: h.$overlay-offset;
$primary: h.$primary;
$secondary: h.$secondary;
$success: h.$success;
$info: h.$info;
$warning: h.$warning;
$danger: h.$danger;
$light: h.$light;
$dark: h.$dark;
$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;
$carousel-dark-caption-color: #fff !default;
$carousel-dark-control-icon-filter: invert(0) grayscale(100) !default;
$primary-text-emphasis-dark: mix(white, h.$primary, h.$dark-mode-tint) !default;
$secondary-text-emphasis-dark: mix(white, h.$secondary, h.$dark-mode-tint) !default;
$link-color-dark: mix(white, h.$primary, h.$dark-mode-tint) !default;
$primary-bg-subtle-dark: mix(black, h.$primary, h.$dark-mode-shade) !default;
$primary-border-subtle-dark: mix(black, h.$primary, calc(h.$dark-mode-shade / 2)) !default;
$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;
// Padding settings
$padding-x: h.$padding-x;
$padding-y: h.$padding-y;
================================================
FILE: assets/scss/common/_variables.scss
================================================
// Bootstrap variables overrides for theme
$enable-negative-margins: true;
$enable-important-utilities: true !default;
// Remove the border from the focused navigation toggler
$navbar-toggler-focus-width: 0 !default;
$base-url: $base-url;
// scss-docs-start font
$font-family-sans-serif: $theme-font, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-size-base: $font-size-base !default;
$headings-font-weight: 600 !default;
$font-weight-lighter: lighter !default;
$font-weight-light: 200 !default;
$font-weight-normal: 300 !default;
$font-weight-bold: 600 !default;
$font-weight-bolder: bolder !default;
strong {
font-weight: 600 if($enable-important-utilities, !important, null);
}
// scss-docs-end font
$theme-border-radius: 0.375rem;
$tooltip-border-radius: $theme-border-radius;
$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);
$carousel-dark-indicator-active-bg: #fff !default;
$carousel-dark-caption-color: #fff !default;
$carousel-dark-control-icon-filter: invert(0) grayscale(100) !default;
// scss-docs-start color-mode
$primary-text-emphasis-dark: mix(white, $primary, $dark-mode-tint) !default;
$secondary-text-emphasis-dark: mix(white, $secondary, $dark-mode-tint) !default;
$link-color-dark: mix(white, $primary, $dark-mode-tint) !default;
$primary-bg-subtle-dark: mix(black, $primary, $dark-mode-shade) !default;
$primary-border-subtle-dark: mix(black, $primary, $dark-mode-shade / 2) !default;
// scss-docs-end color-mode
// scss-docs-start horizontal-nav
$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;
// Padding settings
$padding-x: $padding-x;
$padding-y: $padding-y;
================================================
FILE: assets/scss/components/_abbr.scss
================================================
@media (hover: none) {
abbr[title] {
position: relative;
text-decoration: underline dotted;
}
abbr[title]:hover::after,
abbr[title]:focus::after {
content: attr(title);
position: absolute;
left: 0;
bottom: -30px;
width: auto;
white-space: nowrap;
background-color: var(--bs-body-bg);
color: var(--bs-tooltip-color);
border-radius: 3px;
box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.4);
font-size: 14px;
padding: 3px 5px;
}
}
================================================
FILE: assets/scss/components/_alert.scss
================================================
.alert code {
color: inherit;
}
/* stylelint-disable declaration-block-no-redundant-longhand-properties */
.alert a {
color: inherit;
&:link,
&:visited,
&:hover,
&:active {
text-decoration-line: underline;
text-decoration-style: dotted;
text-decoration-color: var(--bs-body);
}
}
/* stylelint-enable declaration-block-no-redundant-longhand-properties */
================================================
FILE: assets/scss/components/_blockquote.scss
================================================
.blockquote {
border-left: 0.3rem solid;
border-color: $secondary;
padding: 1rem 1.5rem;
}
.blockquote-alert {
--bs-blockquote-alert-color: #{$secondary};
border-left: 0.3rem solid;
border-color: var(--bs-blockquote-alert-color);
padding: .5rem 1.5rem;
}
.blockquote-alert > p:nth-of-type(2) {
margin-bottom: 0;
}
.blockquote-alert-heading {
font-weight: bold;
color: var(--bs-blockquote-alert-color);
}
.blockquote-alert-caution {
--bs-blockquote-alert-color: var(--#{$prefix}danger);
}
.blockquote-alert-important {
--bs-blockquote-alert-color: var(--#{$prefix}primary);
}
.blockquote-alert-note {
--bs-blockquote-alert-color: var(--#{$prefix}info);
}
.blockquote-alert-tip {
--bs-blockquote-alert-color: var(--#{$prefix}success);
}
.blockquote-alert-warning {
--bs-blockquote-alert-color: var(--#{$prefix}warning);
}
.blockquote-alert a.btn-link {
--bs-link-color: var(--bs-blockquote-alert-color);
--bs-link-hover-color: color-mix(in srgb, var(--bs-link-color), black 20%);
color: var(--bs-link-color) !important;
&:hover,
&:focus {
color: var(--bs-link-hover-color) !important;
}
}
================================================
FILE: assets/scss/components/_button.scss
================================================
/* Set hover color for primary button to white (overrides color contrast defined in mixin) */
.btn-outline-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
color: #fff if($enable-important-utilities, !important, null);
}
.btn-social {
background-color: transparent;
--bs-btn-bg: transparent;
--bs-btn-border-width: none;
--bs-btn-color: var(--bs-secondary);
--bs-btn-border-color: none;
--bs-btn-hover-bg: none;
--bs-btn-hover-border-color: none;
--bs-btn-active-bg: none;
--bs-btn-active-border-color: none;
}
.btn-social:hover,
.btn-social:focus,
.btn-social:active,
.btn-social.active,
.open > .dropdown-toggle.btn-primary {
background-color: transparent;
color: var(--bs-primary) if($enable-important-utilities, !important, null);
}
a.btn {
margin-top: $spacer * .25;
margin-bottom: $spacer * .25;
}
.btn-close {
background-color: transparent if($enable-important-utilities, !important, null);
background-image: var(--#{$prefix}btn-close-bg) if($enable-important-utilities, !important, null);
background-position: center if($enable-important-utilities, !important, null);
background-repeat: no-repeat if($enable-important-utilities, !important, null);
background-size: $btn-close-width if($enable-important-utilities, !important, null);
}
.btn-link {
--bs-btn-padding-x: 0;
--bs-btn-padding-y: 0;
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};
}
================================================
FILE: assets/scss/components/_card.scss
================================================
// add zoom animation with opacity change on card img hover
// source: https://stackoverflow.com/a/43816376
.card-img-bg {
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;
}
.card .card-img-wrap:has(.card-img-top) {
border-top-left-radius: var(--#{$prefix}card-inner-border-radius);
border-top-right-radius: var(--#{$prefix}card-inner-border-radius);
}
.card .card-img-wrap:has(.card-img-bottom) {
border-bottom-right-radius: var(--#{$prefix}card-inner-border-radius);
border-bottom-left-radius: var(--#{$prefix}card-inner-border-radius);
}
.card-zoom {
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%;
}
.card-icon {
color: $secondary;
}
.card-zoom::after .card-img-wrap img {
content: "";
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.3);
opacity: 0;
transition: opacity 0.25s;
}
.card-zoom:hover .card-img-wrap img {
transform: scale(1.1);
opacity: 0.5;
}
.card-zoom:hover::after .card-img-wrap img {
opacity: 1;
}
.card-emphasize {
transition: 0.3s transform cubic-bezier(0.155, 1.105, 0.295, 1.12), 0.3s box-shadow, 0.3s -webkit-transform cubic-bezier(0.155, 1.105, 0.295, 1.12);
cursor: pointer;
}
.card-emphasize:hover {
transform: scale(1.01);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
}
.card-minimal {
border: none;
font-weight: bold;
&:hover,
&:focus {
text-decoration: underline;
}
}
// stylelint-disable annotation-no-unknown
.card-body-link {
color: $body-color if($enable-important-utilities, !important, null);
}
.card-body-margin {
margin-bottom: $spacer * 1.5; // equals mb-4
}
@if $enable-dark-mode {
@include color-mode(dark) {
.card-body-link {
color: $gray-500 if($enable-important-utilities, !important, null);
}
}
}
.card-img-overlay .card-body-link {
margin-top: auto;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.card-zoom .card-body-link {
&:hover,
&:focus {
color: shade-color($primary, $link-shade-percentage) if($enable-important-utilities, !important, null);
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
.card-zoom .card-body-link {
&:hover,
&:focus {
color: $primary-bg-subtle-dark if($enable-important-utilities, !important, null);
}
}
}
}
// stylelint-enable annotation-no-unknown
// make tag-link and card-button clickable on top of the stretched-link.
.card .tag-link, .card .card-button {
z-index: 2;
position: relative;
}
.card-button-link {
text-decoration: underline if($enable-important-utilities, !important, null);
}
// support horizontally scrollable card groups
.card-container-wrapper {
position: relative;
}
div.card-container-wrapper::after {
content: "";
position: absolute;
inset: 0;
height: calc(100% - 2rem);
background: linear-gradient(
90deg,
var(--bs-body-bg) 0%,
transparent 1.5rem,
transparent calc(100% - 1.5rem),
var(--bs-body-bg) 100%
);
pointer-events: none;
}
.card-container {
padding-left: 1.5rem;
padding-right: 1.5rem;
gap: 1.5rem;
margin-bottom: 2rem;
scroll-snap-type: x proximity;
}
.card-block-1 {
width: 80%;
scroll-snap-align: center;
}
.card-block-2 {
width: 40%;
scroll-snap-align: center;
}
.card-block-3 {
width: 27%;
scroll-snap-align: center;
}
.card-block-4 {
width: 20%;
scroll-snap-align: center;
}
.card-block-5 {
width: 16%;
scroll-snap-align: center;
}
// Hover link icon: appears on card hover/focus to signal clickability
.card-link-icon {
display: inline-flex;
align-items: center;
opacity: 0;
transform: translateX(-4px);
transition: opacity 0.2s ease, transform 0.2s ease;
vertical-align: middle;
font-size: 0.75em;
margin-left: 0.25rem;
}
.card:hover .card-link-icon,
.card:focus-within .card-link-icon {
opacity: 1;
transform: translateX(0);
}
================================================
FILE: assets/scss/components/_carousel.scss
================================================
.carousel-inner {
border-radius: #{$theme-border-radius};
}
.gradient {
width: 100%;
height: 100%;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.3);
}
================================================
FILE: assets/scss/components/_clipboard.scss
================================================
// Adapted from https://simplernerd.com/hugo-add-copy-to-clipboard-button/
.clipboard-button {
position: absolute;
right: 0;
padding: 2px 7px 5px;
margin: 5px;
color: $secondary;
background-color: transparent;
border-style: none;
font-size: 0.8em;
z-index: 1;
opacity: 0;
transition: 0.1s;
}
.clipboard-button > svg {
fill: $secondary;
}
.clipboard-button:hover {
cursor: pointer;
color: $primary;
}
.clipboard-button:hover > svg {
fill: $primary;
}
.clipboard-button:focus {
outline: 0;
}
.highlight {
position: relative;
}
.highlight:hover > .clipboard-button {
opacity: 1;
transition: 0.2s;
}
================================================
FILE: assets/scss/components/_command.scss
================================================
/* Adapted from PrismJS 1.29.0
https://prismjs.com/download.html#themes=prism&plugins=command-line */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
.command-line-prompt {
border-right: 1px solid #999;
display: block;
float: left;
font-size: 100%;
letter-spacing: -1px;
margin-right: 1em;
pointer-events: none;
text-align: right;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.command-line-prompt > span::before {
opacity: 0.7;
content: " ";
display: block;
padding-right: 0.8em;
}
.command-line-prompt > span[data-prompt]::before {
content: attr(data-prompt);
}
.command-line-prompt > span[data-continuation-prompt]::before {
content: attr(data-continuation-prompt);
}
.command-line span.token.output {
/* Make shell output lines a bit lighter to distinguish them from shell commands */
opacity: 0.7;
}
================================================
FILE: assets/scss/components/_docs.scss
================================================
.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};
}
.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};
}
================================================
FILE: assets/scss/components/_feature.scss
================================================
.feature {
margin-top: calc(0.3 * var(--navbar-offset));
}
================================================
FILE: assets/scss/components/_footer.scss
================================================
.footer {
// background-color: $gray-800 if($enable-important-utilities, !important, null);
color: var(--bs-secondary) if($enable-important-utilities, !important, null);
}
.link-bg-footer {
color: var(--bs-secondary) if($enable-important-utilities, !important, null);
&:hover,
&:focus {
color: var(--bs-tertiary-color) if($enable-important-utilities, !important, null);
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
.footer {
color: $gray-500 if($enable-important-utilities, !important, null);
}
.link-bg-footer {
color: $gray-500 if($enable-important-utilities, !important, null);
&:hover,
&:focus {
color: $gray-400 if($enable-important-utilities, !important, null);
}
}
}
}
================================================
FILE: assets/scss/components/_img.scss
================================================
.img-wrap {
overflow: hidden;
position: relative;
}
.img-wrap img {
height: 100%;
width: 100%;
object-fit: cover;
}
.card-img-h100 {
width: auto;
height: 100%;
object-fit: cover;
}
.mirrorred {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.background-img {
--overlay-offset: #{$overlay-offset};
height: calc(100vh - var(--overlay-offset));
width: 100vw;
object-fit: cover;
}
.figure-caption {
margin-left: #{$theme-border-radius};
}
================================================
FILE: assets/scss/components/_kbd.scss
================================================
// scss-docs-start kbd
kbd {
border-radius: #{$theme-border-radius};
}
// scss-docs-end kbd
================================================
FILE: assets/scss/components/_nav.scss
================================================
.nav-tabs {
border: none !important;
}
.nav-callout, .tab-content {
--#{$prefix}nav-callout-bg: var(--#{$prefix}body-bg);
--#{$prefix}nav-callout-active-bg: var(--bs-primary-bg-subtle);
--#{$prefix}nav-callout-gap: #{$nav-underline-gap};
column-gap: var(--#{$prefix}nav-callout-gap) !important;
}
.nav-callout + .tab-content {
background-color: var(--#{$prefix}nav-callout-bg);
padding: 2 * $spacer;
margin-top: 0 !important;
}
.nav-callout .nav-link {
display: flex;
text-align: start;
vertical-align: text-top;
border-radius: 0;
padding: 0 0 (4 * $spacer);
border-bottom: none;
position: relative;
}
.nav-callout .nav-link.active {
background-image: linear-gradient(to top right, var(--#{$prefix}nav-callout-bg) 50%, transparent 0);
background-size: 50% (3 * $spacer);
background-repeat: no-repeat;
background-position: 50% bottom;
font-weight: 600;
color: var(--bs-nav-underline-link-active-color);
// Diagonal border line
&::before {
content: "";
position: absolute;
bottom: 0;
left: 25%;
width: 50%;
height: (3 * $spacer);
background: linear-gradient(
to top right,
transparent calc(50% - 0.5px),
var(--#{$prefix}border-color) calc(50% - 0.5px),
var(--#{$prefix}border-color) calc(50% + 0.5px),
transparent calc(50% + 0.5px)
);
pointer-events: none;
}
// Left border only
&::after {
content: "";
position: absolute;
bottom: 0;
left: 25%;
width: 50%;
height: (3 * $spacer);
border-left: 1px solid var(--#{$prefix}border-color);
pointer-events: none;
}
}
.nav-callout .accordion-button {
background-color: var(--#{$prefix}nav-callout-bg) !important;
border: solid;
border-color: var(--#{$prefix}border-color);
border-radius: var(--#{$prefix}accordion-inner-border-radius) !important;
margin-bottom: 0;
&:focus {
border-bottom: none !important;
box-shadow: none;
}
&:not(.collapsed) {
box-shadow: none;
}
}
.nav-callout .accordion-item {
margin-top: 2 * $spacer;
margin-bottom: 2 * $spacer;
border: none;
}
.nav-callout .accordion-button[aria-expanded="false"] {
border-bottom: solid !important;
border-color: var(--#{$prefix}border-color) !important;
border-radius: var(--#{$prefix}accordion-inner-border-radius);
}
.nav-callout .accordion-button[aria-expanded="true"] {
border-color: var(--#{$prefix}border-color) !important;
border-bottom: none !important;
border-radius: var(--#{$prefix}accordion-inner-border-radius) var(--#{$prefix}accordion-inner-border-radius) 0 0 !important;
padding-bottom: 3 * $spacer;
background-image: linear-gradient(to top right, var(--#{$prefix}nav-callout-active-bg) 50%, transparent 0);
background-size: 10% (2.5 * $spacer);
background-repeat: no-repeat;
background-position: 10% bottom;
}
.nav-callout .accordion-collapse {
background-color: var(--#{$prefix}nav-callout-active-bg) !important;
border-radius: 0 0 var(--#{$prefix}accordion-inner-border-radius) var(--#{$prefix}accordion-inner-border-radius);
border-top: none !important;
border-left: solid;
border-right: solid;
border-bottom: solid;
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 .accordion-button[aria-expanded="true"] {
background-image: linear-gradient(to top right, shade-color($primary, 70%) 50%, transparent 0);
}
.nav-callout .accordion-collapse {
background-color: shade-color($primary, 70%) !important;
}
}
}
================================================
FILE: assets/scss/components/_navbar.scss
================================================
// stylelint-disable annotation-no-unknown
// adapted from https://www.codeply.com/p/UsTEwDkzNp#
.checkbox {
opacity: 0;
position: absolute;
}
.mode-switch {
--#{$prefix}mode-switch-width: 3em;
}
.mode-switch .label {
border-color: var(--#{$prefix}border-color);
border-style: solid;
border-width: 1px;
border-radius: var(--#{$prefix}mode-switch-width);
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px;
position: relative;
height: calc(1px + var(--#{$prefix}mode-switch-width) / 2);
width: var(--#{$prefix}mode-switch-width);
transform: scale(0.9);
}
.notransition {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
}
.mode-switch .label .ball {
background-color: var(--#{$prefix}border-color);
border-radius: 50%;
position: absolute;
top: 2px;
left: 2px;
height: calc((var(--#{$prefix}mode-switch-width) / 2) - 5px);
width: calc((var(--#{$prefix}mode-switch-width) / 2) - 5px);
transition: transform 0.2s linear;
}
.mode-switch .checkbox:checked + .label .ball {
transform: translateX(calc((var(--#{$prefix}mode-switch-width) / 2) - 1px));
}
@if $enable-dark-mode {
[data-bs-theme="light"] .mode-switch .ball {
transform: translateX(calc((var(--#{$prefix}mode-switch-width) / 2) - 1px));
}
}
.mode-switch .fa-moon {
color: $yellow;
transform: scale(0.8);
}
.mode-switch .fa-sun {
color: var(--#{$prefix}bs-body-color);
transform: scale(0.8);
}
.mode-toggle > input {
z-index: 1;
cursor: pointer;
height: 25px;
width: 25px;
}
.mode-toggle > label {
z-index: 0;
cursor: pointer;
}
.mode-toggle .label svg {
height: 1em;
width: 1.25em;
}
// Source: https://jsfiddle.net/njhgr40m/
@if $enable-dark-mode {
[data-bs-theme-animate="true"] .navbar {
transition: 0.5s ease-in-out;
}
}
.navbar {
--bs-navbar-expanded-color: var(--bs-body-bg);
--bs-navbar-toggler-color: var(--bs-navbar-hover-color);
background-color: transparent;
@each $state, $val in $theme-colors {
--bs-navbar-color-#{$state}: #{$val};
}
}
.navbar[data-transparent="true"] {
backdrop-filter: none;
transition: all 0.3s ease;
&.navbar-scrolled {
backdrop-filter: blur(10px);
}
}
.nav-active, .navbar-expanded {
background-color: var(--bs-navbar-expanded-color);
border-bottom: 1px solid var(--bs-secondary-bg);
}
.nav-link {
margin: 0 .15rem;
display: inline-flex;
}
.navbar-title, .navbar-title-center, .navbar-title-start {
display: inline-block;
white-space: normal;
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;
--bs-navbar-disabled-color: white !important;
--bs-navbar-active-color: white !important;
--bs-navbar-toggler-color: white;
.navbar-title, .navbar-brand, .mode-switch {
--#{$prefix}border-color: white;
color: white !important;
}
.mode-switch .fa-moon {
color: $white;
}
}
.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:not(.show, .collapsing) .nav-item:first-of-type {
// double padding between brand logo / search bar and first nav item
// only apply when navbar is fully expanded (not toggled to show)
padding-left: var(--bs-navbar-nav-link-padding-x);
}
// Remove padding when navbar is toggled open on small devices
.navbar-collapse.show .nav-item:first-of-type {
padding-left: 0;
}
.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);
}
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
outline: none if($enable-important-utilities, !important, null);
box-shadow: none if($enable-important-utilities, !important, null);
border: 0 if($enable-important-utilities, !important, null);
}
.fw-30 {
width: 30px !important;
}
/* Lines of the Toggler */
.toggler-icon {
width: 30px;
height: 3px;
display: block;
transition: all 0.2s;
}
/* Adds Space between the lines */
.middle-bar {
margin: 5px auto;
}
/* State when navbar is opened (START) */
.navbar-toggler .top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
.navbar-toggler .middle-bar {
opacity: 0;
filter: alpha(opacity=0);
}
.navbar-toggler .bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
/* State when navbar is opened (END) */
/* State when navbar is collapsed (START) */
.navbar-toggler.collapsed .top-bar {
transform: rotate(0);
}
.navbar-toggler.collapsed .middle-bar {
opacity: 1;
filter: alpha(opacity=100);
}
.navbar-toggler.collapsed .bottom-bar {
transform: rotate(0);
}
/* State when navbar is collapsed (END) */
/* Color of Toggler when collapsed */
.navbar-toggler.collapsed .toggler-icon {
background-color: var(--bs-navbar-toggler-color);
}
.emphasis {
background-color: var(--bs-navbar-toggler-color);
}
@include color-mode(dark) {
.emphasis {
background-color: $white if($enable-important-utilities, !important, null);
}
}
// stylelint-enable annotation-no-unknown
.navbar .dropdown-divider-bg {
color: var(--#{$prefix}navbar-color);
}
:root {
--dropdown-horizontal-bg: var(--#{$prefix}light);
--navbar-offset: #{$navbar-offset-xs};
}
.navbar-container {
min-height: calc(2rem + 10px);
width: 100% !important;
}
@include media-breakpoint-up(#{$navbar-size}) {
:root {
--navbar-offset: #{$navbar-offset};
}
.navbar-container {
width: auto !important;
}
.navbar-title {
text-align: initial !important;
padding: 0;
}
.navbar-brand {
margin-right: var(--bs-navbar-brand-margin-end);
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
--dropdown-horizontal-bg: var(--#{$prefix}tertiary-bg);
}
}
.dropdown-horizontal {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
@include media-breakpoint-up($next) {
&#{$infix} {
position: static !important;
}
&#{$infix} > .dropdown-menu {
opacity: 0;
display: block;
visibility: hidden;
background-color: var(--dropdown-horizontal-bg) if($enable-important-utilities, !important, null);
width: 100%;
height: auto;
text-align: center;
border-radius: 0;
border: 0;
margin-top: $dropdown-horizontal-margin-top;
padding-top: $dropdown-horizontal-padding-y;
padding-bottom: $dropdown-horizontal-padding-y;
box-shadow: 0.125rem 0.25rem rgba(0, 0, 0, .075);
@include transition($dropdown-transition);
}
&#{$infix} > .dropdown-menu.show {
visibility: visible;
opacity: 1;
}
&#{$infix} > .dropdown-menu > li {
display: inline-block;
padding-left: $spacer;
padding-right: $spacer;
}
&#{$infix} > .dropdown-menu > li > a {
padding-left: .25 * $spacer;
padding-right: .25 * $spacer;
&.active,
&:hover,
&:focus {
color: var(--bs-body-color);
border-bottom: solid 1px var(--bs-navbar-hover-color);
margin-bottom: -1px;
background-color: transparent;
}
}
&#{$infix} > .nav-link.show {
background-color: var(--dropdown-horizontal-bg) if($enable-important-utilities, !important, null);
}
}
}
}
.navbar-overlay {
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;
}
body.navbar-open {
overflow: hidden;
position: fixed;
width: 100%;
}
================================================
FILE: assets/scss/components/_pagination.scss
================================================
.pagination {
--bs-pagination-bg: var(--bs-primary-bg-subtle);
--bs-pagination-color: var(--bs-body-color);
--bs-pagination-border-color: none;
--bs-pagination-hover-color: var(--bs-pagination-active-color);
--bs-pagination-hover-bg: var(--bs-pagination-active-bg);
--bs-pagination-hover-border-color: none;
.page-item {
margin: 0.4rem;
}
.page-item:first-of-type {
margin-left: 0;
}
}
================================================
FILE: assets/scss/components/_persona.scss
================================================
.persona {
min-height: 320px !important
}
================================================
FILE: assets/scss/components/_popover.scss
================================================
.popover-header {
margin-top: 0;
}
================================================
FILE: assets/scss/components/_sidebar.scss
================================================
// scss-docs-start sidebar
.sidebar {
top: var(--navbar-offset);
}
.sidebar-overflow {
top: calc(var(--navbar-offset) + 1rem);
max-height: calc(100vh - var(--navbar-offset));
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;
display: block;
padding: 0.1875rem 0.5rem !important;
&.active {
color: $primary;
}
&:hover,
&:focus {
color: $primary;
background-color: tint-color($primary, 90%);
}
}
.sidebar-item-group {
--#{$prefix}link-opacity: 0.65;
border-radius: #{$theme-border-radius};
&:hover,
&:focus {
color: $primary;
background-color: tint-color($primary, 90%);
}
> div > a {
display: block;
width: 100%;
color: rgba(var(--#{$prefix}body-color-rgb), var(--#{$prefix}link-opacity, 1));
text-decoration: none;
cursor: pointer;
&:hover,
&:focus {
color: $primary;
}
}
}
.sidebar-item-group > div {
padding: 0.1875rem 0 0.1875rem 0.5rem !important;
}
.btn-toggle-group {
padding: 0.25rem 0.5rem;
font-weight: 600;
color: rgba(0, 0, 0, 0.65);
background-color: transparent;
&:hover,
&:focus {
background-color: transparent;
}
&::before {
width: 1.25em;
line-height: 0;
content: $btn-toggle;
transition: transform 0.35s ease;
transform-origin: 0.5em 50%;
}
}
.btn-toggle-group[aria-expanded="true"] {
&::before {
transform: rotate(90deg);
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
.sidebar-item {
--#{$prefix}link-opacity: 0.65;
color: rgba(var(--#{$prefix}body-color-rgb), var(--#{$prefix}link-opacity, 1));
&.active {
color: $primary-text-emphasis-dark !important;
}
&: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: $primary-text-emphasis-dark !important;
background-color: transparent;
box-shadow: inset 0 0 0 1px $primary-bg-subtle-dark;
}
> div > a {
&:hover,
&:focus {
color: $primary-text-emphasis-dark !important;
}
}
}
.btn-toggle-group {
color: var(--bs-body-color);
&:hover,
&:focus {
background-color: transparent;
}
&::before {
content: $btn-toggle-dark;
}
}
.btn-toggle-group[aria-expanded="true"] {
color: var(--bs-secondary-color);
}
}
}
// Collapsible sidebar
.sidebar-no-transition,
.sidebar-no-transition * {
transition: none !important;
}
html.sidebar-pre-collapsed .sidebar-collapsible .sidebar-item-label {
max-width: 0 !important;
opacity: 0 !important;
margin-inline-start: 0 !important;
}
.sidebar-toggle-btn {
color: rgba(0, 0, 0, 0.65);
&:hover {
color: $primary;
}
.sidebar-icon-toggle {
transition: transform 0.4s ease;
}
}
.sidebar-item-label {
display: inline-block;
max-width: 200px;
overflow: hidden;
white-space: nowrap;
vertical-align: middle;
transition: max-width 0.2s ease, opacity 0.15s ease, margin-inline-start 0.2s ease;
}
.sidebar-collapsed {
.sidebar-item-label {
max-width: 0;
opacity: 0;
margin-inline-start: 0 !important;
}
.sidebar-toggle-btn .sidebar-icon-toggle {
transform: rotate(180deg);
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
.sidebar-toggle-btn {
color: var(--bs-body-color);
&:hover {
color: $primary-text-emphasis-dark;
}
}
}
}
// Secondary group row: stack vertically (button above link) when sidebar is icon-only
.sidebar-collapsed .sidebar-secondary-row,
html.sidebar-pre-collapsed .sidebar-secondary-row {
flex-direction: column-reverse;
align-items: center;
}
// Secondary group — icon rotates down (180°) when collapsed, up (0°) when expanded
.sidebar-secondary-icon {
transition: transform 0.2s ease;
transform: rotate(180deg);
}
.sidebar-secondary-toggle[aria-expanded="true"] .sidebar-secondary-icon {
transform: rotate(0deg);
}
// Secondary group toggle button
.sidebar-secondary-toggle {
color: rgba(0, 0, 0, 0.65);
padding: 0.1875rem 0.5rem;
border-radius: #{$theme-border-radius};
&:hover,
&:focus {
color: $primary;
background-color: tint-color($primary, 90%);
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
.sidebar-secondary-toggle {
color: rgba(var(--#{$prefix}body-color-rgb), 0.65);
&:hover,
&:focus {
color: $primary-text-emphasis-dark;
background-color: transparent;
box-shadow: inset 0 0 0 1px $primary-bg-subtle-dark;
}
}
}
}
// Flex column sidebar so .sidebar-spacer pushes the secondary group to the bottom
@include media-breakpoint-up(md) {
.sidebar-has-spacer {
display: flex;
flex-direction: column;
min-height: 100%;
> ul.list-unstyled {
flex: 1;
display: flex;
flex-direction: column;
}
}
.sidebar-spacer {
flex: 1 1 0;
min-height: 1rem;
}
}
// scss-docs-end sidebar
.dropdown-toggle {
outline: 0;
display: flex;
align-items: center;
}
================================================
FILE: assets/scss/components/_syntax-dark.scss
================================================
/* Background */ .bg { color: #c9d1d9; background-color: #0d1117; }
/* PreWrapper */ .chroma { color: #c9d1d9; background-color: #0d1117; }
/* Other */ .chroma .x { }
/* Error */ .chroma .err { color: #f85149 }
/* CodeLine */ .chroma .cl { }
/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
/* LineHighlight */ .chroma .hl { background-color: #373700 }
/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #64686c }
/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #999fa8 }
/* Line */ .chroma .line { display: flex; }
/* Keyword */ .chroma .k { color: #ff7b72 }
/* KeywordConstant */ .chroma .kc { color: #79c0ff }
/* KeywordDeclaration */ .chroma .kd { color: #ff7b72 }
/* KeywordNamespace */ .chroma .kn { color: #ff7b72 }
/* KeywordPseudo */ .chroma .kp { color: #79c0ff }
/* KeywordReserved */ .chroma .kr { color: #ff7b72 }
/* KeywordType */ .chroma .kt { color: #ff7b72 }
/* Name */ .chroma .n { }
/* NameAttribute */ .chroma .na { color: #00cccc }
/* NameBuiltin */ .chroma .nb { color: #00a2d8 }
/* NameBuiltinPseudo */ .chroma .bp { }
/* NameClass */ .chroma .nc { color: #f0883e; font-weight: bold }
/* NameConstant */ .chroma .no { color: #79c0ff; font-weight: bold }
/* NameDecorator */ .chroma .nd { color: #d2a8ff; font-weight: bold }
/* NameEntity */ .chroma .ni { color: #ffa657 }
/* NameException */ .chroma .ne { color: #f0883e; font-weight: bold }
/* NameFunction */ .chroma .nf { color: #d2a8ff; font-weight: bold }
/* NameFunctionMagic */ .chroma .fm { }
/* NameLabel */ .chroma .nl { color: #79c0ff; font-weight: bold }
/* NameNamespace */ .chroma .nn { color: #ff7b72 }
/* NameOther */ .chroma .nx { }
/* NameProperty */ .chroma .py { color: #79c0ff }
/* NameTag */ .chroma .nt { color: #7ee787 }
/* NameVariable */ .chroma .nv { color: #79c0ff }
/* NameVariableClass */ .chroma .vc { }
/* NameVariableGlobal */ .chroma .vg { }
/* NameVariableInstance */ .chroma .vi { }
/* NameVariableMagic */ .chroma .vm { }
/* Literal */ .chroma .l { color: #a5d6ff }
/* LiteralDate */ .chroma .ld { color: #79c0ff }
/* LiteralString */ .chroma .s { color: #a5d6ff }
/* LiteralStringAffix */ .chroma .sa { color: #79c0ff }
/* LiteralStringBacktick */ .chroma .sb { color: #a5d6ff }
/* LiteralStringChar */ .chroma .sc { color: #a5d6ff }
/* LiteralStringDelimiter */ .chroma .dl { color: #79c0ff }
/* LiteralStringDoc */ .chroma .sd { color: #a5d6ff }
/* LiteralStringDouble */ .chroma .s2 { color: #a5d6ff }
/* LiteralStringEscape */ .chroma .se { color: #79c0ff }
/* LiteralStringHeredoc */ .chroma .sh { color: #79c0ff }
/* LiteralStringInterpol */ .chroma .si { color: #a5d6ff }
/* LiteralStringOther */ .chroma .sx { color: #a5d6ff }
/* LiteralStringRegex */ .chroma .sr { color: #79c0ff }
/* LiteralStringSingle */ .chroma .s1 { color: #a5d6ff }
/* LiteralStringSymbol */ .chroma .ss { color: #a5d6ff }
/* LiteralNumber */ .chroma .m { color: #a5d6ff }
/* LiteralNumberBin */ .chroma .mb { color: #a5d6ff }
/* LiteralNumberFloat */ .chroma .mf { color: #a5d6ff }
/* LiteralNumberHex */ .chroma .mh { color: #a5d6ff }
/* LiteralNumberInteger */ .chroma .mi { color: #a5d6ff }
/* LiteralNumberIntegerLong */ .chroma .il { color: #a5d6ff }
/* LiteralNumberOct */ .chroma .mo { color: #a5d6ff }
/* Operator */ .chroma .o { color: #ff7b72; font-weight: bold }
/* OperatorWord */ .chroma .ow { color: #ff7b72; font-weight: bold }
/* Punctuation */ .chroma .p { }
/* Comment */ .chroma .c { color: #979fa8; font-style: italic }
/* CommentHashbang */ .chroma .ch { color: #979fa8; font-style: italic }
/* CommentMultiline */ .chroma .cm { color: #979fa8; font-style: italic }
/* CommentSingle */ .chroma .c1 { color: #979fa8; font-style: italic }
/* CommentSpecial */ .chroma .cs { color: #979fa8; font-weight: bold; font-style: italic }
/* CommentPreproc */ .chroma .cp { color: #979fa8; font-weight: bold; font-style: italic }
/* CommentPreprocFile */ .chroma .cpf { color: #979fa8; font-weight: bold; font-style: italic }
/* Generic */ .chroma .g { }
/* GenericDeleted */ .chroma .gd { color: #ffa198; background-color: #490202 }
/* GenericEmph */ .chroma .ge { font-style: italic }
/* GenericError */ .chroma .gr { color: #ffa198 }
/* GenericHeading */ .chroma .gh { color: #79c0ff; font-weight: bold }
/* GenericInserted */ .chroma .gi { color: #56d364; background-color: #0f5323 }
/* GenericOutput */ .chroma .go { color: #979fa8 }
/* GenericPrompt */ .chroma .gp { color: #979fa8 }
/* GenericStrong */ .chroma .gs { font-weight: bold }
/* GenericSubheading */ .chroma .gu { color: #79c0ff }
/* GenericTraceback */ .chroma .gt { color: #ff7b72 }
/* GenericUnderline */ .chroma .gl { text-decoration: underline }
/* TextWhitespace */ .chroma .w { color: #999fa8 }
================================================
FILE: assets/scss/components/_syntax-dart.scss
================================================
// stylelint-disable annotation-no-unknown
@import "syntax-light";
.bg,
.chroma,
.chroma .err {
// set to transparent background to avoid rendering issues with example shortcode
background-color: transparent if($enable-important-utilities, !important, null);
}
.chroma {
display: flex;
}
.chroma code {
flex: 1;
}
.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;
}
@if $enable-dark-mode {
[data-bs-theme="dark"] {
@include meta.load-css(syntax-dark);
.bg,
.chroma,
.chroma .err {
// set to transparent background to avoid rendering issues with example shortcode
background-color: transparent if($enable-important-utilities, !important, null);
}
.syntax-highlight {
background-color: var(--bs-tertiary-bg) if($enable-important-utilities, !important, null);
overflow-x: auto;
}
.bg,
.chroma,
.chroma .ge,
.chroma .gl,
.chroma .gs {
color: #c9d1d9 if($enable-important-utilities, !important, null);
}
}
}
// stylelint-enable annotation-no-unknown
================================================
FILE: assets/scss/components/_syntax-light.scss
================================================
/* Background */ .bg { background-color: #ffffff; }
/* PreWrapper */ .chroma { background-color: #ffffff; }
/* Other */ .chroma .x { }
/* Error */ .chroma .err { color: #a61717; background-color: #e3d2d2 }
/* CodeLine */ .chroma .cl { }
/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
/* LineHighlight */ .chroma .hl { background-color: #ffffcc }
/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
/* Line */ .chroma .line { display: flex; }
/* Keyword */ .chroma .k { color: #000000; font-weight: bold }
/* KeywordConstant */ .chroma .kc { color: #000000; font-weight: bold }
/* KeywordDeclaration */ .chroma .kd { color: #000000; font-weight: bold }
/* KeywordNamespace */ .chroma .kn { color: #000000; font-weight: bold }
/* KeywordPseudo */ .chroma .kp { color: #000000; font-weight: bold }
/* KeywordReserved */ .chroma .kr { color: #000000; font-weight: bold }
/* KeywordType */ .chroma .kt { color: #445588; font-weight: bold }
/* Name */ .chroma .n { }
/* NameAttribute */ .chroma .na { color: #008080 }
/* NameBuiltin */ .chroma .nb { color: #006b8f }
/* NameBuiltinPseudo */ .chroma .bp { color: #999999 }
/* NameClass */ .chroma .nc { color: #445588; font-weight: bold }
/* NameConstant */ .chroma .no { color: #008080 }
/* NameDecorator */ .chroma .nd { color: #3c5d5d; font-weight: bold }
/* NameEntity */ .chroma .ni { color: #800080 }
/* NameException */ .chroma .ne { color: #990000; font-weight: bold }
/* NameFunction */ .chroma .nf { color: #990000; font-weight: bold }
/* NameFunctionMagic */ .chroma .fm { }
/* NameLabel */ .chroma .nl { color: #990000; font-weight: bold }
/* NameNamespace */ .chroma .nn { color: #555555 }
/* NameOther */ .chroma .nx { }
/* NameProperty */ .chroma .py { }
/* NameTag */ .chroma .nt { color: #000080 }
/* NameVariable */ .chroma .nv { color: #008080 }
/* NameVariableClass */ .chroma .vc { color: #008080 }
/* NameVariableGlobal */ .chroma .vg { color: #008080 }
/* NameVariableInstance */ .chroma .vi { color: #008080 }
/* NameVariableMagic */ .chroma .vm { }
/* Literal */ .chroma .l { }
/* LiteralDate */ .chroma .ld { }
/* LiteralString */ .chroma .s { color: #dd1144 }
/* LiteralStringAffix */ .chroma .sa { color: #dd1144 }
/* LiteralStringBacktick */ .chroma .sb { color: #dd1144 }
/* LiteralStringChar */ .chroma .sc { color: #dd1144 }
/* LiteralStringDelimiter */ .chroma .dl { color: #dd1144 }
/* LiteralStringDoc */ .chroma .sd { color: #dd1144 }
/* LiteralStringDouble */ .chroma .s2 { color: #dd1144 }
/* LiteralStringEscape */ .chroma .se { color: #dd1144 }
/* LiteralStringHeredoc */ .chroma .sh { color: #dd1144 }
/* LiteralStringInterpol */ .chroma .si { color: #dd1144 }
/* LiteralStringOther */ .chroma .sx { color: #dd1144 }
/* LiteralStringRegex */ .chroma .sr { color: #009926 }
/* LiteralStringSingle */ .chroma .s1 { color: #dd1144 }
/* LiteralStringSymbol */ .chroma .ss { color: #990073 }
/* LiteralNumber */ .chroma .m { color: #007a7a }
/* LiteralNumberBin */ .chroma .mb { color: #007a7a }
/* LiteralNumberFloat */ .chroma .mf { color: #007a7a }
/* LiteralNumberHex */ .chroma .mh { color: #007a7a }
/* LiteralNumberInteger */ .chroma .mi { color: #007a7a }
/* LiteralNumberIntegerLong */ .chroma .il { color: #007a7a }
/* LiteralNumberOct */ .chroma .mo { color: #007a7a }
/* Operator */ .chroma .o { color: #000000; font-weight: bold }
/* OperatorWord */ .chroma .ow { color: #000000; font-weight: bold }
/* Punctuation */ .chroma .p { }
/* Comment */ .chroma .c { color: #6d6d5d; font-style: italic }
/* CommentHashbang */ .chroma .ch { color: #6d6d5d; font-style: italic }
/* CommentMultiline */ .chroma .cm { color: #6d6d5d; font-style: italic }
/* CommentSingle */ .chroma .c1 { color: #6d6d5d; font-style: italic }
/* CommentSpecial */ .chroma .cs { color: #999999; font-weight: bold; font-style: italic }
/* CommentPreproc */ .chroma .cp { color: #999999; font-weight: bold; font-style: italic }
/* CommentPreprocFile */ .chroma .cpf { color: #999999; font-weight: bold; font-style: italic }
/* Generic */ .chroma .g { }
/* GenericDeleted */ .chroma .gd { color: #000000; background-color: #ffdddd }
/* GenericEmph */ .chroma .ge { color: #000000; font-style: italic }
/* GenericError */ .chroma .gr { color: #aa0000 }
/* GenericHeading */ .chroma .gh { color: #999999 }
/* GenericInserted */ .chroma .gi { color: #000000; background-color: #ddffdd }
/* GenericOutput */ .chroma .go { color: #888888 }
/* GenericPrompt */ .chroma .gp { color: #555555 }
/* GenericStrong */ .chroma .gs { font-weight: bold }
/* GenericSubheading */ .chroma .gu { color: #aaaaaa }
/* GenericTraceback */ .chroma .gt { color: #aa0000 }
/* GenericUnderline */ .chroma .gl { text-decoration: underline }
/* TextWhitespace */ .chroma .w { color: #bbbbbb }
================================================
FILE: assets/scss/components/_syntax.scss
================================================
// stylelint-disable annotation-no-unknown
@import "syntax-light";
.bg,
.chroma,
.chroma .err {
// set to transparent background to avoid rendering issues with example shortcode
background-color: transparent if($enable-important-utilities, !important, null);
}
.chroma {
display: flex;
}
.chroma code {
flex: 1;
}
.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;
}
@if $enable-dark-mode {
[data-bs-theme="dark"] {
@import "syntax-dark"; // stylelint-disable-line no-invalid-position-at-import-rule
.bg,
.chroma,
.chroma .err {
// set to transparent background to avoid rendering issues with example shortcode
background-color: transparent if($enable-important-utilities, !important, null);
}
.syntax-highlight {
background-color: var(--bs-tertiary-bg) if($enable-important-utilities, !important, null);
overflow-x: auto;
}
.bg,
.chroma,
.chroma .ge,
.chroma .gl,
.chroma .gs {
color: #c9d1d9 if($enable-important-utilities, !important, null);
}
}
}
// stylelint-enable annotation-no-unknown
================================================
FILE: assets/scss/components/_table.scss
================================================
.datatable-container {
border-bottom: none if($enable-important-utilities, !important, null);
}
.datatable-bottom {
padding-top: 0 if($enable-important-utilities, !important, null);
}
.datatable-sorter {
padding-left: 0;
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 {
--bs-table-striped-bg: var(--bs-tertiary-bg);
--bs-table-striped-color: var(--bs-body-color);
}
.table-hover {
--bs-table-hover-bg: var(--bs-tertiary-bg);
--bs-table-striped-color: var(--bs-body-color);
}
.datatable-pagination-list-item {
&:hover,
&:focus,
&.datatable-active {
color: var(--bs-body-bg) !important;
}
}
}
}
================================================
FILE: assets/scss/components/_testimonial.scss
================================================
.testimonial-img {
height: 10vw;
width: 10vw;
background-color: var(--#{$prefix}body-bg);
}
.testimonial-logo {
width: 20vw;
}
@include media-breakpoint-up(md) {
.testimonial-img {
height: 5vw;
width: 5vw;
}
.testimonial-logo {
width: 10vw;
}
}
================================================
FILE: assets/scss/components/_timeline.scss
================================================
// scss-docs-start timeline
$connector-radius: 0.8rem;
$semi-circle-radius: 8rem;
$semi-circle-border: 0.2rem;
:root {
--timeline-highlight: var(--bs-primary);
--timeline-icon-radius: #{$semi-circle-radius};
--timeline-offset: 50%;
--timeline-connector-bg: var(--bs-body-bg);
}
@each $state in map-keys($theme-colors) {
.timeline-#{$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;
}
.timeline-sm {
--timeline-icon-radius: calc(#{$semi-circle-radius} / 2.4);
--timeline-offset: 25%
}
@include media-breakpoint-up(sm) {
.timeline-sm {
--timeline-icon-radius: calc(#{$semi-circle-radius} / 2);
}
}
.timeline::before, .timeline-sm::before {
content: "";
width: 2 * $semi-circle-border;
margin: 0 auto;
background: var(--bs-body-color);
position: absolute;
inset: 0;
}
.timeline-sm::before {
margin: 0 calc(var(--timeline-offset) - #{$semi-circle-border});
}
.timeline-semi-circle-start, .timeline-semi-circle-end {
width: var(--timeline-icon-radius);
height: var(--timeline-icon-radius);
border-radius: 100%;
position: relative;
}
.timeline-semi-circle-start {
left: -$semi-circle-border;
}
.timeline-semi-circle-end {
left: $semi-circle-border;
}
.timeline-semi-circle-start::before {
content: "";
width: var(--timeline-icon-radius);
height: var(--timeline-icon-radius);
border-radius: 100%;
border: $semi-circle-border solid;
position: absolute;
border-color: transparent var(--timeline-highlight) var(--timeline-highlight) var(--timeline-highlight);
transform: rotate(-90deg);
}
.timeline-semi-circle-start::after {
content: "";
left: 0;
top: 0;
width: var(--timeline-icon-radius);
height: var(--timeline-icon-radius);
border-radius: 100%;
border: $semi-circle-border solid;
position: absolute;
border-color: var(--timeline-highlight) var(--timeline-highlight) var(--timeline-highlight) transparent;
transform: rotate(-45deg);
}
.timeline-semi-circle-end::before {
content: "";
width: var(--timeline-icon-radius);
height: var(--timeline-icon-radius);
border-radius: 100%;
border: $semi-circle-border solid;
position: absolute;
border-color: transparent var(--timeline-highlight) var(--timeline-highlight) var(--timeline-highlight);
transform: rotate(-225deg);
}
.timeline-semi-circle-end::after {
content: "";
left: 0;
top: 0;
width: var(--timeline-icon-radius);
height: var(--timeline-icon-radius);
border-radius: 100%;
border: $semi-circle-border solid;
position: absolute;
border-color: var(--timeline-highlight) var(--timeline-highlight) var(--timeline-highlight) transparent;
transform: rotate(-180deg);
}
.timeline-description-text-start {
border-bottom: $semi-circle-border solid var(--timeline-highlight);
margin-right: 2 * $connector-radius;
}
.timeline-description-text-end {
border-bottom: $semi-circle-border solid var(--timeline-highlight);
margin-left: 2 * $connector-radius;
}
.timeline-panel-start, .timeline-panel-end, .timeline-connector-start, .timeline-connector-end {
top: calc(var(--timeline-icon-radius) / 2);
position: relative;
width: calc(var(--timeline-icon-radius) / 2);
height: calc($semi-circle-border + var(--timeline-icon-radius) / 2);
border: $semi-circle-border solid var(--timeline-highlight);
border-bottom: none;
border-right: none;
border-left: none;
}
.timeline-panel-start {
top: 50%;
right: 50%;
position: absolute;
width: calc(var(--timeline-icon-radius) * 2);
width: 2 * $connector-radius;
height: 50%;
border-top: $semi-circle-border solid var(--timeline-highlight);
border-left: $semi-circle-border solid var(--timeline-highlight);
}
.timeline-panel-end {
top: 50%;
position: absolute;
width: calc(var(--timeline-icon-radius) * 2);
width: 2 * $connector-radius;
height: 50%;
border-top: $semi-circle-border solid var(--timeline-highlight);
border-right: $semi-circle-border solid var(--timeline-highlight);
}
.timeline-dot::after {
display: inline-block;
content: "";
position: absolute;
top: 50%;
left: var(--timeline-offset);
margin: (-$connector-radius) 0 0 (-$connector-radius);
width: 2 * $connector-radius;
height: 2 * $connector-radius;
border-radius: 100%;
border: ($semi-circle-border * 1.5) solid var(--timeline-connector-bg);
color: var(--timeline-highlight);
background: var(--timeline-highlight);
}
// Compact start-aligned timeline (layout="start")
.timeline-start {
list-style: none;
padding-inline-start: 1rem;
margin: 0;
position: relative;
&::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 0.4rem;
bottom: 0.4rem;
width: $semi-circle-border;
background: var(--bs-border-color);
}
li {
position: relative;
padding-inline-start: 1rem;
margin-bottom: 0.75rem;
&:last-child {
margin-bottom: 0;
}
&::before {
content: "";
position: absolute;
inset-inline-start: calc(#{$semi-circle-border} / 2 - 1.2rem);
top: 0.4rem;
width: 0.4rem;
height: 0.4rem;
border-radius: 100%;
background: var(--bs-primary);
}
}
}
================================================
FILE: assets/scss/components/_toast.scss
================================================
.toast {
border-radius: #{$theme-border-radius};
overflow: hidden;
}
================================================
FILE: assets/scss/components/_toc.scss
================================================
//
// Table of contents sidebar & drop-down panel
//
// scss-docs-start toc
.toc-sidebar {
top: calc(var(--navbar-offset) + 1rem);
max-height: calc(100vh - var(--navbar-offset));
overflow-y: auto;
right: 0;
z-index: 2;
}
// scss-docs-end toc
.toc nav {
font-size: 0.875rem;
margin-bottom: -0.875rem;
}
.toc nav ul {
padding-left: 0;
list-style: none;
}
.toc nav ul ul {
padding-left: 1rem;
margin-top: 0.25rem;
}
.toc nav li {
margin-bottom: 0.25rem;
}
.toc nav a {
color: inherit;
&:hover {
color: var(--bs-primary);
}
}
.toc nav a:not(:hover) {
text-decoration: none;
}
.toc nav a code {
font: inherit;
}
#toc-collapse {
border-color: var(--bs-secondary-color) !important;
border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius) !important;
margin-top: -1.5rem;
padding-top: 1.5rem !important;
}
.toc-button {
--bs-btn-hover-color: var(--bs-primary);
--bs-btn-hover-bg: var(--bs-body-bg);
--bs-btn-hover-border-color: var(--bs-primary);
--bs-btn-active-color: var(--bs-primary);
--bs-btn-active-bg: var(--bs-body-bg);
--bs-btn-active-border-color: var(--bs-primary);
background-color: var(--#{$prefix}body-bg) !important;
&.active,
&:hover,
&:focus {
color: var(--bs-primary);
border-color: var(--bs-primary);
box-shadow: 0 0 0 4px var(--bs-primary-border-subtle);
outline: none;
}
}
.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 {
--bs-btn-color: var(--bs-body-color);
--bs-btn-border-color: var(--bs-body-color);
&:hover {
background-color: transparent;
}
}
#toc-collapse {
border-color: var(--bs-body-color) !important;
}
.toc nav a {
color: var(--bs-body-color);
&:hover {
color: white;
}
}
}
}
.section-menu > .nav-link.active, .section-menu > .nav-link:hover {
color: var(--bs-primary);
}
================================================
FILE: assets/scss/components/_tooltip.scss
================================================
.btn-tooltip a {
text-decoration: none;
}
.btn-tooltip a[href] {
color: var(--bs-link-color) !important;
text-decoration-color: var(--bs-link-color) !important;
}
================================================
FILE: assets/scss/components/_video.scss
================================================
.video-embedded {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
border-radius: #{$theme-border-radius};
}
.video-embedded > iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
// Adapted from https://github.com/gohugoio/hugo/tpl/tplimpl/embedded/templates/shortcodes/vimeo_simple.html
.__h_video {
position: relative;
padding-bottom: 56.23%;
height: 0;
overflow: hidden;
width: 100%;
background: #000;
}
.__h_video img {
width: 100%;
height: auto;
color: #000;
}
.__h_video .play {
height: 72px;
width: 72px;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -36px;
position: absolute;
cursor: pointer;
}
.video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
================================================
FILE: assets/scss/helpers/_colored-links.scss
================================================
// scss-docs-start colored-links
$custom-colors: (
"primary": "light",
"secondary": "light",
"success": "light",
"danger": "light",
"dark": "light",
"black": "light",
"info": "dark",
"warning": "dark",
"light": "dark",
"white": "dark",
"body": "adaptive",
"body-tertiary": "adaptive"
);
@each $color, $value in $custom-colors {
$main-color: var(--bs-body-color);
$emphasize-color: var(--bs-secondary-color);
@if $value == "light" {
$main-color: $white;
$emphasize-color: shade-color($main-color, $link-shade-percentage);
} @else if $value == "dark" {
$main-color: $black;
$emphasize-color: tint-color($main-color, $link-shade-percentage);
}
.link-bg-#{$color} {
color: $main-color if($enable-important-utilities, !important, null);
&:hover,
&:focus {
color: $emphasize-color if($enable-important-utilities, !important, null);
}
}
}
// scss-docs-end colored-links
================================================
FILE: assets/scss/helpers/_display.scss
================================================
.hidden {
display: none;
}
// stylelint-disable annotation-no-unknown
// scss-docs-start display-color
.d-none-light, .d-none-inline-light {
display: none if($enable-important-utilities, !important, null);
}
.d-none-dark {
display: block if($enable-important-utilities, !important, null);
}
.d-none-inline-dark {
display: inline if($enable-important-utilities, !important, null);
}
@if $enable-dark-mode {
@include color-mode(dark) {
.d-none-light {
display: block if($enable-important-utilities, !important, null);
}
.d-none-inline-light {
display: inline if($enable-important-utilities, !important, null);
}
.d-none-dark, .d-none-inline-dark {
display: none if($enable-important-utilities, !important, null);
}
}
}
// scss-docs-end display-color
// stylelint-enable annotation-no-unknown
================================================
FILE: assets/scss/layouts/_reboot.scss
================================================
pre {
padding: $spacer;
margin-bottom: 0;
}
================================================
FILE: assets/scss/layouts/_type.scss
================================================
//
// Headings
//
h1 {
margin-top: $spacer * 2.5;
scroll-margin-top: var(--navbar-offset);
}
h2 {
margin-top: $spacer * 2;
scroll-margin-top: var(--navbar-offset);
}
h3 {
margin-top: $spacer * 1.75;
scroll-margin-top: var(--navbar-offset);
}
h4 {
margin-top: $spacer * 1.5;
scroll-margin-top: var(--navbar-offset);
}
h5 {
margin-top: $spacer * 1.25;
scroll-margin-top: var(--navbar-offset);
}
h6 {
margin-top: $spacer;
scroll-margin-top: var(--navbar-offset);
}
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
scroll-margin-top: var(--navbar-offset);
}
================================================
FILE: assets/scss/theme/_variables.scss
================================================
// Placeholder to quickly add your own theme variable overrides
// The file is included at the beginning of the build pipeline
================================================
FILE: assets/scss/theme/base.scss
================================================
// Placeholder for themes extending the core Hinode theme
// The file is included last in the build pipeline, but prior to theme.scss
================================================
FILE: assets/scss/theme/fonts.scss
================================================
/*!
* Copyright (c) 2016-2020 The Inter Project Authors.
* "Inter" is trademark of Rasmus Andersson.
* https://github.com/rsms/inter
* This Font Software is licensed under the SIL Open Font License, Version 1.1.
* This license is copied below, and is also available with a FAQ at:
* http://scripts.sil.org/OFL
*/
/* inter-200 - latin */
@font-face {
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;
src: url('../fonts/inter-v12-latin-200.eot'); /* IE9 Compat Modes */
src: url('../fonts/inter-v12-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/inter-v12-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/inter-v12-latin-200.woff') format('woff'), /* Modern Browsers */
url('../fonts/inter-v12-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/inter-v12-latin-200.svg#Inter') format('svg'); /* Legacy iOS */
}
/* inter-300 - latin */
@font-face {
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;
src: url('../fonts/inter-v12-latin-300.eot'); /* IE9 Compat Modes */
src: url('../fonts/inter-v12-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/inter-v12-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/inter-v12-latin-300.woff') format('woff'), /* Modern Browsers */
url('../fonts/inter-v12-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/inter-v12-latin-300.svg#Inter') format('svg'); /* Legacy iOS */
}
/* inter-regular - latin */
@font-face {
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;
src: url('../fonts/inter-v12-latin-regular.eot'); /* IE9 Compat Modes */
src: url('../fonts/inter-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/inter-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/inter-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/inter-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/inter-v12-latin-regular.svg#Inter') format('svg'); /* Legacy iOS */
}
/* inter-600 - latin */
@font-face {
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;
src: url('../fonts/inter-v12-latin-600.eot'); /* IE9 Compat Modes */
src: url('../fonts/inter-v12-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/inter-v12-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/inter-v12-latin-600.woff') format('woff'), /* Modern Browsers */
url('../fonts/inter-v12-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/inter-v12-latin-600.svg#Inter') format('svg'); /* Legacy iOS */
}
================================================
FILE: assets/scss/theme/theme.scss
================================================
// Placeholder to quickly add your own styles
// The file is included last in the build pipeline
================================================
FILE: assets/scss/vendor/.gitkeep
================================================
================================================
FILE: commitlint.config.js
================================================
module.exports = {extends: ['@commitlint/config-conventional']}
================================================
FILE: config/_default/hugo.toml
================================================
# toml-docs-start main
title = "Hinode"
copyright = "Copyright © 2026 Hinode Team"
enableGitInfo = true
# toml-docs-end main
# additional settings
baseURL = "https://example.com/"
canonifyURLs = false
enableEmoji = true
enableRobotsTXT = true
enableInlineShortcodes = true
summaryLength = 20
# prevent build failures when using Hugo's Instagram shortcode due to deprecated Instagram API.
# See https://github.com/gohugoio/hugo/issues/7228#issuecomment-714490456
ignoreErrors = ["error-remote-getjson"]
# toml-docs-start timeout
timeout = "180s"
# toml-docs-end timeout
# toml-docs-start language
languageCode = "en-us"
defaultContentLanguage = "en"
defaultContentLanguageInSubdir = false
# toml-docs-end language
# toml-docs-start headers
[outputFormats]
[outputFormats.server]
mediaType = "application/toml"
baseName = "server"
isPlainText = true
notAlternative = true
permalinkable = true
root = true
[outputFormats.netlify]
mediaType = "application/toml"
baseName = "netlify"
isPlainText = true
notAlternative = true
permalinkable = true
root = true
# toml-docs-end headers
[outputFormats.XML]
isPlainText = false
mediaType = "application/xml"
isHtml = false
noUgly = true
permalinkable = false
name = "xml"
# toml-docs-start redirect
[outputFormats.REDIR]
mediaType = "text/netlify"
baseName = "_redirects"
isPlainText = true
notAlternative = true
[mediaTypes."text/netlify"]
delimiter = ""
# toml-docs-end redirect
# toml-docs-start outputs
[outputs]
home = ["HTML", "RSS", "REDIR", "netlify", "server"]
# toml-docs-end outputs
# toml-docs-start build
[build]
writeStats = true
# toml-docs-end build
[taxonomies]
tag = 'tags'
[pagination]
pagerSize = 9
[privacy]
[privacy.vimeo]
disabled = false
simple = true
[privacy.x]
disabled = false
enableDNT = true
simple = true
[privacy.instagram]
disabled = false
simple = true
[privacy.youtube]
disabled = false
privacyEnhanced = true
[services]
[services.instagram]
disableInlineCSS = true
[services.x]
disableInlineCSS = true
[services.googleAnalytics]
# ID = "G-xxxxxxxxxx"
[minify]
[minify.tdewolff.js]
keepVarNames = true
precision = 0
version = 2022
[minify.tdewolff.html]
keepWhitespace = true
[module]
[module.hugoVersion]
extended = true
min = "0.146.0"
[[module.mounts]]
source = "archetypes"
target = "archetypes"
[[module.mounts]]
source = "assets"
target = "assets"
[[module.mounts]]
source = "content"
target = "content"
[[module.mounts]]
source = "data"
target = "data"
[[module.mounts]]
source = "i18n"
target = "i18n"
[[module.mounts]]
source = "layouts"
target = "layouts"
[[module.mounts]]
source = "static"
target = "static"
[[module.mounts]]
source = "netlify.toml"
target = "assets/config/netlify.toml"
# toml-docs-start modules
[[module.imports]]
path = "github.com/gethinode/mod-bootstrap"
[[module.imports]]
path = "github.com/gethinode/mod-csp"
[[module.imports]]
path = "github.com/gethinode/mod-flexsearch/v4"
[[module.imports]]
path = "github.com/gethinode/mod-fontawesome/v5"
[[module.imports]]
path = "github.com/gethinode/mod-google-analytics/v2"
[[module.imports]]
path = "github.com/gethinode/mod-katex"
[[module.imports]]
path = "github.com/gethinode/mod-leaflet/v2"
[[module.imports]]
path = "github.com/gethinode/mod-lottie/v2"
[[module.imports]]
path = "github.com/gethinode/mod-mermaid/v4"
[[module.imports]]
path = "github.com/gethinode/mod-simple-datatables/v3"
[[module.imports]]
path = "github.com/gethinode/mod-utils/v5"
# toml-docs-end modules
# toml-docs-start segments
[segments]
[segments.headers]
[[segments.headers.includes]]
kind = '{home}'
output = '{netlify,server}'
# toml-docs-end segments
================================================
FILE: config/_default/languages.toml
================================================
# toml-docs-start lang-main
[en]
languageName = "English"
contentDir = "content"
weight = 1
# toml-docs-end lang-main
# toml-docs-start lang-param
[en.params.head]
tagline = "A Hugo Theme"
[en.params.social]
title = "Follow me"
caption = "I work on everything coding and tweet developer memes"
[en.params.footer]
# license = "Licensed under Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank' rel='noopener noreferrer nofollow'>CC BY-NC-SA 4.0</a>)."
# toml-docs-end lang-param
================================================
FILE: config/_default/markup.toml
================================================
defaultMarkdownHandler = "goldmark"
[highlight]
anchorLineNos = false
codeFences = true
guessSyntax = true
hl_Lines = ""
lineAnchors = ""
lineNoStart = 1
lineNos = false
lineNumbersInTable = false
noClasses = false
tabWidth = 2
## Update the 'create:syntax' command in package.json to modify the style
## The first two lines have been modified to remove the background color
# style = "monokailight"
[goldmark]
[goldmark.extensions]
definitionList = true
footnote = true
linkify = true
strikethrough = true
table = true
taskList = true
typographer = true
[goldmark.extensions.passthrough]
enable = true
[goldmark.extensions.passthrough.delimiters]
block = [['\[', '\]'], ['$$', '$$']]
inline = [['\(', '\)'], ['$', '$']]
[goldmark.parser]
autoHeadingID = true
autoHeadingIDType = 'github'
wrapStandAloneImageWithinParagraph = false
[goldmark.parser.attribute]
block = true
[goldmark.renderer]
hardWraps = false
unsafe = false
xhtml = false
================================================
FILE: config/_default/menus/menus.en.toml
================================================
[[main]]
name = "Home"
pageRef = "/"
weight = 10
[[main]]
name = "Tags"
pageRef = "/tags"
weight = 20
[[social]]
name = "LinkedIn"
pre = "fab linkedin"
url = "https://linkedin.com/"
weight = 10
[[social]]
name = "GitHub"
pre = "fab fa-github"
url = "https://github.com/"
weight = 20
[[social]]
name = "Medium"
pre = "fab medium"
url = "https://medium.com/"
weight = 30
================================================
FILE: config/_default/params.toml
================================================
# toml-docs-start main
[main]
separator = "-"
description = "Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5."
enableLanguageSelectionStorage = false
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 = "dartsass"
silenceDeprecations = true
[main.colorMode]
enabled = true
modes = ["light", "dark"]
toggle = false
[main.cards]
linkIcon = false
# toml-docs-end main
# toml-docs-start icons
[icons]
# Color mode toggle
colorModeLight = "fas sun"
colorModeDark = "fas moon"
# Navbar
navbarLanguage = "fas globe"
navbarOverflow = "fas ellipsis"
navbarVersionCheck = "fas check"
# Pagination
paginationFirst = "fas angles-left"
paginationPrev = "fas angle-left"
paginationNext = "fas angle-right"
paginationLast = "fas angles-right"
# Other navigation
breadcrumbBack = "fas angle-left"
pageNavPrev = "fas arrow-left"
pageNavNext = "fas arrow-right"
# Content
tocSort = "fas sort"
cardReadMore = "fas chevron-right"
cardLinkIcon = "fas arrow-right"
externalLink = "fas up-right-from-square"
testimonialNext = "fas chevron-right"
testimonialQuote = "fas quote-right"
headingAnchor = "fas link"
notFoundPage = "fas link-slash"
sharingWebshare = "fas share-nodes"
sharingDownload = "fas download"
# Sidebar
sidebarCollapse = "fas angles-left"
sidebarSecondary = "fas angle-down"
# Form
formSubmitButton = "fa paper-plane"
formSubmittedIcon = "fa envelope"
[icons.admonition]
note = "fas circle-info"
info = "fas circle-info"
tip = "fa lightbulb"
important = "fas exclamation"
warning = "fas triangle-exclamation"
caution = "fa hand"
[icons.release]
deprecated = "fas trash-can"
feature = "fas rocket"
# toml-docs-end icons
# toml-docs-start images
[images]
[images.cloudinary]
host = "cloudinary"
[images.imagekit]
host = "imagekit"
[images.imgix]
host = "imgix"
# toml-docs-end images
# toml-docs-start videos
[videos]
[videos.cloudinary]
host = "cloudinary"
account = "demo"
[videos.vimeo]
host = "vimeo"
[videos.youtube]
host = "youtube"
# toml-docs-end videos
[dam]
videoCodecs = [
"webm/vp9",
"mp4/h265",
"mp4"
]
# toml-docs-start debugging
[debugging]
showJS = false
showSCSS = false
purgeHTMLComments = false
includeSVGOrigin = true
# toml-docs-end debugging
# toml-docs-start docs
[docs]
github = "https://github.com/gethinode/hinode"
release = "https://github.com/gethinode/hinode/releases/tag/"
checkVersion = false
# toml-docs-end docs
# toml-docs-start home
[home]
# sections = ["posts"]
fullCover = false
centerHeadline = false
style = ""
[home.feature]
orientation = "horizontal"
color = "primary"
width = 4
align = "start"
# toml-docs-end home
# toml-docs-start navigation
[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.7rem"
breadcrumb = true
toc = true
sidebar = true
size = "md"
startLevel = 2
endLevel = 3
maxNumHeadings = 9
[navigation.padding]
x = 4
y = 4
[navigation.search]
enabled = true
modal = true
# toml-docs-end navigation
# toml-docs-start messages
[messages]
placement = "bottom-right"
# toml-docs-end messages
[pages]
readingTime = true
wordCount = true
# toml-docs-start sharing
[sharing]
enabled = true
sort = "weight"
reverse = false
webshare = true
[[sharing.providers]]
name = "LinkedIn"
url = "https://www.linkedin.com/sharing/share-offsite/?url={url}"
icon = "fab linkedin"
weight = 10
[[sharing.providers]]
name = "Twitter"
url = "https://twitter.com/home?status={url}"
icon = "fab x-twitter"
weight = 20
[[sharing.providers]]
name = "Facebook"
url = "https://www.facebook.com/sharer.php?u={url}"
icon = "fab facebook"
weight = 30
[[sharing.providers]]
name = "WhatsApp"
url = "whatsapp://send?text={title}%20{url}"
icon = "fab whatsapp"
weight = 40
[[sharing.providers]]
name = "email"
url = "{url}"
icon = "fas link"
weight = 50
clipboard = true
# toml-docs-end sharing
[favicon]
logo = "img/favicon.png"
sizes = [16, 32, 48]
# toml-docs-start theme-colors
[style]
primary = "#d43900"
secondary = "#6c757d"
success = "#198754"
info = "#0dcaf0"
warning = "#ffc107"
danger = "#dc3545"
light = "#f8f9fa"
dark = "#212529"
# toml-docs-end theme-colors
themeOpacity = "10"
darkModeShade = "20%"
darkModeTint = "40%"
# toml-docs-start font
themeFont = "Inter"
# themeFontPath = "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap" # external path
themeFontPath = "/fonts" # local path
themeFontPreload = "/fonts/inter-v12-latin-regular.woff2"
fontSizeBase = "1rem" # assumes the browser default, typically '16px'
# toml-docs-end font
# toml-docs-start build
purge = false
# toml-docs-end build
[style.title]
size = 4
arrangement = "above"
headingStyle = "display"
contentStyle = "lead text-muted"
[schema]
type = "Organization"
name = "Hinode"
locale = "en-US"
# twitter = "https://twitter.com/gethinode"
# linkedIn = ""
github = "https://github.com/gethinode/hinode"
section = "blog"
[schema.author]
name = "Mark Dumay"
# twitter = "https://twitter.com/markdumay"
linkedin = "https://www.linkedin.com/in/markdumay/"
github = "https://github.com/markdumay"
[schema.logo]
url = "img/logo512x512.png"
width = 512
height = 512
[schema.image]
url = "img/logo1280x640.png"
width = 1280
height = 640
[opengraph]
images = ["logo.png"]
locale = "en_US"
[links]
hinode = "https://gethinode.com"
# toml-docs-start headers
[headers]
[headers.netlify]
source = "netlify.toml"
# toml-docs-end headers
# toml-docs-start csp
[modules.hinode.csp]
style-src = ["www.youtube.com"]
font-src = ["fonts.gstatic.com"]
frame-src = [
"player.cloudinary.com",
"www.youtube-nocookie.com",
"www.youtube.com"
]
img-src = [
"data:",
"*.imgix.net",
"*.imagekit.io",
"*.cloudinary.com",
"i.ytimg.com"
]
# toml-docs-end csp
[modules.vimeo]
local = true
integration = "optional"
state = "async"
url = "https://player.vimeo.com/api/player.js"
[modules.vimeo.csp]
frame-src = ["player.vimeo.com"]
img-src = ["i.vimeocdn.com"]
script-src = ["player.vimeo.com"]
================================================
FILE: config/_default/server.toml
================================================
# Auto-generated file - do not modify
[[headers]]
for = '/**'
[headers.values]
Access-Control-Allow-Origin = '*'
Content-Security-Policy = """
base-uri 'self'; \
connect-src 'self' *.analytics.google.com *.google.com *.google-analytics.com *.googletagmanager.com; \
default-src 'none'; \
font-src 'self' fonts.gstatic.com data:; \
form-action 'self'; \
frame-ancestors 'self' http://localhost:1313 gethinode.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 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 *.analytics.google.com googletagmanager.com tagmanager.google.com player.vimeo.com; \
style-src 'self' googletagmanager.com tagmanager.google.com fonts.googleapis.com www.youtube.com 'unsafe-inline'; \
"""
Permissions-Policy = 'geolocation=(), midi=(), sync-xhr=(), microphone=(), camera=(), magnetometer=(), gyroscope=(), fullscreen=(), payment=() '
Referrer-Policy = 'strict-origin'
Strict-Transport-Security = 'max-age=31536000; includeSubDomains; preload'
X-Content-Type-Options = 'nosniff'
X-XSS-Protection = '1; mode=block'
cache-control = 'max-age=0, no-cache, no-store, must-revalidate '
================================================
FILE: config/ci/hugo.toml
================================================
# cachedir default on POSIX: '/tmp/hugo_cache_runner'
# cachedir default on Windows: '~\AppData\Local\hugo_cache'
# cachedir default on macOS: '/Users/runner/Library/Caches/hugo_cache'
#
# All six Hugo cache types are configured here to:
# - redirect assets/images from :resourceDir to :cacheDir so GitHub Actions can cache them
# - set maxAge = -1 across the board so --gc never prunes entries between CI runs
[caches]
[caches.assets]
dir = ':cacheDir/resources/_gen' # redirect from :resourceDir to :cacheDir
maxAge = -1
[caches.getresource]
dir = ':cacheDir/:project'
maxAge = -1
[caches.images]
dir = ':cacheDir/resources/_gen' # redirect from :resourceDir to :cacheDir
maxAge = -1
[caches.misc]
dir = ':cacheDir/:project'
maxAge = -1
[caches.modulequeries]
dir = ':cacheDir/modules'
maxAge = -1 # override default 24h so --gc does not prune module query results
[caches.modules]
dir = ':cacheDir/modules'
maxAge = -1
================================================
FILE: config/development/params.toml
================================================
# Development-specific parameters for Hinode theme
[modules.hinode.csp]
frame-ancestors = [
"'self'",
"http://localhost:1313", # Allow self-embedding for testing
"gethinode.com" # Production embedding
]
frame-src = [
"*.googletagmanager.com",
"player.cloudinary.com",
"www.youtube-nocookie.com",
"www.youtube.com",
"player.vimeo.com"
]
================================================
FILE: config/postcss.config.js
================================================
const autoprefixer = require('autoprefixer')({})
const cssnano = require('cssnano')({
preset: ['advanced', {
discardUnused: {
fontFace: false // Preserve all @font-face declarations
}
}]
})
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: ['aria-expanded', 'data-bs-theme', 'data-bs-main-theme', 'data-bs-theme-animate', 'data-transparent', 'role'],
fontFace: false,
safelist: {
standard: [
// Bootstrap form validation
'was-validated',
// Bootstrap dynamic states
'show',
'showing',
'hiding',
'active',
'disabled',
'collapsed',
'collapsing',
// SimpleDatatables modifier classes
'no-header',
'no-footer',
// SimpleDatatables table rendering classes (added by JS)
'th-inner',
'sortable',
'sortable-center',
'both',
'desc',
'asc',
// SimpleDatatables search component
'search-data-table',
'search-input',
// Bootstrap utilities used by SimpleDatatables
'float-right',
'float-left'
],
// Classes with these patterns will be preserved along with their children
deep: [
// Bootstrap components that get dynamically modified
/modal/,
/dropdown/,
/carousel/,
/tooltip/,
/popover/,
/collapse/,
/offcanvas/,
// SimpleDatatables - preserve structure and all nested elements
/datatable/,
// Bootstrap form controls (used by SimpleDatatables)
/form-select/,
/form-control/,
// Bootstrap button groups (used by SimpleDatatables search)
/btn-group/,
// Bootstrap responsive tables (used by list component)
/table-responsive/,
// Syntax highlighting - preserve Chroma classes and descendants
/chroma/,
/syntax-highlight/,
/codeblock/
],
// Preserve any selector containing these patterns
greedy: [
// Third-party library prefixes (well-namespaced, safe to use greedy)
/^fa-/, // FontAwesome
/^leaflet-/, // Leaflet maps
/^katex-/, // KaTeX math (note: using katex- not just katex)
/^mermaid/, // Mermaid diagrams
/datatable/, // SimpleDatatables (all variants: datatable-*, *-datatable, etc.)
/^cky-/, // CookieYes
// Component-specific prefixes
/clipboard-/, // Clipboard component
/command-/, // Command component
/search-/, // Search functionality (includes search-input, search-data-table)
/suggestion__/,
gitextract_pae652cm/ ├── .eslintrc.yml ├── .github/ │ ├── ISSUE_TEMPLATE/ │ │ ├── bug_report.md │ │ └── feature_request.md │ ├── codeql/ │ │ └── codeql-config.yml │ ├── dependabot.yml │ ├── release.yml │ └── workflows/ │ ├── auto-merge.yml │ ├── codeql.yml │ ├── lint-build.yml │ ├── mod-update.yml │ └── release.yml ├── .gitignore ├── .gitmodules ├── .husky/ │ ├── commit-msg │ ├── install.mjs │ └── pre-commit ├── .markdownlint-cli2.jsonc ├── .stylelintignore ├── .stylelintrc.json ├── CLAUDE.md ├── LICENSE ├── README.md ├── archetypes/ │ └── default.md ├── assets/ │ ├── js/ │ │ ├── alert.js │ │ ├── animation.js │ │ ├── clipboard.js │ │ ├── critical/ │ │ │ ├── _cookie.js │ │ │ ├── color.js │ │ │ ├── languageSelector.js │ │ │ └── sidebar-pre-init.js │ │ ├── menu.js │ │ ├── modal.js │ │ ├── nav.js │ │ ├── navbar.js │ │ ├── optional/ │ │ │ └── .gitkeep │ │ ├── popover.js │ │ ├── sharing.js │ │ ├── sidebar-group.js │ │ ├── sidebar-toggle.js │ │ ├── testimonial.js │ │ ├── toast.js │ │ ├── toc.js │ │ ├── tooltip.js │ │ ├── vendor/ │ │ │ └── .gitkeep │ │ └── video.js │ └── scss/ │ ├── app-dart.scss │ ├── app.scss │ ├── common/ │ │ ├── _animation.scss │ │ ├── _export.scss │ │ ├── _icons.scss │ │ ├── _masonry.scss │ │ ├── _scrollbar.scss │ │ ├── _styles.scss │ │ ├── _utilities-custom.scss │ │ ├── _utilities-responsive.scss │ │ ├── _variables-dark.scss │ │ ├── _variables-dart.scss │ │ └── _variables.scss │ ├── components/ │ │ ├── _abbr.scss │ │ ├── _alert.scss │ │ ├── _blockquote.scss │ │ ├── _button.scss │ │ ├── _card.scss │ │ ├── _carousel.scss │ │ ├── _clipboard.scss │ │ ├── _command.scss │ │ ├── _docs.scss │ │ ├── _feature.scss │ │ ├── _footer.scss │ │ ├── _img.scss │ │ ├── _kbd.scss │ │ ├── _nav.scss │ │ ├── _navbar.scss │ │ ├── _pagination.scss │ │ ├── _persona.scss │ │ ├── _popover.scss │ │ ├── _sidebar.scss │ │ ├── _syntax-dark.scss │ │ ├── _syntax-dart.scss │ │ ├── _syntax-light.scss │ │ ├── _syntax.scss │ │ ├── _table.scss │ │ ├── _testimonial.scss │ │ ├── _timeline.scss │ │ ├── _toast.scss │ │ ├── _toc.scss │ │ ├── _tooltip.scss │ │ └── _video.scss │ ├── helpers/ │ │ ├── _colored-links.scss │ │ └── _display.scss │ ├── layouts/ │ │ ├── _reboot.scss │ │ └── _type.scss │ ├── theme/ │ │ ├── _variables.scss │ │ ├── base.scss │ │ ├── fonts.scss │ │ └── theme.scss │ └── vendor/ │ └── .gitkeep ├── commitlint.config.js ├── config/ │ ├── _default/ │ │ ├── hugo.toml │ │ ├── languages.toml │ │ ├── markup.toml │ │ ├── menus/ │ │ │ └── menus.en.toml │ │ ├── params.toml │ │ └── server.toml │ ├── ci/ │ │ └── hugo.toml │ ├── development/ │ │ └── params.toml │ ├── postcss.config.js │ └── production/ │ ├── deployment.toml │ ├── hugo.toml │ └── params.toml ├── content/ │ ├── _index.md │ └── _modals/ │ └── _index.md ├── data/ │ ├── .gitkeep │ ├── dimensions.yml │ ├── netlify.toml │ ├── server.toml │ └── structures/ │ ├── abbr.yml │ ├── accordion-item.yml │ ├── accordion.yml │ ├── alert.yml │ ├── args.yml │ ├── background.yml │ ├── badge.yml │ ├── breadcrumb.yml │ ├── button-group.yml │ ├── button.yml │ ├── card-group.yml │ ├── card-icon.yml │ ├── card.yml │ ├── carousel-item.yml │ ├── carousel.yml │ ├── collapse.yml │ ├── command.yml │ ├── docs.yml │ ├── download.yml │ ├── example.yml │ ├── featured-illustration.yml │ ├── file.yml │ ├── form-hook.yml │ ├── get-dimension.yml │ ├── hero-image.yml │ ├── image-adapter-rewrite.yml │ ├── image-adapter.yml │ ├── image-definition.yml │ ├── image-dimension.yml │ ├── image-rewrite.yml │ ├── image-set.yml │ ├── image.yml │ ├── ins.yml │ ├── kbd.yml │ ├── link.yml │ ├── links.yml │ ├── list.yml │ ├── live-pages.yml │ ├── mark.yml │ ├── menu-item.yml │ ├── nav-item.yml │ ├── nav.yml │ ├── navbar-item.yml │ ├── navbar.yml │ ├── page-alert.yml │ ├── pagination.yml │ ├── persona.yml │ ├── release.yml │ ├── script.yml │ ├── scripts.yml │ ├── section-header.yml │ ├── section-menu.yml │ ├── section-title.yml │ ├── sidebar.yml │ ├── spinner.yml │ ├── stack.yml │ ├── sub.yml │ ├── sup.yml │ ├── table.yml │ ├── testimonial.yml │ ├── timeline.yml │ ├── toast.yml │ ├── toc.yml │ ├── tooltip.yml │ ├── version.yml │ └── video.yml ├── eslint.config.mjs ├── exampleSite/ │ ├── .gitignore │ ├── config/ │ │ ├── _default/ │ │ │ ├── hugo.toml │ │ │ ├── languages.toml │ │ │ ├── markup.toml │ │ │ ├── menus/ │ │ │ │ ├── menus.en.toml │ │ │ │ ├── menus.fr.toml │ │ │ │ └── menus.nl.toml │ │ │ ├── netlify.toml │ │ │ ├── params.fr.toml │ │ │ ├── params.nl.toml │ │ │ ├── params.toml │ │ │ └── server.toml │ │ ├── ci/ │ │ │ └── hugo.toml │ │ ├── development/ │ │ │ └── params.toml │ │ └── postcss.config.js │ ├── content/ │ │ ├── en/ │ │ │ ├── _index.md │ │ │ ├── about.md │ │ │ ├── blog/ │ │ │ │ ├── _index.md │ │ │ │ ├── first-post.md │ │ │ │ ├── fourth-post.md │ │ │ │ ├── second-post.md │ │ │ │ └── third-post.md │ │ │ ├── browserconfig.md │ │ │ ├── cookies.md │ │ │ ├── privacy.md │ │ │ └── team/ │ │ │ ├── _content.gotmpl │ │ │ └── _index.en.md │ │ ├── fr/ │ │ │ ├── _index.md │ │ │ ├── about.md │ │ │ ├── blog/ │ │ │ │ ├── _index.md │ │ │ │ ├── first-post.md │ │ │ │ ├── fourth-post.md │ │ │ │ ├── second-post.md │ │ │ │ └── third-post.md │ │ │ ├── browserconfig.md │ │ │ ├── cookies.md │ │ │ └── privacy.md │ │ └── nl/ │ │ ├── _index.md │ │ ├── about.md │ │ ├── blog/ │ │ │ ├── _index.md │ │ │ ├── first-post.md │ │ │ ├── fourth-post.md │ │ │ ├── second-post.md │ │ │ └── third-post.md │ │ ├── browserconfig.md │ │ ├── cookies.md │ │ └── privacy.md │ ├── data/ │ │ └── server.toml │ ├── go.mod │ ├── go.sum │ ├── hinode.work │ ├── hinode.work.sum │ ├── hugo_stats.json │ └── layouts/ │ └── _partials/ │ ├── footer/ │ │ └── footer.html │ └── templates/ │ └── script.html ├── go.mod ├── go.sum ├── hugo_stats.json ├── i18n/ │ ├── de.yaml │ ├── en.yaml │ ├── fr.yaml │ ├── nl.yaml │ ├── pl.yaml │ ├── pt-br.yaml │ ├── zh-hans.yaml │ └── zh-hant.yaml ├── layouts/ │ ├── 404.html │ ├── _markup/ │ │ ├── render-blockquote.html │ │ ├── render-codeblock-math.html │ │ ├── render-codeblock.html │ │ ├── render-heading.html │ │ ├── render-image.html │ │ ├── render-link.html │ │ ├── render-passthrough.html │ │ └── render-table.html │ ├── _partials/ │ │ ├── assets/ │ │ │ ├── adapters/ │ │ │ │ ├── cloudinary.html │ │ │ │ ├── hugo.html │ │ │ │ ├── imagekit-rewrite.html │ │ │ │ ├── imagekit.html │ │ │ │ └── imgix.html │ │ │ ├── args.html │ │ │ ├── breadcrumb.html │ │ │ ├── button.html │ │ │ ├── card-group.html │ │ │ ├── card-icon.html │ │ │ ├── card.html │ │ │ ├── carousel-item.html │ │ │ ├── download.html │ │ │ ├── featured-illustration.html │ │ │ ├── helpers/ │ │ │ │ ├── GetDimension.html │ │ │ │ ├── image-definition.html │ │ │ │ ├── image-dimension.html │ │ │ │ ├── image-rewrite.html │ │ │ │ ├── image-set.html │ │ │ │ ├── navbar-item.html │ │ │ │ ├── navbar-languages.html │ │ │ │ ├── navbar-mode.html │ │ │ │ ├── navbar-render-menu.html │ │ │ │ ├── navbar-versions.html │ │ │ │ └── sidebar-menu-entry.html │ │ │ ├── hero-image.html │ │ │ ├── image.html │ │ │ ├── link.html │ │ │ ├── links.html │ │ │ ├── live-card.html │ │ │ ├── live-image.html │ │ │ ├── live-pages.html │ │ │ ├── menu-item.html │ │ │ ├── modals.html │ │ │ ├── nav-item.html │ │ │ ├── nav.html │ │ │ ├── navbar.html │ │ │ ├── page-alert.html │ │ │ ├── pagination.html │ │ │ ├── persona.html │ │ │ ├── section-title.html │ │ │ ├── sidebar.html │ │ │ ├── spinner.html │ │ │ ├── stack.html │ │ │ ├── table.html │ │ │ ├── testimonial.html │ │ │ ├── timeline.html │ │ │ ├── toast.html │ │ │ ├── toc-dropdown.html │ │ │ ├── toc-headings.html │ │ │ ├── toc-main.html │ │ │ ├── toc-parse-content.html │ │ │ ├── toc.html │ │ │ ├── version.html │ │ │ └── video.html │ │ ├── footer/ │ │ │ ├── footer.html │ │ │ ├── scripts.html │ │ │ ├── social.html │ │ │ └── toast-container.html │ │ ├── head/ │ │ │ ├── favicon.html │ │ │ ├── head.html │ │ │ ├── icons.html │ │ │ ├── opengraph.html │ │ │ ├── seo.html │ │ │ ├── structured-data.html │ │ │ ├── stylesheet-core.html │ │ │ ├── stylesheet.html │ │ │ └── twitter_cards.html │ │ ├── page/ │ │ │ ├── articles.html │ │ │ ├── blocks.html │ │ │ ├── metadata.html │ │ │ ├── navbar-extra.html │ │ │ ├── navigation.html │ │ │ ├── sharing.html │ │ │ ├── sidebar-offcanvas.html │ │ │ ├── sidebar.html │ │ │ ├── tags.html │ │ │ ├── taxonomy-list.html │ │ │ ├── taxonomy-tag.html │ │ │ └── thumbnail.html │ │ ├── templates/ │ │ │ └── script.html │ │ └── utilities/ │ │ ├── AddModule.html │ │ ├── GetBackgroundStyle.html │ │ ├── GetIllustration.html │ │ ├── GetIncludeTOC.html │ │ ├── GetLink.html │ │ ├── GetMetadata.html │ │ ├── GetSharing.html │ │ ├── InitModules.html │ │ └── git.html │ ├── _shortcodes/ │ │ ├── abbr.html │ │ ├── abbr.md │ │ ├── accordion-item.html │ │ ├── accordion-item.md │ │ ├── accordion.html │ │ ├── accordion.md │ │ ├── alert.html │ │ ├── alert.md │ │ ├── args.html │ │ ├── args.md │ │ ├── badge.html │ │ ├── badge.md │ │ ├── breadcrumb.html │ │ ├── breadcrumb.md │ │ ├── button-group.html │ │ ├── button-group.md │ │ ├── button.html │ │ ├── button.md │ │ ├── card-group.html │ │ ├── card-group.md │ │ ├── card.html │ │ ├── card.md │ │ ├── carousel.html │ │ ├── carousel.md │ │ ├── collapse.html │ │ ├── collapse.md │ │ ├── command.html │ │ ├── command.md │ │ ├── docs.html │ │ ├── docs.md │ │ ├── example-bookshop.html │ │ ├── example-bookshop.md │ │ ├── example.html │ │ ├── example.md │ │ ├── file.html │ │ ├── file.md │ │ ├── image.html │ │ ├── image.md │ │ ├── img.html │ │ ├── img.md │ │ ├── ins.html │ │ ├── ins.md │ │ ├── kbd.html │ │ ├── kbd.md │ │ ├── link.html │ │ ├── link.md │ │ ├── mark.html │ │ ├── mark.md │ │ ├── nav-item.html │ │ ├── nav-item.md │ │ ├── nav.html │ │ ├── nav.md │ │ ├── navbar.html │ │ ├── navbar.md │ │ ├── persona.html │ │ ├── persona.md │ │ ├── release.html │ │ ├── release.md │ │ ├── spinner.html │ │ ├── spinner.md │ │ ├── sub.html │ │ ├── sub.md │ │ ├── sup.html │ │ ├── sup.md │ │ ├── table.html │ │ ├── table.md │ │ ├── testimonial.html │ │ ├── testimonial.md │ │ ├── timeline.html │ │ ├── timeline.md │ │ ├── toast.html │ │ ├── toast.md │ │ ├── tooltip.html │ │ ├── tooltip.md │ │ ├── video.html │ │ ├── video.md │ │ ├── vimeo.html │ │ ├── vimeo.md │ │ ├── youtube.html │ │ └── youtube.md │ ├── alias.html │ ├── baseof.html │ ├── baseof.xml │ ├── body.html │ ├── docs/ │ │ ├── all.html │ │ ├── body.html │ │ ├── footer.html │ │ └── header.html │ ├── footer.html │ ├── form/ │ │ └── single.html │ ├── header.html │ ├── index.redir │ ├── list.html │ ├── minimal/ │ │ ├── body.html │ │ ├── footer.html │ │ └── header.html │ ├── robots.txt │ ├── single.html │ ├── single.xml │ ├── tags/ │ │ └── list.html │ └── toc.html ├── netlify.toml ├── package.json ├── static/ │ └── js/ │ └── alias.js └── theme.toml
SYMBOL INDEX (29 symbols across 10 files)
FILE: assets/js/animation.js
function reveal (line 1) | function reveal () {
FILE: assets/js/critical/_cookie.js
function hasConsent (line 2) | function hasConsent (category) {
function getLocalStorage (line 7) | function getLocalStorage (key, def, category) {
function setLocalStorage (line 15) | function setLocalStorage (key, val, category) {
function getSessionStorage (line 21) | function getSessionStorage (key, def, category) {
function setSessionStorage (line 29) | function setSessionStorage (key, val, category) {
FILE: assets/js/critical/color.js
function getPreferredTheme (line 18) | function getPreferredTheme() {
function getTheme (line 23) | function getTheme() {
function setTheme (line 34) | function setTheme(theme) {
function toggleTheme (line 51) | function toggleTheme() {
function updateSelectors (line 56) | function updateSelectors() {
FILE: assets/js/critical/languageSelector.js
function getLanguage (line 11) | function getLanguage () {
function setLanguage (line 16) | function setLanguage (language) {
function applyLanguage (line 21) | function applyLanguage (language, href) {
FILE: assets/js/nav.js
function updateDropdown (line 1) | function updateDropdown (element, id, label) {
FILE: assets/js/navbar.js
function sleep (line 9) | function sleep(ms) {
function getStyle (line 13) | function getStyle(el, styleProp) {
function updateNavbarColor (line 25) | function updateNavbarColor () {
function getBackgroundColor (line 62) | function getBackgroundColor (section) {
function adaptToSection (line 74) | function adaptToSection (section) {
function isLightColor (line 100) | function isLightColor (section, color) {
function parseRGB (line 120) | function parseRGB (color) {
function calculateLuminance (line 132) | function calculateLuminance (r, g, b) {
function updateNavbar (line 142) | function updateNavbar () {
FILE: assets/js/sharing.js
function webShareAPI (line 6) | function webShareAPI (title, description, link) {
FILE: assets/js/sidebar-group.js
function init (line 6) | function init () {
FILE: assets/js/sidebar-toggle.js
function setCollapsed (line 4) | function setCollapsed (nav, collapsed) {
function init (line 40) | function init () {
FILE: assets/js/testimonial.js
function adjustCarouselHeight (line 1) | function adjustCarouselHeight () {
Condensed preview — 453 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (939K chars).
[
{
"path": ".eslintrc.yml",
"chars": 180,
"preview": "env:\n browser: true\n es6: true\nextends:\n - standard\nglobals:\n Atomics: readonly\n SharedArrayBuffer: readonly\nparser"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.md",
"chars": 1588,
"preview": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: \"[BUG]\"\nlabels: bug\nassignees: ''\n\n---\n\n<!---\nPlea"
},
{
"path": ".github/ISSUE_TEMPLATE/feature_request.md",
"chars": 583,
"preview": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: enhancement\nassignees: ''\n\n---\n\n## P"
},
{
"path": ".github/codeql/codeql-config.yml",
"chars": 179,
"preview": "paths:\n - 'assets/js'\npaths-ignore:\n - '**/vendor'\n - '**/critical/languageSelector.js'\n - '**/critical/color.js'\n "
},
{
"path": ".github/dependabot.yml",
"chars": 439,
"preview": "# Please see the documentation for all configuration options:\n# https://docs.github.com/github/administering-a-repositor"
},
{
"path": ".github/release.yml",
"chars": 527,
"preview": "changelog:\n exclude:\n labels:\n - skip-changelog\n categories:\n - title: ❗ Breaking Changes\n labels:\n "
},
{
"path": ".github/workflows/auto-merge.yml",
"chars": 1744,
"preview": "# Source: https://nicolasiensen.github.io/2022-07-23-automating-dependency-updates-with-dependabot-github-auto-merge-and"
},
{
"path": ".github/workflows/codeql.yml",
"chars": 4754,
"preview": "# For most projects, this workflow file will not need changing; you simply need\n# to commit it to your repository.\n#\n# Y"
},
{
"path": ".github/workflows/lint-build.yml",
"chars": 4067,
"preview": "name: Lint & build\non:\n workflow_dispatch:\n push:\n tags:\n - v*\n branches: [ main, beta ]\n pull_request:\n "
},
{
"path": ".github/workflows/mod-update.yml",
"chars": 1724,
"preview": "name: Update Hugo dependencies\non:\n workflow_dispatch:\n schedule:\n - cron: '0 3 * * *' # run daily at 03:00 AM\n\nper"
},
{
"path": ".github/workflows/release.yml",
"chars": 1069,
"preview": "name: Release\non:\n workflow_dispatch:\n push:\n branches:\n - main\n - beta\n\nenv:\n HUSKY: 0\n\npermissions:\n "
},
{
"path": ".gitignore",
"chars": 203,
"preview": "_vendor/\nprebuild/\nprebuild-headers/\nprebuild-headers-dev/\nprebuild-headers-prod/\npublic/\nresources/\nnode_modules/\n\n.DS_"
},
{
"path": ".gitmodules",
"chars": 0,
"preview": ""
},
{
"path": ".husky/commit-msg",
"chars": 33,
"preview": "npx --no -- commitlint --edit $1\n"
},
{
"path": ".husky/install.mjs",
"chars": 205,
"preview": "// Skip Husky install in production and CI\nif (process.env.NODE_ENV === 'production' || process.env.CI === 'true') {\n "
},
{
"path": ".husky/pre-commit",
"chars": 9,
"preview": "npm test\n"
},
{
"path": ".markdownlint-cli2.jsonc",
"chars": 249,
"preview": "{\n \"config\": {\n \"default\": true,\n \"MD013\": false,\n \"MD024\": false,\n \"MD026\": false,\n \"MD034\": false,\n "
},
{
"path": ".stylelintignore",
"chars": 226,
"preview": "assets/scss/common/_variables.scss\nassets/scss/components/_syntax-dark.scss\nassets/scss/components/_syntax-light.scss\nas"
},
{
"path": ".stylelintrc.json",
"chars": 1148,
"preview": "{\n \"extends\": \"stylelint-config-standard-scss\",\n \"rules\": {\n \"no-empty-source\": null,\n \"scss/comment-no-empty\": "
},
{
"path": "CLAUDE.md",
"chars": 21921,
"preview": "# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\n## "
},
{
"path": "LICENSE",
"chars": 1088,
"preview": "MIT License\n\nCopyright (c) 2022 - 2026 Hinode Team / Mark Dumay\n\nPermission is hereby granted, free of charge, to any pe"
},
{
"path": "README.md",
"chars": 7039,
"preview": "# Hugo Theme Hinode\n\n<!-- markdownlint-disable MD033 -->\n<!-- Tagline -->\n<p align=\"center\">\n <b>A clean documentatio"
},
{
"path": "archetypes/default.md",
"chars": 229,
"preview": "---\n# author: \ntitle: {{ replace .Name \"-\" \" \" | title }}\ndate: {{ .Date }}\ndraft: true\n# layout: \n# description: \n# tag"
},
{
"path": "assets/js/alert.js",
"chars": 572,
"preview": "/* eslint-disable no-undef */\nconst alert = document.getElementById('page-alert')\nconst closeBtn = document.getElementBy"
},
{
"path": "assets/js/animation.js",
"chars": 511,
"preview": "function reveal () {\n const reveals = document.querySelectorAll('.reveal')\n\n for (let i = 0; i < reveals.length; i++) "
},
{
"path": "assets/js/clipboard.js",
"chars": 2249,
"preview": "/*\nSource:\n - https://simplernerd.com/hugo-add-copy-to-clipboard-button/\n*/\n\nconst svgCopy =\n '<svg xmlns=\"http://www."
},
{
"path": "assets/js/critical/_cookie.js",
"chars": 661,
"preview": "/* eslint-disable no-unused-vars */\nfunction hasConsent (category) {\n // TODO: placeholder function\n return true\n}\n\nfu"
},
{
"path": "assets/js/critical/color.js",
"chars": 2640,
"preview": "{{- if (or site.Params.main.enableDarkMode site.Params.main.colorMode.enabled) -}}\n\n/*!\n * Color mode toggler for Bootst"
},
{
"path": "assets/js/critical/languageSelector.js",
"chars": 2779,
"preview": "/* eslint-disable */\n{{- if site.Params.main.enableLanguageSelectionStorage -}}\n{{- $folder := (urls.Parse site.BaseURL)"
},
{
"path": "assets/js/critical/sidebar-pre-init.js",
"chars": 293,
"preview": "// Pre-apply sidebar collapsed state before body renders to prevent label flash.\n(function () {\n try {\n if (localSto"
},
{
"path": "assets/js/menu.js",
"chars": 669,
"preview": "const url = new URL(window.location.href)\nconst menu = url.searchParams.get('menu')\nconst child = url.searchParams.get('"
},
{
"path": "assets/js/modal.js",
"chars": 182,
"preview": "document.addEventListener('hide.bs.modal', function (_event) {\n // Remove the focus from the active element\n if (docum"
},
{
"path": "assets/js/nav.js",
"chars": 1624,
"preview": "function updateDropdown (element, id, label) {\n const dropdown = document.getElementById(element)\n if (dropdown != nul"
},
{
"path": "assets/js/navbar.js",
"chars": 7320,
"preview": "const fixed = {{ site.Params.navigation.fixed }}\nconst navbar = document.querySelector('.navbar')\nconst togglers = docum"
},
{
"path": "assets/js/optional/.gitkeep",
"chars": 0,
"preview": ""
},
{
"path": "assets/js/popover.js",
"chars": 245,
"preview": "const popoverTriggerList = document.querySelectorAll('[data-bs-toggle=\"popover\"]')\n// eslint-disable-next-line no-undef,"
},
{
"path": "assets/js/sharing.js",
"chars": 1009,
"preview": "{{- if site.Params.sharing.webshare -}}\n\n// Adapted from: https://dev.to/j471n/how-to-share-anything-from-your-website-b"
},
{
"path": "assets/js/sidebar-group.js",
"chars": 1321,
"preview": "(function () {\n 'use strict'\n\n var STORAGE_KEY = 'sidebar-secondary-collapsed'\n\n function init () {\n var nav = doc"
},
{
"path": "assets/js/sidebar-toggle.js",
"chars": 2266,
"preview": "(function () {\n 'use strict'\n\n function setCollapsed (nav, collapsed) {\n var storageKey = nav.getAttribute('data-st"
},
{
"path": "assets/js/testimonial.js",
"chars": 698,
"preview": "function adjustCarouselHeight () {\n let max = 0\n document.querySelectorAll('.testimonials .carousel-item').forEach(con"
},
{
"path": "assets/js/toast.js",
"chars": 1008,
"preview": "// Script to move all embedded toast messages into a container with id 'toast-container'. The container ensures multiple"
},
{
"path": "assets/js/toc.js",
"chars": 427,
"preview": "const btnTOCShowMore = document.getElementById('btnTOCShowMore')\nif (btnTOCShowMore !== null) {\n btnTOCShowMore.addEven"
},
{
"path": "assets/js/tooltip.js",
"chars": 330,
"preview": "// Bootstrap tooltip example: https://getbootstrap.com/docs/5.2/components/tooltips/\nconst tooltipTriggerList = document"
},
{
"path": "assets/js/vendor/.gitkeep",
"chars": 0,
"preview": ""
},
{
"path": "assets/js/video.js",
"chars": 149,
"preview": "document.querySelectorAll('[data-video-padding]').forEach(element => {\n element.style.paddingBottom = element.getAttrib"
},
{
"path": "assets/scss/app-dart.scss",
"chars": 2265,
"preview": "@use \"sass:meta\";\n\n// Define template variables\n@use \"hugo:vars\" as h; // note: modified for dart-sass\n\n// Include defau"
},
{
"path": "assets/scss/app.scss",
"chars": 2120,
"preview": "// Define template variables\n@import \"hugo:vars\";\n\n// Include default variable overrides\n@import \"common/variables.scss\""
},
{
"path": "assets/scss/common/_animation.scss",
"chars": 1826,
"preview": ".rotate-5 {\n transform: rotate(5deg);\n}\n\n.rotate-n5 {\n transform: rotate(-5deg);\n}\n\n@media (prefers-reduced-motion"
},
{
"path": "assets/scss/common/_export.scss",
"chars": 1441,
"preview": "// stylelint-disable selector-pseudo-class-no-unknown\n\n// scss-docs-start export\n:hinode-theme {\n --accordion-icon-ac"
},
{
"path": "assets/scss/common/_icons.scss",
"chars": 2544,
"preview": "// scss-docs-start icons\n$form-check-input-checked-bg-image: url(\"#{$base-url}icons/form-check-input-checked"
},
{
"path": "assets/scss/common/_masonry.scss",
"chars": 380,
"preview": ".masonry {\n --masonry-padding: 4px;\n}\n\n.m-row {\n display: flex;\n flex-wrap: wrap;\n padding: 0 var(--masonry-"
},
{
"path": "assets/scss/common/_scrollbar.scss",
"chars": 749,
"preview": "@mixin scrollbar(\n $foreground-color: var(--bs-primary),\n $background-color: var(--bs-tertiary-bg),\n $size: 10px\n) {\n"
},
{
"path": "assets/scss/common/_styles.scss",
"chars": 2484,
"preview": "@if $enable-dark-mode {\n [data-bs-theme-animate=\"true\"] body { \n transition: background-color 0.5s, color 0.5s"
},
{
"path": "assets/scss/common/_utilities-custom.scss",
"chars": 1764,
"preview": "// Custom Bootstrap utilities extensions\n// This file must be imported BEFORE bootstrap.scss to ensure utilities are pro"
},
{
"path": "assets/scss/common/_utilities-responsive.scss",
"chars": 375,
"preview": "// Responsive utilities that require Bootstrap variables to be defined\n// Must be imported AFTER bootstrap.scss\n\n// Make"
},
{
"path": "assets/scss/common/_variables-dark.scss",
"chars": 3663,
"preview": "@if $enable-dark-mode {\n @include color-mode(dark) {\n --bs-primary: #{$primary-text-emphasis-dark};\n --"
},
{
"path": "assets/scss/common/_variables-dart.scss",
"chars": 3171,
"preview": "// Bootstrap variables overrides for theme\n$enable-negative-margins: true;\n$enable-important-utilities: true !d"
},
{
"path": "assets/scss/common/_variables.scss",
"chars": 2817,
"preview": "// Bootstrap variables overrides for theme\n$enable-negative-margins: true;\n$enable-important-utilities: true !d"
},
{
"path": "assets/scss/components/_abbr.scss",
"chars": 554,
"preview": "@media (hover: none) {\n abbr[title] {\n position: relative;\n text-decoration: underline dotted;\n }\n "
},
{
"path": "assets/scss/components/_alert.scss",
"chars": 416,
"preview": ".alert code {\n color: inherit;\n}\n\n/* stylelint-disable declaration-block-no-redundant-longhand-properties */\n.alert a"
},
{
"path": "assets/scss/components/_blockquote.scss",
"chars": 1191,
"preview": ".blockquote {\n border-left: 0.3rem solid;\n border-color: $secondary;\n padding: 1rem 1.5rem;\n}\n\n.blockquote-aler"
},
{
"path": "assets/scss/components/_button.scss",
"chars": 1667,
"preview": "/* Set hover color for primary button to white (overrides color contrast defined in mixin) */\n.btn-outline-primary:hover"
},
{
"path": "assets/scss/components/_card.scss",
"chars": 4601,
"preview": "// add zoom animation with opacity change on card img hover\n// source: https://stackoverflow.com/a/43816376\n\n.card-img-b"
},
{
"path": "assets/scss/components/_carousel.scss",
"chars": 198,
"preview": ".carousel-inner {\n border-radius: #{$theme-border-radius};\n}\n\n.gradient {\n width: 100%;\n height: 100%;\n left"
},
{
"path": "assets/scss/components/_clipboard.scss",
"chars": 679,
"preview": "// Adapted from https://simplernerd.com/hugo-add-copy-to-clipboard-button/\n\n.clipboard-button {\n position: absolute;\n"
},
{
"path": "assets/scss/components/_command.scss",
"chars": 1017,
"preview": "/* Adapted from PrismJS 1.29.0\nhttps://prismjs.com/download.html#themes=prism&plugins=command-line */\n\n/**\n * prism.js d"
},
{
"path": "assets/scss/components/_docs.scss",
"chars": 429,
"preview": ".docs-controls .nav-link,\n.file-controls .nav-link {\n border-top-left-radius: #{$theme-border-radius};\n border-top"
},
{
"path": "assets/scss/components/_feature.scss",
"chars": 63,
"preview": ".feature {\n margin-top: calc(0.3 * var(--navbar-offset));\n}\n"
},
{
"path": "assets/scss/components/_footer.scss",
"chars": 856,
"preview": ".footer {\n // background-color: $gray-800 if($enable-important-utilities, !important, null);\n color: var(--bs-seco"
},
{
"path": "assets/scss/components/_img.scss",
"chars": 510,
"preview": ".img-wrap {\n overflow: hidden;\n position: relative;\n}\n\n.img-wrap img {\n height: 100%;\n width: 100%;\n obje"
},
{
"path": "assets/scss/components/_kbd.scss",
"chars": 96,
"preview": "// scss-docs-start kbd\nkbd {\n border-radius: #{$theme-border-radius};\n}\n\n// scss-docs-end kbd"
},
{
"path": "assets/scss/components/_nav.scss",
"chars": 3970,
"preview": ".nav-tabs {\n border: none !important;\n}\n\n.nav-callout, .tab-content {\n --#{$prefix}nav-callout-bg: var(--#{$prefix"
},
{
"path": "assets/scss/components/_navbar.scss",
"chars": 10545,
"preview": "// stylelint-disable annotation-no-unknown\n\n// adapted from https://www.codeply.com/p/UsTEwDkzNp#\n.checkbox {\n\topacity: "
},
{
"path": "assets/scss/components/_pagination.scss",
"chars": 444,
"preview": ".pagination {\n --bs-pagination-bg: var(--bs-primary-bg-subtle);\n --bs-pagination-color: var(--bs-body-color);\n "
},
{
"path": "assets/scss/components/_persona.scss",
"chars": 46,
"preview": ".persona {\n min-height: 320px !important\n}\n"
},
{
"path": "assets/scss/components/_popover.scss",
"chars": 39,
"preview": ".popover-header {\n margin-top: 0;\n}\n"
},
{
"path": "assets/scss/components/_sidebar.scss",
"chars": 6395,
"preview": "// scss-docs-start sidebar\n.sidebar {\n top: var(--navbar-offset);\n}\n\n.sidebar-overflow {\n top: calc(var(--navbar-o"
},
{
"path": "assets/scss/components/_syntax-dark.scss",
"chars": 5112,
"preview": "/* Background */ .bg { color: #c9d1d9; background-color: #0d1117; }\n/* PreWrapper */ .chroma { color: #c9d1d9; backgroun"
},
{
"path": "assets/scss/components/_syntax-dart.scss",
"chars": 1326,
"preview": "// stylelint-disable annotation-no-unknown\n@import \"syntax-light\";\n\n.bg,\n.chroma,\n.chroma .err {\n // set to transpare"
},
{
"path": "assets/scss/components/_syntax-light.scss",
"chars": 5232,
"preview": "/* Background */ .bg { background-color: #ffffff; }\n/* PreWrapper */ .chroma { background-color: #ffffff; }\n/* Other */ "
},
{
"path": "assets/scss/components/_syntax.scss",
"chars": 1373,
"preview": "// stylelint-disable annotation-no-unknown\n@import \"syntax-light\";\n\n.bg,\n.chroma,\n.chroma .err {\n // set to transpare"
},
{
"path": "assets/scss/components/_table.scss",
"chars": 922,
"preview": ".datatable-container {\n border-bottom: none if($enable-important-utilities, !important, null);\n}\n\n.datatable-bottom {"
},
{
"path": "assets/scss/components/_testimonial.scss",
"chars": 304,
"preview": ".testimonial-img {\n height: 10vw;\n width: 10vw;\n background-color: var(--#{$prefix}body-bg);\n}\n\n.testimonial-lo"
},
{
"path": "assets/scss/components/_timeline.scss",
"chars": 5847,
"preview": "// scss-docs-start timeline\n$connector-radius: 0.8rem;\n$semi-circle-radius: 8rem;\n$semi-circle-border: 0.2rem;\n\n:root {\n"
},
{
"path": "assets/scss/components/_toast.scss",
"chars": 77,
"preview": ".toast {\n border-radius: #{$theme-border-radius};\n overflow: hidden;\n}\n"
},
{
"path": "assets/scss/components/_toc.scss",
"chars": 2475,
"preview": "//\n// Table of contents sidebar & drop-down panel\n//\n// scss-docs-start toc\n.toc-sidebar {\n top: calc(var(--navbar-of"
},
{
"path": "assets/scss/components/_tooltip.scss",
"chars": 175,
"preview": ".btn-tooltip a {\n text-decoration: none;\n}\n\n.btn-tooltip a[href] {\n color: var(--bs-link-color) !important;\n te"
},
{
"path": "assets/scss/components/_video.scss",
"chars": 1004,
"preview": ".video-embedded {\n position: relative;\n padding-bottom: 56.25%;\n height: 0;\n overflow: hidden;\n border-ra"
},
{
"path": "assets/scss/helpers/_colored-links.scss",
"chars": 1029,
"preview": "// scss-docs-start colored-links\n$custom-colors: (\n \"primary\": \"light\", \n \"secondary\": \"light\", \n \"success\": \"l"
},
{
"path": "assets/scss/helpers/_display.scss",
"chars": 908,
"preview": ".hidden {\n display: none;\n}\n\n// stylelint-disable annotation-no-unknown\n\n// scss-docs-start display-color\n.d-none-lig"
},
{
"path": "assets/scss/layouts/_reboot.scss",
"chars": 52,
"preview": "pre {\n padding: $spacer;\n margin-bottom: 0;\n}\n"
},
{
"path": "assets/scss/layouts/_type.scss",
"chars": 636,
"preview": "//\n// Headings\n//\nh1 {\n margin-top: $spacer * 2.5;\n scroll-margin-top: var(--navbar-offset);\n}\n\nh2 {\n margin-to"
},
{
"path": "assets/scss/theme/_variables.scss",
"chars": 127,
"preview": "// Placeholder to quickly add your own theme variable overrides\n// The file is included at the beginning of the build pi"
},
{
"path": "assets/scss/theme/base.scss",
"chars": 134,
"preview": "// Placeholder for themes extending the core Hinode theme\n// The file is included last in the build pipeline, but prior "
},
{
"path": "assets/scss/theme/fonts.scss",
"chars": 3485,
"preview": "/*!\n * Copyright (c) 2016-2020 The Inter Project Authors.\n * \"Inter\" is trademark of Rasmus Andersson.\n * https://github"
},
{
"path": "assets/scss/theme/theme.scss",
"chars": 97,
"preview": "// Placeholder to quickly add your own styles\n// The file is included last in the build pipeline\n"
},
{
"path": "assets/scss/vendor/.gitkeep",
"chars": 0,
"preview": ""
},
{
"path": "commitlint.config.js",
"chars": 64,
"preview": "module.exports = {extends: ['@commitlint/config-conventional']}\n"
},
{
"path": "config/_default/hugo.toml",
"chars": 3976,
"preview": "# toml-docs-start main\ntitle = \"Hinode\"\ncopyright = \"Copyright © 2026 Hinode Team\"\nenableGitInfo = true\n# toml-docs-end "
},
{
"path": "config/_default/languages.toml",
"chars": 600,
"preview": "# toml-docs-start lang-main\n[en]\n languageName = \"English\"\n contentDir = \"content\"\n weight = 1\n# toml-docs-end "
},
{
"path": "config/_default/markup.toml",
"chars": 1154,
"preview": "defaultMarkdownHandler = \"goldmark\"\n\n[highlight]\n anchorLineNos = false\n codeFences = true\n guessSyntax = true\n"
},
{
"path": "config/_default/menus/menus.en.toml",
"chars": 409,
"preview": "[[main]]\n name = \"Home\"\n pageRef = \"/\"\n weight = 10\n\n[[main]]\n name = \"Tags\"\n pageRef = \"/tags\"\n weight = 20\n\n[[so"
},
{
"path": "config/_default/params.toml",
"chars": 7532,
"preview": "# toml-docs-start main\n[main]\n separator = \"-\"\n description = \"Hinode is a clean documentation and blog theme for "
},
{
"path": "config/_default/server.toml",
"chars": 1622,
"preview": "# Auto-generated file - do not modify\n\n[[headers]]\n for = '/**'\n\n [headers.values]\n Access-Control-Allow-Origin = '"
},
{
"path": "config/ci/hugo.toml",
"chars": 986,
"preview": "# cachedir default on POSIX: '/tmp/hugo_cache_runner'\n# cachedir default on Windows: '~\\AppData\\Local\\hugo_cache'\n# cach"
},
{
"path": "config/development/params.toml",
"chars": 440,
"preview": "# Development-specific parameters for Hinode theme\n\n[modules.hinode.csp]\n frame-ancestors = [\n \"'self'\",\n "
},
{
"path": "config/postcss.config.js",
"chars": 4032,
"preview": "const autoprefixer = require('autoprefixer')({})\nconst cssnano = require('cssnano')({\n preset: ['advanced', {\n disca"
},
{
"path": "config/production/deployment.toml",
"chars": 761,
"preview": "# toml-docs-start az-blob\n# By default, files are uploaded in an arbitrary order.\n# Files that match the regular express"
},
{
"path": "config/production/hugo.toml",
"chars": 20,
"preview": "canonifyURLs = false"
},
{
"path": "config/production/params.toml",
"chars": 128,
"preview": "# Production-specific parameters\n\n[style]\n purge = true\n\n[modules.hinode.csp]\n frame-ancestors = [\n \"'self'"
},
{
"path": "content/_index.md",
"chars": 125,
"preview": "---\ntitle: Welcome to Hinode!\ndescription: A clean documentation and blog theme for your Hugo site based on Bootstrap 5."
},
{
"path": "content/_modals/_index.md",
"chars": 109,
"preview": "---\ntitle: Modal elements\ncascade:\n- build:\n list: local\n publishResources: false\n render: never\n---"
},
{
"path": "data/.gitkeep",
"chars": 0,
"preview": ""
},
{
"path": "data/dimensions.yml",
"chars": 785,
"preview": "- ratio: 4x3\n dimensions:\n - 576x432\n - 768x576\n - 992x744\n - 1200x900\n - 1400x1050\n - 2800x2100\n- ra"
},
{
"path": "data/netlify.toml",
"chars": 1095,
"preview": "# toml-docs-start netlify\n[build]\n publish = \"exampleSite/public\"\n command = \"HUGO_HINODE_VERSION=$(git describe -"
},
{
"path": "data/server.toml",
"chars": 1222,
"preview": "# toml-docs-start server-config\n[[headers]]\n for = \"/**\"\n [headers.values]\n Strict-Transport-Security = \"ma"
},
{
"path": "data/structures/abbr.yml",
"chars": 1078,
"preview": "comment: >-\n Use the abbr shortcode to show the long form of an abbreviation. The\n abbreviation data is centrally stor"
},
{
"path": "data/structures/accordion-item.yml",
"chars": 531,
"preview": "comment: >-\n Defines an individual accordion item.\nicon: expand_circle_down\narguments:\n title:\n release: v1.0.0\n "
},
{
"path": "data/structures/accordion.yml",
"chars": 719,
"preview": "comment: >-\n Use the accordion shortcode to show a group of vertically collapsing and\n expanding items. Add accordion-"
},
{
"path": "data/structures/alert.yml",
"chars": 735,
"preview": "comment: >-\n Use the alert shortcode to display a contextual feedback message. The inner\n content is used as alert tex"
},
{
"path": "data/structures/args.yml",
"chars": 1696,
"preview": "comment: >-\n Generates a table of structured arguments defined in a data file identified\n by a structure name.\nicon: t"
},
{
"path": "data/structures/background.yml",
"chars": 112,
"preview": "comment: >-\n Applies styling to the background of an element.\ngroup: partial\narguments:\n background:\n class:\n"
},
{
"path": "data/structures/badge.yml",
"chars": 204,
"preview": "comment: Use the badge shortcode to enrich headings.\nicon: badge\narguments:\n title:\n preview: true\n class:\n color:"
},
{
"path": "data/structures/breadcrumb.yml",
"chars": 186,
"preview": "comment: >-\n Displays the current page's location within the site's navigational\n hierarchy.\nicon: segment\narguments:\n"
},
{
"path": "data/structures/button-group.yml",
"chars": 624,
"preview": "comment: >-\n Displays a group of related buttons. Add button inner elements for each\n button.\nicon: buttons_alt\nchildr"
},
{
"path": "data/structures/button.yml",
"chars": 1851,
"preview": "comment: >-\n Display a button with a hyperlink.\nicon: touch_app\narguments:\n title:\n preview: true\n class:\n color:"
},
{
"path": "data/structures/card-group.yml",
"chars": 3590,
"preview": "comment: >-\n Displays a responsive grid of Bootstrap cards rendered from a list of pages,\n with optional pagination or"
},
{
"path": "data/structures/card-icon.yml",
"chars": 147,
"preview": "comment: >-\n Renders a card icon including optional rounding.\ngroup: partial\narguments:\n icon:\n padding:\n icon-round"
},
{
"path": "data/structures/card.yml",
"chars": 3371,
"preview": "comment: >-\n Displays a Bootstrap card that links to a content page. Individual arguments\n such as title, href, and th"
},
{
"path": "data/structures/carousel-item.yml",
"chars": 297,
"preview": "comment: Renders a carousel item with a responsive image.\nicon: photo\narguments:\n page:\n src:\n preview: true\n rati"
},
{
"path": "data/structures/carousel.yml",
"chars": 588,
"preview": "comment: >-\n Displays a carousel of several images. Add carousel-item inner elements to\n define the individual image s"
},
{
"path": "data/structures/collapse.yml",
"chars": 469,
"preview": "comment: Defines a hidden panel that can be revealed by a trigger.\nicon: collapse_content\narguments:\n id:\n preview: "
},
{
"path": "data/structures/command.yml",
"chars": 627,
"preview": "comment: >-\n Generates terminal output for bash, powershell, or sql shell languages.\nicon: terminal\narguments:\n user:\n"
},
{
"path": "data/structures/docs.yml",
"chars": 340,
"preview": "comment: >-\n Captures a code snippet from a supported input file using named section\n markers. The captured snippet is"
},
{
"path": "data/structures/download.yml",
"chars": 304,
"preview": "comment: Generates a download button or link.\ngroup: partial\narguments:\n download:\n title:\n class:\n color:\n defau"
},
{
"path": "data/structures/example.yml",
"chars": 842,
"preview": "comment: >-\n Displays a code example and renders a preview of the same input. The shortcode\n accepts the languages sup"
},
{
"path": "data/structures/featured-illustration.yml",
"chars": 198,
"preview": "comment: Defines a featured illustration with optional icon or image.\ngroup: partial\narguments:\n page:\n icon:\n image:"
},
{
"path": "data/structures/file.yml",
"chars": 949,
"preview": "comment: >-\n Prints the full content of any given file with syntax highlighting, using the\n Chroma syntax highlighter."
},
{
"path": "data/structures/form-hook.yml",
"chars": 201,
"preview": "comment: >-\n Renders a form with callback action. Assign a form-id when the form provider\n requires a specific form de"
},
{
"path": "data/structures/get-dimension.yml",
"chars": 123,
"preview": "comment: >-\n Initializes image dimensions (width x height) for supported image ratios.\ngroup: partial\narguments:\n rati"
},
{
"path": "data/structures/hero-image.yml",
"chars": 225,
"preview": "comment: Defines a hero image with optional overlay and positioning.\ngroup: partial\narguments:\n page:\n icon:\n image:\n"
},
{
"path": "data/structures/image-adapter-rewrite.yml",
"chars": 1026,
"preview": "comment: >-\n Rewrites an origin URL to a target URL as supported by a CDN image adapter.\ngroup: partial\narguments:\n ur"
},
{
"path": "data/structures/image-adapter.yml",
"chars": 346,
"preview": "comment: >-\n Defines the interface to be implemented by a CDN image adapter.\ngroup: partial\narguments:\n url-host:\n "
},
{
"path": "data/structures/image-definition.yml",
"chars": 383,
"preview": "comment: >-\n Defines the source and rendering attributes of a processed image, including\n dimensions, loading behavior"
},
{
"path": "data/structures/image-dimension.yml",
"chars": 257,
"preview": "comment: >-\n Defines the width and height dimensions of a processed image for a given\n source and aspect ratio.\ngroup:"
},
{
"path": "data/structures/image-rewrite.yml",
"chars": 202,
"preview": "comment: >-\n Defines a set of image source parameters for CDN-based image processing,\n including account, container, a"
},
{
"path": "data/structures/image-set.yml",
"chars": 287,
"preview": "comment: >-\n Defines the rewrite parameters used to process an image via a CDN adapter\n hook, including transform, for"
},
{
"path": "data/structures/image.yml",
"chars": 1056,
"preview": "comment: >-\n Displays a responsive image with an optional aspect ratio. Local and remote\n images are automatically res"
},
{
"path": "data/structures/ins.yml",
"chars": 124,
"preview": "comment: Underlines text.\nicon: format_underlined\nbody:\n optional: false\n preview: true\n comment: Text to be underlin"
},
{
"path": "data/structures/kbd.yml",
"chars": 445,
"preview": "comment: Displays a keyboard input element.\nicon: keyboard\narguments:\n text:\n optional: true\n position: 0\n rel"
},
{
"path": "data/structures/link.yml",
"chars": 1182,
"preview": "comment: >-\n Generates a hyperlink for a named link, URL, or internal reference. Any inner\n text is used as the link t"
},
{
"path": "data/structures/links.yml",
"chars": 181,
"preview": "comment: >-\n Renders a group of links with optional alignment and link type styling.\ngroup: partial\narguments:\n page:\n"
},
{
"path": "data/structures/list.yml",
"chars": 1348,
"preview": "comment: >-\n Displays a list of items with a thumbnail alternating between left and right\n alignment.\narguments:\n pag"
},
{
"path": "data/structures/live-pages.yml",
"chars": 2637,
"preview": "comment: >-\n Retrieves a filtered and sorted page collection relative to a provided page\n or section. Returns a dummy "
},
{
"path": "data/structures/mark.yml",
"chars": 222,
"preview": "comment: Highlights text by applying a background color.\nicon: highlight\narguments:\n class:\n color:\n preview: true\n"
},
{
"path": "data/structures/menu-item.yml",
"chars": 411,
"preview": "comment: >-\n Renders an individual menu item with configurable icon style, layout, and\n number of columns.\nicon: list\n"
},
{
"path": "data/structures/nav-item.yml",
"chars": 1554,
"preview": "comment: >-\n Defines an individual tab pane or accordion item for use within a nav group.\nicon: tab_new_right\narguments"
},
{
"path": "data/structures/nav.yml",
"chars": 1796,
"preview": "comment: >-\n Displays a tab group of multiple items. Add nav-item inner elements for each\n tab pane.\nicon: view_list\nc"
},
{
"path": "data/structures/navbar-item.yml",
"chars": 933,
"preview": "comment: >-\n Defines an individual item of the navigation bar.\ngroup: partial\narguments:\n page:\n menu-entry:\n opti"
},
{
"path": "data/structures/navbar.yml",
"chars": 3299,
"preview": "comment: >-\n Displays a navigation header with a toggler. The menu items are derived from\n the site's configuration an"
},
{
"path": "data/structures/page-alert.yml",
"chars": 294,
"preview": "comment: >-\n Adds a dismissible alert message to the top of the page, above the main\n navigation menu.\ngroup: partial\n"
},
{
"path": "data/structures/pagination.yml",
"chars": 424,
"preview": "comment: >-\n Adds a pagination element to a page to split long lists across multiple pages.\ngroup: partial\narguments:\n "
},
{
"path": "data/structures/persona.yml",
"chars": 1519,
"preview": "comment: >-\n Displays a custom persona card with thumbnail, title, and optional link.\nicon: account_circle\narguments:\n "
},
{
"path": "data/structures/release.yml",
"chars": 1031,
"preview": "comment: >-\n Displays a release button that links to a specific release. Use the state to\n indicate if it is a new or "
},
{
"path": "data/structures/script.yml",
"chars": 1428,
"preview": "comment: >-\n Includes a reference to a local or external JavaScript file, with optional\n loading behavior, category as"
},
{
"path": "data/structures/scripts.yml",
"chars": 785,
"preview": "comment: >-\n Bundles a JavaScript file for client-side processing. Scripts can be included\n as critical, core, or opti"
},
{
"path": "data/structures/section-header.yml",
"chars": 396,
"preview": "comment: >-\n Renders a simple page section header with title, description, and content\n fields.\ngroup: partial\nargumen"
},
{
"path": "data/structures/section-menu.yml",
"chars": 242,
"preview": "comment: Renders the section menu of a single page.\ngroup: partial\narguments:\n page:\n type:\n - '*hugolib.pageSt"
},
{
"path": "data/structures/section-title.yml",
"chars": 300,
"preview": "comment: >-\n Renders a styled page section title with optional heading, links, color, and\n layout options.\ngroup: part"
},
{
"path": "data/structures/sidebar.yml",
"chars": 1758,
"preview": "comment: >-\n Renders the sidebar navigation of a single page, typically used in\n documentation sections. On smaller sc"
},
{
"path": "data/structures/spinner.yml",
"chars": 415,
"preview": "comment: >-\n Use the spinner shortcode to indicate the loading state of a component or\n page. The inner content is use"
},
{
"path": "data/structures/stack.yml",
"chars": 1456,
"preview": "comment: >-\n Displays a stacked layout of Bootstrap cards rendered from a provided list of\n pages, with optional colum"
},
{
"path": "data/structures/sub.yml",
"chars": 153,
"preview": "comment: >-\n Displays text in subscript.\nicon: subscript\narguments:\n text:\n position: 0\n preview: true\nexample: "
},
{
"path": "data/structures/sup.yml",
"chars": 153,
"preview": "comment: >-\n Displays text in superscript.\nicon: superscript\narguments:\n text:\n position: 0\n preview: true\nexamp"
},
{
"path": "data/structures/table.yml",
"chars": 1717,
"preview": "comment: >-\n Makes a Markdown table responsive with horizontal scrolling on smaller screens.\n Sorting, paging, and sea"
},
{
"path": "data/structures/testimonial.yml",
"chars": 768,
"preview": "comment: Displays a single testimonial card.\ngroup: partial\nicon: format_quote\narguments:\n page:\n content:\n type:\n "
},
{
"path": "data/structures/timeline.yml",
"chars": 642,
"preview": "comment: >-\n Shows items ordered on a vertical timeline.\nicon: timeline\narguments:\n page:\n group: partial\n heading"
},
{
"path": "data/structures/toast.yml",
"chars": 698,
"preview": "comment: >-\n Prepares a dismissible toast notification message. Use a button trigger to\n display the message on screen"
},
{
"path": "data/structures/toc.yml",
"chars": 247,
"preview": "comment: Renders the table of contents of a single page.\ngroup: partial\narguments:\n page:\n type:\n - '*hugolib.p"
},
{
"path": "data/structures/tooltip.yml",
"chars": 379,
"preview": "comment: >-\n Displays a tooltip for a hyperlink. The inner content is used as the link\n text.\nicon: tooltip\narguments:"
},
{
"path": "data/structures/version.yml",
"chars": 130,
"preview": "comment: >-\n Returns the current version defined in package.json, with a v prefix. The\n partial does not require any a"
},
{
"path": "data/structures/video.yml",
"chars": 1274,
"preview": "comment: >-\n Embeds a responsive video player for supported video providers such as YouTube\n and Cloudinary.\nicon: vid"
},
{
"path": "eslint.config.mjs",
"chars": 1313,
"preview": "import js from '@eslint/js'\nimport stylistic from '@stylistic/eslint-plugin'\nimport globals from 'globals'\n\nexport defau"
},
{
"path": "exampleSite/.gitignore",
"chars": 81,
"preview": "_vendor/\nexampleSite/public/\npublic/\nresources/\n\n.DS_store\n.hugo_build.lock\n.hvm\n"
},
{
"path": "exampleSite/config/_default/hugo.toml",
"chars": 3610,
"preview": "resourcedir = '../resources/'\ntitle = \"Hinode\"\ncopyright = \"Copyright © 2026 Hinode Team\"\nenableGitInfo = true\n\n# additi"
},
{
"path": "exampleSite/config/_default/languages.toml",
"chars": 836,
"preview": "# toml-docs-start lang-main\n[en]\nlanguageName = \"English\"\ncontentDir = \"content/en\"\nweight = 1\n# toml-docs-end lang-main"
},
{
"path": "exampleSite/config/_default/markup.toml",
"chars": 1154,
"preview": "defaultMarkdownHandler = \"goldmark\"\n\n[highlight]\n anchorLineNos = false\n codeFences = true\n guessSyntax = true\n"
},
{
"path": "exampleSite/config/_default/menus/menus.en.toml",
"chars": 626,
"preview": "# Merge the menu configuration from the docs module\n# See https://gohugo.io/configuration/introduction/#merge-configurat"
},
{
"path": "exampleSite/config/_default/menus/menus.fr.toml",
"chars": 415,
"preview": "[[main]]\nname = \"Blog\"\npageRef = \"/blog/\"\nweight = 30\n\n[[main]]\n name = \"Documentation\"\n pageRef = \"https://gethinode."
},
{
"path": "exampleSite/config/_default/menus/menus.nl.toml",
"chars": 441,
"preview": "[[main]]\n name = \"Blog\"\n pageRef = \"/blog/\"\n weight = 30\n\n[[main]]\n name = \"Documentatie\"\n pageRef = \"https://gethi"
},
{
"path": "exampleSite/config/_default/netlify.toml",
"chars": 295,
"preview": "[[redirects]]\n\tfrom = '/fr/*'\n\tto = '/fr/404.html'\n\tstatus = 404\n\n[[redirects]]\n\tfrom = '/nl/*'\n\tto = '/nl/404.html'\n\tst"
},
{
"path": "exampleSite/config/_default/params.fr.toml",
"chars": 29,
"preview": "[main]\n titleCase = false\n"
},
{
"path": "exampleSite/config/_default/params.nl.toml",
"chars": 29,
"preview": "[main]\n titleCase = false\n"
},
{
"path": "exampleSite/config/_default/params.toml",
"chars": 6651,
"preview": "[main]\n separator = \"-\"\n description = \"Hinode is a clean documentation and blog theme for your Hugo site based on"
},
{
"path": "exampleSite/config/_default/server.toml",
"chars": 1943,
"preview": "# Auto-generated file - do not modify\n\n[[headers]]\n for = '/**'\n\n [headers.values]\n Access-Control-Allow-Origin = '"
},
{
"path": "exampleSite/config/ci/hugo.toml",
"chars": 986,
"preview": "# cachedir default on POSIX: '/tmp/hugo_cache_runner'\n# cachedir default on Windows: '~\\AppData\\Local\\hugo_cache'\n# cach"
},
{
"path": "exampleSite/config/development/params.toml",
"chars": 253,
"preview": "# Development-specific parameters for exampleSite\n\n[modules.hinode.csp]\n frame-src = [\n \"*.googletagmanager.co"
},
{
"path": "exampleSite/config/postcss.config.js",
"chars": 4032,
"preview": "const autoprefixer = require('autoprefixer')({})\nconst cssnano = require('cssnano')({\n preset: ['advanced', {\n disca"
},
{
"path": "exampleSite/content/en/_index.md",
"chars": 913,
"preview": "---\nauthor: Mark Dumay\ntitle: Welcome to Hinode!\ndescription: A clean documentation and blog theme for your Hugo site ba"
},
{
"path": "exampleSite/content/en/about.md",
"chars": 1456,
"preview": "---\ntitle: About\ndescription: Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5.\nda"
}
]
// ... and 253 more files (download for full content)
About this extraction
This page contains the full source code of the gethinode/hinode GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 453 files (842.2 KB), approximately 245.0k tokens, and a symbol index with 29 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.