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/cards/placeholder.svg

@@ -1,2 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="680.764" height="528.354" viewBox="0 0 180.119 139.794"><g transform="translate(-13.59 -66.639)" paint-order="fill markers stroke"><path fill="#d0d0d0" d="M13.591 66.639H193.71v139.794H13.591z"/><path d="m118.507 133.514-34.249 34.249-15.968-15.968-41.938 41.937H178.726z" opacity=".675" fill="#fff"/><circle cx="58.217" cy="108.555" r="11.773" opacity=".675" fill="#fff"/><path fill="none" d="M26.111 77.634h152.614v116.099H26.111z"/></g></svg>
-<!-- By Flanoz - Own work, CC0, https://commons.wikimedia.org/w/index.php?curid=94184060 -->

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`
+
+
+