save

component-library/.gitea/workflows/deploy.yml

@@ -0,0 +1,48 @@
+name: Deploy Static Site
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build static site
+        run: npm run build
+
+      - name: Setup SSH key
+        run: |
+          mkdir -p ~/.ssh
+          echo "${{ secrets.DEPLOY_SSH_KEY }}" > ~/.ssh/id_ed25519
+          chmod 600 ~/.ssh/id_ed25519
+
+      - name: Deploy static files to server
+        env:
+          DEPLOY_HOST: ${{ secrets.DEPLOY_HOST }}
+          REMOTE_DIR: /home/deploy/projects/ge-bos/static
+        run: |
+          SSH="ssh -i ~/.ssh/id_ed25519 -o StrictHostKeyChecking=accept-new"
+          # Recreate the target dir so removed files don't linger (rsync --delete equivalent)
+          $SSH deploy@"$DEPLOY_HOST" "rm -rf '$REMOTE_DIR' && mkdir -p '$REMOTE_DIR'"
+          # Stream the build output over ssh and extract it on the server
+          tar -czf - -C out . | $SSH deploy@"$DEPLOY_HOST" "tar -xzf - -C '$REMOTE_DIR'"
+
+      - name: Run deployment script
+        run: |
+          ssh -i ~/.ssh/id_ed25519 -o StrictHostKeyChecking=accept-new \
+            deploy@${{ secrets.DEPLOY_HOST }} \
+            "cd /home/deploy/projects/ge-bos && ./deploy.sh"

component-library/src/components/gebos/site-assets.tsx

@@ -1,5 +1,9 @@
 import { cn } from "@/lib/utils"
 
+import barChartManyFewAvif from "@/assets/gebos/bar-chart-many-few.avif"
+import barChartManyFewWebp from "@/assets/gebos/bar-chart-many-few.webp"
+import barChartManyFullAvif from "@/assets/gebos/bar-chart-many-full.avif"
+import barChartManyFullWebp from "@/assets/gebos/bar-chart-many-full.webp"
 import barChartAvif from "@/assets/gebos/bar-chart.avif"
 import barChartWebp from "@/assets/gebos/bar-chart.webp"
 import brandCubeAvif from "@/assets/gebos/brand-cube-render.avif"
@@ -307,6 +311,18 @@ const renders = {
     alt: "",
     matte: "alpha",
   },
+  barChartManyFew: {
+    avif: barChartManyFewAvif,
+    webp: barChartManyFewWebp,
+    alt: "",
+    matte: "alpha",
+  },
+  barChartManyFull: {
+    avif: barChartManyFullAvif,
+    webp: barChartManyFullWebp,
+    alt: "",
+    matte: "alpha",
+  },
   drillTool: {
     avif: drillToolAvif,
     webp: drillToolWebp,

component-library/src/pages/home.tsx

@@ -271,7 +271,7 @@ const audiences = [
 
 const scaleFlows = [
   {
-    vector: vectors.tealBars,
+    render: renders.barChartManyFew,
     label: "1 Gebäude",
     sub: "Ein Eigentümer kann ein Mehrfamilienhaus konfigurieren.",
     steps: [
@@ -281,7 +281,7 @@ const scaleFlows = [
     ],
   },
   {
-    vector: vectors.consumptionRing,
+    render: renders.barChartManyFull,
     label: "50 Gebäude",
     sub: "Eine Hausverwaltung kann denselben Prozess auf viele Gebäude übertragen.",
     steps: [
@@ -440,11 +440,11 @@ export default function HomePage() {
               {scaleFlows.map((flow) => (
                 <div key={flow.label} className="flex flex-col gap-5 p-6 sm:p-8">
                   <div className="flex items-center gap-4">
-                    <img
-                      src={flow.vector}
+                    <AssetRender
+                      render={flow.render}
                       alt=""
-                      className="size-14"
-                      loading="lazy"
+                      className="flex size-14 shrink-0 items-center justify-center"
+                      imgClassName="w-14"
                     />
                     <div>
                       <h3 className="text-xl font-extrabold tracking-tight text-navy">