Build guide: add optional items section

src/components/StoreItems.astro

@@ -0,0 +1,43 @@
+---
+// Optional store items with small product photos, each linking to its svalboard.com
+// product page. Photos are the main image from each product page.
+import { Image } from 'astro:assets';
+import pearl from '../assets/build/store-trackball-52mm-pearl.webp';
+import black from '../assets/build/store-trackball-44mm-black.webp';
+import palms from '../assets/build/store-squishy-palms.webp';
+import towers from '../assets/build/store-pitch-towers.webp';
+import plates from '../assets/build/store-carrier-plates.webp';
+
+interface Props {
+	layout?: 'grid' | 'list';
+}
+const { layout = 'grid' } = Astro.props;
+
+const store = 'https://svalboard.com/products/';
+const items = [
+	{ name: '52 mm pearl trackball', href: store + 'svalboard-52mm-pearl-trackball', img: pearl, alt: 'Four 52 mm pearl trackballs: blue, purple, white and black.' },
+	{ name: '44 mm shiny black trackball', href: store + '44mm-shiny-black-trackball', img: black, alt: 'A 44 mm shiny black trackball.' },
+	{ name: '44 mm red trackball', href: store + '44mm-red-trackball', img: null, alt: '' },
+	{ name: 'Squishy palms', href: store + 'squishy-palmrests', img: palms, alt: 'A pair of black squishy palm rests with a fabric top.' },
+	{ name: 'Pitch towers', href: store + 'pitch-towers', img: towers, alt: 'A full set of sandblasted stainless pitch towers.' },
+	{ name: 'Carrier plates', href: store + 'carrier-plates', img: plates, alt: 'A pair of black anodized aluminum carrier plates.' },
+];
+---
+
+{/* VERIFY: the 44 mm red trackball has no photo on its store page, so its tile shows a drawn red ball. Use a real photo when one is on the store. */}
+<ul class={`store-items store-items--${layout}`} role="list">
+	{items.map((item) => (
+		<li>
+			<a class="store-item" href={item.href}>
+				<span class="store-item-pic">
+					{item.img ? (
+						<Image src={item.img} alt={item.alt} widths={[160, 240, 360, 480]} sizes={layout === 'grid' ? '(min-width: 40rem) 8rem, 30vw' : '4rem'} />
+					) : (
+						<span class="store-item-ball" role="img" aria-label="A red trackball." />
+					)}
+				</span>
+				<span class="store-item-name">{item.name}</span>
+			</a>
+		</li>
+	))}
+</ul>

src/content/docs/build/index.mdx

@@ -8,18 +8,27 @@ import finished from '../../../assets/build/finished-svalboard.jpg';
 import kitPhoto from '../../../assets/build/kit-hardware-photo.jpg';
 import CadFigure from '../../../components/CadFigure.astro';
 import YouTube from '../../../components/YouTube.astro';
+import StoreItems from '../../../components/StoreItems.astro';
 
 <div class="opening-pair">
 	<figure class="opening-fig">
-		<Image src={finished} alt="A finished Svalboard in gray and black on a white background: both halves, each with four finger clusters, a thumb cluster, a black trackball and a gray hemispherical palm rest." widths={[480, 720, 1080, 1440]} sizes="(min-width: 72rem) 22rem, (min-width: 40rem) 45vw, 100vw" loading="eager" fetchpriority="high" />
+		<a class="opening-link" href="https://svalboard.com/products/lightly"><Image src={finished} alt="A finished Svalboard in gray and black on a white background: both halves, each with four finger clusters, a thumb cluster, a black trackball and a gray hemispherical palm rest." widths={[480, 720, 1080, 1440]} sizes="(min-width: 72rem) 22rem, (min-width: 40rem) 45vw, 100vw" loading="eager" fetchpriority="high" /></a>
 		<figcaption>A finished board</figcaption>
+		<a class="opening-buy" href="https://svalboard.com/products/lightly">Buy complete</a>
 	</figure>
 	<figure class="opening-fig">
-		<Image src={kitPhoto} alt="The kit hardware laid out on a white background: FFCs, the two main PCBAs, cluster and thumb PCBAs, stainless towers, screws, square nuts, brass heat set inserts, two rods of magnets, a T10 driver and two USB-C cables." widths={[480, 720, 1080, 1280]} sizes="(min-width: 72rem) 22rem, (min-width: 40rem) 45vw, 100vw" loading="eager" />
+		<a class="opening-link" href="https://svalboard.com/products/svalboard-self-print-kit"><Image src={kitPhoto} alt="The kit hardware laid out on a white background: FFCs, the two main PCBAs, cluster and thumb PCBAs, stainless towers, screws, square nuts, brass heat set inserts, two rods of magnets, a T10 driver and two USB-C cables." widths={[480, 720, 1080, 1280]} sizes="(min-width: 72rem) 22rem, (min-width: 40rem) 45vw, 100vw" loading="eager" /></a>
 		<figcaption>What comes in the kit</figcaption>
