1
<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}
2
    description={entry.data.description} lang={entry.data.lang}
3
    setOGTypeArticle={true} series={entry.data.series}>
4
</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
---
2
import type { MarkdownHeading } from "astro";
3
import Categories from "./Categories.astro";
4
import Profile from "./Profile.astro";
5
import Series from "./Series.astro";
6
import Tag from "./Tags.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 ">
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
swup({
2
  theme: false,
3
  animationClass: "transition-swup-", // see https://swup.js.org/options/#animationselector
4
  // the default value `transition-` cause transition delay
5
  // when the Tailwind class `transition-all` is used
6
  containers: ["main", "#toc", "#series"],
7
  smoothScrolling: true,
8
  cache: true,
9
  preload: true,
10
  accessibility: true,
11
  updateHead: true,
12
  updateBodyClass: false,
13
  globalInstance: true,
14
}),