feat: integrate VitePress documentation with Netlify deployment

apps/documentation/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.vitepress/dist
+.vitepress/cache

apps/documentation/.vitepress/config.mts

@@ -0,0 +1,131 @@
+import { defineConfig } from 'vitepress'
+import lightbox from "vitepress-plugin-lightbox"
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: "Pipelab Documentation",
+  description: "Pipelab Documentation",
+  lastUpdated: true,
+  markdown: {
+    config: (md) => {
+      // Use lightbox plugin
+      md.use(lightbox, {});
+    },
+  },
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    nav: [
+      { text: 'Guide', link: '/guide/usage' },
+      { text: 'Reference', link: '/reference' },
+      // { text: 'Blog', link: '/blog' },
+      { text: 'Website', link: 'https://pipelab.app' }
+    ],
+
+    sidebar: [
+      {
+        text: 'Introduction',
+        items: [
+          { text: 'What is Pipelab?', link: '/guide/what-is-pipelab' },
+          { text: 'Getting Started', link: '/guide/getting-started' },
+        ]
+      },
+      {
+        text: 'Desktop app',
+        items: [
+          { text: 'Usage', link: '/guide/usage' },
+        ]
+      },
+      {
+        text: 'Integrations',
+        items: [
+          {
+            text: 'Overview',
+            link: '/guide/integrations'
+          },
+          {
+            text: 'Game Engines',
+            items: [
+              { text: 'Godot', link: '/guide/integrations/godot' },
+              { text: 'Construct 3', link: '/guide/integrations/construct_3' },
+              { text: 'Unity', link: '/guide/integrations/unity' },
+              { text: 'GDevelop', link: '/guide/integrations/gdevelop' },
+            ]
+          },
+          {
+            text: 'Packaging',
+            items: [
+              { text: 'Electron', link: '/guide/integrations/electron' },
+              { text: 'Tauri', link: '/guide/integrations/tauri' },
+              { text: 'Neutralino', link: '/guide/integrations/neutralino' },
+            ]
+          },
+          {
+            text: 'Platforms',
+            items: [
+              { text: 'Steam', link: '/guide/integrations/steam' },
+              { text: 'Poki', link: '/guide/integrations/poki' },
+              { text: 'Itch.io', link: '/guide/integrations/itch_io' },
+              { text: 'Epic Game Store', link: '/guide/integrations/epic_game_store' },
+              { text: 'Discord', link: '/guide/integrations/discord' },
+            ]
+          },
+          {
+            text: 'File System',
+            link: '/guide/integrations/filesystem'
+          },
+          {
+            text: 'System',
+            link: '/guide/integrations/system'
+          },
+          {
+            text: 'Other',
+            items: [
+              { text: 'NVPatch', link: '/guide/integrations/nvpatch' },
+            ]
+          }
+        ]
+      },
+      {
+        text: 'API',
+        link: "/api"
+      },
+      {
+        text: 'FAQ',
+        link: "/faq"
+      },
+      {
+        text: 'Architecture',
+        link: "/architecture"
+      },
+      {
+        text: 'Roadmap',
+        link: "/roadmap"
+      },
+      {
+        text: 'Team',
+        link: "/team"
+      }
+    ],
+
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/CynToolkit/pipelab' },
+      { icon: 'discord', link: 'https://discord.gg/MzNw26cBb5' },
+      { icon: 'x', link: 'https://x.com/pipelabapp' },
+      { icon: 'mastodon', link: 'https://mastodon.gamedev.place/@pipelab' },
+      { icon: 'bluesky', link: 'https://bsky.app/profile/pipelab.bsky.social' },
+    ],
+
+    editLink: {
+      pattern: 'https://github.com/CynToolkit/pipelab/edit/develop/apps/documentation/:path'
+    },
+
+    search: {
+      provider: 'local'
+    },
+
+    footer: {
+      message: 'Released under the MIT License.',
+      copyright: 'Copyright © 2024-present Armaldio'
+    }
+  },
+})

apps/documentation/.vitepress/theme/Layout.vue

