more docs

src/components/Code.astro

@@ -23,7 +23,16 @@ const nameid = ''+Math.random();
           <>
             <input type="radio" name={"tabset"+nameid} id={lang+uid} checked={lang == "js"}>
             <label for={lang+uid}>
+              {
+              lang === "js" &&
+              <Icon size={30} name="mdi:language-javascript" />
+              || lang === "jsx" &&
+
               <Icon size={30} name="mdi:react" />
+              || 
+
+              <Icon size={30} name="mdi:language-typescript" />
+              }
               {lang?.toUpperCase()}
             </label>
           </>

src/components/Sidebar.astro

@@ -5,11 +5,12 @@ const sectionlist = {
 	introduction: {
 		name: "Introduction",
 	},
-	reactivity: {
-		name: "Reactivity",
-	},
 	components: {
 		name: "Components",
+},
+
+	reactivity: {
+		name: "Advanced Reactivity",
 	},
 	css: {
 		name: "CSS",

src/pages/index.astro

@@ -50,7 +50,7 @@ document.body.appendChild(root);
 				<div style="max-width: 45ch ">
 					<h3>Write Components without the overhead</h3>
 					<p>
-						dreamland has <b>no virtual DOM</b>, <b>no JSX</b>, and <b>no build step</b>. Just write your
+						dreamland has <b>no virtual DOM</b> and <b>no build step</b>. Just write your
 						components in javascript and attach them to the DOM.
 					</p>
 					<p>

src/pages/learn/components/components.md → src/pages/learn/components/components.mdx

@@ -1,57 +1,83 @@
 ---
 layout: layouts/Document.astro
-order: 2
+order: 1
 ---
 
+import Code from "../../../components/Code.astro"
+
 # Components
 
 Components are little smaller pieces of HTML and js that you can use elsewhere in your app. Components are also HTML elements, when you construct one it will be a normal DOM element.
+<Code>
+```js
+function ButtonComponent(){
+  return html`
+    <div>
+        {this.title}
+        <button>{this.children}</button>
+    </div>
+  `
+}
 
+let element = html`<${ButtonComponent} title="some title">Button Text<${ButtonComponent}/>`;
+console.log(element); // HTMLDivElement...
+document.body.appendChild(element);
+```
 ```jsx
 function ButtonComponent(){
-    return (
-        <div>
-            {this.title}
-            <button>{this.children}</button>
-        </div>
-    )
+  return (
+    <div>
+        {this.title}
+        <button>{this.children}</button>
+    </div>
+  )
 }
 
 let element = <ButtonComponent title="some title">Button Text<ButtonComponent/>;
 console.log(element); // HTMLDivElement...
 document.body.appendChild(element);
 ```
-
-If you're using typescript, the syntax is slightly different.
-
 ```tsx
 const ButtonComponent: Component<
-	{
-		title: string;
-	},
-	{
-		children: string;
-	}
-> = function () {
+{
+	title: string;
+},
+{
+	children: string;
+}> = function () {
 	return (
 		<div>
 			{this.title}
 			<button>{this.children}</button>
 		</div>
 	);
 };
+
+let element: DLElement<typeof ButtonComponent> = <ButtonComponent title="some title">Button Text<ButtonComponent/>;
+console.log(element); // HTMLDivElement...
+document.body.appendChild(element);
 ```
+</Code>
 
-> ### Note
->
-> Unlike React, all components are only fully executed once per creation, so you are safe adding code with potential side-effects.
 
 ## Lifecycle
 
 Declaring this.mount in the component sets a callback for after the component is initialized (but not necessarily after it's added to DOM)
 
 This gives you access to `this.root`, the underlying HTML which you can run any DOM function on
 
+<Code>
+```js
+function UselessComponent() {
+	this.mount = () => {
+		console.log(this.root); // <div>hello!.....
+		console.log("goodbye world!");
+		this.root.remove();
+	};
+
+	return html`<div>hello!</div>`;
+}
+```
 ```jsx
 function UselessComponent() {
 	this.mount = () => {
@@ -63,3 +89,4 @@ function UselessComponent() {
 	return <div>hello!</div>;
 }
 ```
+</Code>

src/pages/learn/css/classes.md

@@ -1,6 +1,6 @@
 ---
 layout: layouts/Document.astro
-order: 333
+order: 3
 ---
 
 ## Class arrays

src/pages/learn/css/inline-styles.mdx

@@ -0,0 +1,49 @@
+---
+layout: layouts/Document.astro
+order: 1
+---
+import Code from "../../../components/Code.astro"
+
+## Inline styles
+
+Similarly to React, you can use js inline styles in dreamland. Here's an example:
+
+<Code>
+```js
+let element = html`<div style=${{ color: "red", backgroundColor: "blue" }}>Hello, world!</div>`;
+```
+```jsx
+let element = <div style={{ color: "red", backgroundColor: "blue" }}>Hello, world!</div>;
+```
+</Code>
+
+You can also use the `use` function to bind a variable to a style property:
+
+
+<Code>
+```js
+let state = $state({
+	color: "red",
+});
+
+let element = html`<div style=${{ color: use(state.color) }}>Hello, world!</div>`;
+```
+```jsx
+let state = $state({
+	color: "red",
+});
+
+let element = <div style={{ color: use(state.color) }}>Hello, world!</div>;
+```
+```tsx
+let state: {
+	color: string
+} = $state({
+	color: "red",
+});
+
+let element: HTMLElement = <div style={{ color: use(state.color) }}>Hello, world!</div>;
+```
+</Code>
+
+This is the ideal solution for when styles change often, but is not optimal for more static css