SEO images, remove services section (for the time being)

2025-08-08 18:56:30 +09:30
parent ae3c38be17
commit bf9e87d5bf
6 changed files with 62 additions and 18 deletions
--- a/src/assets/projects/dungeons-and-dining-tables.mdx
+++ b/src/assets/projects/dungeons-and-dining-tables.mdx
@@ -24,5 +24,3 @@ externalLinks:
    }
  ]
 ---
-
-I have been enjoying working with Catalyst Games on Dungeons and Dining Tables.
--- a/src/layouts/MainHead.astro
+++ b/src/layouts/MainHead.astro
@@ -7,7 +7,14 @@ import Analytics from "@components/Analytics.astro";
 import SEO from "@components/SEO.astro";
 import ThemeManager from "@components/ThemeManager.astro";

-const { title, subtitle, description } = Astro.props;
+interface Props {
+  title?: string;
+  subtitle?: string;
+  description?: string;
+  image?: SiteImage;
+}
+
+const { title, subtitle, description, image } = Astro.props;

 // if a title is provided, use it as follows "title | site.title - site.suffix". If no title is provided, instead do "site.title - site.suffix"
 const headTitle: string =
@@ -26,7 +33,7 @@ const headDescription: string = description || site.description;
  <link rel="icon" type="image/png" href="/favicon.png" />
  <link rel="apple-touch-icon" href="/favicon.png" />

-  <SEO title={headTitle} description={headDescription} />
+  <SEO title={headTitle} description={headDescription} {image} />

  <ThemeManager defaultTheme="auto" />

--- a/src/layouts/MainLayout.astro
+++ b/src/layouts/MainLayout.astro
@@ -4,6 +4,7 @@ interface Props {
  subtitle?: string;
  description?: string;
  navbarDisplay?: "normal" | "transparent";
+  image?: SiteImage;
 }

 import "@/styles/global.css";
@@ -14,7 +15,13 @@ import Navbar from "@components/Navbar.astro";
 import Player from "@components/Player.astro";
 import MainHead from "@layouts/MainHead.astro";

-const { title, subtitle, description, navbarDisplay = "normal" } = Astro.props;
+const {
+  title,
+  subtitle,
+  description,
+  navbarDisplay = "normal",
+  image
+} = Astro.props;

 const autoQueuedTracks = (
  await getCollection("tracks", ({ data }) => data.autoQueue)
@@ -25,7 +32,7 @@ const autoQueuedTracks = (

 <!doctype html>
 <html lang="en">
-  <MainHead {title} {subtitle} {description} />
+  <MainHead {title} {subtitle} {description} {image} />
  <body>
    <Navbar {navbarDisplay} />
    <main>
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,4 +1,5 @@
 import type { ImageMetadata } from "astro";
+import { getImage } from "astro:assets";

 import type { CollectionEntry } from "astro:content";
 type Project = CollectionEntry<"projects">;
@@ -13,12 +14,15 @@ const allProjectHeros = import.meta.glob<{ default: ImageMetadata }>(
  { eager: true }
 );

-export function getProjectHero(project: Project): ImageMetadata | undefined {
+export function getProjectHero(project: Project): ImageMetadata {
+  let image: ImageMetadata = Object.values(allProjectHeros)[0].default;
  for (const [path, mod] of Object.entries(allProjectHeros)) {
    if (path.includes(project.data.images.hero.src)) {
-      return mod.default;
+      image = mod.default;
    }
  }
+
+  return image;
 }

 export function getProjectOtherImages(project: Project): ImageMetadata[] {
@@ -99,3 +103,10 @@ export async function convertImagesImportGlobToArray(

  return returnedImages;
 }
+
+export async function getFullExternalURLOfImage(
+  image: ImageMetadata
+): Promise<string> {
+  return new URL((await getImage({ src: image })).src, import.meta.env.SITE)
+    .href;
+}
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -203,14 +203,20 @@ const tracks = (
        </div>
      </div>
    </section>
-    <section id="services" class="bg-primary text-white dark:bg-gray-800">
-      <div class="mx-auto max-w-4xl px-8 py-16 text-center">
-        <SectionTitle lineColour="text-white">Services</SectionTitle>
-        <Paragraph>
-          This is where I will put a list of services I offer, such as web
-          development, music composition, etc. Each service can link to a more
-          detailed page.
-        </Paragraph>
+    <section id="fillerUntilServicesIsComplete" class="text-white">
+      <div class="flex h-64 w-full items-center justify-center">
+        <ImageCarousel
+          images={imagesForCTAArray}
+          className="absolute -z-40 h-full w-full"
+          foreground={true}
+          foregroundColour="bg-primary"
+          foregroundOpacity="opacity-50 dark:opacity-25"
+          interval={1000}
+          transitionDuration="duration-500"
+          quality={5}
+          height={256}
+          shuffle={true}
+        />
      </div>
    </section>
    <section id="contact" class="bg-white dark:bg-gray-950">
--- a/src/pages/projects/[...slug].astro
+++ b/src/pages/projects/[...slug].astro
@@ -5,7 +5,11 @@ import MainLayout from "@layouts/MainLayout.astro";

 import { getCollection, render } from "astro:content";

-import { getAllProjectImages } from "@/lib/utils";
+import {
+  getAllProjectImages,
+  getFullExternalURLOfImage,
+  getProjectHero
+} from "@/lib/utils";

 export async function getStaticPaths() {
  const projects = await getCollection("projects");
@@ -19,9 +23,20 @@ const { project } = Astro.props;
 const { Content } = await render(project);

 const images = getAllProjectImages(project);
+const hero = getProjectHero(project);
+
+const seoImage: SiteImage = {
+  externalURL: await getFullExternalURLOfImage(hero),
+  src: hero.src,
+  alt: project.data.images.hero.alt
+};
 ---

-<MainLayout title="Projects">
+<MainLayout
+  title={project.data.title}
+  description={project.data.description}
+  image={seoImage}
+>
  <div class="w-full">
    <section id="cta" class="text-white">
      <div class="flex h-64 w-full items-center justify-center">