Full page management for Rill. Updating the document is done using the set-page library, with the same api (excluding render).
npm install @rill/pageconst app = require('rill')()
const page = require('@rill/page')
const React = require('react')
const renderer = require('@rill/react')
// Set default <head> tags (can override later).
// Must come before render middleware.
app.get(page
.html({ lang: 'en' })
.body({ class: 'loading' })
.meta({ charset: 'utf8' })
.title('My App')
.meta({ name: 'author', content: 'Dylan Piercey' })
.meta({ name: 'descripton', content: 'It is very cool' })
.link({ rel: 'stylesheet', href: 'index.css' })
.script({ src: 'index.js', async: true })
)
// Setup React rendering in Rill as an example, but any will do.
app.use(renderer({ root: 'body' }))
app.get('/admin',
// Override the title for the admin page.
page.title('My App > Admin'),
({ req, res, page }, next)=> {
// You can also override dynamically by accessing `page` from the context.
page.meta({ name: 'description', content: 'Updated description' })
// @rill/page will wrap any html already rendered (in this case jsx) with a document.
res.body = <div>Hello World</div>
// On the server the final response will be. (formatted for clarity)
html`
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>My App > Admin</title>
<meta name="author" name="Dylan Piercey">
<meta name="description" content="Updated description">
<link rel="stylesheet" href="index.css">
<script src="index.js" async></script>
</head>
<body>
<div>Hello World</div>
</body>
</html>
`
}
)- Use
npm testto run tests.
Please feel free to create a PR!