feat: 4chan-order titles, display-title fallback, no-cache previews

- Title leads with directory code + post subject, then board name:
  '/tv/ - <subject> - Television & Film - 5chan'
- Display title falls back: post subject -> content excerpt -> link, capped at 50 chars
- Serve previews with 'Cache-Control: no-cache' (always revalidate via ETag) so
  format changes always show without a cache-buster

Author: tomcasaburi

lib/html.js

@@ -23,34 +23,53 @@ const firstLine = (value) => (value ? String(value).split('\n').find((l) => l.tr
 
 const TITLE_SEP = ' - '
 const capitalize = (s) => (s ? s.charAt(0).toUpperCase() + s.slice(1) : s)
+const join = (...parts) => parts.filter(Boolean).join(TITLE_SEP)
 
-// Build the page title and description, modelled on 4chan's:
-//   title:  "/tv/ - Television & Film - <subject> - 5chan"
+// Split a directory title "/tv/ - Television & Film" into its code ("/tv/") and
+// name ("Television & Film") halves.
+const splitDirectoryTitle = (title) => {
+  const i = title.indexOf(TITLE_SEP)
+  return i === -1 ? { code: title, name: null } : { code: title.slice(0, i), name: title.slice(i + TITLE_SEP.length) }
+}
+
+// Build the page title and description, modelled on 4chan's. For a thread the
+// title leads with the directory code + post subject, then the board name, so
+// the reader sees what they care about (which board + the post) first:
+//   title:  "/tv/ - <subject> - Television & Film - 5chan"
 //   desc:   "<post text> — "/tv/ - Television & Film" on 5chan, a serverless imageboard."
-// `label` is the board's display name (nice directory title, else the community
-// address); it can be null for non-board pages.
-const buildMeta = ({ kind, comment, label, siteName, tagline }) => {
+// `boardTitle` is the nice directory title (or null); `label` is the general
+// display label (boardTitle, else the community address); both can be null.
+const buildMeta = ({ kind, comment, boardTitle, label, siteName, tagline }) => {
   const onSite = tagline ? `${siteName}, ${tagline}` : siteName
   const context = label ? `"${label}" on ${onSite}` : onSite // board clause for descriptions
-  const boardPart = label ? `${label}${TITLE_SEP}` : ''
 
   if (kind === 'thread' && comment) {
-    const subject = truncate(comment.title || firstLine(comment.content), 65)
-    const body = truncate(comment.content || comment.title, 120)
+    // Display title: post subject, else a content excerpt, else the link URL — capped at 50.
+    const subject = truncate(comment.title || firstLine(comment.content) || comment.link, 50)
+    const body = truncate(comment.content || comment.title || comment.link, 120)
+    let title
+    if (boardTitle && subject) {
+      const { code, name } = splitDirectoryTitle(boardTitle)
+      title = join(code, subject, name, siteName) // "/tv/ - <subject> - Television & Film - 5chan"
+    } else if (subject) {
+      title = join(label, subject, siteName)
+    } else {
+      title = label ? join(label, siteName) : siteName
+    }
     return {
-      title: subject ? `${boardPart}${subject}${TITLE_SEP}${siteName}` : `${boardPart}${siteName}`,
+      title,
       description: body ? `${body} — ${context}.` : `${capitalize(context)}.`,
     }
   }
   if (kind === 'catalog') {
     return {
-      title: `${boardPart}Catalog${TITLE_SEP}${siteName}`,
+      title: join(label, 'Catalog', siteName),
       description: label ? `Browse the "${label}" catalog on ${onSite}.` : `Browse ${onSite}.`,
     }
   }
   // board home / fallback
   return {
-    title: label ? `${label}${TITLE_SEP}${siteName}` : siteName,
+    title: label ? join(label, siteName) : siteName,
     description: `${capitalize(context)}.`,
   }
 }
@@ -62,7 +81,7 @@ export const buildPreviewHtml = ({ client, appUrl, comment, board, boardTitle, i
   // Board display label: nice directory title > community address > /board/ > none.
   const label = boardTitle || comment?.communityAddress || (board ? `/${board}/` : null)
 
-  const { title, description } = buildMeta({ kind, comment, label, siteName, tagline: client.tagline })
+  const { title, description } = buildMeta({ kind, comment, boardTitle, label, siteName, tagline: client.tagline })
 
   const twitterCard = image ? 'summary_large_image' : 'summary'
   const favicon = `${client.appBaseUrl}/favicon.ico`

start.js

@@ -16,11 +16,10 @@ app.disable('x-powered-by')
 // Paths that browsers/PWAs request but that are never share links.
 const IGNORE = new Set(['/favicon.ico', '/service-worker.js', '/manifest.json', '/apple-touch-icon.png'])
 
-// The comment content is immutable, but the rendered preview (title/tags) can
-// change when the format evolves — so cache modestly, never "immutable", so
-// updates propagate. Repeat renders are cheap anyway (comments are cached).
-const THREAD_CACHE = 'public, max-age=3600'
-const FIVE_MIN = 'public, max-age=300'
+// Always revalidate (cheap 304s via ETag) so preview/format changes show up
+// without cache-busting — the comment is immutable, but the rendered preview is
+// not. Repeat renders are cheap (comments are cached in-memory).
+const PREVIEW_CACHE = 'no-cache'
 
 const send = (res, html, cacheControl) => {
   res.setHeader('Cache-Control', cacheControl)
@@ -41,7 +40,7 @@ app.get('*', async (req, res) => {
 
   // Unknown path -> send to the app home with a generic card (never dead-end).
   if (!matched) {
-    return send(res, buildPreviewHtml({ client, appUrl: client.appBaseUrl }), FIVE_MIN)
+    return send(res, buildPreviewHtml({ client, appUrl: client.appBaseUrl }), PREVIEW_CACHE)
   }
 
   const { route, m } = matched
@@ -56,17 +55,17 @@ app.get('*', async (req, res) => {
       const comment = await getComment(cid)
       let image = commentMediaUrl(comment)
       if (!image && comment.link) image = await scrapeLinkImage(comment.link)
-      return send(res, buildPreviewHtml({ client, appUrl, comment, board, boardTitle, image, kind: 'thread' }), THREAD_CACHE)
+      return send(res, buildPreviewHtml({ client, appUrl, comment, board, boardTitle, image, kind: 'thread' }), PREVIEW_CACHE)
     } catch (e) {
       // Graceful fallback: still redirect to the app with a generic card, but
       // with a short TTL so the rich preview can appear once the cid resolves.
       debug('getComment failed for', cid, '-', e?.message || e)
-      return send(res, buildPreviewHtml({ client, appUrl, board, boardTitle, kind: 'thread' }), FIVE_MIN)
+      return send(res, buildPreviewHtml({ client, appUrl, board, boardTitle, kind: 'thread' }), PREVIEW_CACHE)
     }
   }
 
   // page (board home or catalog) -> generic card
-  return send(res, buildPreviewHtml({ client, appUrl, board, boardTitle, kind: route.pageKind || 'board' }), FIVE_MIN)
+  return send(res, buildPreviewHtml({ client, appUrl, board, boardTitle, kind: route.pageKind || 'board' }), PREVIEW_CACHE)
 })
 
 app

test/clients.test.js

@@ -93,8 +93,8 @@ test('5chan thread builds a 4chan-style title + description with the board name'
     kind: 'thread',
   })
   assert.ok(
-    html.includes('og:title" content="/tv/ - Television & Film - Disclosure Day - 5chan"'),
-    'title = board name + subject + site',
+    html.includes('og:title" content="/tv/ - Disclosure Day - Television & Film - 5chan"'),
+    'title = code + subject + board name + site (4chan order)',
   )
   assert.ok(
     html.includes(
@@ -128,6 +128,33 @@ test('catalog page uses the directory name', () => {
   assert.ok(html.includes('og:title" content="/tv/ - Television & Film - Catalog - 5chan"'), 'catalog title')
 })
 
+test('thread display title: 50-char content excerpt when there is no subject', () => {
+  const html = buildPreviewHtml({
+    client: { siteName: '5chan', appBaseUrl: 'https://5chan.app', tagline: 't' },
+    appUrl: 'https://5chan.app/#/tv/thread/Q',
+    comment: { content: 'y'.repeat(80), communityAddress: 'tv.bso' },
+    board: 'tv',
+    boardTitle: '/tv/ - Television & Film',
+    kind: 'thread',
+  })
+  const ogTitle = html.match(/og:title" content="([^"]*)"/)[1]
+  assert.equal(ogTitle, '/tv/ - ' + 'y'.repeat(49) + '… - Television & Film - 5chan')
+})
+
+test('thread display title: link fallback when no subject or content', () => {
+  const link = 'https://i.imgur.com/abcdefgh.png'
+  const html = buildPreviewHtml({
+    client: { siteName: '5chan', appBaseUrl: 'https://5chan.app', tagline: 't' },
+    appUrl: 'https://5chan.app/#/tv/thread/Q',
+    comment: { link, communityAddress: 'tv.bso' },
+    board: 'tv',
+    boardTitle: '/tv/ - Television & Film',
+    kind: 'thread',
+  })
+  const ogTitle = html.match(/og:title" content="([^"]*)"/)[1]
+  assert.equal(ogTitle, '/tv/ - ' + link + ' - Television & Film - 5chan')
+})
+
 test('redirect script cannot break out of the <script> tag', () => {
   const html = buildPreviewHtml({
     client: { siteName: '5chan', appBaseUrl: 'https://5chan.app' },