feat(integration): add image variants section and standardize code snippets

web/src/lib/imageSnippets.ts

@@ -0,0 +1,91 @@
+import { t } from '@/i18n'
+import type { CodeSnippetTab } from '@/lib/codeSnippet'
+
+export const SAMPLE_IMAGE = 'north-wall.jpg'
+export const VARIANT_PLACEHOLDER = '<variant-name>'
+export const SETTINGS_VARIANTS_PATH = '/settings/media/variants'
+
+const SAMPLE_WIDTHS = [400, 800, 1200]
+
+export interface ImageResponseRow {
+	request: string
+	status: string
+	response: string
+	body: string
+}
+
+export function variantUrl(origin: string, name: string) {
+	return `${origin}/media/${SAMPLE_IMAGE}?v=${name}`
+}
+
+export function unknownVariantBody(name: string) {
+	return `{ "status": 400, "error": "unknown_variant", "message": "Unknown variant", "detail": "${name}" }`
+}
+
+function unsupportedParameterBody(name: string) {
+	return `{ "status": 400, "error": "unsupported_parameter", "message": "Unsupported parameter", "detail": "${name}" }`
+}
+
+export function imageSnippets(origin: string, names: readonly string[]): CodeSnippetTab[] {
+	const first = names[0] ?? VARIANT_PLACEHOLDER
+	const second = names[1] ?? first
+	const third = names[2] ?? first
+	const url = (name: string) => variantUrl(origin, name)
+	const srcset = [first, second, third]
+		.map((name, index) => `${url(name)} ${SAMPLE_WIDTHS[index]}w`)
+		.join(',\n          ')
+	return [
+		{ k: 'curl', label: 'curl', code: `curl -O "${url(first)}"` },
+		{
+			k: 'html',
+			label: 'HTML',
+			code: `<img\n  src="${url(second)}"\n  srcset="${srcset}"\n  sizes="(min-width: 800px) 800px, 100vw"\n  alt="North wall">`,
+		},
+		{
+			k: 'js',
+			label: 'JavaScript',
+			code: `const res = await fetch("${url(first)}")\nif (!res.ok) throw new Error(await res.text())\nconst blob = await res.blob()`,
+		},
+	]
+}
+
+export function imageResponseRows(): ImageResponseRow[] {
+	return [
+		{
+			request: '/media/photo.png?v=thumb',
+			status: '200',
+			response: t('The variant image. Generated on first request.'),
+			body: '',
+		},
+		{
+			request: '/media/photo.png?v=unknown',
+			status: '400',
+			response: t('Unknown variant'),
+			body: unknownVariantBody('unknown'),
+		},
+		{
+			request: '/media/photo.png?width=400',
+			status: '400',
+			response: t('Unsupported parameter'),
+			body: unsupportedParameterBody('width'),
+		},
+		{
+			request: '/media/missing.png?v=thumb',
+			status: '404',
+			response: t('Not found'),
+			body: '404 page not found',
+		},
+		{
+			request: '/media/huge.png?v=thumb',
+			status: '413',
+			response: t('Source image too large'),
+			body: 'The source image is too large to generate this variant.',
+		},
+		{
+			request: '/media/photo.png?v=thumb',
+			status: '500',
+			response: t('Unable to read the file'),
+			body: 'Unable to read the file',
+		},
+	]
+}