Introduce expandable image shortcode, improve portable links logic

Author: alex-shpak

assets/_main.scss

@@ -334,10 +334,7 @@ body[dir="rtl"] .book-menu {
 
 // Responsive styles
 .book-menu-content,
-.book-toc-content,
-.book-page,
-.book-header aside,
-.markdown {
+.book-toc-content {
   transition: 0.2s ease-in-out;
   transition-property: transform, margin, opacity, visibility;
   will-change: transform, margin, opacity;

assets/_markdown.scss

@@ -200,9 +200,6 @@
 
   figure {
     margin: $padding-16 0;
-    figcaption p {
-      margin-top: 0;
-    }
   }
 }
 

assets/_shortcodes.scss

@@ -120,6 +120,7 @@
   .book-badge {
     display: inline-block;
     font-size: $font-size-14;
+    font-weight: $body-font-weight;
     vertical-align: middle;
     border-radius: $border-radius;
     overflow: hidden;
@@ -149,6 +150,8 @@
 
   // {{< steps >}}
   .book-steps {
+    position: relative;
+
     >ol {
       counter-reset: steps;
       list-style: none;
@@ -191,32 +194,62 @@
     }
   }
 
-  // {{< card >}}
-  .book-card {
-    display: block;
+  // {{< card >}}, {{< figure >}}
+  .book-card, figure {
+    display: inline-block;
     overflow: hidden;
     height: 100%;
     border-radius: $border-radius;
     border: $padding-1 solid var(--gray-200);
 
+    &[href], &[href]:visited {
+      color: var(--body-font-color);
+    }
     &[href]:hover {
       text-decoration: none;
       background: var(--gray-100);
     }
-    &[href]:visited {
-      color: var(--body-font-color);
-    }
 
     img {
+      width: 100%;
       display: block;
-      object-fit: contain;
       aspect-ratio: 4 / 3;
       object-fit: cover;
     }
 
     .markdown-inner {
       padding: $padding-16;
     }
+
+    figcaption {
+      @extend .markdown-inner;
+      padding: $padding-16;
+    }
+  }
+
+  .book-image {
+    input + img {
+      cursor: zoom-in;
+      transition: transform 0.2s ease-in-out;
+    }
+
+    input:checked + img {
+      position: fixed;
+
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      
+      background: var(--body-background);
+      object-fit: contain;
+      width: 100%;
+      height: 100%;
+      
+      z-index: 1;
+      cursor: zoom-out;
+      padding: $padding-16;
+    }
   }
 
   .book-hero {

exampleSite/content.en/docs/shortcodes/cards/placeholder.svg renamed to exampleSite/assets/placeholder.svg

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

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

@@ -1,19 +1,6 @@
+{{- $destination := .Destination -}}
 {{- if .Page.Site.Params.BookPortableLinks -}}
-  {{- template "portable-image" . -}}
-{{- else -}}
-  <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title }}title="{{ . }}"{{ end }}/>
-{{- end -}}
-
-{{- define "portable-image" -}}
-  {{- $isRemote := or (in .Destination "://") (strings.HasPrefix .Destination "//") }}
-  {{- if not $isRemote }}
-    {{- $path := print .Page.File.Dir .Destination }}
-    {{- if strings.HasPrefix .Destination "/" }}
-      {{- $path = print "/static" .Destination }}
-    {{- end }}
-    {{- if not (fileExists $path) }}
-      {{- warnf "Image '%s' not found in '%s'" .Destination .Page.File }}
-    {{- end }}
-  {{- end }}
-  <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title }}title="{{ . }}"{{ end }}/>
+  {{- $destination = partial "docs/links/portable-image" . -}}
 {{- end -}}
+<img src="{{ $destination | safeURL }}" alt="{{ .Text }}" {{ with .Title }}title="{{ . }}"{{ end }}/>
+{{- /**/ -}}

layouts/_markup/render-image.html

@@ -1,29 +1,6 @@
+{{- $destination := .Destination -}}
 {{- if .Page.Site.Params.BookPortableLinks -}}
-  {{- template "portable-link" . -}}
-{{- else -}}
-  <a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}>{{ .Text | safeHTML }}</a>
-{{- end -}}
-
-{{- define "portable-link" -}}
-  {{- $destination := .Destination }}
-  {{- $isRemote := or (in .Destination ":") (strings.HasPrefix .Destination "//") }}
-  {{- $isFragment := strings.HasPrefix .Destination "#" }}
-  {{- if and (not $isRemote) (not $isFragment) }}
-    {{- $url := urls.Parse .Destination }}
-    {{- $path := strings.TrimSuffix "/_index.md" $url.Path }}
-    {{- $path = strings.TrimSuffix "/_index" $path }}
-    {{- $path = strings.TrimSuffix ".md" $path }}
-    {{- $page := .Page.GetPage $path }}
-    {{- if $page }}
-      {{- $destination = $page.RelPermalink }}
-      {{- if $url.Fragment }}
-        {{- $destination = print $destination "#" $url.Fragment }}
-      {{- end }}
-    {{- else if fileExists (print .Page.File.Dir .Destination) }}
-      <!-- Nothing -->
-    {{- else -}}
-      {{- warnf "Page '%s' not found in '%s'" .Destination .Page.File }}
-    {{- end }}
-  {{- end }}
-  <a href="{{ $destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}>{{ .Text | safeHTML }}</a>
+  {{- $destination = partial "docs/links/portable-link" . -}}
 {{- end -}}
