diff --git a/packages/app/package.json b/packages/app/package.json index 6d8125578a..5a87158ab6 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -36,6 +36,7 @@ }, "dependencies": { "@backstage/app-defaults": "workspace:^", + "@backstage/canon": "workspace:^", "@backstage/catalog-model": "workspace:^", "@backstage/cli": "workspace:^", "@backstage/config": "workspace:^", diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index 7e914bdc9b..d261ec6bef 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -86,6 +86,10 @@ import { UserNotificationSettingsCard, } from '@backstage/plugin-notifications'; +// Canon styles +import '@backstage/canon/css/core.css'; +import '@backstage/canon/css/components.css'; + const app = createApp({ apis, icons: { diff --git a/packages/canon/package.json b/packages/canon/package.json index 2d598682e1..ea8d59dbd5 100644 --- a/packages/canon/package.json +++ b/packages/canon/package.json @@ -35,6 +35,8 @@ "lint": "backstage-cli package lint", "prepack": "backstage-cli package prepack", "postpack": "backstage-cli package postpack", + "postinstall": "yarn setup-dev", + "setup-dev": "bash scripts/setup-dev.sh", "start": "storybook dev -p 6006", "test": "backstage-cli package test" }, diff --git a/packages/canon/scripts/setup-dev.sh b/packages/canon/scripts/setup-dev.sh new file mode 100755 index 0000000000..7f1f4388c4 --- /dev/null +++ b/packages/canon/scripts/setup-dev.sh @@ -0,0 +1,29 @@ +#!/bin/bash + +# Script to create a symlinked css directory for development + +# Exit on error +set -e + +SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)" +PACKAGE_ROOT="$(cd "$SCRIPT_DIR/.." && pwd)" + +# Ensure target CSS directory exists +mkdir -p "$PACKAGE_ROOT/css" + +# Remove any existing content in the css directory +rm -rf "$PACKAGE_ROOT/css/"* + +echo "Creating symlinks for CSS files..." + +# Create symlinks for each CSS file +for cssFile in "$PACKAGE_ROOT/src/css/"*.css; do + filename=$(basename "$cssFile") + ln -sf "../src/css/$filename" "$PACKAGE_ROOT/css/$filename" + echo "- Linked: $filename" +done + +echo "Setup complete. CSS files are now accessible from both paths:" +echo "- @backstage/canon/src/css/..." +echo "- @backstage/canon/css/..." +