")
+ process.exit(2)
+ }
+ let data: unknown
+ try {
+ data = JSON.parse(readFileSync(path, "utf8"))
+ } catch (err) {
+ console.error(`failed to read/parse ${path}:`, err)
+ process.exit(1)
+ }
+ const errors = validateCatalog(data)
+ if (errors.length > 0) {
+ console.error("catalog validation failed:")
+ for (const e of errors) console.error(` - ${e}`)
+ process.exit(1)
+ }
+ console.log("catalog OK")
+}
diff --git a/sites/images-devsy-sh/src/App.svelte b/sites/images-devsy-sh/src/App.svelte
new file mode 100644
index 000000000..89949a6eb
--- /dev/null
+++ b/sites/images-devsy-sh/src/App.svelte
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/sites/images-devsy-sh/src/app.css b/sites/images-devsy-sh/src/app.css
new file mode 100644
index 000000000..09c06e488
--- /dev/null
+++ b/sites/images-devsy-sh/src/app.css
@@ -0,0 +1,64 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+ --background: hsl(0 0% 100%);
+ --foreground: hsl(240 10% 3.9%);
+ --card: hsl(0 0% 100%);
+ --card-foreground: hsl(240 10% 3.9%);
+ --primary: hsl(161.8 100% 23.9%);
+ --primary-foreground: hsl(151.8 80.9% 95.8%);
+ --secondary: hsl(240 4.8% 95.9%);
+ --secondary-foreground: hsl(240 5.9% 10%);
+ --muted: hsl(240 4.8% 95.9%);
+ --muted-foreground: hsl(240 3.8% 46.1%);
+ --border: hsl(240 5.9% 90%);
+ --input: hsl(240 5.9% 90%);
+ --ring: hsl(161.8 100% 23.9%);
+ --radius: 0.5rem;
+}
+
+.dark {
+ --background: hsl(240 10% 3.9%);
+ --foreground: hsl(0 0% 98%);
+ --card: hsl(240 10% 3.9%);
+ --card-foreground: hsl(0 0% 98%);
+ --primary: hsl(163 100% 18.9%);
+ --primary-foreground: hsl(151.8 80.9% 95.8%);
+ --secondary: hsl(240 3.7% 15.9%);
+ --secondary-foreground: hsl(0 0% 98%);
+ --muted: hsl(240 3.7% 15.9%);
+ --muted-foreground: hsl(240 5% 64.9%);
+ --border: hsl(240 3.7% 15.9%);
+ --input: hsl(240 3.7% 15.9%);
+ --ring: hsl(163 100% 18.9%);
+}
+
+@theme inline {
+ --radius-sm: calc(var(--radius) - 4px);
+ --radius-md: calc(var(--radius) - 2px);
+ --radius-lg: var(--radius);
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --color-card: var(--card);
+ --color-card-foreground: var(--card-foreground);
+ --color-muted: var(--muted);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-primary: var(--primary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-secondary: var(--secondary);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-ring: var(--ring);
+}
+
+@layer base {
+ * {
+ @apply border-border;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+}
diff --git a/sites/images-devsy-sh/src/catalog.json b/sites/images-devsy-sh/src/catalog.json
new file mode 100644
index 000000000..3e79578db
--- /dev/null
+++ b/sites/images-devsy-sh/src/catalog.json
@@ -0,0 +1,92 @@
+{
+ "version": 1,
+ "categories": [
+ { "id": "languages", "label": "Languages" },
+ { "id": "universal", "label": "Universal" }
+ ],
+ "images": [
+ {
+ "id": "universal",
+ "ref": "mcr.microsoft.com/devcontainers/universal:2",
+ "name": "Universal",
+ "description": "Multi-language image with common tools preinstalled.",
+ "categories": ["universal"],
+ "icon": "universal",
+ "featured": true
+ },
+ {
+ "id": "python-3.12",
+ "ref": "mcr.microsoft.com/devcontainers/python:3.12",
+ "name": "Python 3.12",
+ "description": "Python 3.12 development image.",
+ "categories": ["languages"],
+ "icon": "Python",
+ "featured": true
+ },
+ {
+ "id": "node-20",
+ "ref": "mcr.microsoft.com/devcontainers/javascript-node:20",
+ "name": "Node.js 20",
+ "description": "Node.js 20 development image.",
+ "categories": ["languages"],
+ "icon": "Node.js",
+ "featured": true
+ },
+ {
+ "id": "go-1",
+ "ref": "mcr.microsoft.com/devcontainers/go:1",
+ "name": "Go",
+ "description": "Go development image.",
+ "categories": ["languages"],
+ "icon": "Go"
+ },
+ {
+ "id": "rust-1",
+ "ref": "mcr.microsoft.com/devcontainers/rust:1",
+ "name": "Rust",
+ "description": "Rust development image.",
+ "categories": ["languages"],
+ "icon": "Rust"
+ },
+ {
+ "id": "java-21",
+ "ref": "mcr.microsoft.com/devcontainers/java:21",
+ "name": "Java",
+ "description": "Java development image.",
+ "categories": ["languages"],
+ "icon": "Java"
+ },
+ {
+ "id": "php-8",
+ "ref": "mcr.microsoft.com/devcontainers/php:8",
+ "name": "PHP",
+ "description": "PHP development image.",
+ "categories": ["languages"],
+ "icon": "PHP"
+ },
+ {
+ "id": "cpp-1",
+ "ref": "mcr.microsoft.com/devcontainers/cpp:1",
+ "name": "C++",
+ "description": "C++ development image.",
+ "categories": ["languages"],
+ "icon": "C++"
+ },
+ {
+ "id": "dotnet-8",
+ "ref": "mcr.microsoft.com/devcontainers/dotnet:8",
+ "name": ".NET",
+ "description": ".NET development image.",
+ "categories": ["languages"],
+ "icon": ".NET"
+ },
+ {
+ "id": "ruby-3",
+ "ref": "mcr.microsoft.com/devcontainers/ruby:3",
+ "name": "Ruby",
+ "description": "Ruby development image.",
+ "categories": ["languages"],
+ "icon": "Ruby"
+ }
+ ]
+}
diff --git a/sites/images-devsy-sh/src/components/CategoryFilter.svelte b/sites/images-devsy-sh/src/components/CategoryFilter.svelte
new file mode 100644
index 000000000..190160469
--- /dev/null
+++ b/sites/images-devsy-sh/src/components/CategoryFilter.svelte
@@ -0,0 +1,25 @@
+
+
+
+ {#each options as opt (opt.id)}
+
+ {/each}
+
diff --git a/sites/images-devsy-sh/src/components/ImageCard.svelte b/sites/images-devsy-sh/src/components/ImageCard.svelte
new file mode 100644
index 000000000..446466367
--- /dev/null
+++ b/sites/images-devsy-sh/src/components/ImageCard.svelte
@@ -0,0 +1,36 @@
+
+
+
+
+ {image.name}
+ {#if image.featured}
+ Featured
+ {/if}
+
+ {#if image.description}
+ {image.description}
+ {/if}
+ {image.ref}
+
+
diff --git a/sites/images-devsy-sh/src/components/ImageCard.test.ts b/sites/images-devsy-sh/src/components/ImageCard.test.ts
new file mode 100644
index 000000000..bb856bab4
--- /dev/null
+++ b/sites/images-devsy-sh/src/components/ImageCard.test.ts
@@ -0,0 +1,48 @@
+import { cleanup, fireEvent, render, screen } from "@testing-library/svelte"
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+import type { CatalogImage } from "../lib/catalog-schema"
+import ImageCard from "./ImageCard.svelte"
+
+const IMAGE: CatalogImage = {
+ id: "py",
+ ref: "mcr.microsoft.com/devcontainers/python:3.12",
+ name: "Python 3.12",
+ description: "Python image",
+ categories: ["languages"],
+}
+
+describe("ImageCard", () => {
+ beforeEach(() => {
+ Object.assign(navigator, {
+ clipboard: { writeText: vi.fn().mockResolvedValue(undefined) },
+ })
+ })
+
+ afterEach(() => {
+ cleanup()
+ })
+
+ it("renders name, description, and ref", () => {
+ render(ImageCard, { props: { image: IMAGE } })
+ expect(screen.getByText("Python 3.12")).toBeInTheDocument()
+ expect(screen.getByText("Python image")).toBeInTheDocument()
+ expect(screen.getByText(IMAGE.ref)).toBeInTheDocument()
+ })
+
+ it("copies the docker pull command when the copy button is clicked", async () => {
+ render(ImageCard, { props: { image: IMAGE } })
+ await fireEvent.click(screen.getByRole("button", { name: /copy/i }))
+ expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
+ `docker pull ${IMAGE.ref}`,
+ )
+ })
+
+ it("does not throw when clipboard write fails", async () => {
+ navigator.clipboard.writeText = vi
+ .fn()
+ .mockRejectedValue(new Error("denied"))
+ render(ImageCard, { props: { image: IMAGE } })
+ await fireEvent.click(screen.getByRole("button", { name: /copy/i }))
+ expect(screen.getByRole("button", { name: /copy/i })).toBeInTheDocument()
+ })
+})
diff --git a/sites/images-devsy-sh/src/components/ImageGrid.svelte b/sites/images-devsy-sh/src/components/ImageGrid.svelte
new file mode 100644
index 000000000..f835f9db7
--- /dev/null
+++ b/sites/images-devsy-sh/src/components/ImageGrid.svelte
@@ -0,0 +1,16 @@
+
+
+{#if images.length === 0}
+ No images match your search.
+{:else}
+
+ {#each images as image (image.id)}
+
+ {/each}
+
+{/if}
diff --git a/sites/images-devsy-sh/src/components/ImageGrid.test.ts b/sites/images-devsy-sh/src/components/ImageGrid.test.ts
new file mode 100644
index 000000000..bfcfbf58c
--- /dev/null
+++ b/sites/images-devsy-sh/src/components/ImageGrid.test.ts
@@ -0,0 +1,27 @@
+import { cleanup, render, screen } from "@testing-library/svelte"
+import { afterEach, describe, expect, it } from "vitest"
+import type { CatalogImage } from "../lib/catalog-schema"
+import ImageGrid from "./ImageGrid.svelte"
+
+const IMAGES: CatalogImage[] = [
+ {
+ id: "py",
+ ref: "mcr/python:3.12",
+ name: "Python 3.12",
+ categories: ["languages"],
+ },
+]
+
+afterEach(() => cleanup())
+
+describe("ImageGrid", () => {
+ it("renders a card per image", () => {
+ render(ImageGrid, { props: { images: IMAGES } })
+ expect(screen.getByText("Python 3.12")).toBeInTheDocument()
+ })
+
+ it("shows an empty state when there are no images", () => {
+ render(ImageGrid, { props: { images: [] } })
+ expect(screen.getByText(/no images match/i)).toBeInTheDocument()
+ })
+})
diff --git a/sites/images-devsy-sh/src/components/SearchBar.svelte b/sites/images-devsy-sh/src/components/SearchBar.svelte
new file mode 100644
index 000000000..aba454174
--- /dev/null
+++ b/sites/images-devsy-sh/src/components/SearchBar.svelte
@@ -0,0 +1,11 @@
+
+
+
diff --git a/sites/images-devsy-sh/src/lib/catalog-schema.test.ts b/sites/images-devsy-sh/src/lib/catalog-schema.test.ts
new file mode 100644
index 000000000..dea69f30f
--- /dev/null
+++ b/sites/images-devsy-sh/src/lib/catalog-schema.test.ts
@@ -0,0 +1,55 @@
+import { describe, expect, it } from "vitest"
+import { isImageCatalog } from "./catalog-schema"
+
+const VALID = {
+ version: 1,
+ categories: [{ id: "languages", label: "Languages" }],
+ images: [
+ { id: "py", ref: "img:1", name: "Python", categories: ["languages"] },
+ ],
+}
+
+describe("isImageCatalog", () => {
+ it("accepts a well-formed catalog", () => {
+ expect(isImageCatalog(VALID)).toBe(true)
+ })
+
+ it("rejects non-objects", () => {
+ expect(isImageCatalog(null)).toBe(false)
+ expect(isImageCatalog("x")).toBe(false)
+ })
+
+ it("rejects a category missing label", () => {
+ expect(isImageCatalog({ ...VALID, categories: [{ id: "x" }] })).toBe(false)
+ })
+
+ it("rejects an image missing required fields", () => {
+ expect(
+ isImageCatalog({ version: 1, categories: [], images: [{ id: "x" }] }),
+ ).toBe(false)
+ })
+
+ it("rejects an image whose categories are not all strings", () => {
+ const bad = {
+ ...VALID,
+ images: [{ id: "py", ref: "img:1", name: "Python", categories: [1] }],
+ }
+ expect(isImageCatalog(bad)).toBe(false)
+ })
+
+ it("rejects an image with a mistyped optional field", () => {
+ const bad = {
+ ...VALID,
+ images: [
+ {
+ id: "py",
+ ref: "img:1",
+ name: "Python",
+ categories: ["languages"],
+ featured: "yes",
+ },
+ ],
+ }
+ expect(isImageCatalog(bad)).toBe(false)
+ })
+})
diff --git a/sites/images-devsy-sh/src/lib/catalog-schema.ts b/sites/images-devsy-sh/src/lib/catalog-schema.ts
new file mode 100644
index 000000000..9d3d1f330
--- /dev/null
+++ b/sites/images-devsy-sh/src/lib/catalog-schema.ts
@@ -0,0 +1,53 @@
+export interface CatalogCategory {
+ id: string
+ label: string
+}
+
+export interface CatalogImage {
+ id: string
+ ref: string
+ name: string
+ description?: string
+ categories: string[]
+ icon?: string
+ featured?: boolean
+}
+
+export interface ImageCatalog {
+ version: number
+ categories: CatalogCategory[]
+ images: CatalogImage[]
+}
+
+function isCatalogCategory(value: unknown): value is CatalogCategory {
+ if (!value || typeof value !== "object") return false
+ const v = value as Partial
+ return typeof v.id === "string" && typeof v.label === "string"
+}
+
+function isCatalogImage(value: unknown): value is CatalogImage {
+ if (!value || typeof value !== "object") return false
+ const v = value as Partial
+ return (
+ typeof v.id === "string" &&
+ typeof v.ref === "string" &&
+ typeof v.name === "string" &&
+ (v.description === undefined || typeof v.description === "string") &&
+ (v.icon === undefined || typeof v.icon === "string") &&
+ (v.featured === undefined || typeof v.featured === "boolean") &&
+ Array.isArray(v.categories) &&
+ v.categories.every((c) => typeof c === "string")
+ )
+}
+
+export function isImageCatalog(value: unknown): value is ImageCatalog {
+ if (!value || typeof value !== "object") return false
+ const v = value as Partial
+ return (
+ typeof v.version === "number" &&
+ Array.isArray(v.categories) &&
+ v.categories.every(isCatalogCategory) &&
+ Array.isArray(v.images) &&
+ v.images.every(isCatalogImage)
+ )
+}
diff --git a/sites/images-devsy-sh/src/lib/filter.test.ts b/sites/images-devsy-sh/src/lib/filter.test.ts
new file mode 100644
index 000000000..7ac823ce5
--- /dev/null
+++ b/sites/images-devsy-sh/src/lib/filter.test.ts
@@ -0,0 +1,63 @@
+import { describe, expect, it } from "vitest"
+import type { CatalogImage } from "./catalog-schema"
+import { filterImages } from "./filter"
+
+const IMAGES: CatalogImage[] = [
+ {
+ id: "py",
+ ref: "mcr/python:3.12",
+ name: "Python 3.12",
+ description: "Python image",
+ categories: ["languages"],
+ },
+ {
+ id: "uni",
+ ref: "mcr/universal:2",
+ name: "Universal",
+ description: "Multi-language",
+ categories: ["universal"],
+ featured: true,
+ },
+ {
+ id: "go",
+ ref: "mcr/go:1",
+ name: "Go",
+ description: "Go image",
+ categories: ["languages"],
+ featured: true,
+ },
+]
+
+describe("filterImages", () => {
+ it("returns all images sorted featured-first when no query/category", () => {
+ const out = filterImages(IMAGES, "", "all")
+ expect(out.map((i) => i.id)).toEqual(["go", "uni", "py"])
+ })
+
+ it("filters by category", () => {
+ const out = filterImages(IMAGES, "", "universal")
+ expect(out.map((i) => i.id)).toEqual(["uni"])
+ })
+
+ it("matches query against name case-insensitively", () => {
+ expect(filterImages(IMAGES, "python", "all").map((i) => i.id)).toEqual([
+ "py",
+ ])
+ })
+
+ it("matches query against ref", () => {
+ expect(filterImages(IMAGES, "universal:2", "all").map((i) => i.id)).toEqual(
+ ["uni"],
+ )
+ })
+
+ it("matches query against description", () => {
+ expect(
+ filterImages(IMAGES, "multi-language", "all").map((i) => i.id),
+ ).toEqual(["uni"])
+ })
+
+ it("returns empty when nothing matches", () => {
+ expect(filterImages(IMAGES, "zzz", "all")).toEqual([])
+ })
+})
diff --git a/sites/images-devsy-sh/src/lib/filter.ts b/sites/images-devsy-sh/src/lib/filter.ts
new file mode 100644
index 000000000..dd84b825b
--- /dev/null
+++ b/sites/images-devsy-sh/src/lib/filter.ts
@@ -0,0 +1,23 @@
+import type { CatalogImage } from "./catalog-schema"
+
+export function filterImages(
+ images: CatalogImage[],
+ query: string,
+ category: string,
+): CatalogImage[] {
+ const q = query.trim().toLowerCase()
+ return images
+ .filter((img) => category === "all" || img.categories.includes(category))
+ .filter((img) => {
+ if (!q) return true
+ const haystack =
+ `${img.name} ${img.ref} ${img.description ?? ""}`.toLowerCase()
+ return haystack.includes(q)
+ })
+ .sort((a, b) => {
+ const fa = a.featured ? 0 : 1
+ const fb = b.featured ? 0 : 1
+ if (fa !== fb) return fa - fb
+ return a.name.localeCompare(b.name)
+ })
+}
diff --git a/sites/images-devsy-sh/src/main.ts b/sites/images-devsy-sh/src/main.ts
new file mode 100644
index 000000000..5abe3dc76
--- /dev/null
+++ b/sites/images-devsy-sh/src/main.ts
@@ -0,0 +1,8 @@
+import { mount } from "svelte"
+import App from "./App.svelte"
+import "./app.css"
+
+const target = document.getElementById("app")
+if (!target) throw new Error("missing #app mount node")
+
+export default mount(App, { target })
diff --git a/sites/images-devsy-sh/src/test-setup.ts b/sites/images-devsy-sh/src/test-setup.ts
new file mode 100644
index 000000000..b9e762299
--- /dev/null
+++ b/sites/images-devsy-sh/src/test-setup.ts
@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest"
diff --git a/sites/images-devsy-sh/svelte.config.js b/sites/images-devsy-sh/svelte.config.js
new file mode 100644
index 000000000..7d1d57c40
--- /dev/null
+++ b/sites/images-devsy-sh/svelte.config.js
@@ -0,0 +1,5 @@
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"
+
+export default {
+ preprocess: vitePreprocess(),
+}
diff --git a/sites/images-devsy-sh/tsconfig.json b/sites/images-devsy-sh/tsconfig.json
new file mode 100644
index 000000000..6cb683001
--- /dev/null
+++ b/sites/images-devsy-sh/tsconfig.json
@@ -0,0 +1,15 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "resolveJsonModule": true,
+ "esModuleInterop": true,
+ "strict": true,
+ "skipLibCheck": true,
+ "isolatedModules": true,
+ "verbatimModuleSyntax": true,
+ "types": ["svelte", "vite/client", "node"]
+ },
+ "include": ["src/**/*.ts", "src/**/*.svelte", "scripts/**/*.ts"]
+}
diff --git a/sites/images-devsy-sh/vite.config.ts b/sites/images-devsy-sh/vite.config.ts
new file mode 100644
index 000000000..ff35920e7
--- /dev/null
+++ b/sites/images-devsy-sh/vite.config.ts
@@ -0,0 +1,8 @@
+import { svelte } from "@sveltejs/vite-plugin-svelte"
+import tailwindcss from "@tailwindcss/vite"
+import { defineConfig } from "vite"
+
+export default defineConfig({
+ plugins: [tailwindcss(), svelte()],
+ build: { outDir: "dist" },
+})
diff --git a/sites/images-devsy-sh/vitest.config.ts b/sites/images-devsy-sh/vitest.config.ts
new file mode 100644
index 000000000..ef71fce2e
--- /dev/null
+++ b/sites/images-devsy-sh/vitest.config.ts
@@ -0,0 +1,12 @@
+import { svelte } from "@sveltejs/vite-plugin-svelte"
+import { defineConfig } from "vitest/config"
+
+export default defineConfig({
+ plugins: [svelte({ hot: false })],
+ resolve: { conditions: ["browser"] },
+ test: {
+ include: ["src/**/*.test.ts", "scripts/**/*.test.ts"],
+ environment: "jsdom",
+ setupFiles: ["src/test-setup.ts"],
+ },
+})