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