vielle.dev
Personal Site
Preload assets when imported
+17
-12
src/components/Header.astro
+17
-12
src/components/Header.astro
···
1
1
---
2
2
import { urls, type nav } from "/site-config";
3
+
import boxBlr from "/assets/box-blr.png";
4
+
import dot from "/assets/dot.png";
5
+
import boxTlbr from "/assets/box-tlbr.png";
3
6
4
7
const betweenArr = <A, I>(arr: A[], item: I): (A | I)[] =>
5
8
arr.flatMap((x, i) => (i !== 0 ? [item, x] : [x]));
···
16
19
};
17
20
---
18
21
19
-
<header>
22
+
<link rel="preload" href={boxBlr.src} as="image" />
23
+
<link rel="preload" href={dot.src} as="image" />
24
+
<link rel="preload" href={boxTlbr.src} as="image" />
25
+
26
+
<header style={`--box-blr-png: url("${boxBlr.src}")`}>
20
27
<h1>vielle.dev</h1>
21
28
22
29
<nav>
23
-
<ul>
30
+
<ul
31
+
style={`--dot-png: url("${dot.src}");
32
+
--box-tlbr-png: url("${boxTlbr.src}")`}
33
+
>
24
34
{
25
35
(() => {
26
36
const name = (url: nav) =>
27
37
url.slug ? (
28
38
<a href={url.slug}>
29
-
{/* {betweenArr(url.name.split("­"), <>­</>).flatMap((x) =>
30
-
typeof x === "string"
31
-
? betweenArr(x.split("<wbr>"), <wbr />)
32
-
: x,
33
-
)} */}
34
39
{strToX(url.name, [
35
40
["­", <>­</>],
36
41
["<wbr>", <wbr />],
···
67
72
<style>
68
73
header {
69
74
image-rendering: pixelated;
70
-
border-image: url("../assets/box-blr.png") 10 fill / 10px / 10px round;
75
+
border-image: var(--box-blr-png) 10 fill / 10px / 10px round;
71
76
margin: 0 10px 10px;
72
77
padding: 10px 20px;
73
78
overflow: auto;
···
80
85
@media (max-width: 600px) {
81
86
flex-direction: column;
82
87
align-items: start;
83
-
nav, h1 {
88
+
nav,
89
+
h1 {
84
90
margin-inline: auto;
85
91
}
86
92
}
···
106
112
& + &::before {
107
113
content: "";
108
114
image-rendering: pixelated;
109
-
background-image: url("../assets/dot.png");
115
+
background-image: var(--dot-png);
110
116
background-size: contain;
111
117
width: 9px;
112
118
height: 9px;
···
124
130
> ul {
125
131
position: absolute;
126
132
127
-
128
133
margin-top: 10px;
129
134
padding: 15px;
130
-
border-image: url("../assets/box-tlbr.png") 10 fill / 10px round;
135
+
border-image: var(--box-tlbr-png) 10 fill / 10px round;
131
136
132
137
padding-left: 25px;
133
138
& ul {