+<a href="{{ $destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}>{{ .Text | safeHTML }}</a>
+{{- /**/ -}}

layouts/_markup/render-link.html

@@ -0,0 +1,26 @@
+{{- $destination := .Destination -}}
+{{- $url := urls.Parse .Destination -}}
+
+{{- $isRemote := gt (len $url.Host) 0 -}}
+{{- $isFragment := strings.HasPrefix .Destination "#" -}}
+
+{{- if and (not $isRemote) (not $isFragment) -}}
+  {{- $path := strings.TrimPrefix "./" $url.Path -}}
+  {{- $path = strings.TrimPrefix "/assets/" $path -}}
+  
+  {{- with (.Page.Resources.Get $path) -}}
+    {{- $destination = .RelPermalink -}}
+  {{- else with (resources.Get $path) -}}
+    {{- $destination = .RelPermalink -}}
+  {{- else -}}
+    {{- warnf "Image reference '%s' not found in '%s'" .Destination .Page.Permalink -}}
+  {{- end -}}
+
+  {{- with $url.RawQuery -}}
+    {{- $destination = print $destination "?" . -}}
+  {{- end -}}
+  {{- with $url.Fragment -}}
+    {{- $destination = print $destination "#" . -}}
+  {{- end -}}
+{{- end -}}
+{{- return $destination -}}

layouts/_partials/docs/links/portable-image.html

@@ -0,0 +1,29 @@
+{{- $destination := .Destination -}}
+{{- $url := urls.Parse .Destination -}}
+
+{{- $isRemote := gt (len $url.Host) 0 -}}
+{{- $isFragment := strings.HasPrefix .Destination "#" -}}
+
+{{- if and (not $isRemote) (not $isFragment) -}}
+  {{- $path := strings.TrimPrefix "./" $url.Path -}}
+  {{- $path = strings.TrimSuffix ".md" $path -}}
+  {{- $path = strings.TrimSuffix "/_index" $path -}}
+
+  {{- with (.Page.GetPage $path) -}}
+    {{- $destination = .RelPermalink -}}
+  {{- else with (.Page.Resources.Get $path) -}}
+    {{- $destination = .RelPermalink -}}
+  {{- else with (resources.Get $path) -}}
+    {{- $destination = .RelPermalink -}}
+  {{- else -}}
+    {{- warnf "Reference '%s' not found in '%s'" .Destination .Page.Permalink -}}
+  {{- end -}}
+
+  {{- with $url.RawQuery -}}
+    {{- $destination = print $destination "?" . -}}
+  {{- end -}}
+  {{- with $url.Fragment -}}
+    {{- $destination = print $destination "#" . -}}
+  {{- end -}}
+{{- end -}}
+{{- return $destination -}}