-
Notifications
You must be signed in to change notification settings - Fork 0
/
schema.html
145 lines (142 loc) · 6.29 KB
/
schema.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
<!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>Schema</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-schema">
<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="output-schema">Output schema</h1>
<p>Given this input:</p>
<pre><code># Components
### Top header
This is the main header partial.
``` example.haml
= render 'components/top_header'
```
</code></pre>
<h2 id="sample-output">Sample output</h2>
<p>You’ll get this JSON output:</p>
<pre><code class="lang-json">{ "files":
{ "components.md":
{ "title": "Components",
"name": "components.md",
"sections":
{ "components":
{ "id": "components",
"title": "Components",
"depth": 1 },
"top-header":
{ "id": "top-header",
"title": "Top header",
"depth": 3,
"parts":
{ "s1":
{ "type": "text",
"language": "html",
"content": "<p>This is the main header partial.</p>" },
"s2":
{ "type": "example",
"language": "haml",
"content": "= render 'components/top_header'" } } } } } },
"toc": { ... } }
</code></pre>
<p>It breaks down like so:</p>
<ul>
<li>A styleguide has many <a href="#files">Files</a>.</li>
<li>A file has many <a href="#sections">Sections</a>.</li>
<li>A section has many <a href="#parts">Parts</a>.</li>
</ul>
<h2 id="files">Files</h2>
<blockquote>
<p><code>files</code></p>
</blockquote>
<p><code>files</code> is a Dictionary where the key is the filename (eg, <em>‘<a href="http://components.md">components.md</a>’</em>) and the value is the file.
A file has the following fields:</p>
<ul>
<li><code>name</code> - The filename</li>
<li><code>title</code> - The title, taken from the first <em>H1</em> elemnet.</li>
<li><code>sections</code> - a Dictionary</li>
</ul>
<h2 id="sections">Sections</h2>
<blockquote>
<p><code>files.*.sections</code></p>
</blockquote>
<p><code>sections</code> is a Dictionary where the key is the section ID, and the value is the section details. A section starts from a H1, H2, or H3 heading, followed the other blocks that follow it.</p>
<ul>
<li><code>id</code></li>
<li><code>title</code> - The title, taken from the <em>H2</em> or <em>H3</em> element that started the section.</li>
<li><code>depth</code> - <em>1</em>, <em>2</em> or <em>3</em>.</li>
<li><code>parts</code> - a Dictionary</li>
</ul>
<h2 id="parts">Parts</h2>
<blockquote>
<p><code>files.*.sections.*.parts</code></p>
</blockquote>
<p><code>parts</code> is a Dictionary where the key is the Part ID, and the value is the part details.</p>
<ul>
<li><code>id</code></li>
<li><code>type</code> - Can be <em>‘example’</em>, <em>‘text’</em>, or <em>‘code’</em>.</li>
<li><code>language</code></li>
<li><code>content</code></li>
<li><code>source</code> - If it was transpiled, the original source will be stored here.</li>
</ul>
<h2 id="table-of-contents">Table of Contents</h2>
<p>A table of contents will be generated when one of the files is called <code>README.md</code>. It looks like this:</p>
<pre><code class="lang-js">{ sections:
[ { title: <span class="pl-s">'Home'</span>,
source: <span class="pl-s">'index.md'</span>,
url: <span class="pl-s">'index.html'</span> },
{ title: <span class="pl-s">'Document'</span>,
sections:
[ { title: <span class="pl-s">'Index'</span>,
source: <span class="pl-s">'index.md'</span>,
url: <span class="pl-s">'index.html'</span> } ] } ] }
</code></pre>
</div>
<div class="footer-nav">
<div class="left"><a href="api.html"><span class="title">API</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 link-api">API</a>
</li>
<li class="menu-item -level-2"><a href="schema.html" class="link title -active link-schema">Schema</a>
<ul class="headings heading-list">
<li class="heading-item -depth-2"><a href="#sample-output" class="hlink link-sample-output">Sample output</a>
</li>
<li class="heading-item -depth-2"><a href="#files" class="hlink link-files">Files</a>
</li>
<li class="heading-item -depth-2"><a href="#sections" class="hlink link-sections">Sections</a>
</li>
<li class="heading-item -depth-2"><a href="#parts" class="hlink link-parts">Parts</a>
</li>
<li class="heading-item -depth-2"><a href="#table-of-contents" class="hlink link-table-of-contents">Table of Contents</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</div>
</div>
</body>
</html>