Nautilus/bitsforfree
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: optimize branded 404 artwork

Browse Source
This commit is contained in:
smileBeda
2026-08-31 12:07:38 -03:00
parent a3859f1efc
commit 5f20e5d2b7
9 changed files with 59 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/notFound.test.js
+29 -6
View File
@@ -1,6 +1,7 @@
import test from 'node:test';
import assert from 'node:assert/strict';
import fs from 'node:fs';
import sharp from 'sharp';
import { renderNotFound } from '../src/seo.js';
const template = fs.readFileSync(new URL('../public/404.html', import.meta.url), 'utf8');
@@ -10,7 +11,11 @@ const page = renderNotFound({
pathname: '/missing-node'
});
const styles = fs.readFileSync(new URL('../public/assets/styles.css', import.meta.url), 'utf8');
const artwork = fs.readFileSync(new URL('../public/assets/homo-reseticus-404.png', import.meta.url));
const artworkPaths = [
new URL('../public/assets/homo-reseticus-404-276.0fde8f3e.webp', import.meta.url),
new URL('../public/assets/homo-reseticus-404-552.f829379a.webp', import.meta.url),
new URL('../public/assets/homo-reseticus-404-828.68be2119.webp', import.meta.url)
];
test('404 page is noindexed and links visitors back to the live feed', () => {
assert.match(page, /<title>404 \| The Meme Protocol<\/title>/);
@@ -26,7 +31,8 @@ test('404 page carries adjusted site discovery and social metadata', () => {
assert.match(page, /<link rel="service-desc"[^>]+href="\/openapi\.json">/);
assert.match(page, /<link rel="help"[^>]+href="\/meme-api\.skill\.md">/);
assert.match(page, /<meta property="og:url" content="https:\/\/memes\.example\/missing-node">/);
assert.match(page, /<meta property="og:image" content="https:\/\/memes\.example\/assets\/homo-reseticus-404\.png">/);
assert.match(page, /<meta property="og:image" content="https:\/\/memes\.example\/assets\/homo-reseticus-404-828\.68be2119\.webp">/);
assert.match(page, /<meta property="og:image:type" content="image\/webp">/);
assert.match(page, /<meta name="twitter:card" content="summary_large_image">/);
assert.doesNotMatch(page, /<link rel="canonical"/);
});
@@ -38,13 +44,30 @@ test('404 page keeps the homepage protocol menu and replaces its live status', (
assert.match(page, /ERROR_404 \/\/ NODE_UNREACHABLE/);
});
test('404 page uses the supplied artwork with a diffused backdrop', () => {
assert.match(page, /src="\/assets\/homo-reseticus-404\.png"/);
test('404 page uses responsive artwork with a diffused green backdrop', () => {
assert.match(page, /src="\/assets\/homo-reseticus-404-552\.f829379a\.webp"/);
assert.match(page, /srcset="[^"]+276\.0fde8f3e\.webp 276w,[^"]+552\.f829379a\.webp 552w,[^"]+828\.68be2119\.webp 828w"/);
assert.match(page, /fetchpriority="high"/);
assert.match(page, /alt="Homo Reseticus surrounded by an unreachable node pattern"/);
assert.match(styles, /\.not-found-visual::before/);
assert.match(styles, /radial-gradient\(/);
assert.match(styles, /rgb\(0 255 65 \/ 48%\)/);
assert.match(styles, /filter: blur\(36px\)/);
assert.match(styles, /transform: scale\(1\.24\)/);
assert.match(styles, /width: clamp\(127px, 26vmin, 276px\)/);
assert.match(styles, /\.not-found-page \.pulse/);
assert.equal(artwork.subarray(1, 4).toString('ascii'), 'PNG');
});
test('404 artwork variants retain lossless WebP transparency', async () => {
const expectedSizes = [[276, 271], [552, 542], [828, 813]];
for (const [index, artworkPath] of artworkPaths.entries()) {
const artwork = fs.readFileSync(artworkPath);
const metadata = await sharp(artwork).metadata();
assert.equal(artwork.subarray(0, 4).toString('ascii'), 'RIFF');
assert.equal(artwork.subarray(8, 12).toString('ascii'), 'WEBP');
assert.equal(artwork.subarray(12, 16).toString('ascii'), 'VP8L');
assert.equal(metadata.format, 'webp');
assert.equal(metadata.hasAlpha, true);
assert.deepEqual([metadata.width, metadata.height], expectedSizes[index]);
}
});