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>

src/layouts/Layout.astro

@@ -1,5 +1,5 @@
 ---
-import Footer from "../components/Footer.astro";
+import Footer from "$components/Footer.astro";
 ---
 
 <!doctype html>

src/lib/api.ts

@@ -1,7 +1,7 @@
 import { TWY_API_URL } from 'astro:env/server';
 
-import type { LatestBuildsResponse, PatchNote } from './types/api/builds';
-import { ApiResult } from './types/api';
+import { ApiResult } from '$lib/types/api';
+import type { LatestBuildsResponse, PatchNote } from '$lib/types/api/builds';
 
 const BUILDS_V1 = "api/builds/v1";
 

src/lib/downloads.ts

@@ -1,8 +1,13 @@
 import { TWY_CDN_URL } from "astro:env/server";
 
-import { api } from "./api";
-import { ApiResult } from "./types/api";
-import type { LatestBuildsResponse } from "./types/api/builds";
+import { api } from "$lib/api";
+
+import { ApiResult } from "$lib/types/api";
+import type { LatestBuildsResponse } from "$lib/types/api/builds";
+
+import windowsIcon from "$assets/images/platforms/platform-windows.png";
+import linuxIcon from "$assets/images/platforms/platform-linux.png";
+import metaIcon from "$assets/images/platforms/platform-oculus.png";
 
 export type DownloadPlatform = "windows" | "linux" | "meta";
 
@@ -11,13 +16,13 @@ export type DownloadOption = {
 	label: string;
 	version: string;
 	href: string;
-	icon: string;
+	icon: ImageMetadata;
 };
 
 type DownloadPlatformConfig = {
 	platform: DownloadPlatform;
 	label: string;
-	icon: string;
+	icon: ImageMetadata;
 	versionKey: keyof LatestBuildsResponse;
 };
 
@@ -25,19 +30,19 @@ export const downloadPlatforms: DownloadPlatformConfig[] = [
 	{
 		platform: "windows",
 		label: "Windows",
-		icon: "/img/platforms/platform-windows.png",
+		icon: windowsIcon,
 		versionKey: "latestWindowsVersion",
 	},
 	{
 		platform: "linux",
 		label: "Linux",
-		icon: "/img/platforms/platform-linux.png",
+		icon: linuxIcon,
 		versionKey: "latestLinuxVersion",
 	},
 	{
 		platform: "meta",
 		label: "Meta Quest",
-		icon: "/img/platforms/platform-oculus.png",
+		icon: metaIcon,
 		versionKey: "latestMetaVersion",
 	},
 ];

src/pages/downloads.astro

@@ -1,7 +1,10 @@
 ---
-import { api } from "../lib/api";
-import { getLatestDownloads } from "../lib/downloads";
-import Layout from "../layouts/Layout.astro";
+import { Image } from "astro:assets";
+
+import { api } from "$lib/api";
+import { getLatestDownloads } from "$lib/downloads";
+
+import Layout from "$layouts/Layout.astro";
 
 const latestDownloads = await getLatestDownloads();
 const downloads = latestDownloads.success ? latestDownloads.data : [];
@@ -26,7 +29,7 @@ const patchNotes = await api.builds.v1.getPatchNotes();
 						<div class="span4">
 							<div class="well text-center download-card">
 								<p>
-									<img
+									<Image
 										src={download.icon}
 										alt=""
 										width="72"

src/pages/index.astro

@@ -1,106 +1,24 @@
 ---
-import DownloadButton from "../components/DownloadButton.astro";
-import Layout from "../layouts/Layout.astro";
+import { Image } from "astro:assets";
+
+import Layout from "$layouts/Layout.astro";
+
+import CreditsSection from "$components/Home/CreditsSection.astro";
+import DownloadButton from "$components/Home/DownloadButton.astro";
+
+import logoImage from "$assets/images/brand/logo-tenwholeyears.png";
+import cardHorseshoesImage from "$assets/images/home/card-horseshoes.png";
+import cardRecroomImage from "$assets/images/home/card-recroom.png";
+import featureImage from "$assets/images/home/feature.png";
+import HandheldVideos from "$components/Home/HandheldVideos.astro";
 