@@ -0,0 +1,37 @@
+<script setup>
+import DefaultTheme from "vitepress/theme";
+import { onMounted } from "vue";
+import { useRouter } from "vitepress";
+import mediumZoom from "medium-zoom";
+
+const { Layout } = DefaultTheme;
+const router = useRouter();
+
+// Setup medium zoom with the desired options
+const setupMediumZoom = () => {
+  mediumZoom("[data-zoomable]", {
+    background: "transparent",
+  });
+};
+
+// Apply medium zoom on load
+onMounted(setupMediumZoom);
+
+// Subscribe to route changes to re-apply medium zoom effect
+router.onAfterRouteChanged = setupMediumZoom;
+</script>
+
+<template>
+  <Layout />
+</template>
+
+<style>
+.medium-zoom-overlay {
+  backdrop-filter: blur(5rem);
+}
+
+.medium-zoom-overlay,
+.medium-zoom-image--opened {
+  z-index: 999;
+}
+</style>

apps/documentation/.vitepress/theme/index.ts

@@ -0,0 +1,19 @@
+// https://vitepress.dev/guide/custom-theme
+import { h } from 'vue'
+import type { Theme } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import Layout from "./Layout.vue";
+import './style.css'
+
+export default {
+  extends: DefaultTheme,
+  Layout,
+  // Layout: () => {
+  //   return h(DefaultTheme.Layout, null, {
+  //     // https://vitepress.dev/guide/extending-default-theme#layout-slots
+  //   })
+  // },
+  enhanceApp({ app, router, siteData }) {
+    // ...
+  },
+} satisfies Theme

apps/documentation/.vitepress/theme/style.css

@@ -0,0 +1,139 @@
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
+
+/**
+ * Colors
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ * 
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ *   satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ *   It must satisfy the contrast ratio with pure white (#ffffff) text on
+ *   top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ *   or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ *   on top of it.
+ *
+ *   The soft color must be semi transparent alpha channel. This is crucial
+ *   because it allows adding multiple "soft" colors on top of each other
+ *   to create a accent, such as when having inline code block inside
+ *   custom containers.
+ *
+ * - `default`: The color used purely for subtle indication without any
+ *   special meanings attched to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ *   brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ *   brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ *   container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ *   in custom container, badges, etc.
+ * -------------------------------------------------------------------------- */
+
+ :root {
+  --vp-c-default-1: var(--vp-c-gray-1);
+  --vp-c-default-2: var(--vp-c-gray-2);
+  --vp-c-default-3: var(--vp-c-gray-3);
+  --vp-c-default-soft: var(--vp-c-gray-soft);
+
+  --vp-c-brand-1: var(--vp-c-indigo-1);
+  --vp-c-brand-2: var(--vp-c-indigo-2);
+  --vp-c-brand-3: var(--vp-c-indigo-3);
+  --vp-c-brand-soft: var(--vp-c-indigo-soft);
+
+  --vp-c-tip-1: var(--vp-c-brand-1);
+  --vp-c-tip-2: var(--vp-c-brand-2);
+  --vp-c-tip-3: var(--vp-c-brand-3);
+  --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+  --vp-c-warning-1: var(--vp-c-yellow-1);
+  --vp-c-warning-2: var(--vp-c-yellow-2);
+  --vp-c-warning-3: var(--vp-c-yellow-3);
+  --vp-c-warning-soft: var(--vp-c-yellow-soft);
+
+  --vp-c-danger-1: var(--vp-c-red-1);
+  --vp-c-danger-2: var(--vp-c-red-2);
+  --vp-c-danger-3: var(--vp-c-red-3);
+  --vp-c-danger-soft: var(--vp-c-red-soft);
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-button-brand-border: transparent;
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-bg: var(--vp-c-brand-3);
+  --vp-button-brand-hover-border: transparent;
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-active-border: transparent;
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-c-brand-1);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    120deg,
+    #bd34fe 30%,
+    #41d1ff
+  );
+
+  --vp-home-hero-image-background-image: linear-gradient(
+    -45deg,
+    #bd34fe 50%,
+    #47caff 50%
+  );
+  --vp-home-hero-image-filter: blur(44px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(68px);
+  }
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-custom-block-tip-border: transparent;
+  --vp-custom-block-tip-text: var(--vp-c-text-1);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand-1) !important;
+}
+