sam/Parchment
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

transition from parchment to downloads

Browse Source
This commit is contained in:
metacryst
2025-12-18 17:18:09 -06:00
parent 0f4d8e5eb9
commit 4d969864a5
10 changed files with 651 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
ui/components/DownloadsPanel.js Normal file
View File

@@ -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)

76
ui/components/Home.js
View File

@@ -1,48 +1,22 @@
import "./NavMenu.js"
import "./HomePanel.js"
import "./DownloadsPanel.js"
class Home 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(() => {
let json = this.getJSONData()
p(json.length + " Entries")
.marginBottom(2, em)
for(let i=0; i<100; i++) {
p(json[i].name)
.marginLeft(0, em)
.marginBottom(0.1, em)
}
})
.paddingLeft(5, em)
.paddingTop(10, em)
NavMenu()
switch(window.location.pathname) {
case "/":
HomePanel()
break;
case "/downloads":
DownloadsPanel()
break;
}
})
.backgroundColor("var(--main)")
.display("block")
@@ -52,24 +26,10 @@ class Home extends Shadow {
.onAppear(() => {
document.body.style.backgroundColor = "var(--main)"
})
}
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;
}
.onNavigate(() => {
console.log("navved")
this.rerender()
})
}
}

7
ui/components/HomePanel.js Normal file
View File

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

37
ui/components/NavMenu.js Normal file
View File

@@ -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)