From ff31920a4dd9a54f2c40c73414ebffd47cfdded2 Mon Sep 17 00:00:00 2001
From: StarHeartHunt <starheart233@gmail.com>
Date: Tue, 7 Nov 2023 19:39:20 +0800
Subject: [PATCH] feat: add year to blog list background

---
 pnpm-lock.yaml             | 18 +++++++++---------
 src/pages/blog/index.astro | 39 +++++++++++++++++++++++++++++++-------
 2 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5090c7a..d729074 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1052,7 +1052,7 @@ packages:
     resolution: {integrity: sha512-jLuwRlz8DQfQNiUCJR50Y09CGPq3fLtmtUQfVrj79E0JWu3dvsVcxVIcfhR5h0iXu+/z++zDrYeiJqifRynJkA==}
     dependencies:
       '@types/estree-jsx': 1.0.3
-      '@types/mdx': 2.0.9
+      '@types/mdx': 2.0.10
       estree-util-build-jsx: 2.2.2
       estree-util-is-identifier-name: 2.1.0
       estree-util-to-js: 1.2.0
@@ -1313,8 +1313,8 @@ packages:
     resolution: {integrity: sha512-ShOj4wY4R3bbUkKtlSmCX2N2AwBj1FDNTQm7HbmAdb6MJeAxG3tPUUxOhTZu06tlMpEEQd9agdr1Z198p+62IA==}
     dev: true
 
-  /@types/json-schema@7.0.14:
-    resolution: {integrity: sha512-U3PUjAudAdJBeC2pgN8uTIKgxrb4nlDF3SF0++EldXQvQBGkpFZMSnwQiIoDU77tv45VgNkl/L4ouD+rEomujw==}
+  /@types/json-schema@7.0.15:
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
     dev: true
 
   /@types/mdast@3.0.14:
@@ -1329,8 +1329,8 @@ packages:
       '@types/unist': 3.0.1
     dev: true
 
-  /@types/mdx@2.0.9:
-    resolution: {integrity: sha512-OKMdj17y8Cs+k1r0XFyp59ChSOwf8ODGtMQ4mnpfz5eFDk1aO41yN3pSKGuvVzmWAkFp37seubY1tzOVpwfWwg==}
+  /@types/mdx@2.0.10:
+    resolution: {integrity: sha512-Rllzc5KHk0Al5/WANwgSPl1/CwjqCy+AZrGd78zuK+jO9aDM6ffblZ+zIjgPNAaEBmlO0RYDvLNh7wD0zKVgEg==}
     dev: true
 
   /@types/ms@0.7.33:
@@ -1533,7 +1533,7 @@ packages:
       eslint: ^7.0.0 || ^8.0.0
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.53.0)
-      '@types/json-schema': 7.0.14
+      '@types/json-schema': 7.0.15
       '@types/semver': 7.5.4
       '@typescript-eslint/scope-manager': 6.10.0
       '@typescript-eslint/types': 6.10.0
@@ -1984,7 +1984,7 @@ packages:
     hasBin: true
     dependencies:
       caniuse-lite: 1.0.30001561
-      electron-to-chromium: 1.4.576
+      electron-to-chromium: 1.4.577
       node-releases: 2.0.13
       update-browserslist-db: 1.0.13(browserslist@4.22.1)
     dev: true
@@ -2592,8 +2592,8 @@ packages:
       sigmund: 1.0.1
     dev: true
 
-  /electron-to-chromium@1.4.576:
-    resolution: {integrity: sha512-yXsZyXJfAqzWk1WKryr0Wl0MN2D47xodPvEEwlVePBnhU5E7raevLQR+E6b9JAD3GfL/7MbAL9ZtWQQPcLx7wA==}
+  /electron-to-chromium@1.4.577:
+    resolution: {integrity: sha512-/5xHPH6f00SxhHw6052r+5S1xO7gHNc89hV7tqlvnStvKbSrDqc/u6AlwPvVWWNj+s4/KL6T6y8ih+nOY0qYNA==}
     dev: true
 
   /emoji-regex@10.3.0:
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 3ed230f..a774a63 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -9,20 +9,45 @@ const posts = (
     return data.hidden !== true;
   })
 ).sort((a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf());
+
+let yearPosts: Record<string, typeof posts> = {};
+posts.forEach((post) => {
+  const year = post.data.pubDate.getFullYear();
+  if (yearPosts[year] && yearPosts[year].length) {
+    yearPosts[year] = [post, ...yearPosts[year]];
+  } else {
+    yearPosts[year] = [post];
+  }
+});
 ---
 
 <BaseLayout title={SITE_TITLE} description={SITE_DESCRIPTION}>
   <div class="mx-auto prose prose-cyan">
     <ul class="slide-enter-content">
       {
-        posts.map((post) => (
-          <li>
-            <div>
-              <a href={`/blog/${post.slug}/`}>{post.data.title}</a>
-              <br />
-              <FormattedDate date={post.data.pubDate} />
+        Object.entries(yearPosts).map(([key, posts]) => (
+          <>
+            <div
+              class="select-none relative h-20 pointer-events-none slide-enter"
+              style="--enter-stage: -2; --enter-step: 60ms;"
+            >
+              <span
+                class="text-[8em] text-transparent absolute -left-12 -top-8 font-bold opacity-10"
+                style="-webkit-text-stroke-width:2px;--tw-text-stroke-opacity: 1;-webkit-text-stroke-color: rgb(170 170 170 / var(--tw-text-stroke-opacity))"
+              >
+                {key}
+              </span>
             </div>
-          </li>
+            {posts.map((post) => (
+              <div>
+                <li>
+                  <a href={`/blog/${post.slug}/`}>{post.data.title}</a>
+                  <br />
+                  <FormattedDate date={post.data.pubDate} />
+                </li>
+              </div>
+            ))}
+          </>
         ))
       }
     </ul>