30 files changed, 167 insertions, 171 deletions
diff --git a/src/404.vto b/src/404.vto
deleted file mode 100644
index 04ba499..0000000
--- a/src/404.vto
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: "404!"
-description: "404!"
-layout: page.vto
----
-
-<div class="space-y-5">
-	<h1>404! :(</h1>
-
-	<img
-		src="/imgs/tapwater.png"
-		class="my-5"
-		decoding="async"
-		alt="can i get you some tapwater?"
-	/>
-</div>
diff --git a/src/_components/footer.vto b/src/_components/footer.vto
deleted file mode 100644
index 47ee617..0000000
--- a/src/_components/footer.vto
+++ /dev/null
@@ -1,78 +0,0 @@
-<footer class="text-xs text-subtext1 my-10 text-right space-y-2">
-	<div class="hidden md:flex flex-wrap justify-around">
-		<img
-			src="/imgs/gifs/acab.gif"
-			width="88"
-			height="31"
-			loading="lazy"
-			decoding="async"
-			alt="ACAB!"
-		>
-		<img
-			src="/imgs/gifs/arnold.gif"
-			width="88"
-			height="31"
-			loading="lazy"
-			decoding="async"
-			alt="Hey Arnold!"
-		>
-		<img
-			src="/imgs/gifs/capitalism.gif"
-			width="88"
-			height="31"
-			loading="lazy"
-			decoding="async"
-			alt="Let's crush capitalism!"
-		/>
-		<img
-			src="/imgs/gifs/legalize.gif"
-			width="88"
-			height="31"
-			loading="lazy"
-			decoding="async"
-			alt="Legalize marijuana now!"
-		>
-		<a href="https://github.com/sakecode">
-			<!--
-				Powered by NixOS © 2023 by Sake is licensed under (CC BY-NC-SA 4.0)
-				To view the source visit: https://github.com/sakecode/Sake-s-SVGs 
-				To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/4.0/
-			-->
-			<img
-				src="/imgs/gifs/poweredbynix.svg"
-				width="88"
-				height="31"
-				decoding="async"
-				alt="Powered by NixOS"
-			/>
-		</a>
-		<img
-			src="/imgs/gifs/pride.gif"
-			width="88"
-			height="31"
-			loading="lazy"
-			decoding="async"
-			alt="LGBTQ Pride now!"
-		/>
-		<a href="https://dnsense.pub/">
-			<img
-				src="/imgs/gifs/steam.gif"
-				width="88"
-				height="31"
-				loading="lazy"
-				decoding="async"
-				alt="Play on Steam!"
-			/>
-		</a>
-		<img
-			src="/imgs/gifs/weezer.gif"
-			width="88"
-			height="31"
-			loading="lazy"
-			decoding="async"
-			alt="Weezer fan"
-		/>
-	</div>
-	
-	<p>Served from commit {{ gitCommit }} (<a href="https://github.com/getchoo/website">source</a>)</p>
-</footer>
diff --git a/src/_components/head.vto b/src/_components/head.vto
deleted file mode 100644
index 551ca45..0000000
--- a/src/_components/head.vto
+++ /dev/null
@@ -1,8 +0,0 @@
-<head>
-	<meta charset="UTF-8" />
-	<title>{{ title }}</title>
-	<meta name="viewport" content="width=device-width,initial-scale=1" />
-	<meta name="description" content={{ description }} />
-	<link rel="stylesheet" href="/global.css" />
-	<link rel="sitemap" href="/sitemap.xml" />
-</head>
diff --git a/src/_components/nav.vto b/src/_components/nav.vto
deleted file mode 100644
index c159e14..0000000
--- a/src/_components/nav.vto
+++ /dev/null
@@ -1,9 +0,0 @@
-<nav class="space-y-5 text-xl my-5">
-	<p>
-		{{ for item of links }}
-			<a href={{ item.url }}>{{ item.name }}</a>
-		{{ /for }}
-	</p>
-
-	<hr>
-</nav>
diff --git a/src/_includes/page.vto b/src/_includes/page.vto
deleted file mode 100644
index 616ae4c..0000000
--- a/src/_includes/page.vto
+++ /dev/null
@@ -1,23 +0,0 @@
----
-links:
-  - name: home
-    url: "/"
-  - name: miniflux
-    url: "https://miniflux.mydadleft.me"
-  - name: github
-    url: "https://github.com/getchoo"
----
-
-
-<!DOCTYPE HTML>
-<html lang="en">
-{{ comp.head({ title, description }) }}
-<body class="bg-base text-text p-5 lg:p-0 text-md md:text-lg antialiased max-w-screen-md mx-auto my-10">
-	<h1>
-		<b>getchoo's website 🦕</b>
-	</h1>
-	{{ comp.nav({ links }) }}
-	{{ content }}
-	{{ comp.footer() }}
-</body>
-</html>
diff --git a/src/public/imgs/gifs/acab.gif b/src/assets/gifs/acab.gif
index 6f8ccef..6f8ccef 100644
--- a/src/public/imgs/gifs/acab.gif
+++ b/src/assets/gifs/acab.gif
diff --git a/src/public/imgs/gifs/arnold.gif b/src/assets/gifs/arnold.gif
index 0035988..0035988 100644
--- a/src/public/imgs/gifs/arnold.gif
+++ b/src/assets/gifs/arnold.gif
diff --git a/src/public/imgs/gifs/capitalism.gif b/src/assets/gifs/capitalism.gif
index c4abb60..c4abb60 100644
--- a/src/public/imgs/gifs/capitalism.gif
+++ b/src/assets/gifs/capitalism.gif
diff --git a/src/assets/gifs/index.ts b/src/assets/gifs/index.ts
new file mode 100644
index 0000000..970985f
--- /dev/null
+++ b/src/assets/gifs/index.ts
@@ -0,0 +1,26 @@
+import acab from "./acab.gif";
+import arnold from "./arnold.gif";
+import capitalism from "./capitalism.gif";
+import legalize from "./legalize.gif";
+import poweredByNix from "./poweredbynix.svg";
+import pride from "./pride.gif";
+import steam from "./steam.gif";
+import weezer from "./weezer.gif";
+
+interface Gif {
+	gif: ImageMetadata;
+	alt: string;
+}
+
+const gifs: Gif[] = [
+	{ gif: acab, alt: "ACAB!" },
+	{ gif: arnold, alt: "Hey Arnold!" },
+	{ gif: capitalism, alt: "Let's crush capitalism!" },
+	{ gif: legalize, alt: "Legalize marijuana now!" },
+	{ gif: poweredByNix, alt: "Powered by NixOS" },
+	{ gif: pride, alt: "LGBTQ Pride now!" },
+	{ gif: steam, alt: "Play on Steam!" },
+	{ gif: weezer, alt: "Weezer fan" },
+];
+
+export default gifs;
diff --git a/src/public/imgs/gifs/legalize.gif b/src/assets/gifs/legalize.gif
index 071d4d4..071d4d4 100644
--- a/src/public/imgs/gifs/legalize.gif
+++ b/src/assets/gifs/legalize.gif
diff --git a/src/public/imgs/gifs/obras.gif b/src/assets/gifs/obras.gif
index 3c8443e..3c8443e 100644
--- a/src/public/imgs/gifs/obras.gif
+++ b/src/assets/gifs/obras.gif
diff --git a/src/public/imgs/gifs/poweredbynix.svg b/src/assets/gifs/poweredbynix.svg
index 0bc8c80..0bc8c80 100644
--- a/src/public/imgs/gifs/poweredbynix.svg
+++ b/src/assets/gifs/poweredbynix.svg
diff --git a/src/public/imgs/gifs/pride.gif b/src/assets/gifs/pride.gif
index 9a48896..9a48896 100644
--- a/src/public/imgs/gifs/pride.gif
+++ b/src/assets/gifs/pride.gif
diff --git a/src/public/imgs/gifs/steam.gif b/src/assets/gifs/steam.gif
index 1f4fe29..1f4fe29 100644
--- a/src/public/imgs/gifs/steam.gif
+++ b/src/assets/gifs/steam.gif
diff --git a/src/public/imgs/gifs/web3.gif b/src/assets/gifs/web3.gif
index 4f5a2f1..4f5a2f1 100644
--- a/src/public/imgs/gifs/web3.gif
+++ b/src/assets/gifs/web3.gif
diff --git a/src/public/imgs/gifs/weezer.gif b/src/assets/gifs/weezer.gif
index d7fa9d1..d7fa9d1 100644
--- a/src/public/imgs/gifs/weezer.gif
+++ b/src/assets/gifs/weezer.gif
diff --git a/src/public/imgs/construction.png b/src/assets/imgs/construction.png
index 1c038b0..1c038b0 100644
--- a/src/public/imgs/construction.png
+++ b/src/assets/imgs/construction.png
diff --git a/src/public/imgs/tapwater.png b/src/assets/imgs/tapwater.png
index e84fe8e..e84fe8e 100644
--- a/src/public/imgs/tapwater.png
+++ b/src/assets/imgs/tapwater.png
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
new file mode 100644
index 0000000..4f7286f
--- /dev/null
+++ b/src/components/Footer.astro
@@ -0,0 +1,30 @@
+---
+import { execa } from "execa";
+import Picture from "astro/components/Picture.astro";
+import gifs from "@assets/gifs";
+
+const { stdout: gitCommit } = await execa("git", ["rev-parse", "HEAD"]);
+---
+
+<footer class="text-xs text-subtext1 my-10 text-right space-y-2">
+	<div class="hidden md:flex flex-wrap justify-around">
+		{
+			gifs.map(({ gif, alt }) => {
+				const img = <Picture src={gif} alt={alt} formats={["gif"]} />;
+
+				if (gif.src.includes("steam.gif")) {
+					return <a href="https://dnsense.pub/">{img}</a>;
+				} else if (gif.src.includes("poweredbynix.svg")) {
+					return <a href="https://github.com/sakecode">{img}</a>;
+				} else {
+					return img;
+				}
+			})
+		}
+	</div>
+	<p>
+		Served from commit {gitCommit.substring(0, 8)} (<a
+			href="https://github.com/getchoo/website">source</a
+		>)
+	</p>
+</footer>
diff --git a/src/components/Head.astro b/src/components/Head.astro
new file mode 100644
index 0000000..f2f7835
--- /dev/null
+++ b/src/components/Head.astro
@@ -0,0 +1,23 @@
+---
+import "@fontsource-variable/noto-sans";
+import "@fontsource/noto-sans-mono";
+const { title, description } = Astro.props;
+---
+
+<head>
+	<meta charset="UTF-8" />
+	<title>{title}</title>
+	<meta name="viewport" content="width=device-width,initial-scale=1" />
+	<meta name="description" content={description} />
+	<link rel="sitemap" href="/sitemap-index.xm" />
+</head>
+<style is:global>
+	a {
+		text-decoration: underline;
+		@apply text-blue;
+	}
+
+	h1 {
+		@apply text-3xl md:text-4xl;
+	}
+</style>
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
new file mode 100644
index 0000000..c08662d
--- /dev/null
+++ b/src/components/Nav.astro
@@ -0,0 +1,28 @@
+---
+import config from "@root/astro.config.ts";
+
+interface NavLink {
+	name: string;
+	url: string;
+}
+
+const links: NavLink[] = [
+	{ name: "home", url: "/" },
+	{
+		name: "miniflux",
+		url: `https://miniflux.${Astro.url.hostname || config.site}`,
+	},
+	{
+		name: "github",
+		url: "https://github.com/getchoo",
+	},
+];
+---
+
+<nav class="space-y-5 text-xl my-5">
+	<p>
+		{links.map(({ name, url }) => <a href={url}>{name}</a>)}
+	</p>
+
+	<hr />
+</nav>
diff --git a/src/env.d.ts b/src/env.d.ts
new file mode 100644
index 0000000..f964fe0
--- /dev/null
+++ b/src/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="astro/client" />
diff --git a/src/global.sass b/src/global.sass
deleted file mode 100644
index 8fd7c0c..0000000
--- a/src/global.sass
+++ /dev/null
@@ -1,13 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500&display=swap')
-
-@tailwind base
-@tailwind components
-@tailwind utilities
-@tailwind variants
-
-a
-	text-decoration: underline
-	@apply text-blue
-
-h1
-	@apply text-3xl md:text-4xl
diff --git a/src/index.md b/src/index.md
deleted file mode 100644
index 138ec4a..0000000
--- a/src/index.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-title: "guzzle guzzle"
-description: "guzzle guzzle"
-layout: page.vto
----
-
-<a hidden rel="me" href="https://wetdry.world/@getchoo">my mastodon account</a>
-
-this is under construction. i'm experimenting with lume
-
-<img
-	src="/imgs/gifs/obras.gif"
-	width="106"
-	height="119"
-	class="m-10"
-	loading="lazy"
-	decoding="async"
-	alt="construction"
-/>
-
-[hehe funny click me](/lul)
diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
new file mode 100644
index 0000000..d8e216b
--- /dev/null
+++ b/src/layouts/Page.astro
@@ -0,0 +1,20 @@
+---
+import Footer from "@components/Footer.astro";
+import Head from "@components/Head.astro";
+import Nav from "@components/Nav.astro";
+
+const { frontmatter } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+	<Head title={frontmatter.title} description={frontmatter.description} />
+	<body
+		class="bg-base text-text p-5 lg:p-0 text-md md:text-lg antialiased max-w-screen-md mx-auto my-10"
+	>
+		<h1><b>getchoo's website 🚀</b></h1>
+		<Nav />
+		<slot />
+		<Footer />
+	</body>
+</html>
diff --git a/src/pages/404.mdx b/src/pages/404.mdx
new file mode 100644
index 0000000..4cf7cf6
--- /dev/null
+++ b/src/pages/404.mdx
@@ -0,0 +1,18 @@
+---
+layout: ../layouts/Page.astro
+title: 404
+description: Page not found!
+---
+
+import Picture from "astro/components/Picture.astro";
+import tapwater from "@assets/imgs/tapwater.png";
+
+<div class="space-y-5">
+	# 404! :(
+	<Picture
+		src={tapwater}
+		formats={["avif", "webp"]}
+		alt="Can i get you some tapwater?"
+		class="p-5"
+	/>
+</div>
diff --git a/src/pages/index.mdx b/src/pages/index.mdx
new file mode 100644
index 0000000..e8aae92
--- /dev/null
+++ b/src/pages/index.mdx
@@ -0,0 +1,18 @@
+---
+layout: ../layouts/Page.astro
+title: guzzle guzzle
+description: guzzle guzzle
+---
+
+import Picture from "astro/components/Picture.astro";
+import obras from "@assets/gifs/obras.gif";
+
+<a hidden rel="me" href="https://wetdry.world/@getchoo">
+	my mastodon account
+</a>
+
+this is under construction. i'm experimenting with astro
+
+<Picture src={obras} alt="Under construction" formats={["gif"]} class="m-10" />
+
+[hehe funny click me](/lul)
diff --git a/src/lul.vto b/src/pages/lul.mdx
index c24fd22..bc142f9 100644
--- a/src/lul.vto
+++ b/src/pages/lul.mdx
@@ -1,7 +1,7 @@
 ---
-title: "fard"
-description: "xd"
-layout: page.vto
+layout: ../layouts/Page.astro
+title: fard
+description: xd
 ---
 
 <video width="1280" height="720" controls autoplay muted>
diff --git a/src/public/favicon.ico b/src/public/favicon.ico
deleted file mode 100644
index 4880f14..0000000
--- a/src/public/favicon.ico
+++ /dev/null
diff --git a/src/public/files/rickroll.mp4 b/src/public/files/rickroll.mp4
deleted file mode 100644
index b988dc4..0000000
--- a/src/public/files/rickroll.mp4
+++ /dev/null