Merge pull request #84 from markdumay/develop

Develop

.markdownlint-cli2.jsonc

@@ -5,7 +5,8 @@
     "MD024": false,
     "MD026": false,
     "MD033": false,
-    "MD034": false
+    "MD034": false,
+    "MD053": false
   },
   "ignores": ["node_modules", "CHANGELOG.md"]
 }

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/code-highlighting.md

@@ -30,9 +30,9 @@ Use code fencing to highlight the syntax of a specific language.
 </div>
 ```
 
-## Highlight Partial
+## Highlight Shortcode
 
-Use the `highlight` partial to customize the layout of a specific code block.
+Use the `highlight` shortcode to customize the layout of a specific code block.
 
 {{< highlight go "linenos=table,hl_lines=8 15-17,linenostart=199" >}}
 // GetTitleFunc returns a func that can be used to transform a string to
@@ -56,129 +56,3 @@ func GetTitleFunc(style string) func(s string) string {
   }
 }
 {{< / highlight >}}
-
-## Command Prompt Shortcode
-
-The `command` shortcode generates terminal output for either `bash`, `powershell`, or `sql` shell languages.
-
-### Bash (default shell)
-
-Use the `command` shortcode to generate a block with a default bash command prompt.
-
-```html
-{{%/* command */%}}
-export MY_VAR=123
-{{%/* /command */%}}
-```
-
-The result looks like this:
-{{% command %}}
-export MY_VAR=123
-{{% /command %}}
-
-Specify `user` and `host` to add the user context to the prompt. In addition, use `(out)` to specify an output line and use `\` to denote a line continuation.
-
-```html
-{{%/* command user="user" host="localhost" */%}}
-export MY_VAR=123
-echo "hello"
-(out)hello
-echo one \
-two \
-three
-(out)one two three
-echo "goodbye"
-(out)goodbye
-{{%/* /command */%}}
-```
-
-The result looks like this:
-{{% command user="user" host="localhost" %}}
-export MY_VAR=123
-echo "hello"
-(out)hello
-echo one \
-two \
-three
-(out)one two three
-echo "goodbye"
-(out)goodbye
-{{% /command %}}
-
-### PowerShell
-
-Set the `shell` argument to `powershell` to generate a PowerShell terminal. Override the `prompt` to add a directory if needed. Use the backtick `` ` `` symbol to denote a line continuation.
-
-```html
-{{%/* command prompt="PS C:\Users\User>" shell="powershell" */%}}
-Write-Host `
-'Hello' `
-'from' `
-'PowerShell!'
-(out)Hello from PowerShell!
-Write-Host 'Goodbye from PowerShell!'
-(out)Goodbye from PowerShell!
-{{%/* /command */%}}
-```
-
-The result looks like this:
-{{% command prompt="PS C:\Users\User>" shell="powershell" %}}
-Write-Host `
-'Hello' `
-'from' `
-'PowerShell!'
-(out)Hello from PowerShell!
-Write-Host 'Goodbye from PowerShell!'
-(out)Goodbye from PowerShell!
-{{% /command %}}
-
-### SQL
-
-Set the `shell` argument to `sql` to generate a SQL terminal. Use the `(con)` suffix to denote a line continuation.
-
-```html
-{{%/* command prompt="mysql>" shell="sql" */%}}
-set @my_var = 'foo';
-set @my_other_var = 'bar';
-CREATE TABLE people ((con)
-first_name VARCHAR(30) NOT NULL,(con)
-last_name VARCHAR(30) NOT NULL(con)
-);
-(out)Query OK, 0 rows affected (0.09 sec)
-insert into people(con)
-values ('John', 'Doe');
-(out)Query OK, 1 row affected (0.02 sec)
-select *(con)
-from people(con)
-order by last_name;
-(out)+------------+-----------+
-(out)| first_name | last_name |
-(out)+------------+-----------+
-(out)| John       | Doe       |
-(out)+------------+-----------+
-(out)1 row in set (0.00 sec)
-{{%/* /command */%}}
-```
-
-The result looks like this:
-{{% command prompt="mysql>" shell="sql" %}}
-set @my_var = 'foo';
-set @my_other_var = 'bar';
-CREATE TABLE people ((con)
-first_name VARCHAR(30) NOT NULL,(con)
-last_name VARCHAR(30) NOT NULL(con)
-);
-(out)Query OK, 0 rows affected (0.09 sec)
-insert into people(con)
-values ('John', 'Doe');
-(out)Query OK, 1 row affected (0.02 sec)
-select *(con)
-from people(con)
-order by last_name;
-(out)+------------+-----------+
-(out)| first_name | last_name |
-(out)+------------+-----------+
-(out)| John       | Doe       |
-(out)+------------+-----------+
-(out)1 row in set (0.00 sec)
-{{% /command %}}

