Merge pull request #472 from gethinode/develop

Disable HTML support by default

.github/workflows/lint-build.yml

@@ -29,8 +29,9 @@ jobs:
         cache: 'npm'
         cache-dependency-path: '**/package-lock.json'
 
-    - name: Perform clean install of npm
-      run: npm ci
+    # [24/AUG/23] Adjusted from npm ci to prevent EBADPLATFORM error due to fsevents
+    - name: Install npm
+      run: npm i
 
     - name: Lint the source files
       run: npm run lint      
@@ -57,8 +58,15 @@ jobs:
         cache: 'npm'
         cache-dependency-path: '**/package-lock.json'
 
+    # [24/AUG/23] Adjusted from npm ci for non-macOS to prevent EBADPLATFORM error due to fsevents
     - name: Perform clean install of npm
-      run: npm ci
+      run:  |
+        if [ "$RUNNER_OS" == "macOS" ]; then
+          npm ci
+        else
+          npm i
+        fi
+      shell: bash
 
     # Cache Hugo cachedir and resourcedir (configured in config/ci/hugo.toml) for each OS
     # No additional cache invalidation is needed, Hugo uses checksums itself

.github/workflows/mod-update.yml

@@ -5,6 +5,7 @@ on:
     - cron: '0 3 * * *' # run daily at 03:00 AM
 
 permissions:
+  contents: write
   pull-requests: write
 
 jobs:
@@ -22,8 +23,9 @@ jobs:
         cache: 'npm'
         cache-dependency-path: '**/package-lock.json'
 
-    - name: Perform clean install of npm
-      run: npm ci
+    # [26/AUG/23] Adjusted from npm ci to prevent EBADPLATFORM error due to fsevents
+    - name: Install npm
+      run: npm i
 
     - name: Update Hugo module dependencies
       id: mod-updates
@@ -57,4 +59,4 @@ jobs:
           go.mod
           go.sum
           **/go.mod
-          **/go.sum
+          **/go.sum

.markdownlint-cli2.jsonc

@@ -4,7 +4,6 @@
     "MD013": false,
     "MD024": false,
     "MD026": false,
-    "MD033": false,
     "MD034": false,
     "MD051": false,
     "MD053": false

README.md

@@ -1,5 +1,6 @@
 # Hugo Theme Hinode
 
+<!-- markdownlint-disable MD033 -->
 <!-- Tagline -->
 <p align="center">
     <b>A clean documentation and blog theme for your Hugo site based on Bootstrap 5</b>
@@ -47,6 +48,7 @@
   <a href="#donate">Donate</a> •
   <a href="#license">License</a>
 </p>
+<!-- markdownlint-enable MD033 -->
 
 ## About
 
@@ -111,7 +113,9 @@ Hinode is inspired by the following themes:
 
 ## Donate
 
+<!-- markdownlint-disable MD033 -->
 <a href="https://www.buymeacoffee.com/markdumay" target="_blank" rel="noopener noreferrer"><img src="https://cdn.buymeacoffee.com/buttons/lato-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;"></a>
+<!-- markdownlint-enable MD033 -->
 
 ## License
 

assets/scss/components/_syntax.scss

@@ -38,7 +38,10 @@
         }
 
         .bg,
-        .chroma {
+        .chroma,
+        .chroma .ge,
+        .chroma .gl,
+        .chroma .gs {
             color: #c9d1d9 if($enable-important-utilities, !important, null);
         }
     }

exampleSite/content/en/blog/bootstrap-elements.md

@@ -22,7 +22,8 @@ As an example, the following shortcode displays an accordion with three elements
 {{< example lang="hugo" >}}
 {{</* accordion */>}}
   {{</* accordion-item header="Accordion Item #1" show="true" */>}}
-    This is the first item's accordion body. It supports HTML content, if enabled in the goldmark renderer. The item is shown by adding the value `show` to the `class` argument.
+    This is the first item's accordion body. It supports HTML content, if enabled in the goldmark
+    renderer. The item is shown by adding the value `show` to the `class` argument.
   {{</* /accordion-item */>}}
   {{</* accordion-item header="Accordion Item #2" */>}}
     This is the second item's accordion body.
@@ -48,16 +49,29 @@ As an example, the following shortcode displays a simple alert.
 
 ## Badge
 
-Use HTML code to display a badge for a heading. See the Bootstrap [documentation]({{< param "links.bs_badge_heading" >}}) for more options.
+Use the badge shortcode to display a badge for a heading.
 
+<!-- markdownlint-disable MD037 -->
 {{< example >}}
