doc updates

2026-04-25 08:46:49 +02:00 · 2024-06-22 16:46:33 -07:00 · 2024-06-22 16:46:33 -07:00 · b62f6f19a8
commit b62f6f19a8
parent df48ac2416
31 changed files with 751 additions and 97 deletions
--- a/site/.vitepress/theme/HeroImg.vue
+++ b/site/.vitepress/theme/HeroImg.vue
@ -0,0 +1,38 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div
+    style="
+      background: var(--vp-c-default-3);
+      padding: -4px 12px;
+      border-radius: 10px;
+    "
+  >
+    <div>
+      <div class="language-sqlite vp-adaptive-theme">
+        <pre
+          class="shiki shiki-themes github-light github-dark vp-code"
+        ><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- store 768-dimensional vectors in a vec0 virtual table</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">create</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> virtual</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> vec_movies </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">using</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> vec0(</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  synopsis_embedding </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">float</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[768]</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- insert vectors into the table, as JSON or compact BLOBs</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">insert into</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> vec_movies(rowid, synopsis_embedding)</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  select</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    rowid,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    embed(synopsis) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">as</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> synopsis_embedding</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  from</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> movies;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- KNN search!</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">select</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  rowid,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  distance</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> vec_movies</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">where</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> synopsis_embedding </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">match</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> embed(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'scary futuristic movies'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">order by</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> distance</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">limit</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre>
+      </div>
+    </div>
+  </div>
+</template>
--- a/site/.vitepress/theme/Sponsors.vue
+++ b/site/.vitepress/theme/Sponsors.vue
@ -11,7 +11,7 @@ const sponsors = computed(() => {
        {
          name: "Mozilla Builders",
          url: "",
-          img: withBase("./mozilla.svg"),
+          img: withBase("/mozilla.svg"),
        },
      ],
    },
@ -21,7 +21,7 @@ const sponsors = computed(() => {
        {
          name: "Fly.io",
          url: "https://fly.io",
-          img: withBase("./flyio.svg"),
+          img: withBase("/flyio.svg"),
        },
      ],
    },
@ -31,7 +31,7 @@ const sponsors = computed(() => {
        {
          name: "Turso",
          url: "https://turso.tech",
-          img: withBase("./turso.svg"),
+          img: withBase("/turso.svg"),
        },
      ],
    },
@ -41,7 +41,7 @@ const sponsors = computed(() => {
        {
          name: "SQLite Cloud",
          url: "https://sqlitecloud.io",
-          img: withBase("./sqlitecloud.svg"),
+          img: withBase("/sqlitecloud.svg"),
        },
      ],
    },
@ -51,18 +51,20 @@ const sponsors = computed(() => {

 <template>
  <!--<a class="sponsors-aside-text" href="/sponsor/">Sponsors</a>-->
-  <VPDocAsideSponsors :data="sponsors" />
-  <div
-    style="
-      font-size: 14px;
-      text-align: center;
-      font-style: italic;
-      margin-top: 4px;
-    "
-  >
-    <a href="https://github.com/asg017/sqlite-vec#sponsors"
-      >Become a sponsor! ↗</a
+  <div>
+    <VPDocAsideSponsors :data="sponsors" />
+    <div
+      style="
+        font-size: 14px;
+        text-align: center;
+        font-style: italic;
+        margin-top: 4px;
+      "
    >
+      <a href="https://github.com/asg017/sqlite-vec#sponsors"
+        >Become a sponsor! ↗</a
+      >
+    </div>
  </div>
 </template>

--- a/site/.vitepress/theme/index.ts
+++ b/site/.vitepress/theme/index.ts
@ -4,6 +4,7 @@ import type { Theme } from "vitepress";
 import DefaultTheme from "vitepress/theme";
 import "./style.css";
 import Sponsors from "./Sponsors.vue";
+import HeroImg from "./HeroImg.vue";

 export default {
  extends: DefaultTheme,
@ -14,7 +15,7 @@ export default {
        h("marquee", { class: "banner", scrollamount: "10" }, [
          "🚧🚧🚧 sqlite-vec is still in beta, and this documentation is incomplete! Watch the repo for updates 🚧🚧🚧",
        ]),
-      "home-hero-image": () => h("div", {}, [""]),
+      //"home-hero-image": () => h(HeroImg),
      "aside-ads-before": () => h(Sponsors),
    });
  },
--- a/site/.vitepress/theme/style.css
+++ b/site/.vitepress/theme/style.css
@ -1,3 +1,21 @@
+/*@import "https://code.cdn.mozilla.net/fonts/zilla-slab.css";*/
+
+@font-face {
+  font-family: "ZillaSlab-SemiBold";
+  src: url("/fonts/ZillaSlab-SemiBold.woff");
+  src: url("/fonts/ZillaSlab-SemiBold.woff2") format("woff2"),
+    url("/fonts/ZillaSlab-SemiBold.woff") format("woff"),
+    url("/fonts/ZillaSlab(-SemiBold).otf") format("opentype"),
+    url("/fonts/ZillaSlab-SemiBold.ttf") format("truetype");
+  font-weight: 600;
+  font-style: normal;
+}
+
+.VPHero h1,
+.VPNavBarTitle .title {
+  font-family: "ZillaSlab-SemiBold";
+  font-size: 1.5rem;
+}
 /**
 * Customize default theme styling by overriding CSS variables:
 * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
@ -68,6 +86,17 @@
  --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);
+
+  --vp-c-brand-1x: #a6d189;
+  --vp-c-brand-1x: #a6da95;
+  --vp-c-brand-1x: #a6e3a1;
+}
+
+:root {
+  --vp-c-brand-1: #1e66f5;
+}
+.dark {
+  --vp-c-brand-1: #89b4fa;
 }

 /**
@ -92,19 +121,20 @@

 :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-name-background: black;

+  /*
  --vp-home-hero-image-background-image: linear-gradient(
    -45deg,
    #bd34fe 50%,
    #47caff 50%
  );
  --vp-home-hero-image-filter: blur(44px);
+  */
+}
+
+.dark {
+  --vp-home-hero-name-background: white;
 }

@media (min-width: 640px) {