{t('blog.error')}
@@ -220,14 +245,14 @@ export default function BlogIndexPage() { )} {/* No results for active filters */} - {!loading && !error && posts.length > 0 && visiblePosts.length === 0 && ( + {!loading && posts.length > 0 && visiblePosts.length === 0 && (No articles match the selected filters.
{visiblePosts.map(post => {
const desc = localise(post.description)
@@ -242,9 +267,13 @@ export default function BlogIndexPage() {
{post.coverUrl ? (
) : (
{/* Gradient overlay for readability */}
diff --git a/src/utils/__tests__/unsplash.test.js b/src/utils/__tests__/unsplash.test.js
new file mode 100644
index 00000000..03bf73bc
--- /dev/null
+++ b/src/utils/__tests__/unsplash.test.js
@@ -0,0 +1,47 @@
+import { describe, it, expect } from 'vitest'
+import { normalizeUnsplashUrl } from '../unsplash'
+
+describe('normalizeUnsplashUrl', () => {
+ it('returns null for null / undefined input', () => {
+ expect(normalizeUnsplashUrl(null)).toBeNull()
+ expect(normalizeUnsplashUrl(undefined)).toBeNull()
+ expect(normalizeUnsplashUrl('')).toBeNull()
+ })
+
+ it('passes through non-Unsplash URLs unchanged', () => {
+ const url = 'https://example.com/image.jpg'
+ expect(normalizeUnsplashUrl(url)).toBe(url)
+ })
+
+ it('fixes malformed double-? URLs from the database', () => {
+ const malformed =
+ 'https://images.unsplash.com/photo-abc?ixid=M3w5NDcwMjR8MHwxfHNlYXJjaHwxfA&ixlib=rb-4.1.0?w=1200&auto=format&fit=crop&q=80'
+ const result = normalizeUnsplashUrl(malformed, { w: 760 })
+ // Must have exactly one `?`
+ expect(result.split('?').length).toBe(2)
+ // Must contain correct width
+ expect(result).toContain('w=760')
+ // Must not contain the broken second ?
+ expect(result).not.toMatch(/ixlib=[^&]+\?/)
+ // ixid param must be preserved
+ expect(result).toContain('ixid=')
+ expect(result).toContain('auto=format')
+ expect(result).toContain('fit=crop')
+ })
+
+ it('applies sizing to well-formed single-? URLs', () => {
+ const url = 'https://images.unsplash.com/photo-xyz?w=1200&auto=format&fit=crop&q=80'
+ const result = normalizeUnsplashUrl(url, { w: 400, q: 70 })
+ expect(result.split('?').length).toBe(2)
+ expect(result).toContain('w=400')
+ expect(result).toContain('q=70')
+ expect(result).toContain('auto=format')
+ })
+
+ it('uses default w=760 q=80 when no options provided', () => {
+ const url = 'https://images.unsplash.com/photo-def?ixid=abc&ixlib=rb-4.1.0?w=1200&q=75'
+ const result = normalizeUnsplashUrl(url)
+ expect(result).toContain('w=760')
+ expect(result).toContain('q=80')
+ })
+})
diff --git a/src/utils/unsplash.js b/src/utils/unsplash.js
new file mode 100644
index 00000000..76dfd2fd
--- /dev/null
+++ b/src/utils/unsplash.js
@@ -0,0 +1,55 @@
+/**
+ * unsplash.js — Unsplash URL normalisation utility.
+ *
+ * Problem: 91 of 104 blog cover URLs in the database have a malformed
+ * double-? query string produced by string concatenation in the backend:
+ *
+ * …photo-abc?ixid=…&ixlib=rb-4.1.0?w=1200&auto=format&fit=crop&q=80
+ * ^^^^ second ? — should be &
+ *
+ * Because the second `?w=…` is not a valid query parameter, Unsplash CDN
+ * ignores it and serves the original full-resolution image (3840px+),
+ * causing 700 KiB+ LCP payloads on blog pages.
+ *
+ * normalizeUnsplashUrl() strips the broken suffix, rebuilds clean params,
+ * and applies caller-specified sizing overrides.
+ */
+
+/**
+ * Normalise an Unsplash image URL and apply sizing parameters.
+ *
+ * @param {string|null|undefined} url Raw coverUrl value from the API.
+ * @param {{ w?: number, q?: number }} [opts]
+ * w — desired pixel width (default 760)
+ * q — JPEG quality 1-100 (default 80)
+ * @returns {string|null} Clean URL, or null if input is falsy or non-Unsplash.
+ *
+ * @example
+ * normalizeUnsplashUrl('https://images.unsplash.com/photo-abc?ixid=X&ixlib=rb-4.1.0?w=1200&auto=format&fit=crop&q=80', { w: 760 })
+ * // → 'https://images.unsplash.com/photo-abc?ixid=X&ixlib=rb-4.1.0&w=760&auto=format&fit=crop&q=80'
+ */
+export function normalizeUnsplashUrl(url, { w = 760, q = 80 } = {}) {
+ if (!url || typeof url !== 'string') return null
+ if (!url.includes('images.unsplash.com')) return url
+
+ // Split at the FIRST `?` to isolate the base URL
+ const firstQ = url.indexOf('?')
+ const base = firstQ === -1 ? url : url.slice(0, firstQ)
+ const rawParams = firstQ === -1 ? '' : url.slice(firstQ + 1)
+
+ // The malformed URLs look like:
+ // ixid=X&ixlib=rb-4.1.0?w=1200&auto=format&fit=crop&q=80
+ // Strip everything from the second `?` onward (the broken suffix).
+ const cleanParams = rawParams.split('?')[0]
+
+ // Parse what's left into a URLSearchParams so we can override safely
+ const sp = new URLSearchParams(cleanParams)
+
+ // Apply/override sizing params
+ sp.set('w', String(w))
+ sp.set('auto', 'format')
+ sp.set('fit', 'crop')
+ sp.set('q', String(q))
+
+ return `${base}?${sp.toString()}`
+}