-<h1>Example heading of size one <span class="badge bg-secondary">New</span></h1>
-<h2>Example heading of size two <span class="badge bg-secondary">New</span></h2>
-<h3>Example heading of size three <span class="badge bg-secondary">New</span></h3>
-<h4>Example heading of size four <span class="badge bg-secondary">New</span></h4>
-<h5>Example heading of size five <span class="badge bg-secondary">New</span></h5>
-<h6>Example heading of size six <span class="badge bg-secondary">New</span></h6>
+Heading 1 {{</* badge title="New" */>}}
+{.h1}
+
+Heading 2 {{</* badge title="New" */>}}
+{.h2}
+
+Heading 3 {{</* badge title="New" */>}}
+{.h3}
+
+Heading 4 {{</* badge title="New" */>}}
+{.h4}
+
+Heading 5 {{</* badge title="New" */>}}
+{.h5}
+
+Heading 6 {{</* badge title="New" */>}}
+{.h6}
 {{< /example >}}
+<!-- markdownlint-enable MD037 -->
 
 ## Breadcrumb
 
@@ -151,7 +165,7 @@ As an example, the following shortcode displays a button that, when clicked, tri
 {{</* /button */>}}
 
 {{</* collapse id="collapse-1" class="p-3 border rounded bg-primary-subtle" */>}}
-    Some placeholder content for the collapse component. This panel is <i>hidden by default</i> but
+    Some placeholder content for the collapse component. This panel is *hidden by default* but
     revealed when the user activates the relevant trigger.
 {{</* /collapse */>}}
 {{< /example >}}
@@ -237,6 +251,22 @@ As an example, the following shortcode displays an image with rounded corners an
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
+As an example, the following shortcode displays a regular vector image.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* image src="/img/logo_icon.svg" class="col-sm-6 col-lg-4" wrapper="text-center" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+As an example, the following shortcode displays a vector image with a symbol reference.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* image src="/img/logo_var.svg#logo" class="col-sm-6 col-lg-4" wrapper="text-center" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Link
 
 As an example, the following shortcodes render links in different formats.
@@ -270,7 +300,8 @@ As an example, the following shortcode displays a tab group with vertically alig
 {{< example lang="hugo" >}}
   {{</* nav type="pills" vertical="true" */>}}
     {{</* nav-item header="Nav Item #1" show="true" */>}}
-      This is the first item's nav body. It supports HTML content, if enabled in the goldmark renderer. The item is shown by adding the value `show` to the `class` argument.
+      This is the first item's nav body. It supports HTML content, if enabled in the goldmark
+      renderer. The item is shown by adding the value `show` to the `class` argument.
     {{</* /nav-item */>}}
     {{</* nav-item header="Nav Item #2" */>}}
       This is the second item's nav body.
@@ -339,11 +370,11 @@ As an example, the following shortcode displays a button that, when clicked, tri
 {{</* /button */>}}
 
 {{</* toast id="toast-example-1" header="First title" */>}}
-    This is the first toast message.
+    This is the first toast message. It supports `markdown.`
 {{</* /toast */>}}
 
 {{</* toast id="toast-example-2" header="Second title" */>}}
-    This is the second toast message.
+    This is the second toast message. It supports `markdown.`
 {{</* /toast */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
@@ -354,6 +385,6 @@ As an example, the following shortcode displays a tooltip for a colored hyperlin
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* tooltip color="primary" title="Tooltip" href="#!" */>}}Tooltip{{</* /tooltip */>}} demonstration
+{{</* tooltip color="primary" title="Tooltip caption" href="#!" */>}}Tooltip{{</* /tooltip */>}} demonstration
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->

exampleSite/hugo_stats.json

@@ -7,16 +7,12 @@
       "button",
       "code",
       "div",
+      "em",
       "figcaption",
       "figure",
       "footer",
       "form",
-      "h1",
       "h2",
-      "h3",
-      "h4",
-      "h5",
-      "h6",
       "head",
       "hr",
       "html",
@@ -69,7 +65,6 @@
       "bg-opacity-10",
       "bg-primary",
       "bg-primary-subtle",
-      "bg-secondary",
       "border",
       "border-0",
       "border-1",
@@ -218,6 +213,11 @@
       "gap-3",
       "gradient",
       "h-100",
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
       "h6",
       "heading",
       "highlight",
@@ -258,7 +258,7 @@
       "mt-3",
       "mt-5",
       "mt-auto",
-      "multi-docs-collapse-15",
+      "multi-docs-collapse-14",
       "multi-file-collapse-1",
       "mx-auto",
       "mx-md-2",
@@ -348,6 +348,7 @@
       "text-bg-body-tertiary",
       "text-bg-info",
       "text-bg-primary",
+      "text-bg-secondary",
       "text-bg-success",
       "text-bg-warning",
       "text-body",
@@ -412,7 +413,7 @@
       "accordion-0-item-2",
       "alert",
       "badge",
-      "body-docs-collapse-15",
+      "body-docs-collapse-14",
       "body-file-collapse-1",
       "breadcrumb",
       "btn-webshare",
