biti

npm i biti -g

Euen Dieses Repo ist zugunsten von @rola/static und dem ROLA -Projekt veraltet.

Merkmale

• einfache statische Seitengenerierung
• intelligente Dateibeobachtung
• Praktische Cli
• Easy Node API

Verwendung

biti watch pages/ static/

Erste Schritte

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.

Konfigurieren einer Seite

Jede Seite erfordert die folgenden Exporte:

• pathname - string - the path where you'd like the page to appear
• view - function - a function that returns a React component

The pathname property will be passed to the view component.

Eine einfache Seite könnte so aussehen:

 import React from 'react'

export const pathname = '/about'

export function view ( { pathname } ) {
  return (
    < >
      < h1 > About Us </ h1 >
      < p > ... </ p >
    </ >
  )
} 

Statische Daten

Pages can also export a state object, which will also be passed to the view function when rendering.

 import React from 'react'

export const pathname = '/about'

export const state = {
  title : 'About Us' ,
  description : '...'
}

export function view ( { state , pathname } ) {
  return (
    < >
      < h1 > { state . title } </ h1 >
      < p > { state . description } </ p >
    </ >
  )
} 

Daten laden

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.

 import React from 'react'
import { getAboutPage } from './lib/api.js'

export const pathname = '/about'

export const state = {
  title : 'About Us' ,
  team : [
    'Eric'
  ]
}

export function config ( ) {
  return getAboutPage ( )
    . then ( res => {
      return {
        state : {
          team : res . team
        }
      }
    } )
}

export function view ( { state , pathname } ) {
  return (
    < >
      < h1 > { state . title } </ h1 >

      < h2 > Team </ h2 >

      { state . team . map ( name => (
        < p key = { name } > { name } </ p >
      ) ) }
    </ >
  )
} 

Seiten aus geladenen Daten generieren

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 :

 import React from 'react'
import { getBlogPosts } from './lib/api.js'

export function config ( ) {
  return getBlogPosts ( )
    . then ( posts => {
      return posts . map ( post => ( {
        pathname : `/posts/ ${ post . slug } ` ,
        state : {
          title : post . title ,
          content : post . content
        }
      } ) )
    } )
}

export function view ( { state , pathname } ) {
  return (
    < >
      < h1 > { state . title } </ h1 >

      < article >
        { state . content }
      </ article >
    </ >
  )
} 

Konfiguration

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 to process.env , as well as defined globally within the compilation.
• alias - object - module import aliases

Beispiel:

 module . exports = {
  env : {
    API_KEY : 'abcdefg'
  } ,
  alias : {
    components : './src/components'
  }
} 

Standardkonfiguration

By default, biti defines a single alias @ that points to process.cwd() . Sie können es in Ihren Vorlagen wie folgt verwenden:

 import Component from '@/src/components/Component.js' 

Cli

biti only has two commands: render and watch .

Beide folgen dem gleichen Muster:

biti < command > < src > < dest >

Zum Beispiel:

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 /static
biti render /pages/ * .js /static
biti render /pages/marketing-site/ * .js /static
biti 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 = require ( 'biti' )

const config = {
  env : { ... } ,
  alias : { ... }
}

const app = biti ( config )

Both render and watch have the following signature:

 app . render ( src , dest ) 

machen

Renders all pages from src dest .

 app . render ( '/src' , '/static' ) 

betrachten

Watches all pages in src and renders to dest on file change.

 app . watch ( '/src' , '/static' )

API -Ereignisse

A biti instance emits a few helpful events as well.

machen

Nach einer einzigen Seite.

 app . on ( 'render' , page => { } ) 

gerendert

Nach dem Rendern aller Seiten. Bei der Uhr heißt dies, nachdem jede Änderung zusammengestellt und gerendert wurde.

 app . on ( 'rendered' , pages => { } ) 

Fehler

 app . on ( 'error' , error => { } ) 

Lizenz

MIT -Lizenz © Eric Bailey