integrate playground better in website (#211)

Author: thomasp85

ggsql-wasm/demo/build.mjs

@@ -12,7 +12,7 @@ mkdirSync(distDir, { recursive: true });
 
 // Copy static files
 console.log("Copying static files...");
-copyFileSync(join(__dirname, "src/index.html"), join(distDir, "index.html"));
+copyFileSync(join(__dirname, "src/index.qmd"), join(distDir, "index.qmd"));
 copyFileSync(
   join(__dirname, "../pkg/ggsql_wasm_bg.wasm"),
   join(distDir, "ggsql_wasm_bg.wasm"),

ggsql-wasm/demo/src/index.html

@@ -0,0 +1,50 @@
+---
+pagetitle: "ggsql Playground"
+page-layout: custom
+section-divs: false
+toc: false
+lightbox: false
+repo-actions: false
+include-in-header: 
+  - text: |
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <link rel="stylesheet" href="bundle.css" />
+include-after-body: 
+  - text: |
+      <script type="module" src="bundle.js"></script>
+---
+
+```{=html}
+<div id="app">
+  <div id="mobile-toolbar">
+    <select id="mobile-example-select">
+      <option value="" disabled selected>Select an example…</option>
+    </select>
+  </div>
+  <div id="sidebar">
+    <div id="status" class="loading">Initializing...</div>
+    <div class="sidebar-section">
+      <h3>Tables</h3>
+      <ul id="table-list" class="table-list"></ul>
+    </div>
+    <div class="sidebar-section">
+      <h3>Upload</h3>
+      <div class="file-input-wrapper">
+        <input type="file" id="csv-upload" accept=".csv,.parquet" />
+        <label for="csv-upload" class="file-input-label">Upload Data</label>
+      </div>
+    </div>
+    <div class="sidebar-section">
+      <div id="examples-list"></div>
+    </div>
+  </div>
+  <div id="editor-container"></div>
+  <div id="viz-container">
+    <div id="viz-output"></div>
+  </div>
+  <div id="error-panel">
+    <h3 class="panel-label">Problems</h3>
+    <div id="error-messages"></div>
+  </div>
+</div>
+```

ggsql-wasm/demo/src/index.qmd

@@ -16,26 +16,16 @@ body {
 #app {
   display: grid;
   grid-template-columns: 200px 1fr 1fr;
-  grid-template-rows: 40px 1fr 150px;
+  grid-template-rows: 1fr 150px;
   height: 100vh;
   gap: 1px;
-  background: #94D2BD;
-}
-
-#header {
-  grid-column: 1 / -1;
-  background: #DEF1EB;
-  padding: 0 16px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 1px solid #94D2BD;
+  background: #005F73;
+  border-top: 2px solid #005F73;
+  padding-top: 0;
 }
 
-#header h1 {
-  font-size: 14px;
-  font-weight: 700;
-  color: #005F73;
+#app h3 {
+  margin-top: 0;
 }
 
 #status {
@@ -60,7 +50,7 @@ body {
 }
 
 #sidebar {
-  grid-row: 2 / 4;
+  grid-row: 1 / 3;
   background: #DEF1EB;
   border-right: 1px solid #94D2BD;
   overflow-y: auto;
@@ -284,17 +274,13 @@ body {
 @media (max-width: 1024px) {
   #app {
     grid-template-columns: 1fr;
-    grid-template-rows: 40px auto 1fr 1fr 100px;
-  }
-
-  #header {
-    grid-row: 1;
+    grid-template-rows: auto 1fr 1fr 100px;
   }
 
   #mobile-toolbar {
     display: flex;
     align-items: center;
-    grid-row: 2;
+    grid-row: 1;
     grid-column: 1;
     background: #DEF1EB;
     padding: 6px 16px;
@@ -317,17 +303,17 @@ body {
   }
 
   #viz-container {
-    grid-row: 3;
+    grid-row: 2;
     grid-column: 1;
   }
 
   #editor-container {
-    grid-row: 4;
+    grid-row: 3;
     grid-column: 1;
   }
 
   #error-panel {
-    grid-row: 5;
+    grid-row: 4;
     grid-column: 1;
   }
 }