add section with interactive demos

rhyme-lang · Dec 28, 2024 · fd8c365 · fd8c365
1 parent 2ec47c8
commit fd8c365
Show file tree

Hide file tree

Showing 9 changed files with 7,162 additions and 2 deletions.
diff --git a/docs/display.md b/docs/display.md
@@ -0,0 +1,86 @@
+---
+outline: deep
+---
+
+# Display
+
+Rhyme includes a facility for rendering structured data as DOM components.
+The presentation can be customized in various ways. 
+
+The underlying mechanism is a tree-to-tree transformation, with some
+embedded rendering directives (key `$display`).
+
+
+## Default
+
+The default is to present all the fields of an object in an expandable fashion,
+much like the object inspector in Safari or Chrome developer tools.
+
+::: sandbox {template=static showTabs=false rtl previewHeight=200 coderHeight=100}
+<<< @/public/sandbox/rhyme-lang.min.js{#hidden}
+<<< @/public/sandbox/index.html{#hidden}
+```js query.js [active]
+let data = [{x:20,y:70},{x:40,y:30},{x:60,y:50},{x:80,y:60},{x:100,y:40}]
+display(data)
+```
+:::
+
+
+## Select
+
+The behavior can be customized by choosing a different presentation, e.g.,
+by showing only one specific entry, selected by the user.
+
+::: sandbox {template=static showTabs=false rtl previewHeight=150 coderHeight=150}
+<<< @/public/sandbox/rhyme-lang.min.js{#hidden}
+<<< @/public/sandbox/index.html{#hidden}
+```js query.js [active]
+let data = [{x:20,y:70},{x:40,y:30},{x:60,y:50},{x:80,y:60},{x:100,y:40}]
+display({
+    "$display": "select",
+    data: data
+})
+```
+:::
+
+
+## Slider
+
+For numerical keys, a range slider is sometimes more convenient than
+individual buttions.
+
+::: sandbox {template=static showTabs=false rtl previewHeight=150 coderHeight=150}
+<<< @/public/sandbox/rhyme-lang.min.js{#hidden}
+<<< @/public/sandbox/index.html{#hidden}
+```js query.js [active]
+let data = [{x:20,y:70},{x:40,y:30},{x:60,y:50},{x:80,y:60},{x:100,y:40}]
+display({
+    "$display": "slider",
+    data: data
+})
+```
+:::
+
+
+## Raw DOM
+
+It is also possible to produce raw DOM trees directly.
+
+::: sandbox {template=static showTabs=false rtl previewHeight=150 coderHeight=150}
+<<< @/public/sandbox/rhyme-lang.min.js{#hidden}
+<<< @/public/sandbox/index.html{#hidden}
+```js query.js [active]
+display({
+  "$display": "dom",
+  type: "h1",
+  props: { style: { color: "lime" }},
+  children: ["hello", " ", "jolly", " ", "world"]
+})
+```
+:::
+
+
+## Nesting
+
+The presentation behavior can be nested arbitrarily, e.g., to display 
+[tables](tables.html) with structured entries.
diff --git a/docs/examples.md b/docs/examples.md
@@ -4,10 +4,22 @@ outline: deep
 
 # Examples
 
-The Rhyme test suite contains many helpful usage examples:
+The Rhyme test suite contains many helpful use cases and examples:
 
 - [Miscellaneous Tests and Examples](https://github.com/rhyme-lang/rhyme/tree/main/test/semantics)
 
 - [Advent of Code](https://github.com/rhyme-lang/rhyme/tree/main/test/aoc)
 
-- [HTML and React demos](https://github.com/rhyme-lang/rhyme/tree/main/demos)
+
+## Interactive Demos
+
+In addition, there are a number of interactive examples for
+running Rhyme in the browser:
+
+- [Display](/display)
+
+- [Tables](/tables)
+
+- [SVG](/svg)
+
+- [React](/react)
diff --git a/docs/public/sandbox/city_populations.csv b/docs/public/sandbox/city_populations.csv
diff --git a/docs/public/sandbox/index.html b/docs/public/sandbox/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Rhyme Sandbox</title>
+    <!-- <script src="http://unpkg.com/rhyme-lang/umd/rhyme-lang.min.js"></script> -->
+    <!-- <script src="http://localhost:5173/rhyme-lang.min.js"></script> -->
+    <!-- <script src="../umd/rhyme-lang.min.js"></script> -->
+    <script src="rhyme-lang.min.js"></script>
+    <script>
+      // minimal csv parser -- use a proper csv library for any production code
+      function parseCSV(data) {
+        data = data.split("\n")
+        let names = data[0].split(",")
+        let types = data[1].split(",").map(x => isNaN(Number(x)) ? (x => x.trim()) : (x => Number(x)))
+        let data1 = []
+        for (let i = 1; i < data.length; i++) {
+          let line = data[i]
+          let items = line.split(",")
+          let row = {}
+          for (let i in names)
+            row[names[i]] = types[i](items[i])
+          data1.push(row)
+        }
+        return data1
+      }
+      function loadCSV(url) {
+        return fetch(url).then(p => p.text()).then(p => parseCSV(p))
+      }
+    </script>
+    <style type="text/css">
+      body {
+        margin: 40px
+        auto;
+        max-width: 650px;
+        line-height: 1.4;
+        font-size: 16px;
+        font-family: sans-serif;
+        color: #333;
+        padding: 0
+        10px
+      }
+      h1, h2, h3 {
+        line-height: 1.1
+      }
+    </style>
+</head>
+<body>
+    <div id="root"></div>
+    <script>
+        try { rhyme } catch (e) { throw e } // XXX
+        let api = rhyme.api
+        let domParent = document.getElementById("root")
+        let display = x => api.display(x, domParent)
+        let H2 = x => display({"$display": "dom", "type": "h2", children: [x]})
+    </script>
+    <script src="query.js"></script>
+</body>
diff --git a/docs/public/sandbox/rhyme-lang.min.js b/docs/public/sandbox/rhyme-lang.min.js
diff --git a/docs/public/sandbox/warehouse.csv b/docs/public/sandbox/warehouse.csv
@@ -0,0 +1,11 @@
+warehouse,product,model,quantity
+San Jose,iPhone,6s,100
+San Francisco,iPhone,6s,50
+San Jose,iPhone,7,50
+San Francisco,iPhone,7,10
+San Jose,iPhone,X,150
+San Francisco,iPhone,X,200
+San Jose,Samsung,Galaxy S,200
+San Francisco,Samsung,Galaxy S,200
+San Francisco,Samsung,Note 8,100
+San Jose,Samsung,Note 8,150