feat(simple-message-app): redesign and refactor

edge-apps/simple-message-app-new/.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+*.log
+.DS_Store

edge-apps/simple-message-app-new/.ignore

@@ -0,0 +1 @@
+node_modules/

edge-apps/simple-message-app-new/README.md

@@ -0,0 +1,54 @@
+# Simple Message App New
+
+## Getting Started
+
+```bash
+bun install
+```
+
+## Deployment
+
+Create and deploy the Edge App:
+
+```bash
+screenly edge-app create --name simple-message-app-new --in-place
+bun run deploy
+screenly edge-app instance create
+```
+
+## Configuration
+
+The app accepts the following settings via `screenly.yml`:
+
+| Setting             | Description                                                                                                                                                   | Type     | Default              |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------------------- |
+| `enable_analytics`  | Enable or disable Sentry and Google Analytics integrations                                                                                                    | optional | `true`               |
+| `message_body`      | The main text content displayed in the message body card                                                                                                      | required | _(default text)_     |
+| `message_header`    | The headline text displayed prominently on the left side                                                                                                      | required | `Simple Message App` |
+| `override_locale`   | Override the default locale with a supported language code (e.g., `en`, `fr`, `de`)                                                                           | optional | `en`                 |
+| `override_timezone` | Override the default timezone with a supported timezone identifier (e.g., `Europe/London`, `America/New_York`). Defaults to the system timezone if left blank | optional | -                    |
+| `tag_manager_id`    | Google Tag Manager container ID to enable tracking and analytics                                                                                              | optional | `GTM-P98SPZ9Z`       |
+| `theme`             | Visual theme for the application (`light` or `dark`)                                                                                                          | required | `light`              |
+
+## Development
+
+```bash
+bun install      # Install dependencies
+bun run dev      # Start development server
+```
+
+## Testing
+
+```bash
+bun run test:unit
+```
+
+## Screenshots
+
+Generate screenshots at all supported resolutions:
+
+```bash
+bun run screenshots
+```
+
+Screenshots are saved to the `screenshots/` directory.

edge-apps/simple-message-app-new/e2e/screenshots.spec.ts

@@ -0,0 +1,42 @@
+import { test } from '@playwright/test'
+import {
+  createMockScreenlyForScreenshots,
+  getScreenshotsDir,
+  RESOLUTIONS,
+  setupScreenlyJsMock,
+} from '@screenly/edge-apps/test/screenshots'
+import path from 'path'
+
+const { screenlyJsContent } = createMockScreenlyForScreenshots(
+  { coordinates: [40.7128, -74.006], location: 'New York, NY' },
+  {
+    enable_analytics: 'true',
+    message_body: 'A simple message app...',
+    message_header: 'Simple Message App',
+    override_locale: 'en',
+    override_timezone: 'America/New_York',
+    tag_manager_id: 'GTM-P98SPZ9Z',
+    theme: 'light',
+  },
+)
+
+for (const { width, height } of RESOLUTIONS) {
+  test(`screenshot ${width}x${height}`, async ({ browser }) => {
+    const screenshotsDir = getScreenshotsDir()
+
+    const context = await browser.newContext({ viewport: { width, height } })
+    const page = await context.newPage()
+
+    await setupScreenlyJsMock(page, screenlyJsContent)
+
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
+
+    await page.screenshot({
+      path: path.join(screenshotsDir, `${width}x${height}.png`),
+      fullPage: false,
+    })
+
+    await context.close()
+  })
+}

edge-apps/simple-message-app-new/index.html

@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Simple Message App</title>
+    <script src="screenly.js?version=1"></script>
+  </head>
+  <body>
+    <auto-scaler
+      reference-width="1920"
+      reference-height="1080"
+      orientation="auto"
+    >
+      <div id="app">
+        <app-header show-logo show-time show-date></app-header>
+        <div id="left-content">
+          <span id="announcement-label">Announcement</span>
+          <h1 id="message-header"></h1>
+          <div id="date-badge"></div>
+        </div>
+        <div id="message-body-card">
+          <div id="message-body"></div>
+        </div>
+      </div>
+    </auto-scaler>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

edge-apps/simple-message-app-new/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "simple-message-app-new",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "prebuild": "bun run type-check",
+    "generate-mock-data": "screenly edge-app run --generate-mock-data",
+    "predev": "bun run generate-mock-data",
+    "dev": "edge-apps-scripts dev",
+    "build": "edge-apps-scripts build",
+    "build:dev": "edge-apps-scripts build:dev",
+    "build:prod": "edge-apps-scripts build",
+    "test": "bun test --pass-with-no-tests src/",
+    "test:unit": "bun test --pass-with-no-tests src/",
+    "lint": "edge-apps-scripts lint --fix",
+    "format": "prettier --write src/ README.md index.html",
+    "format:check": "prettier --check src/ README.md index.html",
+    "deploy": "bun run build && screenly edge-app deploy --path=dist/",
+    "type-check": "edge-apps-scripts type-check",
+    "screenshots": "edge-apps-scripts screenshots",
+    "prepare": "cd ../edge-apps-library && bun install && bun run build"
+  },
+  "prettier": "../edge-apps-library/.prettierrc.json",
+  "devDependencies": {
+    "@playwright/test": "^1.58.0",
+    "@screenly/edge-apps": "workspace:../edge-apps-library",
+    "@types/bun": "^1.3.9",
+    "@types/jsdom": "^27.0.0",
+    "bun-types": "^1.3.9",
+    "jsdom": "^28.1.0",
+    "npm-run-all2": "^8.0.4",
+    "prettier": "^3.8.1",
+    "typescript": "^5.9.3"
+  }
+}

