renaming, spawning forms if it does not exist, simplifying

cave/_/code/shared.css

@@ -0,0 +1,26 @@
+:root {
+    --main: #BD410D;
+    --accent: var(--tan);
+    --accent2: var(--brown);
+
+    --tan: #FEB279;
+    --purple: #251D44;
+    --green: #0B5538;
+    --red: #BC1C02;
+    --brown: #c6a476;
+    --darkbrown: #60320c;
+    --darkred: #7f0b09;
+    --darkorange: #b15900;
+    --orange: #FE9201;
+    --periwinkle: #655BAF;
+
+}
+
+@media (prefers-color-scheme: dark) {
+:root {
+    --main: #6A2C1C;
+    --accent: var(--tan);
+    --accent2: var(--green);
+    --accent3: #c74109
+}
+}

cave/components/DownloadsPanel.js

@@ -0,0 +1,94 @@
+class DownloadsPanel extends Shadow {
+    render() {
+        ZStack(() => {
+            input("", "60vw")
+                .backgroundColor("var(--accent3)")
+                .color("var(--accent)")
+                .border("none")
+                .borderTop("1px solid var(--accent)")
+                .borderBottom("1px solid var(--accent)")
+                .outline("0.5px solid black")
+                .borderRadius(7, px)
+                .transition("padding .2s")
+                .padding(0.5, em)
+                .position("absolute")
+                .x(50, vw).y(7, em)
+                .transform("translate(-50%, -50%)")
+                .onInput(() => {
+                    console.log('typing')
+                })
+                .onFocus(function (focusing) {
+                    if(focusing) {
+                        this.style.padding = "1em"
+                        this.style.borderColor = "var(--darkred)"
+                    } else {
+                        this.style.padding = "0.5em"
+                        this.style.borderColor = "var(--accent)"
+                    }
+                })
+            
+            // VStack(() => {
+            //     const json = this.getJSONData()
+
+            //     p(json.length + " Entries")
+            //         .marginBottom(2, em)
+
+            //     // Split into two alternating columns
+            //     const left = []
+            //     const right = []
+                
+            //     for (let i = 0; i < 200; i++) {
+            //         if (i % 2 === 0) {
+            //             left.push(json[i])
+            //         } else {
+            //             right.push(json[i])
+            //         }
+            //     }
+                
+            //     console.log(left)
+            //     HStack(() => {
+            //         // LEFT COLUMN
+            //         VStack(() => {
+            //             for (let item of left) {
+            //                 p(item.name)
+            //                     .marginLeft(0, em)
+            //                     .marginBottom(0.1, em)
+            //             }
+            //         })
+
+            //         // RIGHT COLUMN
+            //         VStack(() => {
+            //             for (let item of right) {
+            //                 p(item.name)
+            //                     .marginLeft(0, em)
+            //                     .marginBottom(0.1, em)
+            //             }
+            //         })
+            //         .marginLeft(3, em) // spacing between columns
+            //     })
+            // })
+            // .paddingLeft(5, em)
+            // .paddingTop(10, em)
+        })
+    }
+
+    getJSONData() {
+        const script = document.getElementById('jsonData');
+        if (!script) {
+            console.warn('initial-data script not found');
+            return null;
+        }
+
+        try {
+            // script.textContent is the raw JSON string
+            const data = JSON.parse(script.textContent);
+            console.log(data)
+            return data;
+        } catch (err) {
+            console.error('Failed to parse initial-data JSON:', err);
+            return null;
+        }
+    }
+}
+
+register(DownloadsPanel)

cave/components/Home.js

@@ -0,0 +1,36 @@
+import "./NavMenu.js"
+import "./HomePanel.js"
+import "./DownloadsPanel.js"
+
+class Home extends Shadow {
+
+    render() {
+        ZStack(() => {
+
+            NavMenu()
+
+            switch(window.location.pathname) {
+                case "/":
+                    HomePanel()
+                    break;
+                case "/downloads":
+                    DownloadsPanel()
+                    break;
+            }
+        })
+        .backgroundColor("var(--main)")
+        .display("block")
+        .width(100, vw).height("auto")
+        .color("var(--accent)")
+        .fontFamily("Arial")
+        .onAppear(() => {
+            document.body.style.backgroundColor = "var(--main)"
+        })
+        .onNavigate(() => {
+            console.log("navved")
+            this.rerender()
+        })
+    }
+}
+
+register(Home)

cave/components/HomePanel.js

@@ -0,0 +1,7 @@
+class HomePanel extends Shadow {
+    render() {
+
+    }
+}
+
+register(HomePanel)

cave/components/NavMenu.js

@@ -0,0 +1,37 @@
+class NavMenu extends Shadow {
+
+    NavButton(text) {
+        return p(text)
+            .cursor("default")
+            .onAppear(function () {
+                console.log(window.location.pathname, "/" + this.innerText.toLowerCase())
+                if(window.location.pathname === ("/" + this.innerText.toLowerCase())) {
+                    this.style.textDecoration = "underline"
+                }
+            })
+            .onHover(function (hovering) {
+                if(hovering) {
+                    this.style.textDecoration = "underline"
+                } else {
+                    this.style.textDecoration = ""
+                }
+            })
+            .onClick(function (done) {
+                if(done) {
+                    window.navigateTo(this.innerText === "Home" ? "/" : this.innerText.toLowerCase())
+                }
+            })
+    }
+
+    render() {
+        HStack(() => {
+            this.NavButton("Home")
+            this.NavButton("Downloads")
+        })
+        .gap(2, em)
+        .x(50, vw).y(5, vh)
+        .center()
+    }
+}
+
+register(NavMenu)

cave/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Parchment</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" href="/_/icons/logo.png">
+    <link rel="stylesheet" href="/_/code/shared.css"></script>
+    <script src="/_/code/quill.js"></script>
+    <script type="module" src="/75820185/index.js"></script>
+</head>
+<body style="margin: 0px;">
+</body>
+</html>

cave/index.js

@@ -0,0 +1,2 @@
+import "./components/Home.js"
+Home()