electric-sql · samwillis · Aug 8, 2024 · Jul 22, 2024 · Jul 31, 2024 · Aug 3, 2024
diff --git a/.github/workflows/build_pglite.yml b/.github/workflows/build_pglite.yml
@@ -126,6 +126,13 @@ jobs:
         run: |
           bash ./cibuild.sh demo-site
 
+      - name: Build docs
+        working-directory: ./docs
+        run: |
+          pnpm install
+          pnpm run docs:build
+          cp -r ./.vitepress/dist/* /tmp/web/
+
       - name: Upload Postgres to Github artifacts
         id: upload-postgres-wasm
         uses: actions/upload-artifact@v4

diff --git a/.gitignore b/.gitignore
@@ -1,7 +1,7 @@
 .DS_Store
 .vscode
 
-/node_modules
+node_modules
 /packages/pglite/dist
 /packages/pglite/pgdata-test
 /packages/pglite/package-lock.json
@@ -11,3 +11,6 @@
 /postgresql-16.3.tar.bz2
 /postgresql-16.3
 /postgresql
+
+docs/.vitepress/dist
+docs/.vitepress/cache
diff --git a/cibuild.sh b/cibuild.sh
@@ -382,29 +382,18 @@ do
         ;;
 
         demo-site) echo "==================== demo-site =========================="
+            # Move all existing files to a subfolder
+            mkdir -p /tmp/web/x-term-repl
+            mv -r /tmp/web/* /tmp/web/x-term-repl/
 
-            echo "<html>
-<body>
-    <ul>
-        <li><a href=./pglite/examples/repl.html>PGlite REPL (in-memory)</a></li>
-        <li><a href=./pglite/examples/repl-idb.html>PGlite REPL (indexedDB)</a></li>
-        <li><a href=./pglite/examples/notify.html>list/notify test</a></li>
-        <li><a href=./pglite/examples/index.html>All PGlite Examples</a></li>
-        <li><a href=./benchmark/index.html>Benchmarks</a> / <a href=./benchmark/rtt.html>RTT Benchmarks</a></li>
-        <li><a href=./postgres.html>Postgres xterm REPL</a></li>
-    </ul>
-</body>
-</html>" > /tmp/web/index.html
-
-            mkdir -p /tmp/web/pglite
-            mkdir -p /tmp/web/repl
-            mkdir -p /tmp/web/benchmarks
+            mkdir -p /tmp/web/dist
+            mkdir -p /tmp/web/examples
+            mkdir -p /tmp/web/benchmark
 
             PGLITE=$(pwd)/packages/pglite
-            cp -r ${PGLITE}/dist /tmp/web/pglite/
-            cp -r ${PGLITE}/examples /tmp/web/pglite/
-            cp -r ${WORKSPACE}/packages/repl/dist-webcomponent /tmp/web/repl/
-            cp -r ${WORKSPACE}/packages/benchmark/dist/* /tmp/web/benchmarks/
+            cp -r ${PGLITE}/dist/* /tmp/web/dist/
+            cp -r ${PGLITE}/examples/* /tmp/web/examples/
+            cp -r ${WORKSPACE}/packages/benchmark/dist/* /tmp/web/benchmark/
         ;;
     esac
     shift

diff --git a/docs/.prettierignore b/docs/.prettierignore
@@ -0,0 +1,2 @@
+.vitepress/dist
+.vitepress/cache
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
@@ -0,0 +1,95 @@
+import { defineConfig } from 'vitepress'
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  lang: 'en',
+  title: 'PGlite',
+  description: 'Lightweight WASM Postgres',
+  appearance: 'force-dark',
+  base: '/',
+  cleanUrls: true,
+  ignoreDeadLinks: [
+    (url) => {
+      // Ignore links to our example pages
+      return url.toLowerCase().startsWith('./examples')
+    },
+    (url) => {
+      // Ignore links to the benchmark runners
+      return url.toLowerCase().startsWith('./benchmark/')
+    },
+  ],
+  head: [
+    [
+      'link',
+      {
+        rel: 'icon',
+        type: 'image/svg+xml',
+        href: '/img/brand/icon-light.svg',
+      },
+    ],
+  ],
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    logo: {
+      dark: '/img/brand/logo.svg',
+      light: '/img/brand/logo-light.svg',
+    },
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'About', link: '/docs/about' },
+      { text: 'Docs', link: '/docs/' },
+      { text: 'Extensions', link: '/extensions/' },
+      { text: 'ElectricSQL', link: 'https://www.electric-sql.com' },
+    ],
+    sidebar: [
+      {
+        text: 'About',
+        items: [{ text: 'What is PGlite', link: '/docs/about' }],
+      },
+      {
+        text: 'Docs',
+        items: [
+          { text: 'Getting Started', link: '/docs/' },
+          { text: 'PGlite API', link: '/docs/api' },
+          { text: 'Live Queries', link: '/docs/live-queries' },
+          { text: 'Filesystems', link: '/docs/filesystems' },
+          { text: 'Framework Hooks', link: '/docs/framework-hooks' },
+          { text: 'Multi-tab Worker', link: '/docs/multi-tab-worker' },
+          { text: 'REPL Component', link: '/docs/repl' },
+          { text: 'ORM Support', link: '/docs/orm-support' },
+        ],
+      },
+      {
+        text: 'Extensions',
+        items: [
+          { text: 'Extensions Catalog', link: '/extensions/' },
+          { text: 'Extension Development', link: '/extensions/development' },
+        ],
+      },
+      {
+        text: 'Reference',
+        items: [
+          { text: 'Examples', link: '/examples.md' },
+          { text: 'Benchmarks', link: '/benchmarks.md' },
+        ],
+      },
+    ],
+    siteTitle: false,
+    socialLinks: [
+      { icon: 'discord', link: 'https://discord.electric-sql.com' },
+      { icon: 'github', link: 'https://github.com/electric-sql/pglite' },
+    ],
+    footer: {
+      message:
+        'Dual-licensed under <a href="https://github.com/electric-sql/pglite/blob/main/LICENSE">Apache 2.0</a> and the <a href="https://github.com/electric-sql/pglite/blob/main/POSTGRES-LICENSE">PostgreSQL License</a>',
+      copyright: '© <a href="https://electric-sql.com/">ElectricSQL</a>',
+    },
+  },
+  vue: {
+    template: {
+      compilerOptions: {
+        isCustomElement: (tag) => tag.startsWith('pglite-'),
+      },
+    },
+  },
+})
diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
@@ -0,0 +1,125 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');
+
+:root,
+.dark {
+  --vp-c-indigo-1: #d0bcff;
+  --vp-c-indigo-2: #998fe7;
+  --vp-c-indigo-3: #7e78db;
+
+  --vp-nav-logo-height: 30px;
+
+  --electric-color: #00d2a0;
+  --ddn-color: #d0bcff;
+  --pglite-color: #f6f95c;
+
+  --vp-c-brand-1: var(--pglite-color);
+  --vp-c-brand-2: #f1f35e;
+  --vp-c-brand-3: #d8da53;
+}
+
+.dark {
+  --vp-c-text-1: rgba(255, 255, 245, 0.92);
+  --vp-c-text-2: rgba(235, 235, 245, 0.75);
+  --vp-c-text-3: rgba(235, 235, 245, 0.55);
+}
+
+.img-row {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  flex-direction: row;
+  margin: 20px 0;
+  gap: 10px;
+}
+.img-row-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+@media (max-width: 767px) {
+  .img-row-2 {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+.img-border {
+  border: 1px #ccc solid;
+  border-radius: 10px;
+  padding: 10px;
+  background: rgb(20, 21, 23);
+}
+figure {
+  margin: 40px 0;
+}
+figcaption {
+  text-align: right;
+  font-size: 90%;
+  max-width: 460px;
+  margin-left: auto;
+}
+
+iframe {
+  color-scheme: auto;
+}
+.twitter-tweet {
+  margin: 35px auto -95px !important;
+}
+.twitter-tweet iframe {
+  transform: scale(0.8);
+  transform-origin: top left;
+}
+
+.VPHomeHero .VPImage.image-src {
+  max-width: min(calc(250px + 25vw), 560px);
+  margin-left: -40px;
+  margin-top: 10px;
+}
+@media (max-width: 959px) {
+  .VPHomeHero .image .image-container {
+    height: calc(190px + 15vw) !important;
+    margin-top: -20px;
+  }
+  .VPHomeHero .VPImage.image-src {
+    margin-left: 0px;
+  }
+}
+
+.VPFeatures {
+  padding-top: 15px !important;
+  padding-bottom: 45px;
+}
+.VPFeature .VPImage {
+  width: 50px;
+}
+.VPFeature h2.title {
+  font-size: 20px;
+}
+.VPFeature.link[href='/product/electric']:hover {
+  border-color: var(--electric-color);
+}
+.VPFeature.link[href='/product/pglite']:hover {
+  border-color: var(--pglite-color);
+}
+
+.VPFeature .details {
+  font-weight: 600 !important;
+}
+
+.product-icon {
+  width: 84px;
+  margin-bottom: 20px;
+}
+
+.about-zap {
+  max-width: min(calc(150px + 25vw), 420px);
+  margin: -20px 0 30px;
+}
+@media (max-width: 767px) {
+  .about-zap-container {
+    display: none;
+  }
+}
+
+.vp-doc blockquote {
+  margin: 25px 10px 30px;
+}
+
+.VPButton.brand {
+  color: var(--vp-c-gray-3) !important;
+}
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
@@ -0,0 +1,14 @@
+// .vitepress/theme/index.js
+import { h } from 'vue'
+import DefaultTheme from 'vitepress/theme-without-fonts'
+import './custom.css'
+import HeroImage from '../../components/HeroImage.vue'
+
+export default {
+  extends: DefaultTheme,
+  Layout() {
+    return h(DefaultTheme.Layout, null, {
+      'home-hero-image': () => h(HeroImage),
+    })
+  },
+}