Merge pull request #390 from gethinode/refinement

Standardize shortcodes

.github/dependabot.yml

@@ -7,3 +7,4 @@ updates:
     directory: "/"
     schedule:
       interval: "daily"
+    versioning-strategy: increase

.github/workflows/build.yml

@@ -24,5 +24,6 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'npm'
+        cache-dependency-path: '**/package-lock.json'
     - run: npm ci
     - run: npm run build

.github/workflows/lint.yml

@@ -19,10 +19,13 @@ jobs:
 
     steps:
     - uses: actions/checkout@v3
+
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v3
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'npm'
+        cache-dependency-path: '**/package-lock.json'
+  
     - run: npm ci --ignore-scripts
     - run: npm run lint

assets/scss/common/_icons.scss

@@ -23,19 +23,3 @@ $btn-toggle:                                    url("/icons/btn-toggle.svg") !de
 $btn-toggle-dark:                               url("/icons/btn-toggle-dark.svg") !default;
 
 // scss-docs-end icons
-
-.fa-wrapper {
-    container: wrapper / inline-size;
-}
-
-// define fallback size for browsers not supporting containers
-.fa-fluid {
-    font-size: 5rem;
-}
-
-// set size based on container width
-@container (min-width: 0) {
-    .fa-wrapper .fa-fluid {
-        font-size: 60cqi;
-    }
-}

config/_default/params.toml

@@ -78,7 +78,7 @@
 [[sharing.providers]]
     name = "Twitter"
     url = "https://twitter.com/home?status={url}"
-    icon = "fab twitter"
+    icon = "fab x-twitter"
     weight = 20
 
 [[sharing.providers]]

content/en/blog/bootstrap-elements.md

@@ -1,7 +1,7 @@
 ---
 author: Mark Dumay
 title: Bootstrap elements
-date: 2023-05-20
+date: 2023-08-05
 description: Use shortcodes to add common Bootstrap elements with ease.
 tags: ["bootstrap", "shortcode"]
 thumbnail: img/boots.jpg
@@ -170,6 +170,28 @@ Use the `docs` shortcode to display the content of a `js`, `scss` or `toml` file
 
 {{< docs name="theme-colors" file="config/_default/params.toml" >}}
 