+		<a class="opening-buy" href="https://svalboard.com/products/svalboard-self-print-kit">Buy the kit</a>
 	</figure>
 </div>
 
+## Optional items
+
+Add these to your kit from the Svalboard store:
+
+<StoreItems layout="grid" />
+
 This guide covers building a Svalboard from a self-print kit. It also helps with repairs and part swaps on a finished board.
 
 Help us improve it: [open an issue on GitHub](https://github.com/svalboard/docs/issues/new?title=Build%20guide%3A%20), or send comments on the [Svalboard Discord](https://www.svalboard.com/discord).

src/styles/custom.css

@@ -231,6 +231,26 @@
 	font-size: var(--sl-text-sm);
 	color: var(--sl-color-gray-2);
 }
+/* Store links on the opening pictures: the picture and a small link under the caption. */
+.sl-markdown-content .opening-link {
+	display: block;
+	border-radius: 0.75rem;
+}
+.sl-markdown-content .opening-link:focus-visible,
+.sl-markdown-content .opening-buy:focus-visible {
+	outline: 3px solid var(--sl-color-text-accent);
+	outline-offset: 3px;
+}
+.sl-markdown-content .opening-buy {
+	display: inline-block;
+	margin-top: 0.15rem;
+	font-size: var(--sl-text-sm);
+	color: var(--sl-color-text-accent);
+	text-decoration: none;
+}
+.sl-markdown-content .opening-buy:hover {
+	text-decoration: underline;
+}
 .sl-markdown-content .opening-pair {
 	display: grid;
 	grid-template-columns: 1fr;
@@ -246,6 +266,93 @@
 	}
 }
 
+/* Optional store items near the top of the build guide (src/components/StoreItems.astro).
+   Small product photos on their own white backdrop, each linking to the store. */
+.sl-markdown-content .store-items {
+	list-style: none;
+	margin: 0.75rem 0 1.5rem;
+	padding: 0;
+	display: grid;
+	gap: 0.75rem;
+}
+.sl-markdown-content .store-items > li {
+	margin: 0;
+	padding: 0;
+}
+.sl-markdown-content .store-item {
+	display: flex;
+	gap: 0.4rem;
+	color: var(--sl-color-gray-2);
+	font-size: var(--sl-text-sm);
+	line-height: 1.3;
+	text-decoration: none;
+}
+.sl-markdown-content .store-item:hover .store-item-name {
+	color: var(--sl-color-text-accent);
+}
+.sl-markdown-content .store-item:focus-visible {
+	outline: 3px solid var(--sl-color-text-accent);
+	outline-offset: 3px;
+	border-radius: 0.5rem;
+}
+.sl-markdown-content .store-item-pic {
+	display: block;
+	flex: none;
+	aspect-ratio: 4 / 3;
+	overflow: hidden;
+	border-radius: 0.5rem;
+	background-color: #fff;
+}
+.sl-markdown-content .store-item-pic img {
+	display: block;
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	object-fit: cover;
+}
+.sl-markdown-content .store-item-ball {
+	display: block;
+	width: 48%;
+	aspect-ratio: 1;
+	margin: 13% auto 0;
+	border-radius: 50%;
+	background: radial-gradient(circle at 35% 30%, #f27a6f 0%, #c8261c 45%, #7c120c 100%);
+}
+/* A: a compact grid of small cards, picture above the name. */
+.sl-markdown-content .store-items--grid {
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.sl-markdown-content .store-items--grid .store-item {
+	flex-direction: column;
+}
+@media (min-width: 40rem) {
+	.sl-markdown-content .store-items--grid {
+		grid-template-columns: repeat(6, minmax(0, 1fr));
+	}
+}
+/* B: a list with a small thumbnail beside each name. */
+.sl-markdown-content .store-items--list {
+	grid-template-columns: minmax(0, 1fr);
+	gap: 0.5rem;
+}
+.sl-markdown-content .store-items--list .store-item {
+	flex-direction: row;
+	align-items: center;
+	gap: 0.75rem;
+}
+.sl-markdown-content .store-items--list .store-item-pic {
+	width: 4rem;
+}
+.sl-markdown-content .store-items--list .store-item-name {
+	color: var(--sl-color-text-accent);
+	text-decoration: underline;
+}
+@media (min-width: 40rem) {
+	.sl-markdown-content .store-items--list {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+}
+
 /* Home page section cards (src/components/SectionCard.astro).
    Whole-card links: a picture, the title and a one-line description. No borders; the
    card is a soft surface that lifts on hover. */