Skip to content

Commit fe574fa

Browse files
dakerjourdain
daker
authored and
jourdain
committed
docs(website): replace old website by vitepress
1 parent 04d7200 commit fe574fa

File tree

74 files changed

+8416
-3826
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

74 files changed

+8416
-3826
lines changed

‎.github/workflows/publish.yml‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -83,12 +83,20 @@ jobs:
8383
- name: Build examples
8484
run: npm run build:examples
8585
- name: Build API docs
86-
run: npm run doc:generate-api
86+
run: npm run docs:generate-api
87+
- name: Build docs examples
88+
run: npm run docs:generate-examples
89+
- name: Build docs sidebar
90+
run: npm run docs:generate-sidebar
91+
- name: Build docs gallery
92+
run: npm run docs:generate-gallery
8793
- name: Build docs
88-
run: npm run doc:minified
94+
run: npm run docs:build
95+
- name: Build docs examples
96+
run: npm run docs:build-examples
8997
- name: Upload docs as a Pages artifact
9098
uses: actions/upload-pages-artifact@v3
9199
with:
92-
path: ./Documentation/build-tmp/public/
100+
path: ./Documentation/.vitepress/dist/
93101
- name: Deploy docs
94102
uses: actions/deploy-pages@v4

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,6 @@ coverage/
1010
.env
1111
Utilities/TestResults
1212
.idea
13+
Documentation/.vitepress/cache/
14+
Documentation/.vitepress/dist/
15+

‎Documentation/.gitignore‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎Documentation/.vitepress/config.mts‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { defineConfig } from 'vitepress';
2+
import llmstxt from "vitepress-plugin-llms";
3+
import { copyOrDownloadAsMarkdownButtons } from 'vitepress-plugin-llms'
4+
5+
import { sidebar } from './sidebar';
6+
7+
// https://vitepress.dev/reference/site-config
8+
const isProd = process.env.NODE_ENV === 'production';
9+
10+
export default defineConfig({
11+
base: isProd ? '/vtk-js/' : '/',
12+
lang: 'en-US',
13+
title: 'VTK.js ',
14+
description: 'VTK.js a Visualization Toolkit for the Web',
15+
srcDir: './content',
16+
lastUpdated: true,
17+
ignoreDeadLinks: true,
18+
vite: {
19+
plugins: [llmstxt({
20+
ignoreFiles: [
21+
'examples/*',
22+
'coverage/*',
23+
]
24+
})],
25+
},
26+
themeConfig: {
27+
// https://vitepress.dev/reference/default-theme-config
28+
logo: '/logo-wide.svg',
29+
siteTitle: '',
30+
nav: [
31+
{ text: 'Docs', link: '/docs/' },
32+
{ text: 'API', link: '/api/' },
33+
{ text: 'Examples', link: '/examples/' },
34+
{ text: 'Datasets', link: 'https://kitware.github.io/vtk-js-datasets/' },
35+
],
36+
sidebar: sidebar,
37+
socialLinks: [
38+
{ icon: 'github', link: 'https://github.com/Kitware/vtk-js' },
39+
],
40+
outline: 'deep',
41+
search: {
42+
provider: 'local',
43+
},
44+
footer: {
45+
copyright: `© ${new Date().getFullYear()} Kitware Inc.`,
46+
}
47+
},
48+
markdown: {
49+
config(md) {
50+
md.use(copyOrDownloadAsMarkdownButtons)
51+
}
52+
}
53+
});

‎Documentation/.vitepress/sidebar.ts‎