@@ -428,7 +429,7 @@
       "docs",
       "example",
       "file",
-      "footer-docs-collapse-15",
+      "footer-docs-collapse-14",
       "footer-file-collapse-1",
       "formula-katex",
       "icon",

layouts/partials/assets/carousel-item.html

@@ -0,0 +1,16 @@
+{{- $page := .page -}}
+{{- $active := .active -}}
+{{- $src := .src -}}
+{{- $caption := .caption -}}
+{{- $ratio := .ratio -}}
+{{- $portrait := .portrait -}}
+
+<div class="carousel-item{{ if $active }} active{{ end }}">
+    {{ partial "assets/image.html" (dict "url" $src "ratio" $ratio "page" $page "innerClass" "d-block w-100" "portrait" $portrait) }}
+    <div class="carousel-caption gradient"></div>
+    {{ with $caption }}
+        <div class="carousel-caption d-none d-md-block">
+            <div class="d-flex justify-content-center align-items-end h-100 w-100 p-4">{{ . }}</div>
+        </div>
+    {{ end }}
+</div>

layouts/partials/assets/image.html

@@ -222,8 +222,8 @@
     {{- if $caption -}}
         <figure {{ with $outerClass }}class="{{ . }}"{{ end }}>
     {{ end }}
-    {{- if not $isVector -}}
-        <div class="{{ if not $caption }}{{ $outerClass }}{{ end }}">
+    <div class="{{ if not $caption }}{{ $outerClass }}{{ end }}">
+        {{- if not $anchor -}}
             <img class="img-fluid {{ $innerClass }}"
                 {{ with $imgset -}}
                 srcset="{{ . }}"
@@ -231,14 +231,12 @@
                 {{- end }}
                 src="{{ $fallbackURL }}"
                 alt="{{ $title }}">
-        </div>
-    {{ else }}
-        <div class="{{ if not $caption }}{{ $outerClass }}{{ end }}">
+        {{- else }}
             <svg class="{{ $innerClass }}">
-                <use href="{{ $fallbackURL }}{{ with $anchor }}#{{ . }}{{ end }}"></use>
+                <use href="{{ $fallbackURL }}#{{ $anchor }}"></use>
             </svg>
-        </div>
-    {{ end }}
+        {{ end }}
+    </div>
     {{- if $caption -}}
         <figcaption class="figure-caption">{{ $caption | safeHTML }}</figcaption>
     </figure>

layouts/partials/assets/nav-item.html

@@ -0,0 +1,29 @@
+<!-- 
+    Defines an individual nav item. The shortcode supports the following arguments:
+    
+    "id"            Required unique ID of the nav-item.
+    "parentID"      Required ID of the parent (e.g. nav control).
+    "class"         Optional class attributes to be added to the nav-item.
+    "fade"          Optional flag to make the tab pane fade in.
+    "header"        Required header of the nav item.
+    "class"         Optional class attribute of the nav item.
+    "body"          The body content of the nav-item, supports Markdown and HTML (if enabled).
+    "show"          Optional flag to indicate the item should be shown as expanded (only one can be shown at a time).
+    "disabled"      Optional flag to indicate the item should be in a disabled state.
+-->
+
+{{- $id := .id -}}
+{{- $parentID := .parentID -}}
+{{- $class := .class -}}
+{{- $fade := .fade -}}
+{{- $header := .header -}}
+{{- $class := .class -}}
+{{- $body := .body -}}
+{{- $show := .show -}}
+{{- $disabled := .disabled -}}
+
+<div class="tab-pane{{ if $show }} active {{ if $fade }}show{{ end }}{{ end }} {{ if $fade}}fade{{ end }}{{ with $class }} {{ . }}{{ end }}" id="{{ $parentID }}-{{ $id }}" 
+    role="tabpanel" aria-labelledby="{{ $parentID }}-btn-{{ $id }}" tabindex="0" data-header="{{ $header }}" {{ if $show }}data-show-id="{{ $id }}"{{ end }} 
+    data-has-content="{{ gt (len $body) 0 }}" {{ if $disabled }} data-disabled-id="{{ $id }}"{{ end }}>
+    {{ $body }}
+</div>

layouts/shortcodes/badge.html

