Merge pull request #78 from markdumay/develop

Dependencies

assets/scss/app.scss

@@ -1,5 +1,8 @@
 // Define template variables 
-$themeColor: {{ site.Params.style.themeColor | default "#007bff" }};
+$themeColor:                    {{ site.Params.style.themeColor | default "#007bff" }};
+$carousel-control-prev-icon-bg: url("/img/carousel_prev.svg") !default;
+$carousel-control-next-icon-bg: url("/img/carousel_next.svg") !default;
+
 
 // Import Bootstrap functions
 @import "bootstrap/scss/functions";
@@ -61,6 +64,7 @@ $themeColor: {{ site.Params.style.themeColor | default "#007bff" }};
 @import "components/blockquote.scss";
 @import "components/buttons.scss";
 @import "components/card.scss";
+@import "components/carousel.scss";
 @import "components/clipboard.scss";
 @import "components/command.scss";
 @import "components/comments.scss";

assets/scss/components/_carousel.scss

@@ -0,0 +1,8 @@
+.gradient {
+    width: 100%;
+    height: 100%;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.3);
+}

config/_default/config.toml

@@ -12,6 +12,7 @@ enableInlineShortcodes = true
 # See https://github.com/gohugoio/hugo/issues/7228#issuecomment-714490456
 ignoreErrors = ["error-remote-getjson"]
 enableEmoji = true
+timeout = "60s"
 
 # Multilingual
 defaultContentLanguage = "en"

content/en/blog/custom-shortcodes.md

