chore(clock): rewrite the clock app so that it will not use Vue

[nicomiguelino]

PR Type

Enhancement, Tests, Documentation

---

Description

• Add new TypeScript Edge App skeleton

• Implement settings-based message rendering

• Include unit test with Screenly mocks

• Add config, build, and styling assets

---

Diagram Walkthrough

flowchart LR
  settings["screenly.yml settings"] --> mainTS["src/main.ts logic"]
  mainTS --> dom["index.html #message"]
  mainTS --> theme["setupTheme() branding"]
  mainTS --> ready["signalReady()"]
  test["src/main.test.ts"] -- "mock settings" --> mainTS

Loading

File Walkthrough

	Relevant files
Tests	1 files main.test.ts Add unit test using Screenly mocks                                              +17/-0
Enhancement	3 files main.ts Implement message rendering and readiness signal                  +18/-0    style.css Add responsive themed styling for message card                      +84/-0    index.html Provide minimal HTML shell and script hooks                            +18/-0
Configuration changes	5 files .ignore Ignore node_modules in app directory                                          +1/-0      .prettierrc.json Add Prettier formatting configuration                                        +6/-0      package.json Define scripts, deps, and dev workflow                                      +34/-0    screenly.yml Declare app manifest and message setting                                  +16/-0    tsconfig.json Configure TypeScript compiler options                                        +16/-0
Documentation	1 files README.md Document setup, config, deploy, and 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 string (screenly.js?version=1). Consider using a build/version hash or relying on the platform loader to avoid stale caching. <script src="screenly.js?version=1"></script> DOM Availability Using window.onload is fine, but if the script is moved to the head without defer, timing could break. Consider defer in HTML and using DOMContentLoaded to ensure predictable execution. window.onload = function () { const message = getSetting<string>('message') || 'Hello, world!' // Setup branding colors using the library setupTheme() // Set the message const messageElement = document.querySelector<HTMLParagraphElement>('#message') if (messageElement) { messageElement.textContent = message } // Signal that the app is ready using the library signalReady() Workspace Dependency The dependency @screenly/edge-apps points to a local workspace path. Ensure CI/CD and production builds resolve this package or publish/pin a version to avoid deployment failures. "@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",

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	Initialize on DOMContentLoaded Use DOMContentLoaded instead of window.onload so initialization doesn't wait for all assets (e.g., CSS) to load. This shortens time-to-ready and reduces the chance of delayed signalReady() in slow networks. edge-apps/new-clock/src/main.ts [3-18] -window.onload = function () { +document.addEventListener('DOMContentLoaded', () => { const message = getSetting<string>('message') || 'Hello, world!' - // Setup branding colors using the library setupTheme() - // Set the message - const messageElement = - document.querySelector<HTMLParagraphElement>('#message') + const messageElement = document.querySelector<HTMLParagraphElement>('#message') if (messageElement) { messageElement.textContent = message } - // Signal that the app is ready using the library signalReady() -} +}) Suggestion importance[1-10]: 7 __ Why: Switching to DOMContentLoaded is correct and improves readiness timing without changing logic. Moderate impact on perceived performance and reliability of signalReady().	Medium
	Defer external script loading Load the Screenly library script with the defer attribute so it doesn't block parsing and to ensure it executes after the DOM is parsed. This reduces the risk of timing issues with window.onload and improves initial render performance. edge-apps/new-clock/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 is accurate and beneficial to avoid blocking parsing and reduce timing issues with window.onload. It's a minor but valid performance/readiness improvement.	Low
	Prevent text overflow clipping Constrain padding on small screens to prevent content from being squeezed when #message is long. Add a max-width and allow scrolling within the card to avoid text overflow clipping. edge-apps/new-clock/static/css/style.css [38-51] .message-section { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; - padding: clamp(1.5rem, 5vw, 24rem); + padding: clamp(1.5rem, 5vw, 8rem); 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; + overflow: auto; + max-width: 100%; } Suggestion importance[1-10]: 5 __ Why: The change addresses potential overflow by reducing padding and enabling scrolling; it's contextually valid but mostly a UX tweak with limited functional impact.	Low