forked from stephband/fn
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtemplates.html
248 lines (211 loc) · 11.4 KB
/
templates.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
235
236
237
238
239
240
241
242
243
244
245
246
247
248
<template build-remove id="head-template">
<meta charset="utf-8" />
<meta name="author" content="{[author.name]}" />
<meta name="description" content="Documentation for {[title]}. {[description]}" />
<meta name="viewport" content="width=device-width" />
<meta name="twitter:card" content="summary"></meta>
<meta name="twitter:site" content="@{[author.twitter]}"></meta>
<meta property="og:url" content="{[homepage]}" />
<meta property="og:title" content="{[title]}" />
<meta property="og:description" content="{[description]}" />
<meta property="og:image" content="{[image]}" />
<title>{[title]}</title>
<script title="load">
document.documentElement.className += ' js content-loading loading';
window.addEventListener('DOMContentLoaded', () => document.documentElement.classList.remove('content-loading'));
// Wait for other load handlers to run first - Bolt does a few things on
// load (eg. locateable scrolls) and we want them to run before the loading
// class is removed
window.addEventListener('load', () => window.requestAnimationFrame(() => document.documentElement.classList.remove('loading')));
</script>
<link rel="shortcut icon" href="images/logo-64x64.ico" />
<link rel="icon" type="image/png" href="images/logo-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="images/logo-64x64.png" sizes="64x64">
<link rel="icon" type="image/png" href="images/logo-128x128.png" sizes="128x128">
</template>
<template build-remove id="header-template">
<h1 class="doctext-01">{[title]} <span class="doctext-06">{[version]}</span></h1>
<p class="doctext-08">{[description]}</p>
<ul class="link-index index">
<li><strong>repo:</strong> <a href="{[repository.url]}">{[repository.url|replace:'https://','']}</a></li>
<li><strong>bugs:</strong> <a href="{[bugs.url]}">{[bugs.url|replace:'https://','']}</a></li>
</ul>
</template>
<template build-remove id="title-template">
<h3 class="doctext-04" build-fn="after:body">{[name]}</h3>
</template>
<template build-remove id="h2-template">
<header class="x-1 4x @1-x-1 @2-x-2">
<h2 class="doctext-02">
<a href="#{[id]}">
<code class="language-js" build-fn="append:title" style="color: inherit;"></code>
</a>
</h2>
</header>
<div class="x-1 3x @2-x-2" build-fn="append:body"></div>
</template>
<template build-remove id="attribute-template">
<article build-fn="append:body" class="attribute-doc-toggle-block doc-toggle-block toggle-block block" toggleable id="attribute-{[id]}">
<h3 class="doctext-05">
<a href="#attribute-{[id]}">
<code class="token language-js">[<span build-fn="append:title"></span>]</code>
</a>
</h3>
</article>
</template>
<template build-remove id="constructor-template">
<article class="function-doc-toggle-block doc-toggle-block toggle-block block 3x" toggleable="" id="{[0.id]}">
<h3 build-fn="get:0 after:body" class="doctext-05 dot-indent">
<a href="#{[id]}">
<code class="property language-js">"{[name|lowercase]}"</code>
</a>
</h3>
<template build-src="/fn/templates.html#property-method-template"></template>
</article>
</template>
<template build-remove id="method-template">
<article build-fn="append:body" class="method-doc-toggle-block doc-toggle-block toggle-block block" toggleable id="method-{[id]}">
<h3 class="doctext-05 {[prefix|is:'.'|yesno:'dot-indent','']}">
<a href="#method-{[id]}">
<code build-fn="append:title" class="function language-js"></code>
</a>
</h3>
</article>
</template>
<template build-remove id="property-template">
<article build-fn="append:body" class="property-doc-toggle-block doc-toggle-block toggle-block block" toggleable id="property-{[id]}">
<h3 class="doctext-05 {[prefix|is:'.'|yesno:'dot-indent','']}">
<a href="#property-{[id]}">
<code build-fn="append:title" class="property language-js"></code>
</a>
</h3>
</article>
</template>
<template build-remove id="class-template">
<article build-fn="append:body" class="class-doc-toggle-block doc-toggle-block toggle-block block class-grid grid @2-9-grid" toggleable id="class-{[id]}">
<h3 class="doctext-05 {[prefix|is:'.'|yesno:'dot-indent','']}">
<a href="#class-{[id]}">
<code build-fn="append:title" class=""></code>
</a>
</h3>
</article>
</template>
<!--
Component template
The first documentation comment is treated as the section header. Expects
documentation comments in the form:
/**
Component-title
```html
<Component example HTML>
```
<Component example HTML>
Description
**/
/**
CSS .class OR --variable
Description
**/
-->
<template build-remove id="component-template">
<section class="component-doc-toggle-block doc-toggle-block toggle-block block" toggleable id="component-{[0.id]}">
<header class="class-grid grid 3-grid @1-6-grid @2-9-grid">
<h3 build-fn="after:'0.body'" class="x-1 3x @1-x-2 @2-x-3 doctext-03 {[0.prefix|is:'.'|yesno:'dot-indent','']}">
<a build-fn="append:'0.title'" class="doctoggle-button button" href="#component-{[0.id]}"></a>
</h3>
</header>
<section build-fn="rest:1 each" class="block class-grid grid @1-6-grid @2-9-grid">
<h4 class="x-1 x-start 3x @2-2x @2-x-end doctext-05 {[prefix|is:'.'|yesno:'dot-indent','']}">
<code build-fn="append:title" class=""></code>
</h4>
<div class="block x-3 2x y-baseline" build-fn="append:example"></div>
<div hidden class="block x-6 3x y-start" build-fn="append:body"></div>
</section>
</section>
</template>
<template build-remove id="css-template">
<section class="x-1 9x grid" style="--row-gap: var(--input-margin);" id="components" locateable>
<header class="x-3 2x x-start">
<h3 build-fn="get:0 after:body" class="doctext-03 {[prefix|is:'.'|yesno:'dot-indent','']}">
<a build-fn="append:title" class="doctoggle-button button" href="#component-{[id]}"></a>
</h3>
</header>
<section build-fn="rest:1 filter-not-var" class="x-1 5x y-2 grid" style="grid-auto-flow: row; align-content: start;" id="component-{[0.id]}">
<template build-fn="each">
<h4 class="x-1 2x x-end y-baseline doctext-05 {[prefix|is:'.'|yesno:'dot-indent','']} right-align">
<a href="#{[id]}-description" title="Show HTML markup"><code build-fn="title-replace-comma-br append:title"></code></a>
</h4>
<div class="x-3 2x x-stretch y-baseline block" build-fn="prepend:example"></div>
<div class="@2-x-5 x-stretch block">
<div class="bottom-right-bubble right-bubble bubble" style="width: calc(300% + 2 * var(--column-gap)); max-width: calc(300% + 2 * var(--column-gap)); min-width: 20rem; top: 0.75rem;" popable build-fn="append:body" id="{[id]}-description"></div>
</div>
</template>
</section>
<section build-fn="rest:1 filter-var" class="x-1 @2-x-5 5x y-2 grid" style="grid-auto-flow: row; align-content: start; column-gap: 1em; row-gap: 0.33333333em;">
<template build-fn="each">
<label class="x-1 2x x-end y-baseline doctext-05 {[prefix|is:'.'|yesno:'dot-indent','']}" for="doc-var-{[id]}">
<code build-fn="append:title" style="color: #888888;"></code><span style="color: transparent;">:</span>
</label>
<input class="x-3 1x x-stretch y-baseline doc-var-input pill-input" style="color: #666666;" name="--{[id]}" id="doc-var-{[id]}" type="text" placeholder="value"/>
<div class="x-4 2x" style="color: transparent;">;</div>
</template>
</section>
</section>
</template>
<template build-remove id="styleguide-template">
<section class="x-1 9x 6x-grid @2-9x-grid grid" style="--row-gap: var(--input-margin);" id="components" locateable>
<header class="x-1 3x @1-x-3 @1-4x @2-2x x-start">
<h3 build-fn="get:0 after:body" class="doctext-03 {[prefix|is:'.'|yesno:'dot-indent','']}">
<a build-fn="append:title" class="doctoggle-button button" href="#component-{[id]}"></a>
</h3>
</header>
<section build-fn="rest:1 filter-not-var" class="x-1 6x @1-6x @2-5x y-2 grid" style="grid-auto-flow: row; align-content: start;" id="component-{[0.id]}">
<template build-fn="each">
<h4 class="x-1 2x x-start @1-2x @1-x-end y-baseline doctext-05 {[prefix|is:'.'|yesno:'dot-indent','']} right-align">
<a href="#{[id]}-description" title="Show HTML markup"><code build-fn="title-replace-comma-br append:title"></code></a>
</h4>
<div class="x-1 3x @1-x-3 @1-4x @2-2x x-stretch y-baseline block" build-fn="prepend:example"></div>
<div class="x-1 3x @1-2x @2-x-5 x-stretch y-baseline block">
<a class="docbubble-thumb thumb" href="#{[id]}-description" style="text-decoration: none;">Code</a>
<div class="bottom-right-bubble right-bubble bubble" style="width: calc(300% + 2 * var(--column-gap)); max-width: calc(300% + 2 * var(--column-gap)); min-width: 20rem; top: 0.75rem; left: 2.5rem;" popable build-fn="append:body" id="{[id]}-description"></div>
</div>
</template>
</section>
</section>
</template>
<template build-remove id="function-template">
<article build-fn="append:body" class="function-doc-toggle-block doc-toggle-block toggle-block block" toggleable id="function-{[id]}">
<h3 class="doctext-05 {[prefix|is:'.'|yesno:'dot-indent','']}">
<a href="#function-{[id]}">
<code build-fn="append:title" class="function language-js"></code>
</a>
</h3>
</article>
</template>
<template build-remove id="fn-template">
<article build-fn="append:body" class="fn-doc-toggle-block doc-toggle-block toggle-block block" toggleable id="fn-{[id]}">
<h3 class="doctext-05 {[prefix|is:'.'|yesno:'dot-indent','']}">
<a href="#fn-{[id]}">
<code build-fn="append:title" class="language-js"></code>
</a>
</h3>
</article>
</template>
<template build-remove id="section-template">
<article build-fn="append:body" class="section-doc-toggle-block doc-toggle-block toggle-block block active" id="section-{[id]}">
<h3 class="doctext-05 {[prefix|is:'.'|yesno:'dot-indent','']}">
<code build-fn="append:title" class="function language-js"></code>
</h3>
</article>
</template>
<template build-remove id="body-template">
<article build-fn="append:body" class="body-doc-toggle-block doc-toggle-block toggle-block block active" id="{[id]}"></article>
</template>
<template build-remove id="property-method-template">
<section class="x-1 2x @1-x-1 @2-x-2">
<template build-fn="filter-property each" build-src="/fn/templates.html#{[type]}-template"></template>
</section>
<section class="x-1 2x @1-x-3 @2-x-4">
<template build-fn="filter-method each" build-src="/fn/templates.html#{[type]}-template"></template>
</section>
</template>