Migrate to VitePress

docs/.gitignore

@@ -1,3 +1,5 @@
+cache
+
 # build output
 dist/
 # generated types

docs/.vitepress/config.ts

@@ -0,0 +1,106 @@
+import { defineConfig } from "vitepress";
+import { groupIconMdPlugin, groupIconVitePlugin } from "vitepress-plugin-group-icons";
+import container from "markdown-it-container";
+import { renderSandbox } from "vitepress-plugin-sandpack";
+import { createRequire } from "node:module";
+import { examplesSidebar } from "./sidebars";
+const require = createRequire(import.meta.url);
+const pkg = require("../node_modules/usegl/package.json");
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: "useGL",
+  description: "Lightweight, reactive WebGL library for working with shaders",
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    nav: [
+      {
+        text: "Guide",
+        link: "/guide/introduction/quick-start",
+        activeMatch: "/guide/",
+      },
+      {
+        text: "Examples",
+        link: "/examples/basics/full-screen/",
+        activeMatch: "/examples/",
+      },
+      {
+        text: `v${pkg.version}`,
+        items: [
+          {
+            text: "Changelog",
+            link: "https://github.com/jsulpis/usegl/blob/main/lib/CHANGELOG.md",
+          },
+        ],
+      },
+    ],
+
+    sidebar: {
+      "/guide/": [
+        {
+          text: "Introduction",
+          base: "/guide/introduction/",
+          items: [{ text: "Quick start ", link: "quick-start" }],
+        },
+      ],
+      "/examples/": examplesSidebar,
+    },
+
+    socialLinks: [
+      { icon: "github", link: "https://github.com/jsulpis/usegl" },
+      { icon: "bluesky", link: "https://bsky.app/profile/jsulpis.dev" },
+      { icon: "x", link: "https://x.com/jsulpis" },
+    ],
+
+    search: {
+      provider: "local",
+    },
+
+    footer: {
+      message: "Released under the MIT License.",
+      copyright: "Copyright © 2024-present Julien Sulpis",
+    },
+  },
+
+  markdown: {
+    config(md) {
+      md.use(groupIconMdPlugin);
+      md.use(container, "example-editor", {
+        render(tokens, idx) {
+          return renderSandbox(tokens, idx, "example-editor");
+        },
+      });
+    },
+  },
+
+  transformPageData(pageData) {
+    if (pageData.relativePath.startsWith("examples/")) {
+      return {
+        ...pageData,
+        title: `${pageData.frontmatter.title} example`,
+        frontmatter: {
+          prev: false,
+          next: false,
+          aside: false,
+          layout: "doc",
+          pageClass: "example-page",
+          ...pageData.frontmatter,
+        },
+      };
+    }
+    return pageData;
+  },
+
+  outDir: "dist",
+
+  vite: {
+    plugins: [groupIconVitePlugin()],
+    css: {
+      preprocessorOptions: {
+        scss: {
+          api: "modern",
+        },
+      },
+    },
+  },
+});

docs/.vitepress/sidebars.ts

@@ -0,0 +1,32 @@
+import fs from "node:fs";
+import path from "node:path";
+import matter from "gray-matter";
+
+const examplesDir = "examples";
+
+const sections = fs
+  .readdirSync(examplesDir)
+  .filter((file) => fs.statSync(path.join(examplesDir, file)).isDirectory());
+
+export const examplesSidebar = sections.map((section) => {
+  const sectionPath = path.join(examplesDir, section);
+  const pages = fs
+    .readdirSync(sectionPath)
+    .filter((file) => fs.statSync(path.join(sectionPath, file)).isDirectory());
+
+  return {
+    text: upperFirst(section),
+    items: pages.map((page) => {
+      const indexPath = path.join(sectionPath, page, "index.md");
+      const { data } = matter(fs.readFileSync(indexPath, "utf8"));
+      return {
+        text: data.title || page,
+        link: `/examples/${section}/${page}/`,
+      };
+    }),
+  };
+});
+
+function upperFirst(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}