@@ -0,0 +1,23 @@
+<!-- 
+    Adds an inline badge. The shortcode supports the following arguments:
+    "title"         Required title of the badge.
+    "class"         Optional class attributes of the badge element.
+    "color"         Optional theme color of the element, either "primary", "secondary" (default), "success",
+                    "danger", "warning", "info", "light", "dark", "white", or "black".
+-->
+
+{{- $error := false -}}
+{{- $title := .Get "title" -}}
+{{- $class := .Get "class" -}}
+{{- $color := "secondary" -}}
+{{- with .Get "color" }}{{ $color = . }}{{ end -}}
+{{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" -}}
+{{- if not (in $supportedColors $color) -}}
+    {{- errorf "Invalid value for param 'color': %s" .Position -}}
+{{- end -}}
+
+{{- if not $title }}
+    {{ errorf "Missing title: %s" .Position -}}
+{{ else -}}
+    <span class="badge text-bg-{{ $color }}{{ with $class }} {{ . }}{{ end }}">{{ $title | plainify }}</span>
+{{ end -}}

layouts/shortcodes/button-group.html

@@ -3,6 +3,13 @@
     "aria-label"    Optional assistive label for the button group.
 -->
 
+{{ $inner := .Scratch.Get "inner" }}
+{{ $input := trim .Inner " \r\n" }}
+{{ if $input }}
+    {{ $input = replace $input "\n" "\n  " }}
+    {{ warnf "Unexpected inner content: %s\r\n      %s" .Position $input }}
+{{ end }}
+
 <div class="btn-group" role="group" {{ with .Get "aria-label" }}aria-label="{{ . }}"{{ end }}>
-    {{ .Inner }}
+    {{ $inner | safeHTML }}
 </div>

layouts/shortcodes/button.html

@@ -32,7 +32,7 @@
 {{ $type := "button" -}}
 
 {{- $icon := .Get "icon" }}
-{{ $title := trim .Inner " \r\n" -}}
+{{ $title := trim .Inner " \r\n" | .Page.RenderString -}}
 {{ if not (or $title $icon) -}}
     {{ errorf "Missing icon or inner element text: %s" .Position -}}
     {{ $error = true }}
@@ -113,7 +113,7 @@
 {{- $tab := .Get "tab" | default site.Params.main.externalLinks.tab -}}
 
 {{ if not $error }}
-    {{- partial "assets/button.html" (dict 
+    {{- $output := partial "assets/button.html" (dict 
         "type" $type
         "title" $title
         "size" $size
@@ -134,5 +134,16 @@
         "cue" $cue
         "tab" $tab
         "toast" $toast)
-    -}} 
+    -}}
+
+    {{- if .Parent -}}
+        {{ $current := .Parent.Scratch.Get "inner" }}
+        {{ if $current }}
+            {{ .Parent.Scratch.Set "inner" (print $current $output) }}
+        {{ else }}
+            {{ .Parent.Scratch.Set "inner" $output }}
+        {{ end }}
+    {{- else -}}
+        {{ $output | safeHTML }}
+    {{- end -}}
 {{ end }}

layouts/shortcodes/card.html

@@ -1,7 +1,8 @@
 <!-- 
     Displays a Bootstrap card that links to a page. Any inner text is used as description The shortcode supports the
     following arguments:
-    "path"          Optional path of the page.
+    "path"          Optional path of the page. If omitted, specify the title, icon, thumbnail, and body as needed. 
+    "title"         Optional title of the card.
     "class"         Optional class attribute of the card element, e.g. “w-50”.
     "color"         Optional theme color of the card, either "primary", "secondary", "success", "danger",
                     "warning", "info", "light", "dark", "white", "black", "body", or "body-tertiary". By default, no
@@ -79,7 +80,7 @@
     {{ $error = true -}}
 {{ end -}}
 
-{{ $description := .Inner }}
+{{ $description := trim .Inner " \r\n" | .Page.RenderString | safeHTML }}
 {{ $title := .Get "title" }}
 {{ $icon := .Get "icon" }}
 {{ $thumbnail := .Get "thumbnail" }}

layouts/shortcodes/carousel.html

@@ -15,8 +15,14 @@
 {{ end }}
 
 {{ $class := .Get "class" -}}
-{{ $images := .Inner -}}
-{{ $items := len (findRE "carousel-item" $images) -}}
+
+{{ $inner := .Scratch.Get "inner" }}
+{{ $input := trim .Inner " \r\n" }}
+{{ if $input }}
+    {{ $input = replace $input "\n" "\n  " }}
+    {{ warnf "Unexpected inner content: %s\r\n      %s" .Position $input }}
+{{ end }}
+{{ $items := len (findRE "carousel-item" $inner) -}}
 
 <div id="{{ $id }}" class="carousel slide mb-3{{ with $class }} {{ . }}{{ end }}" data-bs-ride="true">
     <div class="carousel-indicators">
@@ -25,7 +31,7 @@
         {{ end -}}
     </div>
     <div class="carousel-inner">
-        {{ $images }}
+        {{ $inner | safeHTML }}
     </div>
     <button class="carousel-control-prev" type="button" data-bs-target="#{{ $id }}" data-bs-slide="prev">
         <span class="carousel-control-prev-icon" aria-hidden="true"></span>

layouts/shortcodes/collapse.html

@@ -18,6 +18,6 @@
 
 <p>
     <div class="collapse" id="{{ $id }}">
-        <div class="{{ $class }}">{{ $body | safeHTML }}</div>
+        <div class="{{ $class }}">{{ $body | .Page.RenderString }}</div>
     </div>
 </p>

layouts/shortcodes/example.html

@@ -5,7 +5,7 @@
     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".
+    "lang"          Language used to display the code, default value is "markdown".
     "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.
@@ -13,22 +13,16 @@
 
 {{- $id := .Get "id" -}}
 {{- $class := .Get "class" -}}
-{{- $lang := .Get "lang" | default "html" -}}
+{{- $lang := .Get "lang" | default "markdown" -}}
 {{- $show_markup := .Get "show_markup" | default true -}}
 {{- $show_preview := .Get "show_preview" | default true -}}
-{{- $input := .Inner -}}
-{{- $content := .Inner -}}
-
-{{ $preprocess := slice "hugo" "markdown" }}
-{{- if in $preprocess $lang -}}
-    {{- $content = (trim $content "\r\n") | .Page.RenderString }}
-    {{ $lang = "markdown" }}
-{{- end -}}
+{{- $content := .InnerDeindent -}}
+{{- if eq $lang "hugo" }}{{ $lang = "markdown" }}{{ end -}}
 
 <div class="rounded border mb-3">
     {{- if eq $show_preview true -}}
         <div {{ with $id }}id="{{ . }}"{{ end }} class="rounded-top p-3 {{ with $class }} {{ . }}{{ end }}">
-            {{- $content -}}
+            {{- $content | .Page.RenderString -}}
         </div>
     {{- end -}}
     {{- if eq $show_markup true -}}
@@ -36,7 +30,7 @@
             <small class="font-monospace text-body text-uppercase">{{- $lang -}}</small>
         </div>
         <div class="rounded-bottom syntax-highlight border-none">
-            {{- highlight (trim $input "\r\n") $lang "" -}}
+            {{- highlight (trim $content "\r\n") $lang "" -}}
         </div>
     {{- end -}}
 </div>

layouts/shortcodes/img.html

@@ -9,35 +9,32 @@
     "caption":      Optional carousel slide caption.
 -->
 
-{{- $src := .Get "src" -}}
-{{ $caption := .Get "caption" -}}
-{{- $ratio := "" -}}
-{{ with .Parent -}}
-    {{ with .Get "ratio" }}{{ $ratio = . }}{{ end -}}
+{{ if not .Parent }}
+    {{ errorf "The img shortcode should be contained within a carousel shortcode: %s" .Position }}
 {{ else }}
-    {{ with .Get "ratio" }}{{ $ratio = . }}{{ end -}}
-{{ end -}}
-{{- $portrait := false -}}
-{{ with .Parent -}}
-    {{ with .Get "portrait" }}{{ $portrait = . }}{{ end -}}
-{{ else }}
-    {{ with .Get "portrait" }}{{ $portrait = . }}{{ end -}}
-{{ end -}}
+    {{- $src := .Get "src" -}}
+    {{- if $src -}}
+        {{- $caption := .Get "caption" -}}
+        {{- $ratio := partial "utilities/GetArg" (dict "page" . "arg" "ratio") -}}
+        {{- $portrait := partial "utilities/GetArg" (dict "page" . "arg" "portrait") | default false -}}
+        {{- $active := eq .Ordinal 0 -}}
+        {{- $output := partial "assets/carousel-item" (dict 
+            "page" .Page
+            "active" $active
+            "src" $src
+            "caption" $caption
+            "ratio" $ratio
+            "portrait" $portrait                
+        ) }}
 
-{{- if $src -}}
-    <div class="carousel-item {{ if eq .Ordinal 0 }}active{{ end }}">
-        {{ partial "assets/image.html" (dict "url" $src "ratio" $ratio "page" .Page "innerClass" "d-block w-100" "portrait" $portrait) }}
-        <div class="carousel-caption gradient"></div>
-        {{ with $caption }}
-            <div class="carousel-caption d-none d-md-block">
-                <div class="d-flex justify-content-center align-items-end h-100 w-100 p-4">{{ . }}</div>
-            </div>
+        {{ $current := .Parent.Scratch.Get "inner" }}
+        {{ if $current }}
+            {{ .Parent.Scratch.Set "inner" (print $current $output) }}
+        {{ else }}
+            {{ .Parent.Scratch.Set "inner" $output }}
         {{ end }}
-    </div>
-{{ else -}}
-    {{ with .Parent -}}
-        {{ errorf "Missing value for param 'src': %s" .Position -}}
+    
     {{ else -}}
-        {{ errorf "Missing value for param 'src': %s" .Position -}}
+        {{ errorf "Missing value for param 'src': %s" .Parent.Position -}}
     {{ end -}}
 {{ end -}}

layouts/shortcodes/nav-item.html

@@ -5,50 +5,66 @@
     "show"          Optional flag to indicate an item should be shown.
 -->
 
-{{- $id := .Ordinal -}}
-{{- $parent := printf "nav-%d" .Parent.Ordinal -}}
-{{- with (.Parent.Get "id") -}}
-    {{- $parent = . -}}
-{{- end -}}
+{{ $current := "" }}
+{{ $error := false -}}
 
-{{- $fade := false -}}
-{{- if eq (.Parent.Get "fade") "true" -}}
-    {{- $fade = true -}}
-{{- end -}}
-
-{{- $header := .Get "header" -}}
-{{- if not $header -}}
-    {{- if .Parent -}}
-        {{- errorf "Missing value for param 'header': %s" .Parent.Position -}}
-    {{- else -}}
-        {{- errorf "Missing value for param 'header': %s" .Position -}}
+{{ if not .Parent }}
+    {{ errorf "The nav-item shortcode should be contained within a nav shortcode: %s" .Position }}
+{{ else }}
+    {{- $id := .Ordinal -}}
+    {{- $parent := printf "nav-%d" .Parent.Ordinal -}}
+    {{- with (.Parent.Get "id") -}}
+        {{- $parent = . -}}
     {{- end -}}
-{{- end -}}
 
-{{- $class := .Get "class" -}}
-{{- $body := trim .Inner " \r\n" -}}
+    {{- $fade := false -}}
+    {{- if eq (.Parent.Get "fade") "true" -}}
+        {{- $fade = true -}}
+    {{- 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 -}}
+    {{- $header := .Get "header" -}}
+    {{- if not $header -}}
+        {{- errorf "Missing value for param 'header': %s" .Parent.Position -}}
+    {{- end -}}
 
-{{- $disabledParam := "false" -}}
-{{- $disabled := false -}}
-{{- with .Get "disabled" }}{{ $disabledParam = . }}{{ end -}}
-{{- if in $supportedFlags $disabledParam -}}
-    {{- if eq $disabledParam "true" }}{{ $disabled = true }}{{ else }}{{ $disabled = false }}{{ end -}}
-{{- else -}}
-    {{- errorf "Invalid value for param 'disabled': %s" $disabledParam -}}
-{{- end -}}
+    {{- $class := .Get "class" -}}
+    {{- $body := trim .Inner " \r\n" | .Page.RenderString -}}
 
-<div class="tab-pane{{ if $show }} active {{ if $fade}}show{{ end }}{{ end }} {{ if $fade}}fade{{ end }}" id="{{ $parent }}-{{ $id }}" 
-    role="tabpanel" aria-labelledby="{{ $parent }}-btn-{{ $id }}" tabindex="0" data-header="{{ $header }}" {{ if $show }}data-show-id="{{ $id }}"{{ end }} 
-    data-has-content="{{ gt (len $body) 0 }}" {{ if $disabled }} data-disabled-id="{{ $id }}"{{ end }}>
-    {{ $body | .Page.RenderString | safeHTML }}
-</div>
+    {{- $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 -}}
+
+    {{- $disabledParam := "false" -}}
+    {{- $disabled := false -}}
+    {{- with .Get "disabled" }}{{ $disabledParam = . }}{{ end -}}
+    {{- if in $supportedFlags $disabledParam -}}
+        {{- if eq $disabledParam "true" }}{{ $disabled = true }}{{ else }}{{ $disabled = false }}{{ end -}}
+    {{- else -}}
+        {{- errorf "Invalid value for param 'disabled': %s" $disabledParam -}}
+    {{- end -}}
+
+    {{ $output := partial "assets/nav-item" (dict 
+        "id" $id
+        "parentID" $parent
+        "fade" $fade
+        "header" $header
+        "class" $class
+        "body" $body
+        "show" $show
+        "disabled" $disabled
+        )
+    }}
+
+    {{ $current := .Parent.Scratch.Get "inner" }}
+    {{ if $current }}
+        {{ .Parent.Scratch.Set "inner" (print $current $output) }}
+    {{ else }}
+        {{ .Parent.Scratch.Set "inner" $output }}
+    {{ end }}
+{{ end }}

layouts/shortcodes/nav.html

@@ -41,7 +41,13 @@
     {{- errorf "Tabs do not support vertical layout" -}}
 {{- end -}}
 
-{{- $inner := .Inner -}}
+{{ $inner := .Scratch.Get "inner" }}
+{{ $input := trim .Inner " \r\n" }}
+{{ if $input }}
+    {{ $input = replace $input "\n" "\n  " }}
+    {{ warnf "Unexpected inner content: %s\r\n      %s" .Position $input }}
+{{ end }}
+
 {{- $items := findRE "data-header=\"(.+?)\"" $inner -}}
 {{- $showVal := findRE "data-show-id=\"(.+?)\"" $inner -}}
 {{- $showID := -1 -}}
@@ -71,7 +77,7 @@
 
 {{- if $hasContent -}}
     <div class="tab-content {{ if eq $type "tabs" }}border border-top-0 p-3{{ else if $vertical }}ms-3{{ else }}mt-3{{ end }}">
-        {{- $inner -}}
+        {{- $inner | safeHTML -}}
     </div>
 {{- end -}}
 {{ if $vertical }}</div>{{ end }}

layouts/shortcodes/spinner.html

@@ -29,6 +29,6 @@
 
 {{ with $class }}<div class="{{ . }}">{{ end }}
     <div class="spinner-{{ if $grow }}grow{{ else }}border{{ end }} text-{{ $color }}" role="status">
-        <span class="visually-hidden">{{ trim .Inner " \r\n" -}}</span>
+        <span class="visually-hidden">{{ trim .Inner " \r\n" | plainify -}}</span>
     </div>
 {{ if $class }}</div>{{ end }}

layouts/shortcodes/toast.html

@@ -9,7 +9,7 @@
 {{- $id := printf "toast-message-%d" .Ordinal -}}
 {{- with .Get "id" }}{{ $id = . }}{{ end -}}
 {{ $header := .Get "header" -}}
-{{ $message := trim .Inner " \r\n" -}}
+{{ $message := trim .Inner " \r\n" | .Page.RenderString -}}
 
 {{- $class := .Get "class" -}}
 

layouts/shortcodes/tooltip.html

@@ -2,7 +2,7 @@
     Displays a tooltip for a link. The shortcode supports the following arguments:
     "color":        Optional theme color of the element, either "primary" (default), "secondary", "success",
                     "danger", "warning", "info", "light", or "dark".
-    "title"         Required text to display in the tooltip.
+    "title"         Required plain 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.
@@ -11,7 +11,7 @@
 {{ $error := false }}
 {{ $type := "link" -}}
 
-{{ $title := trim .Inner " \r\n" -}}
+{{ $title := trim .Inner " \r\n" | plainify -}}
 {{ if not $title -}}
     {{ errorf "Missing inner element text: %s" .Position -}}
     {{ $error = true }}
@@ -44,5 +44,7 @@
 {{- $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 "class" $class) -}}</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.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.18.6",
+  "version": "0.19.0-alpha",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",
@@ -17,43 +17,43 @@
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "prestart":             "npm run -s mod:vendor",
-    "start":                "hugo server --bind=0.0.0.0 --disableFastRender --printI18nWarnings",
-    "start:example":        "npm run -s prestart && hugo server --bind=0.0.0.0 --disableFastRender --printI18nWarnings -s exampleSite",
-    "start:prod":           "npm run -s prestart  && hugo server --bind=0.0.0.0 --disableFastRender --printI18nWarnings -e production",
-    "prebuild":             "npm run clean:public && npm run -s mod:vendor",
-    "build":                "hugo --gc --minify",
-    "build:cache":          "npm run -s prebuild && hugo config | grep cachedir && hugo --gc --minify -e ci",
-    "build:example":        "npm run -s prebuild && hugo --gc --minify -s exampleSite",
-    "build:example:ci":     "npm run -s prebuild && hugo --gc --minify -s exampleSite -e ci",
-    "build:debug":          "hugo -e debug --debug",
-    "build:preview":        "npm run build -D -F",
-    "clean:public":         "rimraf public exampleSite/public",
-    "clean:install":        "rimraf package-lock.json node_modules",
-    "lint":                 "npm-run-all lint:**",
-    "lint:scripts":         "eslint assets/js --no-error-on-unmatched-pattern",
-    "lint:styles":          "stylelint \"assets/scss/**/*.{css,sass,scss,sss,less}\" --allow-empty-input",
-    "lint:markdown":        "markdownlint-cli2 \"*.md\" \"content/**/*.md\" \"exampleSite/**/*.md\"",
-    "mod:clean":            "hugo mod clean",
-    "mod:update":           "rimraf _vendor && hugo mod get -u ./... && hugo mod get -u && npm run -s mod:vendor && npm run -s mod:tidy",
-    "mod:tidy":             "hugo mod tidy && hugo mod tidy -s exampleSite",
-    "mod:vendor":           "rimraf _vendor && hugo mod vendor",
-    "test":                 "npm run -s lint",
-    "env":                  "hugo env",
-    "precheck":             "npm version",
-    "check":                "hugo version",
-    "create:syntax":        "npm-run-all update:syntax:**",
+    "prestart": "npm run -s mod:vendor",
+    "start": "hugo server --bind=0.0.0.0 --disableFastRender --printI18nWarnings",
+    "start:example": "npm run -s prestart && hugo server --bind=0.0.0.0 --disableFastRender --printI18nWarnings -s exampleSite",
+    "start:prod": "npm run -s prestart  && hugo server --bind=0.0.0.0 --disableFastRender --printI18nWarnings -e production",
+    "prebuild": "npm run clean:public && npm run -s mod:vendor",
+    "build": "hugo --gc --minify",
+    "build:cache": "npm run -s prebuild && hugo config | grep cachedir && hugo --gc --minify -e ci",
+    "build:example": "npm run -s prebuild && hugo --gc --minify -s exampleSite",
+    "build:example:ci": "npm run -s prebuild && hugo --gc --minify -s exampleSite -e ci",
+    "build:debug": "hugo -e debug --debug",
+    "build:preview": "npm run build -D -F",
+    "clean:public": "rimraf public exampleSite/public",
+    "clean:install": "rimraf package-lock.json node_modules",
+    "lint": "npm-run-all lint:**",
+    "lint:scripts": "eslint assets/js --no-error-on-unmatched-pattern",
+    "lint:styles": "stylelint \"assets/scss/**/*.{css,sass,scss,sss,less}\" --allow-empty-input",
+    "lint:markdown": "markdownlint-cli2 \"*.md\" \"content/**/*.md\" \"exampleSite/**/*.md\"",
+    "mod:clean": "hugo mod clean",
+    "mod:update": "rimraf _vendor && hugo mod get -u ./... && hugo mod get -u && npm run -s mod:vendor && npm run -s mod:tidy",
+    "mod:tidy": "hugo mod tidy && hugo mod tidy -s exampleSite",
+    "mod:vendor": "rimraf _vendor && hugo mod vendor",
+    "test": "npm run -s lint",
+    "env": "hugo env",
+    "precheck": "npm version",
+    "check": "hugo version",
+    "create:syntax": "npm-run-all update:syntax:**",
     "update:syntax:light1": "hugo gen chromastyles --style=github > ./assets/scss/components/_syntax-light.scss",
     "update:syntax:light2": "replace-in-files --string=\"#0086b3\" --replacement=\"#006b8f\" ./assets/scss/components/_syntax-light.scss",
     "update:syntax:light3": "replace-in-files --string=\"#009999\" --replacement=\"#007a7a\" ./assets/scss/components/_syntax-light.scss",
     "update:syntax:light4": "replace-in-files --string=\"#999988\" --replacement=\"#6d6d5d\" ./assets/scss/components/_syntax-light.scss",
-    "update:syntax:dark1":  "hugo gen chromastyles --style=github-dark > ./assets/scss/components/_syntax-dark.scss",
-    "update:syntax:dark2":  "replace-in-files --string=\"#ffffcc\" --replacement=\"#373700\" ./assets/scss/components/_syntax-dark.scss",
-    "update:syntax:dark3":  "replace-in-files --string=\"#8b949e\" --replacement=\"#979fa8\" ./assets/scss/components/_syntax-dark.scss",
-    "update:syntax:dark4":  "replace-in-files --string=\".na {  }\" --replacement=\".na { color: #00cccc }\" ./assets/scss/components/_syntax-dark.scss",
-    "update:syntax:dark5":  "replace-in-files --string=\".nb {  }\" --replacement=\".nb { color: #00a2d8 }\" ./assets/scss/components/_syntax-dark.scss",
-    "update:syntax:dark6":  "replace-in-files --string=\"#6e7681\" --replacement=\"#999fa8\" ./assets/scss/components/_syntax-dark.scss",
-    "upgrade":              "npx npm-check-updates -u && npm run -s mod:update"
+    "update:syntax:dark1": "hugo gen chromastyles --style=github-dark > ./assets/scss/components/_syntax-dark.scss",
+    "update:syntax:dark2": "replace-in-files --string=\"#ffffcc\" --replacement=\"#373700\" ./assets/scss/components/_syntax-dark.scss",
+    "update:syntax:dark3": "replace-in-files --string=\"#8b949e\" --replacement=\"#979fa8\" ./assets/scss/components/_syntax-dark.scss",
+    "update:syntax:dark4": "replace-in-files --string=\".na {  }\" --replacement=\".na { color: #00cccc }\" ./assets/scss/components/_syntax-dark.scss",
+    "update:syntax:dark5": "replace-in-files --string=\".nb {  }\" --replacement=\".nb { color: #00a2d8 }\" ./assets/scss/components/_syntax-dark.scss",
+    "update:syntax:dark6": "replace-in-files --string=\"#6e7681\" --replacement=\"#999fa8\" ./assets/scss/components/_syntax-dark.scss",
+    "upgrade": "npx npm-check-updates -u && npm run -s mod:update"
   },
   "repository": {
     "type": "git",
@@ -86,6 +86,9 @@
     "stylelint": "^15.10.3",
     "stylelint-config-standard-scss": "^10.0.0"
   },
+  "optionalDependencies": {
+    "fsevents": "*"
+  },
   "hugo-bin": {
     "buildTags": "extended"
   }