+## Example
+
+Use the `example` shortcode to display a code example and to render a preview of the same input.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* command */>}}
+export MY_VAR=123
+{{</* /command */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## File
+
+Use the `file` shortcode to print and highlight the full content of a given input file.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* file path="./config/_default/languages.toml" id="file-collapse-1" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Icon
 
 As an example, the following shortcodes show a square check, a brand logo, and a circle check.

content/nl/blog/bootstrap-elements.md

@@ -2,7 +2,7 @@
 author: Mark Dumay
 title: Bootstrap elementen
 slug: bootstrap-elementen
-date: 2023-02-17
+date: 2023-08-05
 description: Gebruik shortcodes om eenvoudig Bootstrap elementen toe te voegen.
 tags: ["bootstrap", "shortcode"]
 thumbnail: img/boots.jpg
@@ -171,6 +171,28 @@ Gebruik de volgende shortcode om de inhoud van een `toml` of `scss` bestand te t
 
 {{< docs name="theme-colors" file="config/_default/params.toml" >}}
 
+## Example
+
+Gebruik de `example` shortcode om zowel de input als een voorbeeld van code te tonen.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* command */>}}
+export MY_VAR=123
+{{</* /command */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## File
+
+Gebruik de `file` shortcode om de volledige inhoud van een bestand te tonen, inclusief taalafhankelijke opmaak.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* file path="./config/_default/languages.toml" id="file-collapse-1" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Icon
 
 De volgende shortcodes tonen drie verschillende iconen:

go.mod

@@ -4,8 +4,8 @@ go 1.19
 
 require (
 	github.com/gethinode/mod-bootstrap v1.1.1 // indirect
-	github.com/gethinode/mod-flexsearch v1.1.4 // indirect
-	github.com/gethinode/mod-fontawesome v1.2.2 // indirect
+	github.com/gethinode/mod-flexsearch v1.2.0 // indirect
+	github.com/gethinode/mod-fontawesome v1.2.4 // indirect
 	github.com/gethinode/mod-katex v1.0.2 // indirect
-	github.com/gethinode/mod-leaflet v0.3.3 // indirect
+	github.com/gethinode/mod-leaflet v0.3.4 // indirect
 )

go.sum

@@ -16,6 +16,8 @@ github.com/gethinode/mod-flexsearch v1.1.3 h1:lzmSvnJL6ABjp03avYzSvJJ7hw01CpHap1
 github.com/gethinode/mod-flexsearch v1.1.3/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
 github.com/gethinode/mod-flexsearch v1.1.4 h1:dJvwBxYlLe/VGlctLn8k89STJ5toATIjNnXIlNeanOY=
 github.com/gethinode/mod-flexsearch v1.1.4/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
+github.com/gethinode/mod-flexsearch v1.2.0 h1:SSMpWzK9SMbi9QRYfil9PJZLLWWLHWzlTc69UxtSWAA=
+github.com/gethinode/mod-flexsearch v1.2.0/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
 github.com/gethinode/mod-fontawesome v1.0.2 h1:ZSK6D20/w4y5GnfYfTBB58uHD0ChIfkpKfRGwioS9rg=
 github.com/gethinode/mod-fontawesome v1.0.2/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
 github.com/gethinode/mod-fontawesome v1.1.0 h1:rsDzUI+3ZlS/do2ff3ne8/z3KwHeysmuA+WsXlumXXk=
@@ -26,6 +28,10 @@ github.com/gethinode/mod-fontawesome v1.2.1 h1:k7z5ZRsNxCohZjlZm8jVAzmTPk17c6xMY
 github.com/gethinode/mod-fontawesome v1.2.1/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
 github.com/gethinode/mod-fontawesome v1.2.2 h1:rA9EtuE/LeFQmKSA7ampfUknxsR1mu7hpi4wpA89gX8=
 github.com/gethinode/mod-fontawesome v1.2.2/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-fontawesome v1.2.3 h1:RHWd+E72+m29xaC45m/3CF35C201jehw0dcozVBdPrI=
+github.com/gethinode/mod-fontawesome v1.2.3/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-fontawesome v1.2.4 h1:SqE3CQ+boaBIhrVh3MPu4nz0uoHPfEH5t60nNY1CfsI=
+github.com/gethinode/mod-fontawesome v1.2.4/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
 github.com/gethinode/mod-katex v1.0.0 h1:me/3dIIZBkfk1mRIFt8QiAGYwYDoSG5bc2hHRtIutFc=
 github.com/gethinode/mod-katex v1.0.0/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
 github.com/gethinode/mod-katex v1.0.1 h1:809QUztxmKgMNchU+v03iMO7Ma+ISc3ZzhXYauc21rs=
@@ -38,3 +44,5 @@ github.com/gethinode/mod-leaflet v0.3.1 h1:H5MaOa+BB1KuVw7abTqfIn/SNzzRsAyx/WQoS
 github.com/gethinode/mod-leaflet v0.3.1/go.mod h1:uGggt87x4Fw7wBoJpSiUvNkYg+s/Ujne7klAX2rxMRk=
 github.com/gethinode/mod-leaflet v0.3.3 h1:isnjja6VRFvVWBatYSouh46TXSJg2C4/E2BQTrQw+yI=
 github.com/gethinode/mod-leaflet v0.3.3/go.mod h1:uGggt87x4Fw7wBoJpSiUvNkYg+s/Ujne7klAX2rxMRk=
+github.com/gethinode/mod-leaflet v0.3.4 h1:oY+YQ0JiJuhFQNrk9XgFdg0NMsTUQPXNfnILp4ia4r4=
+github.com/gethinode/mod-leaflet v0.3.4/go.mod h1:uGggt87x4Fw7wBoJpSiUvNkYg+s/Ujne7klAX2rxMRk=

layouts/partials/assets/button.html

@@ -133,7 +133,7 @@
 
     {{- if and $title $cue -}}
         {{ $suffix := partial "assets/icon.html" (dict "icon" "fas up-right-from-square fa-2xs") }}
-        {{- $title = printf "%s %s" $title $suffix | safeHTML -}}
+        {{- $title = printf "%s %s" $title $suffix | safeHTML -}}
     {{- end -}}
 {{- end -}}
 

layouts/partials/assets/navbar-item.html

@@ -52,9 +52,14 @@
     {{ if $isIcon }}aria-label="{{ $menu.Name }}"{{ end }}
     data-nav="main" data-nav-main="{{ $mainNav }}"{{ with $childNav }} data-nav-child="{{ . }}"{{ end }} 
     href="{{ $menuURL }}{{ $params | safeHTMLAttr }}"{{ with $externalHref }} {{ . | safeHTMLAttr }}{{ end }} {{ $button | safeHTMLAttr }}>
-    
-    {{- with $menu.Pre }}{{ . }}{{ end -}}
+    {{- with $menu.Pre }}
+        {{ if hasPrefix . "<i" }}
+            {{ . | safeHTML }}
+        {{ else }}
+            {{ partial "assets/icon.html" (dict "icon" . )}}
+        {{ end }}
+    {{ end -}}
     <span {{ if $isActive }} class="active"{{ end }}>{{ if not $isIcon }}{{ $menu.Name }}{{ end }}</span>
     {{- with $menu.Post }}{{ . }}{{ end -}}
-    {{- if not $isIcon }} {{ $suffix }}{{ end -}}
+    {{- if not $isIcon }}&nbsp;{{ $suffix }}{{ end -}}
 </a>

layouts/partials/assets/navbar.html

@@ -13,6 +13,7 @@
     "logo"          Optional address of the logo image, defaults to the parameter "logo" set in the "main" section of
                     the site's parameter configuration. 
     "title"         Optional brand title, displayed when the logo is not set. Defaults to the site's title.
+    "class":        Optional class attribute of the navbar container.
 -->
 
 <!-- Inline partial to render the color mode switcher -->
@@ -185,7 +186,9 @@
 {{- if eq $color "black" }}{{ $theme = "dark" }}{{ end -}}
 {{- if eq $color "white" }}{{ $theme = "light" }}{{ end -}}
 
-<div class="container-fluid {{ if $fixed }}fixed-top{{ end }} p-0"{{ with $theme }} data-bs-theme="{{ . }}"{{ end }}>
+{{- $class := .class -}}
+
+<div class="container-fluid {{ if $fixed }}fixed-top{{ end }} p-0{{ with $class }} {{ . }}{{ end }}"{{ with $theme }} data-bs-theme="{{ . }}"{{ end }}>
     {{- partial "assets/page-alert.html" (dict "page" $page) -}}
     <nav class="navbar navbar-expand-{{ $size }} {{ with $color }}bg-{{ . }}{{ end }} p-4"{{ with $theme }} data-bs-theme="{{ . }}"{{ end }}>
         <div class="container-xxl p-0">

layouts/partials/assets/toast.html

@@ -3,6 +3,7 @@
     "id"            Optional id of the toast message, defaults to "toast-message-0".
     "header":       Optional header of the toast message.
     "message":      Required toast message.
+    "class":        Optional class attribute of the toast element.
 -->
 
 {{- $id := printf "toast-message-%d" 0 -}}
@@ -19,7 +20,9 @@
     {{- errorf "partial [assets/toast.html] - Missing message text" -}}
 {{ end -}}
 
-<div id="{{ $id }}" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+{{- $class := .class -}}
+
+<div id="{{ $id }}" class="toast{{ with $class }} {{ . }}{{ end }}" role="alert" aria-live="assertive" aria-atomic="true">
     <div class="toast-header">
         {{ with $header }}<strong class="me-auto">{{ . }}</strong>{{ end }}
         <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

layouts/partials/footer/social.html

@@ -13,7 +13,7 @@
                         {{ .Pre | safeHTML }}
                     {{ else }}
                         {{ partial "assets/icon.html" (dict "icon" (printf "%s fa-2x" .Pre) )}}
-                    {{ end}}
+                    {{ end }}
                 </a>
             {{ end -}}
         </div>

layouts/partials/head/seo.html

@@ -18,11 +18,12 @@
 {{ end -}}
 
 {{ with .Params.thumbnail -}}
-    {{ $source := partial "utilities/GetImage.html" (dict "url" .) -}}
-    {{ with $source -}}
+    {{ $img := partial "utilities/GetImage.html" (dict "url" .) -}}
+    {{ with $img -}}
         {{ $dim := "1280x640" -}}
-        {{ $img := (.Fill (printf "%s jpg" $dim)) -}}
-        {{ $.Scratch.Set "thumbnail" ($img.Permalink | absURL) -}}
+        {{ $scaled := (.Fill (printf "%s jpg" $dim)) -}}
+        {{- $scaled = $scaled | resources.Copy (replace $img.RelPermalink ".jpg" (printf "-%s.jpg" $dim)) -}}
+        {{ $.Scratch.Set "thumbnail" ($scaled.Permalink | absURL) -}}
     {{ end -}}
 {{ else -}}
     {{ with .Site.Params.schema.image.url -}}    

layouts/partials/utilities/link.html

@@ -34,10 +34,12 @@
 
     {{- if $cue -}}
         {{ $suffix := partial "assets/icon.html" (dict "icon" "fas up-right-from-square fa-2xs") }}
-        {{- $text = printf "%s %s" $text $suffix | safeHTML -}}
+        {{- $text = printf "%s %s" $text $suffix | safeHTML -}}
     {{- end -}}
 {{ else }}
     {{ $destination = relLangURL $destination }}
 {{- end -}}
 
-<a href="{{ $destination | safeURL }}"{{ with $target }} target="{{ . }}"{{ end }}{{ with $rel }} rel="{{ . }}"{{ end }}>{{ $text }}</a>
+{{- $class := .class -}}
+
+<a {{ with $class }}class="{{ . }}" {{ end }}href="{{ $destination | safeURL }}"{{ with $target }} target="{{ . }}"{{ end }}{{ with $rel }} rel="{{ . }}"{{ end }}>{{ $text }}</a>

layouts/shortcodes/alert.html

@@ -6,6 +6,7 @@
     "icon"          Optional class and name of a Font Awesome icon to include.
     "type"          Optional type of the alert, either "danger" or "info". Generates an alert with related color and
                     icon.
+    "class":        Optional class attribute of the alert element.
 -->
 
 {{- $error := false -}}
@@ -48,8 +49,10 @@
     {{ $error = true -}}
 {{ end -}}
 
+{{- $class := .Get "class" -}}
+
 {{- if not $error -}}
-    <div class="d-flex alert alert-{{ $color }} {{ if $dismissible }}alert-dismissible fade show{{ end }}" role="alert">
+    <div class="d-flex alert alert-{{ $color }} {{ if $dismissible }}alert-dismissible fade show{{ end }}{{ with $class }} {{ . }}{{ end }}" role="alert">
         {{ with $icon }}<div class="pt-1 pe-2">{{ . }}</div>{{ end }}
         <div class="flex-grow-1 my-auto">
             {{ trim .Inner " \r\n" | markdownify | safeHTML -}}

layouts/shortcodes/command.html

@@ -1,3 +1,13 @@
+<!-- 
+    Generates terminal output for either `bash`, `powershell`, or `sql` shell languages. The shortcode supports the
+    following named arguments:
+    "user"          Optional user to add to the prompt, e.g. "user".
+    "host"          Optional host to add to the prompt, e.g. "localhost".
+    "prompt"        Optional prompt override, e.g. "PS C:\Users\User>".
+    "shell"         Type of shell, either "bash" (default), "powershell", or "sql".
+    "class"         Optional class attribute of the command element.
+-->
+
 {{- $host := .Get "host" -}}
 {{- $user := .Get "user" -}}
 {{- $prompt := .Get "prompt" -}}
@@ -60,6 +70,8 @@
     {{- $output = (replace $output "<span class=\"c\">#" "<span class=\"c\">" | safeHTML) -}}
 {{- end -}}
 
-<div class="mb-3 syntax-highlight">
+{{- $class := .Get "class" -}}
+
+<div class="mb-3 syntax-highlight{{ with $class }} {{ . }}{{ end }}">
     {{- $output -}}
 </div>

layouts/shortcodes/docs.html

@@ -1,11 +1,23 @@
-{{- /*
+<!-- 
     Source: https://github.com/twbs/bootstrap/blob/main/site/layouts/shortcodes/scss-docs.html
 
-    Usage: `docs name="name" file="path/filename.<toml|scss>"`
+    Capture a code snippet from a `toml` or `scss` input file. The shortcode scans for named markers in a local file:   
+    - For `.toml` files, use `# toml-docs-start` and `# toml-docs-end` followed by the snippet name
+    - For `.scss` files, use `// scss-docs-start` and `// scss-docs-end` followed by the snippet name
     
-    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`.
-*/ -}}
+    The snippet between the two markers is then rendered using syntax highlighting. The shortcode supports the
+    following named arguments:
+
+    "name"          Name of the code snippet, used to identify the relevant section of the input file.
+    "file"          Path of the input file. The path is relative to the `basePath` defined in the `docs` section of the
+                    site's parameters. If the file starts with `./`, the path of the repository is used as base path instead.
+    "show"          If unset, shows the panel with the code snippet in collapsed state. By default, the panel is
+                    expanded.
+    "full"          If unset, shows the filename only. By default, the full relative path is shown.
+    "id"            Optional id of the collapse panel, defaults to "docs-collapse-n" with a sequential number n
+                    starting at 1.
+    "class"         Optional class argument of the tab control.
+-->
 
 {{- $name := .Get "name" -}}
 {{- $basePath := .Site.Params.docs.basePath -}}
@@ -20,6 +32,9 @@
 {{- $capture_end := "" -}}
 
 {{- $id := printf "docs-collapse-%d" .Ordinal -}}
+{{ with .Get "id" }}
+    {{ $id = . }}
+{{ end }}
 
 {{- $supportedExtensions := slice "js" "scss" "toml" -}}
 {{- if in $supportedExtensions $extension -}}
@@ -53,6 +68,8 @@
     {{ errorf "Invalid value for param 'full': %s" $fullParam -}}
 {{ end -}}
 
+{{- $class := .Get "class" -}}
+
 {{- /* 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 -}}
@@ -71,7 +88,7 @@
     {{- $match = replace $match $capture_start "" -}}
     {{- $match = replace $match $capture_end "" -}}
 
-    <ul class="nav nav-tabs">
+    <ul class="nav nav-tabs{{ with $class }} {{ . }}{{ end }}">
         <li class="nav-item">
             <a class="nav-link active font-monospace" 
                 href="#body-{{ $id }}" 

layouts/shortcodes/example.html

@@ -1,15 +1,15 @@
-{{- /*
-  Usage: `example args`
-
-  `args` are all optional and can be one of the following:
-    * id: the `div`'s id - default: ""
-    * class: any extra class(es) to be added to the `div` - default: ""
-    * lang: language used to display the code. Use "hugo" to process Hugo (escaped) shortcodes - default: "html"
-    * show_markup: if the markup should be output in the HTML - default: `true`
-    * show_preview: if the preview should be output in the HTML - default: `true`
-
+<!-- 
     Source: https://github.com/twbs/bootstrap/blob/main/site/layouts/shortcodes/example.html
-*/ -}}
+
+    Display a code example and render a preview of the same input. The shortcode accepts the languages supported by
+    Hugo's highlight function. The shortcode supports the following named arguments:
+
+    "id"            Optional identifier of the element's container.
+    "lang"          Language used to display the code. Use "hugo" to process Hugo (escaped) shortcodes, default value is "html".
+    "show_markup"   If the markup should be output in the HTML, defaults to "true".
+    "show_preview"  If the preview should be output in the HTML, defaults to "true".
+    "class"         Optional class attributes of the element's container.
+-->
 
 {{- $id := .Get "id" -}}
 {{- $class := .Get "class" -}}
@@ -25,18 +25,18 @@
     {{ $lang = "markdown" }}
 {{- end -}}
 
-<div class="rounded border mb-3">
+<div class="rounded border preview-background mb-3">
     {{- if eq $show_preview true -}}
-        <div {{ with $id }}id="{{ . }}"{{ end }} class="p-3 {{ with $class }} {{ . }}{{ end }} preview-background">
+        <div {{ with $id }}id="{{ . }}"{{ end }} class="rounded-top p-3 {{ with $class }} {{ . }}{{ end }}">
             {{- $content -}}
         </div>
     {{- end -}}
-    <div class="d-flex align-items-center ps-3 pe-3 py-1 border-top border-bottom syntax-highlight">
+    {{- if eq $show_markup true -}}
+        <div class="d-flex align-items-center ps-3 pe-3 py-1{{ if $show_preview }} border-top{{ else }} rounded-top{{ end }} border-bottom syntax-highlight">
             <small class="font-monospace text-body-secondary text-uppercase">{{- $lang -}}</small>
         </div>
-    <div class="rounded-bottom syntax-highlight">
-        {{- if eq $show_markup true -}}
+        <div class="rounded-bottom syntax-highlight border-none">
             {{- highlight (trim $input "\r\n") $lang "" -}}
-        {{- end -}}
         </div>
+    {{- end -}}
 </div>

layouts/shortcodes/file.html

@@ -1,10 +1,17 @@
-{{- /*
+<!-- 
     Source: https://github.com/twbs/bootstrap/blob/main/site/layouts/shortcodes/scss-docs.html
 
-    Usage: `file path="path/to/filename" lang="lang" show="true" full="true"`
-
-    Prints the full content of any given file supported by the Chroma syntax highlighter.
-*/ -}}
+    Print the full content of any given file supported by the Chroma syntax highlighter. The shortcode supports the
+    following arguments:
+    "path"          Path of the input file. The path is relative to the `basePath` defined in the `docs` section of the
+                    site's parameters. If the file starts with `./`, the path of the repository is used as base path instead.
+    "lang"          Language to be used by the syntax highlighter.
+    "show"          If unset, shows the panel with the code in collapsed state. By default, the panel is expanded.
+    "full"          If unset, shows the filename only. By default, the full relative path is shown.
+    "id"            Optional id of the collapse panel, defaults to "file-collapse-n" with a sequential number n
+                    starting at 1.
+    "class"         Optional class argument of the tab control.
+-->
 
 {{- $basePath := .Site.Params.docs.basePath -}}
 {{- $file := .Get "path" }}
@@ -16,7 +23,10 @@
 
 {{- $extension := strings.TrimLeft "." (path.Ext $file)  }}
 {{- $lang := .Get "lang" | default $extension -}}
-{{- $id := printf "docs-collapse-%d" .Ordinal -}}
+{{- $id := printf "file-collapse-%d" .Ordinal -}}
+{{ with .Get "id" }}
+    {{ $id = . }}
+{{ end }}
 
 {{ $supportedFlags := slice "true" "false" -}}
 {{ $showParam := "true" -}}
@@ -37,6 +47,8 @@
     {{ errorf "Invalid value for param 'full': %s" $fullParam -}}
 {{ end -}}
 
+{{- $class := .Get "class" -}}
+
 {{- /* If any parameters are missing, print an error and exit */ -}}
 {{- if not $file -}}
     {{- errorf "%s: %q: Missing required parameters! Got: path=%q!" .Position .Name $file -}}
@@ -46,7 +58,7 @@
     {{ $tmp := os.Stat $file }}
     {{- $content := readFile $file -}}
 
-    <ul class="nav nav-tabs">
+    <ul class="nav nav-tabs{{ with $class }} {{ . }}{{ end }}">
         <li class="nav-item">
             <a class="nav-link active font-monospace" 
                 href="#body-{{ $id }}" 

layouts/shortcodes/link.html

@@ -13,6 +13,7 @@
                     "main.externalLinks.tab" in the site's parameters.
     "case"          Optional flag to indicate if the retrieved title (e.g. no inner text is provided) of an internal
                     link should use its original case, defaults to true. If false, the title is set to lower case.
+    "class"         Optional class attribute of the anchor element.
 -->
 
 {{- $error := false -}}
@@ -49,7 +50,9 @@
 
 {{ $text := trim .Inner " \r\n" | markdownify | safeHTML }}
 
+{{- $class := .Get "class" -}}
+
 {{- if not $error -}}
-    {{ partial "utilities/link.html" (dict "destination" $url "text" $text "cue" $cue "tab" $tab "case" $case) }}
+    {{ partial "utilities/link.html" (dict "destination" $url "text" $text "cue" $cue "tab" $tab "case" $case "class" $class) }}
 {{- end -}}
 

layouts/shortcodes/navbar.html

@@ -15,6 +15,7 @@
     "search"        Optional flag to include a search input, default is "true".
     "logo"          Optional address of the logo image.
     "title"         Optional brand title, displayed when the logo is not set.
+    "class":        Optional class attribute of the navbar container.
 -->
 
 {{ $error := false }}
@@ -84,6 +85,8 @@
 {{ $title := "" -}}
 {{ with .Get "title" }}{{ $title = . }}{{ end -}}
 
+{{- $class := .Get "class" -}}
+
 {{ if not $error -}}
     {{- partial "assets/navbar.html" (dict 
         "id" $id 
@@ -96,6 +99,7 @@
         "menus" $menus
         "logo" $logo
         "title" $title
+        "class" $class
         )
     -}}
 {{ end -}}

layouts/shortcodes/release.html

@@ -4,6 +4,7 @@
     "version":      Required version string, expects semver notation with a "v" prefix.
     "state":        Optional state, either "new" or "deprecated".
     "short":        Optional flag to indicate the release button should use short notation.
+    "class":        Optional class attribute of the button element.
 -->
 
 {{- $error := false -}}
@@ -54,6 +55,8 @@
     {{- end -}}
 {{- end -}}
 
+{{- $class := .Get "class" -}}
+
 {{- if not $error -}}
     <div class="pb-3">
     {{- partial "assets/button.html" (dict 
@@ -62,7 +65,7 @@
         "size" "sm"
         "color" $color
         "outline" "true"
-        "class" "rounded-2 fw-semibold")
+        "class" (trim (printf "rounded-2 fw-semibold %s" $class) " "))
     -}} 
     </div>
 {{- end -}}

layouts/shortcodes/timeline.html

@@ -1,4 +1,14 @@
-<!-- Inspired by the timeline snippet from Siddharth Panchal at https://bootsnipp.com/snippets/Q0ppE -->
+<!-- 
+    Inspired by the timeline snippet from Siddharth Panchal at https://bootsnipp.com/snippets/Q0ppE
+    
+    Show items ordered on a vertical timelime. The shortcode supports the following arguments:
+    "data"          Required filename of the timeline input. You can omit the file extension. The file should reside in
+                    the "data" folder.
+    "background"    Optional border color of the connector dots, defaults to the body background color. If set, uses a
+                    subtle background color that is adaptive to the current color mode.
+    "class"         Optional class attribute of the timeline's container.
+-->
+
 {{ $error := false }}
 
 {{- $data := .Get "data" -}}
@@ -21,6 +31,8 @@
     {{ $error = true -}}
 {{ end -}}
 
+{{- $class := .Get "class" -}}
+
 <!-- Inline partial to render icon -->
 {{- define "partials/timeline-icon.html" -}}
     {{- $col := default 6 .col -}}
@@ -74,7 +86,7 @@
 {{- end -}}
 
 <!-- Render default timeline -->
-<div class="container p-0 d-none d-md-block mb-5 {{ with $background }} timeline-bg-{{ . }}{{ end }}">
+<div class="container p-0 d-none d-md-block mb-5 {{ with $background }} timeline-bg-{{ . }}{{ end }}{{ with $class }} {{ . }}{{ end }}">
     {{ range $index, $item := $entries }}
         <div class="row timeline timeline-{{ $item.color }} timeline-dot g-0 ">
             {{ if eq (mod $index 2) 1 }}
@@ -90,7 +102,7 @@
 </div>
 
 <!-- Render timeline for smaller devices -->
-<div class="container p-0 d-block d-md-none {{ with $background }} timeline-bg-{{ . }}{{ end }}">
+<div class="container p-0 d-block d-md-none {{ with $background }} timeline-bg-{{ . }}{{ end }}{{ with $class }} {{ . }}{{ end }}">
     {{ range $index, $item := $entries }}
         <div class="row timeline-sm timeline-{{ $item.color }} timeline-dot g-0">
             {{ partial "partials/timeline-icon.html" (dict "icon" $item.icon "direction" "end" "col" 3) }}

layouts/shortcodes/toast.html

@@ -2,6 +2,7 @@
     Prepares a toast message. Use a trigger to display the message. The shortcode supports the following arguments:
     "id"            Optional id of the toast message, defaults to "toast-message-n" with sequence n.
     "header":       Optional header of the toast message. Uses the site title by default.
+    "class"         Optional class attribute of the toast element.
 -->
 
 {{- $error := false -}}
@@ -10,8 +11,10 @@
 {{ $header := .Get "header" -}}
 {{ $message := trim .Inner " \r\n" -}}
 
+{{- $class := .Get "class" -}}
+
 {{ if not $message -}}
     {{ errorf "Missing inner element text: %s" .Position -}}
 {{ else if not $error -}}
-    {{ partial "assets/toast.html" (dict "id" $id "header" $header "message" $message) }}
+    {{ partial "assets/toast.html" (dict "id" $id "header" $header "message" $message "class" $class) }}
 {{ end -}}

layouts/shortcodes/tooltip.html

@@ -5,6 +5,7 @@
     "title"         Required text to display in the tooltip.
     "href"          Required address for the button or hyperlink.
     "placement"     Optional position of the tooltip: "top" (default), "bottom", "left", or "right". 
+    "class"         Optional class attribute of the tooltip's button element.
 -->
 
 {{ $error := false }}
@@ -40,6 +41,8 @@
     {{ $error = true }}
 {{ end -}}
 
+{{- $class := .Get "class" -}}
+
 {{ if not $error }}
-    <div class="d-inline-flex">{{- partial "assets/button.html" (dict "type" $type "title" $title "color" $color "tooltip" $tooltip "href" $href "placement" $placement) -}}</div>
+    <div class="d-inline-flex">{{- partial "assets/button.html" (dict "type" $type "title" $title "color" $color "tooltip" $tooltip "href" $href "placement" $placement "class" $class) -}}</div>
 {{ end }}

package-lock.json

@@ -1,32 +1,31 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.17.0",
+  "version": "0.17.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.17.0",
+      "version": "0.17.4",
       "license": "MIT",
       "devDependencies": {
-        "@fortawesome/fontawesome-free": "^6.4.0",
         "@fullhuman/postcss-purgecss": "^5.0.0",
         "autoprefixer": "^10.4.14",
-        "cssnano": "^6.0.0",
-        "cssnano-preset-advanced": "^6.0.0",
-        "eslint": "^8.39.0",
-        "eslint-config-standard": "^17.0.0",
-        "eslint-plugin-import": "^2.27.5",
-        "eslint-plugin-n": "^16.0.0",
+        "cssnano": "^6.0.1",
+        "cssnano-preset-advanced": "^6.0.1",
+        "eslint": "^8.46.0",
+        "eslint-config-standard": "^17.1.0",
+        "eslint-plugin-import": "^2.28.0",
+        "eslint-plugin-n": "^16.0.1",
         "eslint-plugin-promise": "^6.1.1",
-        "hugo-bin": "^0.112.0",
+        "hugo-bin": "^0.112.1",
         "markdownlint-cli2": "^0.8.1",
         "postcss-cli": "^10.1.0",
         "purgecss-whitelister": "^2.4.0",
         "replace-in-files-cli": "^2.2.0",
-        "rimraf": "^5.0.0",
+        "rimraf": "^5.0.1",
         "shx": "^0.3.4",
-        "stylelint": "^15.6.0",
+        "stylelint": "^15.10.2",
         "stylelint-config-standard-scss": "^10.0.0"
       }
     },
