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
public/404.html
+18 -6
View File
@@ -17,9 +17,9 @@
<meta property="og:description" content="__SEO_DESCRIPTION__"> <meta property="og:description" content="__SEO_DESCRIPTION__">
<meta property="og:url" content="__SEO_URL__"> <meta property="og:url" content="__SEO_URL__">
<meta property="og:image" content="__SEO_IMAGE__"> <meta property="og:image" content="__SEO_IMAGE__">
<meta property="og:image:type" content="image/png"> <meta property="og:image:type" content="image/webp">
<meta property="og:image:width" content="1266"> <meta property="og:image:width" content="828">
<meta property="og:image:height" content="1242"> <meta property="og:image:height" content="813">
<meta property="og:image:alt" content="__SEO_IMAGE_ALT__"> <meta property="og:image:alt" content="__SEO_IMAGE_ALT__">
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="__SEO_TITLE__"> <meta name="twitter:title" content="__SEO_TITLE__">
@@ -31,6 +31,15 @@
<link rel="shortcut icon" href="/favicon.ico?v=20260814"> <link rel="shortcut icon" href="/favicon.ico?v=20260814">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png?v=20260814"> <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png?v=20260814">
<meta name="apple-mobile-web-app-title" content="Meme Protocol"> <meta name="apple-mobile-web-app-title" content="Meme Protocol">
<link
rel="preload"
as="image"
type="image/webp"
href="/assets/homo-reseticus-404-552.f829379a.webp"
imagesrcset="/assets/homo-reseticus-404-276.0fde8f3e.webp 276w, /assets/homo-reseticus-404-552.f829379a.webp 552w, /assets/homo-reseticus-404-828.68be2119.webp 828w"
imagesizes="(max-width: 488px) 127px, (max-width: 1062px) 26vmin, 276px"
fetchpriority="high"
>
<link rel="stylesheet" href="/assets/styles.css"> <link rel="stylesheet" href="/assets/styles.css">
</head> </head>
<body class="not-found-page"> <body class="not-found-page">
@@ -51,9 +60,12 @@
<section class="not-found-content" aria-label="Page not found"> <section class="not-found-content" aria-label="Page not found">
<div class="not-found-visual"> <div class="not-found-visual">
<img <img
src="/assets/homo-reseticus-404.png" src="/assets/homo-reseticus-404-552.f829379a.webp"
width="1266" srcset="/assets/homo-reseticus-404-276.0fde8f3e.webp 276w, /assets/homo-reseticus-404-552.f829379a.webp 552w, /assets/homo-reseticus-404-828.68be2119.webp 828w"
height="1242" sizes="(max-width: 488px) 127px, (max-width: 1062px) 26vmin, 276px"
width="552"
height="542"
fetchpriority="high"
alt="Homo Reseticus surrounded by an unreachable node pattern" alt="Homo Reseticus surrounded by an unreachable node pattern"
> >
</div> </div>
public/assets/homo-reseticus-404-276.0fde8f3e.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

public/assets/homo-reseticus-404-552.f829379a.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 106 KiB

public/assets/homo-reseticus-404-828.68be2119.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 204 KiB

public/assets/homo-reseticus-404.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 653 KiB

