start website

.github/workflows/site.yaml

@@ -14,17 +14,17 @@ jobs:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
     steps:
-      - uses: actions/checkout@v3
-      - uses: mymindstorm/setup-emsdk@v12
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          version: "latest"
-      - run: ./scripts/vendor.sh
-      - run: make sqlite-vec.h
-      - run: make wasm
-      - run: make site
+          cache: npm
+          cache-dependency-path: site/package-lock.json
+      - run: npm ci
+        working-directory: site/
+      - run: make site-build
       - uses: actions/configure-pages@v2
       - uses: actions/upload-pages-artifact@v1
         with:
-          path: dist/.site
+          path: site/.vitepress/dist
       - id: deployment
         uses: actions/deploy-pages@v1

Makefile

@@ -170,7 +170,8 @@ test-loadable-snapshot-update: loadable
 test-loadable-watch:
 	watchexec -w sqlite-vec.c -w tests/test-loadable.py -w Makefile --clear -- make test-loadable
 
-
+site-build:
+	npm --prefix site run build
 
 # ███████████████████████████████ WASM SECTION ███████████████████████████████
 
@@ -220,29 +221,3 @@ $(TARGET_WASM_WASM): $(SQLITE_WASM_COMPILED_WASM)
 wasm: $(TARGET_WASM)
 
 # ███████████████████████████████   END WASM   ███████████████████████████████
-
-
-# ███████████████████████████████ SITE SECTION ███████████████████████████████
-
-WASM_TOOLKIT_NPM_TARGZ=$(BUILD_DIR)/sqlite-wasm-toolkit-npm.tar.gz
-
-SITE_DIR=$(prefix)/.site
-TARGET_SITE=$(prefix)/.site/index.html
-
-$(WASM_TOOLKIT_NPM_TARGZ):
-	curl -o $@ -q https://registry.npmjs.org/@alex.garcia/sqlite-wasm-toolkit/-/sqlite-wasm-toolkit-0.0.1-alpha.7.tgz
-
-$(SITE_DIR)/slim.js $(SITE_DIR)/slim.css: $(WASM_TOOLKIT_NPM_TARGZ) $(SITE_DIR)
-	tar -xvzf $< -C $(SITE_DIR) --strip-components=2 package/dist/slim.js package/dist/slim.css
-
-
-$(SITE_DIR):
-	mkdir -p $(SITE_DIR)
-
-# $(TARGET_WASM_MJS) $(TARGET_WASM_WASM)
-$(TARGET_SITE): site/index.html $(SITE_DIR)/slim.js $(SITE_DIR)/slim.css
-	cp $(TARGET_WASM_MJS) $(SITE_DIR)
-	cp $(TARGET_WASM_WASM) $(SITE_DIR)
-	cp $< $@
-site: $(TARGET_SITE)
-# ███████████████████████████████   END SITE   ███████████████████████████████

site/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.vitepress/cache

site/.vitepress/config.mts