@@ -281,16 +280,6 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
-    "node_modules/@fortawesome/fontawesome-free": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.4.0.tgz",
-      "integrity": "sha512-0NyytTlPJwB/BF5LtRV8rrABDbe3TdTXqNB3PdZ+UUUZAEIrdOJdmABqKjt4AXwIoJNaRVVZEXxpNrqvE1GAYQ==",
-      "dev": true,
-      "hasInstallScript": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/@fullhuman/postcss-purgecss": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-5.0.0.tgz",
@@ -7498,12 +7487,6 @@
       "integrity": "sha512-a8TLtmPi8xzPkCbp/OGFUo5yhRkHM2Ko9kOWP4znJr0WAhWyThaw3PnwX4vOTWOAMsV2uRt32PPDcEz63esSaA==",
       "dev": true
     },
-    "@fortawesome/fontawesome-free": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.4.0.tgz",
-      "integrity": "sha512-0NyytTlPJwB/BF5LtRV8rrABDbe3TdTXqNB3PdZ+UUUZAEIrdOJdmABqKjt4AXwIoJNaRVVZEXxpNrqvE1GAYQ==",
-      "dev": true
-    },
     "@fullhuman/postcss-purgecss": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-5.0.0.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.17.0",
+  "version": "0.17.4",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",
@@ -17,14 +17,13 @@
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "prestart": "npm run clean && npm run mod:vendor",
     "start": "hugo server --bind=0.0.0.0 --disableFastRender",
     "start:prod": "hugo server --bind=0.0.0.0 --disableFastRender --printI18nWarnings -e production",
