Merge pull request #85 from markdumay/develop

Configurable font

.markdownlint-cli2.jsonc

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

README.md

@@ -110,7 +110,7 @@ The main site configuration is available in `./config/_default`. Some remarks:
 
 - **Menu items** - `menus/menus.en.toml` contains language-specific items for the navigation bar and social media links for the home page's footer.
 - **Content** - Ensure the `mainSections` in `config.toml` is synchronized with the `content` folder, default values are `["blog", "projects"]`.
-- **Theme color** - Update `themeColor` and `themeOpacity` within the `[style]` section of `params.toml` to update the site's primary color and opacity. You can use the [WCAG Color Contrast Checker][contrast_checker] to validate the contrast ratio of your color to improve accessibility.
+- **Theme style** - Update `themeColor` and `themeOpacity` within the `[style]` section of `params.toml` to update the site's primary color and opacity. You can use the [WCAG Color Contrast Checker][contrast_checker] to validate the contrast ratio of your color to improve accessibility. Additionally, set `themeFont` and `themeFontPath` to override the default font.
 - **Comments** - Comments are powered by [utterances][utterances], a lightweight comments widget built on GitHub issues. Update the `repo`  of the `[comments]` section of `params.toml`.
 - **Security policy** - The theme uses rather strict security policies by default. Be sure to include references to external sources in the header configuration to avoid broken links. The settings of the local development server are defined in `server.toml`. Similar settings are defined in the `netlify.toml` file provided in the repository's root when deploying to [Netlify][netlify].
 

assets/scss/app.scss

@@ -1,5 +1,6 @@
 // Define template variables 
 $themeColor:                    {{ site.Params.style.themeColor | default "#007bff" }};
+$themeFont:                     {{ site.Params.style.themeFont | default "Inter" }};
 $carousel-control-prev-icon-bg: url("/img/carousel_prev.svg") !default;
 $carousel-control-next-icon-bg: url("/img/carousel_next.svg") !default;
 

assets/scss/common/_variables.scss

@@ -8,7 +8,7 @@ $fa-font-path:                  "../fonts";
 // Remove the border from the focused navigation toggler
 $navbar-toggler-focus-width:    0 !default;
 
-$font-family-sans-serif:        "Inter", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-sans-serif:        $themeFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $headings-font-weight:          600 !default;
 $font-weight-lighter:           lighter !default;
 $font-weight-light:             200 !default;

config/_default/params.toml

@@ -46,6 +46,8 @@ schemaSection = "blog"
 [style]
     themeColor = "#D43900" #00b0f0
     themeOpacity = "10"
+    themeFont = "Inter"
+    themeFontPath = "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap"
 
 [main]
     featurePhoto = "/img/sunrise.jpg" # source: https://unsplash.com/photos/ZX6BPboJrYk

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

@@ -46,14 +46,148 @@ The result looks like this:
   {{< 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`). Supported image types are `.png`, `.jpeg`, `.gif`, `.tiff`, `.bmp`, and `.webp`. The shortcode supports the following arguments:
+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  | Aspect ratio of the image, either "1x1", "4x3" (default), "16x9", or "21x9". |
+| 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. |
@@ -68,5 +202,5 @@ As an example, the following shortcode displays an image with rounded corners an
 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
+[hugo_imaging]: https://gohugo.io/content-management/image-processing/#imaging-configuration

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 `(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 %}}

content/nl/blog/custom-shortcodes.md

@@ -47,14 +47,148 @@ Het resultaat ziet er als volgt uit:
   {{< 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 geschikte bestandsformaten zijn `.png`, `.jpeg`, `.gif`, `.tiff`, `.bmp` en `.webp`. De shortcode ondersteunt de volgende parameters:
+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" (standaard), "16x9", en "21x9". |
+| 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. |
@@ -69,5 +203,5 @@ Ter illustratie toont de volgende shortcode een plaatje met afgeronde hoeken en
 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
+[hugo_imaging]: https://gohugo.io/content-management/image-processing/#imaging-configuration

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>

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 -}}
-                        &bull; <a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}" class="text-decoration-none text-primary" aria-label="Tag: {{ . }}">{{ . }}</a>
+                    {{ range first 1 (.GetTerms "tags") -}}
+                        &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/head/stylesheet.html

