gethinode · markdumay · Aug 14, 2024 · Aug 13, 2024 · Aug 14, 2024 · Aug 14, 2024
diff --git a/config/_default/params.toml b/config/_default/params.toml
@@ -2,6 +2,7 @@
     separator = "-"
     description = "Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5."
     enableDarkMode = true
+    enableLanguageSelectionStorage = false
     modes = ["light", "dark"]
     canonifyAssetsURLs = false
     footerBelowFold = false

diff --git a/content/en/docs/latest/advanced-settings/module-development.md b/content/en/docs/latest/advanced-settings/module-development.md
@@ -1,19 +1,16 @@
 ---
 title: Module development
 description: Develop your own Hugo modules compatible with Hinode.
-date: 2024-05-22
+date: 2024-08-14
 layout: docs
 ---
 
 {{< release version="v0.16.0" >}}
 
-Hinode fully supports {{< link hugo_modules >}}Hugo modules{{< /link >}} to provide a flexible and extensible modular framework. By default, Hinode includes core building blocks for {{< link bootstrap >}}Bootstrap{{< /link >}}, {{< link flexsearch >}}FlexSearch{{< /link >}}, and {{< link fontawesome >}}Font Awesome{{< /link >}}. The following paragraphs describe the coding conventions of Hinode modules, illustrate how to automate your build and release process, and give an overview of common issues and resolutions.
+> [!TIP]
+> A {{< link repository_mod_template >}}template repository for Hugo modules that are compatible with Hinode{{< /link >}} is maintained on GitHub. The repository provides a starting point for developing your own modules.
 
-<!-- markdownlint-disable MD037 -->
-{{< alert type="info" >}}
-A {{</* link repository_mod_template >}}template repository for Hugo modules that are compatible with Hinode{{< /link */>}} is maintained on GitHub. The repository provides a starting point for developing your own modules.
-{{< /alert >}}
-<!-- markdownlint-enable MD037 -->
+Hinode fully supports {{< link hugo_modules >}}Hugo modules{{< /link >}} to provide a flexible and extensible modular framework. By default, Hinode includes core building blocks for {{< link bootstrap >}}Bootstrap{{< /link >}}, {{< link flexsearch >}}FlexSearch{{< /link >}}, and {{< link fontawesome >}}Font Awesome{{< /link >}}. The following paragraphs describe the coding conventions of Hinode modules, illustrate how to automate your build and release process, and give an overview of common issues and resolutions.
 
 ## Conventions
 
@@ -114,9 +111,8 @@ Head over to `Branches` section within `Code and automation` of your repository
 
 Specify the test you defined previously as required status check. When using Hinode's default test, you would see six different checks (three platforms with two Node versions each).
 
-{{< alert type="info" >}}
-GitHub only displays selectable status checks when they have had an initial run, so be sure to run the test first. Also, the status checks are not automatically updated when the test script changes. You will need to manually update the status checks as required.
-{{< /alert >}}
+> [!IMPORTANT]
+> GitHub only displays selectable status checks when they have had an initial run, so be sure to run the test first. Also, the status checks are not automatically updated when the test script changes. You will need to manually update the status checks as required.
 
 #### Automated merging
 

diff --git a/content/en/docs/latest/advanced-settings/overview.md b/content/en/docs/latest/advanced-settings/overview.md
@@ -1,7 +1,7 @@
 ---
 title: Overview
 description: Configure and customize Hinode to your liking using modules, npm, and mounted folders.
-date: 2023-08-03
+date: 2023-08-14
 aliases:
   - "/docs/advanced-settings/"
   - "/advanced-settings/"
@@ -14,19 +14,17 @@ As a theme for Hugo, Hinode is highly configurable and customizable. Hinode util
 
 Hinode fully supports {{< link hugo_modules >}}Hugo modules{{< /link >}} to provide a flexible and extensible modular framework. These modules provide one or more of the seven component types defined in Hugo: `static`, `content`, `layouts`, `data`, `assets`, `i18n`, and `archetypes`. Powered by Go modules, Hugo verifies if a module is up-to-date and downloads the latest release if needed. This approach is compatible with any repository hosted on GitHub and is not exclusive to Hugo modules only.
 
