add 404/sitemap/robots.txt + improve random stuff

7 files changed, 139 insertions, 72 deletions

diff --git a/src/components/Head.astro b/src/components/Head.astro
index 1ccc6fa..0cce769 100644
--- a/src/components/Head.astro
+++ b/src/components/Head.astro
@@ -8,4 +8,5 @@ const { title, description } = Astro.props;
 	<title>{title}</title>
 	<meta name="description" content={description} />
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<link rel="sitemap" href="/sitemap-index.xml" />
 </head>
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index 135027f..2761ca6 100644
--- a/src/components/Nav.astro
+++ b/src/components/Nav.astro
@@ -21,7 +21,7 @@ const links: Links = {
 ---
 
 <nav>
-	<div class="flex flex-column justify-center mx-auto p-5">
+	<div class="flex flex-column justify-center mx-auto p-7">
 		<ul class="inline">
 			{
 				Object.entries(links).map(([link, url]) => (
diff --git a/src/env.d.ts b/src/env.d.ts
index f964fe0..9231795 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -1 +1 @@
-/// <reference types="astro/client" />
+/// <reference types="@astrojs/image/client" />
diff --git a/src/layouts/Index.astro b/src/layouts/Index.astro
index 0aa436e..a5909b7 100644
--- a/src/layouts/Index.astro
+++ b/src/layouts/Index.astro
@@ -1,5 +1,6 @@
 ---
 import Base from "@layouts/Base.astro";
+import { Image } from "@astrojs/image/components";
 const { title, description } = Astro.props;
 ---
 
@@ -18,18 +19,22 @@ const { title, description } = Astro.props;
 			class="bg-base hidden min-[1280px]:flex flex-col gap-2 text-center items-center justify-center m-20 mt-0 mb-5 p-5 rounded-lg drop-shadow-2xl"
 		>
 			<div id="gif">
-				<img
+				<Image
 					src="/imgs/gifs/legalize.gif"
-					width="88"
-					height="31"
+					width={88}
+					height={31}
+					format="webp"
+					quality={90}
 					loading="lazy"
 					decoding="async"
 					alt="legalize now!"
 				/>
-				<img
+				<Image
 					src="/imgs/gifs/acab.gif"
-					width="88"
-					height="31"
+					width={88}
+					height={31}
+					format="webp"
+					quality={90}
 					loading="lazy"
 					decoding="async"
 					alt="acab"
@@ -40,161 +45,198 @@ const { title, description } = Astro.props;
 						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
+					<Image
 						src="/imgs/gifs/poweredbynix.svg"
-						width="88"
-						height="31"
-						loading="lazy"
+						width={88}
+						height={31}
+						format="svg"
+						quality={90}
 						decoding="async"
 						alt="powered by fedora"
 					/>
 				</a>
-				<img
+				<Image
 					src="/imgs/gifs/capitalism.gif"
-					width="88"
-					height="31"
+					width={88}
+					height={31}
+					format="webp"
+					quality={90}
 					loading="lazy"
 					decoding="async"
 					alt="let's crush capitalism!"
 				/>
 			</div>
 			<div id="gif">
-				<img
+				<Image
 					src="/imgs/gifs/anybrowser.gif"
-					width="88"
-					height="31"
+					width={88}
+					height={31}
+					format="webp"
+					quality={90}
 					loading="lazy"
 					decoding="async"
 					alt="best viewed with any browser"
 				/>
-				<img
+				<Image
 					src="/imgs/gifs/weezer.gif"
-					width="88"
-					height="31"
+					width={88}
+					height={31}
+					format="webp"
+					quality={90}
 					loading="lazy"
 					decoding="async"
 					alt="weezer fan"
 				/>
 				<a href="https://dnsense.pub/">
-					<img
+					<Image
 						src="/imgs/gifs/steam.gif"
-						width="88"
-						height="31"
+						width={88}
+						height={31}
+						format="webp"
+						quality={90}
 						loading="lazy"
 						decoding="async"
 						alt="play with steam"
 					/>
 				</a>
-				<img
+				<Image
 					src="/imgs/gifs/vi.gif"
-					width="88"
-					height="31"
+					width={88}
+					height={31}
+					format="webp"
+					quality={90}
 					loading="lazy"
 					decoding="async"
 					alt="made with vi"
 				/>
-				<img
+				<Image
 					src="/imgs/gifs/pride.gif"
-					width="88"
-					height="31"
+					width={88}
+					height={31}
+					format="webp"
+					quality={90}
 					loading="lazy"
 					decoding="async"
 					alt="pride"
 				/>
-				<img
+				<Image
 					src="/imgs/gifs/imagine.gif"
-					width="88"
-					height="31"
+					width={88}
+					height={31}
+					format="webp"
+					quality={90}
 					loading="lazy"
 					decoding="async"
 					alt="imagination"
 				/>
 			</div>
 			<div id="gif">
-				<img
+				<Image
 					src="/imgs/gifs/moz.gif"
-					width="88"
-					height="31"
+					width={88}
+					height={31}
+					format="webp"
+					quality={90}
 					loading="lazy"
 					decoding="async"
 					alt="mozilla is cool"
 				/>
-				<img
+				<Image
 					src="/imgs/gifs/free.gif"
-					width="88"
-					height="31"
+					width={88}
+					height={31}
+					format="webp"
+					quality={90}
 					loading="lazy"
 					decoding="async"
 					alt="completely free software"
 				/>
-				<img
+				<Image
 					src="/imgs/gifs/gimp.gif"
-					width="88"
-					height="31"
+					width={88}
+					height={31}
+					format="webp"
+					quality={90}
 					loading="lazy"
 					decoding="async"
 					alt="graphics by gimp"
 				/>
-				<img
+				<Image
 					src="/imgs/gifs/explorer.gif"
-					width="88"
-					height="31"
+					width={88}
+					height={31}
+					format="webp"
+					quality={90}
 					loading="lazy"
 					decoding="async"
 					alt="marijuana mind explorer"
 				/>
-				<img
+				<Image
 					src="/imgs/gifs/jsfree.gif"
-					width="88"
-					height="31"
+					width={88}
+					height={31}
+					format="webp"
+					quality={90}
 					loading="lazy"
 					decoding="async"
 					alt="javascript free"
 				/>
-				<img
+				<Image
 					src="/imgs/gifs/web3.gif"
-					width="88"
-					height="31"
+					width={88}
+					height={31}
+					format="webp"
+					quality={90}
 					loading="lazy"
 					decoding="async"
 					alt="keep the web free! say no to web3!"
 				/>
-				<img
+				<Image
 					src="/imgs/gifs/tired.gif"
-					width="88"
-					height="31"
+					width={88}
+					height={31}
+					format="webp"
+					quality={90}
 					loading="lazy"
 					decoding="async"
 					alt="tired"
 				/>
-				<img
+				<Image
 					src="/imgs/gifs/arnold.gif"
-					width="88"
-					height="31"
+					width={88}
+					height={31}
+					format="webp"
+					quality={90}
 					loading="lazy"
 					decoding="async"
 					alt="hey arnold!"
 				/>
-				<img
+				<Image
 					src="/imgs/gifs/bob.gif"
-					width="88"
-					height="31"
+					width={88}
+					height={31}
+					format="webp"
+					quality={90}
 					loading="lazy"
 					decoding="async"
 					alt="powered by bob"
 				/>
-				<img
+				<Image
 					src="/imgs/gifs/counterstrike.gif"
-					width="88"
-					height="31"
+					width={88}
+					height={31}
+					format="webp"
+					quality={90}
 					loading="lazy"
 					decoding="async"
 					alt="counter-strike player"
 				/>
-				<img
+				<Image
 					src="/imgs/gifs/chris.gif"
-					width="88"
-					height="31"
+					width={88}
+					height={31}
+					format="webp"
+					quality={90}
 					loading="lazy"
 					decoding="async"
 					alt="chris troll"
diff --git a/src/pages/404.astro b/src/pages/404.astro
new file mode 100644
index 0000000..a34ff13
--- /dev/null
+++ b/src/pages/404.astro
@@ -0,0 +1,20 @@
+---
+import Page from "@layouts/Page.astro";
+import { Image } from "@astrojs/image/components";
+const title = "404!";
+const description = title;
+---
+
+<Page title={title} description={description}>
+	<h1>404! :(</h1>
+	<Image
+		src="/imgs/tapwater.png"
+		width={500}
+		height={515}
+		class="mx-auto"
+		format="webp"
+		quality={90}
+		decoding="async"
+		alt="can i get you some tapwater?"
+	/>
+</Page>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index cbf7d69..019375f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,6 +1,6 @@
 ---
 import Index from "@layouts/Index.astro";
-import "@styles/global.sass";
+import { Image } from "@astrojs/image/components";
 const title = "guzzle guzzle";
 const description = title;
 ---
@@ -15,13 +15,17 @@ const description = title;
 
 	<p>this is under construction. i'm experimenting with astro</p>
 
-	<img
+	<Image
 		src="/imgs/gifs/obras.gif"
+		width={106}
+		height={119}
 		class="mx-auto"
+		format="webp"
+		quality={90}
 		loading="lazy"
 		decoding="async"
 		alt="construction"
 	/>
 
-	<a href="/lul">click here</a>
+	<a href="/lul">hehe funny click me</a>
 </Index>
diff --git a/src/styles/global.sass b/src/styles/global.sass
index e03270c..a6d45e2 100644
--- a/src/styles/global.sass
+++ b/src/styles/global.sass
@@ -10,13 +10,13 @@ html
 	font-family: "Noto Sans", sans-serif
 
 h1
-	@apply text-2xl
+	@apply text-base text-2xl
 
 h2
-	@apply text-xl
+	@apply text-base text-xl
 
 h3
-	@apply text-lg
+	@apply text-base text-lg
 
 p,li
 	@apply text-base