@@ -8,4 +8,4 @@
 {{ end -}}
     <link rel="preconnect" href="https://fonts.googleapis.com"> 
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap">
+    <link rel="stylesheet" href="{{ site.Params.style.themeFontPath | default "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap" }}">

layouts/partials/image.html

@@ -5,15 +5,18 @@
     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 -}}
@@ -22,14 +25,18 @@
 
 {{- $img := partial "utilities/GetImage.html" (dict "url" $url) -}}
 {{ with $img -}}
-    <!-- default ratio 4x3 -->
-    {{ $smDim := "576x432" -}}
-    {{ $mdDim := "768x576" -}}
-    {{ $lgDim := "992x744" -}}
-    {{ $xlDim := "1200x900" -}}
-    {{ $xxlDim := "1400x1050" -}}
-
-    {{ if eq $ratio "1x1" -}}
+    {{ $smDim := "" -}}
+    {{ $mdDim := "" -}}
+    {{ $lgDim := "" -}}
+    {{ $xlDim := "" -}}
+    {{ $xxlDim := "" -}}
+    {{ if eq $ratio "4x3" -}}
+        {{ $smDim = "576x432" -}}
+        {{ $mdDim = "768x576" -}}
+        {{ $lgDim = "992x744" -}}
+        {{ $xlDim = "1200x900" -}}
+        {{ $xxlDim = "1400x1050" -}}
+    {{ else if eq $ratio "1x1" -}}
         {{ $smDim = "576x576" -}}
         {{ $mdDim = "768x768" -}}
         {{ $lgDim = "992x992" -}}
@@ -47,14 +54,35 @@
         {{ $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)) -}}
-    {{ $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)) -}}
+    {{- $sm := "" -}}
+    {{ $md := "" -}}
+    {{ $lg := "" -}}
+    {{ $xl := "" -}}
+    {{ $xxl := "" -}}
+    {{ $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 -}}
         <figure class="figure">
@@ -72,7 +100,7 @@
             {{ $inner }}
         </figure>
     {{- 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 -}}

layouts/shortcodes/carousel.html

@@ -1,10 +1,11 @@
 <!-- 
     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":        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 := "4x3" -}}
+{{ $ratio := "" -}}
 {{ $class := "" -}}
 {{ with .Get "ratio" }}{{ $ratio = . }}{{ end -}}
 {{ with .Get "class" }}{{ $class = . }}{{ end -}}

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" }}
-    {{ $url := .Get "src" }}
-    {{ $ratio := "4x3" }}
-    {{ with .Get "ratio" }}{{ $ratio = . }}{{ end }}
-    {{ $class := .Get "class" }}
-    {{ $title := .Get "title" }}
-    {{ $caption := .Get "caption" }}
+{{- if isset .Params "src" -}}
+    {{ $url := .Get "src" -}}
+    {{- $validRatios := slice "1x1" "4x3" "16x9" "21x9" -}}
+    {{ $ratio := .Get "ratio" -}}
+    {{ if $ratio -}}
+        {{ if not (in $validRatios $ratio) -}}
+            {{ 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) -}}    
-{{ else }}
-    {{ errorf "Missing value for param 'src': %s" .Position }}
-{{ end }}
+    {{- partial "image.html" (dict "url" $url "ratio" $ratio "innerClass" $class "title" $title "caption" $caption) -}} 
+{{ else -}}
+    {{ errorf "Missing value for param 'src': %s" .Position -}}
+{{ end -}}

layouts/shortcodes/img.html

@@ -2,13 +2,14 @@
     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".
+    "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 := "4x3" -}}
+{{- $ratio := "" -}}
 {{ with .Parent -}}
     {{ with .Get "ratio" }}{{ $ratio = . }}{{ end -}}
 {{ else }}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@markdumay/hugo-theme-hinode",
-  "version": "0.7.2",
+  "version": "0.7.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@markdumay/hugo-theme-hinode",
-      "version": "0.7.2",
+      "version": "0.7.7",
       "hasInstallScript": true,
       "license": "MIT",
       "devDependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdumay/hugo-theme-hinode",
-  "version": "0.7.2",
+  "version": "0.7.7",
   "description": "Hinode is a clean blog theme for Hugo, an open-source static site generator",
   "main": "index.js",
   "publishConfig": {