Fork of Chiri for Astro for my blog
perf: tweak css performance
+32
-30
+4
-4
astro.config.ts
+4
-4
astro.config.ts
···
32
32
rehypePlugins: [rehypeKatex, rehypeCleanup, rehypeImageProcessor, rehypeCopyCode]
33
33
},
34
34
integrations: [
35
-
mdx(),
36
-
sitemap(),
37
35
playformInline({
38
-
Path: ['./src/styles']
39
-
})
36
+
Exclude: [(file) => file.toLowerCase().includes('katex')]
37
+
}),
38
+
mdx(),
39
+
sitemap()
40
40
],
41
41
vite: {
42
42
resolve: {
+1
-1
src/components/layout/TransitionWrapper.astro
+1
-1
src/components/layout/TransitionWrapper.astro
+1
-1
src/components/ui/CopyCode.astro
+1
-1
src/components/ui/CopyCode.astro
+16
-18
src/components/ui/GitHubCard.astro
+16
-18
src/components/ui/GitHubCard.astro
···
147
147
document.addEventListener('astro:page-load', lazySetupGithubCards)
148
148
</script>
149
149
150
-
<style>
151
-
:global(.prose .gc-container) {
150
+
<style is:inline>
151
+
.prose .gc-container {
152
152
display: block;
153
153
border: 0.5px solid var(--border);
154
154
border-radius: 10px;
···
160
160
background: var(--astro-code-background);
161
161
}
162
162
163
-
:global(.prose .gc-container:hover) {
164
-
background: var(--code-bg);
163
+
.prose .gc-container:hover {
164
+
background: color-mix(in srgb, var(--selection) 60%, transparent);
165
165
text-decoration: none;
166
166
}
167
167
168
-
:global(.prose .gc-title-bar) {
168
+
.prose .gc-title-bar {
169
169
display: flex;
170
170
align-items: center;
171
171
gap: 0.75rem;
172
172
margin-bottom: 0.75rem;
173
173
}
174
174
175
-
:global(.prose .gc-owner-avatar) {
175
+
.prose .gc-owner-avatar {
176
176
width: 1.5rem;
177
177
height: 1.5rem;
178
178
border-radius: 50%;
···
180
180
flex-shrink: 0;
181
181
}
182
182
183
-
:global(.prose .gc-repo-title) {
183
+
.prose .gc-repo-title {
184
184
font-size: var(--font-size-xl);
185
185
font-weight: var(--font-weight-regular);
186
186
color: var(--text-primary);
187
187
flex-grow: 1;
188
188
}
189
189
190
-
:global(.prose .gc-repo-title strong) {
190
+
.prose .gc-repo-title strong {
191
191
font-weight: var(--font-weight-bold);
192
192
}
193
193
194
-
:global(.prose .gc-slash) {
194
+
.prose .gc-slash {
195
195
color: var(--text-secondary);
196
196
margin: 0 0.375rem;
197
197
}
198
198
199
-
:global(.prose .gc-github-icon) {
199
+
.prose .gc-github-icon {
200
200
width: 1.5rem;
201
201
height: 1.5rem;
202
202
color: var(--text-primary);
203
203
flex-shrink: 0;
204
204
}
205
205
206
-
:global(.prose .gc-repo-description) {
206
+
.prose .gc-repo-description {
207
207
font-size: var(--font-size-m);
208
208
color: var(--text-primary);
209
209
opacity: 0.75;
···
211
211
line-height: 1.4;
212
212
}
213
213
214
-
:global(.prose .gc-info-bar) {
214
+
.prose .gc-info-bar {
215
215
display: flex;
216
216
align-items: center;
217
217
color: var(--text-primary);
···
219
219
gap: 0.35rem;
220
220
}
221
221
222
-
:global(
223
-
.prose .gc-info-bar .gc-stars-count,
224
-
.prose .gc-info-bar .gc-forks-count,
225
-
.prose .gc-info-bar .gc-license-info
226
-
) {
222
+
.prose .gc-info-bar .gc-stars-count,
223
+
.prose .gc-info-bar .gc-forks-count,
224
+
.prose .gc-info-bar .gc-license-info {
227
225
margin-right: 0.675rem;
228
226
font-size: var(--font-size-s);
229
227
}
230
228
231
-
:global(.prose .gc-info-icon) {
229
+
.prose .gc-info-icon {
232
230
color: var(--text-primary);
233
231
width: 0.875rem;
234
232
height: 0.875rem;
+1
-1
src/components/ui/TableOfContents.astro
+1
-1
src/components/ui/TableOfContents.astro
+4
-4
src/components/ui/XPOST.astro
+4
-4
src/components/ui/XPOST.astro
···
23
23
document.addEventListener('astro:page-load', loadXCards)
24
24
</script>
25
25
26
-
<style>
27
-
:global(.prose .x-card) {
26
+
<style is:inline>
27
+
.prose .x-card {
28
28
width: 100%;
29
29
margin: 1em auto;
30
30
text-align: center;
31
31
}
32
32
33
-
:global(.prose .x-card > *) {
33
+
.prose .x-card > * {
34
34
display: inline-block;
35
35
max-width: 100%;
36
36
margin: 0 auto;
37
37
}
38
38
39
-
:global(.prose .x-card iframe) {
39
+
.prose .x-card iframe {
40
40
max-width: 100%;
41
41
width: auto;
42
42
}
+5
-1
src/components/widgets/FormattedDate.astro
+5
-1
src/components/widgets/FormattedDate.astro
···
3
3
import { formatDate } from '@/utils/date'
4
4
import type { FormattedDateProps } from '@/types'
5
5
6
-
const { date, format, context = 'default' } = Astro.props as FormattedDateProps & { context?: 'list' | 'post' | 'default' }
6
+
const {
7
+
date,
8
+
format,
9
+
context = 'default'
10
+
} = Astro.props as FormattedDateProps & { context?: 'list' | 'post' | 'default' }
7
11
---
8
12
9
13
<time