stan/website
1
0
Fork 0
Code Issues 13 Pull Requests Actions 1 Packages Projects Releases Wiki Activity

spotters: fix random 404 on client navigation (random is a page load, not an endpoint shadowed by [slug]); square logo tiles everywhere
Some checks failed
Deploy production / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Stan Runge
2026-10-25 13:07:26 +00:00
parent 45943543c2
commit cc34f5751b
19 changed files with 69 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/lib/cars/BrandBadge.svelte
View File

@@ -22,11 +22,14 @@
{/if}
<style>
/* Every logo sits in a fixed square tile (object-fit: contain, centred, padded, neutral
background), so wide wordmarks and tall crests line up in grids and lists. */
.badge,
.tile {
display: inline-grid;
place-items: center;
flex-shrink: 0;
aspect-ratio: 1;
}
.badge {
border-radius: 999px;
@@ -43,26 +46,31 @@
0 2px 8px hsl(var(--hue) 60% 20% / 0.4);
}
.tile {
overflow: hidden;
border-radius: 0.55rem;
background: #fff;
padding: 0.2rem;
background: #f6f6f4;
padding: 12%;
box-shadow:
0 0 0 1px rgb(0 0 0 / 0.08),
0 2px 8px rgb(0 0 0 / 0.35);
}
.tile img {
display: block;
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
object-fit: contain;
object-position: center;
}
.sm {
width: 1.9rem;
height: 1.9rem;
width: 2.1rem;
height: 2.1rem;
font-size: 0.7rem;
}
.tile.sm {
width: 2.6rem;
padding: 0.18rem 0.25rem;
padding: 0.2rem;
border-radius: 0.45rem;
}
.md {
width: 2.6rem;
@@ -76,19 +84,18 @@
}
.tile.lg {
border-radius: 1rem;
padding: 0.5rem;
}
/* xl fills the parent's height and stays square inside it. */
.xl {
width: 100%;
height: 100%;
max-width: 100%;
font-size: 1.6rem;
}
.badge.xl {
width: 3.6rem;
height: 3.6rem;
width: 3.6rem;
}
.tile.xl {
border-radius: 0.6rem;
padding: 0.6rem 0.8rem;
border-radius: 0.7rem;
}
</style>

4
src/lib/cars/BrandTile.svelte
View File

