feat: add simple edge app template

[nicomiguelino]

User description

Create a minimal starter template for building custom Screenly Edge Apps with essential structure and single message setting.

---

PR Type

Enhancement, Tests

---

Description

• Introduce simple Edge App template

• Display message from configurable setting

• Theme setup and ready signaling

• Add unit test for settings

---

Diagram Walkthrough

flowchart LR
  A["Template files (HTML/CSS)"] -- "render UI" --> B["main.ts"]
  B["main.ts"] -- "getSetting('message')" --> C["Screenly settings"]
  B -- "setupTheme()" --> D["Branding/theme"]
  B -- "signalReady()" --> E["Ready signal"]
  F["main.test.ts"] -- "mock settings" --> C
  F -- "assert message displayed" --> B

Loading

File Walkthrough

	Relevant files
Tests	1 files main.test.ts Add unit test validating message setting                                  +17/-0
Enhancement	3 files main.ts Implement message rendering, theme, readiness                        +17/-0    style.css Add base styles and themed message display                              +44/-0    index.html Provide minimal HTML scaffold and assets                                  +16/-0
Configuration changes	5 files .ignore Ignore node_modules in template                                                    +1/-0      .prettierrc.json Add Prettier configuration for formatting                                +6/-0      package.json Define scripts, deps for template workflow                              +34/-0    screenly.yml Declare app manifest and message setting                                  +16/-0    tsconfig.json Add TypeScript configuration for Bun/DOM                                  +16/-0
Documentation	1 files README.md Document features, setup, config, testing                                +41/-0

---

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 PR contains tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Cache Busting The script tag includes a static query parameter (screenly.js?version=1). Consider aligning cache-busting/versioning with the build or library version to avoid stale client caches. <script src="screenly.js?version=1"></script> Package Naming The package name is qr-code, which doesn't match the template’s purpose. Consider renaming to reflect the simple edge app template to prevent confusion. { Null Handling document.querySelector('#message') is optional, but a missing element silently no-ops. Consider logging or signaling an error to aid debugging when the element is not found. const messageElement = document.querySelector<HTMLDivElement>('#message') if (messageElement) { messageElement.textContent = message }

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	Remove unused QR code remnants The package name and dependency suggest a QR code app, but the template implements a simple message app. Align metadata by renaming the package and removing the unused dependency to avoid shipping unused code. edge-apps/.bun-create/edge-app-template/package.json [1-34] { - "name": "qr-code", + "name": "simple-edge-app", "version": "1.0.0", - ... - "dependencies": { - "qrcode": "^1.5.4" + "type": "module", + "scripts": { + "generate-mock-data": "screenly edge-app run --generate-mock-data", + "predev": "bun run generate-mock-data", + "dev": "run-p build:dev edge-app-server", + "edge-app-server": "screenly edge-app run", + "build": "bun run build:prod", + "build:dev": "bun build src/main.ts --outdir static/js --target browser --watch", + "build:prod": "bun build src/main.ts --outdir static/js --target browser", + "test": "bun test", + "test:unit": "bun test", + "lint": "tsc --noEmit", + "format": "prettier --write src/ README.md index.html", + "deploy": "bun run build && screenly edge-app deploy", + "prepare": "cd ../edge-apps-library && bun install && bun run build" }, - ... + "dependencies": {}, + "devDependencies": { + "@screenly/edge-apps": "workspace:../edge-apps-library", + "@types/bun": "^1.3.4", + "@types/jsdom": "^27.0.0", + "bun-types": "^1.3.5", + "jsdom": "^27.3.0", + "npm-run-all2": "^8.0.4", + "prettier": "^3.7.4", + "typescript": "^5.9.3" + } } Suggestion importance[1-10]: 8 __ Why: The package is named qr-code and depends on qrcode while the app is a simple message template; aligning metadata and removing an unused dependency reduces confusion and bundle bloat. This is a substantive, accurate cleanup.	Medium
Possible issue	Ensure readiness on failure Guard against exceptions so signalReady() is always called even if DOM update or theme setup throws. Wrap logic in try/finally to ensure readiness is signaled to the host. edge-apps/.bun-create/edge-app-template/src/main.ts [3-17] window.onload = function () { - const message = getSetting<string>('message') || 'Hello, world!' - - // Setup branding colors using the library - setupTheme() - - // Set the message - const messageElement = document.querySelector<HTMLDivElement>('#message') - if (messageElement) { - messageElement.textContent = message + try { + const message = getSetting<string>('message') || 'Hello, world!' + setupTheme() + const messageElement = document.querySelector<HTMLDivElement>('#message') + if (messageElement) { + messageElement.textContent = message + } + } finally { + signalReady() } - - // Signal that the app is ready using the library - signalReady() } Suggestion importance[1-10]: 7 __ Why: Wrapping logic in try/finally to always call signalReady() improves robustness if theme setup or DOM updates throw. It's accurate to the diff and beneficial, though not a critical bug fix.	Medium
	Defer external library script Add the defer attribute so the script doesn't block HTML parsing and to ensure DOM elements exist before execution. This reduces the risk of race conditions if the library executes immediately. edge-apps/.bun-create/edge-app-template/index.html [7] -<script src="screenly.js?version=1"></script> +<script src="screenly.js?version=1" defer></script> Suggestion importance[1-10]: 6 __ Why: Adding defer to the screenly.js script can prevent parser blocking and reduce race conditions without changing behavior. It's a reasonable, low-risk improvement, though not critical.	Low

[nicomiguelino]

An alternative to this PR is in the works.