Refactor and add list of snippets

layouts/index.html

@@ -1,24 +1,6 @@
 {{ define "main" }}
 <section class="blog-recent">
-    <div class="header">
+    {{ partial "snippet-list" (dict "showAllArticles" true) }}
-        <h3>Latest Articles</h3>
-        <div class="all-articles">
-            <a href="javascript:void(0)">All articles</a>
-        </div>
-    </div>
-    <div class="list">
-        <ul class="blog-items">
-            {{ range ( first 3 (where .Site.RegularPages "Type" "snippets").ByDate.Reverse ) }}
-                <li class="blog-item" data-href="{{ .Permalink }}">
-                    <img class="article-image" src="//via.placeholder.com/128" alt="Article Topic">
-                    <div class="article-text">
-                        <h4 class="article-title">{{ .Title }}</h4>
-                        <span class="article-date">{{ .Date.Format "January 2, 2006" }}</span>
-                    </div>
-                </li>
-            {{ end }}
-        </ul>
-    </div>
 </section>
 {{ end }}
 
@@ -48,4 +30,4 @@
         </li>
     </ul>
 </section>
-{{ end }}
+{{ end }}

layouts/partials/snippet-list.html

@@ -0,0 +1,22 @@
+<div class="header">
+    <h3>Latest Articles</h3>
+
+    {{ if index $ "showAllArticles" }}
+    <div class="all-articles">
+        <a href="javascript:void(0)">All articles</a>
+    </div>
+    {{ end }}
+</div>
+<div class="list">
+    <ul class="blog-items">
+        {{ range ( first 3 (where site.RegularPages "Type" "snippets").ByDate.Reverse ) }}
+            <li class="blog-item" data-href="{{ .Permalink }}">
+                <img class="article-image" src="//via.placeholder.com/128" alt="Article Topic">
+                <div class="article-text">
+                    <h4 class="article-title">{{ .Title }}</h4>
+                    <span class="article-date">{{ .Date.Format "January 2, 2006" }}</span>
+                </div>
+            </li>
+        {{ end }}
+    </ul>
+</div>

layouts/snippets/list.html

@@ -0,0 +1,33 @@
+{{ define "main" }}
+<section class="blog-recent">
+    {{ partial "snippet-list" (dict) }}
+</section>
+{{ end }}
+
+{{ define "aside" }}
+<section class="blog-popular">
+    <h3>Popular content</h3>
+    <ul class="popular-items">
+        <li>
+            <span class="arrow"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
+            <a class="link" href="#">Lorem ipsum dolor sit, amet consectetur adipisicing.</a>
+        </li>
+        <li>
+            <span class="arrow"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
+            <a class="link" href="#">Lorem ipsum dolor sit.</a>
+        </li>
+        <li>
+            <span class="arrow"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
+            <a class="link" href="#">Lorem ipsum dolor sit, amet consectetur adipisicing.</a>
+        </li>
+        <li>
+            <span class="arrow"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
+            <a class="link" href="#">Lorem ipsum dolor sit, amet consectetur adipisicing.</a>
+        </li>
+        <li>
+            <span class="arrow"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
+            <a class="link" href="#">Lorem ipsum dolor sit, amet consectetur adipisicing.</a>
+        </li>
+    </ul>
+</section>
+{{ end }}