From 8834af315db0ef7b6ef9fa133ac4fbe5f5ab92bc Mon Sep 17 00:00:00 2001 From: nicomiguelino Date: Thu, 18 Dec 2025 11:14:53 -0800 Subject: [PATCH 1/4] feat: add simple edge app template - Minimal starter template for custom Edge Apps - Single message setting for basic configuration - Essential CSS styling and structure - Simple test case for settings - Lightweight foundation for app development --- .../.bun-create/edge-app-template/.gitignore | 6 +++ .../.bun-create/edge-app-template/.ignore | 1 + .../edge-app-template/.prettierrc.json | 6 +++ .../.bun-create/edge-app-template/README.md | 41 +++++++++++++++++ .../.bun-create/edge-app-template/index.html | 16 +++++++ .../edge-app-template/package.json | 34 ++++++++++++++ .../edge-app-template/screenly.yml | 16 +++++++ .../edge-app-template/src/main.test.ts | 17 +++++++ .../.bun-create/edge-app-template/src/main.ts | 17 +++++++ .../edge-app-template/static/css/style.css | 44 +++++++++++++++++++ .../edge-app-template/tsconfig.json | 16 +++++++ 11 files changed, 214 insertions(+) create mode 100644 edge-apps/.bun-create/edge-app-template/.gitignore create mode 100644 edge-apps/.bun-create/edge-app-template/.ignore create mode 100644 edge-apps/.bun-create/edge-app-template/.prettierrc.json create mode 100644 edge-apps/.bun-create/edge-app-template/README.md create mode 100644 edge-apps/.bun-create/edge-app-template/index.html create mode 100644 edge-apps/.bun-create/edge-app-template/package.json create mode 100644 edge-apps/.bun-create/edge-app-template/screenly.yml create mode 100644 edge-apps/.bun-create/edge-app-template/src/main.test.ts create mode 100644 edge-apps/.bun-create/edge-app-template/src/main.ts create mode 100644 edge-apps/.bun-create/edge-app-template/static/css/style.css create mode 100644 edge-apps/.bun-create/edge-app-template/tsconfig.json diff --git a/edge-apps/.bun-create/edge-app-template/.gitignore b/edge-apps/.bun-create/edge-app-template/.gitignore new file mode 100644 index 000000000..975f00c62 --- /dev/null +++ b/edge-apps/.bun-create/edge-app-template/.gitignore @@ -0,0 +1,6 @@ +node_modules/ +dist/ +*.log +.DS_Store +static/js/*.js +static/js/*.js.map diff --git a/edge-apps/.bun-create/edge-app-template/.ignore b/edge-apps/.bun-create/edge-app-template/.ignore new file mode 100644 index 000000000..c2658d7d1 --- /dev/null +++ b/edge-apps/.bun-create/edge-app-template/.ignore @@ -0,0 +1 @@ +node_modules/ diff --git a/edge-apps/.bun-create/edge-app-template/.prettierrc.json b/edge-apps/.bun-create/edge-app-template/.prettierrc.json new file mode 100644 index 000000000..ea9f4ac6e --- /dev/null +++ b/edge-apps/.bun-create/edge-app-template/.prettierrc.json @@ -0,0 +1,6 @@ +{ + "$schema": "https://json.schemastore.org/prettierrc", + "semi": false, + "singleQuote": true, + "printWidth": 80 +} diff --git a/edge-apps/.bun-create/edge-app-template/README.md b/edge-apps/.bun-create/edge-app-template/README.md new file mode 100644 index 000000000..79727c192 --- /dev/null +++ b/edge-apps/.bun-create/edge-app-template/README.md @@ -0,0 +1,41 @@ +# Simple Edge App Template + +A minimal starter template for building custom Screenly Edge Apps. + +## Features + +- Simple message display +- Theme color integration via @screenly/edge-apps +- Ready signal support +- Minimal configuration + +## Deployment + +Create and deploy the Edge App: + +```bash +screenly edge-app create --name my-app --in-place +screenly edge-app deploy +screenly edge-app instance create +``` + +## Configuration + +The app accepts the following settings via `screenly.yml`: + +- `message` - The message to display on screen + +## Development + +```bash +bun install # Install dependencies +bun run build # Build the app +bun test # Run tests +bun run dev # Start development server +``` + +## Testing + +```bash +bun test +``` diff --git a/edge-apps/.bun-create/edge-app-template/index.html b/edge-apps/.bun-create/edge-app-template/index.html new file mode 100644 index 000000000..5dcbe707d --- /dev/null +++ b/edge-apps/.bun-create/edge-app-template/index.html @@ -0,0 +1,16 @@ + + + + + + Screenly Edge App + + + + +
+
+
+ + + diff --git a/edge-apps/.bun-create/edge-app-template/package.json b/edge-apps/.bun-create/edge-app-template/package.json new file mode 100644 index 000000000..55d5e6ed2 --- /dev/null +++ b/edge-apps/.bun-create/edge-app-template/package.json @@ -0,0 +1,34 @@ +{ + "name": "qr-code", + "version": "1.0.0", + "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": { + "qrcode": "^1.5.4" + }, + "devDependencies": { + "@screenly/edge-apps": "workspace:../edge-apps-library", + "@types/bun": "^1.3.4", + "@types/jsdom": "^27.0.0", + "@types/qrcode": "^1.5.6", + "bun-types": "^1.3.5", + "jsdom": "^27.3.0", + "npm-run-all2": "^8.0.4", + "prettier": "^3.7.4", + "typescript": "^5.9.3" + } +} diff --git a/edge-apps/.bun-create/edge-app-template/screenly.yml b/edge-apps/.bun-create/edge-app-template/screenly.yml new file mode 100644 index 000000000..cb593f48e --- /dev/null +++ b/edge-apps/.bun-create/edge-app-template/screenly.yml @@ -0,0 +1,16 @@ +--- +syntax: manifest_v1 +description: A simple app that displays a customizable message. +author: Screenly, Inc. +ready_signal: true +settings: + message: + type: string + default_value: 'Hello, world!' + title: Message + optional: false + help_text: + properties: + help_text: Enter the message to display. + type: string + schema_version: 1 diff --git a/edge-apps/.bun-create/edge-app-template/src/main.test.ts b/edge-apps/.bun-create/edge-app-template/src/main.test.ts new file mode 100644 index 000000000..ed40c6060 --- /dev/null +++ b/edge-apps/.bun-create/edge-app-template/src/main.test.ts @@ -0,0 +1,17 @@ +import { describe, test, expect, beforeEach, afterEach } from 'bun:test' +import { setupScreenlyMock, resetScreenlyMock } from '@screenly/edge-apps/test' + +describe('Simple Edge App', () => { + beforeEach(() => { + setupScreenlyMock({}, { message: 'Hello, world!' }) + }) + + afterEach(() => { + resetScreenlyMock() + }) + + test('should display the message from settings', () => { + const message = screenly.settings.message as string + expect(message).toBe('Hello, world!') + }) +}) diff --git a/edge-apps/.bun-create/edge-app-template/src/main.ts b/edge-apps/.bun-create/edge-app-template/src/main.ts new file mode 100644 index 000000000..8d7109c8f --- /dev/null +++ b/edge-apps/.bun-create/edge-app-template/src/main.ts @@ -0,0 +1,17 @@ +import { setupTheme, getSetting, signalReady } from '@screenly/edge-apps' + +window.onload = function () { + const message = getSetting('message') || 'Hello, world!' + + // Setup branding colors using the library + setupTheme() + + // Set the message + const messageElement = document.querySelector('#message') + if (messageElement) { + messageElement.textContent = message + } + + // Signal that the app is ready using the library + signalReady() +} diff --git a/edge-apps/.bun-create/edge-app-template/static/css/style.css b/edge-apps/.bun-create/edge-app-template/static/css/style.css new file mode 100644 index 000000000..4154f2ac3 --- /dev/null +++ b/edge-apps/.bun-create/edge-app-template/static/css/style.css @@ -0,0 +1,44 @@ +/* Reset and base styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + font-size: 14px; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + height: 100vh; + width: 100vw; + overflow: hidden; + background-color: var(--theme-color-background, #c9cdd0); +} + +/* CSS Custom Properties */ +:root { + --theme-color-primary: #972eff; + --theme-color-tertiary: #ffffff; + --theme-color-background: #c9cdd0; +} + +/* Main container */ +.container { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + padding: 2rem; +} + +/* Message */ +#message { + font-size: 3rem; + font-weight: 700; + color: var(--theme-color-primary); + text-align: center; +} + diff --git a/edge-apps/.bun-create/edge-app-template/tsconfig.json b/edge-apps/.bun-create/edge-app-template/tsconfig.json new file mode 100644 index 000000000..b96c643dd --- /dev/null +++ b/edge-apps/.bun-create/edge-app-template/tsconfig.json @@ -0,0 +1,16 @@ +{ + "compilerOptions": { + "target": "ES2020", + "module": "ESNext", + "lib": ["ES2020", "DOM"], + "moduleResolution": "bundler", + "strict": true, + "esModuleInterop": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true, + "types": ["bun-types"] + }, + "include": ["src/**/*.ts"], + "exclude": ["node_modules"] +} + From a6533837e26f4eee3cdb80eb601181f1d5e10e73 Mon Sep 17 00:00:00 2001 From: nicomiguelino Date: Thu, 18 Dec 2025 11:23:20 -0800 Subject: [PATCH 2/4] chore: ignore the Edge App template directory when running Super-Linter --- .prettierignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.prettierignore b/.prettierignore index 788b8769f..02058132e 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,4 +1,5 @@ **/*.min.js +edge-apps/.bun-create/ edge-apps/edge-apps-library/ edge-apps/powerbi-legacy/ edge-apps/powerbi-legacy/** From c67d99c9fa420d899862594d45a32e773831ebbc Mon Sep 17 00:00:00 2001 From: nicomiguelino Date: Thu, 18 Dec 2025 13:23:24 -0800 Subject: [PATCH 3/4] fix: adjust app template's styling --- .../.bun-create/edge-app-template/index.html | 4 +- .../.bun-create/edge-app-template/src/main.ts | 3 +- .../edge-app-template/static/css/style.css | 46 +++++++++++++++++-- 3 files changed, 48 insertions(+), 5 deletions(-) diff --git a/edge-apps/.bun-create/edge-app-template/index.html b/edge-apps/.bun-create/edge-app-template/index.html index 5dcbe707d..c53a62d34 100644 --- a/edge-apps/.bun-create/edge-app-template/index.html +++ b/edge-apps/.bun-create/edge-app-template/index.html @@ -9,7 +9,9 @@
-
+
+

+
diff --git a/edge-apps/.bun-create/edge-app-template/src/main.ts b/edge-apps/.bun-create/edge-app-template/src/main.ts index 8d7109c8f..55f255405 100644 --- a/edge-apps/.bun-create/edge-app-template/src/main.ts +++ b/edge-apps/.bun-create/edge-app-template/src/main.ts @@ -7,7 +7,8 @@ window.onload = function () { setupTheme() // Set the message - const messageElement = document.querySelector('#message') + const messageElement = + document.querySelector('#message') if (messageElement) { messageElement.textContent = message } diff --git a/edge-apps/.bun-create/edge-app-template/static/css/style.css b/edge-apps/.bun-create/edge-app-template/static/css/style.css index 4154f2ac3..16a0d8c16 100644 --- a/edge-apps/.bun-create/edge-app-template/static/css/style.css +++ b/edge-apps/.bun-create/edge-app-template/static/css/style.css @@ -34,11 +34,51 @@ body { padding: 2rem; } -/* Message */ +/* Message section card */ +.message-section { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + padding: clamp(1.5rem, 5vw, 24rem); + background: var(--theme-color-primary); + border-radius: 3.5rem; + color: var(--theme-color-tertiary); + box-shadow: 0 2.5rem 5rem rgba(0, 0, 0, 0.25), 0 1rem 2rem rgba(0, 0, 0, 0.15); + position: relative; + overflow: hidden; +} + +/* Subtle background pattern */ +.message-section::before { + content: ''; + position: absolute; + top: -50%; + right: -10%; + width: 40rem; + height: 40rem; + background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%); + border-radius: 50%; + pointer-events: none; +} + +/* Message text */ #message { - font-size: 3rem; + font-size: clamp(1.5rem, 6vw, 12rem); font-weight: 700; - color: var(--theme-color-primary); + line-height: 1.3; + margin: 0; + letter-spacing: -0.01em; + text-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.1); + position: relative; + z-index: 1; text-align: center; } +@media screen and (orientation: portrait) { + #message { + font-size: clamp(1.5rem, 8vh, 12rem); + } +} + From 4ba8a2ed688d5c3cfb787650be04018ff70e3cde Mon Sep 17 00:00:00 2001 From: nicomiguelino Date: Thu, 25 Dec 2025 15:47:31 -0800 Subject: [PATCH 4/4] chore(edge-app-template): add a script for checking formatting rules --- edge-apps/.bun-create/edge-app-template/package.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/edge-apps/.bun-create/edge-app-template/package.json b/edge-apps/.bun-create/edge-app-template/package.json index 55d5e6ed2..0cfb5cb10 100644 --- a/edge-apps/.bun-create/edge-app-template/package.json +++ b/edge-apps/.bun-create/edge-app-template/package.json @@ -13,7 +13,9 @@ "test": "bun test", "test:unit": "bun test", "lint": "tsc --noEmit", - "format": "prettier --write src/ README.md index.html", + "format-common": "prettier src/ README.md index.html", + "format": "bun run format-common --write", + "format:check": "bun run format-common --check", "deploy": "bun run build && screenly edge-app deploy", "prepare": "cd ../edge-apps-library && bun install && bun run build" },