From 3b4d3195bd60d6e0c1e4259eb208acdf56849d1f Mon Sep 17 00:00:00 2001
From: QIU <Kero64@126.com>
Date: Tue, 26 Aug 2025 02:50:07 +0000
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=B3=BB=E5=88=97=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 astro.config.mjs                    |  2 +-
 src/components/widget/Series.astro  | 51 +++++++++++++++++++++++++++++
 src/components/widget/SideBar.astro |  6 ++++
 src/content/config.ts               |  1 +
 src/i18n/i18nKey.ts                 |  1 +
 src/i18n/languages/en.ts            |  1 +
 src/i18n/languages/es.ts            |  1 +
 src/i18n/languages/ja.ts            |  1 +
 src/i18n/languages/ko.ts            |  1 +
 src/i18n/languages/th.ts            |  1 +
 src/i18n/languages/zh_CN.ts         |  1 +
 src/i18n/languages/zh_TW.ts         |  1 +
 src/layouts/MainGridLayout.astro    |  3 +-
 src/pages/posts/[...slug].astro     |  2 +-
 src/types/config.ts                 |  1 +
 src/utils/content-utils.ts          | 19 +++++++++++
 16 files changed, 90 insertions(+), 3 deletions(-)
 create mode 100644 src/components/widget/Series.astro

