Update README.md

2026-01-23 19:09:10 -06:00
parent f1e8be1cd8
commit 61af976a7a
1 changed files with 114 additions and 4 deletions
--- a/README.md
+++ b/README.md
@@ -1,4 +1,3 @@
-
 <p align="center">
 <img src="VSCode/docs/Quill.png" alt="drawing" width="100"/> 
 <h1 align="center">Quill</h1>
@@ -8,10 +7,121 @@
 Quill is a SwiftUI-style JavaScript framework. It makes use of components called Shadows, which are HTML Custom Elements.

 ### Getting Started:
-Go to https://github.com/capturedsun/template-quill and clone this repo. 
+Take index.js and put it in your app. Typically as quill.js. Then import it in the head of the HTML.
+
+### Basic Overview:
+
+Quill uses components called Shadows. Each Shadow is a Custom HTML Element (https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements)
+```
+class Home extends Shadow {
+    render() {
+    }
+}
+
+register(Home)
+```
+
+Once created, it can be imported like
+```
+import "Home.js"
+```
+(Not how we are NOT importing the actual class object. If that happens, it will fail.)
+
+Here is an example of Hello World:
+
+```
+class Home extends Shadow {
+    render() {
+        p("Hello World")
+            .x(50, vw)
+            .y(50, vh)
+    }
+}
+
+register(Home)
+```
+
+This will render a paragraph tag in the middle of the screen.
+
+Here's what it will look like in HTML:
+
+```
+<body>
+    <home->
+        <p style="position: absolute; top: 50vh; left: 50vw;">Hello World</p>
+    </home->
+</body>
+```
+
+Note: .x() and .y() are quill-specific functions that were created simply for nice syntax. However, this would also be valid:
+```
+p("Hello World")
+    .top(50, vh)
+    .left(50, vw)
+```
+
+There are quill functions for every HTML style attribute. If they have units, they will follow the pattern directly above, where the first parameter is the amount and the second parameter is the unit.
+
+### Real Home Shadow Example:
+
+When starting, it is typical to make a "Home" shadow. This is a good example.
+
+```
+import "../components/NavBar.js"
+import "./HomeContent.js"
+import "./Why.js"
+import "./Events.js"
+import "./Join.js"
+import "./SignIn.js"
+import "./Success.js"
+
+class Home extends Shadow {
+    render() {
+
+        ZStack(() => {
+
+            NavBar()
+
+            img("/_/icons/logo.svg", "2.5em")
+                .onClick((done) => {
+                    if(!done) return
+                    window.navigateTo("/")
+                })
+                .position("absolute")
+                .left(50, vw).top(4, em)
+                .center()
+                .transform(`translate(${window.isMobile() ? "-50%" : "-2em"}, -50%)`)
+    
+            switch(window.location.pathname) {
+                case "/":
+                    HomeContent()
+                    break;
+                case "/why":
+                    Why()
+                    break;
+                case "/events":
+                    Events()
+                    break;
+                case "/join":
+                    Join()
+                    break;
+                case "/success":
+                    Success()
+                    break;
+            }
+
+        })
+        .onNavigate(() => {
+            this.rerender()
+        })
+            
+    }
+}
+
+register(Home)
+
+```

-### App:
-src/app.js is the application entry point. Any Shadows rendered inside will be rendered in the body. 

 ### Rendering Elements: