transition from parchment to downloads

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

0
db/forms.js Normal file
View File

View File

@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Downloads</title>
<title>Parchment</title>
<link rel="icon" href="Quill.png">
<style>
body {
@@ -25,6 +25,6 @@
</head>
<body>
<div class="draggable"></div>
<webview src="http://localhost:3020" style="width:100vw; height:100vh;"></webview>
<webview src="http://localhost:80" style="width:100vw; height:100vh;"></webview>
</body>
</html>

View File

@@ -19,13 +19,15 @@ class Server {
UIPath = path.join(__dirname, '../ui')
registerRoutes(router) {
router.get('/', this.index)
router.get('/*', this.get)
return router
}
index = async (req, res) => {
let filePath = path.join(this.UIPath, "index.html");
res.sendFile(filePath)
return
let html = await fs.readFile(filePath, 'utf-8');
let downloads = await getAllDownloadsFiles()
@@ -42,15 +44,16 @@ class Server {
get = async (req, res) => {
let url = req.url
let filePath = path.join(this.UIPath, url);
res.sendFile(filePath, (err) => {
if (err) {
console.error(`Error serving ${filePath}:`, err);
res.status(err.status || 500).send('File not found or error serving file.');
let filePath;
if(url.startsWith("/_")) {
filePath = path.join(this.UIPath, url);
} else if(url.includes("75820185")) {
filePath = path.join(this.UIPath, url.split("75820185")[1]);
} else {
filePath = path.join(this.UIPath, "index.html");
}
});
res.sendFile(filePath);
}
logRequest(req, res, next) {
@@ -93,7 +96,7 @@ class Server {
const server = http.createServer(app);
initWebSocket(server);
const PORT = 3020;
const PORT = 80;
server.listen(PORT, () => {
console.log("\n")
console.log(chalk.yellow("**************Downloads****************"))

File diff suppressed because one or more lines are too long

View File

@@ -10,6 +10,7 @@
--brown: #c6a476;
--darkbrown: #60320c;
--darkred: #7f0b09;
--darkorange: #b15900;
--orange: #FE9201;
--periwinkle: #655BAF;

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)

View File

@@ -1,49 +1,23 @@
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)
NavMenu()
for(let i=0; i<100; i++) {
p(json[i].name)
.marginLeft(0, em)
.marginBottom(0.1, em)
switch(window.location.pathname) {
case "/":
HomePanel()
break;
case "/downloads":
DownloadsPanel()
break;
}
})
.paddingLeft(5, em)
.paddingTop(10, em)
})
.backgroundColor("var(--main)")
.display("block")
.width(100, vw).height("auto")
@@ -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()
})
}
}

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)

View File

@@ -1,12 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Downloads</title>
<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="/index.js"></script>
<script type="module" src="/75820185/index.js"></script>
</head>
<body style="margin: 0px;">
</body>