Roneo
Roneo is a somewhat flexible but pretty opinionated admin area. It does some things for you by default, but also leaves it up to you to conform to the HTML it expects to exist.
Usage
There are multiple parts to Roneo.
HTML structure
The general structure of the admin should conform to the content in ./html/shell.html. There’s also a slim version at ./html/shell.slim.
JavaScript
General JavaScript for the admin shell. This will handle any document onready bindings for setup. Simple import and call it:
import roneo from 'roneo'
roneo()There are also two separate components for bootstrapping the page. These are intended to be inlined in the <head> and just inside the </body> respectively.
inline-header asynchronously loads some custom fonts for the admin from Google Fonts. It also checks a localStorage value to see if the fonts should already be cached, for example on subsequent page loads, and adds a .fonts-loaded class to the document:
import inlineHeader from 'roneo/lib/inline-header'
let options = {}
inlineHeader(options)inline-footer is there to perform any additional (non speed-critical) tasks. At the moment it checks the set of fonts that are expected to be loaded have actually loaded, and then sets the localStorage value used in inline-header so we can assume the fonts are cached.
import inlineFooter from 'roneo/lib/inline-footer'
let options = {}
inlineFooter(options)Components
CSS
@import 'roneo/lib/index.css'