public/assets/styles.css
+6 -6
View File
@@ -957,7 +957,7 @@ dialog::backdrop {
.not-found-visual { .not-found-visual {
position: relative; position: relative;
isolation: isolate; isolation: isolate;
width: clamp(190px, 39vmin, 414px); width: clamp(127px, 26vmin, 276px);
max-width: 100%; max-width: 100%;
} }
@@ -974,14 +974,14 @@ dialog::backdrop {
background: background:
radial-gradient( radial-gradient(
ellipse at 50% 47%, ellipse at 50% 47%,
rgb(255 255 255 / 58%) 0%, rgb(0 255 65 / 48%) 0%,
rgb(244 248 244 / 36%) 36%, rgb(0 230 57 / 30%) 36%,
rgb(211 224 213 / 16%) 58%, rgb(0 128 33 / 14%) 58%,
transparent 76% transparent 76%
), ),
radial-gradient( radial-gradient(
ellipse at 50% 48%, ellipse at 50% 48%,
rgb(192 216 198 / 12%) 0%, rgb(0 255 65 / 14%) 0%,
transparent 72% transparent 72%
); );
content: ""; content: "";
@@ -993,7 +993,7 @@ dialog::backdrop {
display: block; display: block;
width: 100%; width: 100%;
height: auto; height: auto;
filter: contrast(1.06) drop-shadow(0 0 18px rgb(229 226 225 / 14%)); filter: contrast(1.06) drop-shadow(0 0 16px rgb(0 255 65 / 16%));
} }
.not-found-action { .not-found-action {
server.js
+5
View File
@@ -24,6 +24,9 @@ const REQUEST_MAX_BYTES = 6 * 1024 * 1024;
const API_READ_LIMIT_PER_MINUTE = 120; const API_READ_LIMIT_PER_MINUTE = 120;
const MEDIA_READ_LIMIT_PER_MINUTE = 600; const MEDIA_READ_LIMIT_PER_MINUTE = 600;
const SSE_HEARTBEAT_MS = 25_000; const SSE_HEARTBEAT_MS = 25_000;
const IMMUTABLE_CACHE_CONTROL = 'public, max-age=31536000, immutable';
const REVALIDATING_CACHE_CONTROL = 'public, max-age=300, must-revalidate';
const FINGERPRINTED_ASSET = /\.[a-f0-9]{8,}\.[a-z0-9]+$/i;
const events = new Set(); const events = new Set();
const DISCOVERY_ROUTES = new Set([ const DISCOVERY_ROUTES = new Set([
'/openapi.json', '/openapi.json',
@@ -152,6 +155,8 @@ const server = http.createServer(async (req, res) => {
} }
if (req.method === 'GET' && url.pathname.startsWith('/assets/')) { if (req.method === 'GET' && url.pathname.startsWith('/assets/')) {
const isVersioned = url.searchParams.has('v') || FINGERPRINTED_ASSET.test(url.pathname);
res.setHeader('Cache-Control', isVersioned ? IMMUTABLE_CACHE_CONTROL : REVALIDATING_CACHE_CONTROL);
return sendFile(res, `./public${url.pathname}`); return sendFile(res, `./public${url.pathname}`);
} }
src/seo.js
+1 -1
View File
@@ -2,7 +2,7 @@ const SITE_NAME = 'The Meme Protocol';
const SITE_DESCRIPTION = 'A live, moderated meme stream for The Meme Protocol: WebP memes, MEME_CONSENSUS_SCORE ranking, and community review.'; const SITE_DESCRIPTION = 'A live, moderated meme stream for The Meme Protocol: WebP memes, MEME_CONSENSUS_SCORE ranking, and community review.';
const REPO_URL = 'https://git.yoonect.com/Nautilus/bitsforfree'; const REPO_URL = 'https://git.yoonect.com/Nautilus/bitsforfree';
const SOCIAL_IMAGE_PATH = '/assets/social-preview-v1.png'; const SOCIAL_IMAGE_PATH = '/assets/social-preview-v1.png';
const NOT_FOUND_IMAGE_PATH = '/assets/homo-reseticus-404.png'; const NOT_FOUND_IMAGE_PATH = '/assets/homo-reseticus-404-828.68be2119.webp';
const FAVICON_PATH = '/assets/favicon'; const FAVICON_PATH = '/assets/favicon';
const FAVICON_VERSION = '20260814'; const FAVICON_VERSION = '20260814';
tests/notFound.test.js
+29 -6
View File
@@ -1,6 +1,7 @@
import test from 'node:test'; import test from 'node:test';
import assert from 'node:assert/strict'; import assert from 'node:assert/strict';
import fs from 'node:fs'; import fs from 'node:fs';
import sharp from 'sharp';
import { renderNotFound } from '../src/seo.js'; import { renderNotFound } from '../src/seo.js';
const template = fs.readFileSync(new URL('../public/404.html', import.meta.url), 'utf8'); const template = fs.readFileSync(new URL('../public/404.html', import.meta.url), 'utf8');
@@ -10,7 +11,11 @@ const page = renderNotFound({
pathname: '/missing-node' pathname: '/missing-node'
}); });
const styles = fs.readFileSync(new URL('../public/assets/styles.css', import.meta.url), 'utf8'); 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', () => { test('404 page is noindexed and links visitors back to the live feed', () => {
assert.match(page, /<title>404 \| The Meme Protocol<\/title>/); 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="service-desc"[^>]+href="\/openapi\.json">/);
assert.match(page, /<link rel="help"[^>]+href="\/meme-api\.skill\.md">/); 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: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.match(page, /<meta name="twitter:card" content="summary_large_image">/);
assert.doesNotMatch(page, /<link rel="canonical"/); 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/); assert.match(page, /ERROR_404 \/\/ NODE_UNREACHABLE/);
}); });
test('404 page uses the supplied artwork with a diffused backdrop', () => { test('404 page uses responsive artwork with a diffused green backdrop', () => {
assert.match(page, /src="\/assets\/homo-reseticus-404\.png"/); 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(page, /alt="Homo Reseticus surrounded by an unreachable node pattern"/);
assert.match(styles, /\.not-found-visual::before/); 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, /filter: blur\(36px\)/);
assert.match(styles, /transform: scale\(1\.24\)/); assert.match(styles, /transform: scale\(1\.24\)/);
assert.match(styles, /width: clamp\(127px, 26vmin, 276px\)/);
assert.match(styles, /\.not-found-page \.pulse/); 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]);
}
}); });