From 1f45a74b2a3dbb12d20a1462d6eb7bf604c87b11 Mon Sep 17 00:00:00 2001
From: Nathan Cummins <nathan@nathancummins.com.au>
Date: Thu, 14 Aug 2025 09:48:52 +0930
Subject: [PATCH] Some corrections with types and undeleted file

---
 src/components/Award.astro                    |  4 +--
 src/components/AwardCard.astro                |  4 +--
 src/components/Footer.astro                   | 16 ++++-----
 src/components/ImageCarousel.astro            |  9 +++--
 src/components/MDX/A.astro                    |  6 ++--
 src/components/MDX/P.astro                    |  2 +-
 src/components/Paragraph.astro                |  6 ++--
 src/components/Player.astro                   |  2 +-
 src/components/ProjectCard.astro              | 10 +++---
 src/components/SectionTitle.astro             |  2 +-
 src/components/{Link.astro => TextLink.astro} |  5 ++-
 src/components/ThemeSelect.astro              | 35 -------------------
 src/components/Token.astro                    |  7 ++--
 src/pages/404.astro                           |  4 +--
 src/pages/about.astro                         |  4 +--
 src/pages/contact.astro                       |  8 ++---
 src/pages/index.astro                         | 20 +++++------
 src/pages/projects/[slug].astro               |  2 +-
 src/pages/robots.txt.ts                       | 13 -------
 19 files changed, 54 insertions(+), 105 deletions(-)
 rename src/components/{Link.astro => TextLink.astro} (94%)
 delete mode 100644 src/components/ThemeSelect.astro
 delete mode 100644 src/pages/robots.txt.ts

diff --git a/src/components/Award.astro b/src/components/Award.astro
index 70c32f6..5d7bd2f 100644
--- a/src/components/Award.astro
+++ b/src/components/Award.astro
@@ -2,7 +2,7 @@
 import type { CollectionEntry } from "astro:content";
 import { render } from "astro:content";
 
