diff --git a/docs/architecture.md b/docs/architecture.md index 9867a32..804b607 100644 --- a/docs/architecture.md +++ b/docs/architecture.md @@ -7,7 +7,7 @@ The codebase has two distinct layers that should never blur: | Layer | Location | Who owns it | | ----------- | ------------------------------------------------- | ----------- | | **App** | `src/` — routes, components, data loading, styles | Developer | -| **Content** | `oddments/`, `oddments.config.js` | Site owner | +| **Content** | `oddments/`, `oddments.config.js` | Site owner | SvelteKit prebuilds every route at build time (fully static output to `build/`). There is no server at runtime. @@ -61,14 +61,14 @@ The `/submit/` route is a generic form UI. It POSTs to `config.submitUrl` — an - **Svelte 5 runes** everywhere: `$state`, `$derived`, `$effect`, `$props`, `$bindable`. No legacy Options API. - Filter state lives in `+page.svelte`. Components receive values and emit changes via `bind:` props; they own no global state. -- All internal links must include the `base` import from `$app/paths` and prefix hrefs: `` href=`${base}/exhibit/${slug}/` ``. -- Local cover image paths need the same `base` prefix since `paths.base` is set in `svelte.config.js`. +- All internal links must use `resolve` from `$app/paths`, for example `href={resolve('/exhibit/my-slug/')}`. +- Local static asset paths must use `asset` from `$app/paths`, since `paths.base` is set in `svelte.config.js`. - `FilterBar` and `TagCloud` accept a `show` prop; `+page.svelte` passes `data.config.showFilterBar` / `data.config.showTagCloud` directly — no `{#if}` wrappers at the call site. - `FilterBar` owns the sort select. Pass `bind:sort` from `+page.svelte`. ### Adding a component test -Tests live next to the component file (`src/lib/Foo.test.ts`). The vitest config aliases `$lib` and mocks `$app/paths` (`base = ''`) so components can be imported in jsdom without the SvelteKit runtime. +Tests live next to the component file (`src/lib/Foo.test.ts`). The vitest config aliases `$lib` and mocks `$app/paths` so components can be imported in jsdom without the SvelteKit runtime. ```ts import { render, screen } from '@testing-library/svelte' diff --git a/e2e/exhibit.test.ts b/e2e/exhibit.test.ts index 61c0c3f..db6a535 100644 --- a/e2e/exhibit.test.ts +++ b/e2e/exhibit.test.ts @@ -34,6 +34,15 @@ test.describe('exhibit detail page', () => { await expect(page.locator('article.card').first()).toBeVisible() }) + test('category chip links to the catalog category filter', async ({ page }) => { + await page.goto('/exhibit/black-hack/') + const categoryChip = page.getByRole('link', { name: 'RPG' }) + await expect(categoryChip).toBeVisible() + await categoryChip.click() + await expect(page).toHaveURL(/\?category=RPG/) + await expect(page.locator('article.card').first()).toBeVisible() + }) + test('renders cover image when cover-image is set', async ({ page }) => { await page.goto(firstExhibitUrl) const img = page.getByRole('img').first() diff --git a/src/lib/ExhibitCard.svelte b/src/lib/ExhibitCard.svelte index 7765bf1..a058558 100644 --- a/src/lib/ExhibitCard.svelte +++ b/src/lib/ExhibitCard.svelte @@ -1,6 +1,6 @@
{#if hasCover && orientation !== 'none'} @@ -44,7 +45,7 @@

- {exhibit.name}

diff --git a/src/lib/ExhibitCard.test.ts b/src/lib/ExhibitCard.test.ts index 4549ad0..467a86c 100644 --- a/src/lib/ExhibitCard.test.ts +++ b/src/lib/ExhibitCard.test.ts @@ -138,6 +138,6 @@ test("local cover-image gets base prefix", () => { exhibit: makeExhibit({ "cover-image": "/covers/game.webp", name: "Local Cover" }), }); const img = screen.getByRole("img", { name: "Local Cover" }); - // base is '' in test mock, so the src should be '/covers/game.webp' + // asset() returns the input path in the test mock. expect(img).toHaveAttribute("src", "/covers/game.webp"); }); diff --git a/src/lib/Footer.svelte b/src/lib/Footer.svelte index c51bb3f..d4ab203 100644 --- a/src/lib/Footer.svelte +++ b/src/lib/Footer.svelte @@ -1,5 +1,5 @@
@@ -31,7 +31,7 @@
{#if config.showSubmitForm} - + Submit {/if} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 88a994f..932da2e 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,6 +1,6 @@ - + {#if config.customCss} - + {/if} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 837c195..b9c54e8 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,6 +1,6 @@ @@ -90,12 +93,18 @@
{#if exhibit.author} - By {exhibit.author}{config.showCost && exhibit.cost ? ` · ${exhibit.cost}` : ''} + By {exhibit.author}{config.showCost && exhibit.cost ? ` · ${exhibit.cost}` : ''} {/if} - {#if exhibit.genre || exhibit.license} + {#if hasMetadataChips}
- {#if exhibit.genre}{exhibit.genre}{/if} + {#each exhibit.category as cat} + {cat} + {/each} + {#if exhibit.genre}{exhibit.genre}{/if} {#if exhibit.license}{exhibit.license}{/if} + {#each exhibit.tags as tag} + {tag} + {/each}
{/if}
@@ -137,14 +146,6 @@ {/if} - {#if exhibit.tags.length > 0} -
- {#each exhibit.tags as tag} - {tag} - {/each} -
- {/if} - {#if exhibit['source-url']}
- ← Back to catalog + ← Back to catalog
diff --git a/src/stories/molecules/ExhibitCard.stories.svelte b/src/stories/molecules/ExhibitCard.stories.svelte index d9e7657..18b897d 100644 --- a/src/stories/molecules/ExhibitCard.stories.svelte +++ b/src/stories/molecules/ExhibitCard.stories.svelte @@ -1,6 +1,5 @@ diff --git a/src/stories/pages/ExhibitDetail.stories.svelte b/src/stories/pages/ExhibitDetail.stories.svelte index 71220ce..5342576 100644 --- a/src/stories/pages/ExhibitDetail.stories.svelte +++ b/src/stories/pages/ExhibitDetail.stories.svelte @@ -1,6 +1,5 @@ diff --git a/src/test/mocks/app-paths.ts b/src/test/mocks/app-paths.ts index 43165e2..559869b 100644 --- a/src/test/mocks/app-paths.ts +++ b/src/test/mocks/app-paths.ts @@ -1,2 +1,9 @@ export const base = '' export const assets = '' +export function resolve(path: string) { + return path +} + +export function asset(file: string) { + return file +} diff --git a/tsconfig.test.json b/tsconfig.test.json index b4347c2..b524b86 100644 --- a/tsconfig.test.json +++ b/tsconfig.test.json @@ -4,5 +4,12 @@ "types": ["vitest/globals", "node"] }, "exclude": [], - "include": ["src/**/*.test.ts", "src/test/**/*.ts"] + "include": [ + ".svelte-kit/ambient.d.ts", + ".svelte-kit/non-ambient.d.ts", + ".svelte-kit/types/**/*.d.ts", + "src/**/*.svelte", + "src/**/*.test.ts", + "src/test/**/*.ts" + ] } diff --git a/vitest.config.ts b/vitest.config.ts index 73773a2..325fd63 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -36,9 +36,8 @@ export default defineConfig({ configDir: path.join(dirname, '.storybook') })], optimizeDeps: { - // The dep-scan of story files fails on `import type` TS syntax, so Vite falls back to - // lazy discovery. Pre-including these prevents the mid-collection optimizer restarts - // that break the storybook browser tests on CI cold starts. + // Pre-including Storybook/theme packages keeps browser-test startup + // stable and avoids mid-collection optimizer restarts on cold caches. include: [ '@storybook/addon-themes', '@skeletonlabs/skeleton-svelte', @@ -50,6 +49,9 @@ export default defineConfig({ browser: { enabled: true, headless: true, + api: { + host: '127.0.0.1', + }, provider: playwright({}), instances: [{ browser: 'chromium'