feat: redesign the reader as a news board

.github/workflows/checks.yml

@@ -3,9 +3,11 @@ name: Checks
 on:
   push:
     branches:
+      - development
       - main
   pull_request:
     branches:
+      - development
       - main
 
 jobs:

e2e/screenshots.spec.ts

@@ -9,9 +9,16 @@ import {
 import path from 'path'
 
 const RSS_URL = 'http://feeds.bbci.co.uk/news/rss.xml'
+const MOCK_IMAGE_URL_PATTERN = 'https://mock-images.example/**'
+
+const MOCK_IMAGE_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 450">
+  <rect width="800" height="450" fill="#2a2438"/>
+  <circle cx="620" cy="120" r="70" fill="#4a3f63"/>
+  <path d="M0 450 L260 210 L430 360 L560 250 L800 450 Z" fill="#3b3252"/>
+</svg>`
 
 const MOCK_RSS_XML = `<?xml version="1.0" encoding="UTF-8"?>
-<rss version="2.0">
+<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/">
   <channel>
     <title>BBC News</title>
     <link>https://www.bbc.co.uk/news</link>
@@ -20,16 +27,19 @@ const MOCK_RSS_XML = `<?xml version="1.0" encoding="UTF-8"?>
       <title>Global leaders gather for climate summit in Geneva</title>
       <description>World leaders are meeting in Geneva to discuss urgent measures to address climate change, with new emissions targets expected to be announced.</description>
       <pubDate>Mon, 08 Dec 2025 09:00:00 GMT</pubDate>
+      <media:thumbnail width="240" height="135" url="https://mock-images.example/summit.svg"/>
     </item>
     <item>
       <title>Tech giants face new antitrust regulations across Europe</title>
       <description>The European Commission has unveiled a sweeping set of antitrust measures targeting major technology companies operating within the EU.</description>
       <pubDate>Mon, 08 Dec 2025 08:30:00 GMT</pubDate>
+      <media:thumbnail width="240" height="135" url="https://mock-images.example/antitrust.svg"/>
     </item>
     <item>
       <title>Scientists discover new species deep in the Amazon rainforest</title>
       <description>A team of researchers has identified over a dozen previously unknown species during an expedition into a remote region of the Amazon.</description>
       <pubDate>Mon, 08 Dec 2025 07:45:00 GMT</pubDate>
+      <media:thumbnail width="240" height="135" url="https://mock-images.example/amazon.svg"/>
     </item>
     <item>
       <title>Global markets rally as inflation data shows signs of easing</title>
@@ -40,6 +50,7 @@ const MOCK_RSS_XML = `<?xml version="1.0" encoding="UTF-8"?>
       <title>Historic peace agreement signed in the Middle East</title>
       <description>Diplomats have announced a landmark peace agreement following months of negotiations, raising hopes for long-term stability in the region.</description>
       <pubDate>Mon, 08 Dec 2025 06:30:00 GMT</pubDate>
+      <media:thumbnail width="240" height="135" url="https://mock-images.example/peace.svg"/>
     </item>
     <item>
       <title>Space agency reveals plans for crewed Mars mission by 2035</title>
@@ -49,49 +60,65 @@ const MOCK_RSS_XML = `<?xml version="1.0" encoding="UTF-8"?>
   </channel>
 </rss>`
 
-const { screenlyJsContent } = createMockScreenlyForScreenshots(
-  {
-    coordinates: [51.5074, -0.1278],
-    location: 'London, UK',
-  },
-  {
-    bypass_cors: 'false',
-    cache_interval: '1800',
-    display_errors: 'false',
-    enable_analytics: 'false',
-    override_locale: 'en',
-    override_timezone: 'Europe/London',
-    rss_title: 'BBC News',
-    rss_url: RSS_URL,
-  },
-)
+const VARIANTS = [
+  { prefix: '', mode: 'headlines' },
+  { prefix: 'list-', mode: 'list' },
+]
+
+for (const { prefix, mode } of VARIANTS) {
+  const { screenlyJsContent } = createMockScreenlyForScreenshots(
+    {
+      coordinates: [51.5074, -0.1278],
+      location: 'London, UK',
+    },
+    {
+      bypass_cors: 'false',
+      cache_interval: '1800',
+      display_errors: 'false',
+      enable_analytics: 'false',
+      mode,
+      override_locale: 'en',
+      override_timezone: 'Europe/London',
+      rss_title: 'BBC News',
+      rss_url: RSS_URL,
+    },
+  )
 
-for (const { width, height } of RESOLUTIONS) {
-  test(`screenshot ${width}x${height}`, async ({ browser }) => {
-    const screenshotsDir = getScreenshotsDir()
+  for (const { width, height } of RESOLUTIONS) {
+    test(`screenshot ${prefix}${width}x${height}`, async ({ browser }) => {
+      const screenshotsDir = getScreenshotsDir()
 
-    const context = await browser.newContext({ viewport: { width, height } })
-    const page = await context.newPage()
+      const context = await browser.newContext({ viewport: { width, height } })
+      const page = await context.newPage()
 
-    await setupClockMock(page)
-    await setupScreenlyJsMock(page, screenlyJsContent)
+      await setupClockMock(page)
+      await setupScreenlyJsMock(page, screenlyJsContent)
 
-    await page.route(RSS_URL, async (route) => {
-      await route.fulfill({
-        status: 200,
-        contentType: 'application/rss+xml',
-        body: MOCK_RSS_XML,
+      await page.route(RSS_URL, async (route) => {
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/rss+xml',
+          body: MOCK_RSS_XML,
+        })
+      })
+
+      await page.route(MOCK_IMAGE_URL_PATTERN, async (route) => {
+        await route.fulfill({
+          status: 200,
+          contentType: 'image/svg+xml',
+          body: MOCK_IMAGE_SVG,
+        })
       })
-    })
 
-    await page.goto('/')
-    await page.waitForLoadState('networkidle')
+      await page.goto('/')
+      await page.waitForLoadState('networkidle')
 
-    await page.screenshot({
-      path: path.join(screenshotsDir, `${width}x${height}.png`),
-      fullPage: false,
-    })
+      await page.screenshot({
+        path: path.join(screenshotsDir, `${prefix}${width}x${height}.png`),
+        fullPage: false,
+      })
 
-    await context.close()
-  })
+      await context.close()
+    })
+  }
 }

index.html

@@ -12,28 +12,25 @@
       reference-height="1080"
       orientation="auto"
     >
-      <div id="app">
-        <app-header class="header" show-date></app-header>
-
-        <template id="feed-card-template">
-          <article class="feed-card">
-            <div class="feed-card-meta">
-              <h2 class="feed-card-title"></h2>
-              <time class="feed-card-date"></time>
-            </div>
-            <p class="feed-card-excerpt"></p>
-            <span class="feed-card-source"></span>
-          </article>
-        </template>
-
-        <p id="feed-date" class="feed-date"></p>
-
-        <main id="feed-grid" class="feed-grid" hidden></main>
-
-        <div id="feed-error" class="feed-error" hidden>
-          <p>Unable to load RSS feed.<br />Retrying&hellip;</p>
+      <main class="news">
+        <header class="news-header">
+          <img class="news-logo" data-logo alt="" />
+          <p class="news-source" data-source></p>
+          <p class="news-date" data-date></p>
+        </header>
+        <div class="news-body" data-body hidden>
+          <section class="news-hero">
+            <img class="news-hero-image is-hidden" data-hero-image alt="" />
+            <p class="news-hero-date" data-hero-date></p>
+            <h1 class="news-hero-title" data-hero-title></h1>
+            <p class="news-hero-excerpt" data-hero-excerpt></p>
+          </section>
+          <ul class="news-list" data-list></ul>
         </div>
-      </div>
+        <p class="news-error" data-error hidden>
+          Unable to load the feed.<br />Retrying&hellip;
+        </p>
+      </main>
     </auto-scaler>
     <script type="module" src="/src/main.ts"></script>
   </body>

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "devDependencies": {
     "@playwright/test": "^1.58.0",
-    "@screenly/edge-apps": "^1.2.1",
+    "@screenly/edge-apps": "^1.5.0",
     "@types/bun": "^1.3.13",
     "@types/jsdom": "^28.0.1",
     "bun-types": "^1.3.13",

screenly.yml

@@ -41,6 +41,21 @@ settings:
     optional: true
     help_text: Whether to enable analytics or not
     is_global: true
+  mode:
+    type: string
+    default_value: headlines
+    title: Mode
+    optional: true
+    help_text:
+      properties:
+        help_text: Choose the layout for where the screen is placed.
+        options:
+          - label: Headlines (lead story and list)
+            value: headlines
+          - label: List (headlines only, maximum readability)
+            value: list
+        type: select
+      schema_version: 1
   override_locale:
     type: string
     default_value: en

screenly_qc.yml

@@ -41,6 +41,21 @@ settings:
     optional: true
     help_text: Whether to enable analytics or not
     is_global: true
+  mode:
+    type: string
+    default_value: headlines
+    title: Mode
+    optional: true
+    help_text:
+      properties:
+        help_text: Choose the layout for where the screen is placed.
+        options:
+          - label: Headlines (lead story and list)
+            value: headlines
+          - label: List (headlines only, maximum readability)
+            value: list
+        type: select
+      schema_version: 1
   override_locale:
     type: string
     default_value: en