content/en/blog/custom-shortcodes.md

@@ -0,0 +1,206 @@
+---
+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 >}}
+
+## Command Prompt Shortcode
+
+The `command` shortcode generates terminal output for either `bash`, `powershell`, or `sql` shell languages. The shortcode supports the following arguments:
+
+| Argument  | Required | Description |
+|-----------|----------|-------------|
+| user      | No | Optional user to add to the prompt, e.g. "user". |
+| host      | No | Optional host to add to the prompt, e.g. "localhost". |
+| prompt    | No | Optional prompt override, e.g. "PS C:\Users\User>". |
+| shell     | No | Type of shell, either "bash" (default), "powershell", or "sql". |
+{.table}
+
+### Bash (default shell)
+
+Use the `command` shortcode to generate a block with a default bash command prompt.
+
+```html
+{{%/* command */%}}
+export MY_VAR=123
+{{%/* /command */%}}
+```
+
+The result looks like this:
+{{% command %}}
+export MY_VAR=123
+{{% /command %}}
+
+Specify `user` and `host` to add the user context to the prompt. In addition, use `(out)` to specify an output line and use `\` to denote a line continuation.
+
+```html
+{{%/* command user="user" host="localhost" */%}}
+export MY_VAR=123
+echo "hello"
+(out)hello
+echo one \
+two \
+three
+(out)one two three
+echo "goodbye"
+(out)goodbye
+{{%/* /command */%}}
+```
+
+The result looks like this:
+{{% command user="user" host="localhost" %}}
+export MY_VAR=123
+echo "hello"
+(out)hello
+echo one \
+two \
+three
+(out)one two three
+echo "goodbye"
+(out)goodbye
+{{% /command %}}
+
+### PowerShell
+
+Set the `shell` argument to `powershell` to generate a PowerShell terminal. Override the `prompt` to add a directory if needed. Use the backtick `` ` `` symbol to denote a line continuation.
+
+```html
+{{%/* command prompt="PS C:\Users\User>" shell="powershell" */%}}
+Write-Host `
+'Hello' `
+'from' `
+'PowerShell!'
+(out)Hello from PowerShell!
+Write-Host 'Goodbye from PowerShell!'
+(out)Goodbye from PowerShell!
+{{%/* /command */%}}
+```
+
+The result looks like this:
+{{% command prompt="PS C:\Users\User>" shell="powershell" %}}
+Write-Host `
+'Hello' `
+'from' `
+'PowerShell!'
+(out)Hello from PowerShell!
+Write-Host 'Goodbye from PowerShell!'
+(out)Goodbye from PowerShell!
+{{% /command %}}
+
+### SQL
+
+Set the `shell` argument to `sql` to generate a SQL terminal. Use the `(con)` suffix to denote a line continuation.
+
+```html
+{{%/* command prompt="mysql>" shell="sql" */%}}
+set @my_var = 'foo';
+set @my_other_var = 'bar';
+CREATE TABLE people ((con)
+first_name VARCHAR(30) NOT NULL,(con)
+last_name VARCHAR(30) NOT NULL(con)
+);
+(out)Query OK, 0 rows affected (0.09 sec)
+insert into people(con)
+values ('John', 'Doe');
+(out)Query OK, 1 row affected (0.02 sec)
+select *(con)
+from people(con)
+order by last_name;
+(out)+------------+-----------+
+(out)| first_name | last_name |
+(out)+------------+-----------+
+(out)| John       | Doe       |
+(out)+------------+-----------+
+(out)1 row in set (0.00 sec)
+{{%/* /command */%}}
+```
+
+The result looks like this:
+{{% command prompt="mysql>" shell="sql" %}}
+set @my_var = 'foo';
+set @my_other_var = 'bar';
+CREATE TABLE people ((con)
+first_name VARCHAR(30) NOT NULL,(con)
+last_name VARCHAR(30) NOT NULL(con)
+);
+(out)Query OK, 0 rows affected (0.09 sec)
+insert into people(con)
+values ('John', 'Doe');
+(out)Query OK, 1 row affected (0.02 sec)
+select *(con)
+from people(con)
+order by last_name;
+(out)+------------+-----------+
+(out)| first_name | last_name |
+(out)+------------+-----------+
+(out)| John       | Doe       |
+(out)+------------+-----------+
+(out)1 row in set (0.00 sec)
+{{% /command %}}
+
+## 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`). The images are processed using the quality setting specified in the `[imaging]` section of the main [config file][hugo_imaging] (defaults to 75). Supported image types are `.png`, `.jpeg`, `.gif`, `.tiff`, `.bmp`, and `.webp`. A fallback image of type `.jpeg` is provided for older browsers.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  | Optional aspect ratio of the image, either "1x1", "4x3", "16x9", or "21x9". If set, the image is resized and cropped to match the ratio. Else the original aspect ratio of the image is kept. |
+| 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">}}
+
+[mozilla_image]: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
+[hugo_imaging]: https://gohugo.io/content-management/image-processing/#imaging-configuration

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/en/blog/rich-content.md

