Merge pull request #473 from gethinode/develop

Add abbr shortcode

.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

@@ -23,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
@@ -58,4 +59,4 @@ jobs:
           go.mod
           go.sum
           **/go.mod
-          **/go.sum
+          **/go.sum

.github/workflows/npm-publish.yml

@@ -31,8 +31,9 @@ jobs:
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
   
-      - name: Perform clean install of npm
-        run: npm ci
+      # [27/AUG/23] Adjusted from npm ci to prevent EBADPLATFORM error due to fsevents
+      - name: Install npm
+        run: npm i
 
       - name: Publish package to npm
         run: npm publish

.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);
         }
     }

config/_default/hugo.toml

@@ -97,6 +97,9 @@ home = ["HTML", "RSS", "REDIR"]
   [[module.mounts]]
     source = "content"
     target = "content"
+  [[module.mounts]]
+    source = "data"
+    target = "data"
   [[module.mounts]]
     source = "i18n"
     target = "i18n"

data/abbr.yml

@@ -0,0 +1,8 @@
+- id: css
+  long: "Cascading Style Sheets"
+
+- id: html
+  long: "HyperText Markup Language"
+
+- id: svg
+  long: "Scalable Vector Graphics"

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

@@ -14,6 +14,16 @@ thumbnail:
 
 Hinode provides several shortcodes that wrap common Bootstrap components. Refer to the [official documentation]({{< param "links.hinode_docs" >}}) for more details.
 
+## Abbr
+
+As an example, the following shortcode displays the full text of an abbreviation on hover.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* abbr html */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Accordion
 
 As an example, the following shortcode displays an accordion with three elements, of which the first element is expanded.
@@ -22,7 +32,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 +59,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 +175,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 +261,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 +310,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.
@@ -316,11 +357,11 @@ Loading...
 
 ## Timeline
 
