92 lines
2.6 KiB
TypeScript
92 lines
2.6 KiB
TypeScript
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',
|
|
},
|
|
]
|
|
}
|