-{{< alert type="info" >}}
-Hugo does have some requirements for the modules to work correctly in all scenarios. Review the [module development troubleshooting section]({{< relref "module-development#troubleshooting" >}}) to familiarize yourself with them.
-{{< /alert >}}
+> [!NOTE]
+> Hugo has several requirements for the modules to work correctly in all scenarios. Review the [module development troubleshooting section]({{< relref "module-development#troubleshooting" >}}) to familiarize yourself with them.
 
 Hinode uses Hugo modules to provide a flexible and extensible modular framework. Modules can be fully integrated into the main site or be included on a page-by-page basis. Core modules are fully integrated with the site's stylesheet and bundled JavaScript files. The stylesheet and scripts of optional modules are loaded on a specific page only to minimize overhead. Refer to the [modules]({{< relref "../configuration/modules" >}}) section for more details.
 
 ## Mounted folders
 
 Hugo supports the {{< link hugo_mounts >}}mounting of folders{{< /link >}} since version 0.56.0. Hinode takes advantage of this feature to create a virtual file system, combining assets from multiple sources. Many of the predefined Hinode modules use mounted folders to expose relevant content and to standardize the folder structure. Take a look at the configuration of {{< link repository_mod_bootstrap >}}Hinode's Bootstrap module{{< /link >}}. The configuration uses the repository `github.com/twbs/bootstrap` as module source and exposes the SCSS files and bundled JavaScript file. These files are combined with the module's own files defined in the `assets` folder.
 
