From f9236d92af35640752a706c1d0ee51b66bea063b Mon Sep 17 00:00:00 2001
From: Kian Kasad <kian@kasad.com>
Date: Tue, 15 Dec 2020 04:22:04 -0800
Subject: [PATCH] shortcodes: figure: don't use h4 tag in figure captions
 (#127)

* avoiding h4 tags in figcaption elements
* picked from https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/shortcodes/figure.html
* figure.html is licensed under Apache License 2.0 and is part of https://github.com/gohugoio/hugo
---
 assets/css/post-single.css     |  7 +++++++
 layouts/shortcodes/figure.html | 28 ++++++++++++++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 layouts/shortcodes/figure.html

diff --git a/assets/css/post-single.css b/assets/css/post-single.css
index 084ffad3..8e4e61b2 100644
--- a/assets/css/post-single.css
+++ b/assets/css/post-single.css
@@ -224,6 +224,13 @@
     border-radius: 4px
 }
 
+.post-content figure > figcaption {
+    color: var(--primary);
+    font-size: 16px;
+    font-weight: bold;
+    margin: 24px 0 16px;
+}
+
 .toc {
     margin-bottom: 40px;
     border: 1px solid var(--border);
diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html
new file mode 100644
index 00000000..71aebb15
--- /dev/null
+++ b/layouts/shortcodes/figure.html
@@ -0,0 +1,28 @@
+<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
+    {{- if .Get "link" -}}
+        <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
+    {{- end }}
+    <img src="{{ .Get "src" }}"
+         {{- if or (.Get "alt") (.Get "caption") }}
+         alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
+         {{- end -}}
+         {{- with .Get "width" }} width="{{ . }}"{{ end -}}
+         {{- with .Get "height" }} height="{{ . }}"{{ end -}}
+    /> <!-- Closing img tag -->
+    {{- if .Get "link" }}</a>{{ end -}}
+    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
+        <figcaption>
+            {{ with (.Get "title") -}}
+                {{ . }}
+            {{- end -}}
+            {{- if or (.Get "caption") (.Get "attr") -}}<p>
+                {{- .Get "caption" | markdownify -}}
+                {{- with .Get "attrlink" }}
+                    <a href="{{ . }}">
+                {{- end -}}
+                {{- .Get "attr" | markdownify -}}
+                {{- if .Get "attrlink" }}</a>{{ end }}</p>
+            {{- end }}
+        </figcaption>
+    {{- end }}
+</figure>