feat(list): add subsection support (#81)

closes https://github.com/CaiJimmy/hugo-theme-stack/issues/48

assets/scss/partials/layout/archives.scss

@@ -1,31 +1,3 @@
 .archives-group {
     margin-bottom: var(--section-separation);
-}
+}
-
-.template-archives {
-    .category-list {
-        margin-bottom: var(--section-separation);
-        overflow-x: auto;
-
-        .article-list--tile {
-            display: flex;
-            padding-bottom: 15px;
-
-            article {
-                width: 250px;
-                height: 150px;
-                margin-right: 20px;
-                flex-shrink: 0;
-
-                .article-title {
-                    margin: 0;
-                    font-size: 1.8rem;
-                }
-
-                .article-details {
-                    padding: 20px;
-                }
-            }
-        }
-    }
-}

assets/scss/partials/layout/list.scss

@@ -1,4 +1,4 @@
-.taxonomy-card {
+.section-card {
     border-radius: var(--card-border-radius);
     background-color: var(--card-background);
     padding: var(--small-card-padding);
@@ -9,37 +9,37 @@
 
     --separation: 15px;
 
-    .taxonomy-term {
+    .section-term {
         font-size: 2.2rem;
         margin: 0;
         margin-top: calc(var(--separation) / 2);
         color: var(--card-text-color-main);
 
-        & + .taxonomy-description {
+        & + .section-description {
             margin-top: var(--separation);
         }
     }
 
-    .taxonomy-description {
+    .section-description {
         font-weight: normal;
         color: var(--card-text-color-secondary);
         font-size: 1.6rem;
         margin: 0;
     }
 
-    .taxonomy-details {
+    .section-details {
         flex-grow: 1;
         margin-right: 20px;
     }
 
-    .taxonomy-image {
+    .section-image {
         img {
             width: 60px;
             height: 60px;
         }
     }
 
-    .taxonomy-count {
+    .section-count {
         color: var(--card-text-color-tertiary);
         font-size: 1.4rem;
         margin: 0;
@@ -47,3 +47,29 @@
         text-transform: uppercase;
     }
 }
+
+.subsection-list {
+    margin-bottom: var(--section-separation);
+    overflow-x: auto;
+
+    .article-list--tile {
+        display: flex;
+        padding-bottom: 15px;
+
+        article {
+            width: 250px;
+            height: 150px;
+            margin-right: 20px;
+            flex-shrink: 0;
+
+            .article-title {
+                margin: 0;
+                font-size: 1.8rem;
+            }
+
+            .article-details {
+                padding: 20px;
+            }
+        }
+    }
+}

assets/scss/style.scss

@@ -21,7 +21,7 @@
 @import "partials/base.scss";
 @import "partials/layout/archives.scss";
 @import "partials/layout/article.scss";
-@import "partials/layout/taxonomy.scss";
+@import "partials/layout/list.scss";
 @import "partials/layout/404.scss";
 @import "partials/layout/search.scss";
 

i18n/en.yaml

@@ -1,6 +1,18 @@
 toggleMenu:
     other: Toggle Menu
 
+list:
+    page:
+        one: "{{ .Count }} page"
+        other: "{{ .Count }} pages"
+
+    section:
+        other: Section
+
+    subsection:
+        one: Subsection
+        other: Subsections
+
 archives:
     categories:
         other: Categories

layouts/_default/archives.html

@@ -3,7 +3,7 @@
     {{ $categories := ($.Site.GetPage "taxonomyTerm" "categories").Pages }}
     {{ if $categories }}
     <h2 class="section-title">{{ T "archives.categories" }}</h2>
-    <div class="category-list">
+    <div class="subsection-list">
         <div class="article-list--tile">
             {{ range $categories }}
                 {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "taxonomy") }}

layouts/_default/list.html

@@ -1,8 +1,51 @@
 {{ define "main" }}
-    <h3 class="section-title">{{ .Title }}</h3>
+    <h3 class="section-title">
+        {{ if eq .Parent (.GetPage "/") }}
+            {{ T "list.section" }}
+        {{ else }}
+            {{ .Parent.Title }}
+        {{ end }}
+    </h3>
 
+    <div class="section-card">
+        <div class="section-details">
+            <h3 class="section-count">{{ T "list.page" (len .Pages) }}</h3>
+            <h1 class="section-term">{{ .Title }}</h1>
+            {{ with .Params.description }}
+                <h2 class="section-description">{{ . }}</h2>
+            {{ end }}
+        </div>
+
+        {{- $image := partialCached "helper/image" (dict "Context" . "Type" "section") .RelPermalink "section" -}}
+        {{ if $image.exists }}
+            <div class="section-image">
+                {{ if $image.resource }}   
+                    {{- $thumbnail := $image.resource.Fill "120x120" -}}
+                    <img src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}"
+                        height="{{ $thumbnail.Height }}" loading="lazy">
+                {{ else }}
+                    <img src="{{ $image.permalink }}" loading="lazy">
+                {{ end }}
+            </div>
+        {{ end }}
+    </div>
+
+    {{ $subsections := .Sections }}
+    {{ with $subsections }}
+        <h2 class="section-title">{{ T "list.subsection" (len $subsections) }}</h2>
+        <div class="subsection-list">
+            <div class="article-list--tile">
+                {{ range . }}
+                    {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "section") }}
+                {{ end }}
+            </div>
+        </div>
+    {{ end }}
+    
+    {{/* List only pages that are not a subsection */}}
+    {{ $paginator := .Paginate (.Pages | complement $subsections) }}
     <section class="article-list--compact">
-        {{ range .Paginator.Pages }}
+        {{ range $paginator.Pages }}
             {{ partial "article-list/compact" . }}
         {{ end }}
     </section>

layouts/_default/term.html

@@ -1,37 +0,0 @@
-{{ define "main" }}
-    <h3 class="taxonomy-type section-title">{{ .Type | singularize | humanize }}</h3>
-    <div class="taxonomy-card">
-        <div class="taxonomy-details">
-            <h3 class="taxonomy-count">{{ len .Pages }} post{{ if gt (len .Pages) 1 }}s{{ end }}</h3>
-            <h1 class="taxonomy-term">{{ .Title }}</h1>
-            {{ with .Params.description }}
-                <h2 class="taxonomy-description">{{ . }}</h2>
-            {{ end }}
-        </div>
-
-        {{- $image := partialCached "helper/image" (dict "Context" . "Type" "taxonomy") .RelPermalink "taxonomy" -}}
-        {{ if $image.exists }}
-            <div class="taxonomy-image">
-                {{ if $image.resource }}   
-                    {{- $thumbnail := $image.resource.Fill "120x120" -}}
-                    <img src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}"
-                        height="{{ $thumbnail.Height }}" loading="lazy">
-                {{ else }}
-                    <img src="{{ $image.permalink }}" loading="lazy">
-                {{ end }}
-            </div>
-        {{ end }}
-    </div>
-    
-    <section class="article-list--compact">
-        {{ $v2 := where .Pages "Params.hidden" "!=" true }}
-        {{ $pag := .Paginate (.Pages) }}
-        {{ range $pag.Pages }}
-            {{ partial "article-list/compact" . }}
-        {{ end }}
-    </section>
-    
-    {{- partial "pagination.html" . -}}
-
-    {{ partialCached "footer/footer" . }}
-{{ end }}