@@ -0,0 +1,72 @@
+---
+author: "Mark Dumay"
+title: "Custom Shortcodes"
+date: 2022-12-05
+description: "Available shortcodes using Bootstrap components and styling"
+tags: ["bootstrap", "shortcode"]
+thumbnail: img/boots.jpg
+photoCredits: <a href="https://unsplash.com/@nate_dumlao">Nathan Dumlao</a>
+photoSource: <a href="https://unsplash.com/photos/QLPWQvHvmII">Unsplash</a>
+---
+
+Bootstrap is an open-source web development framework originally created by Twitter. It uses a responsive, mobile-first approach that scales seamlessly across different screen sizes. Bootstrap includes an extensive collection of ready-to-use components, such as navigation bars, pagination controls, buttons, and much more. The Hinode theme exposes several of those components as Hugo shortcodes to simplify their usage within markdown content. The below paragraphs illustrate the available shortcodes and how to use them.
+
+## Carousel Shortcode
+
+Use the `carousel` shortcode to display a carousel of several images, with behavior similar as the [Image Shortcode](#image-shortcode). The shortcode supports the following arguments:
+
+| Argument  | Required | Description |
+|-----------|----------|-------------|
+| ratio     | No  | Aspect ratio of the image, either "1x1", "4x3" (default), "16x9", or "21x9". |
+| class     | No  | Optional class attribute of the `carousel` element, e.g. "w-75". |
+{.table}
+
+Add an inner `img` element for each slide of the carousel. The `img` element supports the following arguments:
+
+| Argument  | Required | Description |
+|-----------|----------|-------------|
+| src       | Yes | Required url of the image, e.g. "img/boots.jpg" or "https://picsum.photos/id/27/3264/1836". |
+| caption   | No  | Optional image caption. If set, the image is darkened to improve the contrast. The caption is hidden on smaller screens. |
+{.table}
+
+As an example, the following shortcode displays a centered carousel with three slides, 16x9 aspect ratio, and a relative width of 67% on large screens.
+
+```html
+{{</* carousel ratio="16x9" class="col-sm-12 col-lg-8 mx-auto" */>}}
+  {{</* img src="img/coffee.jpg" caption="slide 1" */>}}
+  {{</* img src="img/phone.jpg" caption="slide 2" */>}}
+  {{</* img src="img/dunes.jpg" caption="slide 3" */>}}
+{{</* /carousel */>}}
+```
+
+The result looks like this:
+{{< carousel ratio="16x9" class="col-sm-12 col-lg-8 mx-auto" >}}
+  {{< img src="img/coffee.jpg" caption="slide 1" >}}
+  {{< img src="img/phone.jpg" caption="slide 2" >}}
+  {{< img src="img/dunes.jpg" caption="slide 3" >}}
+{{< /carousel >}}
+
+## Image Shortcode
+
+Use the `image` shortcode to display a responsive image with a specific aspect ratio. The source link can refer to either an image available in the `/assets/img` folder of your site or a public web location. The shortcode renders the image as a so-called [image set][mozilla_image] to optimize the image for different screen sizes and resolutions. Behind the scenes, Hugo renders the images in `WebP` format and stores them in a local folder (`resources` or `public`). Supported image types are `.png`, `.jpeg`, `.gif`, `.tiff`, `.bmp`, and `.webp`. The shortcode supports the following arguments:
+
+| Argument  | Required | Description |
+|-----------|----------|-------------|
+| src       | Yes | Required url of the image, e.g. "img/boots.jpg" or "https://picsum.photos/id/27/3264/1836". |
+| ratio     | No  | Aspect ratio of the image, either "1x1", "4x3" (default), "16x9", or "21x9". |
+| class     | No  | Optional class attribute of the inner `img` element, e.g. "rounded". |
+| title     | No  | Optional alternate text of the image. |
+| caption   | No  | Optional figure caption. |
+{.table}
+
+As an example, the following shortcode displays an image with rounded corners and a 21x9 aspect ratio.
+
+```html
+{{</* image src="img/flowers.jpg" ratio="21x9" caption="Figure caption" class="rounded" */>}}
+```
+
+The result looks like this:
+{{< image src="img/flowers.jpg" ratio="21x9" caption="Figure caption" class="rounded">}}
+
+<!-- MARKDOWN MAINTAINED LINKS -->
+[mozilla_image]: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

content/en/blog/placeholder-text.md

@@ -1,41 +0,0 @@
----
-author: "Hugo Authors"
-title: "Placeholder Text"
-date: 2021-07-13
-description: "Lorem Ipsum Dolor Si Amet"
-tags: ["markdown", "text"]
-thumbnail: img/city.jpg # https://picsum.photos/id/1067/5760/3840
-photoCredits: <a href="https://unsplash.com/@kevinjyoung">Kevin Young</a>
-photoSource: <a href="https://unsplash.com/photos/-icmOdYWXuQ">Unsplash</a>
----
-
-Lorem est tota propiore conpellat pectoribus de pectora summo. <!--more-->Redit teque digerit hominumque toris verebor lumina non cervice subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.
-
-{{< image src="img/flowers.jpg" ratio="21x9" caption="Figure caption" class="rounded">}}
-
-1. Exierant elisi ambit vivere dedere
-2. Duce pollice
-3. Eris modo
-4. Spargitque ferrea quos palude
-
-Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria tractus malis.
-
-1. Comas hunc haec pietate fetum procerum dixit
-2. Post torum vates letum Tiresia
-3. Flumen querellas
-4. Arcanaque montibus omnes
-5. Quidem et
-
-## Vagus elidunt
-
-<svg xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="373" width="496"><g fill="none"><path stroke="#000" stroke-width=".75" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width=".75" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"></ellipse></g></svg>
-
-[The Van de Graaf Canon](https://en.wikipedia.org/wiki/Canons_of_page_construction#Van_de_Graaf_canon)
-
-## Mane refeci capiebant unda mulcebat
-
-Victa caducifer, malo vulnere contra dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. **Faces illo pepulere** tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.
-
-Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae vulnus haerentia iuste et exercebat, sui et.
-
-Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel **mitis temploque** vocatus, inque alis, _oculos nomen_ non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem Propoetides **parte**.

content/nl/blog/code-highlighting.md

@@ -136,7 +136,7 @@ Write-Host 'Goodbye from PowerShell!'
 
 ### SQL
 
-Geef `sql` op als waarde voor het argument `shell` om een SQL terminal te simuleren. Gebruik `\` als markering van een bijbehorende regel.
+Geef `sql` op als waarde voor het argument `shell` om een SQL terminal te simuleren. Gebruik `(con)` als markering van een bijbehorende regel.
 
 ```html
 {{%/* command prompt="mysql>" shell="sql" */%}}

content/nl/blog/custom-shortcodes.md

@@ -0,0 +1,73 @@
+---
+author: "Mark Dumay"
+title: "Extra shortcodes"
+date: 2022-12-05
+description: "Beschikbare shortcodes die gebruik maken van Bootstrap componenten en vormgeving"
+tags: ["bootstrap", "shortcode"]
+thumbnail: img/boots.jpg
+photoCredits: <a href="https://unsplash.com/@nate_dumlao">Nathan Dumlao</a>
+photoSource: <a href="https://unsplash.com/photos/QLPWQvHvmII">Unsplash</a>
+---
+
+
+Bootstrap is een open-source raamwerk voor het ontwikkelen van websites gemaakt door Twitter. Het volgt een aanpak die geschikt is voor meerdere schermformaten, inclusief mobiele apparaten. Bootstrap bevat een uitgebreide collectie van direct bruikbare componenten, zoals navigatiemenu's, paginering, knoppen, en nog veel meer. Om het gebruik hiervan in markdown pagina's te vergemakkelijken, stelt het Hinode thema enkele van deze componenten beschikbaar als Hugo shortcode. De onderstaande paragrafen bieden een overzicht en uitleg van de beschikbare shortcodes.
+
+## Carousel Shortcode
+
+Gebruik de `carousel` shortcode om een carousel van meerdere plaatjes te tonen, analoog aan de [Image Shortcode](#image-shortcode). De shortcode ondersteunt de volgende parameters:
+
+| Parameter | Verplicht | Toelichting |
+|-----------|-----------|-------------|
+| ratio     | Nee       | Verhouding van het plaatje, de mogelijke waarden zijn "1x1", "4x3" (standaard), "16x9", en "21x9". |
+| class     | Nee       | Optionele `class` waarde van het `carousel` element, bijvoorbeeld "w-75". |
+{.table}
+
+Voeg een `img` element toe voor elke pagina van de carousel. Het `img` element ondersteunt de volgende parameters:
+
+| Parameter | Verplicht | Toelichting |
+|-----------|-----------|-------------|
+| src       | Ja        | Verplichte url van het plaatje, bijvoorbeeld "img/boots.jpg" of "https://picsum.photos/id/27/3264/1836". |
+| caption   | Nee       | Optionele beschrijving van het plaatje. Het plaatje wordt iets donkerder gemaakt om het contrast te verhogen. Op kleinere schermen wordt de beschrijving weggelaten. |
+{.table}
+
+Ter illustratie toont de volgende shortcode een carousel met drie pagina's in een verhouding van 16x9 en een relatieve breedte van 67% voor grote schermen.
+
+```html
+{{</* carousel ratio="16x9" class="col-sm-12 col-lg-8 mx-auto" */>}}
+  {{</* img src="img/coffee.jpg" caption="slide 1" */>}}
+  {{</* img src="img/phone.jpg" caption="slide 2" */>}}
+  {{</* img src="img/dunes.jpg" caption="slide 3" */>}}
+{{</* /carousel */>}}
+```
+
+Het resultaat ziet er als volgt uit:
+{{< carousel ratio="16x9" class="col-sm-12 col-lg-8 mx-auto" >}}
+  {{< img src="img/coffee.jpg" caption="slide 1" >}}
+  {{< img src="img/phone.jpg" caption="slide 2" >}}
+  {{< img src="img/dunes.jpg" caption="slide 3" >}}
+{{< /carousel >}}
+
+## Image Shortcode
+
+Gebruik de `image` shortcode om een adaptief plaatje met een specifieke verhouding te tonen. De bron kan verwijzen naar een bestand in de `/assets/img` folder van je website of naar een publieke weblocatie. De shortcode genereert het plaatje als een zogenaamde [image set][mozilla_image] om deze te optimaliseren voor meerdere schermformaten en verschillende resoluties. Achter de schermen converteert Hugo de plaatjes naar een `WebP` bestandsformaat en slaat deze op in een lokale folder (`resources` of `public`). De geschikte bestandsformaten zijn `.png`, `.jpeg`, `.gif`, `.tiff`, `.bmp` en `.webp`. De shortcode ondersteunt de volgende parameters:
+
+| Parameter | Verplicht | Toelichting |
+|-----------|----------|-------------|
+| src       | Ja  | Verplichte url van het plaatje, bijvoorbeeld "img/boots.jpg" of "https://picsum.photos/id/27/3264/1836". |
+| ratio     | Nee | Verhouding van het plaatje, de mogelijke waarden zijn "1x1", "4x3" (standaard), "16x9", en "21x9". |
+| class     | Nee | Optionele `class` waarde van het `img` element, bijvoorbeeld "rounded". |
+| title     | Nee | Optionele beschrijving van het plaatje. |
+| caption   | Nee | Optioneel onderschrift van het plaatje. |
+{.table}
+
+Ter illustratie toont de volgende shortcode een plaatje met afgeronde hoeken en een verhouding van 21x9.
+
+```html
+{{</* image src="img/flowers.jpg" ratio="21x9" caption="Onderschrift" class="rounded" */>}}
+```
+
+Het resultaat ziet er als volgt uit:
+{{< image src="img/flowers.jpg" ratio="21x9" caption="Onderschrift" class="rounded">}}
+
+<!-- MARKDOWN MAINTAINED LINKS -->
+[mozilla_image]: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

content/nl/blog/placeholder-text.md

@@ -1,42 +0,0 @@
----
-author: "Hugo Authors"
-slug: "placeholder-tekst"
-title: "Placeholder tekst"
-date: 2021-07-13
-description: "Lorem Ipsum Dolor Si Amet"
-tags: ["markdown", "text"]
-thumbnail: img/city.jpg # https://picsum.photos/id/1067/5760/3840
-photoCredits: <a href="https://unsplash.com/@kevinjyoung">Kevin Young</a>
-photoSource: <a href="https://unsplash.com/photos/-icmOdYWXuQ">Unsplash</a>
----
-
-Lorem est tota propiore conpellat pectoribus de pectora summo. <!--more-->Redit teque digerit hominumque toris verebor lumina non cervice subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.
-
-{{< image src="img/flowers.jpg" ratio="21x9" caption="Figure caption" class="rounded">}}
-
-1. Exierant elisi ambit vivere dedere
-2. Duce pollice
-3. Eris modo
-4. Spargitque ferrea quos palude
-
-Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria tractus malis.
-
-1. Comas hunc haec pietate fetum procerum dixit
-2. Post torum vates letum Tiresia
-3. Flumen querellas
-4. Arcanaque montibus omnes
-5. Quidem et
-
-## Vagus elidunt
-
-<svg xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="373" width="496"><g fill="none"><path stroke="#000" stroke-width=".75" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width=".75" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"></ellipse></g></svg>
-
-[De Van de Graaf Canon](https://en.wikipedia.org/wiki/Canons_of_page_construction#Van_de_Graaf_canon)
-
-## Mane refeci capiebant unda mulcebat
-
-Victa caducifer, malo vulnere contra dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. **Faces illo pepulere** tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.
-
-Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae vulnus haerentia iuste et exercebat, sui et.
-
-Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel **mitis temploque** vocatus, inque alis, _oculos nomen_ non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem Propoetides **parte**.

i18n/en.yaml

@@ -88,7 +88,7 @@
 
 # Table of contents
 - id: toc
-  translation: "What's on this Page"
+  translation: "On this page"
 
 # Search
 - id: ui_search

i18n/nl.yaml

@@ -2,7 +2,7 @@
 - id: postedOnDate
   translation: "Gepubliceerd op {{ . }}"
 - id: lastModified
-  translation: "(Laats gewijzigd op {{ . }})"
+  translation: "(Laatst gewijzigd op {{ . }})"
 - id: translationsLabel
   translation: "Overige talen: "
 - id: translationsSeparator

layouts/_default/single.html

@@ -6,8 +6,8 @@
         <div class="row row-cols-1 row-cols-sm-3 align-items-center p-3">
             <div class="col col-md-2 d-none d-md-block"></div>
             <div class="col col-sm-12 col-md-8">
-                {{ range .Params.tags -}}
-                    <a class="btn btn-light btn-sm" href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}" role="button">{{ . }}</a>    
+                {{ range (.GetTerms "tags") -}}
+                    <a class="btn btn-light btn-sm" href="{{ (path.Join .Page.RelPermalink) | relURL }}" role="button">{{ .LinkTitle }}</a>    
                 {{ end -}}
 
                 <h1>{{ .Title }}</h1>

layouts/partials/assets/toc.html

@@ -1,7 +1,7 @@
 {{ $items := len (findRE "<li.*?>(.|\n)*?</li>" .TableOfContents) -}}
 {{ if (gt $items 1) -}}
     <div class="mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted sticky-top toc d-none d-lg-block">
-        <strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
+        <strong class="d-block h6 my-2 pb-2 border-bottom">{{ T "toc" }}</strong>
         {{ .TableOfContents }}
     </div>
 {{ end -}}

layouts/partials/image.html

@@ -12,14 +12,15 @@
     "caption":      Optional figure caption.
 -->
 
-{{ $url := .url -}}
+{{- $url := .url -}}
 {{ $ratio := .ratio -}}
 {{ $outerClass := .outerClass -}}
 {{ $innerClass := .innerClass -}}
 {{ $title := .title -}}
 {{ $caption := .caption -}}
+{{ $inner := .inner -}}
 
-{{ $img := partial "utilities/GetImage.html" (dict "url" $url) -}}
+{{- $img := partial "utilities/GetImage.html" (dict "url" $url) -}}
 {{ with $img -}}
     <!-- default ratio 4x3 -->
     {{ $smDim := "576x432" -}}
@@ -48,14 +49,14 @@
         {{ $xxlDim = "1400x600" -}}
     {{ end -}}
 
-    {{ $sm := ($img.Fill (printf "%s webp" $smDim)) -}}
+    {{- $sm := ($img.Fill (printf "%s webp" $smDim)) -}}
     {{ $md := ($img.Fill (printf "%s webp" $mdDim)) -}}
     {{ $lg := ($img.Fill (printf "%s webp" $lgDim)) -}}
     {{ $xl := ($img.Fill (printf "%s webp" $xlDim)) -}}
     {{ $xxl := ($img.Fill (printf "%s webp" $xxlDim)) -}}
     {{ $fallback := ($img.Fill (printf "%s jpg" $xxlDim)) -}}
 
-    {{ with $caption -}}
+    {{- with $caption -}}
         <figure class="figure">
             <img class="figure-img img-fluid {{ $innerClass }}"
                 srcset="
@@ -68,8 +69,9 @@
                 src="{{ $fallback.RelPermalink }}"
                 alt="{{ $title }}">
             <figcaption class="figure-caption">{{ . | safeHTML }}</figcaption>
+            {{ $inner }}
         </figure>
-    {{ else -}}
+    {{- else -}}
         <div class="ratio ratio-{{ $ratio }} {{ $outerClass }}">
             <img class="img-fluid {{ $innerClass }}"
                 srcset="
@@ -81,6 +83,7 @@
                 sizes="100vw"
                 src="{{ $fallback.RelPermalink }}"
                 alt="{{ $title }}">
+            {{ $inner }}
         </div>
-    {{ end -}}
-{{ end -}}
+    {{- end -}}
+{{- end -}}

layouts/shortcodes/carousel.html

@@ -0,0 +1,32 @@
+<!-- 
+    Displays a carousel of several responsive images (see the image shortcode for more details). Add inner <img> 
+    elements to define individual image slides. The shortcode supports the following arguments:
+    "ratio":        Bootstrap ratio of the image, either "1x1", "4x3" (default), "16x9", or "21x9".
+-->
+
+{{ $ratio := "4x3" -}}
+{{ $class := "" -}}
+{{ with .Get "ratio" }}{{ $ratio = . }}{{ end -}}
+{{ with .Get "class" }}{{ $class = . }}{{ end -}}
+{{ $id := .Ordinal -}}
+{{ $images :=  .Inner -}}
+{{ $items := len (findRE "carousel-item" $images) -}}
+
+<div id="carousel-{{ $id }}" class="carousel slide {{ $class }}" data-bs-ride="true">
+    <div class="carousel-indicators">
+        {{ range $index := (seq $items) -}}
+            <button type="button" data-bs-target="#carousel-{{ $id }}" data-bs-slide-to="{{ sub $index 1 }}" {{ if eq $index 1 }}class="active"{{ end }} aria-current="true" aria-label="Slide {{ $index }}"></button>
+        {{ end -}}
+    </div>
+    <div class="carousel-inner">
+        {{ $images }}
+    </div>
+    <button class="carousel-control-prev" type="button" data-bs-target="#carousel-{{ $id }}" data-bs-slide="prev">
+        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+        <span class="visually-hidden">Previous</span>
+    </button>
+    <button class="carousel-control-next" type="button" data-bs-target="#carousel-{{ $id }}" data-bs-slide="next">
+        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+        <span class="visually-hidden">Next</span>
+    </button>
+</div>

layouts/shortcodes/img.html

@@ -0,0 +1,33 @@
+<!-- 
+    Renders a carousel item with a responsive image (see the image shortcode for more details). The shortcode
+    supports the following arguments:
+    "src":          Required relative url of the image, e.g. "img/example.jpg"
+    "ratio":        Bootstrap ratio of the image, either "1x1", "4x3" (default), "16x9", or "21x9".
+    "caption":      Optional carousel slide caption.
+-->
+
+{{- $src := .Get "src" -}}
+{{ $caption := .Get "caption" -}}
+{{- $ratio := "4x3" -}}
+{{ with .Parent -}}
+    {{ with .Get "ratio" }}{{ $ratio = . }}{{ end -}}
+{{ else }}
+    {{ with .Get "ratio" }}{{ $ratio = . }}{{ end -}}
+{{ end -}}
+
+{{- if $src -}}
+    <div class="carousel-item {{ if eq .Ordinal 0 }}active{{ end }}">
+        {{ partial "image.html" (dict "url" $src "ratio" $ratio "innerClass" "d-block w-100") }}
+        {{ with $caption }}
+            <div class="carousel-caption d-none d-md-block gradient">
+                <div class="d-flex justify-content-center align-items-end h-100 w-100 p-4">{{ . }}</div>
+            </div>
+        {{ end }}
+    </div>
+{{ else -}}
+    {{ with .Parent -}}
+        {{ errorf "Missing value for param 'src': %s" .Position -}}
+    {{ else -}}
+        {{ errorf "Missing value for param 'src': %s" .Position -}}
+    {{ end -}}
+{{ end -}}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdumay/hugo-theme-hinode",
-  "version": "0.6.0",
+  "version": "0.7.2",
   "description": "Hinode is a clean blog theme for Hugo, an open-source static site generator",
   "main": "index.js",
   "publishConfig": {
@@ -50,22 +50,22 @@
     "@fullhuman/postcss-purgecss": "^5.0.0",
     "autoprefixer": "^10.4.13",
     "bootstrap": "^5.2.3",
-    "eslint": "^8.28.0",
+    "eslint": "^8.29.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-n": "^15.5.1",
+    "eslint-plugin-n": "^15.6.0",
     "eslint-plugin-promise": "^6.1.1",
     "exec-bin": "^1.0.0",
     "flexsearch": "^0.7.31",
     "hugo-installer": "^4.0.1",
     "markdownlint-cli2": "^0.5.1",
-    "postcss-cli": "^10.0.0",
+    "postcss-cli": "^10.1.0",
     "purgecss-whitelister": "^2.4.0",
     "shx": "^0.3.4",
-    "stylelint": "^14.15.0",
+    "stylelint": "^14.16.0",
     "stylelint-config-standard-scss": "^6.1.0"
   },
   "otherDependencies": {
-    "hugo": "0.107.0"
+    "hugo": "0.108.0"
   }
 }

static/img/carousel_next.svg

@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>

static/img/carousel_prev.svg

@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>