Added few default examples in playground. Made a few corrections in the readme.

Author: karthikchiru12

README.md

@@ -1,8 +1,14 @@
 # Datadance
 Datadance is a Typescript based library to transform JSON data using a JSON output specification.
 
+Checkout the playground here : [Datadance Playground](https://datadance.app/design/build)
+
 # How to run the server
-```deno task serve```
+
+```bash
+cd server
+deno task start
+```
 
 # Transforms Expression Language Reference
 
@@ -148,6 +154,7 @@ Output:
 ```
 
 ## Example using the CLI
-```
+```bash
+deno task compile # builds the binary
 ./bin/datadance -i '{"hello": "world"}' -t '[{"also": "\"hello \" + input.hello"}]' -s '{"merge_method": "overwrite"}'
 ```

server/islands/Playground/Playground.tsx

@@ -2,17 +2,41 @@ import { useEffect, useRef, useState } from "preact/hooks";
 import AceEditor from "ace-builds";
 import ace from "ace-builds";
 import Dracula from "ace-builds/src-noconflict/theme-dracula";
-import 'ace-builds/src-noconflict/ext-language_tools';
+import "ace-builds/src-noconflict/ext-language_tools";
 import { transform } from "../../../core/transform.ts";
 import { DataObject } from "../../../core/types.ts";
 import { SerialOperations } from "../../../core/types.ts";
 
-ace.config.set('basePath', 'https://esm.sh/ace-builds@1.35.4/src-noconflict');
-ace.config.setModuleUrl('ace/mode/yaml', 'https://cdn.jsdelivr.net/npm/ace-builds@1.4.12/src-noconflict/mode-yaml.js');
+ace.config.set("basePath", "https://esm.sh/ace-builds@1.35.4/src-noconflict");
+ace.config.setModuleUrl(
+  "ace/mode/yaml",
+  "https://cdn.jsdelivr.net/npm/ace-builds@1.4.12/src-noconflict/mode-yaml.js"
+);
 
 const Playground = () => {
-  const [input, setInput] = useState<string>("{}");
-  const [transforms, setTransforms] = useState<string>("");
+  const [input, setInput] = useState<string>(`{
+    "name": {
+        "first": " malory",
+        "last": "Archer"
+    },
+    "exes": [
+        " Nikolai Jakov ",
+        "Len Trexler",
+        "Burt Reynolds"
+    ],
+    "lastEx": 2
+}`);
+  const [transforms, setTransforms] = useState<string>(
+    `lastEx : derived.lastEx + 5
+modified : derived.lastEx
+original : input.lastEx
+nameObject :
+  name : input.name.first | trim | capitalize + ' ' + input.name.last
+  age : 25
+  ex1 : '=>' + input.exes[0] | rtrim 
+isMinor : derived.nameObject.age > 18
+nameLength : derived.nameObject.name | length
+nameUpper : derived.nameObject.name | upper`);
   const [output, setOutput] = useState<string>("");
   const [mergeMethod, setMergeMethod] = useState<string>("overwrite");
   const [errorMessage, setErrorMessage] = useState<string>("");
@@ -27,11 +51,11 @@ const Playground = () => {
         maxLines: 15,
         enableBasicAutocompletion: true,
         enableLiveAutocompletion: true,
-        enableSnippets: true
+        enableSnippets: true,
       });
       editor.setTheme(Dracula);
       editor.setValue(transforms, -1);
-      ace.config.loadModule('ace/mode/yaml', (yamlMode: any) => {
+      ace.config.loadModule("ace/mode/yaml", (yamlMode: any) => {
         editor.session.setMode(new yamlMode.Mode());
       });
       editor.session.on("change", async () => {

server/routes/_app.tsx

@@ -44,7 +44,7 @@ export default function App({ Component }: PageProps) {
                     </a>
                   </li>
                   <li>
-                    <a href="/docs" class="nav-link">
+                    <a href="https://docs.datadance.app" class="nav-link">
                       Docs
                     </a>
                   </li>
@@ -56,11 +56,15 @@ export default function App({ Component }: PageProps) {
 
         <Component />
         <br></br>
-        <div class="container">
-          <footer>
-            <p class="text-center text-body-secondary">© 2024 Datadance, <a href="https://yakshavingdevs.org">Yak Shaving Devs</a></p>
-          </footer>
-        </div>
+
+        <footer class="container">
+            <p class="text-center text-body-secondary">
+              © 2024 Datadance,{" "}
+              <a href="https://yakshavingdevs.org">Yak Shaving Devs</a>
+            </p>
+        </footer>
+        <br></br>
+
         <script
           src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
           integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"