-const credits = [
-	{
-		name: "splootybean",
-		role: "Project Lead",
-		image: "/img/credits/splooty.png",
-	},
-	{
-		name: "fexlar",
-		role: "Server Developer",
-		image: "/img/credits/fexlar.png",
-	},
-	{
-		name: "nex",
-		role: "Developer",
-		image: "/img/credits/nex.png",
-	},
-	{
-		name: "Magix",
-		role: "Developer",
-		image: "/img/credits/magix.png",
-	},
-	{
-		name: "Milky",
-		role: "Developer",
-		image: "/img/credits/milky.png",
-	},
-	{
-		name: "SoCoolMan",
-		role: "Developer",
-		image: "/img/credits/socoolman.png",
-	},
-	{
-		name: "historyeraser",
-		role: "Logo Designer",
-		image: "/img/credits/historyeraser.png",
-	},
-	{
-		name: "Wayne",
-		role: "Artist / Logo Designer",
-		image: "/img/credits/wayne.png",
-	},
-	{
-		name: "RyanCR",
-		role: "Artist / Composer",
-		image: "/img/credits/ryancr.png",
-	},
-	{
-		name: "Funko",
-		role: "Artist",
-		image: "/img/credits/funko.png",
-	},
-	{
-		name: "Cheezit",
-		role: "Artist",
-		image: "/img/credits/cheezit.png",
-	},
-	{
-		name: "9021007",
-		role: "Artist",
-		image: "/img/credits/9021007.gif",
-	},
-	{
-		name: "Star Centurion",
-		role: "Artist",
-		image: "/img/credits/starcenturion.gif",
-	},
-	{
-		name: "GabeTheFirst",
-		role: "Artist",
-		image: "/img/credits/gabethefirst.png",
-	},
-	{
-		name: "HappyVR",
-		role: "Leaf Shader",
-		image: "/img/credits/happyvr.png",
-	},
-	{
-		name: "Magolor",
-		role: "Test Squad",
-		image: "/img/credits/magolor.png",
-	},
-	{
-		name: "TagComputing",
-		role: "Test Squad",
-		image: "/img/credits/tagcomputing.png",
-	},
-	{
-		name: "mia",
-		role: "Test Squad",
-		image: "/img/credits/mia.png",
-	},
-];
 ---
 
 <Layout>
 	<div class="jumbotron masthead">
 		<div class="container">
-			<img
-				src="/img/logo-tenwholeyears.png"
+			<Image
+				src={logoImage}
 				alt="asdasd"
 				class="masthead-logo"
 			/>
@@ -130,8 +48,8 @@ const credits = [
 					</p>
 				</div>
 				<div class="span6">
-					<img
-						src="/img/home/feature.png"
+					<Image
+						src={featureImage}
 						alt="Beta Frisbee Activity"
 						class="thumbnail feature-photo"
 					/>
@@ -146,8 +64,8 @@ const credits = [
 			<div class="row">
 				<div class="span4">
 					<div class="archive-feature">
-						<img
-							src="/img/home/card-horseshoes.png"
+						<Image
+							src={cardHorseshoesImage}
 							alt="Scrapped Horseshoes Activity"
 							class="thumbnail"
 						/>
@@ -162,8 +80,8 @@ const credits = [
 				</div>
 				<div class="span4">
 					<div class="archive-feature">
-						<img
-							src="/img/home/card-recroom.png"
+						<Image
+							src={cardRecroomImage}
 							alt="Beta LockerRoom (RecRoom)"
 							class="thumbnail"
 						/>
@@ -176,8 +94,8 @@ const credits = [
 				</div>
 				<div class="span4">
 					<div class="archive-feature">
-						<img
-							src="/img/home/card-horseshoes.png"
+						<Image
+							src={cardHorseshoesImage}
 							alt="Placeholder screenshots and media image"
 							class="thumbnail"
 						/>
@@ -192,78 +110,8 @@ const credits = [
 			</div>
 		</section>
 
-		<section class="home-section gallery-section">
-			<div class="page-header">
-				<h2>Community Handheld Videos</h2>
-			</div>
-			<ul class="thumbnails">
-				<li class="span3">
-					<a href="/img/videos/boombox.gif" class="thumbnail">
-						<img
-							src="/img/videos/boombox.gif"
-							alt="splootybean grooving to the boombox"
-							loading="lazy"
-						/>
-					</a>
-					<p class="caption">Filmed by <b>@fexlar</b></p>
-				</li>
-				<li class="span3">
-					<a href="/img/videos/hide.gif" class="thumbnail">
-						<img
-							src="/img/videos/hide.gif"
-							alt="guy hiding"
-							loading="lazy"
-						/>
-					</a>
-					<p class="caption">Filmed by <b>@splootybean</b></p>
-				</li>
-				<li class="span3">
-					<a href="#" class="thumbnail">
-						<img
-							src="/img/videos/trickshot.gif"
-							alt="dodgeball trickshot"
-							loading="lazy"
-						/>
-					</a>
-					<p class="caption">Filmed by <b>@_.golden_.</b></p>
-				</li>
-				<li class="span3">
-					<a href="#" class="thumbnail">
-						<img
-							src="/img/videos/wave.gif"
-							alt="hello there!"
-							loading="lazy"
-						/>
-					</a>
-					<p class="caption">Filmed by <b>@splootybean</b></p>
-				</li>
-			</ul>
-		</section>
+		<HandheldVideos />
 
-		<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">
-								<img
-									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>
+		<CreditsSection />
 	</div>
 </Layout>