feat(Documentation): migrate to vitepress

Documentation/.vitepress/config.mts

@@ -0,0 +1,32 @@
+import { defineConfig } from 'vitepress';
+import { sidebar } from './sidebar';
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  lang: 'en-US',
+  title: 'VTK.js ',
+  description: 'VTK.js a Visualization Toolkit for the Web',
+  lastUpdated: true,
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    logo: '/logo.svg',
+    siteTitle: '',
+    nav: [
+      { text: 'Docs', link: '/docs/' },
+      { text: 'API', link: '/api/' },
+      { text: 'Examples', link: '/examples/' },
+      { text: 'Datasets', link: 'https://kitware.github.io/vtk-js-datasets/' },
+    ],
+    sidebar: sidebar,
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/Kitware/vtk-js' },
+    ],
+    outline: 'deep',
+    search: {
+      provider: 'local',
+    },
+    footer: {
+      copyright: `© ${new Date().getFullYear()} Kitware Inc.`
+    }
+  },
+});

Documentation/.vitepress/sidebar.ts

@@ -0,0 +1 @@
+// This file is auto-generated by generate-sidebar-config.mjs

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

@@ -0,0 +1,144 @@
+<template>
+  <div class="examples-page">
+    <h2>Examples Gallery</h2>
+    <div class="examples-controls">
+      <input v-model="search" placeholder="Search examples..." />
+      <div class="category-buttons">
+        <button :class="{ selected: !selectedCategory }" @click="selectedCategory = ''">All Categories</button>
+        <button v-for="cat in categories" :key="cat" :class="{ selected: selectedCategory === cat }"
+          @click="selectedCategory = cat">{{ cat }}</button>
+      </div>
+    </div>
+    <div class="examples-list">
+      <div v-for="ex in filteredExamples" :key="ex.title" class="example-card">
+        <a :href="ex.link">
+          <img :src="ex.image" :alt="ex.title" />
+          <h3>{{ ex.title }}</h3>
+          <p class="category">{{ ex.category }}</p>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import examples from '../../../examples/gallery.js'
+
+const search = ref('')
+const selectedCategory = ref('')
+
+const categories = computed(() =>
+  Array.from(new Set(examples.map(e => e.category))).sort()
+)
+
+const filteredExamples = computed(() => {
+  return examples.filter(ex => {
+    const matchesSearch = ex.title.toLowerCase().includes(search.value.toLowerCase())
+    const matchesCategory = !selectedCategory.value || ex.category === selectedCategory.value
+    return matchesSearch && matchesCategory
+  })
+})
+</script>
+
+<style scoped>
+.examples-page {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 auto;
+  padding-top: calc(var(--spacing) * 24);
+  padding-bottom: calc(var(--spacing) * 12);
+  gap: calc(var(--spacing) * 8);
+  max-width: calc(var(--vp-layout-max-width) - 64px);
+  flex-direction: column;
+  align-items: center;
+}
+
+.examples-page h2 {
+  font-size: 2rem;
+  margin-bottom: 1.5rem;
+}
+
+.examples-controls input {
+  padding: 0.3em 1.2em;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: calc(var(--radius));
+  font-size: 1em;
+  width: 400px;
+}
+
+.examples-controls input::placeholder {
+  color: #aaa;
+}
+
+.examples-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  margin-bottom: 1.5rem;
+  justify-content: center;
+  align-items: center;
+}
+
+.category-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.category-buttons button {
+  padding: 0.2em 1em;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: calc(var(--radius));
+  cursor: pointer;
+  font-size: 12px;
+  transition: all 0.2s;
+}
+
+.category-buttons button:hover {
+  background: #171717b3;
+  color: #fff;
+}
+
+.category-buttons button.selected {
+  color: #fff;
+  border-color: #0078d4;
+}
+
+.examples-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.example-card {
+  width: 250px;
+  overflow: hidden;
+  transition: box-shadow 0.2s;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: calc(var(--radius) * 2);
+}
+
+.example-card:hover {
+  border-color: var(--vp-c-brand-1);
+}
+
+.example-card img {
+  width: 100%;
+  height: 140px;
+  object-fit: cover;
+}
+
+.example-card h3 {
+  margin: 0.5rem;
+  font-size: 1.1rem;
+}
+
+.example-card .category {
+  margin: 0.5rem;
+  font-size: 0.9rem;
+}
+</style>