@@ -44,10 +44,10 @@
display: grid;
place-items: center;
width: 100%;
aspect-ratio: 16 / 9;
aspect-ratio: 4 / 3;
}
.compact .mark {
aspect-ratio: 2 / 1;
aspect-ratio: 3 / 2;
}
.name {
max-width: 100%;

4
src/lib/planes/MakerTile.svelte
View File

@@ -44,10 +44,10 @@
display: grid;
place-items: center;
width: 100%;
aspect-ratio: 16 / 9;
aspect-ratio: 4 / 3;
}
.compact .mark {
aspect-ratio: 2 / 1;
aspect-ratio: 3 / 2;
}
.name {
max-width: 100%;

4
src/lib/trains/MakerTile.svelte
View File

@@ -48,10 +48,10 @@
display: grid;
place-items: center;
width: 100%;
aspect-ratio: 16 / 9;
aspect-ratio: 4 / 3;
}
.compact .mark {
aspect-ratio: 2 / 1;
aspect-ratio: 3 / 2;
}
.name {
max-width: 100%;

24
src/routes/trackers/cars/[brand]/+page.svelte
View File

@@ -45,20 +45,7 @@
</figure>
{/if}
<header class="mt-6 mb-8 flex items-center gap-5">
{#if b.logo}
<img
class="logo"
src={b.logo}
alt="{b.name} logo"
title="Logo: {b.logoAuthor ?? 'Wikimedia Commons'}{b.logoLicense
? ` (${b.logoLicense})`
: ''}"
width="72"
height="72"
/>
{:else}
<BrandBadge name={b.name} size="lg" />
{/if}
<BrandBadge name={b.name} logo={b.logo} size="lg" />
<div>
<h1 class="text-4xl font-semibold tracking-tight sm:text-5xl">{b.name}</h1>
<p class="mt-2 text-[var(--site-muted)]">
@@ -130,15 +117,6 @@
.hero figcaption a {
text-decoration: underline;
}
.logo {
width: 4.5rem;
height: 4.5rem;
object-fit: contain;
padding: 0.5rem;
border-radius: 1rem;
background: #fff;
border: 1px solid var(--site-border);
}
.grid {
display: grid;
gap: 0.75rem;

11
src/routes/trackers/cars/random/+page.server.ts Normal file
View File

@@ -0,0 +1,11 @@
import { redirect } from '@sveltejs/kit';
import { randomCar } from '#lib/server/cars.js';
import type { PageServerLoad } from './$types';
// A page load (not a +server.ts endpoint): the client router only knows page routes, so an
// endpoint here made client-side navigation fall through to the [brand] page and 404.
export const load: PageServerLoad = async ({ setHeaders }) => {
const car = await randomCar();
setHeaders({ 'cache-control': 'no-store' });
redirect(303, car ? `/trackers/cars/${car.brandSlug}/${car.slug}` : '/trackers/cars');
};

1
src/routes/trackers/cars/random/+page.svelte Normal file
View File

@@ -0,0 +1 @@
<!-- Never rendered: the load always redirects to a random entry. -->

9
src/routes/trackers/cars/random/+server.ts
View File

@@ -1,9 +0,0 @@
import { redirect } from '@sveltejs/kit';
import { randomCar } from '#lib/server/cars.js';
import type { RequestHandler } from './$types';
export const GET: RequestHandler = async ({ setHeaders }) => {
const car = await randomCar();
setHeaders({ 'cache-control': 'no-store' });
redirect(303, car ? `/trackers/cars/${car.brandSlug}/${car.slug}` : '/trackers/cars');
};

24
src/routes/trackers/planes/[maker]/+page.svelte
View File

@@ -45,20 +45,7 @@
</figure>
{/if}
<header class="mt-6 mb-8 flex items-center gap-5">
{#if b.logo}
<img
class="logo"
src={b.logo}
alt="{b.name} logo"
title="Logo: {b.logoAuthor ?? 'Wikimedia Commons'}{b.logoLicense
? ` (${b.logoLicense})`
: ''}"
width="72"
height="72"
/>
{:else}
<BrandBadge name={b.name} size="lg" />
{/if}
<BrandBadge name={b.name} logo={b.logo} size="lg" />
<div>
<h1 class="text-4xl font-semibold tracking-tight sm:text-5xl">{b.name}</h1>
{#if b.fullName && b.fullName !== b.name}<p class="mt-1 text-sm text-[var(--site-muted)]">
@@ -134,15 +121,6 @@
.hero figcaption a {
text-decoration: underline;
}
.logo {
width: 4.5rem;
height: 4.5rem;
object-fit: contain;
padding: 0.5rem;
border-radius: 1rem;
background: #fff;
border: 1px solid var(--site-border);
}
.grid {
display: grid;
gap: 0.75rem;

11
src/routes/trackers/planes/random/+page.server.ts Normal file
View File

@@ -0,0 +1,11 @@
import { redirect } from '@sveltejs/kit';
import { randomPlane } from '#lib/server/planes.js';
import type { PageServerLoad } from './$types';
// A page load (not a +server.ts endpoint): the client router only knows page routes, so an
// endpoint here made client-side navigation fall through to the [maker] page and 404.
export const load: PageServerLoad = async ({ setHeaders }) => {
const plane = await randomPlane();
setHeaders({ 'cache-control': 'no-store' });
redirect(303, plane ? `/trackers/planes/${plane.makerSlug}/${plane.slug}` : '/trackers/planes');
};

1
src/routes/trackers/planes/random/+page.svelte Normal file
View File

@@ -0,0 +1 @@
<!-- Never rendered: the load always redirects to a random entry. -->

9
src/routes/trackers/planes/random/+server.ts
View File

@@ -1,9 +0,0 @@
import { redirect } from '@sveltejs/kit';
import { randomPlane } from '#lib/server/planes.js';
import type { RequestHandler } from './$types';
export const GET: RequestHandler = async ({ setHeaders }) => {
const plane = await randomPlane();
setHeaders({ 'cache-control': 'no-store' });
redirect(303, plane ? `/trackers/planes/${plane.makerSlug}/${plane.slug}` : '/trackers/planes');
};

24
src/routes/trackers/trains/[maker]/+page.svelte
View File

@@ -45,20 +45,7 @@
</figure>
{/if}
<header class="mt-6 mb-8 flex items-center gap-5">
{#if b.logo}
<img
class="logo"
src={b.logo}
alt="{b.name} logo"
title="Logo: {b.logoAuthor ?? 'Wikimedia Commons'}{b.logoLicense
? ` (${b.logoLicense})`
: ''}"
width="72"
height="72"
/>
{:else}
<BrandBadge name={b.name} size="lg" />
{/if}
<BrandBadge name={b.name} logo={b.logo} size="lg" />
<div>
<h1 class="text-4xl font-semibold tracking-tight sm:text-5xl">{b.name}</h1>
{#if b.fullName && b.fullName !== b.name}<p class="mt-1 text-sm text-[var(--site-muted)]">
@@ -134,15 +121,6 @@
.hero figcaption a {
text-decoration: underline;
}
.logo {
width: 4.5rem;
height: 4.5rem;
object-fit: contain;
padding: 0.5rem;
border-radius: 1rem;
background: #fff;
border: 1px solid var(--site-border);
}
.grid {
display: grid;
gap: 0.75rem;

24
src/routes/trackers/trains/operators/[operator]/+page.svelte
View File

@@ -44,20 +44,7 @@
</figure>
{/if}
<header class="mt-6 mb-8 flex items-center gap-5">
{#if b.logo}
<img
class="logo"
src={b.logo}
alt="{b.name} logo"
title="Logo: {b.logoAuthor ?? 'Wikimedia Commons'}{b.logoLicense
? ` (${b.logoLicense})`
: ''}"
width="72"
height="72"
/>
{:else}
<BrandBadge name={b.name} size="lg" />
{/if}
<BrandBadge name={b.name} logo={b.logo} size="lg" />
<div>
<h1 class="text-4xl font-semibold tracking-tight sm:text-5xl">{b.name}</h1>
{#if b.fullName && b.fullName !== b.name}<p class="mt-1 text-sm text-[var(--site-muted)]">
@@ -131,15 +118,6 @@
.hero figcaption a {
text-decoration: underline;
}
.logo {
width: 4.5rem;
height: 4.5rem;
object-fit: contain;
padding: 0.5rem;
border-radius: 1rem;
background: #fff;
border: 1px solid var(--site-border);
}
.grid {
display: grid;
gap: 0.75rem;

11
src/routes/trackers/trains/random/+page.server.ts Normal file
View File

@@ -0,0 +1,11 @@
import { redirect } from '@sveltejs/kit';
import { randomTrain } from '#lib/server/trains.js';
import type { PageServerLoad } from './$types';
// A page load (not a +server.ts endpoint): the client router only knows page routes, so an
// endpoint here made client-side navigation fall through to the [maker] page and 404.
export const load: PageServerLoad = async ({ setHeaders }) => {
const train = await randomTrain();
setHeaders({ 'cache-control': 'no-store' });
redirect(303, train ? `/trackers/trains/${train.makerSlug}/${train.slug}` : '/trackers/trains');
};

1
src/routes/trackers/trains/random/+page.svelte Normal file
View File

@@ -0,0 +1 @@
<!-- Never rendered: the load always redirects to a random entry. -->

9
src/routes/trackers/trains/random/+server.ts
View File

@@ -1,9 +0,0 @@
import { redirect } from '@sveltejs/kit';
import { randomTrain } from '#lib/server/trains.js';
import type { RequestHandler } from './$types';
export const GET: RequestHandler = async ({ setHeaders }) => {
const train = await randomTrain();
setHeaders({ 'cache-control': 'no-store' });
redirect(303, train ? `/trackers/trains/${train.makerSlug}/${train.slug}` : '/trackers/trains');
};

6
src/routes/trackers/wildlife/random/+server.ts → src/routes/trackers/wildlife/random/+page.server.ts
View File

@@ -1,8 +1,10 @@
import { redirect } from '@sveltejs/kit';
import { randomSpecies } from '#lib/server/wildlife.js';
import type { RequestHandler } from './$types';
import type { PageServerLoad } from './$types';
export const GET: RequestHandler = async ({ setHeaders, url }) => {
// A page load (not a +server.ts endpoint): the client router only knows page routes, so an
// endpoint here made client-side navigation fall through to the [group] page and 404.
export const load: PageServerLoad = async ({ setHeaders, url }) => {
const group = (url.searchParams.get('group') ?? '').replace(/[^a-z0-9-]/g, '') || undefined;
const s = await randomSpecies(group);
setHeaders({ 'cache-control': 'no-store' });

1
src/routes/trackers/wildlife/random/+page.svelte Normal file
View File

@@ -0,0 +1 @@
<!-- Never rendered: the load always redirects to a random entry. -->