Merge pull request #129 from gethinode/develop

Bump package version

README.md

@@ -17,17 +17,17 @@
     <a href="https://stats.uptimerobot.com/xyGVYhLJmV" alt="UptimeRobot Status">
         <img src="https://img.shields.io/uptimerobot/status/m791334689-73d9dfc82030f4f955b2d6bb" />
     </a>
-    <a href="https://github.com/markdumay/hugo-theme-hinode/commits/main" alt="Last commit">
-        <img src="https://img.shields.io/github/last-commit/markdumay/hugo-theme-hinode.svg" />
+    <a href="https://github.com/gethinode/hinode/commits/main" alt="Last commit">
+        <img src="https://img.shields.io/github/last-commit/gethinode/hinode.svg" />
     </a>
-    <a href="https://github.com/markdumay/hugo-theme-hinode/issues" alt="Issues">
-        <img src="https://img.shields.io/github/issues/markdumay/hugo-theme-hinode.svg" />
+    <a href="https://github.com/gethinode/hinode/issues" alt="Issues">
+        <img src="https://img.shields.io/github/issues/gethinode/hinode.svg" />
     </a>
-    <a href="https://github.com/markdumay/hugo-theme-hinode/pulls" alt="Pulls">
-        <img src="https://img.shields.io/github/issues-pr-raw/markdumay/hugo-theme-hinode.svg" />
+    <a href="https://github.com/gethinode/hinode/pulls" alt="Pulls">
+        <img src="https://img.shields.io/github/issues-pr-raw/gethinode/hinode.svg" />
     </a>
-    <a href="https://github.com/markdumay/hugo-theme-hinode/blob/main/LICENSE" alt="License">
-        <img src="https://img.shields.io/github/license/markdumay/hugo-theme-hinode" />
+    <a href="https://github.com/gethinode/hinode/blob/main/LICENSE" alt="License">
+        <img src="https://img.shields.io/github/license/gethinode/hinode" />
     </a>
 </p>
 
@@ -44,7 +44,7 @@
 
 ## About
 
