mirror of
https://github.com/anomalyco/opencode.git
synced 2026-02-01 22:48:16 +00:00
113 lines
2.5 KiB
Plaintext
113 lines
2.5 KiB
Plaintext
---
|
|
title: "Reusable snippets"
|
|
description: "Reusable, custom snippets to keep content in sync"
|
|
icon: "recycle"
|
|
---
|
|
|
|
import SnippetIntro from "/snippets/snippet-intro.mdx"
|
|
|
|
<SnippetIntro />
|
|
|
|
## Creating a custom snippet
|
|
|
|
**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
|
|
component.
|
|
</Note>
|
|
|
|
### Default export
|
|
|
|
1. Add content to your snippet file that you want to re-use across multiple
|
|
locations. Optionally, you can add variables that can be filled in via props
|
|
when you import the snippet.
|
|
|
|
```mdx snippets/my-snippet.mdx
|
|
Hello world! This is my content I want to reuse across pages. My keyword of the
|
|
day is {word}.
|
|
```
|
|
|
|
<Warning>
|
|
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.
|
|
|
|
```mdx destination-file.mdx
|
|
---
|
|
title: My title
|
|
description: My Description
|
|
---
|
|
|
|
import MySnippet from "/snippets/path/to/my-snippet.mdx"
|
|
|
|
## Header
|
|
|
|
Lorem impsum dolor sit amet.
|
|
|
|
<MySnippet word="bananas" />
|
|
```
|
|
|
|
### Reusable variables
|
|
|
|
1. Export a variable from your snippet file:
|
|
|
|
```mdx snippets/path/to/custom-variables.mdx
|
|
export const myName = "my name"
|
|
|
|
export const myObject = { fruit: "strawberries" }
|
|
|
|
;
|
|
```
|
|
|
|
2. Import the snippet from your destination file and use the variable:
|
|
|
|
```mdx destination-file.mdx
|
|
---
|
|
title: My title
|
|
description: My Description
|
|
---
|
|
|
|
import { myName, myObject } from "/snippets/path/to/custom-variables.mdx"
|
|
|
|
Hello, my name is {myName} and I like {myObject.fruit}.
|
|
```
|
|
|
|
### Reusable components
|
|
|
|
1. Inside your snippet file, create a component that takes in props by exporting
|
|
your component in the form of an arrow function.
|
|
|
|
```mdx snippets/custom-component.mdx
|
|
export const MyComponent = ({ title }) => (
|
|
<div>
|
|
<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.
|
|
</Warning>
|
|
|
|
2. Import the snippet into your destination file and pass in the props
|
|
|
|
```mdx destination-file.mdx
|
|
---
|
|
title: My title
|
|
description: My Description
|
|
---
|
|
|
|
import { MyComponent } from "/snippets/custom-component.mdx"
|
|
|
|
Lorem ipsum dolor sit amet.
|
|
|
|
<MyComponent title={"Custom title"} />
|
|
```
|