edge-apps/simple-message-app-new/screenly.yml

@@ -0,0 +1,63 @@
+---
+syntax: manifest_v1
+id: 01HTYXDZVA532Z1GN4CX5Z7VH7
+description: Screenly Simple Message App
+icon: https://playground.srly.io/edge-apps/simple-message-app/static/img/icon.svg
+author: Screenly, Inc.
+ready_signal: true
+settings:
+  enable_analytics:
+    type: string
+    default_value: 'true'
+    title: Enable Analytics
+    optional: true
+    help_text: Enable or disable Sentry and Google Analytics integrations.
+    is_global: true
+  message_body:
+    type: string
+    default_value: |
+      A simple message app allows users to display text on a screen, making it a
+      basic tool for digital signage. Users can input and edit both the heading
+      and message body directly from the Screenly dashboard.
+    title: Message Body
+    optional: false
+    help_text: |
+      Enter the main text content that will be displayed in the message body.
+  message_header:
+    type: string
+    default_value: Simple Message App
+    title: Message Header
+    optional: false
+    help_text: |
+      Enter the headline text that will be displayed as the message title.
+  override_locale:
+    type: string
+    default_value: en
+    title: Override Locale
+    optional: true
+    help_text: |
+      Override the default locale with a supported language code (e.g., en, fr, de). Defaults to English if not specified.
+      You can find the available locales here: https://momentjs.com/
+  override_timezone:
+    type: string
+    default_value: ''
+    title: Override Timezone
+    optional: true
+    help_text: |
+      Override the default timezone with a supported timezone identifier (e.g., Europe/London, America/New_York). Defaults to the system timezone if left blank.
+      You can find the available timezones here: https://momentjs.com/timezone/
+  tag_manager_id:
+    type: string
+    default_value: GTM-P98SPZ9Z
+    title: Google Tag Manager ID
+    optional: true
+    help_text: |
+      Enter your Google Tag Manager container ID to enable tracking and analytics.
+    is_global: true
+  theme:
+    type: string
+    default_value: light
+    title: Theme
+    optional: false
+    help_text: |
+      Select the visual theme for the application ('light' or 'dark').

edge-apps/simple-message-app-new/screenly_qc.yml

@@ -0,0 +1,63 @@
+---
+syntax: manifest_v1
+id: 01JZHP34BQWKHFN9KPT0W0MH2N
+description: Screenly Simple Message App QC
+icon: https://playground.srly.io/edge-apps/simple-message-app/static/img/icon.svg
+author: Screenly, Inc.
+ready_signal: true
+settings:
+  enable_analytics:
+    type: string
+    default_value: 'true'
+    title: Enable Analytics
+    optional: true
+    help_text: Enable or disable Sentry and Google Analytics integrations.
+    is_global: true
+  message_body:
+    type: string
+    default_value: |
+      A simple message app allows users to display text on a screen, making it a
+      basic tool for digital signage. Users can input and edit both the heading
+      and message body directly from the Screenly dashboard.
+    title: Message Body
+    optional: false
+    help_text: |
+      Enter the main text content that will be displayed in the message body.
+  message_header:
+    type: string
+    default_value: Simple Message App
+    title: Message Header
+    optional: false
+    help_text: |
+      Enter the headline text that will be displayed as the message title.
+  override_locale:
+    type: string
+    default_value: en
+    title: Override Locale
+    optional: true
+    help_text: |
+      Override the default locale with a supported language code (e.g., en, fr, de). Defaults to English if not specified.
+      You can find the available locales here: https://momentjs.com/
+  override_timezone:
+    type: string
+    default_value: ''
+    title: Override Timezone
+    optional: true
+    help_text: |
+      Override the default timezone with a supported timezone identifier (e.g., Europe/London, America/New_York). Defaults to the system timezone if left blank.
+      You can find the available timezones here: https://momentjs.com/timezone/
+  tag_manager_id:
+    type: string
+    default_value: GTM-P98SPZ9Z
+    title: Google Tag Manager ID
+    optional: true
+    help_text: |
+      Enter your Google Tag Manager container ID to enable tracking and analytics.
+    is_global: true
+  theme:
+    type: string
+    default_value: light
+    title: Theme
+    optional: false
+    help_text: |
+      Select the visual theme for the application ('light' or 'dark').