-![Logo](https://raw.githubusercontent.com/markdumay/hugo-theme-hinode/main/static/img/logo.png)
+![Logo](https://raw.githubusercontent.com/gethinode/hinode/main/static/img/logo.png)
 
 - [Online Demo][demo]
 - [PageSpeed Insights][pagespeed]
@@ -83,13 +83,13 @@ Not quite sure? Use the Hinode child theme.
 #### Hinode child theme
 
 ```bash
-git clone https://github.com/markdumay/hugo-theme-hinode-child.git my-hinode-site && cd my-hinode-site
+git clone https://github.com/gethinode/child.git my-hinode-site && cd my-hinode-site
 ```
 
 #### Hinode main theme
 
 ```bash
-git clone https://github.com/markdumay/hugo-theme-hinode.git my-hinode-site && cd my-hinode-site
+git clone https://github.com/gethinode/hinode.git my-hinode-site && cd my-hinode-site
 ```
 
 ### 2. Install dependencies
@@ -119,7 +119,7 @@ The main site configuration is available in `./config/_default`. Some remarks:
 1. Clone the repository and create a new branch
 
     ```console
-    git checkout https://github.com/markdumay/hugo-theme-hinode.git -b name_for_new_branch
+    git checkout https://github.com/gethinode/hinode.git -b name_for_new_branch
     ```
 
 2. Make and test the changes
@@ -152,8 +152,8 @@ The `hugo-theme-hinode` and `hugo-theme-hinode-child` codebase is released under
 [netlify]: https://www.netlify.com
 [nodejs]: https://nodejs.org
 [npm]: https://www.npmjs.com
-[observatory]: https://observatory.mozilla.org/analyze/hinode-demo.markdumay.org
-[pagespeed]: https://pagespeed.web.dev/report?url=https%3A%2F%2Fhinode-demo.markdumay.org%2F
+[observatory]: https://observatory.mozilla.org/analyze/demo.gethinode.com
+[pagespeed]: https://pagespeed.web.dev/report?url=https%3A%2F%2Fdemo.gethinode.com%2F
 [utterances]: https://utteranc.es
 
 <!-- MARKDOWN MAINTAINED LINKS -->
@@ -161,7 +161,7 @@ The `hugo-theme-hinode` and `hugo-theme-hinode-child` codebase is released under
 [blog]: https://markdumay.com
 [blog]: https://github.com/markdumay
 -->
-[demo]: https://hinode-demo.markdumay.org/
-[license]: https://github.com/markdumay/hugo-theme-hinode/blob/main/LICENSE
-[repository]: https://github.com/markdumay/hugo-theme-hinode.git
-[repository_child]: https://github.com/markdumay/hugo-theme-hinode-child.git
+[demo]: https://demo.gethinode.com/
+[license]: https://github.com/gethinode/hinode/blob/main/LICENSE
+[repository]: https://github.com/gethinode/hinode.git
+[repository_child]: https://github.com/gethinode/child.git

assets/scss/app.scss

@@ -11,7 +11,7 @@ $warning:                       {{ site.Params.style.warning | default "#ffc107"
 $danger:                        {{ site.Params.style.danger | default "#dc3545" }};
 $light:                         {{ site.Params.style.light | default "#f8f9fa" }};
 $dark:                          {{ site.Params.style.dark | default "#212529" }};
-$navbar-offset:                 {{ if site.Params.navigation.fixed }}{{ site.Params.navigation.offset | default "3em" }}{{ else }}0em{{ end }};
+$navbar-offset:                 {{ if site.Params.navigation.fixed }}{{ site.Params.navigation.offset | default "4em" }}{{ else }}0em{{ end }};
 
 // Include default variable overrides
 @import "common/variables.scss";

assets/scss/components/_syntax.scss

@@ -1,8 +1,9 @@
-/* Background */ .bg { color: #272822; background-color: #fafafa }
-/* PreWrapper */ .chroma { color: #272822; background-color: #fafafa; }
+/* Background */ .bg { color: #272822; }
+/* PreWrapper */ .chroma { color: #272822 }
 /* Other */ .chroma .x {  }
-/* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
+/* Error */ .chroma .err { color: #960050 }
 /* CodeLine */ .chroma .cl {  }
+/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
 /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
 /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
 /* LineHighlight */ .chroma .hl { background-color: #ffffcc }

assets/scss/layouts/_reboot.scss

@@ -1,3 +1,4 @@
 pre {
     padding: $spacer;
+    margin-bottom: 0;
 }

config/_default/config.toml

@@ -6,7 +6,7 @@ enableGitInfo = true
 # toml-docs-end main
 
 # additional settings
-baseURL = "https://hinode-demo.markdumay.org/"
+baseURL = "https://gethinode.com/"
 canonifyURLs = false
 enableEmoji = true
 enableRobotsTXT = true
@@ -53,7 +53,6 @@ defaultContentLanguageInSubdir = true
   [services.twitter]
     disableInlineCSS = true
 
-
 [outputFormats]
   [outputFormats.XML]
     isPlainText = false

config/_default/markup.toml

@@ -10,8 +10,10 @@ defaultMarkdownHandler = "goldmark"
     lineNos = false
     lineNumbersInTable = false
     noClasses = false
-    # style = "monokailight" ## Update the 'create:syntax' command in package.json to modify the style
     tabWidth = 2
+    ## Update the 'create:syntax' command in package.json to modify the style
+    ## The first two lines have been modified to remove the background color
+    # style = "monokailight" 
 
 [goldmark]
     [goldmark.extensions]

config/_default/params.toml

@@ -22,7 +22,7 @@
     color = "white"
     style = "light"
     fixed = true
-    offset = "3em"
+    offset = "4em"
     search = true
     breadcrumb = false
     toc = true
@@ -84,11 +84,11 @@
     locale = "en-US"
     # twitter = "https://twitter.com/gethinode"
     # linkedIn = ""
-    github = "https://github.com/markdumay/hugo-theme-hinode"
+    github = "https://github.com/gethinode/hinode"
     section = "blog"
     [author]
         name = "Mark Dumay"
-        twitter = "https://twitter.com/markdumay"
+        # twitter = "https://twitter.com/markdumay"
         linkedin = "https://www.linkedin.com/in/markdumay/"
         github = "https://github.com/markdumay"
     [logo]
@@ -114,6 +114,10 @@
     #theme = "" 
 
 [links]
+    azure = "https://azure.microsoft.com"
+    az_blob_domain = "https://learn.microsoft.com/en-us/azure/storage/blobs/storage-custom-domain-name"
+    az_blob_pricing = "https://azure.microsoft.com/en-us/free"
+    az_cdn_rules = "https://learn.microsoft.com/en-us/azure/cdn/cdn-standard-rules-engine-reference"
     blist = "https://github.com/apvarun/blist-hugo-theme"
     bootstrap = "https://getbootstrap.com"
     bs_badge_heading = "https://getbootstrap.com/docs/5.2/components/badge/#headings"
@@ -143,18 +147,24 @@
     hugo_config_dir = "https://gohugo.io/getting-started/configuration/#configuration-directory"
     hugo_content = "https://gohugo.io/content-management/formats"
     hugo_chroma = "https://gohugo.io/content-management/syntax-highlighting/#list-of-chroma-highlighting-languages"
+    hugo_deploy = "https://gohugo.io/hosting-and-deployment/hugo-deploy"
+    hugo_deployment = "https://gohugo.io/hosting-and-deployment"
+    hugo_config_deploy = "https://gohugo.io/hosting-and-deployment/hugo-deploy/#configure-the-deployment"
     hugo_fingerprint = "https://gohugo.io/hugo-pipes/fingerprint"
     hugo_frontmatter = "https://gohugo.io/content-management/front-matter"
     hugo_i18n = "https://gohugo.io/functions/i18n"
+    hugo_image = "https://gohugo.io/content-management/image-processing"
     hugo_lang = "https://gohugo.io/content-management/multilingual"
     hugo_lang_config = "https://gohugo.io/content-management/multilingual/#configure-languages"
+    hugo_links = "https://gohugo.io/content-management/cross-references"
     hugo_menus = "https://gohugo.io/content-management/menus/"
+    hugo_mounts = "https://gohugo.io/hugo-modules/configuration/#module-config-mounts"
     hugo_imaging = "https://gohugo.io/content-management/image-processing/#imaging-configuration"
     hugo_ordering = "https://gohugo.io/templates/lists/#order-content"
     hugo_templates = "https://gohugo.io/templates/introduction/"
     hugo_toc = "https://gohugo.io/content-management/toc"
-    issue_tracker = "https://github.com/markdumay/hugo-theme-hinode/issues"
-    license = "https://github.com/markdumay/hugo-theme-hinode/blob/main/LICENSE"
+    issue_tracker = "https://github.com/gethinode/hinode/issues"
+    license = "https://github.com/gethinode/hinode/blob/main/LICENSE"
     markdown_emoji = "https://gist.github.com/rxaviers/7360908"
     markdown_md013 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md013---line-length"
     markdown_md024 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md024---multiple-headings-with-the-same-content"
@@ -169,12 +179,12 @@
     netlify = "https://www.netlify.com"
     nodejs = "https://nodejs.org"
     npm = "https://www.npmjs.com"
-    observatory = "https://observatory.mozilla.org/analyze/hinode-demo.markdumay.org"
-    package_npm = "https://www.npmjs.com/package/@markdumay/hugo-theme-hinode"
-    pagespeed = "https://pagespeed.web.dev/report?url=https%3A%2F%2Fhinode-demo.markdumay.org%2F"
-    repository = "https://github.com/markdumay/hugo-theme-hinode"
-    repository_child = "https://github.com/markdumay/hugo-theme-hinode-child.git"
-    repository_owner = "https://github.com/markdumay/"
+    observatory = "https://observatory.mozilla.org/analyze/demo.gethinode.com"
+    package_npm = "https://www.npmjs.com/package/@gethinode/hinode"
+    pagespeed = "https://pagespeed.web.dev/report?url=https%3A%2F%2Fdemo.gethinode.com%2F"
+    repository = "https://github.com/gethinode/hinode"
+    repository_child = "https://github.com/gethinode/child.git"
+    repository_owner = "https://github.com/gethinode/"
     semver = "https://semver.org"
     stylelint = "https://stylelint.io"
     utterances = "https://utteranc.es"

config/production/deployment.toml

@@ -0,0 +1,31 @@
+# toml-docs-start az-blob
+# By default, files are uploaded in an arbitrary order.
+# Files that match the regular expressions in the "Order" list
+# will be uploaded first, in the listed order.
+order = [".webp$", ".jpg$", ".gif$"]
+
+[targets]
+name = "hinode"
+URL = "azblob://$web"
+
+[[matchers]]
+# Cache static assets for 1 year.
+pattern = "^.+\\.(js|css|svg|ttf)$"
+cacheControl = "max-age=31536000, no-transform, public"
+gzip = true
+
+[[matchers]]
+pattern = "^.+\\.(png|jpg|webp)$"
+cacheControl = "max-age=31536000, no-transform, public"
+gzip = false
+
+[[matchers]]
+# Set custom content type for /sitemap.xml
+pattern = "^sitemap\\.xml$"
+contentType = "application/xml"
+gzip = true
+
+[[matchers]]
+pattern = "^.+\\.(html|xml|json)$"
+gzip = true
+# toml-docs-end az-blob

content/en/blog/bundling.md

@@ -1,13 +0,0 @@
----
-author: Mark Dumay
-title: Javascript bundling
-date: 2023-01-23
-description: 
-status: draft
-tags: ["code"]
-thumbnail: img/notepad.jpg
-photoCredits: <a href="https://unsplash.com/@frederickjmedina">Frederick Medina</a>
-photoSource: <a href="https://unsplash.com/photos/PdfRE-xB--s">Unsplash</a>
----
-
-<!-- https://blog.wesleyac.com/posts/why-not-javascript-cdn -->

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

@@ -1,8 +1,8 @@
 ---
 title: Icons
 description: Configure secure access to icons from Bootstrap and Font Awesome.
-date: 2023-01-23
-group: configuration
+date: 2023-01-28
+group: advanced-settings
 layout: docs
 ---
 
@@ -52,16 +52,16 @@ Hinodes uses npm and mounted folders to create a flexibile virtual file system t
 
 The icons are defined in the file `assets/scss/common/_icons.scss`. The current configuration is the following:
 
-{{< scss-docs name="icons" file="assets/scss/common/_icons.scss" >}}
+{{< docs name="icons" file="assets/scss/common/_icons.scss" >}}
 
 ### Export definitions
 
 The exported variables are defined in the file `assets/scss/common/_export.scss`. The current configuration is the following:
 
-{{< scss-docs name="export" file="assets/scss/common/_export.scss" >}}
+{{< docs name="export" file="assets/scss/common/_export.scss" >}}
 
 ## Font Awesome icons
 
 [Font Awesome]({{< param "links.fontawesome" >}}) provides a collection of icons to be used freely on websites and other media. See the [icons documentation]({{< relref "../content/icons" >}}) in the content section on how to use them to style your website. Hinode uses the <abbr title="Cascading Style Sheets">CSS</abbr> files and web fonts of Font Awesome, as the [content security policy]({{< ref "server" >}}) prohibits the inline execution of stylesheets by the JavaScripts of Font Awesome. The CSS files are bundled with the main stylesheet. The web fonts are copied to the `/static/fonts` folder with the repository. Use the npm command `npm run copy:fonts` to copy the latest version of the files. The CSS files are referenced in the `assets/scss/app.scss` file. This is the current configuration:
 
-{{< scss-docs name="awesome" file="assets/scss/app.scss" >}}
+{{< docs name="awesome" file="assets/scss/app.scss" >}}

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

@@ -1,8 +1,8 @@
 ---
 title: Overview
 description: Configure and customize Hinode to your liking using Hugo Templating and npm dependencies.
-date: 2023-01-14
-group: configuration
+date: 2023-01-28
+group: advanced-settings
 layout: docs
 ---
 
@@ -16,7 +16,7 @@ The other two sections of interest are `devDependencies` and `otherDependencies`
 
 ```yml
 {
-    "name": "@markdumay/hugo-theme-hinode",
+    "name": "@gethinode/hinode",
     "version": "0.8.0",
     "scripts": {
         [...]
@@ -34,7 +34,7 @@ The other two sections of interest are `devDependencies` and `otherDependencies`
 
 ## Mounted folders
 
-Hugo supports the mounting of folders since version 0.56.0. Hinode takes advantage of this feature to create a virtual file system, combining assets from multiple sources. For example, the below section of the `/config/_default/config.toml` instructs Hugo to make Bootstrap's JavaScript distribution file `/node_modules/bootstrap/dist/js` available in the `/assets/js` folder. This file is then bundled with the JavaScript files defined in the `/assets/js` folder of Hinode.
+Hugo supports the [mounting of folders]({{< param "links.hugo_mounts" >}}) since version 0.56.0. Hinode takes advantage of this feature to create a virtual file system, combining assets from multiple sources. For example, the below section of the `/config/_default/config.toml` instructs Hugo to make Bootstrap's JavaScript distribution file `/node_modules/bootstrap/dist/js` available in the `/assets/js` folder. This file is then bundled with the JavaScript files defined in the `/assets/js` folder of Hinode.
 
 {{< alert color="primary" >}}
     When you add a mount, the default mount for the concerned target root is ignored: be sure to explicitly add it.
@@ -58,7 +58,7 @@ As another example, the Hinode child theme merges the key folders of the main th
 [module]
     [...]
     [[module.mounts]]
-        source = "node_modules/@markdumay/hugo-theme-hinode/i18n"
+        source = "node_modules/@gethinode/hinode/i18n"
         target = "i18n"
     [[module.mounts]]
         source = "i18n"

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

@@ -1,8 +1,8 @@
 ---
 title: Scripts
 description: Automatically bundle local and external JavaScript files into a single file.
-date: 2023-01-21
-group: configuration
+date: 2023-01-28
+group: advanced-settings
 layout: docs
 ---
 
@@ -32,4 +32,4 @@ Hinodes uses npm and mounted folders to create a flexibile virtual file system t
 
 Mount the external JavaScript files to Hugo's virtual file system within the file `config/_default/config.toml`. The current configuration imports the relevant files of [Bootstrap]({{< param "links.bootstrap" >}}) and [FlexSearch]({{< param "links.flexsearch" >}}).
 
-{{< toml-docs name="javascript" file="config/_default/config.toml" >}}
+{{< docs name="javascript" file="config/_default/config.toml" >}}

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

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

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

@@ -1,8 +1,8 @@
 ---
 title: Styles
 description: Use extensible Sass files to generate the stylesheets for your website.
-date: 2023-01-21
-group: configuration
+date: 2023-01-28
+group: advanced-settings
 layout: docs
 ---
 

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

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

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

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

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

@@ -1,8 +1,8 @@
 ---
-author: "Mark Dumay"
-title: "Alert"
-date: 2023-01-27
-description: "Use the alert shortcode to display a contextual feedback message."
+author: Mark Dumay
+title: Alert
+date: 2023-01-28
+description: Use the alert shortcode to display a contextual feedback message.
 group: components
 layout: docs
 ---

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

@@ -1,8 +1,8 @@
 ---
-author: "Mark Dumay"
-title: "Badge"
-date: 2023-01-25
-description: "Use the badge to enrich headings and buttons."
+author: Mark Dumay
+title: Badge
+date: 2023-01-28
+description: Use the badge to enrich headings and buttons.
 group: components
 layout: docs
 ---

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

@@ -1,8 +1,8 @@
 ---
-author: "Mark Dumay"
-title: "Breadcrumb"
-date: 2023-01-27
-description: "Use the breadcrumb shortcode to display the current page’s location within the site's navigational hierarchy."
+author: Mark Dumay
+title: Breadcrumb
+date: 2023-01-28
+description: Use the breadcrumb shortcode to display the current page’s location within the site's navigational hierarchy.
 group: components
 layout: docs
 ---

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

@@ -1,8 +1,8 @@
 ---
-author: "Mark Dumay"
-title: "Button Group"
-date: 2023-01-27
-description: "Use the button-group shortcode to display a group of buttons."
+author: Mark Dumay
+title: Button Group
+date: 2023-01-28
+description: Use the button-group shortcode to display a group of buttons.
 group: components
 layout: docs
 ---

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

@@ -1,8 +1,8 @@
 ---
-author: "Mark Dumay"
-title: "Button"
-date: 2023-01-27
-description: "Use the button shortcode to display a button with a hyperlink."
+author: Mark Dumay
+title: Button
+date: 2023-01-28
+description: Use the button shortcode to display a button with a hyperlink.
 group: components
 layout: docs
 ---

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

@@ -1,8 +1,8 @@
 ---
-author: "Mark Dumay"
-title: "Card"
-date: 2023-01-27
-description: "Use the card shortcode to display a card that links to a content page."
+author: Mark Dumay
+title: Card
+date: 2023-01-28
+description: Use the card shortcode to display a card that links to a content page.
 group: components
 layout: docs
 ---

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

@@ -1,8 +1,8 @@
 ---
-author: "Mark Dumay"
-title: "Carousel"
-date: 2023-01-27
-description: "Use the carousel shortcode to display a carousel of several images."
+author: Mark Dumay
+title: Carousel
+date: 2023-01-29
+description: Use the carousel shortcode to display a carousel of several images.
 group: components
 layout: docs
 ---
@@ -17,10 +17,14 @@ The shortcode supports the following arguments:
 
 | Argument  | Required | Description |
 |-----------|----------|-------------|
-| ratio     | No  | Aspect ratio of the image, either "1x1", "4x3" (default), "16x9", or "21x9". |
+| ratio     | No  | Aspect ratio of the image, either "1x1", "4x3", "16x9", or "21x9". If unspecified, the original aspect ratio is preserved. |
 | class     | No  | Optional class attribute of the `carousel` element, e.g. "w-75". |
 {.table}
 
+{{< alert >}}
+The carousel uses the original aspect ratio of the provided images when no aspect ratio is provided. Ensure the included images have a similar height and width to avoid inconsistent behavior.
+{{< /alert >}}
+
 Add an inner `img` element for each slide of the carousel. The `img` element supports the following arguments:
 
 | Argument  | Required | Description |

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

@@ -1,8 +1,8 @@
 ---
-author: "Mark Dumay"
-title: "Collapse"
-date: 2023-01-27
-description: "Use the collapse shortcode to reveil or hide a panel."
+author: Mark Dumay
+title: Collapse
+date: 2023-01-28
+description: Use the collapse shortcode to reveil or hide a panel.
 group: components
 layout: docs
 ---

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

@@ -1,8 +1,8 @@
 ---
-author: "Mark Dumay"
-title: "Command Prompt"
-date: 2023-01-27
-description: "The command shortcode generates terminal output for either Bash, PowerShell, or SQL shell languages."
+author: Mark Dumay
+title: Command Prompt
+date: 2023-01-28
+description: The command shortcode generates terminal output for either Bash, PowerShell, or SQL shell languages.
 group: components
 layout: docs
 ---

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

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

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

@@ -1,8 +1,8 @@
 ---
-author: "Mark Dumay"
-title: "Image"
-date: 2023-01-05
-description: "Use the image shortcode to display a responsive image with a specific aspect ratio."
+author: Mark Dumay
+title: Image
+date: 2023-01-28
+description: Use the image shortcode to display a responsive image with a specific aspect ratio.
 group: components
 layout: docs
 ---
@@ -28,9 +28,8 @@ The shortcode supports the following arguments:
 
 As an example, the following shortcode displays an image with rounded corners and a 21x9 aspect ratio.
 
-```html
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
 {{</* image src="img/flowers.jpg" ratio="21x9" caption="Figure caption" class="rounded" */>}}
-```
-
-The result looks like this:
-{{< image src="img/flowers.jpg" ratio="21x9" caption="Figure caption" class="rounded">}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->

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

@@ -1,8 +1,8 @@
 ---
-author: "Mark Dumay"
-title: "Navbar"
-date: 2023-01-27
-description: "Use the navbar shortcode to display a navigation header with a toggler."
+author: Mark Dumay
+title: Navbar
+date: 2023-01-28
+description: Use the navbar shortcode to display a navigation header with a toggler.
 group: components
 layout: docs
 ---

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

@@ -1,8 +1,8 @@
 ---
-author: "Mark Dumay"
-title: "Spinner"
-date: 2023-01-27
-description: "Use the spinner shortcode to indicate the loading state of a component or page."
+author: Mark Dumay
+title: Spinner
+date: 2023-01-28
+description: Use the spinner shortcode to indicate the loading state of a component or page.
 group: components
 layout: docs
 ---

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

@@ -1,8 +1,8 @@
 ---
-author: "Mark Dumay"
-title: "Toast"
-date: 2023-01-27
-description: "Use the toast shortcode to display a dismissable message in the bottom-right corner of the screen."
+author: Mark Dumay
+title: Toast
+date: 2023-01-28
+description: Use the toast shortcode to display a dismissable message in the bottom-right corner of the screen.
 group: components
 layout: docs
 ---

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

@@ -1,8 +1,8 @@
 ---
-author: "Mark Dumay"
-title: "Tooltip"
-date: 2023-01-27
-description: "Use the toast shortcode to display a dismissable message in the bottom-right corner of the screen."
+author: Mark Dumay
+title: Tooltip
+date: 2023-01-28
+description: Use the toast shortcode to display a dismissable message in the bottom-right corner of the screen.
 group: components
 layout: docs
 ---

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

@@ -10,7 +10,7 @@ layout: docs
 
 Hinode uses Bootstrap's color system. You can adjust them in the `/config/_default/params.toml` file in the `style` section.
 
-{{< toml-docs name="theme-colors" file="config/_default/params.toml" >}}
+{{< docs name="theme-colors" file="config/_default/params.toml" >}}
 
 In addition, the background colors `black` and `white` are available too. Below is an overview of the rendered colors.
 
@@ -51,17 +51,11 @@ In addition, the background colors `black` and `white` are available too. Below
 
 Hinode defines additional classes to render links that contrast with their background. Simply add `link-bg-<color>` to the class of an `<a>` anchor element. The next example adds a link constrasting with the background color `bg-success`.
 
-```html
-<div class="col-md-2">
-    <div class="p-3 mb-3 bg-success rounded-3 text-center"><a class="link-bg-success" href="#">Success</a></div>
-</div>
-```
-
-The result looks like this.
-
+{{< example >}}
 <div class="col-md-2">
     <div class="p-3 mb-3 bg-success rounded-3 text-center"><a class="link-bg-success" href="#">Success</a></div>
 </div>
+{{< /example>}}
 
 Below grid illustrates the contrasting colors for each background.
 
@@ -96,4 +90,4 @@ Below grid illustrates the contrasting colors for each background.
 
 The SCSS generator for the colored links is defined in `assets/scss/helpers/_colored-links.scss`.
 
-{{< scss-docs name="colored-links" file="assets/scss/helpers/_colored-links.scss" >}}
+{{< docs name="colored-links" file="assets/scss/helpers/_colored-links.scss" >}}

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

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

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

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

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

@@ -12,11 +12,11 @@ Hinode supports Hugo's [multilingual mode]({{< param "links.hugo_lang" >}}) to c
 
 Define the languages available to your site in the main site configuration. The below configuration shows the default configuration set in `config/_default/languages.toml` for the English language.
 
-{{< toml-docs name="lang-main" file="config/_default/languages.toml" >}}
+{{< docs name="lang-main" file="config/_default/languages.toml" >}}
 
 The default behavior is set in `config/_default/config.toml`. For example, you can set the `defaultContentLanguageInSubdir` to `false` to remove the language slug `/en` from your site entirely.
 
-{{< toml-docs name="language" file="config/_default/config.toml" >}}
+{{< docs name="language" file="config/_default/config.toml" >}}
 
 ## Content translation
 

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

@@ -54,7 +54,7 @@ The base layout uses the [main configuration]({{< param "links.hugo_config" >}})
 
 The below configuration shows the default configuration set in `config/_default/config.toml`.
 
-{{< toml-docs name="main" file="config/_default/config.toml" >}}
+{{< docs name="main" file="config/_default/config.toml" >}}
 
 #### Extended configuration
 
@@ -68,11 +68,11 @@ Hinode uses the following extended settings in the `main` section of the `site p
 
 The below configuration shows the default configuration set in `config/_default/params.toml`.
 
-{{< toml-docs name="main" file="config/_default/params.toml" >}}
+{{< docs name="main" file="config/_default/params.toml" >}}
 
 #### Language-specific configuration
 
-Hinode supports [multilingual content]({{< param "links.hugo_lang_config" >}}). The following parameters are used in the site's footer, header, and meta data. Refer to the [languages]{{< ref "languages" >}}) section to review the various configuration options to enable multilingual content.
+Hinode supports [multilingual content]({{< param "links.hugo_lang_config" >}}). The following parameters are used in the site's footer, header, and meta data. Refer to the [languages]({{< ref "languages" >}}) section to review the various configuration options to enable multilingual content.
 
 | Section | Setting       | Default | Description |
 |---------|---------------|---------|-------------|
@@ -88,7 +88,7 @@ Hinode supports [multilingual content]({{< param "links.hugo_lang_config" >}}).
 
 The below configuration shows the default configuration set in `config/_default/languages.toml` for the English language.
 
-{{< toml-docs name="lang-param" file="config/_default/languages.toml" >}}
+{{< docs name="lang-param" file="config/_default/languages.toml" >}}
 
 ## Home page
 
@@ -149,7 +149,7 @@ The configuration of the home page is set in the `home` section of the `site par
 
 The below configuration shows the default configuration set in `config/_default/params.toml`.
 
-{{< toml-docs name="home" file="config/_default/params.toml" >}}
+{{< docs name="home" file="config/_default/params.toml" >}}
 
 ## List pages
 
@@ -221,7 +221,7 @@ The configuration of the list pages is set in the `list` section of the `site pa
 
 The below configuration shows the default configuration set in `config/_default/params.toml`.
 
-{{< toml-docs name="list" file="config/_default/params.toml" >}}
+{{< docs name="list" file="config/_default/params.toml" >}}
 
 ## Single pages
 
@@ -318,4 +318,4 @@ The configuration of the documentation pages is set in the `docs` section of the
 
 The below configuration shows the default configuration set in `config/_default/params.toml`.
 
-{{< toml-docs name="docs" file="config/_default/params.toml" >}}
+{{< docs name="docs" file="config/_default/params.toml" >}}

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

@@ -27,7 +27,7 @@ The basic configuration of the navigation elements is set in the `navigation` se
 
 The below configuration shows the default configuration set in `config/_default/params.toml`.
 
-{{< toml-docs name="navigation" file="config/_default/params.toml" >}}
+{{< docs name="navigation" file="config/_default/params.toml" >}}
 
 ## Main navigation
 
@@ -37,7 +37,7 @@ The main navigation uses [Hugo's menu system]({{< param "links.hugo_menus" >}})
 
 The navigation bar uses [Hugo's menu system]({{< param "links.hugo_menus" >}}) to generate the menu items. The navigation supports nesting at one level depth. The following example defines an example menu configuration called `sample` (the main configuration is called `main`).
 
-{{< toml-docs name="sample-navigation" file="config/_default/menus/menus.en.toml" >}}
+{{< docs name="sample-navigation" file="config/_default/menus/menus.en.toml" >}}
 
 ### Example
 
@@ -79,7 +79,7 @@ group: getting-started
 
 The file `assets/scss/components/_sidebar.scss` contains the styling of the sidebar. It refers to a button `$btn-toggle` that is defined in `assets/scss/common/_icons.scss`. It also defines the spacing to be added to the page's main content section when using a fixed navigation bar:
 
-{{< scss-docs name="sidebar" file="assets/scss/components/_sidebar.scss" >}}
+{{< docs name="sidebar" file="assets/scss/components/_sidebar.scss" >}}
 
 ## Breadcrumb
 
@@ -103,4 +103,4 @@ Single pages can optionally show an [table of contents]({{< param "links.hugo_to
 
 The file `assets/scss/components/_toc.scss` defines the styling of the table of contents element. It adds spacing to align the element to the sidebar, amongst other styling:
 
-{{< scss-docs name="toc" file="assets/scss/components/_toc.scss" >}}
+{{< docs name="toc" file="assets/scss/components/_toc.scss" >}}

content/en/docs/0.8/content/figures.md

@@ -1,9 +0,0 @@
----
-title: Figures
-description: 
-date: 2023-01-06
-group: content
-layout: docs
----
-
-<!-- TODO: expand -->

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

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

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

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

content/en/docs/0.8/content/images.md

@@ -1,9 +0,0 @@
----
-title: Images
-description: 
-date: 2023-01-06
-group: content
-layout: docs
----
-
-<!-- TODO: expand -->

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

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

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

@@ -16,25 +16,19 @@ Hugo supports tables out-of-the-box with extended Markdown. Use an optional shor
 
 Hugo supports tables out-of-the-box by using the `|` and `-` characters. Add `{.table}` at the bottom of the block to apply the correct styling. You can mix the content with inline Markdown.
 
-```markdown
-| Italics   | Bold     | Code   |
-| --------- | -------- | ------ |
-| _italics_ | **bold** | `code` |
-{.table}
-```
-
-The result looks like this:
-
+{{< example lang="markdown" >}}
 | Italics   | Bold     | Code   |
 | --------- | -------- | ------ |
 | _italics_ | **bold** | `code` |
 {.table}
+{{< /example >}}
 
 ### Aligned cells and headers
 
 Hugo's Markdown processor applies inline styles to align cells in a table, which is blocked by Hinode's [Content Security Policy]({{< ref "server" >}}). Use the `table` shortcode to wrap your Markdown input instead. You can then align header and cell data to the left, center, or right of a column using the `:` character. Pass additional class attributes between double quotes, e.g. `"table-striped"`. See the [next section](#accented-tables) for more options.
 
-```markdown
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
 {{</* table "table-striped" */>}}
 | #  | Item        | Left aligned | Center aligned |   Right aligned|
 | -- | ----------- |:-------------|:--------------:| --------------:|
@@ -42,17 +36,8 @@ Hugo's Markdown processor applies inline styles to align cells in a table, which
 | 2. | Second item | some text    | more text      | even more text |
 | 3. | Third item  | some text    | more text      | even more text |
 {{</* /table */>}}
-```
-
-The result looks like this:
-
-{{< table "table-striped" >}}
-| #  | Item        | Left aligned | Center aligned |   Right aligned|
-| -- | ----------- |:-------------|:--------------:| --------------:|
-| 1. | First item  | some text    | more text      | even more text |
-| 2. | Second item | some text    | more text      | even more text |
-| 3. | Third item  | some text    | more text      | even more text |
-{{< /table >}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
 
 ## Accented tables
 
@@ -62,89 +47,53 @@ Add optional class attributes to style the table using Bootstrap.
 
 Use `.table-striped` to add zebra-striping to any table row.
 
-```markdown
-| #  | Item        |
-| -- | ----------- |
-| 1. | First item  |
-| 2. | Second item |
-| 3. | Third item  |
-{.table .table-striped}
-```
-
-The result looks like this:
-
+{{< example lang="markdown" >}}
 | #  | Item        |
 | -- | ----------- |
 | 1. | First item  |
 | 2. | Second item |
 | 3. | Third item  |
 {.table .table-striped}
+{{< /example >}}
 
 ### Striped columns
 
 Use `.table-striped-columns` to add zebra-striping to any table column.
 
-```markdown
-| #  | Item        | Description            |
-| -- | ----------- | ---------------------- |
-| 1. | First item  | This is the first row  |
-| 2. | Second item | This is the second row |
-| 3. | Third item  | This is the third row  |
-{.table .table-striped-columns}
-```
-
-The result looks like this:
-
+{{< example lang="markdown" >}}
 | #  | Item        | Description            |
 | -- | ----------- | ---------------------- |
 | 1. | First item  | This is the first row  |
 | 2. | Second item | This is the second row |
 | 3. | Third item  | This is the third row  |
 {.table .table-striped-columns}
+{{< /example >}}
 
 ### Hoverable rows
 
 Add `.table-hover` to enable a hover state on the table rows.
 
-```markdown
-| #  | Item        |
-| -- | ----------- |
-| 1. | First item  |
-| 2. | Second item |
-| 3. | Third item  |
-{.table .table-hover}
-```
-
-The result looks like this:
-
+{{< example lang="markdown" >}}
 | #  | Item        |
 | -- | ----------- |
 | 1. | First item  |
 | 2. | Second item |
 | 3. | Third item  |
 {.table .table-hover}
+{{< /example >}}
 
 ### Colored tables
 
 Add `table-<theme>` to apply [theme colors]({{< ref "colors" >}}) to your table. You can mix them with other classes, such as `.table-striped`.
 
-```markdown
-| #  | Item        |
-| -- | ----------- |
-| 1. | First item  |
-| 2. | Second item |
-| 3. | Third item  |
-{.table .table-success .table-striped}
-```
-
-The result looks like this:
-
+{{< example lang="markdown" >}}
 | #  | Item        |
 | -- | ----------- |
 | 1. | First item  |
 | 2. | Second item |
 | 3. | Third item  |
 {.table .table-success .table-striped}
+{{< /example>}}
 
 ## Table borders
 
@@ -154,64 +103,37 @@ Adjust the borders of a table to match your style preferences.
 
 Add `.table-bordered` for borders on all sides of the table and cells. Add an optional `border-<theme>` class to apply [theme colors]({{< ref "colors" >}}) to the table borders.
 
-```markdown
-| #  | Item        |
-| -- | ----------- |
-| 1. | First item  |
-| 2. | Second item |
-| 3. | Third item  |
-{.table .table-bordered .border-primary}
-```
-
-The result looks like this:
-
+{{< example lang="markdown" >}}
 | #  | Item        |
 | -- | ----------- |
 | 1. | First item  |
 | 2. | Second item |
 | 3. | Third item  |
 {.table .table-bordered .border-primary}
+{{< /example >}}
 
 ### Tables without borders
 
 Add `.table-borderless` for a table without borders.
 
-```markdown
-| #  | Item        |
-| -- | ----------- |
-| 1. | First item  |
-| 2. | Second item |
-| 3. | Third item  |
-{.table .table-borderless}
-```
-
-The result looks like this:
-
+{{< example lang="markdown" >}}
 | #  | Item        |
 | -- | ----------- |
 | 1. | First item  |
 | 2. | Second item |
 | 3. | Third item  |
 {.table .table-borderless}
+{{< /example >}}
 
 ## Small tables
 
 Add `.table-sm` to make any table more compact by cutting all cell padding in half.
 
-```markdown
-| #  | Item        |
-| -- | ----------- |
-| 1. | First item  |
-| 2. | Second item |
-| 3. | Third item  |
-{.table .table-sm}
-```
-
-The result looks like this:
-
+{{< example lang="markdown" >}}
 | #  | Item        |
 | -- | ----------- |
 | 1. | First item  |
 | 2. | Second item |
 | 3. | Third item  |
 {.table .table-sm}
+{{< /example >}}

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

@@ -12,7 +12,9 @@ Hinode uses a mix of basic Markdown syntax enriched with Bootstrap styling for t
 
 Use the native Markdown character `#` to generate headings for your content. The following input represents six levels of section headings. They are generated as HTML `<h1>`—`<h6>` elements. `<h1>` is the highest section level while `<h6>` is the lowest.
 
-```markdown
+<!-- markdownlint-disable MD025 -->
+{{< example lang="markdown" >}}
+
 # H1. Heading
 
 ## H2. Heading
@@ -24,70 +26,43 @@ Use the native Markdown character `#` to generate headings for your content. The
 ##### H5. Heading
 
 ###### H6. Heading
-```
 
-The result looks like this:
-
-<p class="h1">H1. Heading</p>
-
-<p class="h2">H2. Heading</p>
-
-<p class="h3">H3. Heading</p>
-
-<p class="h4">H4. Heading</p>
-
-<p class="h5">H5. Heading</p>
-
-<p class="h6 pb-2">H6. Heading</p>
+{{< /example >}}
+<!-- markdownlint-enable MD025 -->
 
 Alternatively, you can use `.h1` through `.h6` classes, for when you want to match the font styling of a heading but cannot use the associated HTML element. For example, using a `.h2` class will exclude the section heading from the generated [table of contents]({{< ref "navigation#table-of-contents" >}}).
 
-```html
+{{< example lang="html" >}}
 <p class="h1">H1</p>
 <p class="h2">H2</p>
 <p class="h3">H3</p>
 <p class="h4">H4</p>
 <p class="h5">H5</p>
 <p class="h6">H6</p>
-```
+{{< /example >}}
 
 ## Display headings
 
 Display a larger, slightly more opinionated heading style by adding the `.display` class in HTML.
 
-```html
-<h1 class="display-1">Display 1</h1>
-<h1 class="display-2">Display 2</h1>
-<h1 class="display-3">Display 3</h1>
-<h1 class="display-4">Display 4</h1>
-<h1 class="display-5">Display 5</h1>
-<h1 class="display-6">Display 6</h1>
-```
-
-The result looks like this:
-
+{{< example lang="html" >}}
 <h1 class="display-1">Display 1</h1>
 <h1 class="display-2">Display 2</h1>
 <h1 class="display-3">Display 3</h1>
 <h1 class="display-4">Display 4</h1>
 <h1 class="display-5">Display 5</h1>
 <h1 class="display-6">Display 6</h1>
+{{< /example >}}
 
 ## Lead
 
 Make a paragraph stand out by adding `.lead` class in HTML.
 
-```html
-<p class="lead">
-  This is a lead paragraph. It stands out from regular paragraphs.
-</p>
-```
-
-The result looks like this:
-
+{{< example lang="html" >}}
 <p class="lead">
   This is a lead paragraph. It stands out from regular paragraphs.
 </p>
+{{< /example >}}
 
 ## Inline text elements
 
@@ -97,7 +72,8 @@ You can use native Markdown to apply basic styling. Use HTML elements for additi
 
 Use native Markdown apply basic styling to your text.
 
-```markdown
+<!-- markdownlint-disable MD049 -->
+{{< example lang="markdown" >}}
 ~~This line of text is meant to be treated as deleted text.~~
 
 _This line of text renders as underlined._
@@ -105,36 +81,19 @@ _This line of text renders as underlined._
 **This line of text renders as bold text.**
 
 *This line of text renders as italicized text.*
-```
-
-The result looks like this:
-
-~~This line of text is meant to be treated as deleted text.~~
-
-_This line of text renders as underlined._
-
-**This line of text renders as bold text.**
-
-<!-- markdownlint-disable-next-line -->
-*This line of text renders as italicized text.*
+{{< /example >}}
+<!-- markdownlint-enable MD049 -->
 
 ### HTML Styling
 
 Use HTML tags for additional styling options. The following example illustrates highlighting, fine print, subscript, and superscript.
 
-```html
-<p>You can use the mark tag to <mark>highlight</mark> text.</p>
-<p><small>This line of text is meant to be treated as fine print.</small></p>
-<p>H<sub>2</sub>O is a liquid.</p>
-<p>2<sup>10</sup> is 1024.</p>
-```
-
-The result looks like this:
-
+{{< example lang="html" >}}
 <p>You can use the mark tag to <mark>highlight</mark> text.</p>
 <p><small>This line of text is meant to be treated as fine print.</small></p>
 <p>H<sub>2</sub>O is a liquid.</p>
 <p>2<sup>10</sup> is 1024.</p>
+{{< /example >}}
 
 ## Emoji
 
@@ -152,13 +111,9 @@ That is so funny! :smiley:
 
 Use the HTML element `<abbr>` for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.
 
-```html
-<p><abbr title="HyperText Markup Language">HTML</abbr></p>
-```
-
-The result looks like this:
-
+{{< example lang="html" >}}
 <p><abbr title="HyperText Markup Language">HTML</abbr></p>
+{{< /example >}}
 
 ## Blockquotes
 
@@ -168,60 +123,29 @@ The blockquote element represents content that is quoted from another source, op
 
 The following Markdown generates a blockquote without attribution.
 
-```markdown
-> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
-> **Note** that you can use _Markdown syntax_ within a blockquote.
-{.blockquote}
-```
-
-The result looks like this:
-
+{{< example lang="markdown" >}}
 > Tiam, ad mint andaepu dandae nostion secatur sequo quae.
 > **Note** that you can use _Markdown syntax_ within a blockquote.
 {.blockquote}
+{{< /example >}}
 
 ### Blockquote with attribution
 
 The following Markdown generates a blockquote with attribution. The citation itself is added to the bottom of the page.
 
-```markdown
-> Don't communicate by sharing memory, share memory by communicating.<br>
-> — <cite>Rob Pike[^1]</cite>
-{.blockquote}
-
-[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
-```
-
-The result looks like this:
-
+{{< example lang="markdown" >}}
 > Don't communicate by sharing memory, share memory by communicating.<br>
 > — <cite>Rob Pike[^1]</cite>
 {.blockquote}
 
 [^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
+{{< /example >}}
 
 ## Code Blocks
 
-Use a single backtick `` ` `` character to denote an inline code element. Use triple backticks `` ``` `` to denote the start and end of a code block. Add the language to the openeing backticks to specify the syntax. Hugo uses Chroma highlighting to style the syntax of [supported languages]({{< param "links.hugo_chroma" >}}). The following example defines an `HTML` code block.
+Use a single backtick `` ` `` character to denote an inline code element. Use triple backticks `` ``` `` to denote the start and end of a code block. Add the language to the opening backticks to specify the syntax. Hugo uses Chroma highlighting to style the syntax of [supported languages]({{< param "links.hugo_chroma" >}}). The following example defines an `HTML` code block.
 
-<!-- markdownlint-disable MD040 MD048 -->
-~~~
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>Example HTML5 Document</title>
-  </head>
-  <body>
-    <p>Test</p>
-  </body>
-</html>
-```
-~~~
-<!-- markdownlint-enable MD040 MD048 -->
-
-The result looks like this:
+{{< example lang="markdown" >}}
 
 ```html
 <!DOCTYPE html>
@@ -236,6 +160,8 @@ The result looks like this:
 </html>
 ```
 
+{{< /example >}}
+
 ## List Types
 
 Use native Markdown to define ordered lists, unordered lists, and nested lists.
@@ -244,49 +170,31 @@ Use native Markdown to define ordered lists, unordered lists, and nested lists.
 
 The following Markdown defines an ordered list of three items. The sequence is automatically determined, so simply add `1.` at the start of each element. The [linting rules]({{< ref "contribute#markdown" >}}) will raise an error if you add the sequence numbering yourself.
 
-```markdown
-1. First item
-1. Second item
-1. Third item
-```
-
-The result looks like this:
+{{< example lang="markdown" >}}
 
 1. First item
 1. Second item
 1. Third item
 
+{{< /example >}}
+
 ### Unordered List
 
 Use the `-` character to denote an unordered list.
 
-```markdown
-- List item
-- Another item
-- And another item
-```
-
-The result looks like this:
+{{< example lang="markdown" >}}
 
 - List item
 - Another item
 - And another item
 
+{{< /example >}}
+
 ### Nested list
 
 Use indendation and the `-` character to denote a nested list.
 
-```markdown
-- Fruit
-  - Apple
-  - Orange
-  - Banana
-- Dairy
-  - Milk
-  - Cheese
-```
-
-The result looks like this:
+{{< example lang="markdown" >}}
 
 - Fruit
   - Apple
@@ -296,18 +204,16 @@ The result looks like this:
   - Milk
   - Cheese
 
+{{< /example >}}
+
 ### Task list
 
 Use the `-` character followed by either `[x]` or `[ ]` to indicate a (completed) task.
 
-```markdown
-- [x] Write the press release
-- [ ] Update the website
-- [ ] Contact the media
-```
-
-The result looks like this:
+{{< example lang="markdown" >}}
 
 - [x] Write the press release
 - [ ] Update the website
 - [ ] Contact the media
+
+{{< /example >}}

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

@@ -39,9 +39,9 @@ Adhering to the following process is the best way to get your work included in t
 1. Fork the project, clone your fork, and configure the remotes:
 
     ```bash
-    git clone https://github.com/<your-username>/hugo-theme-hinode.git
-    cd hugo-theme-hinode
-    git remote add upstream https://github.com/markdumay/hugo-theme-hinode
+    git clone https://github.com/<your-username>/hinode.git
+    cd hinode
+    git remote add upstream https://github.com/gethinode/hinode
     ```
 
 1. If you cloned a while ago, get the latest changes from upstream:
@@ -71,9 +71,11 @@ Adhering to the following process is the best way to get your work included in t
     git push origin <topic-branch-name>
     ```
 
-1. Open a [Pull Request]({{< param "links.github_pr" >}})with a clear title and description against the main branch.
+1. Open a [Pull Request]({{< param "links.github_pr" >}}) with a clear title and description against the main branch.
 
+{{< alert >}}
 **IMPORTANT**: By submitting a patch, you agree to allow the project owners to license your work under the terms of the [MIT license]({{< param "links.license" >}}) (if it includes code changes) and under the terms of the Creative Commons ([CC BY-NC 4.0)]({{< param "links.cc_by_nc_4_0" >}}) license (if it includes documentation changes).
+{{< /alert >}}
 
 ## Coding guidelines
 

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

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

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

@@ -1,7 +1,7 @@
 ---
 title: Introduction
 description: Get started with Hinode, a clean documentation and blog theme for your Hugo site based on Bootstrap 5.
-date: 2023-01-06
+date: 2023-01-29
 group: getting-started
 aliases:
   - "/en/docs/0.8/getting-started/"
@@ -21,45 +21,94 @@ Hinode requires Git, Node.js and npm for local development and testing. Download
 
 Start a new Hinode project in three steps:
 
-### 1. Create a new site
+1. Create a new site
 
-Hinode is available as a [child theme]({{< param "links.repository_child" >}}), and a [main theme]({{< param "links.repository" >}}). The child theme uses [npm]({{< param "links.npm" >}}) to link to the latest available version of Hinode. As such, it is less applicable if you plan to customize a lot. Vice versa, the main theme allows for heavy customization, but is not synchronized with the latest available Hinode theme automatically.
+    Hinode is available as a [child theme]({{< param "links.repository_child" >}}), and a [main theme]({{< param "links.repository" >}}). The child theme uses [npm]({{< param "links.npm" >}}) to link to the latest available version of Hinode. Unless you plan to customize a lot, it is recommended to use the child theme:
 
-Not quite sure? Use the Hinode child theme.
+    {{< command >}}
+    git clone https://github.com/gethinode/child.git my-hinode-site && cd my-hinode-site
+    {{< /command >}}
 
-#### Hinode child theme
+    Use the main theme if you intend to customize the base code:
 
-```bash
-git clone https://github.com/markdumay/hugo-theme-hinode-child.git my-hinode-site && cd my-hinode-site
-```
+    {{< command >}}
+    git clone https://github.com/gethinode/hinode.git my-hinode-site && cd my-hinode-site
+    {{< /command >}}
 
-#### Hinode main theme
+2. Install dependencies
 
-```bash
-git clone https://github.com/markdumay/hugo-theme-hinode.git my-hinode-site && cd my-hinode-site
-```
+    {{< command >}}
+    npm install
+    {{< /command >}}
 
-### 2. Install dependencies
+3. Start the development server
 
-```bash
-npm install
-```
+    {{< command >}}
+    npm run start
+    {{< /command >}}
 
-### 3. Start development server
+## Quick configuration settings
 
-```bash
-npm run start
-```
+The main site configuration is available in `./config/_default`. Review the following items to get you started.
 
-## Key configuration settings
+{{< accordion >}}
+  {{< accordion-item header="Review the layout options" >}}
+    Hinode uses a base layout for the home page, list pages, and individual pages. Individual pages can also be configured as documentation page instead of a regular page. Review the [layout documentation]({{< relref "colors" >}}) for more details.
+  {{< /accordion-item >}}
+  {{< accordion-item header="Adjust the theme colors" >}}
+    Hinode uses eight configurable theme colors. You can adjust them in the `style` section of  `/config/_default/params.toml`. Review the [colors documentation]({{< relref "colors" >}}) for more details.
+  {{< /accordion-item >}}
+  {{< accordion-item header="Set the main font" >}}
+    Set the `themeFont` and `themeFontPath` in the `style` section of `/config/_default/params.toml` to adjust the main font. Hinode includes supports for [Emoji]({{< relref "emoji" >}}) by default. Review the [fonts documentation]({{< relref "fonts" >}}) for more details.
+  {{< /accordion-item >}}
+  {{< accordion-item header="Configure the supported languages">}}
+    Configure each supported language in `config/_default/languages.toml`. Set the default behavior in `config/_default/config.toml`. Review the [languages documentation]({{< relref "languages" >}}) for more details.
+  {{< /accordion-item >}}
+  {{< accordion-item header="Define the main menu" >}}
+    Define the main menu entries for each language in `config/_default/menus`. For example, the English menu entries are defined in `menus.en.toml`. See the [navigation documentation]({{< relref "navigation" >}}) for more details.
+  {{< /accordion-item >}}
+{{< /accordion >}}
 
-The main site configuration is available in `./config/_default`. Some remarks:
+## Adding content
 
-| Topic           | Remarks |
-|-----------------|---------|
-| Menu items      | `menus/menus.en.toml` contains language-specific items for the navigation bar and social media links for the home page's footer. |
-| Content         | Ensure the `mainSections` in `config.toml` is synchronized with the `content` folder, default values are `["blog", "projects"]`. |
-| Theme style     | Update `primary` and `themeOpacity` within the `[style]` section of `params.toml` to update the site's primary color and opacity. Bootstrap's other key colors can be changed too. You can use the [WCAG Color Contrast Checker]({{< param "links.contrast_checker" >}}) to validate the contrast ratio of your color to improve accessibility. Additionally, set `themeFont` and `themeFontPath` to override the default font. |
-| Comments        | Comments are powered by [utterances]({{< param "links.utterances" >}}), a lightweight comments widget built on GitHub issues. Update the `repo`  of the `[comments]` section of `params.toml`. |
-| Security policy | The theme uses rather strict security policies by default. Be sure to include references to external sources in the header configuration to avoid broken links. The settings of the local development server are defined in `server.toml`. Similar settings are defined in the `netlify.toml` file provided in the repository's root when deploying to [Netlify]({{< param "links.netlify" >}}). |
-{.table}
+Hinode contains sample content for a blog and a project portfolio. The examples are available in English and Dutch and can be found in the `content` folder. Review the following items on to how organize and enrich your content.
+
+{{< accordion >}}
+  {{< accordion-item header="Enrich Markdown content with Bootstrap styling" >}}
+    Hinode uses a mix of basic Markdown syntax enriched with Bootstrap styling for the typography. Review the [typography documentation]({{< relref "typography" >}}) for more details.
+  {{< /accordion-item >}}
+  {{< accordion-item header="Use Markdown and Hugo shortcodes to generate links and cross-references" >}}
+    Generate internal links and external links using a combination of Markdown and Hugo shortcodes. You can optionally manage your external links in a central configuration file. Review the [links documentation]({{< relref "links-and-cross-references" >}}) for more details.
+  {{< /accordion-item >}}
+  {{< accordion-item header="Add responsive images optimized for multiple screen sizes and devices">}}
+    Hinode supports responsive images out-of-the-box. Hinode uses Hugo’s powerful image processing to preprocess images on the server. By taking advantage of so-called image sets, the client’s browser can decide which image to download whilst reducing the download size. Review the [image documentation]({{< relref "images-and-figures" >}}) for more details.
+  {{< /accordion-item >}}
+  {{< accordion-item header="Apply Bootstrap styling to your tables" >}}
+    Hinode enhances the basic tables available in Markdown with optional styling features provided by Bootstrap. You can customize the accentuation, adjust the borders, and make tables more compact. Review the [tables documentation]({{< relref "tables" >}}) for more details.
+  {{< /accordion-item >}}
+  {{< accordion-item header="Include Font Awesome icons on the fly" >}}
+    Hinode provides out-of-the box access to the free icons of [Font Awesome]({{< param "links.fontawesome" >}}). The icon library provides various styling options. Review the [icons documentation]({{< relref "../content/icons" >}}) for more details.
+  {{< /accordion-item >}}
+{{< /accordion >}}
+
+## Advanced configuration settings
+
+The next topics give an overview of the advanced configuration settings.
+
+{{< accordion >}}
+  {{< accordion-item header="Review the approach to dependency management and virtualization" >}}
+    Hinode uses [npm]({{< param "links.npm" >}}) packages to manage its dependencies. In addition, it uses Hugo's [mounted folders]({{< param "links.hugo_mounts" >}}) to create a virtual file system. Review the [advanced settings overview]({{< relref "../advanced-settings/overview" >}}) for more details.
+  {{< /accordion-item >}}
+  {{< accordion-item header="Adjust the build pipeline for Sass files" >}}
+    Hinode uses Bootstrap's Sass files to generate the cascading style sheets of the website. The main entrypoint is defined in `assets/scss/app.scss`. See the [styles documentation]({{< relref "styles" >}}) for more details.
+  {{< /accordion-item >}}
+  {{< accordion-item header="Bundle JavaScript files for deployment">}}
+    Hinodes uses npm to include the latest JavaScript files of external packages such as [Bootstrap]({{< param "links.bootstrap" >}}) and [FlexSearch]({{< param "links.flexsearch" >}}). All local and external files are bundled in a single JavaScript file. See the [scripts documentation]({{< relref "scripts" >}}) for more details.
+  {{< /accordion-item >}}
+  {{< accordion-item header="Process icon files to apply theme colors" >}}
+    Hinode replaces Boostrap's embedded icons with file-based icons to comply with its security settings. The icon files are parameterized to use the theme colors. See the [icons documentation]({{< relref "../advanced-settings/icons" >}}) for more details.
+  {{< /accordion-item >}}
+  {{< accordion-item header="Refine header settings to adjust the Content Security Policy" >}}
+    Hinode uses rather strict security policies to ensure the site is secure by default. Be sure to include references to external sources in the header configuration to avoid broken links. The settings of the local development server are defined in `config/_default/server.toml`. Similar settings are defined in the `netlify.toml` file provided in the repository's root when deploying to [Netlify]({{< param "links.netlify" >}}). See the [server documentation]({{< relref "server" >}}) for more details.
+  {{< /accordion-item >}}
+{{< /accordion >}}

data/docs.yml

@@ -4,31 +4,33 @@
   pages:
     - title: Introduction
     - title: Commands
+    - title: Hosting and deployment
     - title: Contribute
 
 - title: Configuration
   pages:
-    - title: Overview
     - title: Layout
     - title: Colors
     - title: Fonts
-    - title: Navigation
     - title: Languages
+    - title: Navigation
+    # - title: Comments
+
+- title: Advanced settings
+  pages:
+    - title: Overview
     - title: Styles
     - title: Scripts
     - title: Icons
-    # - title: Comments
     # - title: Metadata
     - title: Server
-    # - title: Deployment
 
 - title: Content
   pages:
     - title: Typography
-    # - title: Links and cross-references
-    # - title: Images
+    - title: Links and cross-references
+    - title: Images and figures
     - title: Tables
-    # - title: Figures
     - title: Icons
 
 # - title: Forms
@@ -59,6 +61,8 @@
     - title: Command prompt
     # - title: Dropdowns
     # - title: List group
+    - title: Icon
+    - title: Image
     # - title: Modal
     - title: Navbar
     # - title: Navs & tabs

layouts/_default/_markup/render-codeblock.html

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

layouts/shortcodes/accordion-item.html

@@ -1,7 +1,8 @@
 <!-- 
     Defines an individual accordion item. The shortcode supports the following arguments:
     "header"        Required header of the accordion element.
-    "class"         Optional class attribute of the inner accordion element, e.g. “show”.
+    "class"         Optional class attribute of the inner accordion element.
+    "show"          Optional flag to indicate an item should be shown as collapsed.
 -->
 
 {{- $id := .Ordinal -}}
@@ -24,15 +25,27 @@
     {{ end }}
 {{ end -}}
 
+{{ $supportedFlags := slice "true" "false" -}}
+{{ $showParam := "false" -}}
+{{ $show := false -}}
+{{ with .Get "show" }}{{ $showParam = . }}{{ end -}}
+{{ if in $supportedFlags $showParam -}}
+    {{ if eq $showParam "true" }}{{ $show = true }}{{ else }}{{ $show = false }}{{ end -}}
+{{ else -}}
+    {{ errorf "Invalid value for param 'show': %s" $showParam -}}
+{{ end -}}
+
+{{- $parent := printf "accordion-%d" .Parent.Ordinal -}}
+
 <div class="accordion-item">
     {{- with $header -}}
-    <h2 class="accordion-header m-0" id="accordion-heading-{{ $id }}">
-        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-item-{{ $id }}" aria-expanded="true" aria-controls="accordion-item-{{ $id }}">
+    <h2 class="accordion-header m-0" id="{{ $parent }}-heading-{{ $id }}">
+        <button class="accordion-button{{ if not $show }} collapsed{{ end }}" type="button" data-bs-toggle="collapse" data-bs-target="#{{ $parent }}-item-{{ $id }}" aria-expanded="false" aria-controls="{{ $parent }}-item-{{ $id }}">
         {{ . }}
         </button>
     </h2>
     {{- end -}}
-    <div id="accordion-item-{{ $id }}" class="accordion-collapse collapse {{ $class }}" aria-labelledby="accordion-heading-{{ $id }}" data-bs-parent="#accordion-{{ .Parent.Ordinal }}">
-        <div class="accordion-body">{{ $body | safeHTML }}</div>
+    <div id="{{ $parent }}-item-{{ $id }}" class="accordion-collapse collapse{{ if $show }} show{{ end }}{{ with $class }} {{ . }}{{ end }}" aria-labelledby="{{ $parent }}-heading-{{ $id }}" data-bs-parent="#{{ $parent }}">
+        <div class="accordion-body">{{ $body | markdownify | safeHTML }}</div>
     </div>
 </div>

layouts/shortcodes/accordion.html

@@ -5,8 +5,8 @@
 -->
 
 {{- $id := .Ordinal -}}
-{{ $class := .Get "class" -}}
+{{- $class := .Get "class" -}}
 
-<div id="accordion-{{ $id }}" class="accordion {{ $class }}">
-    {{ .Inner }}
+<div id="accordion-{{ $id }}" class="accordion mb-3{{ with $class }} {{ . }}{{ end }}">
+    {{- .Inner -}}
 </div>

layouts/shortcodes/alert.html

@@ -28,6 +28,6 @@
 
 <div class="alert alert-{{ $color }} {{ if $dismissible }}alert-dismissible fade show{{ end }}" role="alert">
     {{ with $icon }}<i class="{{ . }} fa-2x fa-pull-left"></i>{{ end }}
-    {{ trim .Inner " \r\n" -}}
+    {{ trim .Inner " \r\n" | markdownify | safeHTML -}}
     {{ if $dismissible }}<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>{{ end }}
 </div>

layouts/shortcodes/carousel.html

@@ -12,7 +12,7 @@
 {{ $images := .Inner -}}
 {{ $items := len (findRE "carousel-item" $images) -}}
 
-<div id="carousel-{{ $id }}" class="carousel slide {{ $class }}" data-bs-ride="true">
+<div id="carousel-{{ $id }}" class="carousel slide mb-3{{ with $class }} {{ . }}{{ end }}" data-bs-ride="true">
     <div class="carousel-indicators">
         {{ range $index := (seq $items) -}}
             <button type="button" data-bs-target="#carousel-{{ $id }}" data-bs-slide-to="{{ sub $index 1 }}" {{ if eq $index 1 }}class="active"{{ end }} aria-current="true" aria-label="Slide {{ $index }}"></button>

layouts/shortcodes/command.html

@@ -1,70 +1,65 @@
-{{ $host := .Get "host" }}
-{{ $user := .Get "user" }}
-{{ $prompt := .Get "prompt" }}
-{{ $filter := "(out)" }}
-{{ $input := trim .Inner "\r\n" }}
+{{- $host := .Get "host" -}}
+{{- $user := .Get "user" -}}
+{{- $prompt := .Get "prompt" -}}
+{{- $filter := "(out)" -}}
+{{- $input := trim .Inner " \t\r\n" -}}
 
-{{ $shell := lower (.Get "shell") }}
-{{ $continuationPrompt := ">" }}
-{{ $continuationStr := "\\" }}
-{{ if eq $shell "powershell" }}
-    {{ if not $prompt }}{{ $prompt = "PS>" }}{{ end }}
-    {{ $continuationPrompt = ">>" }}
-    {{ $continuationStr = "`" }}
-{{ else if eq $shell "sql" }}
-    {{ if not $prompt }}{{ $prompt = "sql>" }}{{ end }}
-    {{ $continuationPrompt = "->" }}
-    {{ $continuationStr = "(con)" }}
-{{ else }}
-    {{ $shell = "bash" }}
-    {{ if not $prompt }}{{ $prompt = "$" }}{{ end }}
-    {{ if (and ($host) ($user)) }}
-        {{ $prompt = printf "[%s@%s] %s" $user $host $prompt}}
-    {{ end }}
-{{ end }}
+{{- $shell := lower (.Get "shell") -}}
+{{- $continuationPrompt := ">" -}}
+{{- $continuationStr := "\\" -}}
+{{- if eq $shell "powershell" -}}
+    {{- if not $prompt }}{{ $prompt = "PS>" }}{{ end -}}
+    {{- $continuationPrompt = ">>" -}}
+    {{- $continuationStr = "`" -}}
+{{- else if eq $shell "sql" -}}
+    {{- if not $prompt }}{{ $prompt = "sql>" }}{{ end -}}
+    {{- $continuationPrompt = "->" -}}
+    {{- $continuationStr = "(con)" -}}
+{{- else -}}
+    {{- $shell = "bash" -}}
+    {{- if not $prompt }}{{ $prompt = "$" }}{{ end -}}
+    {{- if (and ($host) ($user)) -}}
+        {{- $prompt = printf "[%s@%s] %s" $user $host $prompt -}}
+    {{- end -}}
+{{- end -}}
 
+{{- $lines := split $input "\n" -}}
+{{- $prefix := "" -}}
+{{- $prevLine := "" -}}
+{{- $refined := "" -}}
+{{- range $line := $lines -}}
+    {{- $line = trim $line " \t\r\n" -}}
+    {{- if hasPrefix $line $filter -}}
+        {{- $prefix = printf "%s<span></span>" $prefix -}}
+        {{- if eq $shell "sql" -}}
+            {{- $line = printf "--%s" (strings.TrimPrefix $filter $line) -}}
+        {{- else -}}
+            {{- $line = printf "#%s" (strings.TrimPrefix $filter $line) -}}
+        {{- end -}}
+    {{- else if (strings.HasSuffix $prevLine $continuationStr) -}}
+        {{- $prefix = printf "%s<span data-prompt=\"%s\"></span>" $prefix $continuationPrompt -}}
+    {{- else -}}
+        {{- $prefix = printf "%s<span data-prompt=\"%s\"></span>" $prefix $prompt -}}
+    {{- end -}}
+    {{- $prevLine = $line -}}
+    {{- if (and (eq $shell "sql") (strings.HasSuffix $line $continuationStr)) -}}
+        {{- $line = strings.TrimSuffix $continuationStr $line -}}
+    {{- end -}}
+    {{- $refined = printf "%s\n%s" $refined $line -}}
+{{- end -}}
 
+{{- $refined := trim $refined "\r\n" -}}
+{{- $output := (transform.Highlight $refined $shell | safeHTML) -}}
+{{- $insert := printf "<span class=\"command-line-prompt\">%s</span><span class=\"line\">" $prefix -}}
+{{- $output := (replace $output ("<span class=\"line\">" | safeHTML) $insert 1 | safeHTML) -}}
 
+{{- if eq $shell "sql" -}}
+    {{- $output = (replace $output "<span class=\"c1\">--" "<span class=\"c1\">" | safeHTML) -}}
+{{- else -}}
+    {{- $output = (replace $output "<span class=\"c1\">#" "<span class=\"c1\">" | safeHTML) -}}
+    {{- $output = (replace $output "<span class=\"c\">#" "<span class=\"c\">" | safeHTML) -}}
+{{- end -}}
 
-{{ $lines := split $input "\n" }}
-{{ $prefix := ""}}
-{{ $prevLine := "" }}
-{{ $refined := "" }}
-{{ range $line := $lines }}
-    {{ if hasPrefix $line $filter }}
-        {{ $prefix = printf "%s<span></span>" $prefix }}
-        {{ if eq $shell "sql" }}
-            {{ $line = printf "--%s" (strings.TrimPrefix $filter $line) }}
-        {{ else }}
-            {{ $line = printf "#%s" (strings.TrimPrefix $filter $line) }}
-        {{ end }}
-    {{ else if (strings.HasSuffix $prevLine $continuationStr) }}
-        {{ $prefix = printf "%s<span data-prompt=\"%s\"></span>" $prefix $continuationPrompt }}
-    {{ else }}
-        {{ $prefix = printf "%s<span data-prompt=\"%s\"></span>" $prefix $prompt }}
-    {{ end }}
-    {{ $prevLine = $line }}
-    {{ if (and (eq $shell "sql") (strings.HasSuffix $line $continuationStr)) }}
-        {{ $line = strings.TrimSuffix $continuationStr $line }}
-    {{ end }}
-    {{ $refined = printf "%s\n%s" $refined $line }}
-{{ end }}
-
-{{ $refined := trim $refined "\r\n" }}
-
-{{ $output := (transform.Highlight $refined $shell | safeHTML) }}
-
-
-
-{{ $insert := printf "<span class=\"command-line-prompt\">%s</span><span class=\"line\">" $prefix }}
-
-{{ $output := (replace $output ("<span class=\"line\">" | safeHTML) $insert 1 | safeHTML) }}
-
-{{ if eq $shell "sql"}}
-    {{ $output = (replace $output "<span class=\"c1\">--" "<span class=\"c1\">" | safeHTML) }}
-{{ else }}        
-    {{ $output = (replace $output "<span class=\"c1\">#" "<span class=\"c1\">" | safeHTML) }}
-    {{ $output = (replace $output "<span class=\"c\">#" "<span class=\"c\">" | safeHTML) }}
-{{ end }}
-
-{{ $output }}
+<div class="bg-light mb-3">
+    {{- $output -}}
+</div>

layouts/shortcodes/docs.html

@@ -0,0 +1,69 @@
+{{- /*
+    Source: https://github.com/twbs/bootstrap/blob/main/site/layouts/shortcodes/scss-docs.html
+
+    Usage: `docs name="name" file="path/filename.<toml|scss>"`
+
+    Prints everything between `# toml-docs-start "name"` and `# toml-docs-end "name"`
+    comments in the docs, or between `// scss-docs-start` and `// scss-docs-end`.
+*/ -}}
+
+{{- $name := .Get "name" -}}
+{{- $file := path.Clean (.Get "file") -}}
+{{- $extension := path.Ext $file -}}
+{{- $capture_start := "" -}}
+{{- $capture_end := "" -}}
+
+{{- $id := printf "docs-collapse-%d" .Ordinal -}}
+
+{{- $supportedExtensions := slice ".scss" ".toml" -}}
+{{- if in $supportedExtensions $extension -}}
+    {{- if eq $extension ".toml" }}
+        {{- $capture_start = printf "# toml-docs-start %s" $name -}}
+        {{- $capture_end = printf "# toml-docs-end %s" $name -}}
+    {{- else -}}
+        {{- $capture_start = printf "// scss-docs-start %s" $name -}}
+        {{- $capture_end = printf "// scss-docs-end %s" $name -}}
+    {{- end -}}
+{{- else -}}
+    {{- errorf "File format not supported (line %s): %s" .Position $file -}}
+{{- end -}}
+
+{{ $supportedFlags := slice "true" "false" -}}
+{{ $showParam := "true" -}}
+{{ $show := true -}}
+{{ with .Get "show" }}{{ $showParam = . }}{{ end -}}
+{{ if in $supportedFlags $showParam -}}
+    {{ if eq $showParam "true" }}{{ $show = true }}{{ else }}{{ $show = false }}{{ end -}}
+{{ else -}}
+    {{ errorf "Invalid value for param 'show': %s" $showParam -}}
+{{ end -}}
+
+
+{{- /* If any parameters are missing, print an error and exit */ -}}
+{{- if or (not $name) (not $file) -}}
+    {{- errorf "%s: %q: Missing required parameters! Got: name=%q file=%q!" .Position .Name $name $file -}}
+{{- else -}}
+    {{- $regex := printf `%s((?:.|\n)*)%s` $capture_start $capture_end -}}
+
+    {{- $match := findRE $regex (readFile $file) -}}
+    {{- $match = index $match 0 -}}
+
+    {{- if not $match -}}
+        {{- errorf "%s: %q: Got no matches for name=%q in file=%q!" .Position .Name $name $file -}}
+    {{- end -}}
+
+    {{- $match = replace $match $capture_start "" -}}
+    {{- $match = replace $match $capture_end "" -}}
+
+    <ul class="nav nav-tabs">
+        <li class="nav-item">
+          <a class="nav-link active font-monospace" href="#body-{{ $id }}" aria-current="page" data-bs-toggle="collapse" data-bs-target=".multi-{{ $id }}" aria-expanded="false" aria-controls="body-{{ $id }} footer-{{ $id }}"><small>{{ $file }}</small></a>
+        </li>
+    </ul>
+    <div class="border-start border-end border-bottom mb-3">
+        <div class="collapse multi-{{ $id }}{{ if $show }} show{{ end }} bg-light" id="body-{{ $id }}">
+            {{- highlight (trim $match "\r\n") "toml" "" -}}
+        </div>
+        <div class="collapse multi-{{ $id }}{{ if not $show }} show{{ end }} p-3" id="footer-{{ $id }}"><i>...</i></div>
+    </div>
+{{- end -}}

layouts/shortcodes/example.html

@@ -19,12 +19,13 @@
 {{- $input := .Inner -}}
 {{- $content := .Inner -}}
 
-{{- if eq $lang "hugo" -}}
+{{ $preprocess := slice "hugo" "markdown" }}
+{{- if in $preprocess $lang -}}
     {{- $content = (trim $content "\r\n") | markdownify }}
     {{ $lang = "markdown" }}
 {{- end -}}
 
-<div class="rounded border">
+<div class="rounded border mb-3">
     {{- if eq $show_preview true -}}
         <div {{ with $id }}id="{{ . }}"{{ end }} class="p-3 {{ with $class }} {{ . }}{{ end }}">
             {{- $content -}}
@@ -38,7 +39,7 @@
             </button>
         </div> -->
     </div>
-    <div class="bg-light rounded p-1">
+    <div class="rounded bg-light">
         {{- if eq $show_markup true -}}
             {{- highlight (trim $input "\r\n") $lang "" -}}
         {{- end -}}

layouts/shortcodes/fa.html

@@ -0,0 +1,5 @@
+{{- if not (.Get 0) -}}
+    {{- errorf "Expected icon name: %s" .Position -}}
+{{- else -}}
+    <i class="fa-regular fa-{{ (delimit .Params " ") }}"></i>
+{{- end -}}

layouts/shortcodes/fab.html

@@ -0,0 +1,5 @@
+{{- if not (.Get 0) -}}
+    {{- errorf "Expected icon name: %s" .Position -}}
+{{- else -}}
+    <i class="fa-brands fa-{{ (delimit .Params " ") }}"></i>
+{{- end -}}

layouts/shortcodes/fas.html

@@ -0,0 +1,5 @@
+{{- if not (.Get 0) -}}
+    {{- errorf "Expected icon name: %s" .Position -}}
+{{- else -}}
+    <i class="fa-solid fa-{{ (delimit .Params " ") }}"></i>
+{{- end -}}

layouts/shortcodes/figure.html

@@ -1,30 +0,0 @@
-<!-- Adapted from https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/shortcodes/figure.html -->
-<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
-    {{- if .Get "link" -}}
-        <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
-    {{- end -}}
-    <img src="{{ .Get "src" }}"
-         {{- if or (.Get "alt") (.Get "caption") }}
-         alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
-         {{- end -}}
-         {{- with .Get "width" }} width="{{ . }}"{{ end -}}
-         {{- with .Get "height" }} height="{{ . }}"{{ end -}}
-         class="img-fluid"
-    /><!-- Closing img tag -->
-    {{- if .Get "link" }}</a>{{ end -}}
-    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
-    <figcaption class="figure-caption">
-            {{ with (.Get "title") -}}
-                <h4>{{ . }}</h4>
-            {{- end -}}
-            {{- if or (.Get "caption") (.Get "attr") -}}<p>
-                {{- .Get "caption" | markdownify -}}
-                {{- with .Get "attrlink" }}
-                    <a href="{{ . }}">
-                {{- end -}}
-                {{- .Get "attr" | markdownify -}}
-                {{- if .Get "attrlink" }}</a>{{ end }}</p>
-            {{- end }}
-        </figcaption>
-    {{- end }}
-</figure>

layouts/shortcodes/scss-docs.html

@@ -1,45 +0,0 @@
-{{- /*
-    Source: https://github.com/twbs/bootstrap/blob/main/site/layouts/shortcodes/scss-docs.html
-    
-    Usage: `scss-docs name="name" file="file/_location.scss"`
-  
-    Prints everything between `// scss-docs-start "name"` and `// scss-docs-end "name"`
-    comments in the docs.
-  
-    Optional parameters:
-      * strip-default: Remove the ` !default` flag from variable assignments - default: `true`
-  */ -}}
-  
-  {{- $name := .Get "name" -}}
-  {{- $file := path.Clean (.Get "file") -}}
-  {{- $strip_default := .Get "strip-default" | default "true" -}}
-  
-  {{- /* If any parameters are missing, print an error and exit */ -}}
-  {{- if or (not $name) (not $file) -}}
-    {{- errorf "%s: %q: Missing required parameters! Got: name=%q file=%q!" .Position .Name $name $file -}}
-  {{- else -}}
-    {{- $capture_start := printf "// scss-docs-start %s" $name -}}
-    {{- $capture_end := printf "// scss-docs-end %s" $name -}}
-    {{- $regex := printf `%s((?:.|\n)*)%s` $capture_start $capture_end -}}
-  
-    {{- /*
-      TODO: figure out why we can't do the following and get the first group (the only capturing one)...
-      $regex := printf `(?:// scss-docs-start %s\n)((?:.|\n)*)(?:\n// scss-docs-end %s)` $name $name
-    */ -}}
-  
-    {{- $match := findRE $regex (readFile $file) -}}
-    {{- $match = index $match 0 -}}
-  
-    {{- if not $match -}}
-      {{- errorf "%s: %q: Got no matches for name=%q in file=%q!" .Position .Name $name $file -}}
-    {{- end -}}
-  
-    {{- $match = replace $match $capture_start "" -}}
-    {{- $match = replace $match $capture_end "" -}}
-  
-    {{- if (ne $strip_default "false") -}}
-      {{- $match = replace $match " !default" "" -}}
-    {{- end -}}
-  
-    {{- highlight (trim $match "\r\n") "scss" "" -}}
-  {{- end -}}

layouts/shortcodes/toml-docs.html

@@ -1,32 +0,0 @@
-{{- /*
-    Source: https://github.com/twbs/bootstrap/blob/main/site/layouts/shortcodes/scss-docs.html
-    
-    Usage: `toml-docs name="name" file="file/_location.toml"`
-  
-    Prints everything between `# toml-docs-start "name"` and `# toml-docs-end "name"`
-    comments in the docs.
-  */ -}}
-  
-  {{- $name := .Get "name" -}}
-  {{- $file := path.Clean (.Get "file") -}}
-  
-  {{- /* If any parameters are missing, print an error and exit */ -}}
-  {{- if or (not $name) (not $file) -}}
-    {{- errorf "%s: %q: Missing required parameters! Got: name=%q file=%q!" .Position .Name $name $file -}}
-  {{- else -}}
-    {{- $capture_start := printf "# toml-docs-start %s" $name -}}
-    {{- $capture_end := printf "# toml-docs-end %s" $name -}}
-    {{- $regex := printf `%s((?:.|\n)*)%s` $capture_start $capture_end -}}
-  
-    {{- $match := findRE $regex (readFile $file) -}}
-    {{- $match = index $match 0 -}}
-  
-    {{- if not $match -}}
-      {{- errorf "%s: %q: Got no matches for name=%q in file=%q!" .Position .Name $name $file -}}
-    {{- end -}}
-  
-    {{- $match = replace $match $capture_start "" -}}
-    {{- $match = replace $match $capture_end "" -}}
-    
-    {{- highlight (trim $match "\r\n") "toml" "" -}}
-  {{- end -}}

netlify.toml

@@ -1,18 +1,21 @@
+# toml-docs-start netlify
 [build]
     publish = "public"
     functions = "functions"
 
 [build.environment]
-    NODE_VERSION = "16.13.1"
-    NPM_VERSION = "8.6.0"
+    NODE_VERSION = "18.13.0"
+    NPM_VERSION = "8.19.3"
 
 [context.production]
     command = "npm run build"
 
 [context.production.environment]
-    HUGO_VERSION = "0.83.1"
+    HUGO_VERSION = "0.110.0"
     HUGO_ENV = "production"
     HUGO_ENABLEGITINFO = "true"
+# toml-docs-end netlify
+
 [[headers]]
     for = "/*"
     [headers.values]

package-lock.json

@@ -1,12 +1,12 @@
 {
-  "name": "@markdumay/hugo-theme-hinode",
-  "version": "0.8.0-alpha",
+  "name": "@gethinode/hinode",
+  "version": "0.8.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "@markdumay/hugo-theme-hinode",
-      "version": "0.8.0-alpha",
+      "name": "@gethinode/hinode",
+      "version": "0.8.0",
       "hasInstallScript": true,
       "license": "MIT",
       "devDependencies": {
@@ -1538,9 +1538,9 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.32.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.32.0.tgz",
-      "integrity": "sha512-nETVXpnthqKPFyuY2FNjz/bEd6nbosRgKbkgS/y1C7LJop96gYHWpiguLecMHQ2XCPxn77DS0P+68WzG6vkZSQ==",
+      "version": "8.33.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.33.0.tgz",
+      "integrity": "sha512-WjOpFQgKK8VrCnAtl8We0SUOy/oVZ5NHykyMiagV1M9r8IFpIJX7DduK6n1mpfhlG7T1NLWm2SuD8QB7KFySaA==",
       "dev": true,
       "dependencies": {
         "@eslint/eslintrc": "^1.4.1",
@@ -2720,9 +2720,9 @@
       }
     },
     "node_modules/http-cache-semantics": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
-      "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
+      "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==",
       "dev": true
     },
     "node_modules/http2-wrapper": {
@@ -6687,9 +6687,9 @@
       "dev": true
     },
     "eslint": {
-      "version": "8.32.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.32.0.tgz",
-      "integrity": "sha512-nETVXpnthqKPFyuY2FNjz/bEd6nbosRgKbkgS/y1C7LJop96gYHWpiguLecMHQ2XCPxn77DS0P+68WzG6vkZSQ==",
+      "version": "8.33.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.33.0.tgz",
+      "integrity": "sha512-WjOpFQgKK8VrCnAtl8We0SUOy/oVZ5NHykyMiagV1M9r8IFpIJX7DduK6n1mpfhlG7T1NLWm2SuD8QB7KFySaA==",
       "dev": true,
       "requires": {
         "@eslint/eslintrc": "^1.4.1",
@@ -7560,9 +7560,9 @@
       "dev": true
     },
     "http-cache-semantics": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
-      "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
+      "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==",
       "dev": true
     },
     "http2-wrapper": {

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@markdumay/hugo-theme-hinode",
-  "version": "0.8.0-alpha",
+  "name": "@gethinode/hinode",
+  "version": "0.8.0",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",
@@ -41,14 +41,14 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/markdumay/hugo-theme-hinode.git"
+    "url": "git+https://github.com/gethinode/hinode.git"
   },
   "author": "Mark Dumay",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/markdumay/hugo-theme-hinode/issues"
+    "url": "https://github.com/gethinode/hinode/issues"
   },
-  "homepage": "https://github.com/markdumay/hugo-theme-hinode#readme",
+  "homepage": "https://github.com/gethinode/hinode#readme",
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^6.2.1",
     "@fullhuman/postcss-purgecss": "^5.0.0",

theme.toml

@@ -1,9 +1,9 @@
 name = "Hinode"
 license = "MIT"
-licenselink = "https://github.com/markdumay/hugo-theme-hinode/blob/main/LICENSE"
+licenselink = "https://github.com/gethinode/hinode/blob/main/LICENSE"
 description = "A clean documentation and blog theme for your Hugo site based on Bootstrap 5."
-homepage = "https://github.com/markdumay/hugo-theme-hinode"
-demosite = "https://hinode-demo.markdumay.org/"
+homepage = "https://github.com/gethinode/hinode"
+demosite = "https://demo.gethinode.com"
 tags = ["blog", "documentation", "minimal", "modern", "customizable", "search", "bootstrap"]
 features = ["security aware", "fast by default", "seo-ready", "development tools", "bootstrap framework", "netlify-ready", "full text search", "page layouts"]
 min_version = "0.81.0"