Add preview PR deployments

.gitattributes

@@ -0,0 +1,2 @@
+*.png filter=lfs diff=lfs merge=lfs -text
+*.ico filter=lfs diff=lfs merge=lfs -text

.github/workflows/pages.yaml

@@ -7,19 +7,36 @@ on:
   pull_request:
     branches:
       - main
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - closed
   workflow_dispatch:
 
 permissions:
   contents: write # to write the built page to the branch
+  pull-requests: write # to leave a comment with the preview URL
 
 concurrency:
-  group: pages
+  # set separate concurrency groups for main and PR branches
+  group: ${{ github.event_name == 'pull_request' && format('pages-preview-{0}', github.event.pull_request.number) || 'pages-main' }}
   cancel-in-progress: false
 
 jobs:
 
+  delete-preview:
+    if: github.event_name == 'pull_request' && github.event.action == 'closed'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: rossjrw/pr-preview-action@v1
+        with:
+          action: remove
+
   build:
     runs-on: ubuntu-latest
+    # only build on main or if the PR is open
+    if: github.ref == 'refs/heads/main' || (github.event_name == 'pull_request' && github.event.action != 'closed')
     steps:
       - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
         with:
@@ -29,16 +46,21 @@ jobs:
           node-version: 22
           cache: npm
 
-      - uses: actions/configure-pages@983d7736d9b0ae728b81ab479565c72886d7745b # v5
+      - id: configure
+        uses: actions/configure-pages@983d7736d9b0ae728b81ab479565c72886d7745b # v5
 
       - run: npm ci
       - run: npm run build
+        env:
+          PAGES_BASE: ${{ github.event_name == 'pull_request' && format('pr-preview/pr-{0}', github.event.pull_request.number) || '/' }}
 
+      # deploy the PR to a preview URL
       - uses: rossjrw/pr-preview-action@9f77b1d057b494e662c50b8ca40ecc63f21e0887 # v1
         if: ${{ github.event_name == 'pull_request' }}
         with:
           source-dir: .vitepress/dist
 
+      # deploy the build to GitHub Pages
       - uses: JamesIves/github-pages-deploy-action@6c2d9db40f9296374acc17b90404b6e8864128c8 # v4
         if: ${{ (github.event_name == 'push' || github.event_name == 'workflow_dispatch') && github.ref == 'refs/heads/main' }}
         with:

.vitepress/config.mts

@@ -4,7 +4,11 @@ import { fileURLToPath, URL } from 'node:url'
 // https://vitepress.dev/reference/site-config
 export default withMermaid({
   title: "Platform Mesh",
+  head: [
+    ['link', { rel: 'icon', href: '/favicon.ico' }]
+  ],
 
+  base: process.env.PAGES_BASE ? '/' + process.env.PAGES_BASE : '/',
 
   description: "Platform Mesh - Building upon the Kubernetes API & Resource Model",
 
@@ -14,13 +18,13 @@ export default withMermaid({
         {
           find: /^.*\/VPFooter\.vue$/,
           replacement: fileURLToPath(
-              new URL('./theme/components/VPFooter.vue', import.meta.url)
+              new URL('theme/components/VPFooter.vue', import.meta.url)
           )
         },
         {
           find: /^.*\/VPFeature\.vue$/,
           replacement: fileURLToPath(
-              new URL('./theme/components/VPFeature.vue', import.meta.url)
+              new URL('theme/components/VPFeature.vue', import.meta.url)
           )
         },
       ]
@@ -32,16 +36,15 @@ export default withMermaid({
     // https://vitepress.dev/reference/default-theme-config
     nav: [
       { text: 'Home', link: '/' },
-      {text: 'Overview', link: '/overview'},
+      { text: 'Overview', link: '/overview' },
       { text: 'Scenarios', link: '/scenarios' }
     ],
 
     logo: {
-      src: './assets/pm_logo.svg',
+      src: 'pm_logo.svg',
       width: 24,
       height: 24
     },
-
 
     outline: [2, 3, 4, 5],
 
@@ -63,7 +66,7 @@ export default withMermaid({
             ]
         }
       ],
-      
+
         '/scenarios': {
             test: 'Scenarios',
             items:  [
@@ -72,13 +75,12 @@ export default withMermaid({
             ],
         },
 
-
     },
-
 
     socialLinks: [
       { icon: 'github', link: 'https://github.com/platform-mesh' }
     ]
+
   },
- 
+
 })

.vitepress/theme/components/VPFooter.vue

@@ -29,8 +29,6 @@ Copied and adapted from: https://github.com/vuejs/vitepress/blob/828000099843c98
 <script setup lang="ts">
 import { useSidebar } from 'vitepress/theme';
 import { withBase, useData } from "vitepress";
-import euSupportImg from '../assets/eu-support.png'
-import neonephosLogo from '../assets/neonephos_logo.svg'
 
 const { hasSidebar } = useSidebar()
 const { isDark, title } = useData()
@@ -45,7 +43,7 @@ const projectName = title || 'PlatformMesh'
         <div class="funding-image">
           <div class="funding-image-container">
             <div class="funding-image-bg"></div>
-            <img :src="euSupportImg" alt="EU and German government funding logos" class="funding-image-src">
+            <img src="/eu-support.png" alt="EU and German government funding logos" class="funding-image-src">
           </div>
         </div>
         <div class="funding-text">
@@ -68,16 +66,16 @@ const projectName = title || 'PlatformMesh'
         </div>
 
       </div>
-      
+
       <!-- Neonephos Logo Section -->
       <div class="neonephos-logos">
         <a href="https://neonephos.org/" target="_blank" rel="noopener noreferrer" class="neonephos-link">
-          <img 
-            :src="neonephosLogo" 
-            alt="Neonephos Logo" 
+          <img
+            src="/neonephos_logo.svg"
+            alt="Neonephos Logo"
             class="neonephos-logo"
           >
-         
+
         </a>
       </div>
 
@@ -265,9 +263,9 @@ const projectName = title || 'PlatformMesh'
   .footer-columns {
     justify-content: flex-start;
   }
-  
+
   .neonephos-logo {
     max-height: 50px;
   }
 }
-</style>
+</style>

index.md

@@ -7,7 +7,7 @@ hero:
   text:  "Building upon the Kubernetes API & Resource Model"
   tagline: "Discover, order, and orchestrate services across any provider through the beloved kubectl ❤️"
   image:
-    src: './assets/pm_logo.svg'
+    src: '/pm_logo.svg'
     alt: 'Platform Mesh'
   actions:
     - theme: brand