feat: add custom img shortcode (#71)

.drone.yml

@@ -159,7 +159,7 @@ steps:
   image: node:lts-alpine
   commands:
   - npm install -g spellchecker-cli
-  - spellchecker --files 'exampleSite/content/**/*.md' 'README.md' -d .dictionary -p spell indefinite-article syntax-urls --no-suggestions
+  - spellchecker --files 'exampleSite/content/**/*.md' 'README.md' -d .dictionary -p spell indefinite-article syntax-urls frontmatter --no-suggestions
   environment:
     FORCE_COLOR: true
     NPM_CONFIG_LOGLEVEL: error
@@ -252,6 +252,6 @@ depends_on:
 
 ---
 kind: signature
-hmac: fae8f99db3daee8b04423ca2f8c9f1aa0547a1902fcf7f90a17f9e39fcc302a9
+hmac: e7f2792705cf2a50d0d2c3aca83d5b715c56d1199ae838d0e8cd9dc89e0da305
 
 ...

exampleSite/config.yaml

@@ -31,3 +31,5 @@ params:
 
   geekdocLegalNotice: https://thegeeklab.de/legal-notice/#contact-information
   geekdocPrivacyPolicy: https://thegeeklab.de/legal-notice/#privacy-policy
+
+  geekdocImageLazyLoading: true

exampleSite/content/shortcodes/images/_index.md

@@ -0,0 +1,145 @@
+---
+resources:
+  - name: forest-1
+    src: "forest-1.jpg"
+    title: Forest (1)
+    params:
+      credits: "[Jay Mantri](https://unsplash.com/@jaymantri) on [Unsplash](https://unsplash.com/s/photos/forest)"
+  - name: forest-2
+    src: "forest-2.jpg"
+    title: Forest (2)
+    params:
+      credits: "[Jay Mantri](https://unsplash.com/@jaymantri) on [Unsplash](https://unsplash.com/s/photos/forest)"
+  - name: forest-3
+    src: "forest-3.jpg"
+    title: Forest (3)
+    params:
+      credits: "[Jay Mantri](https://unsplash.com/@jaymantri) on [Unsplash](https://unsplash.com/s/photos/forest)"
+  - name: forest-4
+    src: "forest-4.jpg"
+    title: Forest (4)
+    params:
+      credits: "[Jay Mantri](https://unsplash.com/@jaymantri) on [Unsplash](https://unsplash.com/s/photos/forest)"
+  - name: forest-5
+    src: "forest-5.jpg"
+    title: Forest (5)
+    params:
+      credits: "[Jay Mantri](https://unsplash.com/@jaymantri) on [Unsplash](https://unsplash.com/s/photos/forest)"
+  - name: forest-6
+    src: "forest-6.jpg"
+    title: Forest (6)
+    params:
+      credits: "[Asher Ward](https://unsplash.com/@the_asher_ward) on [Unsplash](https://unsplash.com/s/photos/forest)"
+  - name: forest-7
+    src: "forest-7.jpg"
+    title: Forest (7)
+    params:
+      credits: "[Asher Ward](https://unsplash.com/@the_asher_ward) on [Unsplash](https://unsplash.com/s/photos/forest)"
+---
+
+If you need more flexibility for your embedded images, you could use the `img` shortcode. It is using Hugo's
+[page resources](https://gohugo.io/content-management/page-resources/) and supports lazy loading of your images.
+
+**Attributes:**
+
+| Name          | Usage                                                                                                         | default           |
+| ------------- | ------------------------------------------------------------------------------------------------------------- | ----------------- |
+| name (string) | Name of the image resource defined in your front matter.                                                      | empty             |
+| alt (string)  | Description for displayed image.                                                                              | resource `.Title` |
+| size (string) | Thumbnail size (tiny\|small\|medium\|large).                                                                  | empty             |
+| lazy (bool)   | Enable or disable image lazy loading. Can be controlled globally by site parameter `geekdocImageLazyLoading`. | true              |
+
+**Example:**
+
+Define your resources in the page front matter. `params.credits` are optional.
+
+<!-- spellchecker-disable -->
+
+```md
+---
+resources:
+  - name: forest-1
+    src: "forest-1.jpg"
+    title: Forest (1)
+    params:
+      credits: "[Jay Mantri](https://unsplash.com/@jaymantri) on [Unsplash](https://unsplash.com/s/photos/forest)"
+---
+
+{{</* img name="forest-1" size="large" lazy=true */>}}
+```
+
+<!-- spellchecker-enable -->
+
+**Demo:**
+
+<!-- spellchecker-disable -->
+
+{{< img name="forest-1" size="large" lazy=false >}}
+
+<!-- spellchecker-enable -->
+
+Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates
+investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts
+feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious
+copious quo ad. Stet probates in duo.
+
+<!-- spellchecker-disable -->
+
+{{< img name="forest-2" size="large" lazy=true >}}
+
+<!-- spellchecker-enable -->
+
+Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates
+investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts
+feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious
+copious quo ad. Stet probates in duo.
+
+<!-- spellchecker-disable -->
+
+{{< img name="forest-3" size="large" lazy=true >}}
+
+<!-- spellchecker-enable -->
+
+Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates
+investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts
+feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious
+copious quo ad. Stet probates in duo.
+
+<!-- spellchecker-disable -->
+
+{{< img name="forest-4" size="large" lazy=true >}}
+
+<!-- spellchecker-enable -->
+
+Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates
+investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts
+feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious
+copious quo ad. Stet probates in duo.
+
+<!-- spellchecker-disable -->
+
+{{< img name="forest-5" size="large" lazy=true >}}
+
+<!-- spellchecker-enable -->
+
+Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates
+investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts
+feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious
+copious quo ad. Stet probates in duo.
+
+<!-- spellchecker-disable -->
+
+{{< img name="forest-6" size="large" lazy=true >}}
+
+<!-- spellchecker-enable -->
+
+Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates
+investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts
+feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious
+copious quo ad. Stet probates in duo.
+
+<!-- spellchecker-disable -->
+
+{{< img name="forest-7" size="large" lazy=true >}}
+
+<!-- spellchecker-enable -->

exampleSite/content/usage/configuration.md

@@ -85,6 +85,10 @@ enableGitInfo = true
 
   # (Optional, default true) Copy anchor url to clipboard on click.
   geekdocAnchorCopy = true
+
+  # (Optional, default true) Enable or disable image lazy loading for images rendered
+  # by the 'img' shortcode.
+  geekdocImageLazyLoading = true
 ```
 
 {{< /tab >}}
@@ -164,6 +168,10 @@ params:
 
   # (Optional, default true) Copy anchor url to clipboard on click.
   geekdocAnchorCopy: true
+
+  # (Optional, default true) Enable or disable image lazy loading for images rendered
+  # by the 'img' shortcode.
+  geekdocImageLazyLoading: true
 ```
 
 {{< /tab >}}

layouts/shortcodes/img.html

@@ -0,0 +1,40 @@
+{{ $source := ($.Page.Resources.ByType "image").GetMatch (printf "*%s*" (.Get "name")) }}
+{{ $customAlt := .Get "alt" }}
+{{ $customSize := .Get "size" }}
+{{ $lazyLoad := default (default true $.Site.Params.GeekdocImageLazyLoading) (.Get "lazy") }}
+
+{{ with $source }}
+{{ $caption := default .Title $customAlt }}
+
+{{ $tiny := (.Resize "320x").RelPermalink }}
+{{ $small := (.Resize "600x").RelPermalink }}
+{{ $medium := (.Resize "1200x").RelPermalink }}
+{{ $large := (.Resize "1800x").RelPermalink }}
+
+{{ $size := dict "tiny" $tiny "small" $small "medium" $medium "large" $large }}
+
+<div class="flex justify-center">
+<figure class="gdoc-markdown__figure">
+    <a href="{{ .RelPermalink }}">
+        <img
+            {{ if $lazyLoad }}loading="lazy"{{ end }}
+            {{ with $customSize }}
+            src="{{ index $size $customSize }}" alt="{{ $caption }}"
+            {{ else }}
+            srcset="{{ $size.tiny }} 320w,
+                    {{ $size.small }} 600w,
+                    {{ $size.medium }} 1200w,
+                    {{ $size.large }} 2x"
+            sizes="(max-width: 320px) 320w,
+                   (max-width: 600px) 600w,
+                   (max-width: 1200px) 1200w,
+                   2x"
+            src="{{ $size.large }}" alt="{{ $caption }}"
+            {{ end }}/>
+    </a>
+    {{ with $caption }}
+    <figcaption>{{ . }}{{ with $source.Params.credits }} ({{ . | markdownify }}){{ end }}</figcaption>
+    {{ end }}
+</figure>
+</div>
+{{ end }}

src/sass/_markdown.scss

@@ -54,6 +54,31 @@
 
   img {
     max-width: 100%;
+    border-radius: $border-radius;
+  }
+
+  &__figure {
+    padding: $padding-4;
+    margin: $padding-16 0;
+    background-color: $gray-300;
+    display: table;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
+
+    figcaption {
+      display: table-caption;
+      caption-side: bottom;
+      background-color: $gray-300;
+      padding: 0 $padding-4 $padding-4;
+      text-align: center;
+      border-bottom-left-radius: $border-radius;
+      border-bottom-right-radius: $border-radius;
+    }
+
+    img {
+      max-width: 100%;
+      height: auto;
+    }
   }
 
   blockquote {