encie22/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Nathan Cummins
2025-08-08 18:56:30 +09:30
parent ae3c38be17
commit bf9e87d5bf
6 changed files with 62 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/projects/dungeons-and-dining-tables.mdx
View File

@@ -24,5 +24,3 @@ externalLinks:
} }
] ]
--- ---
I have been enjoying working with Catalyst Games on Dungeons and Dining Tables.

11
src/layouts/MainHead.astro
View File

@@ -7,7 +7,14 @@ import Analytics from "@components/Analytics.astro";
import SEO from "@components/SEO.astro"; import SEO from "@components/SEO.astro";
import ThemeManager from "@components/ThemeManager.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" // 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 = const headTitle: string =
@@ -26,7 +33,7 @@ const headDescription: string = description || site.description;
<link rel="icon" type="image/png" href="/favicon.png" /> <link rel="icon" type="image/png" href="/favicon.png" />
<link rel="apple-touch-icon" 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" /> <ThemeManager defaultTheme="auto" />

11
src/layouts/MainLayout.astro
View File

@@ -4,6 +4,7 @@ interface Props {
subtitle?: string; subtitle?: string;
description?: string; description?: string;
navbarDisplay?: "normal" | "transparent"; navbarDisplay?: "normal" | "transparent";
image?: SiteImage;
} }
import "@/styles/global.css"; import "@/styles/global.css";
@@ -14,7 +15,13 @@ import Navbar from "@components/Navbar.astro";
import Player from "@components/Player.astro"; import Player from "@components/Player.astro";
import MainHead from "@layouts/MainHead.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 = ( const autoQueuedTracks = (
await getCollection("tracks", ({ data }) => data.autoQueue) await getCollection("tracks", ({ data }) => data.autoQueue)
@@ -25,7 +32,7 @@ const autoQueuedTracks = (
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<MainHead {title} {subtitle} {description} /> <MainHead {title} {subtitle} {description} {image} />
<body> <body>
<Navbar {navbarDisplay} /> <Navbar {navbarDisplay} />
<main> <main>

15
src/lib/utils.ts
View File

@@ -1,4 +1,5 @@
import type { ImageMetadata } from "astro"; import type { ImageMetadata } from "astro";
import { getImage } from "astro:assets";
import type { CollectionEntry } from "astro:content"; import type { CollectionEntry } from "astro:content";
type Project = CollectionEntry<"projects">; type Project = CollectionEntry<"projects">;
@@ -13,12 +14,15 @@ const allProjectHeros = import.meta.glob<{ default: ImageMetadata }>(
{ eager: true } { 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)) { for (const [path, mod] of Object.entries(allProjectHeros)) {
if (path.includes(project.data.images.hero.src)) { if (path.includes(project.data.images.hero.src)) {
return mod.default; image = mod.default;
} }
} }
return image;
} }
export function getProjectOtherImages(project: Project): ImageMetadata[] { export function getProjectOtherImages(project: Project): ImageMetadata[] {
@@ -99,3 +103,10 @@ export async function convertImagesImportGlobToArray(
return returnedImages; return returnedImages;
} }
export async function getFullExternalURLOfImage(
image: ImageMetadata
): Promise<string> {
return new URL((await getImage({ src: image })).src, import.meta.env.SITE)
.href;
}

22
src/pages/index.astro
View File

@@ -203,14 +203,20 @@ const tracks = (
</div> </div>
</div> </div>
</section> </section>
<section id="services" class="bg-primary text-white dark:bg-gray-800"> <section id="fillerUntilServicesIsComplete" class="text-white">
<div class="mx-auto max-w-4xl px-8 py-16 text-center"> <div class="flex h-64 w-full items-center justify-center">
<SectionTitle lineColour="text-white">Services</SectionTitle> <ImageCarousel
<Paragraph> images={imagesForCTAArray}
This is where I will put a list of services I offer, such as web className="absolute -z-40 h-full w-full"
development, music composition, etc. Each service can link to a more foreground={true}
detailed page. foregroundColour="bg-primary"
</Paragraph> foregroundOpacity="opacity-50 dark:opacity-25"
interval={1000}
transitionDuration="duration-500"
quality={5}
height={256}
shuffle={true}
/>
</div> </div>
</section> </section>
<section id="contact" class="bg-white dark:bg-gray-950"> <section id="contact" class="bg-white dark:bg-gray-950">

19
src/pages/projects/[...slug].astro
View File

@@ -5,7 +5,11 @@ import MainLayout from "@layouts/MainLayout.astro";
import { getCollection, render } from "astro:content"; import { getCollection, render } from "astro:content";
import { getAllProjectImages } from "@/lib/utils"; import {
getAllProjectImages,
getFullExternalURLOfImage,
getProjectHero
} from "@/lib/utils";
export async function getStaticPaths() { export async function getStaticPaths() {
const projects = await getCollection("projects"); const projects = await getCollection("projects");
@@ -19,9 +23,20 @@ const { project } = Astro.props;
const { Content } = await render(project); const { Content } = await render(project);
const images = getAllProjectImages(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"> <div class="w-full">
<section id="cta" class="text-white"> <section id="cta" class="text-white">
<div class="flex h-64 w-full items-center justify-center"> <div class="flex h-64 w-full items-center justify-center">