Migrate assets to Astro imports

public/css/bootstrap.css

@@ -2282,7 +2282,7 @@ table th[class*="span"],
   *margin-right: .3em;
   line-height: 14px;
   vertical-align: text-top;
-  background-image: url("../img/glyphicons-halflings.png");
+  background-image: url("../img/vendor/bootstrap/glyphicons-halflings.png");
   background-position: 14px 14px;
   background-repeat: no-repeat;
 }
@@ -2306,7 +2306,7 @@ table th[class*="span"],
 .dropdown-submenu:focus > a > [class^="icon-"],
 .dropdown-submenu:hover > a > [class*=" icon-"],
 .dropdown-submenu:focus > a > [class*=" icon-"] {
-  background-image: url("../img/glyphicons-halflings-white.png");
+  background-image: url("../img/vendor/bootstrap/glyphicons-halflings-white.png");
 }
 
 .icon-glass {

public/css/styles.css

@@ -1,20 +1,46 @@
-/* Jumbotrons
+/* ==========================================================================
--------------------------------------------------- */
+   Jumbotron
+   ========================================================================== */
 
-/* Base class
-------------------------- */
 .jumbotron {
     position: relative;
     padding: 40px 0;
     color: #fff;
     text-align: center;
-    text-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 0 30px rgba(0, 0, 0, .075);
+    text-shadow:
+        0 1px 3px rgba(0, 0, 0, .4),
+        0 0 30px rgba(0, 0, 0, .075);
     background: #000;
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#020031', endColorstr='#6d3353', GradientType=1);
-    /* IE6-9 fallback on horizontal gradient */
+    -webkit-box-shadow:
-    -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, .2), inset 0 -3px 7px rgba(0, 0, 0, .2);
+        inset 0 3px 7px rgba(0, 0, 0, .2),
-    -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, .2), inset 0 -3px 7px rgba(0, 0, 0, .2);
+        inset 0 -3px 7px rgba(0, 0, 0, .2);
-    box-shadow: inset 0 3px 7px rgba(0, 0, 0, .2), inset 0 -3px 7px rgba(0, 0, 0, .2);
+    -moz-box-shadow:
+        inset 0 3px 7px rgba(0, 0, 0, .2),
+        inset 0 -3px 7px rgba(0, 0, 0, .2);
+    box-shadow:
+        inset 0 3px 7px rgba(0, 0, 0, .2),
+        inset 0 -3px 7px rgba(0, 0, 0, .2);
+}
+
+.jumbotron .container {
+    position: relative;
+    z-index: 2;
+}
+
+.jumbotron:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-image: url(/img/backgrounds/hero-banner.gif);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    opacity: .6;
 }
 
 .jumbotron h1 {
@@ -31,7 +57,6 @@
     margin-bottom: 30px;
 }
 
-/* Link styles (used on .masthead-links as well) */
 .jumbotron a {
     color: #fff;
     color: rgba(255, 255, 255, .5);
@@ -45,72 +70,10 @@
     text-shadow: 0 0 10px rgba(255, 255, 255, .25);
 }
 
-/* Download button */
+/* ==========================================================================
-.masthead .btn {
+   Masthead
-    padding: 19px 24px;
+   ========================================================================== */
-    font-size: 24px;
-    font-weight: 200;
-    color: #fff;
-    /* redeclare to override the `.jumbotron a` */
-    border: 0;
-    -webkit-border-radius: 6px;
-    -moz-border-radius: 6px;
-    border-radius: 6px;
-    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 5px rgba(0, 0, 0, .25);
-    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 5px rgba(0, 0, 0, .25);
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 5px rgba(0, 0, 0, .25);
-    -webkit-transition: none;
-    -moz-transition: none;
-    transition: none;
-}
 
