Some corrections with types and undeleted file

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>

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>

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">

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}
           />

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>

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>

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}>

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";

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>
       )

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>

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

src/components/ThemeSelect.astro

@@ -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>

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;
 ---

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

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"

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>

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>

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"

src/pages/robots.txt.ts

@@ -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));
-};