Documentation/.vitepress/theme/index.ts

@@ -0,0 +1,15 @@
+// https://vitepress.dev/guide/custom-theme
+import { h } from 'vue'
+import type { Theme } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import ExamplesGallery from './components/ExamplesGallery.vue'
+
+import './styles/index.css'
+
+export default {
+  extends: DefaultTheme,
+  enhanceApp({ app, router, siteData }) {
+        app.component('ExamplesGallery', ExamplesGallery)
+
+  }
+} satisfies Theme

Documentation/.vitepress/theme/styles/index.css

@@ -0,0 +1,3 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import url('./vars.css');
+@import url('./vitepress.css');

Documentation/.vitepress/theme/styles/vars.css

@@ -0,0 +1,116 @@
+
+
+/* :root {
+  --vp-sidebar-width: 288px;
+} */
+
+/**
+ * Colors
+ **/
+:root {
+  --vp-c-gutter: var(--vp-c-divider);
+  --vp-code-tab-divider: var(--vp-c-divider);
+  --vp-code-copy-code-bg: rgba(125, 125, 125, 0.1);
+  --vp-code-copy-code-hover-bg: rgba(125, 125, 125, 0.2);
+  --vp-c-disabled-bg: rgba(125, 125, 125, 0.2);
+  --vp-code-tab-text-color: var(--vp-c-text-2);
+  --vp-code-tab-active-text-color: var(--vp-c-text-1);
+  --vp-code-tab-hover-text-color: var(--vp-c-text-1);
+  --vp-code-copy-code-active-text: var(--vp-c-text-2);
+  --vp-c-text-dark-3: rgba(56, 56, 56, 0.8);
+  --vp-c-brand-lightest: var(--vp-c-brand-1);
+
+  --vp-layout-top-height : 64px;
+  --vp-nav-logo-height: 50px;
+
+  --vp-c-highlight-bg: var(--vp-c-brand-light);
+  --vp-c-highlight-text: var(--vp-c-bg);
+
+  --vp-c-brand-1: #1098ed;
+
+  --vp-sidebar-bg-color: #ffff;
+  --spacing: 0.25rem;
+  --radius: 0.5rem;
+}
+
+.dark {
+  --vp-c-bg: #0a0a0a;
+  --vp-code-block-bg: #0a0a0a;
+  --vp-c-text-code: #c0cec0;
+  --vp-sidebar-bg-color: #0a0a0a;
+
+  --new : #2e2e32;
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+:root {
+  --vp-button-brand-border: var(--vp-c-brand-light);
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-bg: var(--vp-c-brand-1);
+  --vp-button-brand-hover-border: var(--vp-c-brand-light);
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-light);
+  --vp-button-brand-active-border: var(--vp-c-brand-light);
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    120deg,
+    var(--vp-c-brand-1) 30%,
+    var(--vp-c-brand-next)
+  );
+  --vp-home-hero-image-background-image: linear-gradient(
+    -45deg,
+    var(--vp-c-brand-1) 30%,
+    var(--vp-c-brand-next)
+  );
+  --vp-home-hero-image-filter: blur(80px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(120px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(120px);
+  }
+}
+
+/* Safari has a very bad performance on gradient and filter */
+.browser-safari,
+.browser-firefox {
+  --vp-home-hero-image-filter: "";
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+:root {
+  --vp-custom-block-tip-border: var(--vp-c-brand-1);
+  --vp-custom-block-tip-text: var(--vp-c-brand-darker);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
+}
+
+.dark {
+  --vp-custom-block-tip-border: var(--vp-c-brand-1);
+  --vp-custom-block-tip-text: var(--vp-c-brand-lightest);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand-1) !important;
+}