Merge pull request #268 from gethinode/develop

Social media

assets/js/clipboard.js

@@ -36,3 +36,10 @@ const addCopyButtons = (clipboard) => {
 if (navigator && navigator.clipboard) {
   addCopyButtons(navigator.clipboard)
 }
+
+document.querySelectorAll('[data-clipboard]').forEach(trigger => {
+  const text = trigger.getAttribute('data-clipboard')
+  trigger.addEventListener('click', () => {
+    navigator.clipboard.writeText(text)
+  })
+})

assets/js/toast.js

@@ -1,10 +1,37 @@
-// Bootstrap toast example: https://getbootstrap.com/docs/5.2/components/toasts/
-const toastTrigger = document.getElementById('toastButton')
-const toastLiveExample = document.getElementById('toastMessage')
-if (toastTrigger) {
-  toastTrigger.addEventListener('click', () => {
-    // eslint-disable-next-line no-undef
-    const toast = new bootstrap.Toast(toastLiveExample)
-    toast.show()
-  })
+// Script to move all embedded toast messages into a container. The container ensures multiple toast messages are
+// stacked properly. The script targets all elements specified by a 'data-toast-target' and ensures the click event
+// of the origin is linked as well.
+
+// create a HTML fragment
+function createFragment (htmlStr) {
+  const fragment = document.createDocumentFragment()
+  const temp = document.createElement('div')
+  temp.innerHTML = htmlStr
+  while (temp.firstChild) {
+    fragment.appendChild(temp.firstChild)
+  }
+  return fragment
 }
+
+// insert a toast container in the DOM
+const container = '<div id="toast-container" class="toast-container position-fixed bottom-0 end-0 p-3"></div>'
+document.body.appendChild(createFragment(container))
+const parent = document.getElementById('toast-container')
+
+// process all data-toast-target elements
+document.querySelectorAll('[data-toast-target]').forEach(trigger => {
+  const target = document.getElementById(trigger.getAttribute('data-toast-target'))
+  if (target !== null) {
+    // move the element to the toast containr
+    parent.appendChild(target)
+
+    // eslint-disable-next-line no-undef
+    const toast = bootstrap.Toast.getOrCreateInstance(target)
+    if (toast !== null) {
+      // associate the click event of the origin with the toast element
+      trigger.addEventListener('click', () => {
+        toast.show()
+      })
+    }
+  }
+})

assets/scss/components/_buttons.scss

@@ -6,3 +6,22 @@
 .open > .dropdown-toggle.btn-primary {
     color: #fff if($enable-important-utilities, !important, null);
 }
+
+.btn-social {
+    --bs-btn-bg: transparent;
+    --bs-btn-border-width: none;
+    --bs-btn-color: var(--bs-secondary);
+    --bs-btn-border-color: none;
+    --bs-btn-hover-bg: none;
+    --bs-btn-hover-border-color: none;
+    --bs-btn-active-bg: none;
+    --bs-btn-active-border-color: none;
+}
+
+.btn-social:hover,
+.btn-social:focus,
+.btn-social:active,
+.btn-social.active,
+.open > .dropdown-toggle.btn-primary {
+    color: var(--bs-primary) if($enable-important-utilities, !important, null);
+}

config/_default/params.toml

@@ -36,6 +36,44 @@
     sidebar = true
 # toml-docs-end navigation
 
+# toml-docs-start sharing
+[sharing]
+    enabled = true
+    sort = "weight"
+    reverse = false
+
+[[sharing.providers]]
+    name = "LinkedIn"
+    url = "https://www.linkedin.com/sharing/share-offsite/?url={url}"
+    icon = "fab linkedin"
+    weight = 10
+
+[[sharing.providers]]
+    name = "Twitter"
+    url = "https://twitter.com/home?status={url}"
+    icon = "fab twitter"
+    weight = 20
+
+[[sharing.providers]]
+    name = "Facebook"
+    url = "https://www.facebook.com/sharer.php?u={url}"
+    icon = "fab facebook"
+    weight = 30
+
+[[sharing.providers]]
+    name = "WhatsApp"
+    url = "whatsapp://send?text={title}%20{url}"
+    icon = "fab whatsapp"
+    weight = 40
+
+[[sharing.providers]]
+    name = "email"
+    url = "{url}"
+    icon = "fas link"
+    weight = 50
+    clipboard = true
+# toml-docs-end sharing
+
 # toml-docs-start sections
 [sections]
     [sections.blog]

content/en/blog/bootstrap-elements.md

@@ -251,12 +251,20 @@ As an example, the following shortcode displays a button that, when clicked, tri
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* button id="toastButton" */>}}
-    Show toast
+{{</* button toast="toast-example-1" */>}}
+    Show toast 1
 {{</* /button */>}}
 
