Migrate assets to Astro imports

src/components/Home/CreditsSection.astro

@@ -0,0 +1,156 @@
+---
+import { Image } from "astro:assets";
+
+import splootyImage from "$assets/images/credits/splooty.png";
+import fexlarImage from "$assets/images/credits/fexlar.png";
+import nexImage from "$assets/images/credits/nex.png";
+import magixImage from "$assets/images/credits/magix.png";
+import milkyImage from "$assets/images/credits/milky.png";
+import socoolmanImage from "$assets/images/credits/socoolman.png";
+import historyeraserImage from "$assets/images/credits/historyeraser.png";
+import wayneImage from "$assets/images/credits/wayne.png";
+import ryancrImage from "$assets/images/credits/ryancr.png";
+import funkoImage from "$assets/images/credits/funko.png";
+import cheezitImage from "$assets/images/credits/cheezit.png";
+import credit9021007Image from "$assets/images/credits/9021007.gif";
+import starcenturionImage from "$assets/images/credits/starcenturion.gif";
+import gabethefirstImage from "$assets/images/credits/gabethefirst.png";
+import happyvrImage from "$assets/images/credits/happyvr.png";
+import magolorImage from "$assets/images/credits/magolor.png";
+import tagcomputingImage from "$assets/images/credits/tagcomputing.png";
+import miaImage from "$assets/images/credits/mia.png";
+
+const credits = [
+	{
+		name: "splootybean",
+		role: "Project Lead",
+		image: splootyImage,
+	},
+	{
+		name: "fexlar",
+		role: "Server Developer",
+		image: fexlarImage,
+	},
+	{
+		name: "nex",
+		role: "Developer",
+		image: nexImage,
+	},
+	{
+		name: "Magix",
+		role: "Developer",
+		image: magixImage,
+	},
+	{
+		name: "Milky",
+		role: "Developer",
+		image: milkyImage,
+	},
+	{
+		name: "SoCoolMan",
+		role: "Developer",
+		image: socoolmanImage,
+	},
+	{
+		name: "historyeraser",
+		role: "Logo Designer",
+		image: historyeraserImage,
+	},
+	{
+		name: "Wayne",
+		role: "Artist / Logo Designer",
+		image: wayneImage,
+	},
+	{
+		name: "RyanCR",
+		role: "Artist / Composer",
+		image: ryancrImage,
+	},
+	{
+		name: "Funko",
+		role: "Artist",
+		image: funkoImage,
+	},
+	{
+		name: "Cheezit",
+		role: "Artist",
+		image: cheezitImage,
+	},
+	{
+		name: "9021007",
+		role: "Artist",
+		image: credit9021007Image,
+		animated: true,
+	},
+	{
+		name: "Star Centurion",
+		role: "Artist",
+		image: starcenturionImage,
+		animated: true,
+	},
+	{
+		name: "GabeTheFirst",
+		role: "Artist",
+		image: gabethefirstImage,
+	},
+	{
+		name: "HappyVR",
+		role: "Leaf Shader",
+		image: happyvrImage,
+	},
+	{
+		name: "Magolor",
+		role: "Test Squad",
+		image: magolorImage,
+	},
+	{
+		name: "TagComputing",
+		role: "Test Squad",
+		image: tagcomputingImage,
+	},
+	{
+		name: "mia",
+		role: "Test Squad",
+		image: miaImage,
+	},
+];
+---
+
+<section class="home-section credits-section">
+	<div class="page-header">
+		<h2>Credits</h2>
+	</div>
+	<div class="row">
+		{
+			credits.map((credit) => (
+				<div class="span4">
+					<div class="credit-entry">
+						{
+							credit.animated ? (
+								<img
+									src={credit.image.src}
+									alt={`${credit.name} pfp`}
+									class="credit-avatar"
+									loading="lazy"
+									width="72"
+									height="72"
+								/>
+							) : (
+								<Image
+									src={credit.image}
+									alt={`${credit.name} pfp`}
+									class="credit-avatar"
+									loading="lazy"
+								/>
+							)
+						}
+						<div>
+							<h3>{credit.name}</h3>
+							<p>{credit.role}</p>
+						</div>
+					</div>
+				</div>
+			))
+		}
+	</div>
+</section>

src/components/Home/DownloadButton.astro

@@ -1,5 +1,5 @@
 ---
-import { getLatestDownloads } from "../lib/downloads";
+import { getLatestDownloads } from "$lib/downloads";
 
 const latestDownloads = await getLatestDownloads();
 const downloads = latestDownloads.success ? latestDownloads.data : [];

src/components/Home/HandheldVideos.astro

@@ -0,0 +1,53 @@
+---
+import boomboxVideo from "$assets/images/videos/boombox.gif";
+import hideVideo from "$assets/images/videos/hide.gif";
+import trickshotVideo from "$assets/images/videos/trickshot.gif";
+import waveVideo from "$assets/images/videos/wave.gif";
+
+const handheldVideos = [
+    {
+        image: boomboxVideo,
+        alt: "splootybean grooving to the boombox",
+        credit: "@fexlar",
+    },
+    {
+        image: hideVideo,
+        alt: "guy hiding",
+        credit: "@splootybean",
+    },
+    {
+        image: trickshotVideo,
+        alt: "dodgeball trickshot",
+        credit: "@_.golden_.",
+    },
+    {
+        image: waveVideo,
+        alt: "hello there!",
+        credit: "@splootybean",
+    },
+];
+---
+
+<section class="home-section gallery-section">
+    <div class="page-header">
+        <h2>Community Handheld Videos</h2>
+    </div>
+    <ul class="thumbnails">
+        {
+            handheldVideos.map((video) => (
+                <li class="span3">
+                    <a href={video.image.src} class="thumbnail">
+                        <img
+                            src={video.image.src}
+                            alt={video.alt}
+                            loading="lazy"
+                        />
+                    </a>
+                    <p class="caption">
+                        Filmed by <b>{video.credit}</b>
+                    </p>
+                </li>
+            ))
+        }
+    </ul>
+</section>