vielle.dev
[Archived] Archived WIP of vielle.dev
Improve accessibility
- no alt text for post heading images as decorative
- add [role] [aria-label] and <title /> for SVG components
- Add date formatting and <time /> element to posts
+1
-3
posts/serious.md
+1
-3
posts/serious.md
···
2
2
title: Addressing the Allegations
3
3
date: 2999-12-31
4
4
colour: "#008282"
5
-
image:
6
-
src: "minecraft.png"
7
-
alt: "Highland cows from minecraft"
5
+
image: "minecraft.png"
8
6
---
9
7
10
8
The Defence of the Realm Act 1914 (4 & 5 Geo. 5. c. 29) (DORA) was passed in the United Kingdom on 8 August 1914, four days after the country entered the First World War. It was added to as the war progressed. It gave the government wide-ranging powers during the war, such as the power to requisition buildings or land needed for the war effort, and to make regulations creating criminal offences.
+1
-3
posts/test copy 2.md
+1
-3
posts/test copy 2.md
+1
-3
posts/test copy 3.md
+1
-3
posts/test copy 3.md
+1
-3
posts/test copy.md
+1
-3
posts/test copy.md
+1
-3
posts/test.md
+1
-3
posts/test.md
+29
-6
src/components/blog/Post.astro
+29
-6
src/components/blog/Post.astro
···
12
12
13
13
const { id, data, layer } = Astro.props;
14
14
15
-
const img = data.image.src.match(/.*(?=\.png)/gm);
16
-
if (img === null) return;
17
-
const { default: image } = await import(`../../posts/assets/${img[0]}.png`);
15
+
// const img = data.image.match(/.*(?=\.png)/gm);
16
+
// if (img === null) return;
17
+
// const { default: image } = await import(`../../posts/assets/${img[0]}.png`);
18
+
19
+
const image = await (async () => {
20
+
if (!data.image) return;
21
+
const img = data.image.match(/.*(?=\.png)/gm);
22
+
if (img === null) return;
23
+
return await import(`../../posts/assets/${img[0]}.png`).then(
24
+
(x) => x.default
25
+
);
26
+
})();
27
+
28
+
const date = (() => {
29
+
const year = data.date.getFullYear() + "";
30
+
const month = data.date.getMonth() + "";
31
+
const day = data.date.getDay() + "";
32
+
33
+
return {
34
+
year: "0".repeat(4 - year.length) + year,
35
+
month: "0".repeat(2 - month.length) + month,
36
+
day: "0".repeat(2 - day.length) + day,
37
+
};
38
+
})();
18
39
19
40
const positions: [number, number] = [Math.random(), Math.random()];
20
41
const offsets: [number, number][] = [
···
44
65
.map(
45
66
(x, i) =>
46
67
`--x-offset-${i}: calc((100svw - ${blog.post.width + 2 * blog.post.xPadding}rem) * ${positions[0] + x[0]} + ${blog.post.xPadding}rem);
47
-
--y-offset-${i}: ${blog.post.yLeeway * 2 * (positions[1] + x[1]) - blog.post.yLeeway}rem;`,
68
+
--y-offset-${i}: ${blog.post.yLeeway * 2 * (positions[1] + x[1]) - blog.post.yLeeway}rem;`
48
69
)
49
70
.join("\n")}
50
71
···
60
81
`}
61
82
href={`/blog/${id}/`}
62
83
>
63
-
<Image src={image} alt={data.image.alt} />
84
+
<Image src={image} alt="" />
64
85
<div>
65
86
({id}) {data.title}
66
87
<br />
67
-
{data.date.toLocaleString()}
88
+
<time datetime={`${date.year}-${date.month}-${date.day}`}
89
+
>{date.day}-{date.month}-{date.year}</time
90
+
>
68
91
</div>
69
92
</a>
70
93
+3
src/components/blog/background/Cloud.astro
+3
src/components/blog/background/Cloud.astro
···
48
48
<svg
49
49
viewBox={`-${blog.background.clouds.bumpRadius[1]} -${blog.background.clouds.bumpRadius[1]} ${2 * (r + blog.background.clouds.bumpRadius[1])} ${r + blog.background.clouds.bumpRadius[1]}`}
50
50
preserveAspectRatio="none"
51
+
aria-label=""
52
+
role="img"
51
53
{...Astro.props}
52
54
>
55
+
<title></title>
53
56
<defs>
54
57
<clipPath id={`cloud-clip-${Astro.props.id}`}>
55
58
{
+3
-1
src/components/blog/background/Clouds.astro
+3
-1
src/components/blog/background/Clouds.astro
+4
-1
src/components/blog/background/Moon.astro
+4
-1
src/components/blog/background/Moon.astro
···
23
23
width="100"
24
24
height="100"
25
25
style={`--parallax-speed: ${blog.background.parallax.moon}`}
26
-
data-parallax
26
+
data-parallax role="img"
27
+
aria-label=""
28
+
27
29
>
30
+
<title></title>
28
31
<defs>
29
32
<clipPath id="shadow">
30
33
<rect x={phase < 0.5 ? "0" : "100"} y="0" width="100" height="200"></rect>
+4
-1
src/components/blog/background/Stars.astro
+4
-1
src/components/blog/background/Stars.astro
···
39
39
const prongs = Math.round(
40
40
blog.background.stars.prongs[0] +
41
41
Math.random() *
42
-
(blog.background.stars.prongs[1] - blog.background.stars.prongs[0]),
42
+
(blog.background.stars.prongs[1] - blog.background.stars.prongs[0])
43
43
);
44
44
45
45
return (
···
54
54
version="1.1"
55
55
xmlns="http://www.w3.org/2000/svg"
56
56
viewBox="0 0 100 100"
57
+
role="img"
58
+
aria-label=""
57
59
>
60
+
<title />
58
61
{new Array(prongs).fill(0).map((_, i) => (
59
62
<polygon
60
63
fill="#ffffff"
+3
src/components/blog/background/Sun.astro
+3
src/components/blog/background/Sun.astro
+3
-5
src/content.config.ts
+3
-5
src/content.config.ts
···
7
7
title: z.string(),
8
8
date: z.date(),
9
9
colour: z.string(),
10
-
image: z.object({
11
-
src: z.string().refine(
10
+
// no alt (empty as decorative)
11
+
image: z.string().refine(
12
12
(value) => value.endsWith(".png"),
13
13
(val) => ({
14
14
message: `${val} must end with .png`,
15
15
}),
16
-
),
17
-
alt: z.string(),
18
-
}),
16
+
).optional(),
19
17
hasMdx: z.boolean().default(false),
20
18
}),
21
19
});