vielle.dev
[Archived] Archived WIP of vielle.dev
1---
2interface Props {
3 title: string;
4 dataset?: Record<string, any>;
5 [key: string]: any;
6}
7
8const { title, dataset, ...body } = Astro.props;
9
10const fixDSObj = (obj: Record<string, any> | undefined) => {
11 const newObj: Record<string, any> = {};
12 for (const key in obj) {
13 newObj[`data-${key}`] = obj[key];
14 }
15 return newObj;
16};
17---
18
19<html lang="en">
20 <head>
21 <!-- metadata -->
22 <meta charset="utf-8" />
23 <link
24 rel="icon"
25 href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🪤</text></svg>"
26 />
27 <meta name="viewport" content="width=device-width" />
28 <meta name="generator" content={Astro.generator} />
29 <link rel="sitemap" href="/sitemap-index.xml" />
30 <title>{title} | vielle.dev</title>
31 <script>
32 // sets the timezone offset
33 document.cookie = `timezone=${new Date().toString()}`;
34 </script>
35 <!-- default styles (rem, *) -->
36 <style is:global>
37 @layer reset {
38 :root {
39 font-size: 62.5%;
40 }
41 body {
42 font-size: 1.6rem;
43 line-height: 1.5;
44 -webkit-font-smoothing: antialiased;
45 font-family: sans-serif;
46 }
47
48 *,
49 *::before,
50 *::after {
51 margin: 0;
52 padding: 0;
53 box-sizing: border-box;
54 appearance: none;
55 }
56
57 img,
58 picture,
59 video,
60 canvas,
61 svg {
62 display: block;
63 max-width: 100%;
64 }
65
66 input,
67 button,
68 textarea,
69 select {
70 font: inherit;
71 }
72
73 /* 7. Avoid text overflows */
74 p,
75 h1,
76 h2,
77 h3,
78 h4,
79 h5,
80 h6 {
81 overflow-wrap: break-word;
82 }
83
84 p {
85 text-wrap: pretty;
86 }
87 h1,
88 h2,
89 h3,
90 h4,
91 h5,
92 h6 {
93 text-wrap: balance;
94 }
95 }
96 </style>
97 </head>
98 <body {...fixDSObj(dataset)} {...body}>
99 <slot />
100 </body>
101</html>