-As an example, the following shortcode displays a timeline with the file `data/timeline-en.yml` as data.
+As an example, the following shortcode displays a timeline with the file `data/timeline.en.yml` as data.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* timeline data="timeline-en" background="dark" */>}}
+{{</* timeline data="timeline" background="dark" */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
@@ -339,11 +380,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 +395,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

@@ -2,21 +2,18 @@
   "htmlElements": {
     "tags": [
       "a",
+      "abbr",
       "body",
       "br",
       "button",
       "code",
       "div",
+      "em",
       "figcaption",
       "figure",
       "footer",
       "form",
-      "h1",
       "h2",
-      "h3",
-      "h4",
-      "h5",
-      "h6",
       "head",
       "hr",
       "html",
@@ -69,7 +66,6 @@
       "bg-opacity-10",
       "bg-primary",
       "bg-primary-subtle",
-      "bg-secondary",
       "border",
       "border-0",
       "border-1",
@@ -218,6 +214,11 @@
       "gap-3",
       "gradient",
       "h-100",
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
       "h6",
       "heading",
       "highlight",
@@ -348,6 +349,7 @@
       "text-bg-body-tertiary",
       "text-bg-info",
       "text-bg-primary",
+      "text-bg-secondary",
       "text-bg-success",
       "text-bg-warning",
       "text-body",
@@ -402,6 +404,7 @@
       "-theme",
       "-theme-collapsed",
       "TableOfContents",
+      "abbr",
       "accordion",
       "accordion-0",
       "accordion-0-heading-0",

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/abbr.html

@@ -0,0 +1,64 @@
+<!-- 
+    Creates an HTML element that shows the long form of an abbrevitation. The abbreviation data is centrally stored in a
+    data file. By default, the shortcode uses "abbr.yaml" with translation support.
+    
+    The data file is expected to store key-value pairs, where "id" is the lower-case abbrevation and "long" its long
+    form. The following example illustrates this using YML:
+
+    - id: css
+      long: "Cascading Style Sheets"
+
+    The shortcode supports the following arguments:
+    "key"           Required case-insensitive key of the abbreviation. In shorthand notation, this is the first (and
+                    only) matched argument.
+    "data"          Optional filename of the abbrevation input. It defaults to "abbr.yaml" with translation support.
+                    You can omit the file extension. The file should reside in the "data" folder. The data supports
+                    language extensions. For example, "abbr.en.yaml" refers to the English translation of the
+                    abbrevation data. The filename "abbr.yaml" is used when no suitable translation is found.
+-->
+
+{{ $error := false }}
+
+{{ $key := "" }}
+{{- if .IsNamedParams }}{{ $key = .Get "key" }}{{ else }}{{ $key = .Get 0 }}{{ end }}
+
+{{ if not $key -}}
+    {{ errorf "Missing param 'key': %s" .Position -}}
+    {{ $error = true }}
+{{ end -}}
+
+{{- $data := .Get "data" | default "abbr" -}}
+{{ if not $data -}}
+    {{ errorf "Missing param 'data': %s" .Position -}}
+    {{ $error = true }}
+{{ end -}}
+
+{{ if not $error }}
+    {{/* Try language-specific file first */}}
+    {{ $path := path.Join (path.Dir $data) (printf "%s.%s" (path.BaseName $data) .Page.Language.Lang) (path.Ext $data) }}
+    {{ $entries := index site.Data $path }}
+    {{/* Use exact provided path as backup */}}
+    {{ if not $entries -}}
+        {{ $entries = index site.Data $data }}
+    {{ end }}
+    {{ if not $entries -}}
+        {{ errorf "Invalid abbrevation data '%s': %s" $data .Position -}}
+        {{ $error = true }}
+    {{ end -}}
+
+    {{ $title := "" }}
+    {{ if not $error }}
+        {{ $elements := (where $entries "id" (lower $key)) }}
+        {{ if gt (len $elements) 0 }}
+            {{ $title = index (index $elements 0) "long" }}
+        {{ end -}}
+        {{ if not $title -}}
+            {{ errorf "Cannot find value for '%s': %s" $key .Position -}}
+            {{ $error = true }}
+        {{ end -}}
+    {{ end }}
+
+    {{ if not $error }}
+        <abbr title="{{ $title }}">{{ $key }}</abbr>
+    {{ end }}
+{{ end }}

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/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/timeline.html

@@ -3,7 +3,9 @@
     
     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.
+                    the "data" folder. The data supports language extensions. For example, "timeline.en.yaml" refers to
+                    the English translation of the timeline data. The filename "timeline.yaml" is used when no suitable
+                    translation is found.
     "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.
@@ -17,7 +19,13 @@
     {{ $error = true }}
 {{ end -}}
 
-{{ $entries := index site.Data $data }}
+{{/* Try language-specific file first */}}
+{{ $path := path.Join (path.Dir $data) (printf "%s.%s" (path.BaseName $data) .Page.Language.Lang) (path.Ext $data) }}
+{{ $entries := index site.Data $path }}
+{{/* Use exact provided path as backup */}}
+{{ if not $entries -}}
+    {{ $entries = index site.Data $data }}
+{{ end }}
 {{ if not $entries -}}
     {{ errorf "Invalid timeline data '%s': %s" $data .Position -}}
     {{ $error = true }}

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-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.18.7",
+  "version": "0.19.0-alpha2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.18.7",
+      "version": "0.19.0-alpha2",
       "license": "MIT",
       "devDependencies": {
         "@fullhuman/postcss-purgecss": "^5.0.0",
@@ -18,7 +18,6 @@
         "eslint-plugin-import": "^2.28.1",
         "eslint-plugin-n": "^16.0.2",
         "eslint-plugin-promise": "^6.1.1",
-        "fsevents": "^2.3.3",
         "hugo-bin": "^0.113.0",
         "markdownlint-cli2": "^0.9.0",
         "npm-run-all": "^4.1.5",
@@ -29,6 +28,9 @@
         "shx": "^0.3.4",
         "stylelint": "^15.10.3",
         "stylelint-config-standard-scss": "^10.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "*"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -2676,8 +2678,8 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
+      "optional": true,
       "os": [
         "darwin"
       ],
@@ -14678,7 +14680,7 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true
+      "optional": true
     },
     "function-bind": {
       "version": "1.1.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.18.7",
+  "version": "0.19.0-alpha2",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",
@@ -87,7 +87,7 @@
     "stylelint-config-standard-scss": "^10.0.0"
   },
   "optionalDependencies": {
-    "fsevents": "^2.3.3"
+    "fsevents": "*"
   },
   "hugo-bin": {
     "buildTags": "extended"