ListBoy

ListBoy is a tool for making lists of lists of lists ...

They are easily and quickly defined using JSON, and ListBoy renders them for you.

How to use

Getting Started

1. You'll need to include the javascript source. I wrote it in TypeScript, but AFAIK Chrome doesn't support .ts files out of the box.
2. You'll need to define your structured content somewhere (I personally like a script tag in the head).
3. You'll also need to mark a place that you want ListBoy to put your rendered content.
4. And to tie it all together, a call to ListBoy.

Will look something like this:

Admittedly, this isn't pretty, and looks chaotic, on the page as is, but the structure emitted is rich, and there are a lot of different CSS classes that are emitted so that you can easily make it look more organized.

Reference Samples

While you could read the rest of this document to figure out how to use ListBoy in more detail, there's a chance that I forgot to update the docs, or something. I built ListBoy to make my Klingon reference cheat sheet. I think it's a pretty good simple example of what ListBoy can do.

• mIQey tlhIngan Hol nompuq

I've used it on other projects, some of which look fancier. If you're interested in how ListBoy can be pushed to its limits, take a look at one of these:

• McKay's Blueprint
• ListBoy Features Test

Features

• Easy JSON notation. Basic JSON support just works, Objects (which ListBoy emits as Dictionaries), Arrays, strings, and numbers should just work.
• Programmattic CSS Class list. There's a CSSClasses enum that enumerates all CSS classes that ListBoy emits.
• Pseudo-markdown support. Beginning any string with a backquote `, tells ListBoy to ignore default CSS Classes, and enter it's pseudo-markdown mode. Currently it only supports *em* and **strong**, but I could add more.
  "`" becomes ""
• Function invocation helpers. Admittedly, ListBoy can't do everything. Every once in a while there's something that you wish you could do a little more to customize. Listboy will call a function in the tree. Hopefully with enough context that you can have the data you need to make some changes. (The blueprint sample uses this feature to call out to D3.)

TODO

See the Kanban board for things I still want to do. I think Github allows you to file bugs or feature requests if there's something you want out of ListBoy.