Skip to content

Commit d50975c

Browse files
ashimupdashimupd
authored
Issue #426: Componentize image card (#427)
1 parent 9ec0e41 commit d50975c

9 files changed

Lines changed: 121 additions & 48 deletions

File tree

‎astro/package-lock.json‎

Lines changed: 19 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎astro/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,12 @@
2626
"astro-og-canvas": "0.5.6",
2727
"astro-robots-txt": "1.0.0",
2828
"bootstrap": "5.3.8",
29-
"lodash-es": "^4.18.0",
29+
"lodash-es": "^4.18.1",
3030
"sanitize-html": "2.13.0",
3131
"sass": "1.77.5"
3232
},
3333
"devDependencies": {
34+
"@types/lodash-es": "^4.17.12",
3435
"prettier": "^3.2.5",
3536
"prettier-plugin-astro": "^0.14.0"
3637
}

‎astro/src/components/ImageCard.astro‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
import { Image } from "astro:assets";
3+
import type { ImageMetadata } from "astro";
4+
5+
interface Props {
6+
image: ImageMetadata;
7+
alt?: string | null;
8+
title?: string;
9+
theme: string;
10+
href: string;
11+
buttonText: string;
12+
borderClass?: string;
13+
titleClass?: string;
14+
colClass?: string;
15+
}
16+
17+
const {
18+
image,
19+
alt,
20+
title,
21+
theme,
22+
href,
23+
buttonText,
24+
colClass = "col"
25+
} = Astro.props;
26+
27+
const {
28+
borderClass = `border-${theme}-subtle`,
29+
titleClass = `text-${theme}`,
30+
} = Astro.props;
31+
---
32+
33+
<div class={colClass}>
34+
<div class={`card border ${borderClass}`}>
35+
<Image
36+
src={image}
37+
class="card-img-top"
38+
alt={alt || null}
39+
/>
40+
<div class="card-body">
41+
<h3 class={`card-title ${titleClass}`} set:text={title} />
42+
<slot />
43+
<a
44+
href={href}
45+
class={`btn btn-${theme}`}
46+
set:text={buttonText}
47+
/>
48+
</div>
49+
</div>
50+
</div>
51+
52+
<style>
53+
.card-img-top {
54+
height: auto;
55+
}
56+
</style>
57+

