feat(calendar): redesign calendar apps using plain HTML/CSS/TS + Web Components

edge-apps/calendar/.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+*.log
+.DS_Store
+screenshots/*.png

edge-apps/calendar/.ignore

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

edge-apps/calendar/README.md

@@ -1,62 +1,58 @@
 # Screenly Calendar App
 
-## Prerequisites
-
-- Bun (v1.2.2+)
-- Screenly Edge App CLI (v1.0.3+)
-
 ## Getting Started
 
-We need to initialize the necessary dependencies and build the source
-code first so that a `dist` directory can be created. This is essential as a manifest file
-(which defaults to `screenly.yml`) and an `index.html` file is needed.
-
 ```bash
 bun install
-bun run build
-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
 
+Create and deploy the Edge App:
+
 ```bash
+screenly edge-app create --name calendar --in-place
 bun run deploy
+screenly edge-app instance create
 ```
 
-See [the section on Getting the iCal URL](#getting-the-ical-url) for instructions on how to get the iCal URL.
+Configure the required settings:
 
 ```bash
+screenly edge-app setting set ical_url=<YOUR_ICAL_URL>
 screenly edge-app setting set bypass_cors=true
-screenly edge-app settings set ical_url=<YOUR_ICAL_URL>
 ```
 
+## Configuration
+
+| Setting             | Description                                                                                            | Type     | Default    |
+| ------------------- | ------------------------------------------------------------------------------------------------------ | -------- | ---------- |
+| `ical_url`          | iCal feed URL for your calendar (required)                                                             | secret   | -          |
+| `calendar_mode`     | View mode: `schedule`, `weekly`, or `daily`                                                            | optional | `schedule` |
+| `bypass_cors`       | Enable CORS bypass for iCal URLs that require it                                                       | optional | `true`     |
+| `override_locale`   | Override the default locale (e.g. `fr`, `de`)                                                          | optional | `en`       |
+| `override_timezone` | Override the default timezone (e.g. `America/New_York`). Defaults to the system timezone if left blank | optional | -          |
+| `theme`             | Visual theme: `light` or `dark`                                                                        | optional | `light`    |
+| `display_errors`    | Display errors on screen for debugging purposes                                                        | optional | `false`    |
+| `sentry_dsn`        | Sentry DSN for error tracking and monitoring                                                           | optional | -          |
+
 ## Development
 
-Install the dependencies for the first run:
+Install dependencies:
 
 ```bash
 bun install
 ```
 
-Run the following command to start the development server:
+Start the development server:
 
 ```bash
 bun run dev
 ```
 
-This will start the development server via the [Screenly CLI](https://github.com/Screenly/cli) and opens the app in the browser.
-
-See [the section on Getting the iCal URL](#getting-the-ical-url) for instructions on how to get the iCal URL.
+Update `mock-data.yml` with your `ical_url` and set `bypass_cors` to `true`.
 
-Update `mock-data.yml` and update the values of `ical_url` and `bypass_cors` with the URL of the iCal feed you want to use and `true` respectively.
+See [Getting the iCal URL](#getting-the-ical-url) for instructions.
 
 ## Linting and Formatting
 
@@ -65,17 +61,27 @@ bun run lint
 bun run format
 ```
 
+## Testing
+
+```bash
+bun test
+```
+
+## Screenshots
+
+Generate screenshots at all supported resolutions:
+
+```bash
+bun run screenshots
+```
+
+Screenshots are saved to the `screenshots/` directory.
+
 ## Getting the iCal URL
 
 - Go to your [Google Calendar](https://google.com/calendar).
-- On the left sidebar, under "My calendars", select the calendar you want
-  to use.
-- Click on the three dots on the right side of the calendar and select
-  "Settings and sharing".
-- Scroll down until you see "Secret address in iCal format".
-  Click on the copy button to the right.
-- A "Security warning" will appear, saying that
-  "[you] should not give the secret address to other people".
-  Click "OK" to continue.
-- The secret address will be copied to your clipboard, which you can use
-  into the Edge App settings.
+- On the left sidebar, under "My calendars", select the calendar you want to use.
+- Click on the three dots on the right side of the calendar and select "Settings and sharing".
+- Scroll down until you see "Secret address in iCal format". Click on the copy button to the right.
+- A "Security warning" will appear — click "OK" to continue.
+- The secret address will be copied to your clipboard, which you can use in the Edge App settings.