From 06a8c3e0f8df58d41fffe19c5042f6e7ae0fddf3 Mon Sep 17 00:00:00 2001
From: Khusika Dhamar Gusti <khusikadhamar@gmail.com>
Date: Tue, 20 Jan 2026 19:30:37 +0700
Subject: [PATCH] fix(html): Adjust figcaption for figure formatting
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Resolves HTML Validator:
error: The heading “h4” (with computed level 4) follows the heading “h2” (with computed level 2), skipping 1 heading level.

Signed-off-by: Khusika Dhamar Gusti <khusikadhamar@gmail.com>
---
 layouts/page.html         | 2 +-
 layouts/posts/single.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/layouts/page.html b/layouts/page.html
index 9685157a..aa8bbe9c 100644
--- a/layouts/page.html
+++ b/layouts/page.html
@@ -102,7 +102,7 @@ <h2 class="single-subtitle animated fadeInDown faster">{{ . }}</h2>
             <div class="content" id="content">
                 {{- $content := .Content -}}
                 {{- $content = dict "Content" .Content "Ruby" $params.ruby "Fraction" $params.fraction "Fontawesome" $params.fontawesome | partial "function/content.html" -}}
-                {{- $content | replaceRE "<p><figure>" "<figure>" | replaceRE "(?s:</figure>\n?</p>)" "</figure>" | replaceRE "https://www.w3.org/" "http://www.w3.org/"| replaceRE "font-weight:550" "font-weight:500" | replaceRE "<section" "<div" | replaceRE "</section" "</div" | replaceRE `<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">` `<div class="video">` | replaceRE ` style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;"` `` | replaceRE " webkitallowfullscreen mozallowfullscreen" "" | replaceRE "allowfullscreen" `allow="fullscreen"` | replaceRE `type="application/javascript"` `` | replaceRE `charset="utf-8"></script>` `></script>` | replaceRE `<div id="fb-root"></div>` `` | safeHTML -}}
+                {{- $content | replaceRE `(?s)<figcaption>\s*<h4>` "<figcaption class=image-caption>" | replaceRE "</h4></figcaption>" "</figcaption>" | replaceRE "<p><figure>" "<figure>" | replaceRE "(?s:</figure>\n?</p>)" "</figure>" | replaceRE "https://www.w3.org/" "http://www.w3.org/"| replaceRE "font-weight:550" "font-weight:500" | replaceRE "<section" "<div" | replaceRE "</section" "</div" | replaceRE `<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">` `<div class="video">` | replaceRE ` style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;"` `` | replaceRE " webkitallowfullscreen mozallowfullscreen" "" | replaceRE "allowfullscreen" `allow="fullscreen"` | replaceRE `type="application/javascript"` `` | replaceRE `charset="utf-8"></script>` `></script>` | replaceRE `<div id="fb-root"></div>` `` | safeHTML -}}
             </div>
 
             {{- /* Footer */ -}}
diff --git a/layouts/posts/single.html b/layouts/posts/single.html
index 5d74aaf0..a70da945 100644
--- a/layouts/posts/single.html
+++ b/layouts/posts/single.html
@@ -130,7 +130,7 @@ <h2 class="single-subtitle">{{ . }}</h2>
             <div class="content" id="content">
                 {{- $content := .Content -}}
                 {{- $content = dict "Content" .Content "Ruby" $params.ruby "Fraction" $params.fraction "Fontawesome" $params.fontawesome | partial "function/content.html" -}}
-                {{- $content | replaceRE "<p><figure>" "<figure>" | replaceRE "(?s:</figure>\n?</p>)" "</figure>" | replaceRE "https://www.w3.org/" "http://www.w3.org/"| replaceRE "font-weight:550" "font-weight:500" | replaceRE "<section" "<div" | replaceRE "</section" "</div" | replaceRE `<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">` `<div class="video">` | replaceRE ` style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;"` `` | replaceRE " webkitallowfullscreen mozallowfullscreen" "" | replaceRE "allowfullscreen" `allow="fullscreen"` | replaceRE `type="application/javascript"` `` | replaceRE `charset="utf-8"></script>` `></script>` | replaceRE `<div id="fb-root"></div>` `` | safeHTML -}}
+                {{- $content | replaceRE `(?s)<figcaption>\s*<h4>` "<figcaption class=image-caption>" | replaceRE `(?s)</h4>\s*</figcaption>` "</figcaption>" | replaceRE "<p><figure>" "<figure>" | replaceRE "(?s:</figure>\n?</p>)" "</figure>" | replaceRE "https://www.w3.org/" "http://www.w3.org/"| replaceRE "font-weight:550" "font-weight:500" | replaceRE "<section" "<div" | replaceRE "</section" "</div" | replaceRE `<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">` `<div class="video">` | replaceRE ` style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;"` `` | replaceRE " webkitallowfullscreen mozallowfullscreen" "" | replaceRE "allowfullscreen" `allow="fullscreen"` | replaceRE `type="application/javascript"` `` | replaceRE `charset="utf-8"></script>` `></script>` | replaceRE `<div id="fb-root"></div>` `` | safeHTML -}}
             </div>
 
             {{- /* Footer */ -}}