vowel 0.1.18 → 0.1.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bin.js +1 -1
- package/package.json +1 -1
- package/server.js +2 -1
- package/src/app.html +0 -19
- package/src/lib/components/DefaultStyles.svelte +67 -305
- package/src/lib/components/Frontmatter.svelte +2 -1
- package/src/lib/components/Markdown/Image.svelte +3 -1
- package/src/lib/components/Markdown/index.svelte +5 -5
- package/src/lib/components/Nav.svelte +1 -1
- package/src/lib/components/NoStyles.svelte +5 -0
- package/src/lib/components/Page.svelte +20 -0
- package/src/lib/components/ResetStyles.svelte +128 -0
- package/src/lib/components/TypographyStyles.svelte +265 -0
- package/src/lib/components/index.js +4 -1
- package/src/lib/utilities/createPageClass.js +3 -3
- package/src/lib/utilities/getFileLabel.js +2 -1
- package/src/routes/+error.svelte +110 -0
- package/src/routes/[...path]/+layout.server.js +8 -9
- package/src/routes/[...path]/+page.server.js +3 -2
- package/src/routes/[...path]/+page.svelte +46 -567
package/bin.js
CHANGED
|
@@ -24,7 +24,7 @@ const spawnArgs = ['./server.js', '--directory', homeDir];
|
|
|
24
24
|
if (args._.includes('build')) spawnArgs.push('--build');
|
|
25
25
|
|
|
26
26
|
if (!args.verbose) {
|
|
27
|
-
filterConsole(['jsconfig', 'vite', 'Vite', 'tsconfig', `--host`]);
|
|
27
|
+
// filterConsole(['jsconfig', 'vite', 'Vite', 'tsconfig', `--host`]);
|
|
28
28
|
console.log(`\n\n`);
|
|
29
29
|
}
|
|
30
30
|
|
package/package.json
CHANGED
package/server.js
CHANGED
package/src/app.html
CHANGED
|
@@ -3,26 +3,7 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
|
-
<style>
|
|
7
|
-
html {
|
|
8
|
-
-webkit-text-size-adjust: 100%;
|
|
9
|
-
margin: 0;
|
|
10
|
-
font-size: 62.5%;
|
|
11
|
-
}
|
|
12
6
|
|
|
13
|
-
body {
|
|
14
|
-
font-size: 1.6rem;
|
|
15
|
-
line-height: 1.5;
|
|
16
|
-
-webkit-font-smoothing: antialiased;
|
|
17
|
-
font-weight: 400;
|
|
18
|
-
margin: 0;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.container {
|
|
22
|
-
height: 100vh;
|
|
23
|
-
overflow-y: scroll;
|
|
24
|
-
}
|
|
25
|
-
</style>
|
|
26
7
|
%sveltekit.head%
|
|
27
8
|
</head>
|
|
28
9
|
|
|
@@ -1,18 +1,16 @@
|
|
|
1
|
-
<
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
/*
|
|
1
|
+
<script>
|
|
2
|
+
import { TypographyStyles } from '.';
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
<TypographyStyles />
|
|
6
|
+
<svelte:head>
|
|
7
|
+
<style>
|
|
8
|
+
/*
|
|
9
|
+
Inspiration for this stylesheet comes from Normalize.css, Josh Comeau,
|
|
10
|
+
Barebones, Basic.css, Pico, Typeplate, Simple.css, and more
|
|
11
|
+
*/
|
|
9
12
|
|
|
10
13
|
:root {
|
|
11
|
-
--font-sans: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue,
|
|
12
|
-
helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
|
|
13
|
-
--font-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif,
|
|
14
|
-
Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
|
15
|
-
--font-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
|
|
16
14
|
--text-color: hsl(0, 0%, 13%);
|
|
17
15
|
--accent-color: hsl(215, 100%, 35%);
|
|
18
16
|
--accent-color-hover: hsl(215, 76%, 49%);
|
|
@@ -34,111 +32,26 @@
|
|
|
34
32
|
}
|
|
35
33
|
}
|
|
36
34
|
|
|
37
|
-
/*
|
|
38
|
-
Reset
|
|
39
|
-
*/
|
|
40
|
-
|
|
41
|
-
*,
|
|
42
|
-
*::before,
|
|
43
|
-
*::after {
|
|
44
|
-
box-sizing: border-box;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
* {
|
|
48
|
-
margin: 0;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
main,
|
|
52
|
-
img,
|
|
53
|
-
details,
|
|
54
|
-
picture,
|
|
55
|
-
video,
|
|
56
|
-
canvas,
|
|
57
|
-
svg {
|
|
58
|
-
display: block;
|
|
59
|
-
max-width: 100%;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
summary {
|
|
63
|
-
display: list-item;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
hr {
|
|
67
|
-
box-sizing: content-box;
|
|
68
|
-
height: 0;
|
|
69
|
-
overflow: visible;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
pre {
|
|
73
|
-
font-family: monospace, monospace;
|
|
74
|
-
font-size: 1em;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
a {
|
|
78
|
-
background-color: transparent;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
abbr[title] {
|
|
82
|
-
border-bottom: none;
|
|
83
|
-
text-decoration: underline;
|
|
84
|
-
text-decoration: underline dotted;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
b,
|
|
88
|
-
strong {
|
|
89
|
-
font-weight: bolder;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
code,
|
|
93
|
-
kbd,
|
|
94
|
-
samp {
|
|
95
|
-
font-family: monospace, monospace;
|
|
96
|
-
font-size: 1em;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
small {
|
|
100
|
-
font-size: 80%;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
sub,
|
|
104
|
-
sup {
|
|
105
|
-
font-size: 75%;
|
|
106
|
-
line-height: 0;
|
|
107
|
-
position: relative;
|
|
108
|
-
vertical-align: baseline;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
sub {
|
|
112
|
-
bottom: -0.25em;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
sup {
|
|
116
|
-
top: -0.5em;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
img {
|
|
120
|
-
border-style: none;
|
|
121
|
-
height: auto;
|
|
122
|
-
border-radius: 5px;
|
|
123
|
-
overflow: hidden;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
35
|
/* Layout */
|
|
127
36
|
|
|
128
37
|
.page {
|
|
129
38
|
font-family: var(--font-sans);
|
|
130
39
|
max-width: 60ch;
|
|
131
40
|
margin: auto;
|
|
132
|
-
min-height: 100vh;
|
|
133
41
|
display: flex;
|
|
134
42
|
flex-direction: column;
|
|
135
43
|
padding: 1rem;
|
|
136
|
-
overflow-x: hidden;
|
|
137
44
|
}
|
|
138
45
|
|
|
139
46
|
main {
|
|
140
47
|
margin-bottom: auto;
|
|
141
48
|
padding-bottom: 4rem;
|
|
49
|
+
display: flex;
|
|
50
|
+
flex-direction: column;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.page > main > :first-child {
|
|
54
|
+
margin-top: 2.5rem;
|
|
142
55
|
}
|
|
143
56
|
|
|
144
57
|
/* Colors */
|
|
@@ -156,197 +69,87 @@
|
|
|
156
69
|
color: var(--accent-color-hover);
|
|
157
70
|
}
|
|
158
71
|
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
h1,
|
|
163
|
-
h2,
|
|
164
|
-
h3,
|
|
165
|
-
h4,
|
|
166
|
-
h5,
|
|
167
|
-
h6 {
|
|
168
|
-
overflow-wrap: break-word;
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
h1,
|
|
172
|
-
h2,
|
|
173
|
-
h3,
|
|
174
|
-
h4,
|
|
175
|
-
h5,
|
|
176
|
-
h6 {
|
|
177
|
-
margin-top: 0.5rem;
|
|
178
|
-
margin-bottom: 1rem;
|
|
179
|
-
text-rendering: optimizeLegibility;
|
|
180
|
-
font-weight: 600;
|
|
181
|
-
line-height: 1.1;
|
|
182
|
-
}
|
|
183
|
-
h1 {
|
|
184
|
-
font-size: 3rem;
|
|
185
|
-
line-height: 1.2;
|
|
186
|
-
font-weight: 800;
|
|
72
|
+
code,
|
|
73
|
+
pre {
|
|
74
|
+
background: var(--code-background);
|
|
187
75
|
}
|
|
188
76
|
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
margin-top: 3rem;
|
|
77
|
+
blockquote {
|
|
78
|
+
border-left: 5px solid var(--border-color);
|
|
192
79
|
}
|
|
193
80
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
81
|
+
article {
|
|
82
|
+
border: 1px solid var(--border-color);
|
|
83
|
+
background: var(--soft-background);
|
|
84
|
+
padding: 1.8rem 2rem 1.5rem;
|
|
85
|
+
border-radius: 0.5rem;
|
|
86
|
+
display: flex;
|
|
87
|
+
flex-direction: column;
|
|
197
88
|
}
|
|
198
89
|
|
|
199
|
-
|
|
200
|
-
|
|
90
|
+
th,
|
|
91
|
+
td {
|
|
92
|
+
border-bottom: 1px solid var(--border-color-softer);
|
|
201
93
|
}
|
|
202
94
|
|
|
203
|
-
|
|
204
|
-
|
|
95
|
+
hr {
|
|
96
|
+
border-top: 1px solid var(--text-color);
|
|
205
97
|
}
|
|
206
98
|
|
|
207
|
-
|
|
208
|
-
font-size: 0.96rem;
|
|
209
|
-
}
|
|
99
|
+
/* Frontmatter */
|
|
210
100
|
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
font-size: 2rem;
|
|
101
|
+
main > img {
|
|
102
|
+
margin-bottom: 2.5rem;
|
|
214
103
|
}
|
|
215
104
|
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
font-size: 2.5rem;
|
|
219
|
-
}
|
|
220
|
-
|
|
221
|
-
h2 {
|
|
222
|
-
font-size: 2.1rem;
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
h3 {
|
|
226
|
-
font-size: 1.75rem;
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
h4 {
|
|
230
|
-
font-size: 1.25rem;
|
|
231
|
-
}
|
|
105
|
+
dt {
|
|
106
|
+
font-size: 1.1em;
|
|
232
107
|
}
|
|
233
108
|
|
|
234
|
-
|
|
235
|
-
|
|
109
|
+
dl.link dt {
|
|
110
|
+
display: none;
|
|
236
111
|
}
|
|
237
112
|
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
margin-
|
|
113
|
+
dl.link {
|
|
114
|
+
order: calc(Infinity);
|
|
115
|
+
margin-top: 2.5rem;
|
|
116
|
+
margin-bottom: 0;
|
|
242
117
|
}
|
|
243
118
|
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
ol ul {
|
|
248
|
-
font-size: 100%;
|
|
249
|
-
/* margin: 1rem 0 1rem 3rem; */
|
|
119
|
+
dl.tags,
|
|
120
|
+
time {
|
|
121
|
+
font-size: 1.1em;
|
|
250
122
|
}
|
|
251
123
|
|
|
252
|
-
|
|
253
|
-
|
|
124
|
+
dl.tags dt {
|
|
125
|
+
display: none;
|
|
254
126
|
}
|
|
255
127
|
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
padding: 0;
|
|
128
|
+
dl.tags :is(dd, ul, li) {
|
|
129
|
+
padding-inline: 0;
|
|
130
|
+
display: inline;
|
|
260
131
|
}
|
|
261
132
|
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
font-size: 0.9em;
|
|
265
|
-
white-space: nowrap;
|
|
266
|
-
margin-inline: 0px;
|
|
267
|
-
padding: 3px 4px;
|
|
268
|
-
border-radius: 5px;
|
|
133
|
+
dl.tags li {
|
|
134
|
+
margin-inline: 0.2em;
|
|
269
135
|
}
|
|
270
136
|
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
-webkit-box-decoration-break: clone;
|
|
274
|
-
box-decoration-break: clone;
|
|
137
|
+
dl.tags li:before {
|
|
138
|
+
content: '#';
|
|
275
139
|
}
|
|
276
140
|
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
padding:
|
|
280
|
-
border-radius: 5px;
|
|
281
|
-
overflow-x: auto;
|
|
141
|
+
dl.contents ul {
|
|
142
|
+
list-style: none;
|
|
143
|
+
padding: 0;
|
|
282
144
|
}
|
|
283
145
|
|
|
284
|
-
|
|
285
|
-
float: left;
|
|
286
|
-
margin: 0 20px 0 0;
|
|
287
|
-
width: 120px;
|
|
288
|
-
color: #daf2fd;
|
|
146
|
+
dl.contents .depth-2 {
|
|
289
147
|
font-weight: 500;
|
|
290
|
-
text-align: right;
|
|
291
|
-
}
|
|
292
|
-
|
|
293
|
-
dd {
|
|
294
|
-
margin: 0 0 5px 0;
|
|
295
|
-
text-align: left;
|
|
296
|
-
}
|
|
297
|
-
|
|
298
|
-
blockquote {
|
|
299
|
-
margin: 1.5em 0;
|
|
300
|
-
padding: 0 1.6em 0 1.6em;
|
|
301
|
-
border-left: 5px solid var(--border-color);
|
|
302
|
-
}
|
|
303
|
-
|
|
304
|
-
a {
|
|
305
|
-
text-decoration: none;
|
|
306
|
-
}
|
|
307
|
-
|
|
308
|
-
figcaption {
|
|
309
|
-
margin-top: 0.5rem;
|
|
310
|
-
font-style: italic;
|
|
311
|
-
}
|
|
312
|
-
|
|
313
|
-
article {
|
|
314
|
-
border: 1px solid var(--border-color);
|
|
315
|
-
background: var(--soft-background);
|
|
316
|
-
padding: 1rem 2rem 1.5rem;
|
|
317
|
-
border-radius: 0.5rem;
|
|
318
|
-
}
|
|
319
|
-
|
|
320
|
-
article + article {
|
|
321
|
-
margin-top: 1rem;
|
|
322
|
-
}
|
|
323
|
-
|
|
324
|
-
th,
|
|
325
|
-
td {
|
|
326
|
-
padding: 12px 15px;
|
|
327
|
-
text-align: left;
|
|
328
|
-
border-bottom: 1px solid var(--border-color-softer);
|
|
329
|
-
}
|
|
330
|
-
th:first-child,
|
|
331
|
-
td:first-child {
|
|
332
|
-
padding-left: 0;
|
|
333
|
-
}
|
|
334
|
-
th:last-child,
|
|
335
|
-
td:last-child {
|
|
336
|
-
padding-right: 0;
|
|
337
|
-
}
|
|
338
|
-
|
|
339
|
-
:where(pre, blockquote, dl, figure, table, p, ul, ol, form, article, section, aside):not(
|
|
340
|
-
:last-child
|
|
341
|
-
) {
|
|
342
|
-
margin-bottom: 2.5rem;
|
|
343
148
|
}
|
|
344
149
|
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
border-width: 0px;
|
|
349
|
-
border-top: 1px solid var(--text-color);
|
|
150
|
+
dl.contents .depth-3 {
|
|
151
|
+
font-size: 0.95em;
|
|
152
|
+
padding-left: 0.5em;
|
|
350
153
|
}
|
|
351
154
|
|
|
352
155
|
/* Header */
|
|
@@ -389,29 +192,6 @@
|
|
|
389
192
|
margin-top: 0;
|
|
390
193
|
}
|
|
391
194
|
|
|
392
|
-
nav > a {
|
|
393
|
-
text-wrap: nowrap;
|
|
394
|
-
}
|
|
395
|
-
|
|
396
|
-
header a.site-title {
|
|
397
|
-
color: unset;
|
|
398
|
-
text-decoration: none;
|
|
399
|
-
font-weight: 900;
|
|
400
|
-
font-size: 2.8em;
|
|
401
|
-
}
|
|
402
|
-
|
|
403
|
-
header .slogan {
|
|
404
|
-
/* font-family: var(--font-serif); */
|
|
405
|
-
font-weight: 500;
|
|
406
|
-
}
|
|
407
|
-
|
|
408
|
-
nav :where([aria-current='page'], [aria-current='true']),
|
|
409
|
-
nav :where([aria-current='page'], [aria-current='true']):hover {
|
|
410
|
-
text-decoration: none;
|
|
411
|
-
color: unset;
|
|
412
|
-
cursor: default;
|
|
413
|
-
}
|
|
414
|
-
|
|
415
195
|
header .breadcrumbs > a:only-child {
|
|
416
196
|
display: none;
|
|
417
197
|
}
|
|
@@ -420,17 +200,6 @@
|
|
|
420
200
|
margin-block: 4rem 1rem;
|
|
421
201
|
}
|
|
422
202
|
|
|
423
|
-
header .breadcrumbs a {
|
|
424
|
-
font-size: 0.9em;
|
|
425
|
-
text-decoration: none;
|
|
426
|
-
color: unset;
|
|
427
|
-
}
|
|
428
|
-
|
|
429
|
-
header .breadcrumbs .separator:after {
|
|
430
|
-
margin-inline: 0.5rem;
|
|
431
|
-
content: '|';
|
|
432
|
-
}
|
|
433
|
-
|
|
434
203
|
/* Sidebar */
|
|
435
204
|
|
|
436
205
|
.sidebar {
|
|
@@ -450,7 +219,7 @@
|
|
|
450
219
|
display: none;
|
|
451
220
|
}
|
|
452
221
|
|
|
453
|
-
.page.home .content p:first-child {
|
|
222
|
+
.page.home > .content > p:first-child {
|
|
454
223
|
font-size: 1.2em;
|
|
455
224
|
}
|
|
456
225
|
|
|
@@ -527,8 +296,6 @@
|
|
|
527
296
|
background: rgba(var(--rgb), 0.04);
|
|
528
297
|
|
|
529
298
|
h2 {
|
|
530
|
-
margin: 0 0 0.5em 0;
|
|
531
|
-
font-size: 1.1em;
|
|
532
299
|
color: rgb(var(--rgb));
|
|
533
300
|
}
|
|
534
301
|
|
|
@@ -542,10 +309,5 @@
|
|
|
542
309
|
content: var(--icon);
|
|
543
310
|
}
|
|
544
311
|
}
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
li.unchecked {
|
|
548
|
-
padding-left: 0.8rem;
|
|
549
|
-
}
|
|
550
|
-
}
|
|
551
|
-
</style>
|
|
312
|
+
</style>
|
|
313
|
+
</svelte:head>
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
let { props } = $props();
|
|
12
12
|
// TODO: Normalize frontmatter props
|
|
13
13
|
let { properties, website, format } = $derived(props);
|
|
14
|
+
const keys = $derived(Object.keys(properties || {}));
|
|
14
15
|
|
|
15
16
|
const excludedProperties = [
|
|
16
17
|
'title',
|
|
@@ -41,7 +42,7 @@
|
|
|
41
42
|
</script>
|
|
42
43
|
|
|
43
44
|
{#if properties}
|
|
44
|
-
{#each
|
|
45
|
+
{#each keys as key}
|
|
45
46
|
{#if !excludedProperties.includes(key)}
|
|
46
47
|
{@const property = getProperty(properties, key)}
|
|
47
48
|
{#if website.hasOwnProperty(key)}
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
{:else if node.type === 'url'}
|
|
88
88
|
<LinkPreview url={node.value} metadata={node.metadata} {format} />
|
|
89
89
|
{:else if node.type === 'listItem'}
|
|
90
|
-
{@const isChecklistItem = node.
|
|
90
|
+
{@const isChecklistItem = node.checked !== null}
|
|
91
91
|
{#if isChecklistItem}
|
|
92
92
|
<li
|
|
93
93
|
class={`checklist-item ${node.checked ? 'checked' : 'unchecked'}`}
|
|
@@ -130,10 +130,10 @@
|
|
|
130
130
|
</aside>
|
|
131
131
|
{:else if node.children}
|
|
132
132
|
<svelte:element this={getElement(node)}>
|
|
133
|
-
<svelte:self props={{ ast: node.children, level, format }} />
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
133
|
+
<svelte:self props={{ ast: node.children, level, format }} />{#if identifier}<a
|
|
134
|
+
href={`#footnote-${identifier}`}
|
|
135
|
+
aria-label="Back to content">↩</a
|
|
136
|
+
>{/if}
|
|
137
137
|
</svelte:element>
|
|
138
138
|
{:else if node.type === 'text'}
|
|
139
139
|
<Text {node} />
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
<nav class="top-bar">
|
|
22
22
|
{#if !child}
|
|
23
23
|
<a aria-current={isActiveLink(segments)} href={evergreen?.url || evergreen['$']?.url}
|
|
24
|
-
>{getFolderLabel(evergreen)}</a
|
|
24
|
+
>{getFolderLabel(evergreen, true)}</a
|
|
25
25
|
>
|
|
26
26
|
{/if}
|
|
27
27
|
{#each Object.keys(evergreen) as key}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import { Markdown, Frontmatter } from '$lib/components';
|
|
3
|
+
import { toString } from 'mdast-util-to-string';
|
|
4
|
+
import { kebabCase } from 'change-case';
|
|
3
5
|
import Image from './Markdown/Image.svelte';
|
|
4
6
|
|
|
5
7
|
let { page, content = true, link, level = 0, website = {}, format = 'html' } = $props();
|
|
@@ -7,6 +9,8 @@
|
|
|
7
9
|
|
|
8
10
|
const dateObject = date?.type === 'date' && new Date(date.output);
|
|
9
11
|
// TODO: Add conditional logic for format = 'xml'
|
|
12
|
+
|
|
13
|
+
const headings = ast.filter((child) => child.type === 'heading');
|
|
10
14
|
</script>
|
|
11
15
|
|
|
12
16
|
<!-- Image -->
|
|
@@ -52,6 +56,22 @@
|
|
|
52
56
|
<p class="description">{page?.description || page?.imputedProperties.description}</p>
|
|
53
57
|
{/if}
|
|
54
58
|
|
|
59
|
+
{#if format === 'html' && page.toc && headings.length > 1}
|
|
60
|
+
<dl class="contents">
|
|
61
|
+
<dt>Contents</dt>
|
|
62
|
+
<dd>
|
|
63
|
+
<ul>
|
|
64
|
+
{#each headings as heading, index}
|
|
65
|
+
{@const headingString = toString(heading.children)}
|
|
66
|
+
<li class={`heading depth-${heading.depth}`}>
|
|
67
|
+
<a href={`#${kebabCase(headingString)}`}>{headingString}</a>
|
|
68
|
+
</li>
|
|
69
|
+
{/each}
|
|
70
|
+
</ul>
|
|
71
|
+
</dd>
|
|
72
|
+
</dl>
|
|
73
|
+
{/if}
|
|
74
|
+
|
|
55
75
|
{#if level < 2 && content}
|
|
56
76
|
<div class="content">
|
|
57
77
|
<Markdown props={{ ast, level, website, format }} />
|