Whitespace-only changes.

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

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<template>
2+
<div class="examples-page">
3+
<h2>Examples Gallery</h2>
4+
<div class="examples-controls">
5+
<input v-model="search" placeholder="Search examples..." />
6+
<div class="category-buttons">
7+
<button :class="{ selected: !selectedCategory }" @click="selectedCategory = ''">All Categories</button>
8+
<button v-for="cat in categories" :key="cat" :class="{ selected: selectedCategory === cat }"
9+
@click="selectedCategory = cat">{{ cat }}</button>
10+
</div>
11+
</div>
12+
<div class="examples-list">
13+
<div v-for="ex in filteredExamples" :key="ex.title" class="example-card">
14+
<a :href="ex.link" :title="ex.title">
15+
<img :src="`/docs/${ex.image}`" :alt="ex.title" />
16+
<h3>{{ ex.title }}</h3>
17+
<p class="category">{{ ex.category }}</p>
18+
</a>
19+
</div>
20+
</div>
21+
</div>
22+
</template>
23+
24+
<script setup>
25+
import { ref, computed } from 'vue'
26+
import examples from '../../../content/examples/gallery.js'
27+
28+
const search = ref('')
29+
const selectedCategory = ref('')
30+
31+
const categories = computed(() =>
32+
Array.from(new Set(examples.map(e => e.category))).sort()
33+
)
34+
35+
const filteredExamples = computed(() => {
36+
return examples.filter(ex => {
37+
const matchesSearch = ex.title.toLowerCase().includes(search.value.toLowerCase())
38+
const matchesCategory = !selectedCategory.value || ex.category === selectedCategory.value
39+
return matchesSearch && matchesCategory
40+
})
41+
})
42+
</script>
43+
44+
<style scoped>
45+
.examples-page {
46+
display: flex;
47+
justify-content: space-between;
48+
margin: 0 auto;
49+
padding-top: calc(var(--spacing) * 24);
50+
padding-bottom: calc(var(--spacing) * 12);
51+
gap: calc(var(--spacing) * 8);
52+
max-width: calc(var(--vp-layout-max-width) - 64px);
53+
flex-direction: column;
54+
align-items: center;
55+
}
56+
57+
.examples-page h2 {
58+
font-size: 2rem;
59+
margin-bottom: 1.5rem;
60+
}
61+
62+
.examples-controls input {
63+
padding: 0.3em 1.2em;
64+
border: 1px solid var(--vp-c-divider);
65+
border-radius: calc(var(--radius));
66+
font-size: 1em;
67+
width: 400px;
68+
}
69+
70+
.examples-controls input::placeholder {
71+
color: #aaa;
72+
}
73+
74+
.examples-controls {
75+
display: flex;
76+
flex-direction: column;
77+
gap: 1.5rem;
78+
margin-bottom: 1.5rem;
79+
justify-content: center;
80+
align-items: center;
81+
}
82+
83+
.category-buttons {
84+
display: flex;
85+
flex-wrap: wrap;
86+
gap: 0.5rem;
87+
}
88+
89+
.category-buttons button {
90+
padding: 0.2em 1em;
91+
border: 1px solid var(--vp-c-divider);
92+
border-radius: 0.375rem;
93+
cursor: pointer;
94+
font-size: 0.875rem;
95+
font-weight: 500;
96+
transition: all 0.2s;
97+
}
98+
99+
.category-buttons button:hover {
100+
background-color: color-mix(in oklab, var(--primary) 90%, transparent);
101+
color: var(--primary-foreground);
102+
}
103+
104+
.category-buttons button.selected {
105+
background-color: color-mix(in oklab, var(--primary) 90%, transparent);
106+
color: var(--primary-foreground);
107+
}
108+
109+
.examples-list {
110+
display: flex;
111+
flex-wrap: wrap;
112+
gap: 1.5rem;
113+
flex-direction: row;
114+
justify-content: center;
115+
align-items: center;
116+
}
117+
118+
.example-card {
119+
width: 250px;
120+
overflow: hidden;
121+
border: 1px solid var(--vp-c-divider);
122+
border-radius: 0.375rem;
123+
}
124+
125+
.example-card:hover {
126+
border-color: var(--vp-c-brand-1);
127+
}
128+
129+
.example-card img {
130+
width: 100%;
131+
height: 140px;
132+
object-fit: cover;
133+
}
134+
135+
.example-card h3 {
136+
margin: 0.5rem;
137+
font-size: 1.1rem;
138+
text-overflow: ellipsis;
139+
overflow:hidden;
140+
white-space:nowrap;
141+
}
142+
143+
.example-card .category {
144+
margin: 0.5rem;
145+
font-size: 0.9rem;
146+
}
147+
</style>

