Mirror of
feat: clean index page
+180
-7
-3
starlight/astro.config.mjs
-3
starlight/astro.config.mjs
+3
-3
starlight/package.json
+3
-3
starlight/package.json
···
5
5
"scripts": {
6
6
"astro": "astro",
7
7
"build": "astro build",
8
-
"dev": "astro dev --port 4322",
9
-
"preview": "astro preview --port 4322",
10
-
"start": "astro dev --port 4322",
8
+
"dev": "astro dev",
9
+
"preview": "astro preview",
10
+
"start": "astro dev",
11
11
"lunaria:build": "lunaria build",
12
12
"lunaria:preview": "lunaria preview"
13
13
},
+1
-1
starlight/src/components/ContentNotice.astro
+1
-1
starlight/src/components/ContentNotice.astro
+143
starlight/src/components/IndexPostList.astro
+143
starlight/src/components/IndexPostList.astro
···
1
+
---
2
+
import type { StarlightBlogData } from "starlight-blog/data";
3
+
const starlightBlogData = Astro.locals.starlightBlog;
4
+
5
+
const postsByYear = starlightBlogData.posts.reduce<
6
+
Record<string, StarlightBlogData["posts"]>
7
+
>((acc, post) => {
8
+
const year = post.createdAt.getFullYear().toString();
9
+
if (!acc[year]) acc[year] = [];
10
+
acc[year].push(post);
11
+
return acc;
12
+
}, {});
13
+
14
+
// Sort years descending
15
+
const sortedYears = Object.keys(postsByYear).sort(
16
+
(a, b) => Number(b) - Number(a)
17
+
);
18
+
---
19
+
20
+
<div class="not-content">
21
+
{
22
+
sortedYears.map((year) => (
23
+
<div class="year-section">
24
+
<div class="year-label">{year}</div>
25
+
<div class="posts">
26
+
{postsByYear[year]
27
+
.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())
28
+
.map((post) => (
29
+
<div class="post">
30
+
<a href={post.href}>
31
+
<span class="post-title">{post.title}</span>
32
+
<span class="post-separator">•</span>
33
+
<span class="post-meta">
34
+
<span>
35
+
{post.authors
36
+
.map((a) => a.name)
37
+
.filter((a) => a != "Artificial Intelligence")
38
+
.join(", ")}
39
+
</span>
40
+
<span class="little-post-separator">•</span>
41
+
<span>{post.metrics.readingTime.minutes}min</span>
42
+
</span>
43
+
</a>
44
+
</div>
45
+
))}
46
+
</div>
47
+
</div>
48
+
))
49
+
}
50
+
</div>
51
+
52
+
<style>
53
+
.year-section {
54
+
position: relative;
55
+
margin-bottom: 4rem;
56
+
}
57
+
58
+
.year-label {
59
+
font-size: 16rem;
60
+
top: -14rem;
61
+
left: 0;
62
+
color: var(--sl-color-gray-7);
63
+
font-weight: bold;
64
+
position: absolute;
65
+
pointer-events: none;
66
+
z-index: 0;
67
+
}
68
+
69
+
.posts {
70
+
position: relative;
71
+
z-index: 1;
72
+
margin-top: 12rem;
73
+
margin-inline: 4rem;
74
+
}
75
+
76
+
.post,
77
+
.post > a {
78
+
padding-block: 0.5rem;
79
+
}
80
+
81
+
a {
82
+
text-decoration: none;
83
+
color: inherit;
84
+
}
85
+
86
+
.post-separator {
87
+
display: inline;
88
+
color: var(--sl-color-white);
89
+
margin-inline: 1rem;
90
+
}
91
+
92
+
.little-post-separator {
93
+
margin-inline: 0.5rem;
94
+
}
95
+
96
+
.post-title {
97
+
display: inline;
98
+
font-weight: 500;
99
+
font-size: 1rem;
100
+
transition: color 0.1s ease-in-out;
101
+
}
102
+
103
+
.post > a:hover > .post-title {
104
+
color: var(--sl-color-accent);
105
+
}
106
+
107
+
.post-meta {
108
+
color: var(--sl-color-gray-3);
109
+
font-size: 0.875rem;
110
+
transition: color 0.1s ease-in-out;
111
+
}
112
+
113
+
.post > a:hover > .post-meta {
114
+
color: var(--sl-color-gray-2);
115
+
}
116
+
117
+
@media (max-width: 72rem) {
118
+
:is(.year-section, .posts, .post, .post-title, .post-meta) {
119
+
text-align: center;
120
+
}
121
+
122
+
.year-label {
123
+
font-size: 8rem;
124
+
top: -1rem;
125
+
left: 50%;
126
+
transform: translateX(-50%);
127
+
}
128
+
129
+
.post-title {
130
+
display: block;
131
+
}
132
+
133
+
.post-separator {
134
+
display: none;
135
+
}
136
+
}
137
+
</style>
138
+
139
+
<style is:global>
140
+
.sl-container:has(h1) {
141
+
display: none;
142
+
}
143
+
</style>
+11
starlight/src/content/docs/de/index.mdx
+11
starlight/src/content/docs/de/index.mdx
+11
starlight/src/content/docs/fr/index.mdx
+11
starlight/src/content/docs/fr/index.mdx