feat(welcome-app): redesign and migrate to vanilla HTML/CSS/TS

edge-apps/welcome-app-new/.gitignore

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

edge-apps/welcome-app-new/.ignore

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

edge-apps/welcome-app-new/README.md

@@ -0,0 +1,67 @@
+# Welcome App
+
+## Getting Started
+
+```bash
+bun install
+```
+
+## Deployment
+
+Create and deploy the Edge App:
+
+```bash
+screenly edge-app create --name welcome-app --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`         |
+| `override_locale`   | Override the default locale with a supported language code (e.g., `en_US`, `fr_FR`, `de_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`        |
+| `welcome_heading`   | Heading text displayed as the welcome message title                                                                                                           | required | `Welcome`      |
+| `welcome_message`   | Body text displayed as the welcome message content                                                                                                            | required | `to the team`  |
+
+## Development
+
+```bash
+bun install      # Install dependencies
+bun run dev      # Start development server
+```
+
+## Build
+
+```bash
+bun run build    # Build for production
+```
+
+## Lint & Format
+
+```bash
+bun run lint     # Lint and auto-fix
+bun run format   # Format source files
+```
+
+## Testing
+
+```bash
+bun test         # Run unit tests
+```
+
+## Screenshots
+
+Generate screenshots at all supported resolutions:
+
+```bash
+bun run screenshots
+```
+
+Screenshots are saved to the `screenshots/` directory.

edge-apps/welcome-app-new/e2e/screenshots.spec.ts

@@ -0,0 +1,43 @@
+import { test } from '@playwright/test'
+import {
+  createMockScreenlyForScreenshots,
+  getScreenshotsDir,
+  RESOLUTIONS,
+  setupClockMock,
+  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: 'false',
+    override_locale: 'en',
+    override_timezone: 'America/New_York',
+    theme: 'light',
+    welcome_heading: 'Welcome',
+    welcome_message: 'to the team',
+  },
+)
+
+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 setupClockMock(page)
+    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/welcome-app-new/index.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Welcome App - Screenly Edge App</title>
+    <script src="screenly.js?version=1"></script>
+  </head>
+  <body>
+    <auto-scaler
+      reference-width="1920"
+      reference-height="1080"
+      orientation="auto"
+      padding="0"
+    >
+      <div id="app">
+        <app-header class="header" show-date></app-header>
+        <main class="content">
+          <p id="welcome-heading" class="welcome-heading"></p>
+          <p id="welcome-message" class="welcome-message"></p>
+        </main>
+      </div>
+    </auto-scaler>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

edge-apps/welcome-app-new/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "welcome-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/welcome-app-new/screenly.yml

@@ -0,0 +1,58 @@
+---
+syntax: manifest_v1
+id: 01JSY5XJ0J06P1YJDKR2MKEDP3
+description: Screenly Welcome App.
+icon: https://playground.srly.io/edge-apps/welcome-app/static/images/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
+  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_US, fr_FR, de_DE).
+  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).
+  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').
+  welcome_heading:
+    type: string
+    default_value: Welcome
+    title: Message Heading
+    optional: false
+    help_text: |
+      Enter the heading text that will be displayed as the welcome message title.
+  welcome_message:
+    type: string
+    default_value: to the team
+    title: Message Body
+    optional: false
+    help_text: |
+      Enter the body text that will be displayed as the welcome message content.

edge-apps/welcome-app-new/screenly_qc.yml

@@ -0,0 +1,58 @@
+---
+syntax: manifest_v1
+id: 01JZHPBTR1RMMHATDHAJ0V4H7N
+description: Screenly Welcome App.
+icon: https://playground.srly.io/edge-apps/welcome-app/static/images/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
+  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_US, fr_FR, de_DE).
+  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).
+  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').
+  welcome_heading:
+    type: string
+    default_value: Welcome
+    title: Message Heading
+    optional: false
+    help_text: |
+      Enter the heading text that will be displayed as the welcome message title.
+  welcome_message:
+    type: string
+    default_value: to the team
+    title: Message Body
+    optional: false
+    help_text: |
+      Enter the body text that will be displayed as the welcome message content.

edge-apps/welcome-app-new/src/css/style.css

@@ -0,0 +1,74 @@
+@import '@screenly/edge-apps/styles';
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  color: white;
+  font-family: 'Inter', system-ui, sans-serif;
+  background: url('/static/images/bg.webp') no-repeat center center;
+  background-size: cover;
+}
+
+auto-scaler {
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+#app {
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  height: 100vh;
+  padding: 1.25rem;
+  gap: 1rem;
+}
+
+.header {
+  flex-shrink: 0;
+  width: 100%;
+}
+
+.content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-left: 22.0625rem;
+  gap: 0.5rem;
+}
+
+.welcome-heading {
+  font-size: 11.25rem;
+  font-weight: 500;
+  letter-spacing: -0.055em;
+  line-height: 1;
+  margin: 0;
+  text-shadow:
+    0 0.125rem 0.5rem rgba(0, 0, 0, 0.3),
+    0 0.0625rem 0.125rem rgba(0, 0, 0, 0.15);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.welcome-message {
+  font-size: 4rem;
+  font-weight: 500;
+  letter-spacing: -0.047em;
+  line-height: 1.2;
+  margin: 0;
+  text-shadow:
+    0 0.125rem 0.5rem rgba(0, 0, 0, 0.3),
+    0 0.0625rem 0.125rem rgba(0, 0, 0, 0.15);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}