diff --git a/.github/workflows/blueprint-checks.yml b/.github/workflows/blueprint-checks.yml
deleted file mode 100644
index cfc229c86..000000000
--- a/.github/workflows/blueprint-checks.yml
+++ /dev/null
@@ -1,40 +0,0 @@
-name: Blueprint Checks
-
-on:
- push:
- branches:
- - master
- paths:
- - ".github/workflows/blueprint-checks.yml"
- - "edge-apps/blueprint/**"
- pull_request:
- branches:
- - master
- paths:
- - ".github/workflows/blueprint-checks.yml"
- - "edge-apps/blueprint/**"
-
-jobs:
- blueprint-checks:
- name: Blueprint Linting and Formatting
- runs-on: ubuntu-latest
- steps:
- - name: Checkout code
- uses: actions/checkout@v6
-
- - name: Setup Bun
- uses: oven-sh/setup-bun@v2
- with:
- bun-version: 1.2.2
-
- - name: Install dependencies
- working-directory: edge-apps/blueprint
- run: bun install
-
- - name: Run linting
- working-directory: edge-apps/blueprint
- run: bun run lint
-
- - name: Run formatting check
- working-directory: edge-apps/blueprint
- run: bun run format:check
diff --git a/.github/workflows/edge-app-checks.yml b/.github/workflows/edge-app-checks.yml
index 19fe92747..0938690d1 100644
--- a/.github/workflows/edge-app-checks.yml
+++ b/.github/workflows/edge-app-checks.yml
@@ -49,7 +49,7 @@ jobs:
# Function to add app to list if it has build system and isn't already included
add_app_if_valid() {
local app="$1"
- if [[ -n "$app" && "$app" != "helpers" && "$app" != ".bun-create" && "$app" != "blueprint" ]]; then
+ if [[ -n "$app" && "$app" != "helpers" && "$app" != ".bun-create" ]]; then
if [[ -f "edge-apps/$app/package.json" ]]; then
if [[ ! " $CHANGED_APPS " =~ $app ]]; then
CHANGED_APPS="$CHANGED_APPS $app"
@@ -58,35 +58,17 @@ jobs:
fi
}
- # Check if blueprint has changes and extract unique Edge App directories
- BLUEPRINT_CHANGED=false
+ # Extract unique Edge App directories from changed files
CHANGED_APPS=""
for file in "${FILES_ARRAY[@]}"; do
if [[ "$file" == edge-apps/* ]]; then
- # Check for blueprint changes
- if [[ "$file" == edge-apps/blueprint/* ]]; then
- BLUEPRINT_CHANGED=true
- fi
-
# Extract the app name (first directory after edge-apps/)
APP_NAME=$(echo "$file" | cut -d'/' -f2)
add_app_if_valid "$APP_NAME"
fi
done
- # If blueprint changed, add all apps with build systems
- if [[ "$BLUEPRINT_CHANGED" == "true" ]]; then
- echo "Blueprint changed, adding all apps with build systems..."
- # Dynamically discover all Edge Apps with build systems
- for app_dir in edge-apps/*/; do
- if [[ -d "$app_dir" ]]; then
- app=$(basename "$app_dir")
- add_app_if_valid "$app"
- fi
- done
- fi
-
# Remove leading space and set output
CHANGED_APPS="${CHANGED_APPS# }"
echo "changed-apps=$CHANGED_APPS" >> "$GITHUB_OUTPUT"
diff --git a/docs/legacy-edge-apps-library.md b/docs/legacy-edge-apps-library.md
deleted file mode 100644
index ecdc09510..000000000
--- a/docs/legacy-edge-apps-library.md
+++ /dev/null
@@ -1,140 +0,0 @@
-# Edge Apps Library
-
-> [!WARNING]
-> This library (blueprint) will be deprecated soon. Most of the common code, including Vue-specific components, will be merged into the [`@screenly/edge-apps`](https://www.npmjs.com/package/@screenly/edge-apps) package. This library will remain available until all dependent apps have migrated.
-
-This shared library contains a set of utilities that can be used to build Edge Apps alongside the [Vue](https://vuejs.org/) framework.
-
-## General
-
-The library is categorized into the following sections:
-
-1. Reusable Components
-2. Styles
-3. Stores
-
-### Reusable components
-
-This library contains reusable Vue components that can be used to build Edge Apps.
-
-The single-file components (SFCs) are located inside [`edge-apps/blueprint/ts/components`](/edge-apps/blueprint/ts/components). Check the [components documentation](/docs/reusable-components.md) to have an in-depth look at available reusable components and how to use them.
-
-#### Using components
-
-```vue
-
-
-
-
-
Hello, World!
-
-
-```
-
-#### Writing new components
-
-It you want to create a reusable component, you can create a new SFC inside the [`edge-apps/blueprint/ts/components`](/edge-apps/blueprint/ts/components) directory. Create subdirectories if needed.
-
-The component should be named `[ComponentName].vue` and should be exported as `[ComponentName]`.
-
-```vue
-
-
-
-
-
-```
-
-Don't forget to add the following to the [`edge-apps/blueprint/ts/components/index.ts`](/edge-apps/blueprint/ts/components/index.ts) file:
-
-```ts
-// ...
-export * from './[ComponentName]'
-// ...
-```
-
-### Styles
-
-You can use [`scss/base.scss`](/edge-apps/blueprint/scss/base.scss) as a base stylesheet for your Edge App.
-
-```scss
-@use 'blueprint/scss/base.scss' as *;
-```
-
-### Stores
-
-This library also contains utilities that can be used to create [Pinia](https://pinia.vuejs.org/) stores.
-
-> [!NOTE]
-> While it's possible to define local reactive states inside a component using `ref` or `reactive`, it's recommended to use a central store like Pinia to manage the state that is shared across all the components. This prevents the need to manage state in multiple places and do prop drilling.
-
-Edge Apps heavily rely on Screenly metadata and settings. The library contains utilities for creating stores, preventing the need to write the same code repeatedly.
-
-#### Using stores
-
-You can use the `baseSettingsStoreSetup` function and pass it to the `defineStore` function to create a store.
-
-```ts
-import { defineStore } from 'pinia'
-import { baseSettingsStoreSetup, type SettingsStore } from 'blueprint/stores'
-
-const useSettingsStore = defineStore('settings', baseSettingsStoreSetup)
-
-const settingsStore: SettingsStore = useSettingsStore()
-settingsStore.setupTheme()
-```
-
-#### Writing new stores
-
-You can create a new store by creating a new TypeScript file inside the [`edge-apps/blueprint/ts/stores`](/edge-apps/blueprint/ts/stores) directory. Create subdirectories if needed.
-
-The store should be named `[store-name].ts` and should be exported as `[store-name]`.
-
-For example, create a new file called `new-store.ts` and export the store like this:
-
-```ts
-import { ref } from 'vue'
-
-export const newStoreSetup = () => {
- const state1 = ref('')
- const state2 = ref('')
- const function1 = () => {
- // ...
- }
- const function2 = () => {
- // ...
- }
-
- return {
- state1,
- state2,
- function1,
- function2,
- }
-}
-
-export type NewStore = ReturnType
-```
-
-Inside your component, you can use the store like this:
-
-```vue
-
-
-
-
-
{{ newStore.state1 }}
-
-
-```
diff --git a/docs/reusable-components.md b/docs/reusable-components.md
deleted file mode 100644
index 852c42bed..000000000
--- a/docs/reusable-components.md
+++ /dev/null
@@ -1,341 +0,0 @@
-# Reusable Components
-
-> [!WARNING]
-> The Vue-based reusable components in this guide are part of the legacy `blueprint` library. These are deprecated and will be removed once all dependent apps have migrated to the [`@screenly/edge-apps`](https://www.npmjs.com/package/@screenly/edge-apps) package.
-
-Screenly's Edge App library offers a set of reusable Vue components that can be used to build Edge Apps.
-
-If you're not yet familiar with Vue, check out the [Component Basics](https://vuejs.org/guide/essentials/component-basics.html) section of Vue's documentation.
-
-## PrimaryCard
-
-The `PrimaryCard` component is a simple card component that can be used to display content in a card-like format.
-
-Go ahead and open the `App.vue` file and replace the content with the following:
-
-```vue
-
-
-
-
-
-
-
-
-
-```
-
-The default background color of the `PrimaryCard` component is `#972EFF`.
-
-
-
-> [!NOTE]
-> You need to wrap the `PrimaryCard` component in a `div` with the class `main-container` to ensure that the card is inside a gray-colored container that occupies the entire screen.
-
-Adding a text inside the `PrimaryCard` component will align the text to the center of the card.
-
-```vue
-
-
-
-
Hello, world!
-
-
-
-
-
-```
-
-
-
-You can also override the default background color of the `PrimaryCard` component by passing a `bg-color` prop to the component.
-
-> [!NOTE]
-> You can either use `camelCase` or `kebab-case` when defining inline styles.
-> If you're using `kebab-case`, you need to wrap the value in single quotes.
-
-```vue
-
-
-
-
Hello, world!
-
-
-
-```
-
-
-
-## InfoCard
-
-The `InfoCard` is just like the `PrimaryCard` component but it only occupies half of the screen's width (in landscape mode) or height (in portrait mode).
-
-```vue
-
-
-
-
-
-
Hello, world!
-
-
-
-
-
-```
-
-
-
-You can also add another `InfoCard` component so that it sits side-by-side with the first one.
-
-```vue
-
-
-
-
-
-
One makes you larger...
-
-
-
...and another makes you small
-
-
-
-```
-
-
-
-What's unique about the `InfoCard` component is that you can pass an `value` prop to the component.
-
-```vue
-
-
-
-
-
-
-
-
-
-
Hello, world!
-
-
-
-```
-
-
-
-## AnalogClock
-
-The `AnalogClock` component is a simple clock component that can be used to display the current time.
-
-```vue
-
-
-
-
-
-
-
-
-
-```
-
-
-
-> [!NOTE]
-> The `AnalogClock` defaults to the current time in the UTC timezone. In the screenshot above, the time is set to `12:00:00`.
-
-If you want to change the timezone, you can pass a `timezone` prop to the component.
-For example, if you want to display the time in the `America/Los_Angeles` timezone, you can pass `America/Los_Angeles` to the `timezone` prop.
-
-```vue
-
-
-
-
-
-
-
-
-
-```
-
-
-
-Take note that the time is now `05:00:00` (DST) in the screenshot above.
-
-## BrandLogoCard
-
-The `BrandLogoCard` component is a simple card component that can be used to display a custom logo with the text "Powered by Screenly".
-
-You can pass a `logo-src` prop to the component to display a custom logo. Think of the component as a wrapper around the `img` tag.
-
-Let's update the `App.vue` file with the following content:
-
-```vue
-
-
-
-
-
-
- Hello, world!
-
-
-
-
-
-
-
-```
-
-
-
-## DigitalClock
-
-The `DigitalClock` component is a simple clock component that can be used to display the current time.
-
-```vue
-
-
-
-
-
-
-
-
-
-```
-
-
-
-> [!NOTE]
-> The `DigitalClock` defaults to the current time in the UTC timezone. The local defaults to `en`.
-
-You can also pass a `timezone` and a `locale` prop to the component.
-
-```vue
-
-
-
-
-
-
-
-
-
-```
-
-
-
-## DateDisplay
-
-The `DateDisplay` component is a simple date component that can be used to display the current date and day of the week.
-
-Here's an example that shows `DateDisplay` and `AnalogClock` side-by-side.
-
-```vue
-
-
-
-