chore: sync development into main

.github/workflows/initialize-edge-app.yml

@@ -32,9 +32,10 @@ jobs:
       - uses: actions/checkout@v7
         with:
           ref: ${{ inputs.environment == 'production' && 'main' || github.ref }}
-      - uses: Screenly/edge-apps-actions/initialize@v1
+      - uses: Screenly/edge-apps-actions/initialize@f4ccd2bd50db5fb0a5147d287ac03cafe552d29b
         with:
           screenly_api_token: ${{ secrets.SCREENLY_API_TOKEN }}
           edge_app_name: ${{ inputs.edge_app_name }}
           edge_app_title: ${{ inputs.edge_app_title }}
           environment: ${{ inputs.environment }}
+          edge_app_id: ${{ secrets.EDGE_APP_ID || (inputs.environment == 'production' && vars.PRODUCTION_EDGE_APP_ID || (inputs.environment == 'stage' && vars.STAGE_EDGE_APP_ID)) }}

.github/workflows/update-edge-app.yml

@@ -18,11 +18,12 @@ jobs:
     environment: stage
     steps:
       - uses: actions/checkout@v7
-      - uses: Screenly/edge-apps-actions/update@v1
+      - uses: Screenly/edge-apps-actions/update@f4ccd2bd50db5fb0a5147d287ac03cafe552d29b
         with:
           screenly_api_token: ${{ secrets.SCREENLY_API_TOKEN }}
           environment: stage
           delete_missing_settings: 'true'
+          edge_app_id: ${{ secrets.EDGE_APP_ID || vars.STAGE_EDGE_APP_ID }}
 
   deploy-production:
     name: Updating Clock App in production
@@ -31,8 +32,9 @@ jobs:
     environment: production
     steps:
       - uses: actions/checkout@v7
-      - uses: Screenly/edge-apps-actions/update@v1
+      - uses: Screenly/edge-apps-actions/update@f4ccd2bd50db5fb0a5147d287ac03cafe552d29b
         with:
           screenly_api_token: ${{ secrets.SCREENLY_API_TOKEN }}
           environment: production
           delete_missing_settings: 'true'
+          edge_app_id: ${{ secrets.EDGE_APP_ID || vars.PRODUCTION_EDGE_APP_ID }}

.gitignore

@@ -2,6 +2,8 @@ node_modules/
 dist/
 *.log
 .DS_Store
+mock-data.yml
 static/js/*.js
 static/js/*.js.map
 screenshots/*.png
+.env

index.html

@@ -12,29 +12,19 @@
       reference-height="1080"
       orientation="auto"
     >
-      <div id="app">
-        <app-header class="header" show-date></app-header>
-        <main class="content">
-          <section class="current">
-            <div class="city" data-location>--</div>
-            <div class="time-wrapper">
-              <span class="time" data-time>--:--</span>
-              <span class="clock-period" data-period>--</span>
-            </div>
-            <div class="status-row">
-              <span class="date" data-date>--</span>
-              <div class="temperature-wrapper">
-                <img
-                  src="static/images/icons/clear.svg"
-                  alt="weather icon"
-                  class="temperature-icon"
-                  data-weather-icon
-                />
-                <span class="temperature" data-temperature>--°</span>
-              </div>
-            </div>
-          </section>
-        </main>
+      <div class="clock">
+        <p class="clock-place" data-location>--</p>
+        <div class="clock-time">
+          <span class="clock-time-value" data-time>--:--</span>
+          <span class="clock-time-period" data-period></span>
+        </div>
+        <div class="clock-meta">
+          <span data-date>--</span>
+          <span class="clock-weather" data-weather>
+            <img class="clock-weather-icon" alt="" data-weather-icon />
+            <span data-temperature>--°</span>
+          </span>
+        </div>
       </div>
     </auto-scaler>
     <script type="module" src="/src/main.ts"></script>

package.json

@@ -22,11 +22,12 @@
   "dependencies": {},
   "prettier": "./.prettierrc.json",
   "devDependencies": {
-    "@screenly/edge-apps": "^1.0.0",
+    "@screenly/edge-apps": "^1.5.0",
     "@playwright/test": "^1.60.0",
     "@types/bun": "^1.3.14",
     "@types/jsdom": "^28.0.3",
     "bun-types": "^1.3.14",
+    "esbuild": "^0.28.0",
     "jsdom": "^29.1.1",
     "npm-run-all2": "^9.0.1",
     "prettier": "^3.8.3",

screenly.yml

@@ -1,6 +1,5 @@
 ---
 syntax: manifest_v1
-id: 01HKT2K8GVE8P6RE36QFKPG5G1
 description: Screenly Clock Edge App
 icon: https://playground.srly.io/edge-apps/icons/clock.svg
 author: Screenly, Inc.
@@ -43,6 +42,23 @@ settings:
     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/
+  style:
+    type: string
+    default_value: traditional
+    title: Style
+    optional: true
+    help_text:
+      properties:
+        help_text: Select the visual style for the clock.
+        options:
+        - label: Traditional
+          value: traditional
+        - label: Modern
+          value: modern
+        - label: Minimal
+          value: minimal
+        type: select
+      schema_version: 1
   tag_manager_id:
     type: string
     default_value: GTM-P98SPZ9Z