feat(status.app): serve the reworked news feeds under /v2 (#1297)

* refactor(status.app): restore the shipped news feed rendering as v1

The clients in the wild parse what production serves today, so that build
is kept verbatim in its own module: unnamespaced `newsLink`, markup
stripped down to text, Ghost's escaping passed through. It imports nothing
but the XML parser, so a change to the reworked build cannot reach it.

`handleRssFeed` picks the build from a version that defaults to `v1`,
leaving the existing routes untouched.

* feat(status.app): serve the reworked news feeds under /v2

`/desktop-news/rss/v2` and `/mobile-news/rss/v2` carry the lists, the body
links, the escaping fixes and the namespaced call-to-action. The clients
move over once status-go reads the new elements; until then
`/desktop-news/rss` and `/mobile-news/rss` keep serving what they serve
today.

Author: JulesFiliot

.changeset/tall-otters-refuse.md

@@ -0,0 +1,5 @@
+---
+'status.app': patch
+---
+
+feat(status.app): serve the reworked news feeds under `/v2`. `/desktop-news/rss/v2` and `/mobile-news/rss/v2` carry the lists, the body links, the escaping fixes and the namespaced call-to-action, while `/desktop-news/rss` and `/mobile-news/rss` keep serving the rendering the shipped clients were built against.

apps/status.app/src/app/_utils/legacy-news-feed.test.ts

@@ -0,0 +1,82 @@
+import { describe, expect, it } from 'vitest'
+
+import { buildLegacyNewsFeed } from './legacy-news-feed'
+
+const DESKTOP_LINE_BREAK = '<br /><br />'
+const MOBILE_LINE_BREAK = '\n\n'
+
+/** A Ghost item shaped the way the shipped clients receive it today. */
+const GHOST_FEED = (body: string) =>
+  '<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" version="2.0">' +
+  '<channel>' +
+  '<item>' +
+  '<title><![CDATA[Fixes & tweaks <beta>]]></title>' +
+  `<description><![CDATA[${body}]]></description>` +
+  `<content:encoded><![CDATA[${body}]]></content:encoded>` +
+  '</item>' +
+  '</channel>' +
+  '</rss>'
+
+const LIST_BODY =
+  '<p>Fixes:</p>' +
+  '<ul><li>High CPU usage</li>' +
+  '<li>Endless loading, see the <a href="https://wikipedia.org/">test link</a> for details</li></ul>'
+
+const BUTTON_CARD =
+  '<p>Fixes for high CPU usage.</p>' +
+  '<p>Thanks for testing.</p>' +
+  '<div class="kg-card kg-button-card kg-align-center">' +
+  '<a href="https://status.app/" class="kg-btn kg-btn-accent">Update your Status</a>' +
+  '</div>'
+
+describe('buildLegacyNewsFeed', () => {
+  it('carries the call-to-action outside of any namespace', () => {
+    const feed = buildLegacyNewsFeed(GHOST_FEED(BUTTON_CARD), MOBILE_LINE_BREAK)
+
+    expect(feed).toContain('<newsLink>https://status.app/</newsLink>')
+    expect(feed).toContain('<newsLinkLabel>Update your Status</newsLinkLabel>')
+    expect(feed).not.toContain('xmlns:status')
+  })
+
+  it('joins the paragraphs with the line break the feed asks for', () => {
+    expect(
+      buildLegacyNewsFeed(GHOST_FEED(BUTTON_CARD), DESKTOP_LINE_BREAK)
+    ).toContain(
+      '<description>Fixes for high CPU usage.<br /><br />Thanks for testing.</description>'
+    )
+    expect(
+      buildLegacyNewsFeed(GHOST_FEED(BUTTON_CARD), MOBILE_LINE_BREAK)
+    ).toContain(
+      '<description>Fixes for high CPU usage.\n\nThanks for testing.</description>'
+    )
+  })
+
+  /**
+   * The bugs below are the ones `/v2` exists to fix -- an unescaped title makes
+   * the feed invalid XML, list items run together and the anchor label is lost.
+   * They are locked here because the shipped clients read around them, so this
+   * test failing means a fix has leaked into the frozen feed.
+   */
+  it('reproduces what production serves, bugs included', () => {
+    const feed = buildLegacyNewsFeed(GHOST_FEED(LIST_BODY), MOBILE_LINE_BREAK)
+
+    expect(feed.slice(feed.indexOf('<item>'))).toBe(
+      '<item>' +
+        '<title>Fixes & tweaks <beta></title>' +
+        '<description>Fixes:\n\nHigh CPU usageEndless loading, see the  for details</description>' +
+        '<content:encoded>Fixes:\n\nHigh CPU usageEndless loading, see the  for details</content:encoded>' +
+        '<newsLink>https://wikipedia.org/</newsLink>' +
+        '<newsLinkLabel>test link</newsLinkLabel>' +
+        '</item></channel></rss>'
+    )
+  })
+
+  it('leaves Ghost values escaped the way they arrive', () => {
+    const feed = buildLegacyNewsFeed(
+      GHOST_FEED('<p>Fixes &amp; tweaks</p>'),
+      MOBILE_LINE_BREAK
+    )
+
+    expect(feed).toContain('<description>Fixes &amp; tweaks</description>')
+  })
+})

apps/status.app/src/app/_utils/legacy-news-feed.ts

@@ -0,0 +1,73 @@
+import { XMLBuilder, XMLParser } from 'fast-xml-parser'
+
+import type { X2jOptions } from 'fast-xml-parser'
+
+/**
+ * The news feed the clients in the wild already parse, kept byte for byte as it
+ * is served today: unnamespaced `newsLink`/`newsLinkLabel`, markup stripped down
+ * to text and Ghost's escaping passed through untouched. `/v2` carries the
+ * lists, the links and the escaping fixes.
+ *
+ * Frozen on purpose -- nothing here may be shared with the `/v2` modules, or a
+ * change over there would reach the clients that have not been updated.
+ */
+export function buildLegacyNewsFeed(body: string, lineBreak: string): string {
+  const parser = new XMLParser({
+    ignoreAttributes: false,
+    processEntities: false,
+    htmlEntities: true,
+    cdataPropName: undefined,
+  } as X2jOptions)
+
+  const xml = parser.parse(body)
+
+  if (xml.rss?.channel?.item) {
+    if (Array.isArray(xml.rss.channel.item)) {
+      xml.rss.channel.item.forEach((item: any) => processItem(item, lineBreak))
+    } else {
+      processItem(xml.rss.channel.item, lineBreak)
+    }
+  }
+
+  const builder = new XMLBuilder({
+    ignoreAttributes: false,
+    processEntities: false,
+    cdataPropName: undefined,
+  })
+
+  return builder.build(xml)
+}
+
+function stripHtml(content: string, lineBreak: string) {
+  return content
+    .split(/<\/p>/i)
+    .map((part: string) => part.replace(/<[^>]+>/g, '').trim())
+    .filter(
+      (part: string, index: number, arr: string[]) =>
+        part || index < arr.length - 1
+    )
+    .join(lineBreak)
+}
+
+function processField(item: any, field: string, lineBreak: string) {
+  let content = stripHtml(item[field], lineBreak)
+  if (item.newsLinkLabel) {
+    content = content.replace(item.newsLinkLabel, '')
+  }
+  if (content.endsWith(lineBreak)) {
+    content = content.slice(0, -lineBreak.length)
+  }
+
+  return content
+}
+
+function processItem(item: any, lineBreak: string) {
+  const newsLink = item['content:encoded'].match(
+    /<a[^>]*href="([^"]+)"[^>]*>([^<]*)<\/a>/
+  )
+  item.newsLink = newsLink?.[1]
+  item.newsLinkLabel = newsLink?.[2]
+
+  item['content:encoded'] = processField(item, 'content:encoded', lineBreak)
+  item.description = processField(item, 'description', lineBreak)
+}