-    "prebuild": "npm run clean && npm run -s mod:install",
+    "prebuild": "npm run clean:public && npm run -s mod:install",
     "build": "hugo --gc --minify",
     "build:debug": "hugo -e debug --debug",
     "build:preview": "npm run build -D -F",
-    "clean": "rimraf public resources",
+    "clean:public": "rimraf public",
     "clean:install": "rimraf package-lock.json node_modules",
     "lint": "npm run -s lint:scripts && npm run -s lint:styles && npm run -s lint:markdown",
     "lint:scripts": "eslint assets/js",
@@ -57,24 +56,23 @@
   },
   "homepage": "https://gethinode.com",
   "devDependencies": {
-    "@fortawesome/fontawesome-free": "^6.4.0",
     "@fullhuman/postcss-purgecss": "^5.0.0",
     "autoprefixer": "^10.4.14",
-    "cssnano": "^6.0.0",
-    "cssnano-preset-advanced": "^6.0.0",
-    "eslint": "^8.39.0",
-    "eslint-config-standard": "^17.0.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-n": "^16.0.0",
+    "cssnano": "^6.0.1",
+    "cssnano-preset-advanced": "^6.0.1",
+    "eslint": "^8.46.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.28.0",
+    "eslint-plugin-n": "^16.0.1",
     "eslint-plugin-promise": "^6.1.1",
-    "hugo-bin": "^0.112.0",
+    "hugo-bin": "^0.112.1",
     "markdownlint-cli2": "^0.8.1",
     "postcss-cli": "^10.1.0",
     "purgecss-whitelister": "^2.4.0",
     "replace-in-files-cli": "^2.2.0",
-    "rimraf": "^5.0.0",
+    "rimraf": "^5.0.1",
     "shx": "^0.3.4",
-    "stylelint": "^15.6.0",
+    "stylelint": "^15.10.2",
     "stylelint-config-standard-scss": "^10.0.0"
   },
   "hugo-bin": {