feat: add filters to term page

- refactor term page structure with partials
- add "reverse order" button
- add "hide weekly posts" button
- i18n support

7 files changed, 140 insertions, 51 deletions

diff --git a/layouts/_partials/items/post-small.html b/layouts/_partials/items/post-small.html
index 644cb106..3113ba2b 100644
--- a/layouts/_partials/items/post-small.html
+++ b/layouts/_partials/items/post-small.html
@@ -1,4 +1,6 @@
-<li class="flex justify-between text-size-lg">
+{{ $isWeekly := (eq .Params.categories "稻草人周刊") }}
+<li class="flex justify-between text-size-lg
+    {{ if $isWeekly }} weekly animate-duration-500 transition-opacity{{ end }}">
     <a href="{{ .RelPermalink }}" data-umami-event="🗃️ Click Post Link from Category Page">
         {{ .Title }}{{ with .Params.subtitle }}：<span class="text-secondary">{{. }}</span>
         {{ end }}
diff --git a/layouts/_partials/term/term-books.html b/layouts/_partials/term/term-books.html
new file mode 100644
index 00000000..5af0a77a
--- /dev/null
+++ b/layouts/_partials/term/term-books.html
@@ -0,0 +1,9 @@
+{{ $books := where .Pages "Section" "eq" "library" }}
+{{ if gt (len $books) 0 }}
+<h2>{{ T "termPage.books" }}</h2>
+<div class="grid grid-cols-4 md:grid-cols-6 items-center gap-4 my-4">
+    {{ range $books }}
+    {{ partial "items/book" . }}
+    {{ end }}
+</div>
+{{ end }}
diff --git a/layouts/_partials/term/term-cards.html b/layouts/_partials/term/term-cards.html
new file mode 100644
index 00000000..f9cd4c1a
--- /dev/null
+++ b/layouts/_partials/term/term-cards.html
@@ -0,0 +1,11 @@
+{{ $cards := where .Pages "Section" "eq" "cards" }}
+{{ if gt (len $cards) 0 }}
+<h2>{{ T "termPage.cards" }}</h2>
+<div class="outbox small">
+    <div class="grid grid-cols-2 gap-4">
+        {{ range $cards }}
+        {{ partial "items/card" (dict "context" . "summary" true) }}
+        {{ end }}
+    </div>
+</div>
+{{ end }}
diff --git a/layouts/_partials/term/term-header.html b/layouts/_partials/term/term-header.html
new file mode 100644
index 00000000..e0501b65
--- /dev/null
+++ b/layouts/_partials/term/term-header.html
@@ -0,0 +1,34 @@
+<div class="term-header">
+    <h1 class="flex items-center justify-between"
+        style="view-transition-name: category-{{ .Title }}">
+        <!-- Tag/Category icon and name -->
+        <div>
+        {{ if or (hasPrefix .Page.Params.icon "http://") (hasPrefix .Page.Params.icon "https://") }}
+                <img src="{{ .Page.Params.icon }}" alt="{{ .Page.LinkTitle }}"
+                    style="height:1em;width:1em">
+        {{ else }}
+            {{ .Page.Params.icon }}
+        {{ end }}
+        {{ if and (eq .Data.Singular "tag") (not .Params.icon) }}#{{ end }}
+        {{ .Title }}
+        </div>
+        <!-- Filter buttons -->
+        <div>
+            {{ if eq .Data.Singular "tag" }}
+            <button class="bg-transparent dark:invert" id="hide-weekly"
+                data-tooltip='{{ T "termFilterButton.hideWeekly" . }}'>
+                <img src="/img/crow.svg" alt="Hide Weekly"
+                    class="w-6 h-6 block hover:animate-swing" />
+            </button>
+            {{ end }}
+            <button class="bg-transparent dark:invert" id="reverse-order"
+                data-tooltip='{{ T "termFilterButton.reverseOrder" . }}'>
+                <img src="/img/clockwork.svg" alt="Reverse Order"
+                    class="w-6 h-6 block hover:rotate-180 transition-transform" />
+            </button>
+        </div>
+    </h1>
+    {{ with .Params.description | markdownify }}
+        <p class="term-description">{{ . }}</p>
+    {{ end }}
+</div>
diff --git a/layouts/_partials/term/term-posts.html b/layouts/_partials/term/term-posts.html
new file mode 100644
index 00000000..86e1b350
--- /dev/null
+++ b/layouts/_partials/term/term-posts.html
@@ -0,0 +1,6 @@
+<ul id="term-posts"
+    class="animate-duration-100 ps-0 flex flex-col gap-2 list-none leading-relaxed">
+    {{ range where .Pages "Section" "not in" (slice "cards" "library") }}
+    {{ partial "items/post-small" . }}
+    {{ end }}
+</ul>
diff --git a/layouts/_partials/term/term-scripts.html b/layouts/_partials/term/term-scripts.html
new file mode 100644
index 00000000..b061794a
--- /dev/null
+++ b/layouts/_partials/term/term-scripts.html
@@ -0,0 +1,69 @@
+<script>
+  const postList = document.getElementById("term-posts")
+  const reverseButton = document.getElementById("reverse-order")
+  const reverseOrder = () => {
+    // play exit animation
+    postList.classList.remove("animate-fade-in")
+    postList.classList.add("animate-fade-out")
+    setTimeout(() => {
+      // reverse order
+      postList.classList.toggle("flex-col")
+      postList.classList.toggle("flex-col-reverse")
+
+      // play entrance animation
+      postList.classList.remove("animate-fade-out")
+      postList.classList.add("animate-fade-in")
+    }, 100)
+  }
+  reverseButton.addEventListener('click', reverseOrder)
+</script>
+
+{{ if eq .Data.Singular "tag" }}
+<script>
+    const hideWeeklyButton = document.getElementById("hide-weekly")
+    const weeklies = postList.querySelectorAll(".weekly")
+
+    const entranceAnimation = "animate-flip-in-x"
+    const exitAnimation = "animate-flip-out-x"
+    const animationDuration = 500
+
+    const toggleWeekly = () => {
+    if (postList.classList.contains("weekly-hidden")) {
+        // show weekly posts
+        postList.classList.remove("weekly-hidden")
+        weeklies.forEach(weekly => {
+        weekly.classList.remove("hidden!")
+        weekly.classList.add(entranceAnimation)
+        setTimeout(() => {
+            weekly.classList.remove(entranceAnimation)
+        }, animationDuration)
+        })
+    } else {
+        // hide weekly posts
+        postList.classList.add("weekly-hidden")
+        weeklies.forEach(weekly => {
+        weekly.classList.add(exitAnimation)
+        setTimeout(() => {
+            weekly.classList.add("hidden!")
+            weekly.classList.remove(exitAnimation)
+        }, animationDuration)
+        })
+    }
+    }
+
+    const highlightClasses = ["animate-flash", "opacity-50"]
+
+    const highlightWeekly = () => {
+    if (weeklies[0].classList.contains(highlightClasses[0])) return;
+    weeklies.forEach(e => e.classList.add(...highlightClasses))
+    }
+
+    const unhighlightWeekly = () => {
+    weeklies.forEach(e => e.classList.remove(...highlightClasses))
+    }
+
+    hideWeeklyButton.addEventListener("click", toggleWeekly)
+    hideWeeklyButton.addEventListener("mouseover", highlightWeekly)
+    hideWeeklyButton.addEventListener("mouseout", unhighlightWeekly)
+</script>
+{{ end }}
diff --git a/layouts/term.html b/layouts/term.html
index ffdbdf95..ca87a2a2 100644
--- a/layouts/term.html
+++ b/layouts/term.html
@@ -2,55 +2,13 @@
     <article>
         {{ partial "header" . }}
         {{ partial "home/home-nav" . }}
