docs: Create ace-demo.html (#3512)

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
PRQL · Sep 15, 2023 · 8feaca8 · 8feaca8
1 parent 1145f1d
commit 8feaca8
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 0 deletions.
diff --git a/grammars/README.md b/grammars/README.md
@@ -9,6 +9,7 @@ an index.
 
 - [Ace](https://ace.c9.io/) — supported. The grammar is upstream
   ([prql_highlight_rules.js](https://github.com/ajaxorg/ace/blob/master/src/mode/prql_highlight_rules.js)).
+  See the [demo](https://prql-lang.org/demos/ace-demo).
 
 - [Lezer](https://lezer.codemirror.net/) — used by CodeMirror editors. The PRQL
   file is at

diff --git a/web/website/content/demos/ace-demo.html b/web/website/content/demos/ace-demo.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Ace with PRQL</title>
+<style>
+    #editor {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+    }
+</style>
+</head>
+<body>
+
+<div id="editor"># https://ace.c9.io/
+from invoices
+filter invoice_date >= @1970-01-16
+derive {
+  transaction_fees = 0.8,
+  income = total - transaction_fees
+}
+filter income > 1
+group customer_id (
+  aggregate {
+    average total,
+    sum_income = sum income,
+    ct = count total,
+  }
+)
+sort {-sum_income}
+take 10
+join c=customers (==customer_id)
+derive name = f"{c.last_name}, {c.first_name}"
+select {
+  c.customer_id, name, sum_income
+}
+derive db_version = s"version()"</div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.26.0/ace.js" integrity="sha512-GtLSS/81SGsl963BDJCrQN4VK7/BQhyomb2OkTBtEvPuyu/44O6fKJzfBIUWi4xsCCOatCxu11cxnnfOutL3bA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script>
+    var editor = ace.edit("editor");
+    editor.setTheme("ace/theme/monokai");
+    editor.session.setMode("ace/mode/prql");
+</script>
+</body>
+</html>