diff --git a/astro.config.mjs b/astro.config.mjs
index 580591f..f246ddb 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -39,7 +39,7 @@ export default defineConfig({
 			animationClass: "transition-swup-", // see https://swup.js.org/options/#animationselector
 			// the default value `transition-` cause transition delay
 			// when the Tailwind class `transition-all` is used
-			containers: ["main", "#toc"],
+			containers: ["main", "#toc", "#series"],
 			smoothScrolling: true,
 			cache: true,
 			preload: true,
diff --git a/src/components/widget/Series.astro b/src/components/widget/Series.astro
new file mode 100644
index 0000000..413b629
--- /dev/null
+++ b/src/components/widget/Series.astro
@@ -0,0 +1,51 @@
+---
+import I18nKey from '../../i18n/i18nKey'
+import { i18n } from '../../i18n/translation'
+import { getPostSeries } from '../../utils/content-utils'
+import { getPostUrlBySlug } from '../../utils/url-utils'
+import WidgetLayout from './WidgetLayout.astro'
+
+const COLLAPSED_HEIGHT = '7.5rem'
+
+interface Props {
+  class?: string
+  style?: string
+  series: string
+}
+const className = Astro.props.class
+const style = Astro.props.style
+const seriesName = Astro.props.series
+
+const series = await getPostSeries(seriesName)
+
+const isCollapsed = series.length >= 10
+---
+<WidgetLayout name={i18n(I18nKey.series) + " - " + series[0].data.series} id="series" isCollapsed={isCollapsed} collapsedHeight={COLLAPSED_HEIGHT} class={className} style={style}>
+    <div class="flex flex-col gap-1">
+        {series.map(t => (
+            <a href={getPostUrlBySlug(t.slug)}
+                aria-label={t.data.title}
+                class="group btn-plain h-10 w-full rounded-lg hover:text-[initial]"
+            >
+                <!-- dot and line -->
+                <div class="w-[15%] md:w-[10%] relative dash-line h-full flex items-center">
+                    <div class="transition-all mx-auto w-1 h-1 rounded group-hover:h-5
+                    bg-[oklch(0.5_0.05_var(--hue))] group-hover:bg-[var(--primary)]
+                    outline outline-4 z-50
+                    outline-[var(--card-bg)]
+                    group-hover:outline-[var(--btn-plain-bg-hover)]
+                    group-active:outline-[var(--btn-plain-bg-active)]
+                    "
+                    ></div>
+                </div>
+                <!-- post title -->
+                <div class="w-[85%] text-left font-bold
+                    group-hover:translate-x-1 transition-all group-hover:text-[var(--primary)]
+                    text-75 pr-15 whitespace-nowrap overflow-ellipsis overflow-hidden" title={t.data.title}
+                >
+                        {t.data.title}
+                </div>
+            </a>
+        ))}
+    </div>
+</WidgetLayout>
\ No newline at end of file
diff --git a/src/components/widget/SideBar.astro b/src/components/widget/SideBar.astro
index f3bafc2..43fd117 100644
--- a/src/components/widget/SideBar.astro
+++ b/src/components/widget/SideBar.astro
@@ -3,19 +3,25 @@ import type { MarkdownHeading } from "astro";
 import Categories from "./Categories.astro";
 import Profile from "./Profile.astro";
 import Tag from "./Tags.astro";
+import Series from './Series.astro'
 
 interface Props {
 	class?: string;
 	headings?: MarkdownHeading[];
+ series?: string
 }
 
 const className = Astro.props.class;
+const series = Astro.props.series
 ---
 <div id="sidebar" class:list={[className, "w-full"]}>
     <div class="flex flex-col w-full gap-4 mb-4">
         <Profile></Profile>
     </div>
     <div id="sidebar-sticky" class="transition-all duration-700 flex flex-col w-full gap-4 top-4 sticky top-4">
+    <div id="series" class="flex flex-col w-full gap-4">
+            { series && <Series series={ series }></Series> }
+        </div>
         <Categories class="onload-animation" style="animation-delay: 150ms"></Categories>
         <Tag class="onload-animation" style="animation-delay: 200ms"></Tag>
     </div>
diff --git a/src/content/config.ts b/src/content/config.ts
index 8bc07fe..1be0878 100644
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -11,6 +11,7 @@ const postsCollection = defineCollection({
 		tags: z.array(z.string()).optional().default([]),
 		category: z.string().optional().nullable().default(""),
 		lang: z.string().optional().default(""),
+  series: z.string().optional(),
 
 		/* For internal use */
 		prevTitle: z.string().default(""),
diff --git a/src/i18n/i18nKey.ts b/src/i18n/i18nKey.ts
index f796b17..669de70 100644
--- a/src/i18n/i18nKey.ts
+++ b/src/i18n/i18nKey.ts
@@ -32,6 +32,7 @@ enum I18nKey {
 	author = "author",
 	publishedAt = "publishedAt",
 	license = "license",
+ series = 'series',
 }
 
 export default I18nKey;
diff --git a/src/i18n/languages/en.ts b/src/i18n/languages/en.ts
index 5ecad05..3f10b8e 100644
--- a/src/i18n/languages/en.ts
+++ b/src/i18n/languages/en.ts
@@ -35,4 +35,5 @@ export const en: Translation = {
 	[Key.author]: "Author",
 	[Key.publishedAt]: "Published at",
 	[Key.license]: "License",
+ [Key.series]: 'Series',
 };
diff --git a/src/i18n/languages/es.ts b/src/i18n/languages/es.ts
index 9e4d9c9..3a7128e 100644
--- a/src/i18n/languages/es.ts
+++ b/src/i18n/languages/es.ts
@@ -35,4 +35,5 @@ export const es: Translation = {
 	[Key.author]: "Autor",
 	[Key.publishedAt]: "Publicado el",
 	[Key.license]: "Licencia",
+ [Key.series]: 'Serie',
 };
diff --git a/src/i18n/languages/ja.ts b/src/i18n/languages/ja.ts
index 97b4579..3e7a929 100644
--- a/src/i18n/languages/ja.ts
+++ b/src/i18n/languages/ja.ts
@@ -35,4 +35,5 @@ export const ja: Translation = {
 	[Key.author]: "作者",
 	[Key.publishedAt]: "公開日",
 	[Key.license]: "ライセンス",
+ [Key.series]: 'シリーズ',
 };
diff --git a/src/i18n/languages/ko.ts b/src/i18n/languages/ko.ts
index 9936ebf..6778c69 100644
--- a/src/i18n/languages/ko.ts
+++ b/src/i18n/languages/ko.ts
@@ -35,4 +35,5 @@ export const ko: Translation = {
 	[Key.author]: "저자",
 	[Key.publishedAt]: "게시일",
 	[Key.license]: "라이선스",
+ [Key.series]: '시리즈',
 };
diff --git a/src/i18n/languages/th.ts b/src/i18n/languages/th.ts
index 67c9ad9..62bb016 100644
--- a/src/i18n/languages/th.ts
+++ b/src/i18n/languages/th.ts
@@ -35,4 +35,5 @@ export const th: Translation = {
 	[Key.author]: "ผู้เขียน",
 	[Key.publishedAt]: "เผยแพร่เมื่อ",
 	[Key.license]: "สัญญาอนุญาต",
+ [Key.series]: 'ชุด',
 };
diff --git a/src/i18n/languages/zh_CN.ts b/src/i18n/languages/zh_CN.ts
index d1b8cf1..b10ad4f 100644
--- a/src/i18n/languages/zh_CN.ts
+++ b/src/i18n/languages/zh_CN.ts
@@ -35,4 +35,5 @@ export const zh_CN: Translation = {
 	[Key.author]: "作者",
 	[Key.publishedAt]: "发布于",
 	[Key.license]: "许可协议",
+ [Key.series]: '系列',
 };
diff --git a/src/i18n/languages/zh_TW.ts b/src/i18n/languages/zh_TW.ts
index 3fca76b..52d76bf 100644
--- a/src/i18n/languages/zh_TW.ts
+++ b/src/i18n/languages/zh_TW.ts
@@ -35,4 +35,5 @@ export const zh_TW: Translation = {
 	[Key.author]: "作者",
 	[Key.publishedAt]: "發佈於",
 	[Key.license]: "許可協議",
+ [Key.series]: '系列',
 };
diff --git a/src/layouts/MainGridLayout.astro b/src/layouts/MainGridLayout.astro
index e1f8e5c..1bb82a0 100644
--- a/src/layouts/MainGridLayout.astro
+++ b/src/layouts/MainGridLayout.astro
@@ -21,6 +21,7 @@ interface Props {
 	description?: string;
 	lang?: string;
 	setOGTypeArticle?: boolean;
+ series?: string
 	headings?: MarkdownHeading[];
 }
 
@@ -80,7 +81,7 @@ const mainPanelTop = siteConfig.banner.enable
             </a>}
 
 
-            <SideBar class="mb-4 row-start-2 row-end-3 col-span-2 lg:row-start-1 lg:row-end-2 lg:col-span-1 lg:max-w-[17.5rem] onload-animation" headings={headings}></SideBar>
+            <SideBar class="mb-4 row-start-2 row-end-3 col-span-2 lg:row-start-1 lg:row-end-2 lg:col-span-1 lg:max-w-[17.5rem] onload-animation" headings={headings} series={ series }></SideBar>
 
             <main id="swup-container" class="transition-swup-fade col-span-2 lg:col-span-1 overflow-hidden">
                 <div id="content-wrapper" class="onload-animation">
diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
index e5ff81b..316bb35 100644
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -45,7 +45,7 @@ const jsonLd = {
 	// TODO include cover image here
 };
 ---
-<MainGridLayout banner={entry.data.image} title={entry.data.title} description={entry.data.description} lang={entry.data.lang} setOGTypeArticle={true} headings={headings}>
+<MainGridLayout banner={entry.data.image} title={entry.data.title} description={entry.data.description} lang={entry.data.lang} setOGTypeArticle={true} headings={headings} series={entry.data.series}>
     <script is:inline slot="head" type="application/ld+json" set:html={JSON.stringify(jsonLd)}></script>
     <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4">
         <div id="post-container" class:list={["card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full ",
diff --git a/src/types/config.ts b/src/types/config.ts
index d23482f..e1fe5e1 100644
--- a/src/types/config.ts
+++ b/src/types/config.ts
@@ -98,6 +98,7 @@ export type BlogPostData = {
 	draft?: boolean;
 	image?: string;
 	category?: string;
+ series?: string
 	prevTitle?: string;
 	prevSlug?: string;
 	nextTitle?: string;
diff --git a/src/utils/content-utils.ts b/src/utils/content-utils.ts
index f30b890..e57e054 100644
--- a/src/utils/content-utils.ts
+++ b/src/utils/content-utils.ts
@@ -112,3 +112,22 @@ export async function getCategoryList(): Promise<Category[]> {
 	}
 	return ret;
 }
+
+export async function getPostSeries(
+  seriesName: string,
+): Promise<{ body: string; data: BlogPostData; slug: string }[]> {
+  const posts = (await getCollection('posts', ({ data }) => {
+    return (
+      (import.meta.env.PROD ? data.draft !== true : true) &&
+      data.series === seriesName
+    )
+  })) as unknown as { body: string; data: BlogPostData; slug: string }[]
+
+  posts.sort((a, b) => {
+    const dateA = new Date(a.data.published)
+    const dateB = new Date(b.data.published)
+    return dateA > dateB ? 1 : -1
+  })
+
+  return posts
+}
\ No newline at end of file