-{{< alert type="danger" >}}
-    When you add a mount, the default mount for the concerned target root is ignored: be sure to explicitly add it.
-{{< /alert >}}
+> [!IMPORTANT]
+> When you add a mount, the default mount for the concerned target root is ignored: be sure to explicitly add it.
 
 ```toml
 [module]

diff --git a/content/en/docs/latest/advanced-settings/styles.md b/content/en/docs/latest/advanced-settings/styles.md
@@ -1,21 +1,16 @@
 ---
 title: Styles
 description: Use extensible Sass files to generate the stylesheets for your website.
-date: 2023-09-06
+date: 2024-08-14
 layout: docs
 ---
 
-<!-- TODO: include dartsass -->
-
 Hinode uses Sass files to take advantage of variables, maps, and functions to generate the cascading style sheets of the website. By utilizing [Hugo modules]({{< ref "overview" >}}), Bootstrap's source Sass file are automatically ingested and kept up to date.
 
 ## Build pipeline
 
-<!-- markdownlint-disable MD037 -->
-{{< alert type="info" >}}
-**v0.20.0** - Hinode has added support for the Dart Sass transpiler in release v0.20.0. The default libsass transpiler has been {{</* link hugo_sass >}}deprecated in favor of Dart Sass{{< /link */>}}, but is still widely used. Hinode uses the libsass transpiler by default. Review the {{</* link "docs/configuration/layout#extended-configuration" >}}build configuration{{< /link */>}} on how to change the transpiler being used.
-{{< /alert >}}
-<!-- markdownlint-enable MD037 -->
+> [!NOTE]
+> Hinode has added support for the Dart Sass transpiler in release {{< release version="v0.20.0" short="true" type="link" >}}. The default libsass transpiler has been {{< link hugo_sass >}}deprecated in favor of Dart Sass{{< /link >}}, but is still widely used. Hinode uses the libsass transpiler by default. Review the {{< link "docs/configuration/layout#extended-configuration" >}}build configuration{{< /link >}} on how to change the transpiler being used.
 
 Hinodes uses Hugo modules and mounted folders to create a flexible virtual file system that is automatically kept up to date. Review the [overview]({{< ref "overview" >}}) for a detailed explanation. The build pipeline of the stylesheet consists of six steps.
 

diff --git a/content/en/docs/latest/components/card.md b/content/en/docs/latest/components/card.md
@@ -1,7 +1,7 @@
 ---
 author: Mark Dumay
 title: Card
-date: 2023-12-24
+date: 2024-08-14
 description: Use the card shortcode to display a card that links to a content page.
 layout: docs
 icon: fa address-card
@@ -10,9 +10,8 @@ tags: component
 
 ## Overview
 
-{{< alert >}}
-**New in v0.18.6** - The card now supports inner content too. As a result, references to the card shortcode must be closed of self-closed.
-{{< /alert >}}
+> [!IMPORTANT]
+> Cards support inner content since release {{< release version="v0.18.6" short="true" type="link" >}}. As a result, references to the card shortcode must be closed or self-closed.
 
 Use the `card` shortcode to display a card that links to a content page. When using a rich layout, the card includes a thumbnail (or icon) and a header. As an example, the following shortcode displays a horizontal card that links to the [editing]({{< ref "credits" >}}) guide. It includes a custom header and footer. You can use the {{< link "card-group" >}}card-group shortcode{{< /link >}} to align multiple cards and to position them in a grid.
 

diff --git a/content/en/docs/latest/components/carousel.md b/content/en/docs/latest/components/carousel.md
@@ -1,7 +1,7 @@
 ---
 author: Mark Dumay
 title: Carousel
-date: 2023-12-29
+date: 2024-08-14
 description: Use the carousel shortcode to display a carousel of several images.
 layout: docs
 icon: fas images
@@ -10,10 +10,6 @@ tags: component
 
 ## Overview
 
-{{< alert >}}
-**New in v0.18.3** - The carousel shortcode now supports "3x2" as an additional ratio. It also recognizes page resources correctly.
-{{< /alert >}}
-
 {{< release version="v0.7.1" >}}
 
 Use the `carousel` shortcode to display a carousel of several images, with similar behavior as the [image]({{< ref "image" >}} "image"). As an example, the following shortcode displays a centered carousel with three slides, 16x9 aspect ratio, and a relative width of 67% on large screens.
@@ -34,17 +30,15 @@ The carousel shortcode supports the following arguments:
 
 {{< args structure="carousel" group="shortcode" >}}
 
-{{< alert type="danger" >}}
-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:
 
 {{< args structure="carousel-item" group="shortcode" >}}
 
 ## Examples
 
-As an example, the following shortcodes display a centered carousel with three slides and various aspect ratio.
+Change the ratio and orientation of your carousel with shortcode arguments.
+
+### 1x1 ratio
 
 Set the `ratio` to `1x1` for a square aspect ratio.
 
@@ -70,6 +64,8 @@ Set the `ratio` to `3x2` for a landscape aspect ratio.
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
+### 4x3 ratio
+
 Set the `ratio` to `4x3` for a landscape aspect ratio.
 
 <!-- markdownlint-disable MD037 -->
@@ -82,6 +78,8 @@ Set the `ratio` to `4x3` for a landscape aspect ratio.
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
+### 16x9 ratio
+
 Set the `ratio` to `16x9` for a landscape aspect ratio.
 
 <!-- markdownlint-disable MD037 -->
@@ -94,6 +92,8 @@ Set the `ratio` to `16x9` for a landscape aspect ratio.
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
+### 21x9 ratio
+
 Set the `ratio` to `21x9` for a landscape aspect ratio.
 
 <!-- markdownlint-disable MD037 -->
@@ -106,11 +106,12 @@ Set the `ratio` to `21x9` for a landscape aspect ratio.
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
-Omit the `ratio` to keep the original aspect ratio.
+### Original aspect ratio
 
-{{< alert color="danger" >}}
-    The carousel does not crop the images when omitting the aspect ratio. Instead, the images keep their original aspect ratio. Ensure the images have an equal aspect ratio to avoid layout shifting.
-{{< /alert >}}
+> [!IMPORTANT]
+> The carousel does not crop the images when omitting the aspect ratio. Instead, the images keep their original aspect ratio. Ensure the images have an equal aspect ratio to avoid layout shifting.
+
+Omit the `ratio` to keep the original aspect ratio.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}

diff --git a/content/en/docs/latest/components/collapse.md b/content/en/docs/latest/components/collapse.md
@@ -1,7 +1,7 @@
 ---
 author: Mark Dumay
 title: Collapse
-date: 2024-01-02
+date: 2024-08-14
 description: Use the collapse shortcode to reveal or hide a panel.
 layout: docs
 icon: fa eye-slash
@@ -27,9 +27,8 @@ Use the `collapse` shortcode to reveal or hide a panel. The panel can contain bo
 
 ## Arguments
 
-{{< alert type="danger" >}}
-The definition of the default `id` field fails when embedding (multiple) `collapse` shortcodes in an [example]({{< relref "example" >}}). Provide an explicit, unique `id` to prevent cross-interference.
-{{< /alert >}}
+> [!IMPORTANT]
+> The definition of the default `id` field fails when embedding (multiple) `collapse` shortcodes in an [example]({{< relref "example" >}}). Provide an explicit, unique `id` to prevent cross-interference.
 
 The shortcode supports the following arguments:
 

diff --git a/content/en/docs/latest/components/docs.md b/content/en/docs/latest/components/docs.md
@@ -1,7 +1,7 @@
 ---
 author: Mark Dumay
 title: Docs
-date: 2024-01-02
+date: 2024-08-14
 description: The docs shortcode captures a code snippet from a supported input file.
 layout: docs
 icon: fas bookmark
@@ -22,9 +22,8 @@ The `docs` shortcode captures a code snippet from a `toml` or `scss` input file.
 
 ## Arguments
 
-{{< alert type="danger" >}}
-The definition of the default `id` field fails when embedding (multiple) `docs` shortcodes in an [example]({{< relref "example" >}}). Provide an explicit, unique `id` to prevent cross-interference.
-{{< /alert >}}
+> [!IMPORTANT]
+> The definition of the default `id` field fails when embedding (multiple) `docs` shortcodes in an [example]({{< relref "example" >}}). Provide an explicit, unique `id` to prevent cross-interference.
 
 The shortcode supports the following arguments:
 

diff --git a/content/en/docs/latest/components/file.md b/content/en/docs/latest/components/file.md
@@ -1,7 +1,7 @@
 ---
 author: Mark Dumay
 title: File
-date: 2024-01-02
+date: 2024-08-14
 description: The file shortcode prints the full content of any given file with syntax highlighting.
 layout: docs
 icon: fa file-lines
@@ -22,9 +22,8 @@ The `file` shortcode prints and highlights the full content of a given input fil
 
 ## Arguments
 
-{{< alert type="danger" >}}
-The definition of the default `id` field fails when embedding (multiple) `file` shortcodes in an [example]({{< relref "example" >}}). Provide an explicit, unique `id` to prevent cross-interference.
-{{< /alert >}}
+> [!IMPORTANT]
+> The definition of the default `id` field fails when embedding (multiple) `file` shortcodes in an [example]({{< relref "example" >}}). Provide an explicit, unique `id` to prevent cross-interference.
 
 The shortcode supports the following arguments:
 

diff --git a/content/en/docs/latest/components/icon.md b/content/en/docs/latest/components/icon.md
@@ -1,7 +1,7 @@
 ---
 author: Mark Dumay
 title: Icon
-date: 2024-01-02
+date: 2024-08-14
 description: Use the icon shortcode to add a Font Awesome icon with ease.
 layout: docs
 icon: fa font-awesome
@@ -26,9 +26,8 @@ Use the `icon` shortcode to quickly add a Font Awesome icon to your content. You
 
 ## Arguments
 
-{{< alert type="danger" >}}
-When using [inline vector icons]({{< relref "../configuration/modules#configuring-modules" >}}), be sure to use the main name of the icon. The shortcode **does not recognize the aliases** of the icons and will throw an error or warning.
-{{< /alert>}}
+> [!IMPORTANT]
+> When using [inline vector icons]({{< relref "../configuration/modules#configuring-modules" >}}), be sure to use the main name of the icon. The shortcode **does not recognize the aliases** of the icons and will throw an error or warning. For example, use `{{</* fas house */>}}` instead of `{{</* fas home */>}}` to add a house icon.
 
 The shortcode supports both unnamed arguments and named arguments. When using unnamed arguments, all attributes are mapped to the `class` argument, separated by spaces.
 

diff --git a/content/en/docs/latest/components/image.md b/content/en/docs/latest/components/image.md
@@ -1,7 +1,7 @@
 ---
 author: Mark Dumay
 title: Image
-date: 2023-12-29
+date: 2024-08-14
 description: Use the image shortcode to display a responsive image with a specific aspect ratio.
 layout: docs
 icon: fas image
@@ -10,16 +10,8 @@ tags: component
 
 ## Overview
 
-{{< alert >}}
-**New in v0.18.3** - The image shortcode now supports an additional ratio "3x2". It also recognizes page resources correctly.
-{{< /alert >}}
-
 Use the `image` shortcode to display a responsive image with a specific aspect ratio. The source link can refer to either an image available in the `/assets/img` folder of your site or a public web location. The shortcode renders the image as a so-called {{< link mozilla_image >}}image set{{< /link >}} to optimize the image for different screen sizes and resolutions. Behind the scenes, Hugo renders the images in `WebP` format and stores them in a local folder (`resources` or `public`). The images are processed using the quality setting specified in the `[imaging]` section of the main {{< link hugo_imaging >}}config file{{< /link >}} (defaults to 75). Supported image types are `.png`, `.jpeg`, `.gif`, `.tiff`, `.bmp`, and `.webp`. A fallback image of type `.jpeg` is provided for older browsers.
 
-{{< alert type="info" >}}
-The shortcode supports vector images too (identified by their extension `.svg`). However, these images are not processed but rather used as is.
-{{< /alert >}}
-
 As an example, the following shortcode displays an image with its original aspect ratio. The image is adjusted for the active color mode. The shortcode processes two images behind the scenes, being `img/responsive-light.png` and `img/responsive-dark.png`. Only the image that matches the current color mode is shown.
 
 <!-- markdownlint-disable MD037 -->
@@ -114,9 +106,8 @@ Add a `caption` to transform the image into a figure with caption.
 
 The shortcode supports vector images of type `.svg` too. The shortcode supports the regular arguments, however, vector images are contained instead of cropped when the `ratio` is set. The next example shows a color-mode-aware vector image. The background is set to a contrasting color to illustrate the ratio behavior.
 
-{{< alert type="info" >}}
-Unlike bitmap images, vector images are not processed but used as is. They should be maintained in the site's `static` folder instead of the `assets` folder. Add a leading `/` to specify the absolute image location.
-{{< /alert >}}
+> [!IMPORTANT]
+> Unlike bitmap images, vector images are not processed but used as is. They should be maintained in the site's `static` folder instead of the `assets` folder. Add a leading `/` to specify the absolute image location.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}