WIP Examples and Benchmarks pages

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

Hide file tree

Showing 11 changed files with 3,111 additions and 713 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.md' },
           { text: 'Benchmarks', link: '/benchmarks.md' },
         ]
       }

diff --git a/docs/benchmarks.md b/docs/benchmarks.md
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:
+
+- <a href="./examples/basic.html" target="_blank">Basic</a><br>
+  A basic example showing how to initiate a PGlite database and perform queries using `.exec()`
+
+- <a href="./examples/query-params.html" target="_blank">Query Params</a><br>
+  Aa example showing how to perform parasitised queries using `.query()` method.
+
+- <a href="./examples/copy.html" target="_blank">Copy</a><br>
+  An example showing to use the `COPY` command with the PGlite `/dev/blob` device.
+
+- <a href="./examples/dump-data-dir.html" target="_blank">Dump Data Dir</a><br>
+  Example of the `db.dumpDataDir()` method to save a tarball of a database.
+
+- <a href="./examples/live.html" target="_blank">Live Query</a><br>
+  Reactivity example using the live query extensions `.live.query()` method.
+
+- <a href="./examples/live-changes.html" target="_blank">Live Changes</a><br>
+  Reactivity example using the live query extensions `.live.changes()` method.
+
+- <a href="./examples/live-incremental.html" target="_blank">Live Incremental Query</a><br>
+  Reactivity example using the live query extensions `.live.incrementalQuery()` method.
+
+- <a href="./examples/notify.html" target="_blank">Notify and Listen</a><br>
+  Example showing the use of the `NOTIFY` and `LISTEN` Postgres commands using PGlites `.listen()` api.
+
+- <a href="./examples/opfs.html" target="_blank">OPFS VFS</a><br>
+  An example deponstrating the [OPFS Access Handle Pool VFS](./docs/filesystems.md#opfs-ahp-fs).
+
+- <a href="./examples/copy.html" target="_blank">PL/PGSQL</a><br>
+  Demonstration of PGlites support for Postgres's built in SQL procedural language extension "PL/PGSQL".
+
+- <a href="./examples/vector.html" target="_blank">Extension: `pgvector`</a><br>
+  An example showing how to use [pgvector](https://github.com/pgvector/pgvector) with PGlite.
+
+- <a href="./examples/worker.html" target="_blank">Multi Tab Worker</a><br>
+  Demonstration of the multi tab worker, enabling multiple browser tabs to share a PGlite database.
diff --git a/docs/public/img/benckmark/baseline.svg b/docs/public/img/benckmark/baseline.svg
diff --git a/docs/public/img/benckmark/rtt.svg b/docs/public/img/benckmark/rtt.svg
diff --git a/docs/public/img/benckmark/sqlite-suite.svg b/docs/public/img/benckmark/sqlite-suite.svg