@@ -0,0 +1,177 @@
+import { defineConfig, DefaultTheme, HeadConfig } from "vitepress";
+import { readFileSync } from "node:fs";
+import { join, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const PROJECT = "sqlite-vec";
+const description = "A vector search SQLite extension that runs anywhere!";
+
+const VERSION = readFileSync(
+  join(dirname(fileURLToPath(import.meta.url)), "..", "..", "VERSION"),
+  "utf8"
+);
+
+function head(): HeadConfig[] {
+  return [
+    [
+      "link",
+      {
+        rel: "shortcut icon",
+        type: "image/svg+xml",
+        href: "favicon.svg",
+      },
+    ],
+    [
+      "script",
+      {
+        defer: "",
+        "data-domain": "alexgarcia.xyz/sqlite-vec",
+        src: "https://plausible.io/js/script.js",
+      },
+    ],
+  ];
+}
+
+const guides = {
+  text: "Guides",
+  items: [],
+};
+
+function nav(): DefaultTheme.NavItem[] {
+  return [
+    { text: "Home", link: "/" },
+    //guides,
+    { text: "API Reference", link: "/api-reference" },
+    { text: "♥ Sponsor", link: "https://github.com/sponsors/asg017" },
+    {
+      text: `v${VERSION}`,
+      items: [
+        {
+          text: "Github Release",
+          link: `https://github.com/asg017/${PROJECT}/releases/${VERSION}`,
+        },
+        {
+          text: "Bindings",
+          items: [
+            {
+              text: "Python: PyPi package",
+              link: `https://pypi.org/project/${PROJECT}`,
+            },
+            {
+              text: "Node.js: NPM package",
+              link: `https://www.npmjs.com/package/${PROJECT}`,
+            },
+            {
+              text: "Ruby: Ruby gem",
+              link: `https://rubygems.org/gems/${PROJECT}`,
+            },
+            {
+              text: "Rust: Cargo crate",
+              link: `https://crates.io/crates/${PROJECT}`,
+            },
+            {
+              text: "Golang: Go module",
+              link: `https://pkg.go.dev/github.com/asg017/${PROJECT}/bindings/go/cgo`,
+            },
+            {
+              text: "Datasette: Plugin",
+              link: `https://datasette.io/plugins/datasette-${PROJECT}`,
+            },
+            {
+              text: "sqlite-utils: Plugin",
+              link: `https://datasette.io/plugins/datasette-${PROJECT}`,
+            },
+          ],
+        },
+      ],
+    },
+  ];
+}
+
+function sidebar(): DefaultTheme.SidebarItem[] {
+  return [
+    {
+      text: "Getting Started",
+      collapsed: false,
+      items: [
+        {
+          text: "Quickstart",
+          link: "/getting-started",
+        },
+      ],
+    },
+    {
+      text: "Using with...",
+      collapsed: false,
+      items: [
+        { text: "Python", link: "/python" },
+        { text: "JavaScript (Server-side)", link: "/js" },
+        { text: "JavaScript+WASM (Browser)", link: "/wasm-browser" },
+        { text: "Ruby", link: "/ruby" },
+        { text: "Rust", link: "/rust" },
+        { text: "Go", link: "/go" },
+        { text: "C/C++", link: "/c" },
+        { text: "Datasette", link: "/datasette" },
+        { text: "sqlite-utils", link: "/sqlite-utils" },
+        { text: "Loadable Extension", link: "/loadable" },
+      ],
+    },
+    //guides,
+    {
+      text: "Comparisons with...",
+      link: "/compare",
+    },
+    {
+      text: "Documentation",
+      items: [
+        { text: "Building from Source", link: "/building-source" },
+        { text: "API Reference", link: "/api-reference" },
+      ],
+    },
+    {
+      text: "See also",
+      items: [
+        {
+          text: "sqlite-ecosystem",
+          link: "https://github.com/asg017/sqlite-ecosystem",
+        },
+      ],
+    },
+  ];
+}
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: PROJECT,
+  description,
+  lastUpdated: true,
+  head: head(),
+  base: "/sqlite-vec/",
+  themeConfig: {
+    nav: nav(),
+
+    sidebar: sidebar(),
+
+    footer: {
+      message: "MIT License",
+      copyright: "Copyright © 2024 Alex Garcia",
+    },
+    outline: "deep",
+    search: {
+      provider: "local",
+    },
+    socialLinks: [
+      { icon: "github", link: `https://github.com/asg017/${PROJECT}` },
+    ],
+    editLink: {
+      pattern: `https://github.com/asg017/${PROJECT}/edit/main/site/:path`,
+    },
+  },
+  rewrites: {
+    "using/:pkg.md": ":pkg.md",
+    "guides/:pkg.md": ":pkg.md",
+  },
+  markdown: {
+    languages: [JSON.parse(readFileSync("sqlite.tmLanguage.json", "utf8"))],
+  },
+});

site/.vitepress/theme/index.ts

