From 4155a556f630022392818b70f374809b31d49236 Mon Sep 17 00:00:00 2001
From: Akshay Nair <phenax5@gmail.com>
Date: Sun, 21 Jan 2024 20:43:36 +0530
Subject: docs: readme

---
 README.md             | 72 +++++++++++++++++++++++++++++++++++++++++----------
 docs/api/functions.md | 18 ++++++++++++-
 2 files changed, 75 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index 9cf8cf1..add8171 100644
--- a/README.md
+++ b/README.md
@@ -8,26 +8,48 @@ A ui framework where you only write turing complete CSS. No HTML, no JS, no buil
 
 > Disclaimer: Don't use this
 
-
-## Docs
-
-- [Read the documentation](https://github.com/phenax/css-everything/tree/main/docs/README.md) to become enlightened.
-- [Here's how this works](https://github.com/phenax/css-everything/tree/main/docs/how-it-works.md).
-
-
-## Examples
-All the magic starts with adding the renderer script tag to your html and having a `--cssx-children` property set on your `body` -
+## Usage
+#### Add script tag to the renderer to your html
 ```html
 <script async defer src="https://unpkg.com/@css-everything/render/dist/renderer/index.js"></script>
 ```
 
+#### Open up a style tag or link a stylesheet
+The renderer by default uses the body element. You can use `:root` to describe the starting point.
+Here's a simple counter example:
+```css
+:root {
+  --counter: '0';
+  --cssx-children: div#count button#decr button#incr;
+}
+
+#count::after { content: "Count: " var(--counter); }
+
+#incr {
+  --cssx-on-click: update(':root', --counter, calc(get-var(--counter) + 1));
+  --cssx-text: "++";
+}
+#decr {
+  --cssx-on-click: update(':root', --counter, calc(get-var(--counter) - 1));
+  --cssx-text: "--";
+}
+```
+
+## More examples
 Here are a few live examples for you to try out -
-- [Here's a counter example](https://codepen.io/phenax/pen/KKbdZep?editors=1100)
+- [Here's a calculator example](https://codepen.io/phenax/pen/PoLjJmL?editors=1100)
 - [Here's a todo app example](https://codepen.io/phenax/pen/QWzWGaV?editors=1100)
-- [Here's a clock example](https://codepen.io/phenax/pen/KKbKNeb?editors=1100)
+- [Here's a simple counter example](https://codepen.io/phenax/pen/KKbdZep?editors=1100)
+- [Here's a digital & analog clock example](https://codepen.io/phenax/pen/KKbKNeb?editors=1100)
 - [More in the examples directory](https://github.com/phenax/css-everything/tree/main/examples)
 
 
+## Docs
+- [Read the documentation](https://github.com/phenax/css-everything/tree/main/docs/README.md) to become enlightened.
+- [Here's how this works](https://github.com/phenax/css-everything/tree/main/docs/how-it-works.md).
+
+
+
 ---
 
 
@@ -39,11 +61,33 @@ Why not?
 What?
 
 ### What time is it?
-Why don't you ask that to [this example](https://codepen.io/phenax/pen/KKbKNeb?editors=1100)?
+You can find the answer with [this example](https://codepen.io/phenax/pen/KKbKNeb?editors=1100).
 
 ### How does it work?
 [Here's how it works](https://github.com/phenax/css-everything/tree/main/docs/how-it-works.md).
 
-### Does it parse the entire css
-No. The browser does most of it. Only the fancy `--cssx-*` properties use a custom parser.
+### Is this turing complete?
+Yep. Not that you asked, but here's how to calculate factorial of a number.
+
+```css
+:root { --cssx-children: div#container; }
+
+#container {
+  --factorial: func(--n: number)
+    if(lte(get-var(--n), 1), 1,
+      calc(
+        get-var(--n)
+        * call(--factorial, map(--n: calc(get-var(--n) - 1)))
+      ));
+
+  --cssx-text: string("7! = ", call(--factorial, map(--n: 7)));
+}
+```
+
+### Escape hatches?
+- If you want to directly render some raw html, you can use `--cssx-disgustingly-set-innerhtml`.
+- If you want to run js expressions, you can use the `js-eval` function. Eg: `js-eval("new Date().getSeconds()")`
+
+### Does it need a build step?
+No. In fact, this'll probably break if you try to use it with a css preprocessor.
 
diff --git a/docs/api/functions.md b/docs/api/functions.md
index e7bce4f..c5c4cde 100644
--- a/docs/api/functions.md
+++ b/docs/api/functions.md
@@ -13,7 +13,7 @@ type pair = string: any
 
 ## Core
 
-### get-var
+### get-var / var
 Get css custom property from an element. Basically var but evaluated lazily.
 
 NOTE: Avoid using `var` inside cssx expressions.
@@ -30,6 +30,22 @@ Example -
 }
 ```
 
+### calc
+Do some math using the calc syntax. Not 100% compatible but it'll do.
+
+Supported units: rem, em, px, %, ms, s
+
+```typescript
+function calc(calc-expr): string
+```
+
+Example -
+```css
+#my-element {
+  --cssx-text: calc(1 + 5 * get-var(--some-variable));
+}
+```
+
 
 #### update
 Update a css custom property on an element
-- 
cgit v1.3.1