refactor(article): split article.html into header, content and footer partials

layouts/partials/article/article.html

@@ -1,75 +1,7 @@
 <article class="{{ if .Params.image }}has-image{{ end }} main-article">
-    <header class="article-header">
+    {{ partial "article/components/header" . }}
-        {{ if .Params.image }}
-        {{- $image := partial "helper/image" . -}}
 
-        {{- $tablet := $image.Resize "1024x" -}}
+    {{ partial "article/components/content" . }}
-        {{- $desktop := $image.Resize "2000x" -}}
 
-        {{- $20x := $image.Fill "20x20 smart"  -}}
+    {{ partial "article/components/footer" . }}
-        {{- .Scratch.Set "20x" $20x  -}}
-
-        <div class="article-image">
-            <img srcset="{{ $tablet.RelPermalink }} 1024w, {{ $desktop.RelPermalink }} 2000w"
-                src="{{ $desktop.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}"
-                loading="lazy"
-                alt="Featured image of post {{ .Title }}" />
-        </div>
-        {{ end }}
-
-        <div class="article-details">
-            {{ with $category := .Params.categories }}
-            <header class="article-category">
-                {{ range first 1 $category }}
-                    {{ if $.Params.image }}
-                        <a href="/categories/{{ . | urlize }}" class="color-tag"
-                            data-image="{{ ($.Scratch.Get "20x").RelPermalink }}">{{ . | humanize }}</a>
-                    {{ else }}
-                        <a href="/categories/{{ . | urlize }}">{{ . | humanize }}</a>
-                    {{ end }}
-                {{ end }}
-            </header>
-            {{ end }}
-
-            <h2 class="article-title">
-                <a href="{{ .Permalink }}">
-                    {{- .Title -}}
-                </a>
-            </h2>
-
-            {{ with .Params.description }}
-            <h3 class="article-subtitle">
-                {{ . }}
-            </h3>
-            {{ end }}
-
-            <footer class="article-time">
-                {{ (resources.Get "icons/clock.svg").Content | safeHTML }}
-                <time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
-                    {{- .Date.Format ( or .Site.Params.dateFormat "Jan 02, 2006" ) -}}
-                </time>
-            </footer>
-        </div>
-    </header>
-
-    <section class="article-content">
-        {{ .Content }}
-    </section>
-
-    <footer class="article-footer">
-        {{ with $tags := .Params.Tags }}
-        <section class="article-tags">
-            {{ range $tags }}
-            <a href="/tags/{{ . | urlize }}">{{ . | humanize }}</a>
-            {{ end }}
-        </section>
-        {{ end }}
-
-        {{ if .Site.Params.postLicense }}
-        <section class="article-copyright">
-            {{ (resources.Get "icons/copyright.svg").Content | safeHTML }}
-            <span>{{ .Site.Params.postLicense }}</span>
-        </section>
-        {{ end }}
-    </footer>
 </article>

layouts/partials/article/components/content.html

@@ -0,0 +1,3 @@
+<section class="article-content">
+    {{ .Content }}
+</section>

layouts/partials/article/components/footer.html

@@ -0,0 +1,16 @@
+<footer class="article-footer">
+    {{ with $tags := .Params.Tags }}
+    <section class="article-tags">
+        {{ range $tags }}
+        <a href="/tags/{{ . | urlize }}">{{ . | humanize }}</a>
+        {{ end }}
+    </section>
+    {{ end }}
+
+    {{ if .Site.Params.postLicense }}
+    <section class="article-copyright">
+        {{ (resources.Get "icons/copyright.svg").Content | safeHTML }}
+        <span>{{ .Site.Params.postLicense }}</span>
+    </section>
+    {{ end }}
+</footer>

layouts/partials/article/components/header.html

@@ -0,0 +1,52 @@
+<header class="article-header">
+    {{ if .Params.image }}
+    {{- $image := partial "helper/image" . -}}
+
+    {{- $tablet := $image.Resize "1024x" -}}
+    {{- $desktop := $image.Resize "2000x" -}}
+
+    {{- $20x := $image.Fill "20x20 smart"  -}}
+    {{- .Scratch.Set "20x" $20x  -}}
+
+    <div class="article-image">
+        <img srcset="{{ $tablet.RelPermalink }} 1024w, {{ $desktop.RelPermalink }} 2000w"
+            src="{{ $desktop.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}"
+            loading="lazy"
+            alt="Featured image of post {{ .Title }}" />
+    </div>
+    {{ end }}
+
+    <div class="article-details">
+        {{ with $category := .Params.categories }}
+        <header class="article-category">
+            {{ range $category }}
+                {{ if $.Params.image }}
+                    <a href="/categories/{{ . | urlize }}" class="color-tag"
+                        data-image="{{ ($.Scratch.Get "20x").RelPermalink }}">{{ . | humanize }}</a>
+                {{ else }}
+                    <a href="/categories/{{ . | urlize }}">{{ . | humanize }}</a>
+                {{ end }}
+            {{ end }}
+        </header>
+        {{ end }}
+
+        <h2 class="article-title">
+            <a href="{{ .Permalink }}">
+                {{- .Title -}}
+            </a>
+        </h2>
+
+        {{ with .Params.description }}
+        <h3 class="article-subtitle">
+            {{ . }}
+        </h3>
+        {{ end }}
+
+        <footer class="article-time">
+            {{ (resources.Get "icons/clock.svg").Content | safeHTML }}
+            <time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
+                {{- .Date.Format ( or .Site.Params.dateFormat "Jan 02, 2006" ) -}}
+            </time>
+        </footer>
+    </div>
+</header>