@@ -0,0 +1,21 @@
+// https://vitepress.dev/guide/custom-theme
+import { h } from "vue";
+import type { Theme } from "vitepress";
+import DefaultTheme from "vitepress/theme";
+import "./style.css";
+
+export default {
+  extends: DefaultTheme,
+  Layout: () => {
+    return h(DefaultTheme.Layout, null, {
+      // https://vitepress.dev/guide/extending-default-theme#layout-slots
+      "layout-top": () =>
+        h("marquee", { class: "banner", scrollamount: "10" }, [
+          "🚧🚧🚧 sqlite-vec is still in beta, and this documentation is incomplete! Watch the repo for updates 🚧🚧🚧",
+        ]),
+    });
+  },
+  enhanceApp({ app, router, siteData }) {
+    // ...
+  },
+} satisfies Theme;

site/.vitepress/theme/style.css

@@ -0,0 +1,155 @@
+/**
+ * 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,
+    #f5c2e7 30%,
+    #94e2d5 /*#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;
+}
+
+:root {
+  --vp-layout-top-height: 30px;
+}
+.banner {
+  position: fixed;
+  z-index: var(--vp-z-index-layout-top);
+  top: 0;
+  left: 0;
+  right: 0;
+  text-align: center;
+  height: var(--vp-layout-top-height);
+  line-height: var(--vp-layout-top-height);
+  background: #f9e2af;
+  color: black;
+}

site/index.html

@@ -1,23 +0,0 @@
-<html>
-  <body>
-    <h1>sqlite-vec</h1>
-    <div id="target">
-
-    </div>
-    <link rel="stylesheet" href="./slim.css"/>
-    <script type="module">
-      import {attach} from "./slim.js";
-      import {default as init} from "./sqlite3.mjs";
-      const sqlite3 = await init();
-      const v = new sqlite3.oo1.DB(":memory:").selectValue('select vec_version()');
-      document.querySelector('h1').textContent += `(${v})`;
-
-      attach(document.body.querySelector('#target'), sqlite3,
-`select
-  sqlite_version(),
-  vec_version(),
-  vec_to_json(X'00000000000080bf');
-`);
-    </script>
-  </body>
-</html>

site/index.md

@@ -0,0 +1,42 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+  name: "sqlite-vec"
+  text: ""
+  tagline: A vector search SQLite extension that runs anywhere!
+  actions:
+    - theme: brand
+      text: Getting Started
+      link: /markdown-examples
+    - theme: alt
+      text: API Reference
+      link: /api-reference
+
+features:
+  - title: Runs everywhere
+    details: On the server, in the browser with WASM, mobile devices, and more!
+  - title: Bindings for many languages
+    details: Python, Ruby, Node.js/Deno/Bun, Go, Rust, and more!
+  - title: Only SQL
+    details: No extra configuration or server, only CREATE/INSERT/SELECTs
+---
+
+```sqlite
+create virtual table vec_movies using vec0(
+  synopsis_embedding float[768]
+);
+
+insert into vec_movies(rowid, synopsis_embedding)
+  select
+    rowid,
+    embed(synopsis) as synopsis_embedding
+  from movies;
+
+select rowid, distance
+from vec_movies
+where synopsis_embedding match embed('scary futuristic movies')
+order by distance
+limit 20;
+```

site/package.json

@@ -0,0 +1,14 @@
+{
+  "scripts": {
+    "dev": "vitepress dev",
+    "build": "vitepress build",
+    "preview": "vitepress preview"
+  },
+  "devDependencies": {
+    "vue": "^3.4.26"
+  },
+  "dependencies": {
+    "@types/node": "^20.12.8",
+    "vitepress": "^1.1.4"
+  }
+}

site/project.data.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from "vitepress";
+import { readFileSync } from "node:fs";
+import { join, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const PROJECT = "sqlite-vec";
+const VERSION = readFileSync(
+  join(dirname(fileURLToPath(import.meta.url)), "..", "VERSION"),
+  "utf8"
+);
+
+export default {
+  load() {
+    return {
+      PROJECT,
+      VERSION,
+    };
+  },
+};