docs/.vitepress/theme/index.ts

@@ -0,0 +1,15 @@
+import DefaultTheme from "vitepress/theme";
+import { Sandbox } from "vitepress-plugin-sandpack";
+import ExampleEditor from "../../components/ExampleEditor.vue";
+import "vitepress-plugin-sandpack/dist/style.css";
+import "virtual:group-icons.css";
+import "./styles.scss";
+
+export default {
+  ...DefaultTheme,
+  enhanceApp(ctx) {
+    DefaultTheme.enhanceApp(ctx);
+    ctx.app.component("Sandbox", Sandbox);
+    ctx.app.component("ExampleEditor", ExampleEditor);
+  },
+};

docs/.vitepress/theme/styles.scss

@@ -0,0 +1,134 @@
+.example-page {
+  --vp-padding: 24px;
+  --wrapper-width: calc(100svw - var(--vp-sidebar-width) - 2 * var(--vp-padding));
+  --wrapper-height: calc(
+    100svh - var(--vp-nav-height) - var(--vp-subnav-height, 0px) - 2 * var(--vp-padding)
+  );
+
+  // full width page
+  --vp-layout-max-width: 100%;
+  .content-container,
+  .container {
+    max-width: 100% !important;
+  }
+
+  @media (width < 960px) {
+    --vp-sidebar-width: 0px;
+    --vp-subnav-height: 48px;
+  }
+
+  @media (width >= 768px) {
+    --vp-padding: 32px;
+  }
+
+  @media (orientation: landscape) {
+    --editor-height: var(--wrapper-height);
+    --preview-height: var(--wrapper-height);
+
+    .sp-layout > .sp-stack {
+      min-width: 0 !important;
+      height: 100%;
+    }
+
+    .sp-layout > .sp-resize-handler {
+      display: initial !important;
+      opacity: 0;
+      background: linear-gradient(
+        to right,
+        transparent 30%,
+        var(--vp-c-brand-1) 30%,
+        var(--vp-c-brand-1) 70%,
+        transparent 70%
+      );
+
+      &:hover {
+        opacity: 1;
+        transition: opacity 150ms 50ms;
+      }
+    }
+  }
+
+  @media (orientation: portrait) {
+    --editor-height: 40svh;
+    --preview-height: calc(var(--wrapper-height) - var(--editor-height));
+
+    .sp-stack {
+      flex: initial !important;
+      height: auto !important;
+      width: 100% !important;
+    }
+
+    .sp-editor {
+      flex: initial !important;
+      width: var(--wrapper-width) !important;
+      min-width: 0 !important;
+    }
+
+    .sp-preview {
+      flex: initial !important;
+      width: var(--wrapper-width) !important;
+      min-width: 0 !important;
+    }
+  }
+
+  .VPDoc > .container > .content {
+    padding: 0;
+  }
+
+  .VPDoc {
+    padding-block: var(--vp-padding) 0;
+  }
+
+  .sp-wrapper {
+    width: var(--wrapper-width) !important;
+    height: var(--wrapper-height) !important;
+  }
+
+  .sp-layout {
+    height: 100%;
+  }
+
+  .sp-editor {
+    height: var(--editor-height) !important;
+  }
+
+  .sp-preview {
+    height: var(--preview-height) !important;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+  }
+
+  .sp-code-editor {
+    // hide a glitch where the file from the vanilla-ts template is displayed before the actual code
+    animation: fadeIn 100ms;
+  }
+
+  html.dark & {
+    .cm-scroller {
+      color-scheme: dark;
+    }
+  }
+
+  [title="Open in CodeSandbox"] {
+    width: var(--sp-space-7);
+    height: var(--sp-space-7);
+    justify-content: center;
+
+    &:is(a) {
+      padding-inline: 0 !important;
+    }
+
+    &:is(button) {
+      padding: var(--sp-space-1);
+      gap: 0;
+    }
+
+    span {
+      display: none;
+    }
+  }
+}