parent dcb3773

author Sam Willis <[email protected]> 1721687437 +0100 committer Sam Willis <[email protected]> 1722326680 +0100 Docs site WIP WIP Docs More docs Add docs site to web deploy Tweeks ci Add docs to pnpm workspace ci WIP WIP WIP WIP Muti tab worker docs Worker options
electric-sql · Jul 30, 2024 · 22668ce · 22668ce
1 parent dcb3773
commit 22668ce
Show file tree

Hide file tree

Showing 31 changed files with 2,257 additions and 21 deletions.
diff --git a/.github/workflows/build_pglite.yml b/.github/workflows/build_pglite.yml
@@ -113,6 +113,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,6 +1,6 @@
 .DS_Store
 
-/node_modules
+node_modules
 /packages/pglite/dist
 /packages/pglite/pgdata-test
 /packages/pglite/package-lock.json
@@ -10,3 +10,6 @@
 /postgresql-16.3.tar.bz2
 /postgresql-16.3
 /postgresql
+
+docs/.vitepress/dist
+docs/.vitepress/cache
diff --git a/cibuild.sh b/cibuild.sh
@@ -344,17 +344,17 @@ do
         demo-site) echo "==================== demo-site =========================="
 
             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=./pglite/benchmark/index.html>Benchmarks</a> / <a href=./pglite/benchmark/rtt.html>RTT Benchmarks</a></li>
-        <li><a href=./postgres.html>Postgres xterm REPL</a></li>
-    </ul>
-</body>
-</html>" > /tmp/web/index.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=./pglite/benchmark/index.html>Benchmarks</a> / <a href=./pglite/benchmark/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

diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
@@ -0,0 +1,84 @@
+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: 'localhostLinks',
+  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: 'Extensions',
+        items: [
+          { text: 'Extensions Catalog', link: '/extensions/' },
+          { text: 'Extension Development', link: '/extensions/development' }
+        ]
+      },
+      {
+        text: 'Reference',
+        items: [
+          { 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,124 @@
+@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)
+    })
+  }
+}
diff --git a/docs/benchmarks.md b/docs/benchmarks.md
@@ -0,0 +1 @@
+# Benchmarks
diff --git a/docs/components/HeroImage.vue b/docs/components/HeroImage.vue
@@ -0,0 +1,104 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+
+const positions = new Array(5).fill(0).map((_, i) => {
+  return {
+    a: -((i * 30) - 20),
+    o: 1 - (i * 0.15),
+    s: 1 - (i * 0.05),
+  };
+});
+
+const heroImage = ref(null);
+
+const handleMouseMove = (event) => {
+  const { clientX, clientY } = event;
+  const width = window.innerWidth;
+  const height = window.innerHeight;
+  const rotateX = ((clientY / height) * 5) - 10;
+  const rotateY = ((clientX / width) * 5) - 35;
+
+  if (heroImage.value) {
+    heroImage.value.style.transform = `translateZ(-100px) scale(1.2) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+  }
+};
+
+onMounted(() => {
+  window.addEventListener('mousemove', handleMouseMove);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('mousemove', handleMouseMove);
+});
+</script>
+
+<template>
+  <div class="custom-hero-image-wrapper">
+    <div ref="heroImage" class="custom-hero-image">
+      <img src="/public/img/brand/icon-light.svg" class="main" />
+      <div class="chain">
+        <div
+          class="baby"
+          v-for="(pos, i) in positions"
+          :key="i"
+          :style="{
+            transform: `rotateY(${pos.a}deg) scale(${pos.s})`,
+            filter: `brightness(${pos.o})`,
+          }"
+        >
+          <img src="/public/img/brand/icon-light.svg" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.custom-hero-image-wrapper {
+  position: relative;
+  perspective: 1000px;
+}
+.custom-hero-image {
+  position: relative;
+  transform-style: preserve-3d;
+  transform: translateZ(-100px) scale(1.2) rotateX(-10deg) rotateY(-35deg);
+  transition: transform 0.1s ease-out;
+}
+.elephant-chain {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform: translateZ(50px);
+}
+.main {
+  transform: translateZ(-50px) scale(1.1);
+}
+.chain {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d; 
+}
+.baby {
+  position: absolute;
+  bottom: 0;
+  left: 20%;
+  width: 45%;
+  height: 45%;
+  transform-origin: 0 0 -300px;
+}
+.baby img {
+  transform: translate(-50%, 0);
+  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0.5));
+}
+
+@media (max-width: 959px) {
+  .custom-hero-image-wrapper {
+    transform: scale(0.6);
+  }
+}
+</style>