-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
143 lines (134 loc) · 5.69 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<html>
<head>
<script src="ListBoy.js"></script>
<script>
let data = { a: "b", c: ["d", "e"], f: null };
ListBoy.RenderTo(data, "ListBoyPleasePutMyStuffHere");
// This should work on any document ready state
setTimeout(() => {
ListBoy.RenderTo(data, "lines");
}, 1);
const sample = "normal **strong** normal *italics* normal";
ListBoy.RenderTo(sample, "markdown-sample");
ListBoy.RenderTo("`" + sample, "markdown-rendered");
</script>
<style>
.code {
font-family: monospace;
background-color: #fed;
}
textarea {
width: 100%;
height: 20em;
}
#lines div {
border: 1px solid blue;
margin:2px;
}
#lines span {
padding-right: 4px;
}
#lines .null-value {
border: 1px dashed red;
}
</style>
</head>
<body>
<h1>ListBoy</h1>
<p>ListBoy is a tool for making lists of lists of lists ...</p>
<p>They are easily and quickly defined using JSON, and ListBoy renders them for you.</p>
<h2>How to use</h2>
<h3>Getting Started</h3>
<ol>
<li>
You'll need to include the javascript source. I wrote it in TypeScript, but
AFAIK Chrome doesn't support <span class="code">.ts</span> files out of
the box.
</li>
<li>
You'll need to define your structured content somewhere (I personally like a
<span class="code">script</span> tag in the <span class="code">head</span>).
</li>
<li>
You'll also need to mark a place that you want ListBoy to put your rendered
content.
</li>
<li>And to tie it all together, a call to ListBoy.</li>
</ol>
<textarea>
<html>
<head>
<!-- #1 include the ListBoy Code-->
<script src="https://github.mckaysalisbury.com/ListBoy/ListBoy.js"></script>
<script>
// #2 Declare the structure
let myContent = { a: "b", c: ["d", "e"], f: null }
// #4 Call to ListBoy
ListBoy.RenderTo(myContent, "ListBoyPleasePutMyStuffHere");
</script>
</head>
<body>
<!-- #3 Mark where the content should go -->
<div id="ListBoyPleasePutMyStuffHere"></div>
</body>
</html></textarea>
<p>Will look something like this:</p>
<div id="ListBoyPleasePutMyStuffHere"></div>
<p>
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.
</p>
<div id="lines"></div>
<h3>Reference Samples</h3>
<p>
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.
</p>
<ul>
<li><a href="tlhIngan.html">mIQey tlhIngan Hol nompuq</a></li>
</ul>
<p>
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:
</p>
<ul>
<li><a href="blueprint.html">McKay's Blueprint</a></li>
<li><a href="features.html">ListBoy Features Test</a></li>
</ul>
<h2>Features</h2>
<ul>
<li>
<strong>Easy JSON notation.</strong> Basic JSON support just works, Objects (which
ListBoy emits as Dictionaries), Arrays, strings, and numbers should just work.
</li>
<li>
<strong>Programmattic CSS Class list.</strong> There's a
<span class="code">CSSClasses</span> enum that enumerates all CSS classes that
ListBoy emits.
</li>
<li>
<strong>Pseudo-markdown support.</strong> Beginning any string with a backquote
<span class="code">`</span>, tells ListBoy to ignore default CSS Classes, and enter
it's pseudo-markdown mode. Currently it only supports <span class="code">*em*</span>
and <span class="code">**strong**</span>, but I could add more.<br/>
"<span class="code">`<span id="markdown-sample"></span></span>" becomes
"<span id="markdown-rendered" class="code"></span>"
</li>
<li>
<strong>Function invocation helpers.</strong> 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.)
</li>
</ul>
<h2>TODO</h2>
<p>
See the <a href="https://github.com/mckaysalisbury/ListBoy/projects/1">Kanban board</a>
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.</p>
</body>
</html>