Skip to content

feat(asset-metadata): migrate and redesign asset metadata app #776

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
nicomiguelino wants to merge 6 commits into
base: master
Choose a base branch
from
Draft

feat(asset-metadata): migrate and redesign asset metadata app #776

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
479c0f8
chore(asset-metadata): rename existing app directory to asset-metadat…
nicomiguelino Apr 8, 2026
d523707
feat(asset-metadata): scaffold and implement migrated app
nicomiguelino Apr 8, 2026
f279d27
feat(asset-metadata): add app-header to layout
nicomiguelino Apr 9, 2026
416c6dd
feat(asset-metadata): apply glassmorphic design with background image
nicomiguelino Apr 9, 2026
d3f2ee5
chore(asset-metadata): swap background image to sunny variant
nicomiguelino Apr 9, 2026
132c08c
fix(asset-metadata): prevent broken image request for brand logo
nicomiguelino Apr 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 ...ps/asset-metadata/.vscode/extensions.json → ...sset-metadata-old/.vscode/extensions.json
View file
Open in desktop
File renamed without changes.
82 changes: 82 additions & 0 deletions edge-apps/asset-metadata-old/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
# Screenly Asset Metadata

![Screenly Asset Metadata App Preview](static/images/asset-metadata-app-preview.jpg)

This Edge App displays the screen metadata - Hostname, Screen Name, Position , Hardware name, Firmware version, Labels, etc.

## Prerequisites

