Skip to content

Commit ccbd47d

Browse files
committed
clean up doc
1 parent 05bda5b commit ccbd47d

File tree

6 files changed

+24
-49
lines changed

6 files changed

+24
-49
lines changed

fern/assets/styles.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1082,7 +1082,8 @@ h1, h2, h3 {
10821082
/*** END -- LANDING PAGE STYLING ***/
10831083

10841084
/* HACK: add a slash to markdown snippet documentation (otherwise it gets parsed by CLI) */
1085-
.modify-snippet tbody tr:last-of-type td:last-of-type .line span:last-of-type:before {
1085+
.modify-snippet tbody tr:nth-child(1) td:last-of-type .line span:last-of-type:before,
1086+
.modify-snippet tbody tr:nth-child(5) td:last-of-type .line span:last-of-type:before {
10861087
content: "/";
10871088
display: inline-block;
10881089
}
Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
## Parameterized markdown snippets
22

3-
Reusable markdown snippets support arbitrary parameters that can be used as variables in the snippet. This enables flexible, reusable content templates.
3+
Reusable Markdown snippets support arbitrary parameters that can be used as variables in the snippet. This enables flexible, reusable content templates.
44

55
Create a snippet with parameter placeholders using curly braces:
66

77
```mdx fern/snippets/watering-schedule.mdx
8-
Water your {plant} every {interval} days.
8+
<Warning>Remember to water your {plant} every {interval} days.</Warning>
99
```
1010

1111
Pass parameters when including the snippet:
@@ -16,8 +16,6 @@ Pass parameters when including the snippet:
1616

1717
This renders as:
1818

19-
```
20-
Water your peace lily every 3 days.
21-
```
19+
<Markdown src="/snippets/watering-schedule.mdx" plant="peace lily" interval="3" />
2220

23-
Learn more about [reusable markdown snippets](/learn/docs/writing-content/reusable-snippets#parameterized-snippets).
21+
Learn more about [reusable Markdown snippets](/learn/docs/writing-content/reusable-snippet).

fern/products/docs/pages/component-library/custom-components/reusable-markdown.mdx

Lines changed: 16 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -27,28 +27,38 @@ fern
2727
In each snippet file, define the content you want to reuse.
2828

2929
```mdx title="snippets/peace-lily.mdx"
30-
<Warning> Remember to water your plant at least twice a week. </Warning>
30+
Peace lilies are easy to grow and relatively trouble-free.
3131
```
32+
33+
Optionally, you can use parameters in your snippet:
34+
```mdx title="snippets/watering-schedule.mdx"
35+
<Warning>Remember to water your {plant} every {interval} days.</Warning>
36+
```
37+
3238
</Step>
3339
<Step title="Use a snippet">
3440

35-
To use a snippet in your documentation, reference it by its file path (including the `.mdx` extension). For example, to include the `peace-lily` snippet from the folder structure above:
41+
To use a snippet in your documentation, reference it by its file path (including the `.mdx` extension). If you used one or more parameters in your snippet, pass them in the snippet reference:
3642

3743
<Tabs>
3844
<Tab title="Markdown">
3945
<div className="modify-snippet">
4046
```jsx
41-
Peace lilies are easy to grow and relatively trouble-free.
42-
4347
<Markdown src="/snippets/peace-lily.mdx">
48+
49+
They symbolize peace and prosperity.
50+
51+
<Markdown src="/snippets/watering-schedule.mdx" plant="peace lily" interval="3">
4452
```
4553
</div>
4654

4755
</Tab>
4856
<Tab title="Preview">
49-
Peace lilies are easy to grow and relatively trouble-free.
50-
5157
<Markdown src="/snippets/peace-lily.mdx" />
58+
59+
They symbolize peace and prosperity.
60+
61+
<Markdown src="/snippets/watering-schedule.mdx" plant="peace lily" interval="3" />
5262
</Tab>
5363
</Tabs>
5464

@@ -62,38 +72,5 @@ To use a snippet in your documentation, reference it by its file path (including
6272
| `fern/docs/guides/snippets/peace-lily.mdx` | `src="/docs/guides/snippets/peace-lily.mdx"` |
6373
</Note>
6474
</Step>
65-
<Step title="Parameterized snippets">
66-
67-
Reusable markdown snippets support parameters that you pass as props to the Markdown component. Reference them inside the snippet with `{paramName}`.
68-
69-
Create a snippet with parameter placeholders:
70-
71-
```mdx title="snippets/watering-schedule.mdx"
72-
Water your {plant} every {interval} days.
73-
```
7475

75-
Pass parameters when including the snippet:
76-
77-
<Tabs>
78-
<Tab title="Markdown">
79-
```jsx
80-
<Markdown src="/snippets/watering-schedule.mdx" plant="peace lily" interval="3" />
81-
```
82-
</Tab>
83-
<Tab title="Preview">
84-
<Markdown src="/snippets/watering-schedule.mdx" plant="peace lily" interval="3" />
85-
</Tab>
86-
</Tabs>
87-
88-
You can use multiple parameters in a single snippet:
89-
90-
```mdx title="snippets/plant-care.mdx"
91-
The {plant} thrives in {light} light and prefers {temperature} temperatures.
92-
```
93-
94-
```jsx
95-
<Markdown src="/snippets/plant-care.mdx" plant="fern" light="indirect" temperature="moderate" />
96-
```
97-
98-
</Step>
9976
</Steps>

fern/snippets/peace-lily.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<Warning> Remember to water your plant at least twice a week. </Warning>
1+
Peace lilies are easy to grow and relatively trouble-free.

fern/snippets/plant-care.mdx

Lines changed: 0 additions & 1 deletion
This file was deleted.
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
Water your {plant} every {interval} days.
1+
<Warning>Remember to water your {plant} every {interval} days.</Warning>

0 commit comments

Comments
 (0)