From 534fbbab8f9fb1503e015099ebd6c431a47a7721 Mon Sep 17 00:00:00 2001 From: Ashim Gautam Upadhaya Date: Wed, 5 Nov 2025 22:40:31 -0600 Subject: [PATCH 1/4] componentize image card --- astro/src/components/ImageCard.astro | 58 +++++++++++++++++++ astro/src/content.config.ts | 2 + .../content/escape-room-themes/corporate.mdx | 10 ++-- .../content/escape-room-themes/kitchen.mdx | 4 +- .../pages/services/escape-room/index.astro | 29 ++++------ .../services/escape-room/themes/index.astro | 30 ++++------ 6 files changed, 93 insertions(+), 40 deletions(-) create mode 100644 astro/src/components/ImageCard.astro diff --git a/astro/src/components/ImageCard.astro b/astro/src/components/ImageCard.astro new file mode 100644 index 00000000..e5eaad52 --- /dev/null +++ b/astro/src/components/ImageCard.astro @@ -0,0 +1,58 @@ +--- +import { Image } from "astro:assets"; +import type { ImageMetadata } from "astro"; + +interface Props { + image: ImageMetadata; + alt?: string | null; + title: string; + tagline: string; + theme: string; + href: string; + buttonText: string; + borderClass?: string; + titleClass?: string; + colClass?: string; +} + +const { + image, + alt, + title, + tagline, + theme, + href, + buttonText, + borderClass = "border-dark", + titleClass, + colClass = "col" +} = Astro.props; + +const finalTitleClass = titleClass || `text-${theme}`; +--- + +
+
+ {alt +
+

+

+ +

+
+
+ + + diff --git a/astro/src/content.config.ts b/astro/src/content.config.ts index 8e1bd6fc..bbe47dd1 100644 --- a/astro/src/content.config.ts +++ b/astro/src/content.config.ts @@ -86,6 +86,8 @@ const escapeRoomThemes = defineCollection({ tagline: z.string(), image: image(), alt: z.string().optional(), + buttonText: z.string().optional().default("Learn more"), + href: z.string().optional(), page: z.object({ image: image(), theme: z.string().default("dark"), diff --git a/astro/src/content/escape-room-themes/corporate.mdx b/astro/src/content/escape-room-themes/corporate.mdx index 88cec953..c5e7258d 100644 --- a/astro/src/content/escape-room-themes/corporate.mdx +++ b/astro/src/content/escape-room-themes/corporate.mdx @@ -3,6 +3,8 @@ title: A Corporate Conundrum tagline: A ground-breaking technology your company has developed is missing. You've received a tip on how to retrieve it. image: src/images/escape-room/aleksandar-andreev-k2gRTJM9BPw-unsplash.jpg alt: A gentleman wearing dark clothes holding a briefcase +buttonText: Learn more +href: /services/escape-room/themes/corporate page: image: src/images/escape-room/aleksandar-andreev-k2gRTJM9BPw-unsplash.jpg theme: corporate @@ -16,7 +18,7 @@ This escape room kit includes puzzles that involve translating braille, number a ### Disabilities Supported -* Blind participants are supported through Braille and SeeingAI. -* Captions are provided for audio content. -* We provide a descriptive transcript to be printed in braille for deaf-blind participants -* Individuals with limited fine motor control can solve several puzzles but others on the team will need to manipulate locks and objects using the solution. Dragon or other speech input software can be installed on a laptop to give access to one puzzle. \ No newline at end of file +- Blind participants are supported through Braille and SeeingAI. +- Captions are provided for audio content. +- We provide a descriptive transcript to be printed in braille for deaf-blind participants +- Individuals with limited fine motor control can solve several puzzles but others on the team will need to manipulate locks and objects using the solution. Dragon or other speech input software can be installed on a laptop to give access to one puzzle. diff --git a/astro/src/content/escape-room-themes/kitchen.mdx b/astro/src/content/escape-room-themes/kitchen.mdx index 5789146b..58d7664c 100644 --- a/astro/src/content/escape-room-themes/kitchen.mdx +++ b/astro/src/content/escape-room-themes/kitchen.mdx @@ -3,6 +3,8 @@ title: A Baking Bonanza tagline: You are looking for classic recipes to submit to the local fair. Will you find them in time to win the blue ribbon? image: src/images/escape-room/priscilla-du-preez-SU5jSHu1pK8-unsplash.jpg alt: A freshly baked pie, next to a jar of flour and a rolling pin +buttonText: Learn more +href: /services/escape-room/themes/kitchen page: image: src/images/escape-room/priscilla-du-preez-SU5jSHu1pK8-unsplash.jpg theme: kitchen @@ -19,4 +21,4 @@ This escape room kit includes puzzles that involve manipulating objects, number - Blind participants are supported through Braille and SeeingAI - Captions are provided for audio content - We provide a descriptive transcript to be printed in braille for deaf-blind participants -- Individuals with limited fine motor control can solve several puzzles but others on the team will need to manipulate locks and objects using the solution \ No newline at end of file +- Individuals with limited fine motor control can solve several puzzles but others on the team will need to manipulate locks and objects using the solution diff --git a/astro/src/pages/services/escape-room/index.astro b/astro/src/pages/services/escape-room/index.astro index 60d6bfc5..3c38ff9d 100644 --- a/astro/src/pages/services/escape-room/index.astro +++ b/astro/src/pages/services/escape-room/index.astro @@ -20,6 +20,7 @@ import { Icon } from "astro-icon/components"; import { Image } from "astro:assets"; import EscapeRoomLayout from "src/layouts/EscapeRoomLayout.astro"; import ThemedSection from "@components/ThemedSection.astro"; +import ImageCard from "@components/ImageCard.astro"; import { YouTube } from 'astro-lazy-youtube-embed' import brailleBlocks from "src/images/escape-room/braille-blocks.png"; @@ -125,23 +126,17 @@ import woodenPuzzles from "src/images/escape-room/wooden-puzzles.png";
{ rooms.map(room => ( -
-
- {room.data.alt -
-

-

- Learn more -

-
-
+ )) }
diff --git a/astro/src/pages/services/escape-room/themes/index.astro b/astro/src/pages/services/escape-room/themes/index.astro index 5b0b577a..92e219e3 100644 --- a/astro/src/pages/services/escape-room/themes/index.astro +++ b/astro/src/pages/services/escape-room/themes/index.astro @@ -18,9 +18,9 @@ const crumbs: Breadcrumbs = [ ]; import Hero from "@components/HeroWithBreadcrumbs.astro"; -import { Image } from "astro:assets"; import EscapeRoomLayout from "src/layouts/EscapeRoomLayout.astro"; import ThemedSection from "@components/ThemedSection.astro"; +import ImageCard from "@components/ImageCard.astro"; import heroBg from "src/images/escape-room/jonathan-kemper-9tamF4J0vLk-unsplash.jpg"; @@ -43,23 +43,17 @@ const rooms: Array> = > { rooms.map(room => ( -
-
- {room.data.alt -
-

-

- Learn more -

-
-
+ )) } From ca5eb909acdc01af10913d6de7b7c3c5de3bf4f7 Mon Sep 17 00:00:00 2001 From: Ashim Gautam Upadhaya Date: Wed, 5 Nov 2025 22:58:16 -0600 Subject: [PATCH 2/4] refactor --- astro/src/pages/services/escape-room/index.astro | 2 +- astro/src/pages/services/escape-room/themes/index.astro | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/astro/src/pages/services/escape-room/index.astro b/astro/src/pages/services/escape-room/index.astro index 3c38ff9d..7cb8d24d 100644 --- a/astro/src/pages/services/escape-room/index.astro +++ b/astro/src/pages/services/escape-room/index.astro @@ -132,7 +132,7 @@ import woodenPuzzles from "src/images/escape-room/wooden-puzzles.png"; title={room.data.title} tagline={room.data.tagline} theme={room.data.page.theme} - href={room.data.href || `/services/escape-room/themes/${room.id}`} + href={room.data.href} buttonText={room.data.buttonText || "Learn more"} borderClass="border-dark" titleClass={`text-truncate text-${room.data.page.theme}`} diff --git a/astro/src/pages/services/escape-room/themes/index.astro b/astro/src/pages/services/escape-room/themes/index.astro index 92e219e3..5e53614f 100644 --- a/astro/src/pages/services/escape-room/themes/index.astro +++ b/astro/src/pages/services/escape-room/themes/index.astro @@ -49,7 +49,7 @@ const rooms: Array> = title={room.data.title} tagline={room.data.tagline} theme={room.data.page.theme} - href={room.data.href || `/services/escape-room/themes/${room.id}`} + href={room.data.href} buttonText={room.data.buttonText || "Learn more"} borderClass={`border-${room.data.page.theme}-subtle`} titleClass={`text-${room.data.page.theme}-emphasis`} From 60a29cfe1a3437242f3943a70f78454e8b7adcb1 Mon Sep 17 00:00:00 2001 From: Ashim Date: Thu, 8 Jan 2026 01:51:15 -0600 Subject: [PATCH 3/4] feedback from PR review --- astro/src/components/ImageCard.astro | 13 ++++++------- astro/src/content.config.ts | 1 - astro/src/content/escape-room-themes/corporate.mdx | 1 - astro/src/content/escape-room-themes/kitchen.mdx | 1 - astro/src/pages/services/escape-room/index.astro | 8 ++++---- .../pages/services/escape-room/themes/index.astro | 9 ++++----- 6 files changed, 14 insertions(+), 19 deletions(-) diff --git a/astro/src/components/ImageCard.astro b/astro/src/components/ImageCard.astro index e5eaad52..7183f26e 100644 --- a/astro/src/components/ImageCard.astro +++ b/astro/src/components/ImageCard.astro @@ -6,7 +6,6 @@ interface Props { image: ImageMetadata; alt?: string | null; title: string; - tagline: string; theme: string; href: string; buttonText: string; @@ -19,16 +18,16 @@ const { image, alt, title, - tagline, theme, href, buttonText, - borderClass = "border-dark", - titleClass, colClass = "col" } = Astro.props; -const finalTitleClass = titleClass || `text-${theme}`; +const { + borderClass = `border-${theme}-subtle`, + titleClass = `text-${theme}`, +} = Astro.props; ---
@@ -39,8 +38,8 @@ const finalTitleClass = titleClass || `text-${theme}`; alt={alt || null} />
-

-

+

+ + > +

+ )) }

diff --git a/astro/src/pages/services/escape-room/themes/index.astro b/astro/src/pages/services/escape-room/themes/index.astro index 5e53614f..4c1c7dbd 100644 --- a/astro/src/pages/services/escape-room/themes/index.astro +++ b/astro/src/pages/services/escape-room/themes/index.astro @@ -1,4 +1,3 @@ ---- import { getOpenGraphImageData } from "@lib/og-image"; import type { Breadcrumbs, PageMetadata } from "@lib/types"; import { getCollection, type CollectionEntry } from "astro:content"; @@ -47,13 +46,13 @@ const rooms: Array> = image={room.data.image} alt={room.data.alt} title={room.data.title} - tagline={room.data.tagline} theme={room.data.page.theme} - href={room.data.href} + href={`/services/escape-room/themes/${room.id}`} buttonText={room.data.buttonText || "Learn more"} - borderClass={`border-${room.data.page.theme}-subtle`} titleClass={`text-${room.data.page.theme}-emphasis`} - /> + > +

+ )) }

From 53fcecfa5e6cf1de511ab0da88773128416d1725 Mon Sep 17 00:00:00 2001 From: Ashim Date: Thu, 8 Jan 2026 02:12:09 -0600 Subject: [PATCH 4/4] try to fix build error --- astro/src/pages/services/escape-room/themes/index.astro | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/astro/src/pages/services/escape-room/themes/index.astro b/astro/src/pages/services/escape-room/themes/index.astro index 4c1c7dbd..0bb49325 100644 --- a/astro/src/pages/services/escape-room/themes/index.astro +++ b/astro/src/pages/services/escape-room/themes/index.astro @@ -23,8 +23,10 @@ import ImageCard from "@components/ImageCard.astro"; import heroBg from "src/images/escape-room/jonathan-kemper-9tamF4J0vLk-unsplash.jpg"; -const rooms: Array> = - sortBy(await getCollection("escapeRoomThemes"), (room) => room.data.title); +const rooms = sortBy( + await getCollection("escapeRoomThemes"), + (room) => room.data.title +); ---