Quark.js Proof of Concept
Proof of concept for the Quark.js web framework.
Examples
Express.js
Implimentation using express.js as a web server:
import express from 'express'
import quark from 'quark.js'
const app = express()
app.use('/', await quark())
app.listen(3050, () => {
console.log('Listening on port 3050')
})
New Page
Creating a new page:
Hello, World!
` return page }"> // (root) ./pages/index.page.js
// Must end with ".page.js"
// This will automatically resolve to the root of the website (or current directory)
export default async function Index () {
let page = html`
<h1>Hello, World!h1>
`
return page
}
New Part
Creating a new page and new part that can take parameters:
Hello, ${name}!
` return part }"> // (root) ./parts/helloWorld.part.js
// Must end with ".part.js"
// Can be called from any page
export default function HelloWorld({ name }) {
let part = html`
<h1>Hello, ${name}!h1>
`
return part
}
// (root) ./pages/index.page.js
export default async function Index () {
let page = html`
<div>
${HelloWorld({
name: 'World'
})}
div>
`
return page
}
Dynamic Routes
Creating a new page that is dynamic:
Post #${params.id}
` return page }"> // (root) ./pages/posts/[id].page.js
// Must end with ".page.js"
// The ID is a parameter that will be included in the URL and will be passed to the page. This
// also is valid for subfolders. (Ex: /posts/[id]/comments.page.js)
// The resource /posts/1234 -> resolved
// The resource /posts/1234/comments -> does not resolve
// The resource /posts/ -> does not resolve (unless there is an index page under the folder!)
export default async function Posts ({ params }) {
let page = html`
<h1> Post #${params.id}h1>
`
return page
}