添加系列栏

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>

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>