1
export const LinkPresets: { [key in LinkPreset]: NavBarLink } = {
2
  // ...
3
  [LinkPreset.Friends]: {
4
    name: i18n(I18nKey.friends),
5
    url: '/friends/',
6
  },
7
  [LinkPreset.Series]: {
8
    name: i18n(I18nKey.series),
9
    url: '/series/',
10
  },
11
}

1
export const navBarConfig: NavBarConfig = {
2
  links: [
3
    LinkPreset.Home,
4
    LinkPreset.Archive,
5
    LinkPreset.Series,
6
    LinkPreset.About,
7
    LinkPreset.Friends,
5 collapsed lines
8
    {
9
      name: 'GitHub',
10
      url: 'https://github.com/ikamusume7/fuwari',     // Internal links should not include the base path, as it is automatically added
11
      external: true,                               // Show an external link icon and will open in a new tab
12
    },
13
  ],
14
}

1
export enum LinkPreset {
2
  Home = 0,
3
  Archive = 1,
4
  About = 2,
5
  Friends = 3,
6
  Series = 4,
7
}

1
---
2
import MainGridLayout from '@layouts/MainGridLayout.astro'
3
import SeriesPanel from '@components/SeriesPanel.astro'
4
import { i18n } from '@i18n/translation'
5
import I18nKey from '@i18n/i18nKey'
6
---
7

8
<MainGridLayout title={i18n(I18nKey.series)}>
9
    <SeriesPanel></SeriesPanel>
10
</MainGridLayout>

1
---
2
import { UNCATEGORIZED } from '@constants/constants'
3
import I18nKey from '../i18n/i18nKey'
4
import { i18n } from '../i18n/translation'
5
import { getSortedPosts } from '../utils/content-utils'
6
import { getPostUrlBySlug } from '../utils/url-utils'
7
import { getCategoryUrl } from '../utils/url-utils'
8

9
interface Props {
10
  keyword?: string
11
  tags?: string[]
12
  categories?: string[]
13
}
14

15
let posts = await getSortedPosts()
16

17
interface Series {
18
  count: number
19
  name: string
20
  posts: typeof posts
21
}
22

23
const groups: { category: string; series: Series[] }[] = (() => {
24
  const groupedSeries = posts.reduce(
25
    (grouped: { [category: string]: {[seriesName: string]: Series} }, post) => {
26
      const category = post.data.category || UNCATEGORIZED
27
      const series = post.data.series || UNCATEGORIZED
28
      if (category == UNCATEGORIZED || series === UNCATEGORIZED) {
29
        return grouped
30
      }
31
      if (!grouped[category]) {
32
        grouped[category] = {}
33
      }
34
      if (!grouped[category][series]) {
35
        grouped[category][series] = {
36
          count: 0,
37
          name: series,
38
          posts: [],
39
        }
40
      }
41
      grouped[category][series].count++
42
      grouped[category][series].posts.push(post)
43
      return grouped
44
    },
45
    {},
46
  )
47

48
  // convert the object to an array
49
  const groupedSeriesArray = Object.keys(groupedSeries).map(key => ({
50
    category: key,
51
    series: Object.values(groupedSeries[key]),
52
  }))
53

54
  return groupedSeriesArray
55
})()
56
---
57

58
<div class="card-base px-8 py-6">
59
    {
60
        groups.map(group => (
61
            <div>
62
                <div class="flex flex-row w-full items-center h-[3.75rem]">
63
                    <div class="w-[20%] md:w-[15%] transition text-2xl font-bold text-right text-75 flex flex-row justify-end">
64
                      <a aria-label={group.category} href={getCategoryUrl(group.category)}
65
                          class="btn-plain scale-animation rounded-lg h-11 font-bold px-2 active:scale-95"
66
                      >
67
                          {group.category}
68
                      </a>
69
                    </div>
70
                    <div class="w-[15%] md:w-[10%]">
71
                        <div class="h-3 w-3 bg-none rounded-full outline outline-[var(--primary)] mx-auto -outline-offset-[2px] z-50 outline-3"></div>
72
                    </div>
73
                    <div class="w-[65%] md:w-[75%] transition text-left text-50">{group.series.length} 个{i18n(I18nKey.series)}</div>
74
                </div>
75
                {group.series.map(series => (
76
                    <a href={getPostUrlBySlug(series.posts[series.posts.length-1].slug)}
77
                       aria-label={series.name}
78
                       class="group btn-plain !block h-10 w-full rounded-lg hover:text-[initial]"
79
                    >
80
                        <div class="flex flex-row justify-start items-center h-full">
81
                            <!-- count -->
82
                            <div class="w-[20%] md:w-[15%] transition text-sm text-right text-50">
83
                                { series.count } 篇文章
84
                            </div>
85
                            <!-- dot and line -->
86
                            <div class="w-[15%] md:w-[10%] relative dash-line h-full flex items-center">
87
                                <div class="transition-all mx-auto w-1 h-1 rounded group-hover:h-5
88
                                bg-[oklch(0.5_0.05_var(--hue))] group-hover:bg-[var(--primary)]
89
                                outline outline-4 z-50
90
                                outline-[var(--card-bg)]
91
                                group-hover:outline-[var(--btn-plain-bg-hover)]
92
                                group-active:outline-[var(--btn-plain-bg-active)]
93
                                "
94
                                ></div>
95
                            </div>
96
                            <!-- post title -->
97
                            <div class="w-[65%] md:max-w-[75%] md:w-[75%] text-left font-bold
98
                                group-hover:translate-x-1 transition-all group-hover:text-[var(--primary)]
99
                                text-75 pr-8 whitespace-nowrap overflow-ellipsis overflow-hidden"
100
                            >
101
                                    {series.name}
102
                            </div>
103
                        </div>
104
                    </a>
105
                ))}
106
            </div>
107
        ))
108
    }
109
</div>