-.masthead .btn:hover {
-    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 5px rgba(0, 0, 0, .25);
-    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 5px rgba(0, 0, 0, .25);
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 5px rgba(0, 0, 0, .25);
-}
-
-.masthead .btn:active {
-    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, .1), 0 1px 0 rgba(255, 255, 255, .1);
-    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, .1), 0 1px 0 rgba(255, 255, 255, .1);
-    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .1), 0 1px 0 rgba(255, 255, 255, .1);
-}
-
-
-/* Pattern overlay
-------------------------- */
-.jumbotron .container {
-    position: relative;
-    z-index: 2;
-}
-
-.jumbotron:after {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-image: url(/img/banner.gif);
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: cover;
-    opacity: .6;
-}
-
-@media only screen and (-webkit-min-device-pixel-ratio: 2),
-only screen and (min--moz-device-pixel-ratio: 2),
-only screen and (-o-min-device-pixel-ratio: 2/1) {
-
-    .jumbotron:after {
-        background-size: 150px 150px;
-    }
-
-}
-
-/* Masthead (docs home)
-------------------------- */
 .masthead {
     padding: 70px 0 80px;
     margin-bottom: 20px;
@@ -123,6 +86,58 @@ only screen and (-o-min-device-pixel-ratio: 2/1) {
     letter-spacing: -2px;
 }
 
+.masthead p {
+    font-weight: 200;
+    line-height: 1.25;
+}
+
+.masthead .btn {
+    padding: 19px 24px;
+    font-size: 24px;
+    font-weight: 200;
+    color: #fff;
+    border: 0;
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+    border-radius: 6px;
+    -webkit-box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, .1),
+        0 1px 5px rgba(0, 0, 0, .25);
+    -moz-box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, .1),
+        0 1px 5px rgba(0, 0, 0, .25);
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, .1),
+        0 1px 5px rgba(0, 0, 0, .25);
+    -webkit-transition: none;
+    -moz-transition: none;
+    transition: none;
+}
+
+.masthead .btn:hover {
+    -webkit-box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, .1),
+        0 1px 5px rgba(0, 0, 0, .25);
+    -moz-box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, .1),
+        0 1px 5px rgba(0, 0, 0, .25);
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, .1),
+        0 1px 5px rgba(0, 0, 0, .25);
+}
+
+.masthead .btn:active {
+    -webkit-box-shadow:
+        inset 0 2px 4px rgba(0, 0, 0, .1),
+        0 1px 0 rgba(255, 255, 255, .1);
+    -moz-box-shadow:
+        inset 0 2px 4px rgba(0, 0, 0, .1),
+        0 1px 0 rgba(255, 255, 255, .1);
+    box-shadow:
+        inset 0 2px 4px rgba(0, 0, 0, .1),
+        0 1px 0 rgba(255, 255, 255, .1);
+}
+
 .masthead-logo {
     display: block;
     width: 430px;
@@ -138,11 +153,6 @@ only screen and (-o-min-device-pixel-ratio: 2/1) {
     letter-spacing: -1px;
 }
 
-.masthead p {
-    font-weight: 200;
-    line-height: 1.25;
-}
-
 .masthead-download {
     margin-top: 30px;
     text-align: center;
@@ -162,14 +172,15 @@ only screen and (-o-min-device-pixel-ratio: 2/1) {
     color: rgba(255, 255, 255, .5);
 }
 
-
 .masthead-platforms {
     display: inline;
     color: #fff !important;
 }
 
-/* Home page
+/* ==========================================================================
-------------------------- */
+   Home Page
+   ========================================================================== */
+
 .home-section {
     padding: 30px 0;
 }
@@ -241,96 +252,12 @@ only screen and (-o-min-device-pixel-ratio: 2/1) {
     margin-left: auto;
 }
 
-/* Tablet to desktop
+/* ==========================================================================
-------------------------- */
+   Downloads Page
-@media (min-width: 768px) and (max-width: 979px) {
+   ========================================================================== */
-  .jumbotron {
-    margin-top: -20px; /* Offset bottom margin on .navbar */
-  }
-
-  .jumbotron .container {
-    width: initial !important;
-  }
-}
-
-/* Tablet
-------------------------- */
-@media (max-width: 767px) {
-  .jumbotron {
-    padding: 40px 20px;
-    margin-top:   -20px; /* Offset bottom margin on .navbar */
-    margin-right: -20px;
-    margin-left:  -20px;
-  }
-  .masthead h1 {
-    font-size: 90px;
-  }
-  .masthead-logo {
-    width: 360px;
-  }
-  .masthead-title {
-    font-size: 36px;
-    word-break: break-all;
-  }
-  .masthead p,
-  .masthead .btn {
-    font-size: 24px;
-  }
-  .archive-feature .thumbnail,
-  .gallery-section .thumbnail img {
-    max-height: none;
-  }
-}
-
-/* Landscape phones
-------------------------- */
-@media (max-width: 480px) {
-  /* Downsize the jumbotrons */
-  .jumbotron h1 {
-    font-size: 45px;
-  }
-  .masthead-logo {
-    width: 260px;
-  }
-  .masthead-title {
-    font-size: 28px;
-  }
-  .jumbotron p,
-  .jumbotron .btn {
-    font-size: 18px;
-  }
-  .jumbotron .btn {
-    display: block;
-    margin: 0 auto;
-  }
-
-  .archive-feature .thumbnail,
-  .gallery-section .thumbnail img {
-    max-height: none;
-  }
-}
-
-
-/* Footer */
-footer {
-    margin-bottom: 20px;
-}
-
-footer .links * {
-    margin-right: 3px;
-}
-
-footer .links {
-    margin-bottom: 5px;
-}
-
-footer .about * {
-    display: block;
-}
-
 
 .download-card h3 {
-  margin-bottom: 0;
+    margin-bottom: 0;
 }
 
 .download-patch-notes {
@@ -340,3 +267,106 @@ footer .about * {
 .patch-note h3 {
     margin-top: 0;
 }
+
+/* ==========================================================================
+   Footer
+   ========================================================================== */
+
+footer {
+    margin-bottom: 20px;
+}
+
+footer .links {
+    margin-bottom: 5px;
+}
+
+footer .links * {
+    margin-right: 3px;
+}
+
+footer .about * {
+    display: block;
+}
+
+/* ==========================================================================
+   Responsive
+   ========================================================================== */
+
+@media only screen and (-webkit-min-device-pixel-ratio: 2),
+    only screen and (min--moz-device-pixel-ratio: 2),
+    only screen and (-o-min-device-pixel-ratio: 2/1) {
+    .jumbotron:after {
+        background-size: 150px 150px;
+    }
+}
+
+@media (min-width: 768px) and (max-width: 979px) {
+    .jumbotron {
+        margin-top: -20px;
+    }
+
+    .jumbotron .container {
+        width: initial !important;
+    }
+}
+
+@media (max-width: 767px) {
+    .jumbotron {
+        padding: 40px 20px;
+        margin-top: -20px;
+        margin-right: -20px;
+        margin-left: -20px;
+    }
+
+    .masthead h1 {
+        font-size: 90px;
+    }
+
+    .masthead-logo {
+        width: 360px;
+    }
+
+    .masthead-title {
+        font-size: 36px;
+        word-break: break-all;
+    }
+
+    .masthead p,
+    .masthead .btn {
+        font-size: 24px;
+    }
+
+    .archive-feature .thumbnail,
+    .gallery-section .thumbnail img {
+        max-height: none;
+    }
+}
+
+@media (max-width: 480px) {
+    .jumbotron h1 {
+        font-size: 45px;
+    }
+
+    .jumbotron p,
+    .jumbotron .btn {
+        font-size: 18px;
+    }
+
+    .jumbotron .btn {
+        display: block;
+        margin: 0 auto;
+    }
+
+    .masthead-logo {
+        width: 260px;
+    }
+
+    .masthead-title {
+        font-size: 28px;
+    }
+
+    .archive-feature .thumbnail,
+    .gallery-section .thumbnail img {
+        max-height: none;
+    }
+}

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 '$lib/types/api';
-import { ApiResult } from './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 { api } from "$lib/api";
-import { ApiResult } from "./types/api";
+
-import type { LatestBuildsResponse } from "./types/api/builds";
+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 { Image } from "astro:assets";
-import { getLatestDownloads } from "../lib/downloads";
+
-import Layout from "../layouts/Layout.astro";
+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 { Image } from "astro:assets";
-import Layout from "../layouts/Layout.astro";
+
+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
+			<Image
-				src="/img/logo-tenwholeyears.png"
+				src={logoImage}
 				alt="asdasd"
 				class="masthead-logo"
 			/>
@@ -130,8 +48,8 @@ const credits = [
 					</p>
 				</div>
 				<div class="span6">
-					<img
+					<Image
-						src="/img/home/feature.png"
+						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
+						<Image
-							src="/img/home/card-horseshoes.png"
+							src={cardHorseshoesImage}
 							alt="Scrapped Horseshoes Activity"
 							class="thumbnail"
 						/>
@@ -162,8 +80,8 @@ const credits = [
 				</div>
 				<div class="span4">
 					<div class="archive-feature">
-						<img
+						<Image
-							src="/img/home/card-recroom.png"
+							src={cardRecroomImage}
 							alt="Beta LockerRoom (RecRoom)"
 							class="thumbnail"
 						/>
@@ -176,8 +94,8 @@ const credits = [
 				</div>
 				<div class="span4">
 					<div class="archive-feature">
-						<img
+						<Image
-							src="/img/home/card-horseshoes.png"
+							src={cardHorseshoesImage}
 							alt="Placeholder screenshots and media image"
 							class="thumbnail"
 						/>
@@ -192,78 +110,8 @@ const credits = [
 			</div>
 		</section>
 
-		<section class="home-section gallery-section">
+		<HandheldVideos />
-			<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>
 
-		<section class="home-section credits-section">
+		<CreditsSection />
-			<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>
 	</div>
 </Layout>

tsconfig.json

@@ -5,6 +5,22 @@
     "**/*",
     "./worker-configuration.d.ts"
   ],
+  "compilerOptions": {
+    "paths": {
+      "$assets/*": [
+        "./src/assets/*"
+      ],
+      "$components/*": [
+        "./src/components/*"
+      ],
+      "$layouts/*": [
+        "./src/layouts/*"
+      ],
+      "$lib/*": [
+        "./src/lib/*"
+      ]
+    }
+  },
   "exclude": [
     "dist"
   ]