apps/status.app/src/app/_utils/rss-handler.ts

@@ -1,6 +1,7 @@
 import { XMLBuilder, XMLParser } from 'fast-xml-parser'
 
 import { clientEnv } from '~/config/env.client.mjs'
+import { buildLegacyNewsFeed } from '~app/_utils/legacy-news-feed'
 import { buildNewsFeed } from '~app/_utils/news-feed'
 import { baseUrl } from '~website/_lib/base-url'
 
@@ -10,22 +11,38 @@ import type { X2jOptions } from 'fast-xml-parser'
 const FEED = {
   'desktop-news': {
     format: 'html',
+    lineBreak: '<br /><br />',
     path: '/tag/desktop-news/rss/',
   },
   'mobile-news': {
     format: 'text',
+    lineBreak: '\n\n',
     path: '/tag/mobile-news/rss/',
   },
   main: {
     format: 'html',
+    lineBreak: '',
     path: '/rss/',
   },
-} as const satisfies Record<string, { format: FeedFormat; path: string }>
+} as const satisfies Record<
+  string,
+  { format: FeedFormat; lineBreak: string; path: string }
+>
 
 type FeedType = keyof typeof FEED
 
-export async function handleRssFeed(type: FeedType) {
-  const { format, path } = FEED[type]
+/**
+ * `v1` is what the shipped clients parse, so it stays on the rendering they were
+ * built against; `v2` is served from its own URL because the fixes it carries --
+ * the namespaced call-to-action above all -- need a client that expects them.
+ */
+type FeedVersion = 'v1' | 'v2'
+
+export async function handleRssFeed(
+  type: FeedType,
+  version: FeedVersion = 'v1'
+) {
+  const { format, lineBreak, path } = FEED[type]
 
   try {
     const response = await fetch(
@@ -43,7 +60,11 @@ export async function handleRssFeed(type: FeedType) {
 
     const body = await response.text()
     const newXml =
-      type === 'main' ? buildBlogFeed(body) : buildNewsFeed(body, format)
+      type === 'main'
+        ? buildBlogFeed(body)
+        : version === 'v2'
+          ? buildNewsFeed(body, format)
+          : buildLegacyNewsFeed(body, lineBreak)
 
     return new Response(newXml, {
       headers: {

apps/status.app/src/app/desktop-news/rss/v2/route.ts

@@ -0,0 +1,12 @@
+import { handleRssFeed } from '~app/_utils/rss-handler'
+
+export const dynamic = 'force-dynamic'
+
+export async function GET() {
+  const response = await handleRssFeed('desktop-news', 'v2')
+  response.headers.set(
+    'Cache-Control',
+    'public, s-maxage=300, stale-while-revalidate=300'
+  )
+  return response
+}

apps/status.app/src/app/mobile-news/rss/v2/route.ts

@@ -0,0 +1,12 @@
+import { handleRssFeed } from '~app/_utils/rss-handler'
+
+export const dynamic = 'force-dynamic'
+
+export async function GET() {
+  const response = await handleRssFeed('mobile-news', 'v2')
+  response.headers.set(
+    'Cache-Control',
+    'public, s-maxage=300, stale-while-revalidate=300'
+  )
+  return response
+}