Build ggsql playground into quarto documentation

Author: georgestagg

.github/workflows/publish.yaml

@@ -8,7 +8,11 @@ on:
   workflow_dispatch:
 
 jobs:
+  build-wasm:
+    uses: ./.github/workflows/wasm.yaml
+
   publish-website:
+    needs: build-wasm
     runs-on: ubuntu-latest
     permissions:
       contents: write
@@ -22,6 +26,12 @@ jobs:
           sudo docker image prune --all --force
           sudo docker builder prune -a
 
+      - name: Download WASM demo artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: wasm-demo
+          path: doc/playground
+
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:

.github/workflows/wasm.yaml

@@ -6,6 +6,7 @@ on:
   pull_request:
     branches: [main]
   workflow_dispatch:
+  workflow_call:
 
 jobs:
   build:
@@ -47,10 +48,24 @@ jobs:
       - name: Install wasm-pack
         run: cargo install wasm-pack
 
+      - name: Build WASM library
+        working-directory: ggsql-wasm/library
+        run: npm install && npm run build
+
       - name: Build WASM package
         working-directory: ggsql-wasm
         run: wasm-pack build --target web --profile wasm --no-opt
 
       - name: Optimise WASM binary
         working-directory: ggsql-wasm
         run: wasm-opt pkg/ggsql_wasm_bg.wasm -o pkg/ggsql_wasm_bg.wasm -Oz --all-features
+
+      - name: Build WASM demo
+        working-directory: ggsql-wasm/demo
+        run: npm install && npm run build
+
+      - name: Upload demo artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: wasm-demo
+          path: ggsql-wasm/demo/dist/

doc/.gitignore

@@ -1,3 +1,4 @@
 /.quarto/
 **/*.quarto_ipynb
 _site
+playground

doc/_quarto.yml

@@ -1,5 +1,7 @@
 project:
   type: website
+  resources:
+    - playground/**
 
 website:
   title: "ggsql"
@@ -48,6 +50,8 @@ website:
           - text: "`LABEL`"
             href: syntax/clause/label.qmd
       - examples.qmd
+      - text: Playground
+        href: playground/index.html
     tools:
       - icon: github
         menu:

doc/index.qmd

@@ -16,6 +16,7 @@ A declarative visualization language that extends SQL with powerful data visuali
 ::: {.hero-buttons}
 [Get Started](installation.qmd){.btn .btn-secondary .btn-lg}
 [View Examples](examples.qmd){.btn .btn-outline-secondary .btn-lg}
+[Playground](playground/index.html){.btn .btn-outline-secondary .btn-lg}
 :::
 
 :::

ggsql-wasm/build-wasm.sh

@@ -0,0 +1,48 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+REPO_ROOT="$(cd "$SCRIPT_DIR/.." && pwd)"
+
+SKIP_BINARY=false
+for arg in "$@"; do
+    case "$arg" in
+        --skip-binary) SKIP_BINARY=true ;;
+        *) echo "Unknown argument: $arg" >&2; exit 1 ;;
+    esac
+done
+
+check_wasm32_support() {
+    local cc="${CC:-clang}"
+    if ! echo "int main(){return 0;}" | \
+        "$cc" -target wasm32-unknown-unknown -c -o /dev/null -x c - 2>/dev/null; then
+        echo "Error: '$cc' does not support the wasm32-unknown-unknown target." >&2
+        echo "Install an LLVM/clang toolchain with wasm backend support (e.g. 'sudo apt-get install llvm' on Debian/Ubuntu)." >&2
+        exit 1
+    fi
+}
+
+echo "Building WASM library..."
+(cd "$SCRIPT_DIR/library" && npm install && npm run build)
+
+if [ "$SKIP_BINARY" = false ]; then
+    echo "Checking wasm32 compiler support..."
+    check_wasm32_support
+
+    echo "Building WASM binary..."
+    (cd "$SCRIPT_DIR" && wasm-pack build --target web --profile wasm --no-opt)
+
+    echo "Optimising WASM binary..."
+    (cd "$SCRIPT_DIR" && wasm-opt pkg/ggsql_wasm_bg.wasm -o pkg/ggsql_wasm_bg.wasm -Oz --all-features)
+else
+    echo "Skipping WASM binary build (--skip-binary)."
+fi
+
+echo "Building WASM demo..."
+(cd "$SCRIPT_DIR/demo" && npm install && npm run build)
+
+echo "Copying demo to doc/playground..."
+rm -rf "$REPO_ROOT/doc/playground"
+cp -r "$SCRIPT_DIR/demo/dist" "$REPO_ROOT/doc/playground"
+
+echo "Done! Demo output is in: $REPO_ROOT/doc/playground"