-{{</* toast header="Custom title" */>}}
-    This is a toast message.
+{{</* button toast="toast-example-2" */>}}
+    Show toast 2
+{{</* /button */>}}
+
+{{</* toast id="toast-example-1" header="First title" */>}}
+    This is the first toast message.
+{{</* /toast */>}}
+
+{{</* toast id="toast-example-2" header="Second title" */>}}
+    This is the second toast message.
 {{</* /toast */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->

content/nl/blog/bootstrap-elements.md

@@ -252,12 +252,20 @@ De volgende shortcode toont een knop die een bericht laat verschijnen op het sch
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* button id="toastButton" */>}}
-    Toon bericht
+{{</* button toast="toast-example-1" */>}}
+    Toon bericht 1
 {{</* /button */>}}
 
-{{</* toast header="Titel" */>}}
-    Dit is een bericht.
+{{</* button toast="toast-example-2" */>}}
+    Toon bericht 2
+{{</* /button */>}}
+
+{{</* toast id="toast-example-1" header="Eerste titel" */>}}
+    Dit is het eerste bericht.
+{{</* /toast */>}}
+
+{{</* toast id="toast-example-2" header="Tweede titel" */>}}
+    Dit is het tweede bericht.
 {{</* /toast */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->

i18n/en.yaml

@@ -79,6 +79,10 @@
   translation: "Added in"
 - id: deprecatedFeature
   translation: "Deprecated in"
+- id: shareLink
+  translation: "Share via"
+- id: copiedToClipboard
+  translation: "Copied to clipboard"
 
 # 404 page
 - id: pageNotFound

i18n/nl.yaml

@@ -69,6 +69,10 @@
   translation: "Toegevoegd in"
 - id: deprecatedFeature
   translation: "Verouderd in"
+- id: shareLink
+  translation: "Delen via"
+- id: copiedToClipboard
+  translation: "Gekopieerd naar clipboard"
 
 # 404 page
 - id: pageNotFound

layouts/_default/single.html

@@ -2,6 +2,7 @@
     {{ if site.Params.navigation.breadcrumb }}{{ partial "assets/breadcrumb.html" . }}{{ end -}}
     {{ if in (slice "docs" "minimal") .Layout }}
         {{ with .Title }}<p class="display-4 mt-5">{{ . }}</p>{{ end }}
+        {{ partial "assets/sharing.html" . }}
         <p class="lead mb-5">{{ .Description }}</p>
     {{ else }}
         {{ $lastmodstr := (partial "utilities/date.html" (dict "date" .Lastmod "format" "long")) -}}
@@ -14,21 +15,24 @@
             {{ .WordCount | lang.FormatNumber 0 }}&nbsp;{{ i18n "words" }}
         </small>
 
-        <div class="mt-3">
-            <div class="d-none-dark">
-                {{ range (.GetTerms "tags") -}}
-                    <a class="btn btn-light btn-sm" href="{{ (path.Join .Page.RelPermalink) | relLangURL }}" role="button">{{ .LinkTitle }}</a>
-                    &nbsp;
-                {{ end -}}
+        {{- if gt (len (.GetTerms "tags")) 0 -}}
+            <div class="mt-3">
+                <div class="d-none-dark">
+                    {{ range (.GetTerms "tags") -}}
+                        <a class="btn btn-light btn-sm" href="{{ (path.Join .Page.RelPermalink) | relLangURL }}" role="button">{{ .LinkTitle }}</a>
+                        &nbsp;
+                    {{ end -}}
+                </div>
+                
+                <div class="d-none-light">
+                    {{ range (.GetTerms "tags") -}}
+                        <a class="btn btn-outline-secondary btn-sm" href="{{ (path.Join .Page.RelPermalink) | relLangURL }}" role="button">{{ .LinkTitle }}</a>
+                        &nbsp;
+                    {{ end -}}
+                </div>
             </div>
-            
-            <div class="d-none-light">
-                {{ range (.GetTerms "tags") -}}
-                    <a class="btn btn-outline-secondary btn-sm" href="{{ (path.Join .Page.RelPermalink) | relLangURL }}" role="button">{{ .LinkTitle }}</a>
-                    &nbsp;
-                {{ end -}}
-            </div>
-        </div>
+        {{- end -}}
+        {{ partial "assets/sharing.html" . }}
         <p class="lead mb-5 mt-3">{{ .Description }}</p>
     {{ end }}
 {{ end -}}

layouts/partials/assets/button.html

@@ -1,6 +1,6 @@
 <!-- 
     Displays a button. The shortcode supports the following arguments:
-    "title"         Required title of the button.
+    "title"         Title of the button, required unless icon is set.
     "href"          Optional address for the button or hyperlink.
     "id"            Optional id of the button, to be used in the DOM.
     "state"         Optional state of the button, either "enabled" (default), "disabled", "active", or "inactive".
@@ -16,15 +16,18 @@
     "type"          Optional type of the element, either "link" or "button" (default).
     "placement"     Optional position of the tooltip: "top" (default), "bottom", "left", or "right".
     "class"         Optional class attribute of the button element, e.g. “toc-button”.
-    "icon"          Optional Font Awesome icon class attribute, e.g. "fas sort".
+    "icon"          Font Awesome icon class attribute, required unless title is set. An example value is "fas sort".
     "order"         Optional order of the icon, either "first" or "last" (default).
     "justify"       Optional justification of the button title and icon, either "start", "end", "center" (default),
                     "between", "around", or "evenly".
+    "toast"         Optional id of the toast to display when the button is clicked.
+    "clipboard"     Optional text to be copied to the clipboard when the button is clicked.
 -->
 
 {{- $title := trim .title " \r\n" -}}
-{{- if not $title -}}
-    {{- errorf "partial [assets/button.html] - Missing element title" -}}
+{{- $icon := .icon }}
+{{- if not (or $title $icon) -}}
+    {{- errorf "partial [assets/button.html] - Missing element title or icon" -}}
 {{- end -}}
 
 {{- $id := .id }}
@@ -92,7 +95,6 @@
 {{- end -}}
 
 {{- $class := .class }}
-{{- $icon := .icon }}
 
 {{- $order := "last" -}}
 {{- with .order }}{{ $order = . }}{{ end -}}
@@ -108,14 +110,20 @@
     {{- errorf "partial [assets/button.html] - Invalid value for param 'justify': %s" $justify -}}
 {{- end -}}
 
-<a aria-label="{{ $title }}" {{ if ne $state "disabled" }}{{ with $href }}href="{{ . }}"{{ end }}{{ end -}}
-    {{- with $id }}id="{{ . }}"{{ end -}}
-    {{- if eq $type "button" }}class="btn btn-{{ if $outline }}outline-{{ end }}{{ $color }} {{ if ne $size "md"}}btn-{{ $size }}{{ end }} position-relative {{ if in (slice "disabled" "active") $state }}{{ $state }}{{ end }} {{ $class }}" role="button" {{ if eq $state "disabled" }}aria-disabled="true"{{ end -}}
-    {{- else }}class="link-{{ $color }} position-relative {{ $class }}"{{ end -}}
-    {{- with $tooltip }}data-bs-toggle="tooltip" data-bs-title="{{ . }}" data-bs-placement="{{ $placement }}"{{ end -}}
-    {{- with $collapse }}data-bs-toggle="collapse" aria-expanded="false" aria-controls="{{ . }}"{{ end -}}
-    {{- if eq $state "active" }}data-bs-toggle="button" aria-pressed="true"{{ end -}}
-    {{- if eq $state "inactive" }}data-bs-toggle="button" aria-pressed="false"{{ end -}}
+{{- $toast := .toast -}}
+{{- $clipboard := .clipboard -}}
+
+<a aria-label="{{ $title }}" {{ if ne $state "disabled" }}{{ with $href }}href="{{ . }}"{{ end }}{{ end }}
+    {{ with $id }}id="{{ . }}"{{ end }}
+    {{ with $toast }}data-toast-target="{{ $toast }}"{{ end }}
+    {{ with $clipboard }}data-clipboard="{{ $clipboard }}"{{ end }}
+    {{ if eq $type "button" }}class="btn btn-{{ if $outline }}outline-{{ end }}{{ $color }} {{ if ne $size "md"}}btn-{{ $size }}{{ end }} position-relative {{ if in (slice "disabled" "active") $state }}{{ $state }}{{ end }} {{ $class }}"
+    role="button" {{ if eq $state "disabled" }}aria-disabled="true"{{ end }}
+    {{ else }} class="link-{{ $color }} position-relative {{ $class }}"{{ end }}
+    {{ with $tooltip }}data-bs-toggle="tooltip" data-bs-title="{{ . }}" data-bs-placement="{{ $placement }}"{{ end }}
+    {{ with $collapse }}data-bs-toggle="collapse" aria-expanded="false" aria-controls="{{ . }}"{{ end }}
+    {{ if eq $state "active" }}data-bs-toggle="button" aria-pressed="true"{{ end }}
+    {{ if eq $state "inactive" }}data-bs-toggle="button" aria-pressed="false"{{ end }}
     >
 
     <div class="d-flex justify-content-{{ $justify }}">

layouts/partials/assets/navbar-item.html

@@ -2,6 +2,7 @@
 {{- $parent := .parent -}}
 {{- $page := .page -}}
 {{- $class := .class -}}
+{{- $anchorClass := "" -}}
 
 {{- $menuURL := (or $menu.PageRef $menu.URL) | relLangURL -}}
 {{- $pageURL := $page.RelPermalink | relLangURL -}}
@@ -21,12 +22,12 @@
 {{- if $parent -}}
     {{- $mainNav = urlize (lower $parent.Name) -}}
     {{- $childNav = urlize (lower $menu.Name) -}}
-    {{- $class = printf "dropdown-item %s" $class -}}
+    {{- $anchorClass = "dropdown-item" -}}
 {{- else if $menu.HasChildren -}}
-    {{- $class = printf "nav-link dropdown-toggle %s" $class -}}
+    {{- $anchorClass = "nav-link dropdown-toggle" -}}
     {{- $button = " role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"" -}}
 {{- else -}}
-    {{- $class = printf "nav-link %s" $class -}}
+    {{- $anchorClass = "nav-link" -}}
 {{- end -}}
 {{- $params := "" -}}
 {{- if and $isAlias (not $isExternal) -}}
@@ -34,7 +35,7 @@
     {{- with $childNav }}{{ $params = printf "%s&child=%s" $params . }}{{ end -}}
 {{- end -}}
 
-<a class="{{ $class }}{{ if $isActive }} active{{ end }}" 
+<a class="{{ $anchorClass }}{{ if $isActive }} active{{ end }}{{ with $class }} {{. }}{{ end }}" 
     data-nav="main" data-nav-main="{{ $mainNav }}"{{ with $childNav }} data-nav-child="{{ . }}"{{ end }} 
     href="{{ $menuURL }}{{ $params | safeHTMLAttr }}"{{ with $externalHref }} {{ . | safeHTMLAttr }}{{ end }} {{ $button | safeHTMLAttr }}>
     

layouts/partials/assets/navbar.html

@@ -1,5 +1,6 @@
 <!-- 
     Displays a navigation header with a toggler. The partial supports the following arguments:
+    "id"            Optional id of the navbar toggler, defaults to "navbar-collapse-0".
     "page"          Required object reference to the current page.
     "menus"         Optional name of the menu configuration, defaults to "main".
     "size"          Optional size of the button, either "sm", "md" (default), or "lg".
@@ -16,7 +17,6 @@
 
 <!-- Inline partial to render the color mode switcher -->
 {{- define "partials/navbar-mode.html" -}}
-    {{- $id := .id -}}
     {{- $size := .size -}}
     {{- $collapsed := .collapsed -}}
 
@@ -50,8 +50,10 @@
 
 {{- $supportedFlags := slice "true" "false" -}}
 
-{{- $id := 0 -}}
-{{- with .id }}{{ $id = . }}{{ end -}}
+{{- $id := printf "navbar-collapse-%d" 0 -}}
+{{ with .id }}
+    {{ $id = . }}
+{{ end }}
 
 {{- $page := .page -}}
 {{- if not $page -}}
@@ -155,15 +157,15 @@
 
         <!-- Insert main navigation toggler -->
         <div class="d-flex fw-30">
-            <button id="main-nav-toggler" class="navbar-toggler collapsed p-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent-{{ $id }}"
-                aria-controls="navbarSupportedContent-{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
+            <button id="main-nav-toggler" class="navbar-toggler collapsed p-0" type="button" data-bs-toggle="collapse" data-bs-target="#{{ $id }}"
+                aria-controls="{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
                 <span class="toggler-icon top-bar emphasis"></span>
                 <span class="toggler-icon middle-bar emphasis"></span>
                 <span class="toggler-icon bottom-bar emphasis"></span>
             </button>
         </div>
 
-        <div class="navbar-collapse collapse" id="navbarSupportedContent-{{ $id }}">
+        <div class="navbar-collapse collapse" id="{{ $id }}">
             <!-- Insert search input -->
             {{- if $search }}{{ partial "assets/search-input.html" -}}{{ end -}}
             
@@ -216,8 +218,8 @@
                               
                 <!-- Insert color mode switcher -->
                 {{- if $enableDarkMode -}}
-                    {{- partial "partials/navbar-mode.html" (dict "id" $id "size" $size "collapsed" true) -}}
-                    {{- partial "partials/navbar-mode.html" (dict "id" $id "size" $size "collapsed" false) -}}
+                    {{- partial "partials/navbar-mode.html" (dict "size" $size "collapsed" true) -}}
+                    {{- partial "partials/navbar-mode.html" (dict "size" $size "collapsed" false) -}}
                 {{- end -}}
             </ul>
         </div>

layouts/partials/assets/sharing.html

@@ -0,0 +1,28 @@
+{{- if .Site.Params.sharing.enabled -}}
+    {{- if or .Params.sharing (not (isset .Params "sharing")) -}}
+        {{- $page := . -}}
+        {{- $order := "asc" -}}
+        {{- $list := .Site.Params.sharing.providers -}}
+        {{- if .Site.Params.sharing.reverse }}{{ $order = "desc" }}{{ else }}{{ $order = "asc" }}{{ end -}}
+        {{- $sort := .Site.Params.sharing.sort | default "weight" -}}
+        {{- $list = sort $list $sort $order -}}
+        <div class="py-3 text-body-secondary">
+            {{ T "shareLink" }}
+            {{- range $index, $item := $list -}}
+                {{- $url := $item.url -}}
+                {{- $url = replace $url "{url}" $page.Permalink -}}
+                {{- $url = replace $url "{title}" (urlquery $page.Title) -}}
+                {{- $url = $url | safeURL -}}
+                {{- $target := "" -}}
+                {{- $clipboard := "" -}}
+                {{- if .clipboard -}}
+                    {{- $target = (printf "toast-message-%s-%d" (anchorize $item.name) $index ) -}}
+                    {{- $clipboard = $url -}}
+                    {{- $url = "#!" -}}
+                    {{- partial "assets/toast.html" (dict "id" $target "message" (T "copiedToClipboard")) -}}
+                {{- end -}}
+                {{ partial "assets/button.html" (dict "toast" $target "clipboard" $clipboard "href" $url "icon" $item.icon "class" "btn-social px-1" )}}
+            {{- end -}}
+        </div>
+    {{- end -}}
+{{- end -}}

layouts/partials/assets/toast.html

@@ -0,0 +1,28 @@
+<!-- 
+    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-0".
+    "header":       Optional header of the toast message.
+    "message":      Required toast message.
+-->
+
+{{- $id := printf "toast-message-%d" 0 -}}
+{{ with .id }}
+    {{ $id = . }}
+{{ end }}
+
+{{ $header := .header -}}
+{{ if not $header -}}
+    {{ $header = site.Title -}}
+{{ end -}}
+{{- $message := .message -}}
+{{ if not $message -}}
+    {{- errorf "partial [assets/toast.html] - Missing message text" -}}
+{{ end -}}
+
+<div id="{{ $id }}" class="toast" 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>
+    </div>
+    <div class="toast-body">{{ $message }}</div>
+</div>

layouts/shortcodes/button.html

@@ -14,6 +14,7 @@
                     inactive buttons.
     "collapse"      Optional panel to collapse. Cannot be used together with tooltip. Ignored for active/inactive buttons.
     "placement"     Optional position of the tooltip: "top" (default), "bottom", "left", or "right". 
+    "toast"         Optional id of the toast to display when the button is clicked.
 -->
 
 {{ $error := false }}
@@ -77,6 +78,8 @@
     {{ $error = true }}
 {{ end -}}
 
+{{- $toast := .Get "toast" -}}
+
 {{ if not $error }}
     {{- partial "assets/button.html" (dict 
         "type" $type
@@ -91,6 +94,7 @@
         "href" $href
         "id" $id
         "state" $state
-        "placement" $placement)
+        "placement" $placement
+        "toast" $toast)
     -}} 
 {{ end }}

layouts/shortcodes/navbar.html

@@ -2,6 +2,8 @@
     Displays a navigation header with a toggler. The menu items are derived from the site's configuration. Nested items
     are supported at one-level depth. The navigation bar includes a search area and a language switcher if applicable.
     The shortcode supports the following arguments:
+    "id"            Optional id of the navbar toggler, defaults to "navbar-collapse-n" with a sequential number n
+                    starting at 1.
     "path"          Required path of the active page.
     "menus"         Optional name of the menu configuration, defaults to "main".
     "size"          Optional breakpoint of the navbar toggler, either "xs", "sm", "md" (default), "lg", or "xl".
@@ -19,7 +21,10 @@
 {{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "white" "black" "body" "body" "body-tertiary" -}}
 {{ $supportedFlags := slice "true" "false" -}}
 
-{{ $id := add .Ordinal 1 }}
+{{- $id := printf "navbar-collapse-%d" (add .Ordinal 1) -}}
+{{ with .Get "id" }}
+    {{ $id = . }}
+{{ end }}
 
 {{ $path := .Get "path" }}
 {{ $page := .Site.GetPage $path }}

layouts/shortcodes/release.html

@@ -58,7 +58,7 @@
     <div class="pb-3">
     {{- partial "assets/button.html" (dict 
         "title" $title
-        "href" (path.Join site.Params.docs.release $version)
+        "href" (printf "%s/%s" (strings.TrimSuffix "/" site.Params.docs.release) $version)
         "size" "sm"
         "color" $color
         "outline" "true"

layouts/shortcodes/toast.html

@@ -1,24 +1,16 @@
 <!-- 
     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.
 -->
 
+{{- $id := printf "toast-message-%d" .Ordinal -}}
+{{- with .Get "id" }}{{ $id = . }}{{ end -}}
 {{ $header := .Get "header" -}}
-{{ if not $header -}}
-    {{ $header = site.Title -}}
-{{ end -}}
-
 {{ $message := trim .Inner " \r\n" -}}
+
 {{ if not $message -}}
     {{ errorf "Missing inner element text: %s" .Position -}}
+{{ else }}
+    {{ partial "assets/toast.html" (dict "id" $id "header" $header "message" $message) }}
 {{ end -}}
-
-<div class="toast-container position-fixed bottom-0 end-0 p-3">
-    <div id="toastMessage" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
-        <div class="toast-header">
-            <strong class="me-auto">{{ $header }}</strong>
-            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
-        </div>
-        <div class="toast-body">{{ $message }}</div>
-    </div>
-</div>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.14.1",
+  "version": "0.14.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.14.1",
+      "version": "0.14.3",
       "license": "MIT",
       "devDependencies": {
         "@fortawesome/fontawesome-free": "^6.4.0",
@@ -21,7 +21,7 @@
         "eslint-plugin-n": "^15.7.0",
         "eslint-plugin-promise": "^6.1.1",
         "flexsearch": "^0.7.31",
-        "hugo-bin": "^0.102.0",
+        "hugo-bin": "^0.103.0",
         "markdownlint-cli2": "^0.7.0",
         "postcss-cli": "^10.1.0",
         "purgecss-whitelister": "^2.4.0",
@@ -247,9 +247,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.40.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.40.0.tgz",
-      "integrity": "sha512-ElyB54bJIhXQYVKjDSvCkPO1iU1tSAeVQJbllWJq1XQSmmA4dgFk8CbiBGpiOPxleE48vDogxCtmMYku4HSVLA==",
+      "version": "8.41.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.41.0.tgz",
+      "integrity": "sha512-LxcyMGxwmTh2lY9FwHPGWOHmYFCZvbrFCBZL4FzSSsxsRPuhrYUg/49/0KDfW8tnIEaEHtfmn6+NPN+1DqaNmA==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -2212,15 +2212,15 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.40.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.40.0.tgz",
-      "integrity": "sha512-bvR+TsP9EHL3TqNtj9sCNJVAFK3fBN8Q7g5waghxyRsPLIMwL73XSKnZFK0hk/O2ANC+iAoq6PWMQ+IfBAJIiQ==",
+      "version": "8.41.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.41.0.tgz",
+      "integrity": "sha512-WQDQpzGBOP5IrXPo4Hc0814r4/v2rrIsB0rhT7jtunIalgg6gYXWhRMOejVO8yH21T/FGaxjmFjBMNqcIlmH1Q==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.4.0",
         "@eslint/eslintrc": "^2.0.3",
-        "@eslint/js": "8.40.0",
+        "@eslint/js": "8.41.0",
         "@humanwhocodes/config-array": "^0.11.8",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
@@ -2240,13 +2240,12 @@
         "find-up": "^5.0.0",
         "glob-parent": "^6.0.2",
         "globals": "^13.19.0",
-        "grapheme-splitter": "^1.0.4",
+        "graphemer": "^1.4.0",
         "ignore": "^5.2.0",
         "import-fresh": "^3.0.0",
         "imurmurhash": "^0.1.4",
         "is-glob": "^4.0.0",
         "is-path-inside": "^3.0.3",
-        "js-sdsl": "^4.1.4",
         "js-yaml": "^4.1.0",
         "json-stable-stringify-without-jsonify": "^1.0.1",
         "levn": "^0.4.1",
@@ -3423,10 +3422,10 @@
       "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
       "dev": true
     },
-    "node_modules/grapheme-splitter": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
-      "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
+    "node_modules/graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
       "dev": true
     },
     "node_modules/hard-rejection": {
@@ -3538,9 +3537,9 @@
       "dev": true
     },
     "node_modules/hugo-bin": {
-      "version": "0.102.2",
-      "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.102.2.tgz",
-      "integrity": "sha512-Agx3selH3s+4tEyRyRVGsD7OpWuBzQnGCpkLVUVCgqCiPU4pZwyL5a6uJ7CA1A+ORIVPyUUgwMUgqTf0sqS5Ew==",
+      "version": "0.103.3",
+      "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.103.3.tgz",
+      "integrity": "sha512-nB5CcOni4zAkWcPVCu2CJGq0WKEmrjONjGgZBVoxPe0DZivIclu2BLurkWFwMTuoiipfmsmqyCk9LZfLVhgwpw==",
       "dev": true,
       "funding": [
         {
@@ -3982,16 +3981,6 @@
         "@pkgjs/parseargs": "^0.11.0"
       }
     },
-    "node_modules/js-sdsl": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.2.0.tgz",
-      "integrity": "sha512-dyBIzQBDkCqCu+0upx25Y2jGdbTGxE9fshMsCdK0ViOongpV+n5tXRcZY9v7CaVQ79AGS9KA1KHtojxiM7aXSQ==",
-      "dev": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/js-sdsl"
-      }
-    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -7513,9 +7502,9 @@
       }
     },
     "@eslint/js": {
-      "version": "8.40.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.40.0.tgz",
-      "integrity": "sha512-ElyB54bJIhXQYVKjDSvCkPO1iU1tSAeVQJbllWJq1XQSmmA4dgFk8CbiBGpiOPxleE48vDogxCtmMYku4HSVLA==",
+      "version": "8.41.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.41.0.tgz",
+      "integrity": "sha512-LxcyMGxwmTh2lY9FwHPGWOHmYFCZvbrFCBZL4FzSSsxsRPuhrYUg/49/0KDfW8tnIEaEHtfmn6+NPN+1DqaNmA==",
       "dev": true
     },
     "@fortawesome/fontawesome-free": {
@@ -8916,15 +8905,15 @@
       "dev": true
     },
     "eslint": {
-      "version": "8.40.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.40.0.tgz",
-      "integrity": "sha512-bvR+TsP9EHL3TqNtj9sCNJVAFK3fBN8Q7g5waghxyRsPLIMwL73XSKnZFK0hk/O2ANC+iAoq6PWMQ+IfBAJIiQ==",
+      "version": "8.41.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.41.0.tgz",
+      "integrity": "sha512-WQDQpzGBOP5IrXPo4Hc0814r4/v2rrIsB0rhT7jtunIalgg6gYXWhRMOejVO8yH21T/FGaxjmFjBMNqcIlmH1Q==",
       "dev": true,
       "requires": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.4.0",
         "@eslint/eslintrc": "^2.0.3",
-        "@eslint/js": "8.40.0",
+        "@eslint/js": "8.41.0",
         "@humanwhocodes/config-array": "^0.11.8",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
@@ -8944,13 +8933,12 @@
         "find-up": "^5.0.0",
         "glob-parent": "^6.0.2",
         "globals": "^13.19.0",
-        "grapheme-splitter": "^1.0.4",
+        "graphemer": "^1.4.0",
         "ignore": "^5.2.0",
         "import-fresh": "^3.0.0",
         "imurmurhash": "^0.1.4",
         "is-glob": "^4.0.0",
         "is-path-inside": "^3.0.3",
-        "js-sdsl": "^4.1.4",
         "js-yaml": "^4.1.0",
         "json-stable-stringify-without-jsonify": "^1.0.1",
         "levn": "^0.4.1",
@@ -9817,10 +9805,10 @@
       "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
       "dev": true
     },
-    "grapheme-splitter": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
-      "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
+    "graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
       "dev": true
     },
     "hard-rejection": {
@@ -9896,9 +9884,9 @@
       "dev": true
     },
     "hugo-bin": {
-      "version": "0.102.2",
-      "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.102.2.tgz",
-      "integrity": "sha512-Agx3selH3s+4tEyRyRVGsD7OpWuBzQnGCpkLVUVCgqCiPU4pZwyL5a6uJ7CA1A+ORIVPyUUgwMUgqTf0sqS5Ew==",
+      "version": "0.103.3",
+      "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.103.3.tgz",
+      "integrity": "sha512-nB5CcOni4zAkWcPVCu2CJGq0WKEmrjONjGgZBVoxPe0DZivIclu2BLurkWFwMTuoiipfmsmqyCk9LZfLVhgwpw==",
       "dev": true,
       "requires": {
         "@xhmikosr/bin-wrapper": "^5.0.1",
@@ -10194,12 +10182,6 @@
         "@pkgjs/parseargs": "^0.11.0"
       }
     },
-    "js-sdsl": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.2.0.tgz",
-      "integrity": "sha512-dyBIzQBDkCqCu+0upx25Y2jGdbTGxE9fshMsCdK0ViOongpV+n5tXRcZY9v7CaVQ79AGS9KA1KHtojxiM7aXSQ==",
-      "dev": true
-    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.14.1",
+  "version": "0.14.3",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",
@@ -63,7 +63,7 @@
     "eslint-plugin-n": "^15.7.0",
     "eslint-plugin-promise": "^6.1.1",
     "flexsearch": "^0.7.31",
-    "hugo-bin": "^0.102.0",
+    "hugo-bin": "^0.103.0",
     "markdownlint-cli2": "^0.7.0",
     "postcss-cli": "^10.1.0",
     "purgecss-whitelister": "^2.4.0",