From 4923182a07b95763391a1d7ec5ceecc347c719bf Mon Sep 17 00:00:00 2001
From: VnPower <vnpower@disroot.org>
Date: Mon, 15 May 2023 12:17:35 +0700
Subject: [PATCH] Optimization: split thumbnail containers into smaller
 templates

---
 template/artwork.html              | 13 +--------
 template/index.html                | 47 ++----------------------------
 template/scrollable-container.html | 23 +++++++++++++++
 template/thumbnail-container.html  | 23 +++++++++++++++
 4 files changed, 49 insertions(+), 57 deletions(-)
 create mode 100644 template/scrollable-container.html
 create mode 100644 template/thumbnail-container.html

diff --git a/template/artwork.html b/template/artwork.html
index 222fc1c..037aa44 100644
--- a/template/artwork.html
+++ b/template/artwork.html
@@ -52,17 +52,6 @@
     {{ end }}
   </div>
   <h2>Related works</h2>
-  {{ range .Related }}
-  <div class="artwork-thumbnail-small artwork-thumbnail">
-    <a href="#">
-      <img src="{{ .Images.square_medium }}" alt="{{ .Title }}" class="artwork-master-image" />
-    </a>
-
-    <h3 class="artwork-thumbnail-title no-margin">{{ .Title }}</h3>
-    <a href="#" class="artwork-thumbnail-artist flex"><img src="{{ .Artist.Avatar.medium }}" alt="{{ .Artist.Name }}"
-        class="artwork-thumbnail-artist-avatar border-rounded" />
-      {{ .Artist.Name }}</a>
-  </div>
-  {{ end }}
+  {{ template "thumbnail-container.html" .Related }}
 </div>
 {{ template "footer.html" }}
diff --git a/template/index.html b/template/index.html
index f9e573d..a72c831 100644
--- a/template/index.html
+++ b/template/index.html
@@ -1,29 +1,8 @@
 {{ template "header.html" }}
 <div class="container">
   <h1>Recommended works</h1>
-  <div class="thumbnail-container">
-    {{ range .Recommended }}
-    <div class="artwork-thumbnail-small artwork-thumbnail">
-      <a href="#">
-        <img
-          src="{{ .Images.square_medium }}"
-          alt="{{ .Title }}"
-          class="artwork-master-image"
-        />
-      </a>
 
-      <h3 class="artwork-thumbnail-title no-margin">{{ .Title }}</h3>
-      <a href="#" class="artwork-thumbnail-artist flex"
-        ><img
-          src="{{ .Artist.Avatar.medium }}"
-          alt="{{ .Artist.Name }}"
-          class="artwork-thumbnail-artist-avatar border-rounded"
-        />
-        {{ .Artist.Name }}</a
-      >
-    </div>
-    {{ end }}
-  </div>
+  {{ template "scrollable-container.html" .Recommended }}
 
   <h1>Today's rankings</h1>
   <div class="thumbnail-container">
@@ -68,28 +47,6 @@
   </div>
 
   <h1>Newest by all</h1>
-  <div>
-    {{ range .Newest }}
-    <div class="artwork-thumbnail-small artwork-thumbnail">
-      <a href="#">
-        <img
-          src="{{ .Images.square_medium }}"
-          alt="{{ .Title }}"
-          class="artwork-master-image"
-        />
-      </a>
-
-      <h3 class="artwork-thumbnail-title no-margin">{{ .Title }}</h3>
-      <a href="#" class="artwork-thumbnail-artist flex"
-        ><img
-          src="{{ .Artist.Avatar.medium }}"
-          alt="{{ .Artist.Name }}"
-          class="artwork-thumbnail-artist-avatar border-rounded"
-        />
-        {{ .Artist.Name }}</a
-      >
-    </div>
-    {{ end }}
-  </div>
+  {{ template "thumbnail-container.html" .Newest }}
 </div>
 {{ template "footer.html" }}
diff --git a/template/scrollable-container.html b/template/scrollable-container.html
new file mode 100644
index 0000000..e3d865c
--- /dev/null
+++ b/template/scrollable-container.html
@@ -0,0 +1,23 @@
+<div class="thumbnail-container">
+  {{ range . }}
+  <div class="artwork-thumbnail-small artwork-thumbnail">
+    <a href="#">
+      <img
+        src="{{ .Images.square_medium }}"
+        alt="{{ .Title }}"
+        class="artwork-master-image"
+      />
+    </a>
+
+    <h3 class="artwork-thumbnail-title no-margin">{{ .Title }}</h3>
+    <a href="#" class="artwork-thumbnail-artist flex"
+      ><img
+        src="{{ .Artist.Avatar.medium }}"
+        alt="{{ .Artist.Name }}"
+        class="artwork-thumbnail-artist-avatar border-rounded"
+      />
+      {{ .Artist.Name }}</a
+    >
+  </div>
+  {{ end }}
+</div>
diff --git a/template/thumbnail-container.html b/template/thumbnail-container.html
new file mode 100644
index 0000000..84d8d98
--- /dev/null
+++ b/template/thumbnail-container.html
@@ -0,0 +1,23 @@
+<div>
+  {{ range . }}
+  <div class="artwork-thumbnail-small artwork-thumbnail">
+    <a href="#">
+      <img
+        src="{{ .Images.square_medium }}"
+        alt="{{ .Title }}"
+        class="artwork-master-image"
+      />
+    </a>
+
+    <h3 class="artwork-thumbnail-title no-margin">{{ .Title }}</h3>
+    <a href="#" class="artwork-thumbnail-artist flex"
+      ><img
+        src="{{ .Artist.Avatar.medium }}"
+        alt="{{ .Artist.Name }}"
+        class="artwork-thumbnail-artist-avatar border-rounded"
+      />
+      {{ .Artist.Name }}</a
+    >
+  </div>
+  {{ end }}
+</div>