danielroe.dev
[READ-ONLY] Mirror of https://github.com/danielroe/ripple-framework. Ripple is the presentation layer for building websites on the DPC Single Digital Presence platform.
feat(docs): tidied up markdown styling and updated kitchen sink
author
Jeffrey Dowdle
date
(Mar 1, 2023, 4:41 PM +1100)
commit
fa685e24
fa685e24ddd0789aeb2782ea840e4df4e945810a
parent
3b02f587
3b02f587f3f2c4a28bacc13c5008d8cc5c9743f8
+328
-127
+1
-1
docs/components/content/DocsPageHeader.vue
+1
-1
docs/components/content/DocsPageHeader.vue
-1
docs/components/content/Prose/ProseA.vue
-1
docs/components/content/Prose/ProseA.vue
+20
-1
docs/components/content/Prose/ProseCode.vue
+20
-1
docs/components/content/Prose/ProseCode.vue
···
23
23
</script>
24
24
25
25
<template>
26
-
<div class="p-8 my-8 bg-slate-800 dark:bg-slate-50 rounded text-base">
26
+
<div class="docs-code-block">
27
27
<slot />
28
28
</div>
29
29
</template>
30
+
31
+
<style scoped>
32
+
@import '@dpc-sdp/ripple-ui-core/style/breakpoints';
33
+
34
+
.docs-code-block {
35
+
padding: var(--rpl-sp-5);
36
+
background: var(--rpl-clr-neutral-100);
37
+
border: var(--rpl-border-1) solid var(--rpl-clr-neutral-300);
38
+
white-space: pre;
39
+
overflow-x: auto;
40
+
display: block;
41
+
42
+
margin: var(--rpl-sp-3) 0;
43
+
44
+
@media (--rpl-bp-l) {
45
+
margin: var(--rpl-sp-4) 0;
46
+
}
47
+
}
48
+
</style>
30
49
31
50
<style>
32
51
pre code .line {
+10
docs/components/content/Prose/ProseCodeInline.vue
+10
docs/components/content/Prose/ProseCodeInline.vue
-9
docs/components/content/Prose/ProseH1.vue
-9
docs/components/content/Prose/ProseH1.vue
-22
docs/components/content/Prose/ProseH2.vue
-22
docs/components/content/Prose/ProseH2.vue
···
1
-
<template>
2
-
<h2 :id="id" class="rpl-type-h2 mb-4">
3
-
<a :href="`#${id}`">
4
-
<Icon class="w-5 h-5 text-slate-400 absolute -left-6" aria-hidden="true" name="akar-icons:link-chain" />
5
-
<slot />
6
-
</a>
7
-
</h2>
8
-
</template>
9
-
10
-
<script setup lang="ts">
11
-
defineProps<{ id: string }>()
12
-
</script>
13
-
14
-
<style scoped>
15
-
a>svg {
16
-
display: none;
17
-
}
18
-
19
-
a:hover svg {
20
-
display: inline;
21
-
}
22
-
</style>
-11
docs/components/content/Prose/ProseH3.vue
-11
docs/components/content/Prose/ProseH3.vue
+12
docs/components/content/Prose/ProseHr.vue
+12
docs/components/content/Prose/ProseHr.vue
-5
docs/components/content/Prose/ProseOl.vue
-5
docs/components/content/Prose/ProseOl.vue
-5
docs/components/content/Prose/ProseP.vue
-5
docs/components/content/Prose/ProseP.vue
+12
-4
docs/components/content/Prose/ProseTable.vue
+12
-4
docs/components/content/Prose/ProseTable.vue
···
1
1
<template>
2
-
<div class="rpl-table my-4">
3
-
<table class="w-full">
4
-
<slot />
5
-
</table>
2
+
<div class="rpl-table">
3
+
<div class="rpl-table__scroll-container">
4
+
<table class="docs-table">
5
+
<slot />
6
+
</table>
7
+
</div>
6
8
</div>
7
9
</template>
10
+
11
+
<style scoped>
12
+
.docs-table {
13
+
min-width: 100%;
14
+
}
15
+
</style>
-5
docs/components/content/Prose/ProseUl.vue
-5
docs/components/content/Prose/ProseUl.vue
+271
-62
docs/content/design-system/Kitchen sink.md
+271
-62
docs/content/design-system/Kitchen sink.md
···
2
2
title: Kitchen sink
3
3
description: Here's everything
4
4
layout: default
5
+
links:
6
+
- text: Vic gov
7
+
url: https://www.vic.gov.au/
8
+
- text: Single Digital Presence
9
+
url: https://www.vic.gov.au/single-digital-presence
10
+
---
11
+
12
+
> For a more detailed markdown editing guide, see here https://www.markdownguide.org/basic-syntax/
13
+
14
+
## Front matter
15
+
16
+
Front matter sits at the very top of a markdown file and contains metadata about a page. In our case, it contains things like the page title and description.
17
+
18
+
Here is the frontmatter for the page you are currently reading.
19
+
20
+
```md
21
+
---
22
+
title: Kitchen sink
23
+
description: Here's everything
24
+
layout: default
25
+
links:
26
+
- text: Vic gov
27
+
url: https://www.vic.gov.au/
28
+
- text: Single Digital Presence
29
+
url: https://www.vic.gov.au/single-digital-presence
30
+
---
31
+
```
32
+
5
33
---
6
34
7
35
## Headings
8
36
37
+
Headings are added using hash marks before text. The number of hash marks specifies the heading level (e.g. '##' = H2). Please don't use H1s in markdown, these are reserved for the page title, which is set in the front matter.
38
+
39
+
### Example
40
+
41
+
```md
9
42
## Heading level 2
43
+
10
44
### Heading level 3
45
+
11
46
#### Heading level 4
47
+
12
48
##### Heading level 5
49
+
13
50
###### Heading level 6
51
+
```
14
52
53
+
## Heading level 2
15
54
16
-
## Horizontal Rules
55
+
### Heading level 3
17
56
18
-
### `___`
19
-
___
57
+
#### Heading level 4
58
+
59
+
##### Heading level 5
60
+
61
+
###### Heading level 6
20
62
21
-
### `---`
22
63
---
23
64
24
-
### `***`
25
-
***
65
+
## Paragraph text
66
+
67
+
Paragraphs are simply text seperated by an empty line.
68
+
69
+
```md
70
+
This is a paragraph
71
+
72
+
This is another paragraph
73
+
```
74
+
75
+
This is a paragraph
76
+
77
+
This is another paragraph
78
+
79
+
---
26
80
27
81
## Emphasis
28
82
29
-
**This is bold text**
83
+
### Italics
84
+
85
+
```md
86
+
Here is *italic text*
87
+
88
+
Here is also _italic text_
89
+
```
90
+
91
+
Here is *italic text*
92
+
93
+
Here is also _italic text_
94
+
95
+
### Bold
96
+
97
+
```md
98
+
Here is **bold text**
99
+
100
+
Here is also __bold text__
101
+
```
102
+
103
+
Here is **bold text**
104
+
105
+
Here is also __bold text__
106
+
107
+
### Strikethrough
30
108
31
-
__This is bold text__
109
+
```md
110
+
Here is ~~strikethrough text~~
111
+
```
32
112
33
-
*This is italic text*
113
+
Here is ~~strikethrough text~~
34
114
35
-
_This is italic text_
115
+
---
36
116
37
-
~~Strikethrough~~
117
+
## Horizontal Rules
38
118
119
+
You can add a horizontal rule by using at least three of either `_`, `-` or `*`.
120
+
121
+
```md
122
+
These are all equivalent:
123
+
---
124
+
___
125
+
***
126
+
127
+
So are these:
128
+
------
129
+
______
130
+
******
131
+
132
+
But these won't work:
133
+
--
134
+
__
135
+
**
136
+
```
137
+
138
+
---
39
139
40
140
## Blockquotes
41
141
142
+
Blockquotes are added with a `>` before the text.
42
143
144
+
```md
43
145
> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
146
+
```
44
147
148
+
> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
149
+
150
+
---
45
151
46
152
## Lists
47
153
48
-
Unordered
154
+
### Unordered
155
+
156
+
Unordered lists are created by starting a line with `+`, `-`, or `*`. Nested lists can be achieved through indentation, with **2 spaces** for each additional level.
157
+
158
+
```md
159
+
* Fruit
160
+
* Berries
161
+
- Strawberry
162
+
- Blueberry
163
+
* Classics
164
+
- Apple
165
+
- Banana
166
+
* Vegetables
167
+
+ Broccoli
168
+
```
169
+
170
+
* Fruit
171
+
* Berries
172
+
- Strawberry
173
+
- Blueberry
174
+
* Classics
175
+
- Apple
176
+
- Banana
177
+
* Vegetables
178
+
+ Broccoli
179
+
180
+
### Ordered
181
+
182
+
Ordered lists are created by starting a line with a number and period (e.g. `1.`). Nested lists can be achieved through indentation, with **4 spaces** (different to the unordered list) for each additional level.
183
+
184
+
You can use any numbers, but it's more convenient to just use `1.` for each item, the numbering will work automatically.
185
+
186
+
```md
187
+
This works:
188
+
189
+
1. Lorem ipsum dolor sit amet
190
+
1. Lorem at massa
191
+
2. Adipiscing
192
+
2. Consectetur adipiscing elit
193
+
3. Integer molestie lorem at massa
49
194
50
-
+ Create a list by starting a line with `+`, `-`, or `*`
51
-
+ Sub-lists are made by indenting 2 spaces:
52
-
- Marker character change forces new list start:
53
-
* Ac tristique libero volutpat at
54
-
+ Facilisis in pretium nisl aliquet
55
-
- Nulla volutpat aliquam velit
56
-
+ Very easy!
195
+
But just do this, it's the same thing:
57
196
58
-
Ordered
197
+
1. Lorem ipsum dolor sit amet
198
+
1. Lorem at massa
199
+
1. Adipiscing
200
+
1. Consectetur adipiscing elit
201
+
1. Integer molestie lorem at massa
202
+
```
59
203
60
204
1. Lorem ipsum dolor sit amet
205
+
1. Lorem at massa
206
+
2. Adipiscing
61
207
2. Consectetur adipiscing elit
62
208
3. Integer molestie lorem at massa
63
209
210
+
#### Starting point
64
211
65
-
1. You can use sequential numbers...
66
-
1. ...or keep all the numbers as `1.`
212
+
You can start the list at any number like this:
67
213
68
-
Start numbering with offset:
214
+
```md
215
+
64. foo
216
+
1. bar
217
+
1. blah
218
+
```
69
219
70
-
57. foo
220
+
64. foo
71
221
1. bar
222
+
1. blah
72
223
224
+
---
225
+
226
+
## Links
227
+
228
+
Hyperlinks can be added with the following syntax, the link text goes in the square brackets, followed by the url in round brackets.
229
+
230
+
```md
231
+
Visit the [Victorian government website](https://www.vic.gov.au/)
232
+
```
233
+
234
+
Visit the [Victorian government website](https://www.vic.gov.au/)
235
+
236
+
Alternatively, if you don't need different link text you can just write the url directly
237
+
238
+
```md
239
+
Here is the link to vic gov https://www.vic.gov.au/.
240
+
```
241
+
242
+
Here is the link to vic gov https://www.vic.gov.au/.
243
+
244
+
---
73
245
74
246
## Code
75
247
76
-
Inline `code`
248
+
Here's some `code inline` in context.
249
+
250
+
Here's some `const codeInline: string = 'highlighted code inline'`{lang="ts"} in context.
77
251
78
252
Indented code
79
253
···
99
273
console.log(foo(5));
100
274
```
101
275
276
+
---
277
+
102
278
## Tables
103
279
104
-
| Option | Description |
105
-
| ------ | ----------- |
106
-
| data | path to data files to supply the data that will be passed into templates. |
107
-
| engine <br> asd | engine to be used for processing templates. Handlebars is the default. |
108
-
| ext | extension to be used for dest files. |
109
-
110
-
Right aligned columns
111
-
112
-
| Option | Description |
113
-
| ------:| -----------:|
114
-
| data | path to data files to supply the data that will be passed into templates. |
115
-
| engine | engine to be used for processing templates. Handlebars is the default. |
116
-
| ext | extension to be used for dest files. |
280
+
Tables can be added using a special format. More info here:
117
281
118
-
| Option | Description |
119
-
| ------:| -----------:|
120
-
|  | path to data files to supply the data that will be passed into templates. |
121
-
| engine | engine to be used for processing templates. Handlebars is the default. |
122
-
| ext | extension to be used for dest files. |
282
+
- [Github markdown tables guide](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/organizing-information-with-tables)
123
283
284
+
An example of a simple table
124
285
125
-
## Links
286
+
```md
287
+
| Name | Description |
288
+
| ------ | ---------------------------- |
289
+
| Banana | Yellow, elongated, edible. |
290
+
| Apple | 84% water, 15% carbohydrates |
291
+
```
126
292
127
-
[link text](http://dev.nodeca.com)
293
+
| Name | Description |
294
+
| ------ | ---------------------------- |
295
+
| Banana | Yellow, elongated, edible. |
296
+
| Apple | 84% water, 15% carbohydrates |
128
297
129
-
[link with title](http://nodeca.github.io/pica/demo/ "title text!")
298
+
---
130
299
131
-
Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
300
+
## Images
132
301
302
+
Images can be added like this:
133
303
134
-
## Images
304
+
```md
305
+
306
+
```
135
307
136
-
308
+
137
309
138
310
By Lee Carson on Flickr - Nils Olav on Flickr, CC BY-SA 2.0, https://commons.wikimedia.org/w/index.php?curid=5080064
139
311
140
-
### Footnotes
312
+
---
141
313
142
-
Here's a simple footnote,[^1] and here's a longer one.[^bignote]
143
-
[^1]: This is the first footnote.
144
-
[^bignote]: Here's one with multiple paragraphs and code.
145
-
Indent paragraphs to include them in the footnote.
146
-
`{ my code }`
147
-
Add as many paragraphs as you like.
314
+
## Custom components
315
+
316
+
### DocsExample
148
317
149
-
### Custom containers
318
+
The `DocsExample` will display an component example from storybook, you will need to give it the id of the story you want to display.
150
319
320
+
```md
151
321
::DocsExample
152
322
---
153
323
id: core-navigation-button--default-filled
154
324
---
155
325
::
326
+
```
156
327
157
328
::DocsExample
158
329
---
159
-
id: core-navigation-breadcrumbs--default-story
160
-
hideNewTab: true
330
+
id: core-navigation-button--default-filled
161
331
---
162
332
::
163
333
334
+
There are additional options you can use for this component:
335
+
336
+
```md
164
337
::DocsExample
165
338
---
166
-
id: core-navigation-in-page-navigation--in-page-navigation
339
+
id: core-navigation-button--default-filled
340
+
withPadding: false
341
+
hideNewTab: false
167
342
hideCode: true
168
343
---
169
344
::
345
+
```
170
346
171
347
::DocsExample
172
348
---
173
-
id: core-navigation-footer--default-story
174
-
hideNewTab: true
349
+
id: core-navigation-button--default-filled
350
+
withPadding: true
351
+
hideNewTab: false
175
352
hideCode: true
176
353
---
177
354
::
355
+
356
+
### DocsThemeChooser
357
+
358
+
You can wrap `DocsExample` components with a `DocsThemeChooser` component. This will allow the user to choose which theme the examples inside the theme chooser will display with.
359
+
360
+
```md
361
+
::DocsThemeChooser
362
+
::DocsExample
363
+
---
364
+
id: core-navigation-button--default-filled
365
+
---
366
+
::
367
+
::DocsExample
368
+
---
369
+
id: core-navigation-button--default-outlined
370
+
---
371
+
::
372
+
::
373
+
```
374
+
375
+
::DocsThemeChooser
376
+
::DocsExample
377
+
---
378
+
id: core-navigation-button--default-filled
379
+
---
380
+
::
381
+
::DocsExample
382
+
---
383
+
id: core-navigation-button--default-outlined
384
+
---
385
+
::
386
+
::