1
enum I18nKey {
2
    // ...
3
    series = 'series',
4
}

1
export const en: Translation = {
2
    // ...
3
    [Key.series]: 'Series',
4
}

1
export const en: Translation = {
2
    // ...
3
    [Key.series]: 'Series',
4
}

1
export type BlogPostData = {
2
  // ...
3
  series?: string;
4
};

1
const postsCollection = defineCollection({
2
  schema: z.object({
3
    // ...
4
    series: z.string().optional(),
5
  }),
6
});

1
---
2
import type { MarkdownHeading } from "astro";
3
import Categories from "./Categories.astro";
4
import Profile from "./Profile.astro";
5
import Tag from "./Tags.astro";
6
import Series from './Series.astro'
7

8
interface Props {
9
  class?: string;
10
  headings?: MarkdownHeading[];
11
    series?: string
12
}
13

14
const className = Astro.props.class;
15

16
const series = Astro.props.series
17
---
18
<div id="sidebar" class:list={[className, "w-full"]}>
19
    <div class="flex flex-col w-full gap-4 mb-4">
20
        <Profile></Profile>
21
    </div>
22
    <div id="sidebar-sticky" class="transition-all duration-700 flex flex-col w-full gap-4 top-4 sticky top-4">
23
        <div id="series" class="flex flex-col w-full gap-4">
24
            { series && <Series series={ series }></Series> }
25
        </div>
26
        <Categories class="onload-animation" style="animation-delay: 150ms"></Categories>
27
        <Tag class="onload-animation" style="animation-delay: 200ms"></Tag>
28
    </div>
29
</div>

1
interface Props {
2
  title?: string;
3
  banner?: string;
4
  description?: string;
5
  lang?: string;
6
  setOGTypeArticle?: boolean;
7
  headings?: MarkdownHeading[];
8
    series?: string;
9
}
10

11
const {
12
  title,
13
  banner,
14
  description,
15
  lang,
16
  setOGTypeArticle,
17
  headings = [],
18
  series,
19
} = Astro.props;
20

21
// ...
22

23
<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>

1
<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}>
2
    // ...
3
</MainGridLayout>

1
export async function getPostSeries(
2
  seriesName: string,
3
): Promise<{ body: string; data: BlogPostData; slug: string }[]> {
4
  const posts = (await getCollection('posts', ({ data }) => {
5
    return (
6
      (import.meta.env.PROD ? data.draft !== true : true) &&
7
      data.series === seriesName
8
    )
9
  })) as unknown as { body: string; data: BlogPostData; slug: string }[]
10

11
  posts.sort((a, b) => {
12
    const dateA = new Date(a.data.published)
13
    const dateB = new Date(b.data.published)
14
    return dateA > dateB ? 1 : -1
15
  })
16

17
  return posts
18
}

1
---
2
import I18nKey from '../../i18n/i18nKey'
3
import { i18n } from '../../i18n/translation'
4
import { getPostSeries } from '../../utils/content-utils'
5
import { getPostUrlBySlug } from '../../utils/url-utils'
6
import WidgetLayout from './WidgetLayout.astro'
7

8
const COLLAPSED_HEIGHT = '7.5rem'
9

10
interface Props {
11
  class?: string
12
  style?: string
13
  series: string
14
}
15
const className = Astro.props.class
16
const style = Astro.props.style
17
const seriesName = Astro.props.series
18

19
const series = await getPostSeries(seriesName)
20

21
const isCollapsed = series.length >= 10
22
---
23
<WidgetLayout name={i18n(I18nKey.series) + " - " + series[0].data.series} id="series" isCollapsed={isCollapsed} collapsedHeight={COLLAPSED_HEIGHT} class={className} style={style}>
24
    <div class="flex flex-col gap-1">
25
        {series.map(t => (
26
            <a href={getPostUrlBySlug(t.slug)}
27
                aria-label={t.data.title}
28
                class="group btn-plain h-10 w-full rounded-lg hover:text-[initial]"
29
            >
30
                <!-- dot and line -->
31
                <div class="w-[15%] md:w-[10%] relative dash-line h-full flex items-center">
32
                    <div class="transition-all mx-auto w-1 h-1 rounded group-hover:h-5
33
                    bg-[oklch(0.5_0.05_var(--hue))] group-hover:bg-[var(--primary)]
34
                    outline outline-4 z-50
35
                    outline-[var(--card-bg)]
36
                    group-hover:outline-[var(--btn-plain-bg-hover)]
37
                    group-active:outline-[var(--btn-plain-bg-active)]
38
                    "
39
                    ></div>
40
                </div>
41
                <!-- post title -->
42
                <div class="w-[85%] text-left font-bold
43
                    group-hover:translate-x-1 transition-all group-hover:text-[var(--primary)]
44
                    text-75 pr-15 whitespace-nowrap overflow-ellipsis overflow-hidden" title={t.data.title}
45
                >
46
                        {t.data.title}
47
                </div>
48
            </a>
49
        ))}
50
    </div>
51
</WidgetLayout>

1
export default defineConfig({
2
  // ...
3
  integrations: [
4
    // ...
5
  swup({
6
          theme: false,
7
          animationClass: "transition-swup-", // see https://swup.js.org/options/#animationselector
8
          // the default value `transition-` cause transition delay
9
          // when the Tailwind class `transition-all` is used
10
          containers: ["main", "#toc", "#series"],
11
          smoothScrolling: true,
12
          cache: true,
13
          preload: true,
14
          accessibility: true,
15
          updateHead: true,
16
          updateBodyClass: false,
17
          globalInstance: true,
18
      }),
19
// ...