From e120f3ae18602baad72cdc1b1ff9fceb9f991e52 Mon Sep 17 00:00:00 2001
From: Jimmy Cai <jimmehcai@gmail.com>
Date: Mon, 24 Aug 2020 19:27:51 +0200
Subject: [PATCH] refactor(article): split article.html into header, content
 and footer partials

---
 layouts/partials/article/article.html         | 74 +------------------
 .../partials/article/components/content.html  |  3 +
 .../partials/article/components/footer.html   | 16 ++++
 .../partials/article/components/header.html   | 52 +++++++++++++
 4 files changed, 74 insertions(+), 71 deletions(-)
 create mode 100644 layouts/partials/article/components/content.html
 create mode 100644 layouts/partials/article/components/footer.html
 create mode 100644 layouts/partials/article/components/header.html

diff --git a/layouts/partials/article/article.html b/layouts/partials/article/article.html
index 6748188..c7c9064 100644
--- a/layouts/partials/article/article.html
+++ b/layouts/partials/article/article.html
@@ -1,75 +1,7 @@
 <article class="{{ if .Params.image }}has-image{{ end }} main-article">
-    <header class="article-header">
-        {{ if .Params.image }}
-        {{- $image := partial "helper/image" . -}}
+    {{ partial "article/components/header" . }}
 
-        {{- $tablet := $image.Resize "1024x" -}}
-        {{- $desktop := $image.Resize "2000x" -}}
+    {{ partial "article/components/content" . }}
 
-        {{- $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 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>
+    {{ partial "article/components/footer" . }}
 </article>
\ No newline at end of file
diff --git a/layouts/partials/article/components/content.html b/layouts/partials/article/components/content.html
new file mode 100644
index 0000000..fc0f8f6
--- /dev/null
+++ b/layouts/partials/article/components/content.html
@@ -0,0 +1,3 @@
+<section class="article-content">
+    {{ .Content }}
+</section>
diff --git a/layouts/partials/article/components/footer.html b/layouts/partials/article/components/footer.html
new file mode 100644
index 0000000..223710a
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/layouts/partials/article/components/header.html b/layouts/partials/article/components/header.html
new file mode 100644
index 0000000..df9e374
--- /dev/null
+++ b/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>
\ No newline at end of file