Introduce expandable image shortcode, improve portable links logic

exampleSite/content.en/docs/shortcodes/cards.md

@@ -3,18 +3,18 @@
 ## Example
 
 {{% columns %}}
-- {{< card image="docs/shortcodes/cards/placeholder.svg" >}}
+- {{< card image="placeholder.svg" >}}
   ### Line 1
   Line 2
   {{< /card >}}
 
-- {{< card image="docs/shortcodes/cards/placeholder.svg" >}}
+- {{< card image="placeholder.svg" >}}
   This is tab MacOS content.
   {{< /card >}}
 {{% /columns %}}
 
 {{% columns %}}
-- {{< card href="/" >}}
+- {{< card href="/docs/shortcodes/cards" >}}
   **Markdown**  
   Suspendisse sed congue orci, eu congue metus. Nullam feugiat urna massa.
   {{< /card >}}
@@ -28,3 +28,36 @@
   This is tab MacOS content.
   {{< /card >}}
 {{% /columns %}}
+
+## Build-in figure shortcode
+Hugo's built-in figure shortcode is also styled as a card
+
+{{% columns %}}
+- ```go-html-template
+  {{</* figure
+    src="placeholder.svg"
+    alt="A placeholder image"
+    link="#"
+    caption="A placeholder image caption"
+    loading="lazy"
+    target="_blank"
+    title="Figure Title"
+    caption="A caption for the figure"
+    attr="An attribution"
+    attrlink="#"
+  */>}}
+  ```
+
+- {{< figure
+    src="placeholder.svg"
+    alt="A placeholder image"
+    link="#"
+    caption="A placeholder image caption"
+    loading="lazy"
+    target="_blank"
+    title="Figure Title"
+    caption="A caption for the figure"
+    attr="An attribution"
+    attrlink="#"
+  >}}
+{{% /columns %}}

exampleSite/content.en/docs/shortcodes/images.md

@@ -0,0 +1,30 @@
+# Images
+
+Image shortcode produces an image that can be clicked to expand.
+
+## Example
+
+```go-html-template
+{{</* image src="placeholder.svg" alt="A placeholder" title="A placeholder" loading="lazy" */>}}
+```
+{{< image src="placeholder.svg" alt="A placeholder" title="A placeholder" loading="lazy" >}}
+
+## Parameters
+
+`src` {{< badge style="warning" title="Required" >}}
+: The link to the image
+
+`class` {{< badge style="info" title="Optional" >}}  
+: An optional CSS class name that will be applied to the `img` element
+
+`alt` {{< badge style="info" title="Optional" >}}  
+: An optional alternate text for the image
+
+`title` {{< badge style="info" title="Optional" >}}  
+: An optional title for the image
+
+`loading` {{< badge style="info" title="Optional" >}}  
+: Sets `loading` control for the image: `lazy`, `eager` or `auto`
+
+
+