-
Notifications
You must be signed in to change notification settings - Fork 0
/
api.html
103 lines (101 loc) · 5.63 KB
/
api.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="assets/style.css?t=a44c9e9d">
<link rel="stylesheet" href="http://ricostacruz.com/docpress-rsc/style.css">
<script src="assets/script.js?t=2bcc4b59"></script>
<title>API</title>
<meta name="viewport" content="width=device-width">
</head>
<body class="-menu-visible">
<div class="doc-layout">
<div class="toggle menu-toggle js-menu-toggle"></div>
<div class="body page-api">
<div class="header-nav">
<div class="right"><a href="https://github.com/styledown/styledown" data-title="styledown/styledown" class="iconlink">
<!-- span.title Open in GitHub--><span class="icon -github"></span></a>
</div>
</div>
<div class="markdown-body"><h1 id="api-reference">API Reference</h1>
<p>Styledown provides a programatic API to allow you to consume your styleguides from within your web app.</p>
<pre><code class="lang-js"><span class="pl-k">var</span> styledown = <span class="pl-c1">require</span>(<span class="pl-s">'styledown'</span>)
</code></pre>
<h2 id="parse">parse</h2>
<blockquote>
<p><code>styledown.parse(files, options)</code></p>
</blockquote>
<p>Parses synchronously from given inputs. This is useful for rendering your styleguide with your own views.</p>
<p>The parameter <code>files</code> is an array of objects. Each object should have these keys:</p>
<ul>
<li><code>name</code> <em>(String)</em> - The source filename.</li>
<li><code>contents</code> <em>(String)</em> - The raw contents of the file.</li>
</ul>
<p>The output is a JSON object; see <a href="schema.html">Schema</a> for details on how it looks like.</p>
<pre><code class="lang-js">styledown.parse([
{ name: <span class="pl-s">'components.md'</span>, contents: <span class="pl-s">'# This is Markdown data'</span> },
{ name: <span class="pl-s">'buttons.md'</span>, contents: <span class="pl-s">'...'</span> },
])
</code></pre>
<h2 id="parsefiles">parseFiles</h2>
<blockquote>
<p><code>styledown.parseFiles(files, options)</code></p>
</blockquote>
<p>Reads files asynchronously from disk then parses them. Returns a promise, which yields the same data structure as <a href="#styledownparse">styledown.parse</a>. See <a href="schema.html">Schema</a> for details on how it looks like.</p>
<pre><code class="lang-js">styledown.parseFiles([
<span class="pl-s">'./styleguides/components.md'</span>,
<span class="pl-s">'./styleguides/buttons.md'</span>
])
.then(result => { ... })
</code></pre>
<h2 id="render">render</h2>
<blockquote>
<p><code>styledown.render(data, filename, options)</code></p>
</blockquote>
<p>Renders to HTML, where <code>data</code> is assumed to be the output of <a href="#styledownparse">styledown.parse</a>. The parameter <code>filename</code> is the filename to be rendered. The result is HTML as a string.</p>
<pre><code class="lang-js"><span class="pl-k">var</span> data = styledown.parse([
{ name: <span class="pl-s">'buttons.md'</span>, contents: <span class="pl-c">/*snip*/</span> }
])
<span class="pl-k">var</span> result = styledown.render(data, filename)
</code></pre>
<p>These options may be given (all optional):</p>
<ul>
<li><code>layout</code> <em>(String)</em> - the contents of the layout to be used. Can be an <a href="https://www.npmjs.com/package/ejs">ejs</a> or <a href="https://www.npmjs.com/package/jade">jade</a> template, or anything supported by <a href="https://www.npmjs.com/package/jstransformer">jstransformer</a>.</li>
<li><code>layoutEngine</code> <em>(String)</em> - the jstransformer engine to use; defaults to <code>'ejs'</code>.</li>
<li><code>block</code> <em>(String)</em> - the block to render. Can be <em>‘body’</em> (default) or <em>‘menu’</em>.</li>
</ul>
<p>You can use custom jstransformer engines by specifying <code>layoutEngine</code>. By overriding it, tt’s assumed to be loading the npm package <code>jstransformer-<engine></code>.</p>
<p>If <code>block: 'menu'</code> is passed through the options, it will return the markup for the sidebar menu.</p>
</div>
<div class="footer-nav">
<div class="left"><a href="index.html"><span class="title">Styledown</span></a></div>
<div class="right"><a href="schema.html"><span class="label">Next: </span><span class="title">Schema</span></a></div>
</div>
</div>
<div class="menu toc-menu">
<li class="menu-item -level-0 -parent">
<ul class="submenu">
<li class="menu-item -level-1"><a href="index.html" class="link title link-index">Styledown</a>
</li>
<li class="menu-item -level-1 -parent"><span class="title">Users guide</span>
<ul class="submenu">
<li class="menu-item -level-2"><a href="api.html" class="link title -active link-api">API</a>
<ul class="headings heading-list">
<li class="heading-item -depth-2"><a href="#parse" class="hlink link-parse">parse</a>
</li>
<li class="heading-item -depth-2"><a href="#parsefiles" class="hlink link-parsefiles">parseFiles</a>
</li>
<li class="heading-item -depth-2"><a href="#render" class="hlink link-render">render</a>
</li>
</ul>
</li>
<li class="menu-item -level-2"><a href="schema.html" class="link title link-schema">Schema</a>
</li>
</ul>
</li>
</ul>
</li>
</div>
</div>
</body>
</html>