vielle.dev
Personal Site
Add markdown layout component
+70
+70
src/components/Markdown.astro
+70
src/components/Markdown.astro
···
1
+
---
2
+
import Base from "./Base.astro";
3
+
4
+
import Box2x1Mask from "/assets/box-2x1-mask.png";
5
+
import Hr from "/assets/hr.png";
6
+
7
+
import "/components/markdown.css";
8
+
9
+
interface Props {
10
+
frontmatter: {
11
+
title: string;
12
+
graph?: {
13
+
description: string;
14
+
type?: "website" | "article" | `${"music" | "video"}.${string}`;
15
+
image?: string;
16
+
};
17
+
};
18
+
}
19
+
20
+
const { frontmatter } = Astro.props;
21
+
---
22
+
23
+
<Base
24
+
title={frontmatter.title}
25
+
graph={{
26
+
description: "",
27
+
...frontmatter.graph,
28
+
url: Astro.url.toString(),
29
+
}}
30
+
>
31
+
<header style={`--box-2x1-mask-png: url(${Box2x1Mask.src});`}>
32
+
{frontmatter.graph?.image && <img src={frontmatter.graph.image} alt="" />}
33
+
<h1>{frontmatter.title}</h1>
34
+
</header>
35
+
36
+
<hr style={`--hr-png: url(${Hr.src});`} />
37
+
38
+
<article>
39
+
<slot />
40
+
</article>
41
+
</Base>
42
+
43
+
<style>
44
+
header {
45
+
max-width: 60ch;
46
+
padding: 10px;
47
+
margin: auto;
48
+
}
49
+
50
+
img {
51
+
width: 100%;
52
+
aspect-ratio: 2;
53
+
object-fit: cover;
54
+
mask-image: var(--box-2x1-mask-png);
55
+
mask-size: 100%;
56
+
}
57
+
58
+
hr {
59
+
margin-block: 5px;
60
+
height: 5px;
61
+
border: none;
62
+
border-image: var(--hr-png) 0 5 fill / 0 5px round;
63
+
width: clamp(60ch, 80vw, 120ch);
64
+
margin-inline: auto;
65
+
66
+
@media (max-width: 60ch) {
67
+
width: 100%;
68
+
}
69
+
}
70
+
</style>