@@ -3,7 +3,7 @@ author: "Hugo Authors"
 title: "Rich Content"
 date: 2021-07-13
 description: "A brief description of Hugo Shortcodes"
-tags: ["shortcodes", "privacy"]
+tags: ["shortcode", "privacy"]
 thumbnail: img/flowers.jpg # https://picsum.photos/id/106/2592/1728
 photoCredits: <a href="https://unsplash.com/@flutterhappy">Arvee Marie</a>
 photoSource: <a href="https://unsplash.com/photos/YnfGtpt2gf4">Unsplash</a>

content/nl/blog/code-highlighting.md

@@ -32,9 +32,9 @@ Gebruik code fencing om de syntax voor een specifieke taal te markeren.
 </div>
 ```
 
-## Highlight Partial
+## Highlight Shortcode
 
-Gebruik de `highlight` partial om de lay-out van een taalfragment aan te passen.
+Gebruik de `highlight` shortcode om de lay-out van een taalfragment aan te passen.
 
 {{< highlight go "linenos=table,hl_lines=8 15-17,linenostart=199" >}}
 // GetTitleFunc returns a func that can be used to transform a string to
@@ -58,129 +58,3 @@ func GetTitleFunc(style string) func(s string) string {
   }
 }
 {{< / highlight >}}
-
-## Command Prompt Shortcode
-
-De `command` shortcode simuleert een terminal voor `bash`, `powershell` of `sql` shell talen.
-
-### Bash (standaard shell)
-
-Gebruik de `command` shortcode om een bash terminal te simuleren.
-
-```html
-{{%/* command */%}}
-export MY_VAR=123
-{{%/* /command */%}}
-```
-
-Het resultaat ziet er als volgt uit:
-{{% command %}}
-export MY_VAR=123
-{{% /command %}}
-
-Gebruik `user` en `host` om de gebruikerscontext mee te geven aan de prompt. Maak daarnaast gebruik van `(out)` om output aan te geven, met `\` als markering van een bijbehorende regel.
-
-```html
-{{%/* command user="user" host="localhost" */%}}
-export MY_VAR=123
-echo "hello"
-(out)hello
-echo one \
-two \
-three
-(out)one two three
-echo "goodbye"
-(out)goodbye
-{{%/* /command */%}}
-```
-
-Het resultaat ziet er als volgt uit:
-{{% command user="user" host="localhost" %}}
-export MY_VAR=123
-echo "hello"
-(out)hello
-echo one \
-two \
-three
-(out)one two three
-echo "goodbye"
-(out)goodbye
-{{% /command %}}
-
-### PowerShell
-
-Geef `powershell` op als waarde voor het argument `shell` om een PowerShell terminal te simuleren. Je kunt `prompt` aanpassen om een eventule directory aan te geven. Het backtick `` ` `` symbool geeft aan dat het commando doorgaat op de volgende regel.
-
-```html
-{{%/* command prompt="PS C:\Users\User>" shell="powershell" */%}}
-Write-Host `
-'Hello' `
-'from' `
-'PowerShell!'
-(out)Hello from PowerShell!
-Write-Host 'Goodbye from PowerShell!'
-(out)Goodbye from PowerShell!
-{{%/* /command */%}}
-```
-
-Het resultaat ziet er als volgt uit:
-{{% command prompt="PS C:\Users\User>" shell="powershell" %}}
-Write-Host `
-'Hello' `
-'from' `
-'PowerShell!'
-(out)Hello from PowerShell!
-Write-Host 'Goodbye from PowerShell!'
-(out)Goodbye from PowerShell!
-{{% /command %}}
-
-### SQL
-
-Geef `sql` op als waarde voor het argument `shell` om een SQL terminal te simuleren. Gebruik `\` als markering van een bijbehorende regel.
-
-```html
-{{%/* command prompt="mysql>" shell="sql" */%}}
-set @my_var = 'foo';
-set @my_other_var = 'bar';
-CREATE TABLE people ((con)
-first_name VARCHAR(30) NOT NULL,(con)
-last_name VARCHAR(30) NOT NULL(con)
-);
-(out)Query OK, 0 rows affected (0.09 sec)
-insert into people(con)
-values ('John', 'Doe');
-(out)Query OK, 1 row affected (0.02 sec)
-select *(con)
-from people(con)
-order by last_name;
-(out)+------------+-----------+
-(out)| first_name | last_name |
-(out)+------------+-----------+
-(out)| John       | Doe       |
-(out)+------------+-----------+
-(out)1 row in set (0.00 sec)
-{{%/* /command */%}}
-```
-
-Het resultaat ziet er als volgt uit:
-{{% command prompt="mysql>" shell="sql" %}}
-set @my_var = 'foo';
-set @my_other_var = 'bar';
-CREATE TABLE people ((con)
-first_name VARCHAR(30) NOT NULL,(con)
-last_name VARCHAR(30) NOT NULL(con)
-);
-(out)Query OK, 0 rows affected (0.09 sec)
-insert into people(con)
-values ('John', 'Doe');
-(out)Query OK, 1 row affected (0.02 sec)
-select *(con)
-from people(con)
-order by last_name;
-(out)+------------+-----------+
-(out)| first_name | last_name |
-(out)+------------+-----------+
-(out)| John       | Doe       |
-(out)+------------+-----------+
-(out)1 row in set (0.00 sec)
-{{% /command %}}

content/nl/blog/custom-shortcodes.md

@@ -0,0 +1,207 @@
+---
+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 >}}
+
+## Command Prompt Shortcode
+
+De `command` shortcode simuleert een terminal voor `bash`, `powershell` of `sql` shell talen. De shortcode ondersteunt de volgende parameters:
+
+| Parameter | Verplicht | Toelichting |
+|-----------|----------|-------------|
+| user      | Nee | Optionele gebruiker om toe te voegen aan de prompt, bijvoorbeeld "user". |
+| host      | Nee | Optionele omgeving om toe te voegen aan de prompt, bijvoorbeeld "localhost". |
+| prompt    | Nee | Optionele vervanging van de prompt, bijvoorbeeld "PS C:\Users\User>". |
+| shell     | Nee | Type shell, met ondersteuning voor "bash" (standaard), "powershell", of "sql". |
+{.table}
+
+### Bash (standaard shell)
+
+Gebruik de `command` shortcode om een bash terminal te simuleren.
+
+```html
+{{%/* command */%}}
+export MY_VAR=123
+{{%/* /command */%}}
+```
+
+Het resultaat ziet er als volgt uit:
+{{% command %}}
+export MY_VAR=123
+{{% /command %}}
+
+Gebruik `user` en `host` om de gebruikerscontext mee te geven aan de prompt. Maak daarnaast gebruik van `(out)` om output aan te geven, met `\` als markering van een bijbehorende regel.
+
+```html
+{{%/* command user="user" host="localhost" */%}}
+export MY_VAR=123
+echo "hello"
+(out)hello
+echo one \
+two \
+three
+(out)one two three
+echo "goodbye"
+(out)goodbye
+{{%/* /command */%}}
+```
+
+Het resultaat ziet er als volgt uit:
+{{% command user="user" host="localhost" %}}
+export MY_VAR=123
+echo "hello"
+(out)hello
+echo one \
+two \
+three
+(out)one two three
+echo "goodbye"
+(out)goodbye
+{{% /command %}}
+
+### PowerShell
+
+Geef `powershell` op als waarde voor het argument `shell` om een PowerShell terminal te simuleren. Je kunt `prompt` aanpassen om een eventule directory aan te geven. Het backtick `` ` `` symbool geeft aan dat het commando doorgaat op de volgende regel.
+
+```html
+{{%/* command prompt="PS C:\Users\User>" shell="powershell" */%}}
+Write-Host `
+'Hello' `
+'from' `
+'PowerShell!'
+(out)Hello from PowerShell!
+Write-Host 'Goodbye from PowerShell!'
+(out)Goodbye from PowerShell!
+{{%/* /command */%}}
+```
+
+Het resultaat ziet er als volgt uit:
+{{% command prompt="PS C:\Users\User>" shell="powershell" %}}
+Write-Host `
+'Hello' `
+'from' `
+'PowerShell!'
+(out)Hello from PowerShell!
+Write-Host 'Goodbye from PowerShell!'
+(out)Goodbye from PowerShell!
+{{% /command %}}
+
+### SQL
+
+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" */%}}
+set @my_var = 'foo';
+set @my_other_var = 'bar';
+CREATE TABLE people ((con)
+first_name VARCHAR(30) NOT NULL,(con)
+last_name VARCHAR(30) NOT NULL(con)
+);
+(out)Query OK, 0 rows affected (0.09 sec)
+insert into people(con)
+values ('John', 'Doe');
+(out)Query OK, 1 row affected (0.02 sec)
+select *(con)
+from people(con)
+order by last_name;
+(out)+------------+-----------+
+(out)| first_name | last_name |
+(out)+------------+-----------+
+(out)| John       | Doe       |
+(out)+------------+-----------+
+(out)1 row in set (0.00 sec)
+{{%/* /command */%}}
+```
+
+Het resultaat ziet er als volgt uit:
+{{% command prompt="mysql>" shell="sql" %}}
+set @my_var = 'foo';
+set @my_other_var = 'bar';
+CREATE TABLE people ((con)
+first_name VARCHAR(30) NOT NULL,(con)
+last_name VARCHAR(30) NOT NULL(con)
+);
+(out)Query OK, 0 rows affected (0.09 sec)
+insert into people(con)
+values ('John', 'Doe');
+(out)Query OK, 1 row affected (0.02 sec)
+select *(con)
+from people(con)
+order by last_name;
+(out)+------------+-----------+
+(out)| first_name | last_name |
+(out)+------------+-----------+
+(out)| John       | Doe       |
+(out)+------------+-----------+
+(out)1 row in set (0.00 sec)
+{{% /command %}}
+
+## 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 kwaliteit van het plaatje kan worden opgegeven in de sectie `[imaging]` van de site [configuratie][hugo_imaging] (75 is de standaardwaarde). De geschikte bestandsformaten zijn `.png`, `.jpeg`, `.gif`, `.tiff`, `.bmp` en `.webp`. Een plaatje in het formaat `.jpeg` is beschikbaar voor oudere browsers. 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", "16x9", en "21x9". Indien opgegeven wordt het plaatje bijgesneden en verkleind om te voldoen aan de ratio. Als de verhouding niet is opgegeven dan wordt de verhouding van het originele bestand gebruikt. |
+| 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">}}
+
+[mozilla_image]: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
+[hugo_imaging]: https://gohugo.io/content-management/image-processing/#imaging-configuration

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**.

content/nl/blog/rich-content.md

@@ -4,7 +4,7 @@ slug: "multimedia"
 title: "Multimedia"
 date: 2021-07-13
 description: "Een overzicht van enkele Hugo Shortcodes"
-tags: ["shortcodes", "privacy"]
+tags: ["shortcode", "privacy"]
 thumbnail: img/flowers.jpg # https://picsum.photos/id/106/2592/1728
 photoCredits: <a href="https://unsplash.com/@flutterhappy">Arvee Marie</a>
 photoSource: <a href="https://unsplash.com/photos/YnfGtpt2gf4">Unsplash</a>

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 -}}
+                {{ range (.GetTerms "tags") -}}
-                    <a class="btn btn-light btn-sm" href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}" role="button">{{ . }}</a>    
+                    <a class="btn btn-light btn-sm" href="{{ (path.Join .Page.RelPermalink) | relURL }}" role="button">{{ .LinkTitle }}</a>    
                 {{ end -}}
 
                 <h1>{{ .Title }}</h1>

layouts/partials/assets/blog-card.html

@@ -10,8 +10,8 @@
                 {{- partial "utilities/date.html" (dict "date" .Date "format" "long") -}}
                 • {{ .ReadingTime }} {{ i18n "minutesShort" }} {{ i18n "read" }}
                 {{ if isset .Params "tags" -}}
-                    {{ range first 1 .Params.tags -}}
+                    {{ range first 1 (.GetTerms "tags") -}}
-                        &bull; <a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}" class="text-decoration-none text-primary" aria-label="Tag: {{ . }}">{{ . }}</a>
+                        &bull; <a href="{{ (path.Join .Page.RelPermalink) | relURL }}" class="text-decoration-none text-primary" aria-label="Tag: {{ .LinkTitle }}">{{ .LinkTitle }}</a>
                     {{ end -}}
                 {{ end -}}
             </small>

layouts/partials/assets/project-card.html

@@ -9,9 +9,9 @@
             
                 {{ if isset .Params "tags" }}
                     <small class="text-muted text-uppercase">
-                        {{ range $index, $element := .Params.tags }}
+                        {{ range $index, $element := (.GetTerms "tags") }}
                             {{ if gt $index 0 }}&bull; {{ end }}
-                            <a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}" class="text-decoration-none text-primary" aria-label="Tag: {{ . }}">{{ . }}</a>
+                            <a href="{{ (path.Join .Page.RelPermalink) | relURL }}" class="text-decoration-none text-primary" aria-label="Tag: {{ .LinkTitle }}">{{ .LinkTitle }}</a>
                         {{ end }}
                     </small>
                 {{ end }}            

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

@@ -5,30 +5,38 @@
     wrapped in a figure if a caption is provided, else the image is wrapped in a div with a ratio constraint. The
     partial supports the following arguments:
     "url":          Required relative url of the image, e.g. "img/example.jpg"
-    "ratio":        Bootstrap ratio of the image, either "1x1", "4x3" (default), "16x9", or "21x9".
+    "ratio":        Optional ratio of the image, either "1x1", "4x3", "16x9", or "21x9". If set, the image is
+                    resized and cropped to match the ratio. Else the original aspect ratio of the image is kept.
     "outerClass":   Optional class attribute of the outer div element, e.g. "img-wrap".
     "innerClass":   Optional class attribute of the inner img element, e.g. "rounded".
     "title":        Optional alternate text of the image.
     "caption":      Optional figure caption.
 -->
 
-{{ $url := .url -}}
+
+{{- $validRatios := slice "1x1" "4x3" "16x9" "21x9" }}
 {{ $ratio := .ratio -}}
+{{ $url := .url -}}
 {{ $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 := "" -}}
-    {{ $smDim := "576x432" -}}
+    {{ $mdDim := "" -}}
-    {{ $mdDim := "768x576" -}}
+    {{ $lgDim := "" -}}
-    {{ $lgDim := "992x744" -}}
+    {{ $xlDim := "" -}}
-    {{ $xlDim := "1200x900" -}}
+    {{ $xxlDim := "" -}}
-    {{ $xxlDim := "1400x1050" -}}
+    {{ if eq $ratio "4x3" -}}
-
+        {{ $smDim = "576x432" -}}
-    {{ if eq $ratio "1x1" -}}
+        {{ $mdDim = "768x576" -}}
+        {{ $lgDim = "992x744" -}}
+        {{ $xlDim = "1200x900" -}}
+        {{ $xxlDim = "1400x1050" -}}
+    {{ else if eq $ratio "1x1" -}}
         {{ $smDim = "576x576" -}}
         {{ $mdDim = "768x768" -}}
         {{ $lgDim = "992x992" -}}
@@ -46,16 +54,37 @@
         {{ $lgDim = "992x425" -}}
         {{ $xlDim = "1200x514" -}}
         {{ $xxlDim = "1400x600" -}}
+    {{ else }}
+        {{ $smDim = printf "576x%d" (int (math.Round (mul (div 576.0 $img.Width) $img.Height))) -}}
+        {{ $mdDim = printf "768x%d" (int (math.Round (mul (div 768.0 $img.Width) $img.Height))) -}}
+        {{ $lgDim = printf "992x%d" (int (math.Round (mul (div 992.0 $img.Width) $img.Height))) -}}
+        {{ $xlDim = printf "1200x%d" (int (math.Round (mul (div 1200.0 $img.Width) $img.Height))) -}}
+        {{ $xxlDim = printf "1400x%d" (int (math.Round (mul (div 1400.0 $img.Width) $img.Height))) -}}
     {{ end -}}
 
-    {{ $sm := ($img.Fill (printf "%s webp" $smDim)) -}}
+    {{- $sm := "" -}}
-    {{ $md := ($img.Fill (printf "%s webp" $mdDim)) -}}
+    {{ $md := "" -}}
-    {{ $lg := ($img.Fill (printf "%s webp" $lgDim)) -}}
+    {{ $lg := "" -}}
-    {{ $xl := ($img.Fill (printf "%s webp" $xlDim)) -}}
+    {{ $xl := "" -}}
-    {{ $xxl := ($img.Fill (printf "%s webp" $xxlDim)) -}}
+    {{ $xxl := "" -}}
-    {{ $fallback := ($img.Fill (printf "%s jpg" $xxlDim)) -}}
+    {{ $fallback := "" -}}
+    {{ if $ratio }}
+        {{- $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)) -}}
+    {{ else }}
+        {{- $sm = ($img.Fit (printf "%s webp" $smDim)) -}}
+        {{ $md = ($img.Fit (printf "%s webp" $mdDim)) -}}
+        {{ $lg = ($img.Fit (printf "%s webp" $lgDim)) -}}
+        {{ $xl = ($img.Fit (printf "%s webp" $xlDim)) -}}
+        {{ $xxl = ($img.Fit (printf "%s webp" $xxlDim)) -}}
+        {{ $fallback = ($img.Fit (printf "%s jpg" $xxlDim)) -}}
+    {{ end}}
 
-    {{ with $caption -}}
+    {{- with $caption -}}
         <figure class="figure">
             <img class="figure-img img-fluid {{ $innerClass }}"
                 srcset="
@@ -68,9 +97,10 @@
                 src="{{ $fallback.RelPermalink }}"
                 alt="{{ $title }}">
             <figcaption class="figure-caption">{{ . | safeHTML }}</figcaption>
+            {{ $inner }}
         </figure>
-    {{ else -}}
+    {{- else -}}
-        <div class="ratio ratio-{{ $ratio }} {{ $outerClass }}">
+        <div class="{{ with $ratio }}ratio ratio-{{ . }}{{ end }} {{ $outerClass }}">
             <img class="img-fluid {{ $innerClass }}"
                 srcset="
                     {{- with $xxl.RelPermalink -}}{{.}} 1400w{{- end -}}
@@ -81,6 +111,7 @@
                 sizes="100vw"
                 src="{{ $fallback.RelPermalink }}"
                 alt="{{ $title }}">
+            {{ $inner }}
         </div>
-    {{ end -}}
+    {{- end -}}
-{{ end -}}
+{{- end -}}

layouts/shortcodes/carousel.html

@@ -0,0 +1,33 @@
+<!-- 
+    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":        Optional ratio of the image, either "1x1", "4x3", "16x9", or "21x9". Other values are ignored.
+                    Instead, the original aspect ratio of the image is preserved.
+-->
+
+{{ $ratio := "" -}}
+{{ $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/image.html

@@ -4,21 +4,28 @@
     section of the main config file (defaults to 75). A fallback image is provided for older browsers. The partial
     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".
+    "ratio":        Optional ratio of the image, either "1x1", "4x3", "16x9", or "21x9". Leave empty to keep the
+                    original aspect ratio of the image.
     "class":        Optional class attribute of the inner img element, e.g. "rounded".
     "title":        Optional alternate text of the image.
     "caption":      Optional figure caption.
 -->
 
-{{ if isset .Params "src" }}
+{{- if isset .Params "src" -}}
-    {{ $url := .Get "src" }}
+    {{ $url := .Get "src" -}}
-    {{ $ratio := "4x3" }}
+    {{- $validRatios := slice "1x1" "4x3" "16x9" "21x9" -}}
-    {{ with .Get "ratio" }}{{ $ratio = . }}{{ end }}
+    {{ $ratio := .Get "ratio" -}}
-    {{ $class := .Get "class" }}
+    {{ if $ratio -}}
-    {{ $title := .Get "title" }}
+        {{ if not (in $validRatios $ratio) -}}
-    {{ $caption := .Get "caption" }}
+            {{ errorf "Invalid value for param 'ratio': %s" .Position -}}
+        {{ end -}}
+    {{ end -}}
+    
+    {{- $class := .Get "class" -}}
+    {{ $title := .Get "title" -}}
+    {{ $caption := .Get "caption" -}}
 
-    {{ partial "image.html" (dict "url" $url "ratio" $ratio "innerClass" $class "title" $title "caption" $caption) -}}    
+    {{- partial "image.html" (dict "url" $url "ratio" $ratio "innerClass" $class "title" $title "caption" $caption) -}} 
-{{ else }}
+{{ else -}}
-    {{ errorf "Missing value for param 'src': %s" .Position }}
+    {{ errorf "Missing value for param 'src': %s" .Position -}}
-{{ end }}
+{{ end -}}

layouts/shortcodes/img.html

@@ -0,0 +1,34 @@
+<!-- 
+    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":        Optional ratio of the image, either "1x1", "4x3", "16x9", or "21x9". Other values are ignored.
+                    Instead, the original aspect ratio of the image is preserved.
+    "caption":      Optional carousel slide caption.
+-->
+
+{{- $src := .Get "src" -}}
+{{ $caption := .Get "caption" -}}
+{{- $ratio := "" -}}
+{{ 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.6",
   "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>