‎Documentation/.vitepress/theme/index.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// https://vitepress.dev/guide/custom-theme
2+
import type { Theme } from 'vitepress'
3+
import DefaultTheme from 'vitepress/theme'
4+
import googleAnalytics from "vitepress-plugin-google-analytics";
5+
import CopyOrDownloadAsMarkdownButtons from 'vitepress-plugin-llms/vitepress-components/CopyOrDownloadAsMarkdownButtons.vue'
6+
7+
import ExamplesGallery from './components/ExamplesGallery.vue'
8+
9+
import './styles/index.css'
10+
11+
export default {
12+
extends: DefaultTheme,
13+
enhanceApp({ app, router, siteData }) {
14+
app.component('ExamplesGallery', ExamplesGallery),
15+
app.component('CopyOrDownloadAsMarkdownButtons', CopyOrDownloadAsMarkdownButtons)
16+
googleAnalytics({
17+
id: "G-5XH2Z0Y9LQ",
18+
});
19+
}
20+
} satisfies Theme

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@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');
2+
@import url('./vars.css');
3+
@import url('./vitepress.css');

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

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
:root {
2+
--spacing: 0.25rem;
3+
--radius: 0.5rem;
4+
--background: oklch(1 0 0);
5+
--foreground: oklch(0.145 0 0);
6+
--card: oklch(1 0 0);
7+
--card-foreground: oklch(0.145 0 0);
8+
--popover: oklch(1 0 0);
9+
--popover-foreground: oklch(0.145 0 0);
10+
--primary: oklch(0.205 0 0);
11+
--primary-foreground: oklch(0.985 0 0);
12+
--secondary: oklch(0.97 0 0);
13+
--secondary-foreground: oklch(0.205 0 0);
14+
--muted: oklch(0.97 0 0);
15+
--muted-foreground: oklch(0.556 0 0);
16+
--accent: oklch(0.97 0 0);
17+
--accent-foreground: oklch(0.205 0 0);
18+
--destructive: oklch(0.577 0.245 27.325);
19+
--border: oklch(0.922 0 0);
20+
--input: oklch(0.922 0 0);
21+
--ring: oklch(0.708 0 0);
22+
--chart-1: oklch(0.646 0.222 41.116);
23+
--chart-2: oklch(0.6 0.118 184.704);
24+
--chart-3: oklch(0.398 0.07 227.392);
25+
--chart-4: oklch(0.828 0.189 84.429);
26+
--chart-5: oklch(0.769 0.188 70.08);
27+
--sidebar: oklch(0.985 0 0);
28+
--sidebar-foreground: oklch(0.145 0 0);
29+
--sidebar-primary: oklch(0.205 0 0);
30+
--sidebar-primary-foreground: oklch(0.985 0 0);
31+
--sidebar-accent: oklch(0.97 0 0);
32+
--sidebar-accent-foreground: oklch(0.205 0 0);
33+
--sidebar-border: oklch(0.922 0 0);
34+
--sidebar-ring: oklch(0.708 0 0);
35+
36+
--vp-c-bg: var(--background);
37+
--vp-c-bg-alt: var(--sidebar);
38+
--vp-c-bg-elv: var(--popover);
39+
--vp-c-bg-soft: var(--secondary);
40+
41+
--vp-c-text-1: var(--foreground);
42+
--vp-c-brand-1: var(--primary);
43+
--vp-c-default-1: var(--secondary);
44+
--vp-c-default-2: var(--muted);
45+
46+
--vp-nav-bg-color: var(--background);
47+
--vp-custom-block-tip-border: var(--vp-c-default-3);
48+
--vp-custom-block-tip-text: var(--vp-c-text-1);
49+
--vp-custom-block-tip-bg: transparent;
50+
--vp-custom-block-tip-code-bg: var(--vp-c-default-soft);
51+
--vp-input-switch-bg-color: var(--secondary);
52+
--vp-input-border-color: var(--input);
53+
--vp-c-divider: var(--border);
54+
--vp-nav-logo-height: 48px;
55+
}
56+
57+
.dark {
58+
--background: oklch(0.145 0 0);
59+
--foreground: oklch(0.985 0 0);
60+
--card: oklch(0.205 0 0);
61+
--card-foreground: oklch(0.985 0 0);
62+
--popover: oklch(0.269 0 0);
63+
--popover-foreground: oklch(0.985 0 0);
64+
--primary: oklch(0.922 0 0);
65+
--primary-foreground: oklch(0.205 0 0);
66+
--secondary: oklch(0.269 0 0);
67+
--secondary-foreground: oklch(0.985 0 0);
68+
--muted: oklch(0.269 0 0);
69+
--muted-foreground: oklch(0.708 0 0);
70+
--accent: oklch(0.371 0 0);
71+
--accent-foreground: oklch(0.985 0 0);
72+
--destructive: oklch(0.704 0.191 22.216);
73+
--border: oklch(1 0 0 / 10%);
74+
--input: oklch(1 0 0 / 15%);
75+
--ring: oklch(0.556 0 0);
76+
--chart-1: oklch(0.488 0.243 264.376);
77+
--chart-2: oklch(0.696 0.17 162.48);
78+
--chart-3: oklch(0.769 0.188 70.08);
79+
--chart-4: oklch(0.627 0.265 303.9);
80+
--chart-5: oklch(0.645 0.246 16.439);
81+
--sidebar: oklch(0.205 0 0);
82+
--sidebar-foreground: oklch(0.985 0 0);
83+
--sidebar-primary: oklch(0.488 0.243 264.376);
84+
--sidebar-primary-foreground: oklch(0.985 0 0);
85+
--sidebar-accent: oklch(0.269 0 0);
86+
--sidebar-accent-foreground: oklch(0.985 0 0);
87+
--sidebar-border: oklch(1 0 0 / 10%);
88+
--sidebar-ring: oklch(0.439 0 0);
89+
}

0 commit comments

Comments
 (0)