-import Link from "@components/Link.astro";
+import TextLink from "@components/TextLink.astro";
 
 interface Props {
   award: CollectionEntry<"awards">;
@@ -21,7 +21,7 @@ const { Content } = await render(award);
         {award.data.giver} ({award.data.date.getFullYear()})
       </span>
       <dd class="pt-2">
-        <Content components={{ a: Link }} />
+        <Content components={{ a: TextLink }} />
       </dd>
     </dt>
   </dl>
diff --git a/src/components/AwardCard.astro b/src/components/AwardCard.astro
index 09bc4a6..393fbee 100644
--- a/src/components/AwardCard.astro
+++ b/src/components/AwardCard.astro
@@ -2,7 +2,7 @@
 import type { CollectionEntry } from "astro:content";
 import { render } from "astro:content";
 
-import Link from "@components/Link.astro";
+import A from "@components/MDX/A.astro";
 
 interface Props {
   award: CollectionEntry<"awards">;
@@ -23,7 +23,7 @@ const { Content } = await render(award);
     </div>
     <div class="bg-white p-2 text-left">
       <div class="text-sm text-gray-600">
-        <Content components={{ a: Link }} />
+        <Content components={{ a: A }} />
       </div>
     </div>
   </div>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 416ed9e..09a390c 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -2,7 +2,7 @@
 import { Icon } from "astro-icon/components";
 
 import { socials } from "@assets/socials.ts";
-import Link from "@components/Link.astro";
+import TextLink from "@components/TextLink.astro";
 ---
 
 <footer
@@ -40,17 +40,17 @@ import Link from "@components/Link.astro";
   >
     <p class="col-span-1 p-2 text-xs italic">
       I support and believe in the values of open source software and
-      communities. This website is made from scratch using the <Link
-        href="https://astro.build/">Astro framework</Link
+      communities. This website is made from scratch using the <TextLink
+        href="https://astro.build/">Astro framework</TextLink
       >
-      and with <Link href="https://tailwindcss.com/">Tailwind CSS</Link>. The
-      full source code is available on my self-hosted <Link
+      and with <TextLink href="https://tailwindcss.com/">Tailwind CSS</TextLink
+      >. The full source code is available on my self-hosted <TextLink
         href="https://git.nathancummins.com.au/encie22/portfolio"
       >
-        Gitea repository</Link
+        Gitea repository</TextLink
       >. My website is hosted on my own self-hosted server environment. Find out
-      more at <Link href="https://nathancummins.domains"
-        >Nathan Cummins Domains</Link
+      more at <TextLink href="https://nathancummins.domains"
+        >Nathan Cummins Domains</TextLink
       >.
     </p>
     <p class="col-span-1 p-2 text-xs italic">
diff --git a/src/components/ImageCarousel.astro b/src/components/ImageCarousel.astro
index ecc1359..997f547 100644
--- a/src/components/ImageCarousel.astro
+++ b/src/components/ImageCarousel.astro
@@ -6,7 +6,7 @@ import { shuffleArray } from "@lib/utils";
 
 interface Props {
   images: Array<ImageMetadata>;
-  className: string;
+  class: string;
   altText?: string | ((index: number) => string);
   interval?: number;
   backgroundColour?: string;
@@ -23,7 +23,7 @@ interface Props {
 
 const {
   images,
-  className,
+  class: className,
   altText = null,
   interval = 5000,
   backgroundColour = "bg-black",
@@ -44,7 +44,7 @@ const imagesArray = shuffle ? shuffleArray(images) : images;
 ---
 
 <div class:list={[className]}>
-  <div class="relative h-full w-full">
+  <div class="relative h-full w-full overflow-hidden">
     <div class:list={[backgroundColour, backgroundOpacity, "absolute inset-0"]}>
     </div>
 
@@ -57,7 +57,7 @@ const imagesArray = shuffle ? shuffleArray(images) : images;
           <Image
             data-id={`${ID}`}
             class:list={[
-              "absolute h-full w-full object-cover object-center transition-opacity",
+              "absolute !h-full w-full object-cover object-center transition-opacity",
               transitionStyle,
               transitionDuration,
               index > 0 ? "opacity-0" : "",
@@ -71,7 +71,6 @@ const imagesArray = shuffle ? shuffleArray(images) : images;
             aria-hidden={index === 0 ? "false" : "true"}
             layout="full-width"
             fit="cover"
-            style="height: 100% !important;"
             quality={quality}
             height={height === undefined ? undefined : height}
           />
diff --git a/src/components/MDX/A.astro b/src/components/MDX/A.astro
index 3f7c954..018a465 100644
--- a/src/components/MDX/A.astro
+++ b/src/components/MDX/A.astro
@@ -3,9 +3,9 @@ import type { HTMLAttributes } from "astro/types";
 
 interface Props extends HTMLAttributes<"a"> {}
 
-import Link from "@components/Link.astro";
+import TextLink from "@components/TextLink.astro";
 
-const { href, ...attrs } = Astro.props as Props;
+const { href, ...attrs } = Astro.props;
 ---
 
-<Link href={href} {...attrs}><slot /></Link>
+<TextLink href={href} {...attrs}><slot /></TextLink>
diff --git a/src/components/MDX/P.astro b/src/components/MDX/P.astro
index 230cfd0..9ca480b 100644
--- a/src/components/MDX/P.astro
+++ b/src/components/MDX/P.astro
@@ -7,4 +7,4 @@ interface Props extends HTMLAttributes<"p"> {}
 const { ...attrs } = Astro.props as Props;
 ---
 
-<Paragraph className="my-4" {...attrs}><slot /></Paragraph>
+<Paragraph class="my-4" {...attrs}><slot /></Paragraph>
diff --git a/src/components/Paragraph.astro b/src/components/Paragraph.astro
index 4cf45b2..0772272 100644
--- a/src/components/Paragraph.astro
+++ b/src/components/Paragraph.astro
@@ -1,11 +1,9 @@
 ---
 import type { HTMLAttributes } from "astro/types";
 
-interface Props extends HTMLAttributes<"p"> {
-  className?: string;
-}
+interface Props extends HTMLAttributes<"p"> {}
 
-const { className = "my-4", ...attrs } = Astro.props as Props;
+const { class: className = "my-4", ...attrs } = Astro.props;
 ---
 
 <p class:list={[className]} {...attrs}>
diff --git a/src/components/Player.astro b/src/components/Player.astro
index 851462c..f389aec 100644
--- a/src/components/Player.astro
+++ b/src/components/Player.astro
@@ -11,7 +11,7 @@ interface Props {
   height?: string;
 }
 
-const { height = "h-28" } = Astro.props as Props;
+const { height = "h-28" } = Astro.props;
 
 import { getAudioDurationInSeconds } from "get-audio-duration";
 import { join } from "path";
diff --git a/src/components/ProjectCard.astro b/src/components/ProjectCard.astro
index 83fbd76..4805a96 100644
--- a/src/components/ProjectCard.astro
+++ b/src/components/ProjectCard.astro
@@ -1,8 +1,8 @@
 ---
 import { getAllProjectImages } from '@lib/utils';
 
-import Link from "@components/Link.astro";
 import Paragraph from "@components/Paragraph.astro";
+import TextLink from "@components/TextLink.astro";
 import Token from "@components/Token.astro";
 import { Icon } from "astro-icon/components";
 import { Image } from "astro:assets";
@@ -14,7 +14,7 @@ interface Props {
   quality?: number;
 }
 
-const { project, textOn = "left", quality = "80" } = Astro.props as Props;
+const { project, textOn = "left", quality = "80" } = Astro.props;
 
 const images = getAllProjectImages(project);
 
@@ -130,7 +130,7 @@ const projectHasBody = project.body && project.body.trim().length > 0;
   >
     <span
       ><h2 class="font-header-alt inline-block text-lg font-semibold">
-        {projectHasBody && <Link href=`/projects/${project.id}/`>{project.data.title}</Link>}{!projectHasBody && project.data.title }{!project.data.ongoing && <span class="italic text-sm font-light"> ({project.data.date.getFullYear()})</span>}</h2></span
+        {projectHasBody && <TextLink href=`/projects/${project.id}/`>{project.data.title}</TextLink>}{!projectHasBody && project.data.title }{!project.data.ongoing && <span class="italic text-sm font-light"> ({project.data.date.getFullYear()})</span>}</h2></span
     >
     <h3 class="font-header-alt font-base font-medium">
       {project.data.role}
@@ -143,9 +143,9 @@ const projectHasBody = project.body && project.body.trim().length > 0;
       project.data.externalLinks !== undefined && (
         <span class="relative order-3 ml-auto flex w-full items-start justify-start space-x-2 text-xl">
           {project.data.externalLinks.map((link, index) => (
-            <Link href={link.href} includeExternalLinkIcon={false} aria-label={link.name}>
+            <TextLink href={link.href} includeExternalLinkIcon={false} aria-label={link.name}>
               <Icon name={link.icon} />
-            </Link>
+            </TextLink>
           ))}
         </span>
       )
diff --git a/src/components/SectionTitle.astro b/src/components/SectionTitle.astro
index 7f43000..fc754f4 100644
--- a/src/components/SectionTitle.astro
+++ b/src/components/SectionTitle.astro
@@ -9,7 +9,7 @@ const {
   Tag = "h1",
   lineColour = "border-primary",
   lineColourDark = "dark:text-primary"
-} = Astro.props as Props;
+} = Astro.props;
 ---
 
 <Tag class="font-header m-0 text-center text-3xl"><slot /></Tag>
diff --git a/src/components/Link.astro b/src/components/TextLink.astro
similarity index 94%
rename from src/components/Link.astro
rename to src/components/TextLink.astro
index 6520ecb..e7aa12d 100644
--- a/src/components/Link.astro
+++ b/src/components/TextLink.astro
@@ -2,7 +2,6 @@
 import type { HTMLAttributes } from "astro/types";
 
 interface Props extends HTMLAttributes<"a"> {
-  className?: string;
   includeExternalLinkIcon?: boolean;
 }
 
@@ -10,10 +9,10 @@ import { Icon } from "astro-icon/components";
 
 const {
   href,
-  className,
+  class: className,
   includeExternalLinkIcon = true,
   ...attrs
-} = Astro.props as Props;
+} = Astro.props;
 
 const linkIsExternal: boolean =
   href !== undefined && href !== null
diff --git a/src/components/ThemeSelect.astro b/src/components/ThemeSelect.astro
deleted file mode 100644
index cdb384f..0000000
--- a/src/components/ThemeSelect.astro
+++ /dev/null
@@ -1,35 +0,0 @@
----
-const { class: providedClasses, selectClass, optionClass } = Astro.props;
----
-
-<theme-selector class:list={[providedClasses]}></theme-selector>
-<script is:inline define:vars={{ selectClass, optionClass }}>
-  if (!customElements.get("theme-selector")) {
-    customElements.define(
-      "theme-selector",
-      class extends HTMLElement {
-        connectedCallback() {
-          this.innerHTML = `
-            <select name="theme-select" class=${selectClass}>
-              <option value="auto" class=${optionClass}>Auto</option>
-              <option value="light" class=${optionClass}>Light</option>
-              <option value="dark" class=${optionClass}>Dark</option>
-            </select>
-          `;
-          this.querySelector("select").onchange = (event) =>
-            theme.setTheme(event.target.value);
-          this.setAttribute("aria-label", "Select Theme");
-          this.updateSelectedTheme();
-
-          document.addEventListener("theme-changed", (event) => {
-            this.updateSelectedTheme(event.detail.theme);
-          });
-        }
-
-        updateSelectedTheme(newTheme = theme.getTheme()) {
-          this.querySelector("select").value = newTheme;
-        }
-      }
-    );
-  }
-</script>
diff --git a/src/components/Token.astro b/src/components/Token.astro
index 0862f94..d1d9c13 100644
--- a/src/components/Token.astro
+++ b/src/components/Token.astro
@@ -1,10 +1,11 @@
 ---
-interface Props {
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"span"> {
   colour?: String;
   textColour?: String;
   size?: String;
   hover?: String;
-  className?: String;
 }
 
 const {
@@ -12,7 +13,7 @@ const {
   textColour = "text-white",
   size = "text-xs",
   hover = "hover:bg-white hover:text-primary hover:ring-primary hover:ring-2",
-  className,
+  class: className,
   ...attrs
 } = Astro.props as Props;
 ---
diff --git a/src/pages/404.astro b/src/pages/404.astro
index ad220ea..88e2b79 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -15,9 +15,9 @@ const heroImagesArray = await convertEagerImagesImportGlobToArray(heroImages);
   <div class="flex h-screen w-full items-center justify-center">
     <ImageCarousel
       images={heroImagesArray}
-      className="absolute z-10 h-full w-full"
+      class="absolute z-10 h-full w-full"
       foreground={true}
-      foregroundOpacity="opacity-90"
+      foregroundOpacity="opacity-80"
     />
     <div class="z-20 p-36 text-center">
       <h1
diff --git a/src/pages/about.astro b/src/pages/about.astro
index c461569..b78324a 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -2,9 +2,9 @@
 import { Image } from "astro:assets";
 import { Content } from "../assets/bios/about.mdx";
 import aboutImage from "../assets/img/about.jpg";
-import Link from "../components/Link.astro";
 import Paragraph from "../components/Paragraph.astro";
 import SectionTitle from "../components/SectionTitle.astro";
+import TextLink from "../components/TextLink.astro";
 import MainLayout from "../layouts/MainLayout.astro";
 ---
 
@@ -13,7 +13,7 @@ import MainLayout from "../layouts/MainLayout.astro";
     <section id="about" class="bg-white dark:bg-gray-950">
       <div class="mx-auto max-w-4xl px-8 py-16 text-justify sm:text-center">
         <SectionTitle>About</SectionTitle>
-        <Content components={{ p: Paragraph, a: Link }} />
+        <Content components={{ p: Paragraph, a: TextLink }} />
         <Image
           src={aboutImage}
           alt="A photo of Nathan conducting the Woodville Concert Band"
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index ccde8a3..b49b17b 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -1,8 +1,8 @@
 ---
 import { Icon } from "astro-icon/components";
-import Link from "../components/Link.astro";
 import Paragraph from "../components/Paragraph.astro";
 import SectionTitle from "../components/SectionTitle.astro";
+import TextLink from "../components/TextLink.astro";
 import MainLayout from "../layouts/MainLayout.astro";
 ---
 
@@ -14,13 +14,13 @@ import MainLayout from "../layouts/MainLayout.astro";
         <div class="grid grid-cols-1 text-lg md:grid-cols-2">
           <div class="col-span-1 flex flex-col items-center justify-center p-4">
             <Icon name="fa7-solid:at" class="text-4xl" />
-            <Link href="mailto:nathan@nathancummins.com.au" className="mt-4"
-              >nathan@nathancummins.com.au</Link
+            <TextLink href="mailto:nathan@nathancummins.com.au" class="mt-4"
+              >nathan@nathancummins.com.au</TextLink
             >
           </div>
           <div class="col-span-1 flex flex-col items-center justify-center p-4">
             <Icon name="fa7-solid:envelope" class="text-4xl" />
-            <Paragraph className="my-0 mt-4"
+            <Paragraph class="my-0 mt-4"
               >PO Box 2112 Regency Park SA 5942</Paragraph
             >
           </div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 2dcbaf9..4552c11 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -7,9 +7,9 @@ import { Content } from "@assets/bios/short.mdx";
 import aboutImage from "@assets/img/about.jpg";
 import AwardCard from "@components/AwardCard.astro";
 import ImageCarousel from "@components/ImageCarousel.astro";
-import Link from "@components/Link.astro";
 import Paragraph from "@components/Paragraph.astro";
 import SectionTitle from "@components/SectionTitle.astro";
+import TextLink from "@components/TextLink.astro";
 import person from "@data/person";
 import site from "@data/site";
 import MainLayout from "@layouts/MainLayout.astro";
@@ -27,7 +27,7 @@ const heroImagesArray = await convertEagerImagesImportGlobToArray(heroImages);
 const imagesForCTA = import.meta.glob<{ default: ImageMetadata; eager: true }>([
   "../assets/img/hero/*",
   "../assets/img/project-heros/*",
-  "../assets/img/projects/*"
+  "../assets/img/projects/**"
 ]);
 
 const imagesForCTAArray =
@@ -57,7 +57,7 @@ const tracks = (
     <div class="absolute inset-0 h-full w-full bg-black">
       <ImageCarousel
         images={heroImagesArray}
-        className="h-full w-full"
+        class="h-full w-full"
         foreground={true}
       />
     </div>
@@ -88,7 +88,7 @@ const tracks = (
     <section id="about" class="bg-white dark:bg-gray-950">
       <div class="mx-auto max-w-4xl px-8 py-16 text-justify sm:text-center">
         <SectionTitle>About</SectionTitle>
-        <Content components={{ p: Paragraph, a: Link }} />
+        <Content components={{ p: Paragraph, a: TextLink }} />
         <Image
           src={aboutImage}
           alt="Nathan conducting the Woodville Concert Band"
@@ -109,7 +109,7 @@ const tracks = (
       <div class="flex h-48 w-full items-center justify-center">
         <ImageCarousel
           images={imagesForCTAArray}
-          className="absolute -z-40 h-full w-full overflow-hidden"
+          class="absolute -z-40 h-full w-full"
           foreground={true}
           foregroundColour="bg-primary"
           foregroundOpacity="opacity-75 dark:opacity-25"
@@ -193,7 +193,7 @@ const tracks = (
               class="animate-scrolling-awards m-0 mx-auto flex max-w-3xs flex-col space-y-8 p-0"
             >
               {
-                awardsDoubled.map((award, index) => {
+                awardsDoubled.map((award) => {
                   return <AwardCard award={award} />;
                 })
               }
@@ -206,7 +206,7 @@ const tracks = (
       <div class="flex h-64 w-full items-center justify-center">
         <ImageCarousel
           images={imagesForCTAArray}
-          className="absolute -z-40 h-full w-full overflow-hidden"
+          class="absolute -z-40 h-full w-full overflow-hidden"
           foreground={true}
           foregroundColour="bg-primary"
           foregroundOpacity="opacity-50 dark:opacity-25"
@@ -224,13 +224,13 @@ const tracks = (
         <div class="grid grid-cols-1 text-lg md:grid-cols-2">
           <div class="col-span-1 flex flex-col items-center justify-center p-4">
             <Icon name="fa7-solid:at" class="text-4xl" />
-            <Link href="mailto:nathan@nathancummins.com.au" className="mt-4"
-              >nathan@nathancummins.com.au</Link
+            <TextLink href="mailto:nathan@nathancummins.com.au" class="mt-4"
+              >nathan@nathancummins.com.au</TextLink
             >
           </div>
           <div class="col-span-1 flex flex-col items-center justify-center p-4">
             <Icon name="fa7-solid:envelope" class="text-4xl" />
-            <Paragraph className="my-0 mt-4"
+            <Paragraph class="my-0 mt-4"
               >PO Box 2112 Regency Park SA 5942</Paragraph
             >
           </div>
diff --git a/src/pages/projects/[slug].astro b/src/pages/projects/[slug].astro
index f83c7be..59af33e 100644
--- a/src/pages/projects/[slug].astro
+++ b/src/pages/projects/[slug].astro
@@ -57,7 +57,7 @@ import P from "@components/MDX/P.astro";
       <div class="flex h-64 w-full items-center justify-center">
         <ImageCarousel
           images={images}
-          className="absolute -z-40 h-full w-full"
+          class="absolute -z-40 h-full w-full"
           foreground={true}
           interval={2000}
           transitionDuration="duration-1000"
diff --git a/src/pages/robots.txt.ts b/src/pages/robots.txt.ts
deleted file mode 100644
index 74ee15e..0000000
--- a/src/pages/robots.txt.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { APIRoute } from "astro";
-
-const getRobotsTxt = (sitemapURL: URL) => `\
-User-agent: *
-Allow: /
-
-Sitemap: ${sitemapURL.href}
-`;
-
-export const GET: APIRoute = ({ site }) => {
-  const sitemapURL = new URL("sitemap-index.xml", site);
-  return new Response(getRobotsTxt(sitemapURL));
-};