docs(website): fix website examples

Author: daker

.github/workflows/pr-checks.yml

@@ -24,4 +24,4 @@ jobs:
       - name: Tests must not use test.only
         run: bash .github/workflows/test-only-check.sh
       - name: API docs should generate without error
-        run: npm run doc:generate-api
+        run: npm run docs:generate-api

.github/workflows/publish.yml

@@ -80,15 +80,13 @@ jobs:
         run: npm ci
       - name: Build
         run: npm run build:release
-      - name: Build examples
-        run: npm run build:examples
-      - name: Build API docs
+      - name: Generate API docs
         run: npm run docs:generate-api
-      - name: Build docs examples
+      - name: Generate docs examples
         run: npm run docs:generate-examples
-      - name: Build docs sidebar
+      - name: Generate docs sidebar
         run: npm run docs:generate-sidebar
-      - name: Build docs gallery
+      - name: Generate docs gallery
         run: npm run docs:generate-gallery
       - name: Build docs
         run: npm run docs:build

CONTRIBUTING.md

@@ -3,22 +3,21 @@ import llmstxt from 'vitepress-plugin-llms';
 import { copyOrDownloadAsMarkdownButtons } from 'vitepress-plugin-llms';
 
 import { sidebar } from './sidebar';
+import { BASE_URL, withBase } from './utils';
 
 // https://vitepress.dev/reference/site-config
-const isProd = process.env.NODE_ENV === 'production';
-
 export default defineConfig({
-  base: '/vtk-js',
+  base: BASE_URL,
   lang: 'en-US',
   title: 'VTK.js ',
   description: 'VTK.js a Visualization Toolkit for the Web',
-  srcDir: './content',
   lastUpdated: true,
   ignoreDeadLinks: true,
+  srcExclude: ['**/scripts/**',],
   vite: {
     plugins: [
       llmstxt({
-        ignoreFiles: ['examples/*', 'coverage/*'],
+        ignoreFiles: ['examples/*', 'coverage/*', 'scripts/*'],
       }),
     ],
   },

Documentation/.vitepress/config.mts

@@ -11,8 +11,8 @@
     </div>
     <div class="examples-list">
       <div v-for="ex in filteredExamples" :key="ex.title" class="example-card">
-        <a :href="ex.link" :title="ex.title">
-          <img :src="`/docs/${ex.image}`" :alt="ex.title" />
+        <a :href="withBase(`/examples/${ex.link}`)" :title="ex.title">
+          <img :src="withBase(`/${ex.image}`)" :alt="ex.title" />
           <h3>{{ ex.title }}</h3>
           <p class="category">{{ ex.category }}</p>
         </a>
@@ -22,8 +22,9 @@
 </template>
 
 <script setup>
+import { withBase } from 'vitepress'
 import { ref, computed } from 'vue'
-import examples from '../../../content/examples/gallery.js'
+import examples from '../../../examples/gallery.js'
 
 const search = ref('')
 const selectedCategory = ref('')
@@ -84,6 +85,8 @@ const filteredExamples = computed(() => {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
+  align-content: center;
+  justify-content: center;
 }
 
 .category-buttons button {
@@ -136,8 +139,8 @@ const filteredExamples = computed(() => {
   margin: 0.5rem;
   font-size: 1.1rem;
   text-overflow: ellipsis;
-  overflow:hidden;
-  white-space:nowrap;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 .example-card .category {

Documentation/.vitepress/theme/components/ExamplesGallery.vue

@@ -0,0 +1,7 @@
+export const BASE_URL: string = '/vtk-js/'
+
+export const withBase = (path: string): string => `${ BASE_URL + path }`.replace(/\/+/g, '/')
+
+export const isProd: boolean = process.env.NODE_ENV === 'production'
+
+export const isDev: boolean = !isProd