npm i biti -g
👀 Looking for a static page generation plus a client-side app? Try 👉 hypr :)
Features
- easy static page generation
- intelligent file watching
- convenient CLI
- easy Node API
Usage
biti watch pages/ static/
Getting started
biti
is pretty simple. It operates on a single directory of pages, which each
define and export properties and methods that biti
uses to render the page.
For the examples here, we'll use /pages
as our pages directory, but you could
call it anything.
Configuring a page
Each page requires the following exports:
pathname
- string - the path where you'd like the page to appearview
- function - a function that returns a React component
The pathname property will be passed to the view
component.
An simple page might look like this:
const pathname = '/about' { return <> <h1>About Us</h1> <p>...</p> </> }
Static data
Pages can also export a state
object, which will also be passed to the view
function when rendering.
const pathname = '/about' const state = title: 'About Us' description: '...' { return <> <h1>statetitle</h1> <p>statedescription</p> </> }
Loading data
Routes that require data or those that need dynamic properties can define a
config
function that returns a page config containing the same properties
listed above.
These values will be deeply merged with whatever static exports were provided.
const pathname = '/about' const state = title: 'About Us' team: 'Eric' { return } { return <> <h1>statetitle</h1> <h2>Team</h2> stateteam </> }
Generating pages from loaded data
For generative pages and pagination, the config
function can also return an
array of page configs. Each of these configs should define its own pathname
,
so that each page is rendered separately.
The following example will generate a page for each post returned from
getBlogPosts
:
{ return } { return <> <h1>statetitle</h1> <article> statecontent </article> </> }
Configuration
biti
supports minimal configuration, and otherwise falls back to smart
defaults. To define a config for all rendering tasks, you can create a
biti.config.js
file.
biti
supports the following properties on the config file:
env
- object - properties on this object will be attached toprocess.env
, as well as defined globally within the compilation.alias
- object - module import aliases
Example:
moduleexports = env: API_KEY: 'abcdefg' alias: components: './src/components'
Default config
By default, biti
defines a single alias @
that points to process.cwd()
.
You can use it throughout your templates like this:
CLI
biti
only has two commands: render
and watch
.
Both follow the same pattern:
biti <command> <src> <dest>
For example:
biti render /pages /static
These commands also accept globs as the src
property, allowing you to specify
individual pages or directories.
biti render /pages/about-us.js /staticbiti render /pages/*.js /staticbiti render /pages/marketing-site/*.js /staticbiti render /pages/**/*.js /static
API
Using biti
programmatically is virtually the same as using the CLI, only
you'll need to pass your configuration object manually.
const biti = const config = env: ... alias: ... const app =
Both render
and watch
have the following signature:
app
render
Renders all pages from src
dest
.
app
watch
Watches all pages in src
and renders to dest
on file change.
app
API Events
A biti
instance emits a few helpful events as well.
render
After rendering a single page.
app
rendered
After rendering all pages. On watch this is called after every change has been compiled and rendered.
app
error
app
License
MIT License © Eric Bailey