Quill
Quill is a SwiftUI-style JavaScript framework. It makes use of components called Shadows, which are HTML Custom Elements.
Getting Started:
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 Basic Example:
First, you need your index.html. Here is one:
<!DOCTYPE html>
<html lang="en" class="public">
<head>
<title>Parchment</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/_/icons/quill.svg">
<link rel="stylesheet" href="/_/code/shared.css">
<script src="/_/code/quill.js"></script>
<script type="module" src="75820185/index.js"></script>
</head>
<body>
</body>
</html>
When starting, it is typical to make a "Home" shadow and import it in index.js. Here is an example:
index.js:
import "./Home.js"
Home()
Home.js:
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)
Success.js:
class Success extends Shadow {
render() {
p("Thanks for your purchase! You will receive a confirmation email shortly. <br><br> <b>Keep that email; it will be checked at the door.</b>")
.x(50, vw).y(50, vh)
.center()
}
}
register(Success)