Added vitepress for documentation. (#6270)

doc/.vitepress/config.mts

@@ -0,0 +1,74 @@
+import { defineConfig } from 'vitepress'
+import {version} from '../../package.json'
+// https://vitepress.dev/reference/site-config
+const commitRef = process.env.COMMIT_REF?.slice(0, 8) || 'dev'
+
+
+export default defineConfig({
+  title: "Etherpad Documentation",
+  description: "Next Generation Collaborative Document Editing",
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Getting started', link: '/docker.md' }
+    ],
+    logo:'/favicon.ico',
+
+    sidebar: {
+        '/': [
+          {
+            link: '/',
+            text: 'About',
+            items: [
+                { text: 'Docker', link: '/docker.md' },
+                { text: 'Localization', link: '/localization.md' },
+                { text: 'Cookies', link: '/cookies.md' },
+                { text: 'Plugins', link: '/plugins.md' },
+                { text: 'Stats', link: '/stats.md' },
+                {text: 'Skins', link: '/skins.md' },
+                {text: 'Demo', link: '/demo.md' },
+                ]
+          },
+          {
+            text: 'API',
+            link: '/api/',
+            items: [
+              { text: 'Changeset', link: '/api/changeset_library.md' },
+              {text: 'Editbar', link: '/api/editbar.md' },
+              {text: 'EditorInfo', link: '/api/editorInfo.md' },
+              {text: 'Embed Parameters', link: '/api/embed_parameters.md' },
+              {text: 'Hooks Client Side', link: '/api/hooks_client-side.md' },
+              {text: 'Hooks Server Side', link: '/api/hooks_server-side.md' },
+              {text: 'Plugins', link: '/api/pluginfw.md' },
+              {text: 'Toolbar', link: '/api/toolbar.md' },
+              {text: 'HTTP API', link: '/api/http_api.md' },
+            ]
+          },
+          {
+          text: 'Old Docs',
+            items: [
+                { text: 'Easysync description', link: '/easysync/easysync-full-description.pdf' },
+                { text: 'Easysync notes', link: '/easysync/easysync-notes.pdf' }
+            ]
+          }
+        ],
+      '/stats': [
+        {
+          text: 'Stats',
+          items:[
+            { text: 'Stats', link: '/stats/' }
+          ]
+        }
+      ]
+    },
+    footer: {
+      message: `Published under Apache License`,
+      copyright: `(${commitRef}) v${version} by Etherpad Foundation`
+    },
+
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/ether/etherpad-lite' }
+    ]
+  }
+})

doc/.vitepress/theme/components/SvgImage.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineProps<{ svg: string }>()
+</script>
+
+<template>
+  <figure class="svg-image-root" v-html="svg" />
+</template>
+
+<style>
+.svg-image-root {
+  background-color: #eee;
+  border-radius: 8px;
+  padding: 1ch;
+  margin: 1ch 0;
+}
+html.dark .svg-image-root {
+  background-color: #313641;
+}
+.svg-image-root svg text {
+  font-family: var(--vp-font-family-base);
+}
+</style>

doc/.vitepress/theme/index.ts

@@ -0,0 +1,12 @@
+import { h } from 'vue'
+import type { Theme } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import './styles/vars.css'
+import SvgImage from './components/SvgImage.vue'
+
+export default {
+    extends: DefaultTheme,
+    enhanceApp({ app }) {
+        app.component('SvgImage', SvgImage)
+    },
+} satisfies Theme

doc/.vitepress/theme/styles/vars.css

@@ -0,0 +1,77 @@
+/**
+ * Colors
+ * -------------------------------------------------------------------------- */
+
+:root {
+    --vp-c-brand: #646cff;
+    --vp-c-brand-light: #747bff;
+    --vp-c-brand-lighter: #9499ff;
+    --vp-c-brand-lightest: #bcc0ff;
+    --vp-c-brand-dark: #535bf2;
+    --vp-c-brand-darker: #454ce1;
+    --vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
+}
+
+/**
+ * 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);
+    --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,
+            #0f775b 30%,
+            #0f775b
+    );
+
+    --vp-home-hero-image-background-image: linear-gradient(
+            -45deg,
+            #0f775b 50%,
+            #0f775b 50%
+    );
+    --vp-home-hero-image-filter: blur(40px);
+}
+
+@media (min-width: 640px) {
+    :root {
+        --vp-home-hero-image-filter: blur(56px);
+    }
+}
+
+@media (min-width: 960px) {
+    :root {
+        --vp-home-hero-image-filter: blur(72px);
+    }
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+    --vp-custom-block-tip-border: var(--vp-c-brand);
+    --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);
+    --vp-custom-block-tip-text: var(--vp-c-brand-lightest);
+    --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
+}