[Archived] Archived WIP of vielle.dev
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 ? `${title} | vielle.dev` : "vielle.dev"}</title>
31 <script>
32 // sets the timezone offset
33 document.cookie = `timezone=${new Date().toString()};path=/`;
34 </script>
35 <!-- default styles -->
36 <style is:global>
37 @layer reset {
38 body {
39 line-height: 1.5;
40 -webkit-font-smoothing: antialiased;
41 font-family: sans-serif;
42 }
43
44 *,
45 *::before,
46 *::after {
47 margin: 0;
48 padding: 0;
49 box-sizing: border-box;
50 appearance: none;
51 }
52
53 img,
54 picture,
55 video,
56 canvas,
57 svg {
58 display: block;
59 max-width: 100%;
60 }
61
62 input,
63 button,
64 textarea,
65 select {
66 font: inherit;
67 }
68
69 /* 7. Avoid text overflows */
70 p,
71 h1,
72 h2,
73 h3,
74 h4,
75 h5,
76 h6 {
77 overflow-wrap: break-word;
78 }
79
80 p {
81 text-wrap: pretty;
82 }
83 h1,
84 h2,
85 h3,
86 h4,
87 h5,
88 h6 {
89 text-wrap: balance;
90 }
91 }
92 </style>
93 </head>
94 <body {...fixDSObj(dataset)} {...body}>
95 <slot />
96 </body>
97</html>