-        <div class="term-header">
-            <h1 class="term-title"
-                style="view-transition-name: category-{{ .Title }}">
-                {{ if or (hasPrefix .Page.Params.icon "http://") (hasPrefix .Page.Params.icon "https://") }}
-                    <span>
-                        <img src="{{ .Page.Params.icon }}" alt="{{ .Page.LinkTitle }}"
-                            style="height:1em;width:1em">
-                    </span>
-                {{ else }}
-                    <span>{{ .Page.Params.icon }}</span>
-                {{ end }}
-                {{ if and (eq .Data.Singular "tag") (not .Params.icon) }}#{{ end }}{{ .Title }}
-            </h1>
-            {{ with .Params.description | markdownify }}
-                <p class="term-description">{{ . }}</p>
-            {{ end }}
-        </div>
-        <div>
-            <!-- Posts under this Term -->
-            <ul class="ps-0 flex flex-col gap-2 list-none leading-relaxed">
-                {{ range where .Pages "Section" "not in" (slice "cards" "library") }}
-                {{ partial "items/post-small" . }}
-                {{ end }}
-            </ul>
-
-            <!-- Cards under this Term -->
-            {{ $cards := where .Pages "Section" "eq" "cards" }}
-            {{ if gt (len $cards) 0 }}
-            <h2>{{ T "termPage.cards" }}</h2>
-            <div class="outbox small">
-                <div class="grid grid-cols-2 gap-4">
-                    {{ range $cards }}
-                    {{ partial "items/card" (dict "context" . "summary" true) }}
-                    {{ end }}
-                </div>
-            </div>
-            {{ end }}
-
-            <!-- Books under this Term -->
-            {{ $books := where .Pages "Section" "eq" "library" }}
-            {{ if gt (len $books) 0 }}
-            <h2>{{ T "termPage.books" }}</h2>
-            <div class="grid grid-cols-4 md:grid-cols-6 items-center gap-4 my-4">
-                {{ range $books }}
-                {{ partial "items/book" . }}
-                {{ end }}
-            </div>
-            {{ end }}
-        </div>
+        {{ partial "term/term-header" . }}
+        <section>
+            {{ partial "term/term-posts" . }}
+            {{ partial "term/term-cards" . }}
+            {{ partial "term/term-books" . }}
+        </section>
     </article>
-    {{ partial "footer.html" . }}
+    {{ partial "term/term-scripts" . }}
+    {{ partial "footer" . }}
 {{ end }}