vowel 0.1.18 → 0.1.19

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.
Files changed (14) hide show
  1. package/bin.js +1 -1
  2. package/package.json +2 -1
  3. package/server.js +2 -1
  4. package/src/app.html +0 -19
  5. package/src/lib/components/DefaultStyles.svelte +58 -314
  6. package/src/lib/components/Markdown/index.svelte +4 -4
  7. package/src/lib/components/NoStyles.svelte +5 -0
  8. package/src/lib/components/ResetStyles.svelte +127 -0
  9. package/src/lib/components/TypographyStyles.svelte +265 -0
  10. package/src/lib/components/index.js +4 -1
  11. package/src/lib/utilities/createPageClass.js +3 -3
  12. package/src/routes/[...path]/+layout.server.js +6 -9
  13. package/src/routes/[...path]/+page.server.js +9 -1
  14. package/src/routes/[...path]/+page.svelte +36 -562
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vowel",
3
- "version": "0.1.18",
3
+ "version": "0.1.19",
4
4
  "bin": "./bin.js",
5
5
  "scripts": {
6
6
  "dev": "vite dev",
@@ -18,6 +18,7 @@
18
18
  "@sveltejs/adapter-static": "^3.0.1",
19
19
  "@sveltejs/kit": "^2.5.6",
20
20
  "@sveltejs/vite-plugin-svelte": "^4.0.0-next.3",
21
+ "@vowel/styles": "^0.0.5",
21
22
  "any-date-parser": "^1.5.4",
22
23
  "change-case": "^5.4.1",
23
24
  "filter-console": "^1.0.0",
package/server.js CHANGED
@@ -17,7 +17,8 @@ const arg = !isBuild ? process.argv[2] : false;
17
17
  const $home = isBuild ? process.cwd() : directory;
18
18
 
19
19
  const define = {
20
- $home: [directory]
20
+ $home: [directory],
21
+ $build: [isBuild]
21
22
  };
22
23
 
23
24
  const config = {
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
 
package/src/lib/components/DefaultStyles.svelte CHANGED
@@ -1,18 +1,16 @@
1
- <style>
2
- /*
3
- Inspiration for this stylesheet comes from Normalize.css, Josh Comeau,
4
- Barebones, Basic.css, Pico, Typeplate, Simple.css, and more
5
- */
6
-
7
- .theme-default {
8
- /* Variables */
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,69 @@
156
69
  color: var(--accent-color-hover);
157
70
  }
158
71
 
159
- /* Typography */
160
-
161
- p,
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;
187
- }
188
-
189
- h2 {
190
- font-size: 2.6rem;
191
- margin-top: 3rem;
192
- }
193
-
194
- h3 {
195
- font-size: 2rem;
196
- margin-top: 3rem;
197
- }
198
-
199
- h4 {
200
- font-size: 1.44rem;
201
- }
202
-
203
- h5 {
204
- font-size: 1.15rem;
205
- }
206
-
207
- h6 {
208
- font-size: 0.96rem;
209
- }
210
-
211
- article h1 {
212
- font-weight: 600;
213
- font-size: 2rem;
214
- }
215
-
216
- @media only screen and (max-width: 720px) {
217
- h1 {
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
- }
232
- }
233
-
234
- p {
235
- margin-top: 0;
236
- }
237
-
238
- ol,
239
- ul {
240
- /* padding-left: 0; */
241
- margin-top: 0;
242
- }
243
-
244
- ul ul,
245
- ul ol,
246
- ol ol,
247
- ol ul {
248
- font-size: 100%;
249
- /* margin: 1rem 0 1rem 3rem; */
250
- }
251
-
252
- li {
253
- margin-bottom: 0.5rem;
254
- }
255
-
256
- /* Extra selector for specificity, see below */
257
- li > p:not(:last-child) {
258
- margin: 0;
259
- padding: 0;
260
- }
261
-
262
- code {
263
- background: var(--code-background);
264
- font-size: 0.9em;
265
- white-space: nowrap;
266
- margin-inline: 0px;
267
- padding: 3px 4px;
268
- border-radius: 5px;
269
- }
270
-
271
72
  code,
272
- mark {
273
- -webkit-box-decoration-break: clone;
274
- box-decoration-break: clone;
275
- }
276
-
277
73
  pre {
278
74
  background: var(--code-background);
279
- padding: 1rem 1.5rem;
280
- border-radius: 5px;
281
- overflow-x: auto;
282
75
  }
283
76
 
284
- dt {
285
- float: left;
286
- margin: 0 20px 0 0;
287
- width: 120px;
288
- color: #daf2fd;
289
- font-weight: 500;
290
- text-align: right;
77
+ blockquote {
78
+ border-left: 5px solid var(--border-color);
291
79
  }
292
80
 
293
- dd {
294
- margin: 0 0 5px 0;
295
- text-align: left;
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;
296
88
  }
297
89
 
298
- blockquote {
299
- margin: 1.5em 0;
300
- padding: 0 1.6em 0 1.6em;
301
- border-left: 5px solid var(--border-color);
90
+ th,
91
+ td {
92
+ border-bottom: 1px solid var(--border-color-softer);
302
93
  }
303
94
 
304
- a {
305
- text-decoration: none;
95
+ hr {
96
+ border-top: 1px solid var(--text-color);
306
97
  }
307
98
 
308
- figcaption {
309
- margin-top: 0.5rem;
310
- font-style: italic;
99
+ /* Frontmatter */
100
+
101
+ main > img {
102
+ margin-bottom: 2.5rem;
311
103
  }
312
104
 
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;
105
+ dl.link dt {
106
+ display: none;
318
107
  }
319
108
 
320
- article + article {
321
- margin-top: 1rem;
109
+ dl.link {
110
+ order: calc(Infinity);
111
+ margin-top: 2.5rem;
112
+ margin-bottom: 0;
322
113
  }
323
114
 
324
- th,
325
- td {
326
- padding: 12px 15px;
327
- text-align: left;
328
- border-bottom: 1px solid var(--border-color-softer);
115
+ dl.tags,
116
+ time {
117
+ font-size: 1.1em;
329
118
  }
330
- th:first-child,
331
- td:first-child {
332
- padding-left: 0;
119
+
120
+ dl.tags dt {
121
+ display: none;
333
122
  }
334
- th:last-child,
335
- td:last-child {
336
- padding-right: 0;
123
+
124
+ dl.tags :is(dd, ul, li) {
125
+ padding-inline: 0;
126
+ display: inline;
337
127
  }
338
128
 
339
- :where(pre, blockquote, dl, figure, table, p, ul, ol, form, article, section, aside):not(
340
- :last-child
341
- ) {
342
- margin-bottom: 2.5rem;
129
+ dl.tags li {
130
+ margin-inline: 0.2em;
343
131
  }
344
132
 
345
- hr {
346
- margin-top: 3rem;
347
- margin-bottom: 3.5rem;
348
- border-width: 0px;
349
- border-top: 1px solid var(--text-color);
133
+ dl.tags li:before {
134
+ content: '#';
350
135
  }
351
136
 
352
137
  /* Header */
@@ -389,29 +174,6 @@
389
174
  margin-top: 0;
390
175
  }
391
176
 
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
177
  header .breadcrumbs > a:only-child {
416
178
  display: none;
417
179
  }
@@ -420,17 +182,6 @@
420
182
  margin-block: 4rem 1rem;
421
183
  }
422
184
 
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
185
  /* Sidebar */
435
186
 
436
187
  .sidebar {
@@ -450,7 +201,7 @@
450
201
  display: none;
451
202
  }
452
203
 
453
- .page.home .content p:first-child {
204
+ .page.home > .content > p:first-child {
454
205
  font-size: 1.2em;
455
206
  }
456
207
 
@@ -527,8 +278,6 @@
527
278
  background: rgba(var(--rgb), 0.04);
528
279
 
529
280
  h2 {
530
- margin: 0 0 0.5em 0;
531
- font-size: 1.1em;
532
281
  color: rgb(var(--rgb));
533
282
  }
534
283
 
@@ -542,10 +291,5 @@
542
291
  content: var(--icon);
543
292
  }
544
293
  }
545
-
546
- li.checked,
547
- li.unchecked {
548
- padding-left: 0.8rem;
549
- }
550
- }
551
- </style>
294
+ </style>
295
+ </svelte:head>
package/src/lib/components/Markdown/index.svelte CHANGED
@@ -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
- {#if identifier}
135
- <a href={`#footnote-${identifier}`} aria-label="Back to content">↩</a>
136
- {/if}
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} />
package/src/lib/components/NoStyles.svelte ADDED
@@ -0,0 +1,5 @@
1
+ <svelte:head>
2
+ <style>
3
+ /* Nothing to see here */
4
+ </style>
5
+ </svelte:head>
package/src/lib/components/ResetStyles.svelte ADDED
@@ -0,0 +1,127 @@
1
+ <svelte:head>
2
+ <style>
3
+ html {
4
+ -webkit-text-size-adjust: 100%;
5
+ margin: 0;
6
+ font-size: 62.5%;
7
+ }
8
+
9
+ body {
10
+ font-size: 1.6rem;
11
+ line-height: 1.5;
12
+ -webkit-font-smoothing: antialiased;
13
+ font-weight: 400;
14
+ margin: 0;
15
+ }
16
+
17
+ .container {
18
+ height: 100vh;
19
+ overflow-y: scroll;
20
+ }
21
+
22
+ .page {
23
+ min-height: 100vh;
24
+ overflow-x: hidden;
25
+ }
26
+
27
+ *,
28
+ *::before,
29
+ *::after {
30
+ box-sizing: border-box;
31
+ }
32
+
33
+ * {
34
+ margin: 0;
35
+ }
36
+
37
+ img,
38
+ details,
39
+ picture,
40
+ video,
41
+ canvas,
42
+ svg {
43
+ display: block;
44
+ max-width: 100%;
45
+ }
46
+
47
+ summary {
48
+ display: list-item;
49
+ }
50
+
51
+ hr {
52
+ box-sizing: content-box;
53
+ height: 0;
54
+ overflow: visible;
55
+ }
56
+
57
+ pre {
58
+ font-family: monospace, monospace;
59
+ font-size: 1em;
60
+ }
61
+
62
+ a {
63
+ background-color: transparent;
64
+ }
65
+
66
+ abbr[title] {
67
+ border-bottom: none;
68
+ text-decoration: underline;
69
+ text-decoration: underline dotted;
70
+ }
71
+
72
+ b,
73
+ strong {
74
+ font-weight: bolder;
75
+ }
76
+
77
+ code,
78
+ kbd,
79
+ samp {
80
+ font-family: monospace, monospace;
81
+ font-size: 1em;
82
+ }
83
+
84
+ small {
85
+ font-size: 80%;
86
+ }
87
+
88
+ sub,
89
+ sup {
90
+ font-size: 75%;
91
+ line-height: 0;
92
+ position: relative;
93
+ vertical-align: baseline;
94
+ }
95
+
96
+ sub {
97
+ bottom: -0.25em;
98
+ }
99
+
100
+ sup {
101
+ top: -0.5em;
102
+ }
103
+
104
+ img {
105
+ border-style: none;
106
+ height: auto;
107
+ border-radius: 5px;
108
+ overflow: hidden;
109
+ }
110
+
111
+ p,
112
+ h1,
113
+ h2,
114
+ h3,
115
+ h4,
116
+ h5,
117
+ h6 {
118
+ overflow-wrap: break-word;
119
+ }
120
+
121
+ code,
122
+ mark {
123
+ -webkit-box-decoration-break: clone;
124
+ box-decoration-break: clone;
125
+ }
126
+ </style>
127
+ </svelte:head>