Skip to content

icelab/roneo

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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'