‎astro/src/content.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@ const escapeRoomThemes = defineCollection({
111111
tagline: z.string(),
112112
image: image(),
113113
alt: z.string().optional(),
114+
buttonText: z.string().optional().default("Learn more"),
114115
page: z.object({
115116
image: image(),
116117
theme: z.string().default("dark"),

‎astro/src/content/escape-room/themes/corporate.mdx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ title: A Corporate Conundrum
33
tagline: A ground-breaking technology your company has developed is missing. You've received a tip on how to retrieve it.
44
image: /src/images/escape-room/aleksandar-andreev-k2gRTJM9BPw-unsplash.jpg
55
alt: A gentleman wearing dark clothes holding a briefcase
6+
buttonText: Learn more
67
page:
78
image: /src/images/escape-room/aleksandar-andreev-k2gRTJM9BPw-unsplash.jpg
89
theme: corporate
@@ -16,7 +17,7 @@ This escape room kit includes puzzles that involve translating braille, number a
1617

1718
### Disabilities Supported
1819

19-
* Blind participants are supported through Braille and SeeingAI.
20-
* Captions are provided for audio content.
21-
* We provide a descriptive transcript to be printed in braille for deaf-blind participants
22-
* 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.
20+
- Blind participants are supported through Braille and SeeingAI.
21+
- Captions are provided for audio content.
22+
- We provide a descriptive transcript to be printed in braille for deaf-blind participants
23+
- 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.

‎astro/src/content/escape-room/themes/kitchen.mdx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ title: A Baking Bonanza
33
tagline: You are looking for classic recipes to submit to the local fair. Will you find them in time to win the blue ribbon?
44
image: /src/images/escape-room/priscilla-du-preez-SU5jSHu1pK8-unsplash.jpg
55
alt: A freshly baked pie, next to a jar of flour and a rolling pin
6+
buttonText: Learn more
67
page:
78
image: /src/images/escape-room/priscilla-du-preez-SU5jSHu1pK8-unsplash.jpg
89
theme: kitchen
@@ -19,4 +20,4 @@ This escape room kit includes puzzles that involve manipulating objects, number
1920
- Blind participants are supported through Braille and SeeingAI
2021
- Captions are provided for audio content
2122
- We provide a descriptive transcript to be printed in braille for deaf-blind participants
22-
- 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
23+
- 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

‎astro/src/pages/escape-room/index.astro‎

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,10 @@ const metadata: PageMetadata = {
1212
};
1313
1414
const rooms: Array<CollectionEntry<"escapeRoomThemes">> =
15-
sortBy(await getCollection("escapeRoomThemes"), (room) => room.data.title);
15+
sortBy(
16+
await getCollection("escapeRoomThemes"),
17+
(room: CollectionEntry<"escapeRoomThemes">) => room.data.title
18+
);
1619
1720
1821
import Branding from "@components/Branding.astro";
@@ -21,6 +24,7 @@ import { Icon } from "astro-icon/components";
2124
import { Image } from "astro:assets";
2225
import EscapeRoomLayout from "src/layouts/EscapeRoomLayout.astro";
2326
import ThemedSection from "@components/ThemedSection.astro";
27+
import ImageCard from "@components/ImageCard.astro";
2428
import { YouTube } from 'astro-lazy-youtube-embed'
2529
2630
import brailleBlocks from "src/images/escape-room/braille-blocks.png";
@@ -130,23 +134,17 @@ import woodenPuzzles from "src/images/escape-room/wooden-puzzles.png";
130134
<div class="row row-cols-2 g-3 align-items-stretch">
131135
{
132136
rooms.map(room => (
133-
<div class="col">
134-
<div class="card border border-dark">
135-
<Image
136-
src={room.data.image}
137-
class="card-img-top"
138-
alt={room.data.alt || null}
139-
/>
140-
<div class="card-body">
141-
<h3 class={`card-title text-truncate text-${room.data.page.theme}`} set:text={room.data.title} />
142-
<p class="card-text" set:text={room.data.tagline} />
143-
<a
144-
href={`/escape-room/themes/${room.id}`}
145-
class={`btn btn-${room.data.page.theme}`}
146-
>Learn more</a>
147-
</div>
148-
</div>
149-
</div>
137+
<ImageCard
138+
image={room.data.image}
139+
alt={room.data.alt || null}
140+
title={room.data.title}
141+
theme={room.data.page.theme}
142+
href={`/services/escape-room/themes/${room.id}`}
143+
buttonText={room.data.buttonText || "Learn more"}
144+
titleClass={`text-truncate text-${room.data.page.theme}`}
145+
>
146+
<p class="card-text" set:text={room.data.tagline} />
147+
</ImageCard>
150148
))
151149
}
152150
</div>

‎astro/src/pages/escape-room/themes/index.astro‎

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,16 @@ const crumbs: Breadcrumbs = [
1818
];
1919
2020
import Hero from "@components/HeroWithBreadcrumbs.astro";
21-
import { Image } from "astro:assets";
2221
import EscapeRoomLayout from "src/layouts/EscapeRoomLayout.astro";
2322
import ThemedSection from "@components/ThemedSection.astro";
23+
import ImageCard from "@components/ImageCard.astro";
2424
2525
import heroBg from "src/images/escape-room/jonathan-kemper-9tamF4J0vLk-unsplash.jpg";
2626
27-
const rooms: Array<CollectionEntry<"escapeRoomThemes">> =
28-
sortBy(await getCollection("escapeRoomThemes"), (room) => room.data.title);
27+
const rooms = sortBy(
28+
await getCollection("escapeRoomThemes"),
29+
(room: CollectionEntry<"escapeRoomThemes">) => room.data.title
30+
);
2931
3032
---
3133

@@ -43,23 +45,17 @@ const rooms: Array<CollectionEntry<"escapeRoomThemes">> =
4345
>
4446
{
4547
rooms.map(room => (
46-
<div class="col">
47-
<div class={`card border border-${room.data.page.theme}-subtle`}>
48-
<Image
49-
src={room.data.image}
50-
class="card-img-top"
51-
alt={room.data.alt || null}
52-
/>
53-
<div class="card-body">
54-
<h3 class={`text-${room.data.page.theme}-emphasis`} set:text={room.data.title} />
55-
<p class="card-text" set:text={room.data.tagline} />
56-
<a
57-
href={`/escape-room/themes/${room.id}`}
58-
class={`btn btn-${room.data.page.theme}`}
59-
>Learn more</a>
60-
</div>
61-
</div>
62-
</div>
48+
<ImageCard
49+
image={room.data.image}
50+
alt={room.data.alt}
51+
title={room.data.title}
52+
theme={room.data.page.theme}
53+
href={`/services/escape-room/themes/${room.id}`}
54+
buttonText={room.data.buttonText || "Learn more"}
55+
titleClass={`text-${room.data.page.theme}-emphasis`}
56+
>
57+
<p class="card-text" set:text={room.data.tagline} />
58+
</ImageCard>
6359
))
6460
}
6561
</div>

‎astro/tsconfig.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
"strictNullChecks": true,
77
"baseUrl": ".",
88
"paths": {
9-
"@components/*": ["./src/components/*"],
10-
"@lib/*": ["./src/lib/*"],
11-
"~bootstrap-es": ["./node_modules/bootstrap/dist/js/bootstrap.esm.min.js"],
9+
"@components/*": ["src/components/*"],
10+
"@lib/*": ["src/lib/*"],
11+
"~bootstrap-es": ["node_modules/bootstrap/dist/js/bootstrap.esm.min.js"],
1212
}
1313
},
1414
}

0 commit comments

Comments
 (0)