feat(footer): use @profullstack/footer

package.json

@@ -13,6 +13,7 @@
     "check": "bun scripts/sync-commands.mjs --check"
   },
   "dependencies": {
+    "@profullstack/footer": "latest",
     "express": "5.1.0"
   },
   "packageManager": "bun@1.4.0"

src/server.mjs

@@ -1,4 +1,6 @@
 import express from 'express';
+import { randomBytes } from 'node:crypto';
+import { footerHtml } from '@profullstack/footer';
 import { readFileSync } from 'node:fs';
 import { resolve, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
@@ -31,12 +33,14 @@ export function createApp() {
   app.set('etag', 'strong');
 
   app.use((_req, res, next) => {
+    // Per-response nonce for the one inline <style> the shared footer carries.
+    res.locals.nonce = randomBytes(16).toString('base64');
     res.set({
       'X-Content-Type-Options': 'nosniff',
       'Referrer-Policy': 'strict-origin-when-cross-origin',
       'Strict-Transport-Security': 'max-age=31536000; includeSubDomains',
       'Content-Security-Policy':
-        "default-src 'self'; script-src 'self' https://crawlproof.com; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self' https://crawlproof.com; object-src 'none'; base-uri 'none'; frame-ancestors 'none'; form-action 'self'",
+        `default-src 'self'; script-src 'self' https://crawlproof.com; style-src 'self' 'nonce-${res.locals.nonce}'; img-src 'self' data:; font-src 'self'; connect-src 'self' https://crawlproof.com; object-src 'none'; base-uri 'none'; frame-ancestors 'none'; form-action 'self'`,
       'Permissions-Policy': 'camera=(), microphone=(), geolocation=(), interest-cohort=()',
     });
     next();
@@ -46,8 +50,20 @@ export function createApp() {
     res.json({ status: 'ok', version: VERSION, commands: COMMANDS.commands.length }),
   );
 
-  const html = (res, body) =>
-    res.type('html').set('Cache-Control', 'public, max-age=300, must-revalidate').send(body);
+  // The shared Profullstack footer (copyright + webring), rendered per request
+  // from @profullstack/footer's @latest template (cached 1 h by the package)
+  // into the <!--pfs-footer--> slot every page's foot() leaves.
+  const withFooter = async (res, body) =>
+    body.replace(
+      '<!--pfs-footer-->',
+      await footerHtml({ site: 'https://moshcode.sh/', nonce: res.locals.nonce }),
+    );
+
+  const html = async (res, body) =>
+    res
+      .type('html')
+      .set('Cache-Control', 'public, max-age=300, must-revalidate')
+      .send(await withFooter(res, body));
 
   app.get('/', (_req, res) => html(res, renderHome(COMMANDS)));
   app.get('/commands', (_req, res) => html(res, renderCommands(COMMANDS)));
@@ -123,7 +139,7 @@ export function createApp() {
     }),
   );
 
-  app.use((_req, res) => res.status(404).type('html').send(renderNotFound()));
+  app.use(async (_req, res) => res.status(404).type('html').send(await withFooter(res, renderNotFound())));
   return app;
 }
 

src/site.mjs

@@ -95,12 +95,6 @@ export function foot() {
       <p class="brand"><span class="brand-mark" aria-hidden="true">▚</span> moshcode</p>
       <p class="creed">${esc(SITE.creed)}</p>
       <p class="muted">MIT licensed. Built by <a href="https://github.com/moshcoder">moshcoder</a>.</p>
-      <nav class="webring" aria-label="Profullstack webring">
-        <a href="https://rssamplifier.com/ring/profullstack/previous?from=https%3A%2F%2Fmoshcode.sh%2F" rel="prev">&lt;&lt;</a>
-        <a href="https://rssamplifier.com/ring/profullstack">Profullstack</a>
-        <a href="https://rssamplifier.com/ring/profullstack/next?from=https%3A%2F%2Fmoshcode.sh%2F" rel="next">&gt;&gt;</a>
-        <a href="https://rssamplifier.com/ring/profullstack/random?from=https%3A%2F%2Fmoshcode.sh%2F" title="Random site" aria-label="Random site">&#x2684;</a>
-      </nav>
     </div>
     ${FOOTER_LINKS.map(
       (col) => `<div class="foot-col">
@@ -110,6 +104,7 @@ export function foot() {
     ).join('\n    ')}
   </div>
 </footer>
+<!--pfs-footer-->
 <script src="/app.js" defer></script>
 </body>
 </html>`;