nanopage
A super easy way of traversing flat content state. Pairs nicely with nanocontent
.
npm i nanopage --save
Example
var Page = // some content statevar state = href: '/' content: '/': title: 'Just a site' text: 'With some text' tags: 'and' 'some' 'tags' '/example': title: 'Example' text: 'Scope it out' great: demo: 'Am I right?' nah: 'Ok nbd.' // instantiate the pagevar page = state // directly access pages by their hrefvar site = valuevar about = value // grab children and filesvar children = valuevar files = value // create new queries from previousvar first = valuevar last = value // access specific keysvar lastTitle = value'title' // like thisvar lastTitle = valuetitle // or like this
Usage
- Every method (almost) is chainable
- End a query and return it’s value by calling
.value()
or.v()
- Values can be reused in new queries by doing
page(oldQuery)
Want to transform a directory of files and folders into flat content state? Try Nanocontent! Super handy to use with Enoki and Choo. If using Choo, you might not even need it.
Philosophy
State is really handy. Especially global state. We ended up with state when webapps started to get really complex and we needed all of the interface to stay in sync with new data and minimize the amount of updates happening to the DOM.
After a while, we started using state for sites too. That is, sites that look more like sites and less like apps. Mostly because state is super handy. However, state can get really messy as sites get larger. Where do you store data? How do you reference it? If you have ten nested pages, do you have ten nested objects?
Instead of all of this complexity, lets reintroduce the URL. Each page url of your site is a key in a flat object. We can simply use the window.location
to grab the data/content for the current page. Or, we can use any arbitrary url, like /members/nelson
.
This way of organizing state for sites as a flat object of page urls makes it super trivial to access content in your views and pass it down into components, or whatever. Ok cool!
Extra
Using Choo? Try the plugin! Don’t need all the bells and whistles? Try creating your own basic Choo plugin from scratch.
Use the Choo plugin
var html = var choo = var app = app app if moduleparent moduleexports = appelse app
Basic vanilla Choo plugin
app
Methods
.children()
Alias for .pages()
.
.file(filename)
Grab an individual file. For example, .file('example.jpg')
.
.files()
Files of the current page
.
.find(href)
Locate a sub-page
of the current page
based on the href
.
.first()
Returns the first page
or file
.
.hasView()
Does the current page have a custom view?
.images()
Images of the current page.
.isActive()
Is the current page active? Returns boolean.
.last()
Returns the last page
or file
.
.page()
The current page.
.pages()
Sub-pages of the current page.
.parent()
The parent of the current page.
.shuffle()
Shuffle values of an array.
.sort()
Sorts the current value’s .pages
by .order
. Formatting of .order
follows the arguments of .sortBy
separated by a space. For example, date asc
.
.sortBy(key, order)
Sort the files
or pages
based by a certain key. Order can be either asc
or desc
. For example, .sortBy('name', 'desc')
or .sortBy('date', 'asc')
.
.toArray()
Converts the values of an object to an array.
.v()
Alias for .value()
.
.value()
Return the current value. Not chainable.
.visible()
Returns if the current value key visible
is not false
.