-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
234 lines (193 loc) · 7.33 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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<html>
<head>
<script src="http://localhost:35729/livereload.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="lib/queue.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/putstuffhere.js" type="text/javascript" charset="utf-8"></script>
<script src="index.js" type="text/javascript" charset="utf-8"></script>
<script>
var init = function() {
var psh = PutStuffHere.shared();
var templateField = document.getElementById('template');
var localsField = document.getElementById('locals');
var template = psh.compileText(templateField.value);
var recalculate = function() {
try {
var locals = JSON.parse(localsField.value);
localsField.style.background = '#444';
document.getElementById('rendered').innerHTML = template(locals);
} catch(e) {
localsField.style.background = '#a44';
}
};
var recompile = function() {
template = psh.compileText(templateField.value);
recalculate();
};
templateField.addEventListener('keyup', recompile);
localsField.addEventListener('keyup', recalculate);
recalculate();
};
window.addEventListener('DOMContentLoaded', init);
</script>
</head>
<body>
<header><h1> Put Stuff Here</h1></header>
<p>
<em>Put Stuff Here</em> is a minimalist, human-first templating system. Instead of writing something like <span>{{article.title}}</span> or <span><%= titles[i] %></span>, you just write <span>Put title here</span>. For example:
</p>
<form>
<textarea id="template" cols="40"><h2> Put title here </h2>
<p>
Put body here
</p>
<p>
– <em>put author here</em>
</p></textarea>
<p class="math">+</p>
<textarea id="locals" cols="40">{
"title": "Hello World!",
"body": "Try editing the values in the text areas. All keys and values must be strings.",
"author": "Ben Syverson"
}</textarea>
</form>
<p class="math">=</p>
<div id="rendered">
</div>
<p><em>Put Stuff Here</em> is so easy to understand that almost anyone can create or edit a template. This reduces the burden on web developers, and empowers less technical folks to make changes.
</p>
<p>The result is more fluid collaboration and faster iterations. For example, a visual designer can create a template in <a href="http://webflow.com/">WebFlow</a> or another WYSIWYG editor, which can be dropped directly into your prototype.
</p>
<p><a href="https://github.com/bensyverson/putstuffhere">View on GitHub</a></p>
<h2>Features</h2>
<ul>
<li>Very few features!</li>
<li>Easy to understand (for everyone).</li>
<li>Templates can be compiled to fast functions.</li>
<li>Templates can be fetched and cached from <span>.html</span> files, via <span>fs()</span> in Node.js or AJAX in the browser.</li>
<li>All values are HTML-escaped by default. To insert HTML, use this parenthetical: <span>Put stuff (unescaped) here</span>.</li>
</ul>
<h2>Parentheticals</h2>
<p>Parentheticals will be applied as methods on the string; Given <span>stuff = "Example"</span>, the output from: <span>Put stuff (toLocaleUpperCase) here</span> will be: <span>EXAMPLE</span>. But don’t do that. Leave case transformations to CSS.
<p>The parenthetical API is provided to allow you to manipulate variables in your own application-specific way. For example, if you need to show a summary of an article, rather than exporting <span>body</span> and a separate variable, <span>summary</span>, you could export <span>body</span>, and extend <span>String</span> with:
</p>
<p><span>String.prototype.summary = function() {<br />
return this.substr(0, 30) + "…";<br />
}</span></p>
<p>Then, in your template, you could write: <span>Put body (summary) here</span>. Use this form sparingly, because it makes the template less readable and more complicated.
<h2>FAQ</h2>
<p><strong>Q: What about conditionals, loops, and transformations?</strong><br />
A: I strongly believe that these things belong in your application logic. When you mix logic into your template, you suddenly have many places to look for bugs. Logic-riddled templates are far less readable to non-technical people.
</p>
<p><strong>Q: How would you handle a list, then?</strong><br />
A: That’s up to you. I might run Put Stuff Here templates against each list item, and concatenate the result into a <span>list</span> variable. Then you could write <span>Put list (unescaped) here</span> in the parent template.
</p>
<p><strong>Q: So you only support one magic phrase?</strong><br />
A: Right now, the only supported format is <span>Put stuff here</span>, but support is coming for <span>Insert stuff</span> and <span>Stuff goes here</span>. I would love to get support for other languages—feel free to send a pull request.
</p>
<p><strong>Q: I need to have the phrase "Put X here" in my template. How do I escape it?</strong><br />
A: Do you <em>really</em> need it in your template? If so, insert a newline (<span>\n</span>) or HTML tag somewhere in the phrase:
</p>
<p><span>Put<br />something here.</span></p>
<p>Or: <span>Put <!-- --> something here.</span></p>
<p><em>Put Stuff Here</em> will only expand a phrase if it’s in one contiguous line. The linebreak will of course be ignored by the browser.</p>
<footer>© Copyright 2015 Ben Syverson. <a href="https://github.com/bensyverson/putstuffhere">MIT License. View on GitHub</a></footer>
<style type="text/css">
body {
font-family: "Georgia", serif;
color: #555;
background: #eee;
line-height: 1.5em;
}
a:link { color: #e55; }
a:visited { color: #e86; }
a:hover { color: #f98; }
a:active { color: #b00; }
p, div, ul, footer, header {
width: 30em;
margin: 0 auto;
margin-bottom: 1.5em;
text-align: left;
}
form {
display: table;
margin: 0 auto;
}
form textarea, form p {
display: table-cell;
vertical-align: middle;
}
span, h1, h2 {
color: #09e;
}
textarea, span {
font-family: "Menlo", Courier, monospace;
font-size: 90%;
padding: 0em 0.25em;
}
textarea {
background: #444;
color: #fff;
height: 15em;
display: inline-block;
border: 0;
padding: 0.5em;
-webkit-transition: background 0.3s;
-moz-transition: background 0.3s;
-ms-transition: background 0.3s;
-o-transition: background 0.3s;
transition: background 0.3s;
}
textarea, div {
border-radius: 4px;
}
div {
padding: 1em;
max-width: 40em;
margin: 0 auto;
margin-bottom: 2em;
background: #ddd;
}
div p {
margin-bottom: 1em;
}
ul {
list-style: none;
list-style-position: outside;
padding-left: 0.5em;
}
li:before {
color: #aaa;
content: '✔ ';
margin-left: -1.4em; margin-right: .100em;
}
p.math {
width: auto;
font-size: 400%;
text-align: center;
margin: 0.2em 0;
}
h1, h2, h3 {
text-align: center;
font-weight: 100;
font-family: "HelveticaNeue-UltraLight", "Helvetica", sans-serif;
font-size: 400%;
line-height: 1em;
margin: 0;
margin-bottom: 0.25em;
}
h2 {
font-size: 200%;
font-family: "HelveticaNeue-Light";
font-weight: 200;
}
header {
margin-top: 3em;
}
footer {
margin-top: 2em;
color: #aaa;
}
</style>
</body>
</html>