WIP Examples and Benchmarks pages

electric-sql · Aug 4, 2024 · 04d81d3 · 04d81d3
1 parent 85ffc75
commit 04d81d3
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 85 deletions.
diff --git a/cibuild.sh b/cibuild.sh
@@ -382,28 +382,17 @@ 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=./benchmarks/index.html>Benchmarks</a> / <a href=./benchmarks/rtt.html>RTT Benchmarks</a></li>
-                    <li><a href=./postgres.html>Postgres xterm REPL</a></li>
-                </ul>
-            </body>
-            </html>" > /tmp/web/demos.html
-
-            mkdir -p /tmp/web/pglite
-            mkdir -p /tmp/web/repl
+            mkdir -p /tmp/web/dist
+            mkdir -p /tmp/web/examples
             mkdir -p /tmp/web/benchmarks
 
             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 ${PGLITE}/dist/* /tmp/web/dist/
+            cp -r ${PGLITE}/examples/* /tmp/web/examples/
             cp -r ${WORKSPACE}/packages/benchmark/dist/* /tmp/web/benchmarks/
         ;;
     esac

diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
@@ -8,7 +8,16 @@ export default defineConfig({
   appearance: 'force-dark',
   base: '/',
   cleanUrls: true,
-  ignoreDeadLinks: 'localhostLinks',
+  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',
@@ -59,6 +68,7 @@ export default defineConfig({
       {
         text: 'Reference',
         items: [
+          { text: 'Examples', link: '/examples/' },
           { text: 'Benchmarks', link: '/benchmarks.md' },
         ]
       }

diff --git a/docs/benchmarks.md b/docs/benchmarks.md
@@ -1 +1,8 @@
-# Benchmarks
+# Benchmarks
+
+*TODO: Writeup*
+
+## Run the benchmarks yourself
+
+- [Benchmark using the SQLite benchmark suite](./benchmark/)
+- [Benchmark round-trim-time for CRUD queries](./benchmark/rtt.html)
diff --git a/docs/examples.md b/docs/examples.md
@@ -0,0 +1,39 @@
+# Examples
+
+We have a number of examples showing how to use PGlite and it's capabilities:
+
+- [Basic](./examples/basic.html)<br>
+  A basic example showing how to initiate a PGlite database and perform queries using `.exec()`
+
+- [Query Params](./examples/query-params.html)<br>
+  Aa example showing how to perform parasitised queries using `.query()` method.
+
+- [Copy](./examples/copy.html)<br>
+  An example showing to use the `COPY` command with the PGlite `/dev/blob` device.
+
+- [Dump Data Dir](./examples/dump-data-dir.html)<br>
+  Example of the `db.dumpDataDir()` method to save a tarball of a database.
+
+- [Live Query](./examples/live.html)<br>
+  Reactivity example using the live query extensions `.live.query()` method.
+
+- [Live Changes](./examples/live-changes.html)<br>
+  Reactivity example using the live query extensions `.live.changes()` method.
+
+- [Live Incremental Query](./examples/live-incremental.html)<br>
+  Reactivity example using the live query extensions `.live.incrementalQuery()` method.
+
+- [Notify and Listen](./examples/notify.html)<br>
+  Example showing the use of the `NOTIFY` and `LISTEN` Postgres commands using PGlites `.listen()` api.
+
+- [OPFS VFS](./examples/opfs.html)<br>
+  An example deponstrating the [OPFS Access Handle Pool VFS](./docs/filesystems.md#opfs-ahp-fs).
+
+- [PL/PGSQL](./examples/copy.html)<br>
+  Demonstration of PGlites support for Postgres's built in SQL procedural language extension "PL/PGSQL".
+
+- [Extension: `pgvector`](./examples/vector.html)<br>
+  An example showing how to use [pgvector](https://github.com/pgvector/pgvector) with PGlite.
+
+- [Multi Tab Worker](./examples/worker.html)<br>
+  Demonstration of the multi tab worker, enabling multiple browser tabs to share a PGlite database.
diff --git a/packages/pglite/examples/dumpDataDir.html b/packages/pglite/examples/dumpDataDir.html
diff --git a/packages/pglite/examples/dumpDataDir.js b/packages/pglite/examples/dumpDataDir.js
diff --git a/packages/pglite/examples/index.html b/packages/pglite/examples/index.html