vielle.dev
[Archived] Archived WIP of vielle.dev
add setup from previos project (all assets , test posts, collections , and rss feed)
+1
astro.config.mjs
+1
astro.config.mjs
posts/assets/mc_map.png
posts/assets/mc_map.png
This is a binary file and will not be displayed.
posts/assets/mc_map_art.png
posts/assets/mc_map_art.png
This is a binary file and will not be displayed.
+11
posts/test copy 2.md
+11
posts/test copy 2.md
+8
posts/test copy 3.md
+8
posts/test copy 3.md
+9
posts/test copy.md
+9
posts/test copy.md
+11
posts/test.md
+11
posts/test.md
+13
posts/test.mdx
+13
posts/test.mdx
···
1
+
---
2
+
title: Test Post
3
+
---
4
+
5
+
import Balloon from "@components/blog/balloon.svelte"
6
+
7
+
whats this about dawg
8
+
9
+
<div style="padding: 15rem;"></div>
10
+
11
+
<div style="position: absolute">
12
+
<Balloon client:load id={0} boundingWidth={300} boundingHeight={0} />
13
+
</div>
+3
public/favicon.svg
+3
public/favicon.svg
+78
src/assets/arrow.svg.astro
+78
src/assets/arrow.svg.astro
···
1
+
---
2
+
interface Props {
3
+
class: string;
4
+
style: string;
5
+
}
6
+
7
+
const { class: className, style } = Astro.props;
8
+
---
9
+
10
+
<svg
11
+
width="100"
12
+
height="20"
13
+
viewBox="0 0 26.458333 5.2916666"
14
+
class={className}
15
+
style={style}
16
+
>
17
+
<defs id="arrow">
18
+
<marker
19
+
id="DartArrow"
20
+
refX="0"
21
+
refY="0"
22
+
orient="auto-start-reverse"
23
+
markerWidth="0.75"
24
+
markerHeight="0.75"
25
+
viewBox="0 0 1 1"
26
+
preserveAspectRatio="xMidYMid"
27
+
markerUnits="strokeWidth"
28
+
>
29
+
<path d="M 0,0 5,-5 -12.5,0 5,5 Z" transform="scale(-0.5)" id="path6"
30
+
></path>
31
+
</marker>
32
+
</defs>
33
+
<g
34
+
id="layer1"
35
+
transform="matrix(0.8611475,0.06332518,-0.05355696,1.0182114,1.9248292,-1.3174538)"
36
+
>
37
+
<path
38
+
d="m 0.24644479,2.3103471 c 0,0 4.07342911,2.4441516 11.16257621,2.4441516 7.089149,0 11.162682,-2.4441342 11.162682,-2.4441342"
39
+
id="path1"></path>
40
+
</g>
41
+
</svg>
42
+
43
+
<style>
44
+
.line {
45
+
position: absolute;
46
+
display: block;
47
+
48
+
width: var(--width);
49
+
height: calc(var(--width) / 5);
50
+
51
+
transform: rotate(var(--angle)) scaleY(var(--scaleY, 1));
52
+
transform-origin: top left;
53
+
54
+
top: var(--y);
55
+
left: var(--x);
56
+
57
+
stroke-width: 0.957978;
58
+
stroke-dasharray: none;
59
+
marker-end: url(#DartArrow);
60
+
61
+
stroke: var(--colour);
62
+
filter: drop-shadow(0 0 0.25rem black);
63
+
fill: none;
64
+
65
+
.location:hover & {
66
+
filter: drop-shadow(0 0 0.5rem var(--colour));
67
+
}
68
+
}
69
+
70
+
#arrow marker {
71
+
overflow: visible;
72
+
}
73
+
#arrow path {
74
+
fill: context-stroke;
75
+
fill-rule: evenodd;
76
+
stroke: none;
77
+
}
78
+
</style>
src/assets/mc_map.png
src/assets/mc_map.png
This is a binary file and will not be displayed.
src/assets/mc_map_contents.png
src/assets/mc_map_contents.png
This is a binary file and will not be displayed.
+24
src/content.config.ts
+24
src/content.config.ts
···
1
+
import { defineCollection, z } from "astro:content";
2
+
import { glob } from "astro/loaders";
3
+
4
+
const blog = defineCollection({
5
+
loader: glob({ pattern: "**/*.md", base: "./src/posts" }),
6
+
schema: z.object({
7
+
title: z.string(),
8
+
date: z.date(),
9
+
image: z.object({
10
+
src: z.string(),
11
+
alt: z.string(),
12
+
}),
13
+
hasMdx: z.boolean().default(false),
14
+
}),
15
+
});
16
+
17
+
const blogMdx = defineCollection({
18
+
loader: glob({ pattern: "**/*.mdx", base: "./src/posts" }),
19
+
schema: z.object({
20
+
title: z.string(),
21
+
})
22
+
})
23
+
24
+
export const collections = { blog, blogMdx };
+98
src/layouts/base.astro
+98
src/layouts/base.astro
···
1
+
---
2
+
interface Props {
3
+
title: string;
4
+
dataset?: Record<string, any>;
5
+
[key: string]: any;
6
+
}
7
+
8
+
const { title, dataset, ...body } = Astro.props;
9
+
10
+
const 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
+
<!-- per page info -->
32
+
<slot name="head" />
33
+
<!-- default styles (rem, *) -->
34
+
<style is:global>
35
+
:root {
36
+
font-size: 62.5%;
37
+
}
38
+
body {
39
+
font-size: 1.6rem;
40
+
line-height: 1.5;
41
+
-webkit-font-smoothing: antialiased;
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
+
</style>
92
+
93
+
<script></script>
94
+
</head>
95
+
<body {...fixDSObj(dataset)} {...body}>
96
+
<slot />
97
+
</body>
98
+
</html>
+7
src/pages/index.astro
+7
src/pages/index.astro
+21
src/pages/rss.xml.js
+21
src/pages/rss.xml.js
···
1
+
import rss from "@astrojs/rss";
2
+
import { getCollection } from "astro:content";
3
+
import MarkdownIt from "markdown-it";
4
+
const parser = new MarkdownIt();
5
+
6
+
export async function GET(context) {
7
+
const blog = await getCollection("blog");
8
+
return rss({
9
+
title: "testing",
10
+
description: "weeeeeeeeeeeeeeeeeeee",
11
+
site: context.site,
12
+
items: blog.map((post) => ({
13
+
title: post.data.title,
14
+
pubDate: post.data.date,
15
+
description: post.data.description,
16
+
link: `/blog/${post.id}`,
17
+
content: parser.render(`# ${post.data.title}\n\n${post.body}`),
18
+
})),
19
+
customData: `<language>en-GB</language>`,
20
+
});
21
+
}
+1
src/posts
+1
src/posts
···
1
+
../posts