diff --git a/docs/.gitignore b/docs/.gitignore
index 6240da8..3752183 100644
--- a/docs/.gitignore
+++ b/docs/.gitignore
@@ -1,3 +1,5 @@
+cache
+
# build output
dist/
# generated types
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
new file mode 100644
index 0000000..63c3ac3
--- /dev/null
+++ b/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",
+ },
+ },
+ },
+ },
+});
diff --git a/docs/.vitepress/sidebars.ts b/docs/.vitepress/sidebars.ts
new file mode 100644
index 0000000..2df256f
--- /dev/null
+++ b/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);
+}
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
new file mode 100644
index 0000000..7a76064
--- /dev/null
+++ b/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);
+ },
+};
diff --git a/docs/.vitepress/theme/styles.scss b/docs/.vitepress/theme/styles.scss
new file mode 100644
index 0000000..e54cab9
--- /dev/null
+++ b/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;
+ }
+ }
+}
diff --git a/docs/README.md b/docs/README.md
deleted file mode 100644
index e09bf55..0000000
--- a/docs/README.md
+++ /dev/null
@@ -1,55 +0,0 @@
-# Starlight Starter Kit: Basics
-
-[](https://starlight.astro.build)
-
-```
-npm create astro@latest -- --template starlight
-```
-
-[](https://stackblitz.com/github/withastro/starlight/tree/main/examples/basics)
-[](https://codesandbox.io/p/sandbox/github/withastro/starlight/tree/main/examples/basics)
-[](https://app.netlify.com/start/deploy?repository=https://github.com/withastro/starlight&create_from_path=examples/basics)
-[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fwithastro%2Fstarlight%2Ftree%2Fmain%2Fexamples%2Fbasics&project-name=my-starlight-docs&repository-name=my-starlight-docs)
-
-> π§βπ **Seasoned astronaut?** Delete this file. Have fun!
-
-## π Project Structure
-
-Inside of your Astro + Starlight project, you'll see the following folders and files:
-
-```
-.
-βββ public/
-βββ src/
-β βββ assets/
-β βββ content/
-β β βββ docs/
-β β βββ config.ts
-β βββ env.d.ts
-βββ astro.config.mjs
-βββ package.json
-βββ tsconfig.json
-```
-
-Starlight looks for `.md` or `.mdx` files in the `src/content/docs/` directory. Each file is exposed as a route based on its file name.
-
-Images can be added to `src/assets/` and embedded in Markdown with a relative link.
-
-Static assets, like favicons, can be placed in the `public/` directory.
-
-## π§ Commands
-
-All commands are run from the root of the project, from a terminal:
-
-| Command | Action |
-| :------------------------ | :----------------------------------------------- |
-| `npm install` | Installs dependencies |
-| `npm run dev` | Starts local dev server at `localhost:4321` |
-| `npm run build` | Build your production site to `./dist/` |
-| `npm run preview` | Preview your build locally, before deploying |
-| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
-| `npm run astro -- --help` | Get help using the Astro CLI |
-
-## π Want to learn more?
-
-Check out [Starlightβs docs](https://starlight.astro.build/), read [the Astro documentation](https://docs.astro.build), or jump into the [Astro Discord server](https://astro.build/chat).
diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
deleted file mode 100644
index 301880d..0000000
--- a/docs/astro.config.mjs
+++ /dev/null
@@ -1,42 +0,0 @@
-// @ts-check
-import { defineConfig } from "astro/config";
-import starlight from "@astrojs/starlight";
-import react from "@astrojs/react";
-import mdx from "@astrojs/mdx";
-
-// https://astro.build/config
-export default defineConfig({
- integrations: [
- starlight({
- components: {
- Search: "./src/components/CustomHeader.astro",
- },
- plugins: [],
- title: "useGL",
- social: {
- github: "https://github.com/jsulpis/usegl",
- blueSky: "https://bsky.app/profile/jsulpis.dev",
- "x.com": "https://x.com/jsulpis",
- },
- pagination: true,
- customCss: ["./src/styles/custom.scss"],
- sidebar: [
- {
- label: "Introduction",
- autogenerate: { directory: "docs/introduction" },
- },
- ],
- }),
- react(),
- mdx(),
- ],
- vite: {
- css: {
- preprocessorOptions: {
- scss: {
- api: "modern",
- },
- },
- },
- },
-});
diff --git a/docs/components/ExampleEditor.vue b/docs/components/ExampleEditor.vue
new file mode 100644
index 0000000..47c16af
--- /dev/null
+++ b/docs/components/ExampleEditor.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
diff --git a/docs/examples/basics/drawing-modes/index.md b/docs/examples/basics/drawing-modes/index.md
new file mode 100644
index 0000000..2334eca
--- /dev/null
+++ b/docs/examples/basics/drawing-modes/index.md
@@ -0,0 +1,11 @@
+---
+title: Drawing modes
+---
+
+::: example-editor
+
+<<< ./index.ts
+<<< @/snippets/canvas-square/styles.css
+<<< @/snippets/default/index.html
+
+:::
diff --git a/docs/src/pages/examples/basics/drawing-modes/_main.ts b/docs/examples/basics/drawing-modes/index.ts
similarity index 100%
rename from docs/src/pages/examples/basics/drawing-modes/_main.ts
rename to docs/examples/basics/drawing-modes/index.ts
diff --git a/docs/examples/basics/full-screen/index.md b/docs/examples/basics/full-screen/index.md
new file mode 100644
index 0000000..284ddf5
--- /dev/null
+++ b/docs/examples/basics/full-screen/index.md
@@ -0,0 +1,11 @@
+---
+title: Full screen canvas
+---
+
+::: example-editor
+
+<<< ./index.ts
+<<< @/snippets/canvas-full/styles.css
+<<< @/snippets/default/index.html
+
+:::
diff --git a/docs/src/pages/examples/basics/full-screen/_main.ts b/docs/examples/basics/full-screen/index.ts
similarity index 100%
rename from docs/src/pages/examples/basics/full-screen/_main.ts
rename to docs/examples/basics/full-screen/index.ts
diff --git a/docs/examples/basics/indices/index.md b/docs/examples/basics/indices/index.md
new file mode 100644
index 0000000..884031a
--- /dev/null
+++ b/docs/examples/basics/indices/index.md
@@ -0,0 +1,11 @@
+---
+title: Indices
+---
+
+::: example-editor
+
+<<< ./index.ts
+<<< @/snippets/canvas-square/styles.css
+<<< @/snippets/default/index.html
+
+:::
diff --git a/docs/src/pages/examples/basics/indices/_main.ts b/docs/examples/basics/indices/index.ts
similarity index 100%
rename from docs/src/pages/examples/basics/indices/_main.ts
rename to docs/examples/basics/indices/index.ts
diff --git a/docs/examples/basics/particles/index.md b/docs/examples/basics/particles/index.md
new file mode 100644
index 0000000..fc9d09a
--- /dev/null
+++ b/docs/examples/basics/particles/index.md
@@ -0,0 +1,11 @@
+---
+title: Particles
+---
+
+::: example-editor
+
+<<< ./index.ts
+<<< @/snippets/canvas-square/styles.css
+<<< @/snippets/default/index.html
+
+:::
diff --git a/docs/src/pages/examples/basics/particles/_main.ts b/docs/examples/basics/particles/index.ts
similarity index 100%
rename from docs/src/pages/examples/basics/particles/_main.ts
rename to docs/examples/basics/particles/index.ts
diff --git a/docs/examples/basics/play-pause/index.md b/docs/examples/basics/play-pause/index.md
new file mode 100644
index 0000000..b1d22dd
--- /dev/null
+++ b/docs/examples/basics/play-pause/index.md
@@ -0,0 +1,11 @@
+---
+title: Play / Pause
+---
+
+::: example-editor
+
+<<< ./index.ts
+<<< @/snippets/canvas-square/styles.css
+<<< @/snippets/render-count/index.html
+
+:::
diff --git a/docs/src/pages/examples/basics/play-pause/_main.ts b/docs/examples/basics/play-pause/index.ts
similarity index 100%
rename from docs/src/pages/examples/basics/play-pause/_main.ts
rename to docs/examples/basics/play-pause/index.ts
diff --git a/docs/examples/basics/resize/index.md b/docs/examples/basics/resize/index.md
new file mode 100644
index 0000000..2f1ec95
--- /dev/null
+++ b/docs/examples/basics/resize/index.md
@@ -0,0 +1,11 @@
+---
+title: Resize
+---
+
+::: example-editor
+
+<<< ./index.ts
+<<< @/snippets/canvas-full/styles.css
+<<< @/snippets/render-count/index.html
+
+:::
diff --git a/docs/src/pages/examples/basics/resize/_main.ts b/docs/examples/basics/resize/index.ts
similarity index 100%
rename from docs/src/pages/examples/basics/resize/_main.ts
rename to docs/examples/basics/resize/index.ts
diff --git a/docs/examples/basics/uniforms/index.md b/docs/examples/basics/uniforms/index.md
new file mode 100644
index 0000000..dbdc087
--- /dev/null
+++ b/docs/examples/basics/uniforms/index.md
@@ -0,0 +1,11 @@
+---
+title: Uniforms
+---
+
+::: example-editor {deps=tweakpane@^4.0.5}
+
+<<< ./index.ts
+<<< @/snippets/canvas-square/styles.css
+<<< @/snippets/render-count/index.html
+
+:::
diff --git a/docs/src/pages/examples/basics/uniforms/_main.ts b/docs/examples/basics/uniforms/index.ts
similarity index 100%
rename from docs/src/pages/examples/basics/uniforms/_main.ts
rename to docs/examples/basics/uniforms/index.ts
diff --git a/docs/examples/interactions/pointer/index.md b/docs/examples/interactions/pointer/index.md
new file mode 100644
index 0000000..6a5835b
--- /dev/null
+++ b/docs/examples/interactions/pointer/index.md
@@ -0,0 +1,11 @@
+---
+title: Pointer coordinates
+---
+
+::: example-editor
+
+<<< ./index.ts
+<<< @/snippets/canvas-full/styles.css
+<<< @/snippets/render-count/index.html
+
+:::
diff --git a/docs/src/pages/examples/interactions/pointer/_main.ts b/docs/examples/interactions/pointer/index.ts
similarity index 100%
rename from docs/src/pages/examples/interactions/pointer/_main.ts
rename to docs/examples/interactions/pointer/index.ts
diff --git a/docs/examples/post-processing/single-pass/index.md b/docs/examples/post-processing/single-pass/index.md
new file mode 100644
index 0000000..f9998b9
--- /dev/null
+++ b/docs/examples/post-processing/single-pass/index.md
@@ -0,0 +1,11 @@
+---
+title: Single pass (sepia)
+---
+
+::: example-editor
+
+<<< ./index.ts
+<<< ./styles.css
+<<< @/snippets/default/index.html
+
+:::
diff --git a/docs/src/pages/examples/post-processing/single-pass/_main.ts b/docs/examples/post-processing/single-pass/index.ts
similarity index 100%
rename from docs/src/pages/examples/post-processing/single-pass/_main.ts
rename to docs/examples/post-processing/single-pass/index.ts
diff --git a/docs/src/pages/examples/post-processing/single-pass/_styles.css b/docs/examples/post-processing/single-pass/styles.css
similarity index 100%
rename from docs/src/pages/examples/post-processing/single-pass/_styles.css
rename to docs/examples/post-processing/single-pass/styles.css
diff --git a/docs/examples/textures/canvas2d/index.md b/docs/examples/textures/canvas2d/index.md
new file mode 100644
index 0000000..e2a0626
--- /dev/null
+++ b/docs/examples/textures/canvas2d/index.md
@@ -0,0 +1,11 @@
+---
+title: Canvas 2D
+---
+
+::: example-editor
+
+<<< ./index.ts
+<<< @/snippets/canvas-square/styles.css
+<<< @/snippets/default/index.html
+
+:::
diff --git a/docs/src/pages/examples/textures/canvas2d/_main.ts b/docs/examples/textures/canvas2d/index.ts
similarity index 100%
rename from docs/src/pages/examples/textures/canvas2d/_main.ts
rename to docs/examples/textures/canvas2d/index.ts
diff --git a/docs/examples/textures/data/index.md b/docs/examples/textures/data/index.md
new file mode 100644
index 0000000..9b53f5c
--- /dev/null
+++ b/docs/examples/textures/data/index.md
@@ -0,0 +1,11 @@
+---
+title: Data
+---
+
+::: example-editor
+
+<<< ./index.ts
+<<< @/snippets/canvas-full/styles.css
+<<< @/snippets/default/index.html
+
+:::
diff --git a/docs/src/pages/examples/textures/data/_main.ts b/docs/examples/textures/data/index.ts
similarity index 100%
rename from docs/src/pages/examples/textures/data/_main.ts
rename to docs/examples/textures/data/index.ts
diff --git a/docs/src/pages/examples/textures/image/_fragment.glsl b/docs/examples/textures/image/fragment.glsl
similarity index 100%
rename from docs/src/pages/examples/textures/image/_fragment.glsl
rename to docs/examples/textures/image/fragment.glsl
diff --git a/docs/examples/textures/image/index.md b/docs/examples/textures/image/index.md
new file mode 100644
index 0000000..47009e1
--- /dev/null
+++ b/docs/examples/textures/image/index.md
@@ -0,0 +1,13 @@
+---
+title: "Image"
+---
+
+::: example-editor
+
+<<< ./index.ts
+<<< ./fragment.glsl
+<<< ./vertex.glsl
+<<< @/snippets/canvas-full/styles.css
+<<< @/snippets/default/index.html
+
+:::
diff --git a/docs/src/pages/examples/textures/image/_main.ts b/docs/examples/textures/image/index.ts
similarity index 100%
rename from docs/src/pages/examples/textures/image/_main.ts
rename to docs/examples/textures/image/index.ts
diff --git a/docs/src/pages/examples/textures/image/_vertex.glsl b/docs/examples/textures/image/vertex.glsl
similarity index 100%
rename from docs/src/pages/examples/textures/image/_vertex.glsl
rename to docs/examples/textures/image/vertex.glsl
diff --git a/docs/examples/textures/video/index.md b/docs/examples/textures/video/index.md
new file mode 100644
index 0000000..83a9f1c
--- /dev/null
+++ b/docs/examples/textures/video/index.md
@@ -0,0 +1,11 @@
+---
+title: "Video"
+---
+
+::: example-editor
+
+<<< ./index.ts
+<<< ./styles.css
+<<< @/snippets/default/index.html
+
+:::
diff --git a/docs/src/pages/examples/textures/video/_main.ts b/docs/examples/textures/video/index.ts
similarity index 100%
rename from docs/src/pages/examples/textures/video/_main.ts
rename to docs/examples/textures/video/index.ts
diff --git a/docs/src/pages/examples/textures/video/_styles.css b/docs/examples/textures/video/styles.css
similarity index 75%
rename from docs/src/pages/examples/textures/video/_styles.css
rename to docs/examples/textures/video/styles.css
index c538eef..aea7d84 100644
--- a/docs/src/pages/examples/textures/video/_styles.css
+++ b/docs/examples/textures/video/styles.css
@@ -7,7 +7,6 @@ body {
}
canvas {
- max-width: 100svw;
- max-height: 100svh;
+ width: 100svw;
display: block;
}
diff --git a/docs/guide/introduction/quick-start.md b/docs/guide/introduction/quick-start.md
new file mode 100644
index 0000000..0d69678
--- /dev/null
+++ b/docs/guide/introduction/quick-start.md
@@ -0,0 +1,45 @@
+# Quick start
+
+The documentation is a work in progress, and the API of useGL is still subject to changes. For now, you can browse the [examples](/examples/basics/full-screen/) to get an idea of how the library works.
+
+A proper documentation will come soon !
+
+## Installation
+
+::: code-group
+
+```sh [npm]
+$ npm add -D usegl
+```
+
+```sh [pnpm]
+$ pnpm add -D usegl
+```
+
+```sh [yarn]
+$ yarn add -D usegl
+```
+
+```sh [bun]
+$ bun add -D usegl
+```
+
+:::
+
+## Usage
+
+```js
+import { useWebGLCanvas } from "usegl";
+
+useWebGLCanvas({
+ canvas: "#glCanvas",
+ fragment: /* glsl */ `
+ varying vec2 vUv; // automatically provided
+ uniform float uTime; // automatically provided and updated
+
+ void main() {
+ gl_FragColor = vec4(vUv, sin(uTime) / 2. + .5, 1.);
+ }
+ `,
+});
+```
diff --git a/docs/index.md b/docs/index.md
new file mode 100644
index 0000000..9c85b63
--- /dev/null
+++ b/docs/index.md
@@ -0,0 +1,30 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+ name: useGL
+ text: Lightweight, reactive WebGL library
+ tagline: for working with shaders
+ actions:
+ - theme: brand
+ text: Get started
+ link: /guide/introduction/quick-start
+ - theme: alt
+ text: Examples
+ link: /examples/basics/full-screen/
+
+features:
+ - title: Lightweight
+ icon: β‘οΈ
+ details: ~5kB minzipped for the full library. Down to ~3kB for the simplest setup.
+ - title: Reactive
+ icon: βΊ
+ details: Automatically re-renders when uniforms are updated, or the canvas is resized
+ - title: TypeScript
+ icon: π οΈ
+ details: "Autocompletion and type-safety for everything, including uniforms"
+ - title: Developer friendly
+ icon: π€
+ details: Modern hooks style syntax, time and resolution uniforms automatically provided and updated
+---
diff --git a/docs/package.json b/docs/package.json
index 84d7373..0a45451 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -4,29 +4,21 @@
"private": true,
"type": "module",
"scripts": {
- "astro": "astro",
- "build": "astro check && astro build",
- "dev": "astro dev",
- "preview": "astro preview",
- "start": "astro dev"
+ "build": "vitepress build",
+ "dev": "vitepress dev",
+ "preview": "vitepress preview"
},
"dependencies": {
- "@astrojs/check": "0.9.4",
- "@astrojs/mdx": "3.1.9",
- "@astrojs/react": "3.6.2",
- "@astrojs/starlight": "0.29.2",
- "@codesandbox/sandpack-react": "2.19.9",
"@tweakpane/core": "2.0.5",
- "@types/react": "18.3.12",
- "@types/react-dom": "18.3.1",
- "astro": "4.16.10",
- "react": "18.3.1",
- "react-dom": "18.3.1",
+ "gray-matter": "4.0.3",
+ "markdown-it-container": "4.0.0",
"sass": "1.81.0",
- "sharp": "0.32.5",
- "starlight-package-managers": "0.8.0",
"tweakpane": "4.0.5",
"typescript": "5.6.3",
- "usegl": "workspace:*"
+ "usegl": "workspace:*",
+ "vitepress": "1.5.0",
+ "vitepress-plugin-group-icons": "1.3.3",
+ "vitepress-plugin-sandpack": "1.1.4",
+ "vue": "3.5.13"
}
}
diff --git a/docs/public/favicon.svg b/docs/public/favicon.svg
deleted file mode 100644
index cba5ac1..0000000
--- a/docs/public/favicon.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/src/components/ExampleEditor/canvas-full.css b/docs/snippets/canvas-full/styles.css
similarity index 100%
rename from docs/src/components/ExampleEditor/canvas-full.css
rename to docs/snippets/canvas-full/styles.css
diff --git a/docs/src/components/ExampleEditor/canvas-square.css b/docs/snippets/canvas-square/styles.css
similarity index 100%
rename from docs/src/components/ExampleEditor/canvas-square.css
rename to docs/snippets/canvas-square/styles.css
diff --git a/docs/snippets/default/index.html b/docs/snippets/default/index.html
new file mode 100644
index 0000000..eadb413
--- /dev/null
+++ b/docs/snippets/default/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ useGL Example
+
+
+
+
+
+
diff --git a/docs/snippets/render-count/index.html b/docs/snippets/render-count/index.html
new file mode 100644
index 0000000..9a2f7b0
--- /dev/null
+++ b/docs/snippets/render-count/index.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+ useGL Example
+
+
+
+
+ Renders: 0
+
+
+
diff --git a/docs/src/assets/houston.webp b/docs/src/assets/houston.webp
deleted file mode 100644
index 930c164..0000000
Binary files a/docs/src/assets/houston.webp and /dev/null differ
diff --git a/docs/src/components/CustomHeader.astro b/docs/src/components/CustomHeader.astro
deleted file mode 100644
index 9810fd5..0000000
--- a/docs/src/components/CustomHeader.astro
+++ /dev/null
@@ -1,51 +0,0 @@
----
-import type { Props } from "@astrojs/starlight/props";
-import Search from "@astrojs/starlight/components/Search.astro";
----
-
-
-
-
diff --git a/docs/src/components/ExampleEditor/ExampleEditor.astro b/docs/src/components/ExampleEditor/ExampleEditor.astro
deleted file mode 100644
index 24fe11c..0000000
--- a/docs/src/components/ExampleEditor/ExampleEditor.astro
+++ /dev/null
@@ -1,184 +0,0 @@
----
-interface Props {
- exampleTitle: string;
- files?: SandpackFiles;
- template?: string;
- canvasSize?: "full" | "square";
- dependencies?: Record;
- withRenderCount?: boolean;
-}
-
-const {
- files = {},
- exampleTitle,
- template,
- canvasSize,
- dependencies,
- withRenderCount,
-} = Astro.props as Props;
-
-import { Sandpack, type SandpackFiles } from "@codesandbox/sandpack-react";
-import styleCanvasFull from "./canvas-full.css?raw";
-import styleCanvasSquare from "./canvas-square.css?raw";
-
-const html = `
-
-
-
-
- ${exampleTitle} | UseGL Example
-
-
- ${template || ''}
- ${withRenderCount ? 'Renders: 0
' : ''}
-
-
-
-`.replace(/\n\s+\n/, '\n'); // remove the possible empty line
-
-if (files["/styles.css"] == undefined && files["styles.css"] == undefined) {
- let style = canvasSize === "square" ? styleCanvasSquare : styleCanvasFull;
- if (withRenderCount) {
- style += `
-#renders {
- position: absolute;
- left: 1em;
- bottom: 1em;
- color: white;
- font-family: sans-serif;
- font-size: 1.5rem;
-}
-`
- }
- files["/styles.css"] = {
- code: style,
- };
-}
----
-
-
-
-
-
-
diff --git a/docs/src/components/ExamplePage.astro b/docs/src/components/ExamplePage.astro
deleted file mode 100644
index df40e90..0000000
--- a/docs/src/components/ExamplePage.astro
+++ /dev/null
@@ -1,68 +0,0 @@
----
-import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
-
-const examplesFiles = import.meta.glob("../pages/examples/**/index.mdx", {
- eager: true,
- import: "frontmatter",
-});
-
-const examplesMetas = Object.entries(examplesFiles).map(([path, frontmatter]) => ({
- section: upperFirst(path.match(/\/examples\/([^/]*)/)?.[1] || "Other"),
- title: (frontmatter as { title: string }).title,
- link: path.replace(/.*pages(\/examples.*)\/index\.mdx/, "$1"),
-}));
-
-function upperFirst(str: string) {
- return str.charAt(0).toUpperCase() + str.slice(1);
-}
-
-const activeExample = examplesMetas.find((meta) => Astro.url.pathname.includes(meta.link));
-
-const examplesSections = Array.from(new Set(examplesMetas.map((meta) => meta.section)));
-
-const sidebar = [
- ...examplesSections.map((section) => ({
- label: section,
- items: examplesMetas
- .filter((meta) => meta.section === section)
- .map((meta) => ({
- label: meta.title,
- link: meta.link,
- })),
- })),
-];
----
-
-
-
-
-
-
diff --git a/docs/src/content/config.ts b/docs/src/content/config.ts
deleted file mode 100644
index a4eec59..0000000
--- a/docs/src/content/config.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { defineCollection } from "astro:content";
-import { docsSchema } from "@astrojs/starlight/schema";
-
-export const collections = {
- docs: defineCollection({ schema: docsSchema() }),
-};
diff --git a/docs/src/content/docs/docs/introduction/quick-start.mdx b/docs/src/content/docs/docs/introduction/quick-start.mdx
deleted file mode 100644
index 22e11d3..0000000
--- a/docs/src/content/docs/docs/introduction/quick-start.mdx
+++ /dev/null
@@ -1,34 +0,0 @@
----
-title: Quick start
-description: A guide to get started with useGL.
----
-
-import { Tabs, TabItem } from "@astrojs/starlight/components";
-import { PackageManagers } from "starlight-package-managers";
-import { Code } from "@astrojs/starlight/components";
-
-The documentation is a work in progress, and the API of useGL is still subject to changes. For now, you can browse the [examples](/examples/basics/full-screen) to get an idea of how the library works.
-
-A proper documentation will come soon !
-
-## Installation
-
-
-
-## Usage
-
-