- [Bun (1.2.2+)](https://bun.sh/docs/installation)
- [Screenly Edge App CLI (v1.0.3+)](https://github.com/Screenly/cli?tab=readme-ov-file#installation)

## Getting Started

```bash
bun install
screenly edge-app create \
--name=EDGE_APP_NAME \
--in-place
```

## Create an Edge App Instance via CLI

```bash
screenly edge-app instance create --name=EDGE_APP_INSTANCE_NAME
```

## Deployment

```bash
bun run deploy
```

> [!NOTE]
> The `deploy` command takes care of building the app as well.

## Development

Install the dependencies for the first run:

```bash
bun install
```

Run the development environment with a single command:

```bash
bun run dev
```

This will build in watch mode and start the development server via [Screenly CLI](https://github.com/Screenly/cli).

## Unit Tests

To run unit tests:

```bash
bun run test:unit
```

Press `q` to quit the test runner.

## E2E Tests

Install dependencies for the first run:

```bash
bun run playwright install-deps
bun run playwright install
```

To run E2E tests:

```bash
bun run test:e2e
```

### Linting and Formatting

```bash
bun run lint
bun run format
```
1,007 changes: 1,007 additions & 0 deletions edge-apps/asset-metadata-old/bun.lock
View file
Open in desktop

Large diffs are not rendered by default.

0 edge-apps/asset-metadata/e2e/tsconfig.json → ...apps/asset-metadata-old/e2e/tsconfig.json
View file
Open in desktop
File renamed without changes.
0 edge-apps/asset-metadata/e2e/vue.spec.ts → edge-apps/asset-metadata-old/e2e/vue.spec.ts
View file
Open in desktop
File renamed without changes.
0 edge-apps/asset-metadata/eslint.config.ts → ...-apps/asset-metadata-old/eslint.config.ts
View file
Open in desktop
File renamed without changes.
13 changes: 13 additions & 0 deletions edge-apps/asset-metadata-old/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Edge App</title>
</head>
<body>
<div id="app"></div>
<script src="screenly.js?version=1"></script>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
62 changes: 62 additions & 0 deletions edge-apps/asset-metadata-old/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
{
"name": "asset-metadata",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"generate-mock-data": "screenly edge-app run --generate-mock-data",
"build:dev": "vite build --mode=development",
"build:dev:watch": "vite build --mode=development --watch",
"predev": "bun run generate-mock-data && bun run build:dev",
"dev": "run-p build:dev:watch dev:edge",
"dev:edge": "screenly edge-app run --path=dist/",
"dev:test": "vite --mode test",
"build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"test:unit": "vitest",
"test:e2e": "playwright test",
"build-only": "vite build",
"type-check": "vue-tsc --build",
"lint": "eslint . --fix",
"format": "prettier --write src/ README.md index.html",
"format:check": "prettier --check src/ README.md index.html",
"predeploy": "bun run build",
"deploy": "screenly edge-app deploy --path dist/",
"clear-mock-data": "rimraf mock-data.yml",
"prepare": "cd ../blueprint && bun install"
},
"prettier": "../.prettierrc.json",
"dependencies": {
"@typescript-eslint/typescript-estree": "^8.58.0",
"pinia": "^3.0.4",
"vue": "^3.5.32",
"yaml": "^2.8.3"
},
"devDependencies": {
"@playwright/test": "^1.59.1",
"@tsconfig/node22": "^22.0.5",
"@types/jsdom": "^28.0.1",
"@types/node": "^25.5.2",
"@vitejs/plugin-vue": "^6.0.5",
"@vitest/eslint-plugin": "^1.6.14",
"@vue/eslint-config-prettier": "^10.2.0",
"@vue/eslint-config-typescript": "^14.7.0",
"@vue/test-utils": "^2.4.6",
"@vue/tsconfig": "^0.9.1",
"eslint": "^10.2.0",
"eslint-plugin-playwright": "^2.10.1",
"eslint-plugin-vue": "~10.8.0",
"jiti": "^2.6.1",
"jsdom": "^29.0.1",
"npm-run-all2": "^8.0.4",
"prettier": "3.8.1",
"rimraf": "^6.1.3",
"sass-embedded": "^1.99.0",
"typescript": "~6.0.2",
"vite": "^8.0.5",
"vite-plugin-static-copy": "^4.0.1",
"vite-plugin-vue-devtools": "^8.1.1",
"vitest": "^4.1.2",
"vue-tsc": "^3.2.6"
}
}
0 ...-apps/asset-metadata/playwright.config.ts → ...s/asset-metadata-old/playwright.config.ts
View file
Open in desktop
File renamed without changes.
0 edge-apps/asset-metadata/public/favicon.ico → ...pps/asset-metadata-old/public/favicon.ico
View file
Open in desktop
File renamed without changes.
40 changes: 40 additions & 0 deletions edge-apps/asset-metadata-old/screenly.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
---
syntax: manifest_v1
id: 01JH83JQZ2FX46WG5H7FFEAGFE
description: Displays the screen metadata like position on Google map, coordinates, hostname, etc.
icon: https://playground.srly.io/edge-apps/asset-metadata/static/images/icon.svg
author: Screenly, Inc.
categories:
- Utilities
ready_signal: true
settings:
enable_analytics:
type: string
default_value: 'true'
title: enable_analytics
optional: true
help_text: |
Toggle to enable or disable Sentry and Google Analytics integrations.
is_global: true
sentry_dsn:
type: secret
title: Sentry Client Key
optional: true
help_text: |
Enter your Sentry DSN to enable error tracking.
is_global: true
tag_manager_id:
type: string
default_value: ''
title: 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 app ('light' or 'dark').
40 changes: 40 additions & 0 deletions edge-apps/asset-metadata-old/screenly_qc.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
---
syntax: manifest_v1
id: 01JZHRAN99KQN84VTZ55EJP3SP
description: Displays the screen metadata like position on Google map, coordinates, hostname, etc.
icon: https://playground.srly.io/edge-apps/asset-metadata/static/images/icon.svg
author: Screenly, Inc.
categories:
- Utilities
ready_signal: true
settings:
enable_analytics:
type: string
default_value: 'true'
title: enable_analytics
optional: true
help_text: |
Toggle to enable or disable Sentry and Google Analytics integrations.
is_global: true
sentry_dsn:
type: secret
title: Sentry Client Key
optional: true
help_text: |
Enter your Sentry DSN to enable error tracking.
is_global: true
tag_manager_id:
type: string
default_value: ''
title: 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 app ('light' or 'dark').
0 edge-apps/asset-metadata/src/App.vue → edge-apps/asset-metadata-old/src/App.vue
View file
Open in desktop
File renamed without changes.
0 ...adata/src/assets/font/Aeonik-Regular.woff → ...a-old/src/assets/font/Aeonik-Regular.woff
View file
Open in desktop
File renamed without changes.
0 ...data/src/assets/font/Aeonik-Regular.woff2 → ...-old/src/assets/font/Aeonik-Regular.woff2
View file
Open in desktop
File renamed without changes.
0 ...-apps/asset-metadata/src/assets/main.scss → ...s/asset-metadata-old/src/assets/main.scss
View file
Open in desktop
File renamed without changes.
0 ...data/src/components/__tests__/App.spec.ts → ...-old/src/components/__tests__/App.spec.ts
View file
Open in desktop
File renamed without changes.
11 changes: 11 additions & 0 deletions edge-apps/asset-metadata-old/src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import '@/assets/main.scss'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)

app.use(createPinia())

app.mount('#app')
0 edge-apps/asset-metadata/src/test-setup.ts → ...apps/asset-metadata-old/src/test-setup.ts
View file
Open in desktop
File renamed without changes.
0 ...tic/images/asset-metadata-app-preview.jpg → ...tic/images/asset-metadata-app-preview.jpg
View file
Open in desktop
File renamed without changes
0 ...pps/asset-metadata/static/images/icon.svg → ...asset-metadata-old/static/images/icon.svg
View file
Open in desktop
File renamed without changes
0 edge-apps/asset-metadata/tsconfig.app.json → ...apps/asset-metadata-old/tsconfig.app.json
View file
Open in desktop
File renamed without changes.
14 changes: 14 additions & 0 deletions edge-apps/asset-metadata-old/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"files": [],
"references": [
{
"path": "./tsconfig.node.json"
},
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.vitest.json"
}
]
}
0 edge-apps/asset-metadata/tsconfig.node.json → ...pps/asset-metadata-old/tsconfig.node.json
View file
Open in desktop
File renamed without changes.
0 ...-apps/asset-metadata/tsconfig.vitest.json → ...s/asset-metadata-old/tsconfig.vitest.json
View file
Open in desktop
File renamed without changes.
0 edge-apps/asset-metadata/vite.config.ts → edge-apps/asset-metadata-old/vite.config.ts
View file
Open in desktop
File renamed without changes.
0 edge-apps/asset-metadata/vitest.config.ts → ...-apps/asset-metadata-old/vitest.config.ts
View file
Open in desktop
File renamed without changes.
5 changes: 5 additions & 0 deletions edge-apps/asset-metadata/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
node_modules/
dist/
*.log
.DS_Store
screenshots/*.png
1 change: 1 addition & 0 deletions edge-apps/asset-metadata/.ignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules/
70 changes: 24 additions & 46 deletions edge-apps/asset-metadata/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,82 +1,60 @@
# Screenly Asset Metadata
# Asset Metadata

![Screenly Asset Metadata App Preview](static/images/asset-metadata-app-preview.jpg)

This Edge App displays the screen metadata - Hostname, Screen Name, Position , Hardware name, Firmware version, Labels, etc.

## Prerequisites

- [Bun (1.2.2+)](https://bun.sh/docs/installation)
- [Screenly Edge App CLI (v1.0.3+)](https://github.com/Screenly/cli?tab=readme-ov-file#installation)
Displays screen metadata on Screenly digital signage players, including hostname, screen name, hardware type, firmware version, GPS coordinates, and assigned labels.

## Getting Started

```bash
bun install
screenly edge-app create \
--name=EDGE_APP_NAME \
--in-place
```

## Create an Edge App Instance via CLI
## Development

```bash
screenly edge-app instance create --name=EDGE_APP_INSTANCE_NAME
bun run dev
```

## Deployment
## Building

```bash
bun run deploy
bun run build
```

> [!NOTE]
> The `deploy` command takes care of building the app as well.

## Development

Install the dependencies for the first run:
## Testing

```bash
bun install
bun run test
```

Run the development environment with a single command:
## Linting & Formatting

```bash
bun run dev
bun run lint
bun run format
```

This will build in watch mode and start the development server via [Screenly CLI](https://github.com/Screenly/cli).

## Unit Tests
## Deployment

To run unit tests:
Create and deploy the Edge App:

```bash
bun run test:unit
screenly edge-app create --name asset-metadata --in-place
bun run deploy
screenly edge-app instance create
```

Press `q` to quit the test runner.

## E2E Tests
## Screenshots

Install dependencies for the first run:
Generate screenshots at all supported resolutions:

```bash
bun run playwright install-deps
bun run playwright install
bun run screenshots
```

To run E2E tests:

```bash
bun run test:e2e
```
Screenshots are saved to the `screenshots/` directory.

### Linting and Formatting
## Configuration

```bash
bun run lint
bun run format
```
| Setting | Description | Type | Default |
| ------- | ----------------------------------------- | -------- | ------- |
| `theme` | Visual theme for the app (`light`/`dark`) | required | `light` |
Loading