|
|
@@ -4,7 +4,7 @@ description: "Reusable, custom snippets to keep content in sync"
|
|
|
icon: "recycle"
|
|
|
---
|
|
|
|
|
|
-import SnippetIntro from '/snippets/snippet-intro.mdx';
|
|
|
+import SnippetIntro from "/snippets/snippet-intro.mdx"
|
|
|
|
|
|
<SnippetIntro />
|
|
|
|
|
|
@@ -13,9 +13,8 @@ import SnippetIntro from '/snippets/snippet-intro.mdx';
|
|
|
**Pre-condition**: You must create your snippet file in the `snippets` directory.
|
|
|
|
|
|
<Note>
|
|
|
- Any page in the `snippets` directory will be treated as a snippet and will not
|
|
|
- be rendered into a standalone page. If you want to create a standalone page
|
|
|
- from the snippet, import the snippet into another file and call it as a
|
|
|
+ Any page in the `snippets` directory will be treated as a snippet and will not be rendered into a standalone page. If
|
|
|
+ you want to create a standalone page from the snippet, import the snippet into another file and call it as a
|
|
|
component.
|
|
|
</Note>
|
|
|
|
|
|
@@ -31,8 +30,7 @@ day is {word}.
|
|
|
```
|
|
|
|
|
|
<Warning>
|
|
|
- The content that you want to reuse must be inside the `snippets` directory in
|
|
|
- order for the import to work.
|
|
|
+ The content that you want to reuse must be inside the `snippets` directory in order for the import to work.
|
|
|
</Warning>
|
|
|
|
|
|
2. Import the snippet into your destination file.
|
|
|
@@ -43,7 +41,7 @@ title: My title
|
|
|
description: My Description
|
|
|
---
|
|
|
|
|
|
-import MySnippet from '/snippets/path/to/my-snippet.mdx';
|
|
|
+import MySnippet from "/snippets/path/to/my-snippet.mdx"
|
|
|
|
|
|
## Header
|
|
|
|
|
|
@@ -57,9 +55,11 @@ Lorem impsum dolor sit amet.
|
|
|
1. Export a variable from your snippet file:
|
|
|
|
|
|
```mdx snippets/path/to/custom-variables.mdx
|
|
|
-export const myName = 'my name';
|
|
|
+export const myName = "my name"
|
|
|
|
|
|
-export const myObject = { fruit: 'strawberries' };
|
|
|
+export const myObject = { fruit: "strawberries" }
|
|
|
+
|
|
|
+;
|
|
|
```
|
|
|
|
|
|
2. Import the snippet from your destination file and use the variable:
|
|
|
@@ -70,7 +70,7 @@ title: My title
|
|
|
description: My Description
|
|
|
---
|
|
|
|
|
|
-import { myName, myObject } from '/snippets/path/to/custom-variables.mdx';
|
|
|
+import { myName, myObject } from "/snippets/path/to/custom-variables.mdx"
|
|
|
|
|
|
Hello, my name is {myName} and I like {myObject.fruit}.
|
|
|
```
|
|
|
@@ -86,12 +86,14 @@ export const MyComponent = ({ title }) => (
|
|
|
<h1>{title}</h1>
|
|
|
<p>... snippet content ...</p>
|
|
|
</div>
|
|
|
-);
|
|
|
+)
|
|
|
+
|
|
|
+;
|
|
|
```
|
|
|
|
|
|
<Warning>
|
|
|
- MDX does not compile inside the body of an arrow function. Stick to HTML
|
|
|
- syntax when you can or use a default export if you need to use MDX.
|
|
|
+ MDX does not compile inside the body of an arrow function. Stick to HTML syntax when you can or use a default export
|
|
|
+ if you need to use MDX.
|
|
|
</Warning>
|
|
|
|
|
|
2. Import the snippet into your destination file and pass in the props
|
|
|
@@ -102,9 +104,9 @@ title: My title
|
|
|
description: My Description
|
|
|
---
|
|
|
|
|
|
-import { MyComponent } from '/snippets/custom-component.mdx';
|
|
|
+import { MyComponent } from "/snippets/custom-component.mdx"
|
|
|
|
|
|
Lorem ipsum dolor sit amet.
|
|
|
|
|
|
-<MyComponent title={'Custom title'} />
|
|
|
+<MyComponent title={"Custom title"} />
|
|
|
```
|