be728e9c01
* feat: Add Mintlify docs * Fixed the mint.json for v2 * Fixed versioning issue * Add titles to ICS feed endpoints * Added errors to v1 * Added rate-limit to API v1 * feat: added v1-v2 differences and v1 auth * Trying to eliminate reasons for v1 not showing on publication * Used the swagger openapi validator * remove deprecated v1 endpoints * Moved api docs into new folders without api-reference * Renamed api to api-reference * removed the versioning * Got rid of anchor warnings * Fixed naming * Just as a test - using the same v2 openapi spec for v1 reference * Removed 'externalDocs' from v1 * Removed securitySchemes * Updated the diff between v1/v2 * Added v1 in front of /attendees to test * Moved paths up and removed externalDocs * Testing - Added content to the response * Reduced paths to 1 * Testing: anything at this point * Fixed validation * Moved the other .mdx files to see if that's disrupting something * Trying with a tab * Empty tags array * Added back servers field * Removed all other schemas * Removed v1 for now * Added platform docs * Language fixes * Added v1 back * add API V1 response for attendees * remove unnecessary endpoint docs in API V1 * Removing platform and API for now * Updated v2 openapi doc --------- Co-authored-by: Syed Ali Shahbaz <alishahbaz7@gmail.com>
111 lines
2.5 KiB
Plaintext
111 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'} />
|
|
```
|