feat(simple-message-app): redesign and refactor

edge-apps/simple-message-app/.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+*.log
+.DS_Store

edge-apps/simple-message-app/.ignore

@@ -0,0 +1 @@
+node_modules/

edge-apps/simple-message-app/README.md

@@ -1,89 +1,53 @@
-# Screenly Simple Message App
+# Simple Message App
 
-A simple message app allows users to display text on a screen, making it a basic tool for digital signage. Users can input and edit both the heading and message body directly from the Screenly dashboard.
-
-![Simple Message App](./static/img/message-app-preview.png)
-
-## tl;dr
-
-```bash
-$ cd edge-apps/simple-message-app
-$ screenly edge-app create \
-    --name simple-message-app \
-    --in-place
-$ screenly edge-app instance create
-$ bun install
-$ bun run deploy
-```
-
-## Development
-
-Install the dependencies for the first run:
+## Getting Started
 
 ```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).
-
-## Tweaking the settings
+## Deployment
 
-### `message_head`
-
-To configure the heading of the message app, utilize the `message_head` settings.
+Create and deploy the Edge App:
 
 ```bash
-$ screenly edge-app setting set message_head='This is message head'
-# A relatively long console output...
-Edge app setting successfully set.
+screenly edge-app create --name simple-message-app --in-place
+bun run deploy
+screenly edge-app instance create
 ```
 
-The message app's heading should be defined as a string in the format: "This is message head".
+## Configuration
+
+The app accepts the following settings via `screenly.yml`:
 
-### `message_body`
+| Setting             | Description                                                                                                                                                                                                                 | Type     | Default              |
+| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------------------- |
+| `enable_analytics`  | Enable or disable Sentry and Google Analytics integrations                                                                                                                                                                  | optional | `true`               |
+| `message_body`      | The main text content displayed in the message body card                                                                                                                                                                    | required | _(default text)_     |
+| `message_header`    | The headline text displayed prominently on the left side                                                                                                                                                                    | required | `Simple Message App` |
+| `override_locale`   | Override the default locale using a [BCP 47](https://developer.mozilla.org/en-US/docs/Web/Localization/Locale_identification_and_negotiation#locale_identifiers) locale tag (e.g., `en`, `en-GB`, `fr`, `fr-CA`, `de`) | optional | `en`                 |
+| `override_timezone` | Override the default timezone using an [IANA time zone identifier](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) (e.g., `Europe/London`, `America/New_York`). Defaults to the system timezone if left blank | optional | -                    |
+| `tag_manager_id`    | Google Tag Manager container ID to enable tracking and analytics                                                                                                                                                            | optional | `GTM-P98SPZ9Z`       |
 
-To define the content of the message app's body, utilize the `message_body` settings.
+## Development
 
 ```bash
-$ screenly edge-app setting set message_body='This is message body'
-# A relatively long console output...
-Edge app setting successfully set.
+bun install      # Install dependencies
+bun run dev      # Start development server
 ```
 
-### `theme`
-
-Specifies the application's theme color and logo style. Available options are 'light' or 'dark'.
-
-This setting determines the overall theme appearance and adjusts the logo accordingly and you can change your default value in the Screenly settings page.
+## Testing
 
 ```bash
-$ screenly edge-app setting set theme='light'
-# A relatively long console output...
-Edge app setting successfully set.
+bun run test:unit
 ```
 
-### `override_timezone`
+## Screenshots
 
-For instance, if you want to clock app to display the current date and time in London,
-run the following command:
+Generate screenshots at all supported resolutions:
 
 ```bash
-$ screenly edge-app setting set override_timezone='Europe/Paris'
-# A relatively long console output...
-Edge app setting successfully set.
-
-$ screenly edge-app setting set override_locale='fr'
-# A relatively long console output...
-Edge app setting successfully set.
+bun run screenshots
 ```
 
-See [this page](https://momentjs.com/) for the list of all possible values for the time zone.
-Alternatively, you can call `moment.locales()`, which returns all the supported locale values.
-
-Setting invalid values for the timezone won't crash the app itself, it'll just fall back to the default time.
+Screenshots are saved to the `screenshots/` directory.