Reusable snippets

One of the core principles of software development is DRY (Don't Repeat Yourself). This is a principle that applies to documentation as well. If you find yourself repeating the same content in multiple places, you should consider creating a custom snippet to keep your content in sync.

Creating a custom snippet

Pre-condition: You must create your snippet file in the snippets directory.

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.

   snippets/my-snippet.mdx theme={null}
   Hello world! This is my content I want to reuse across pages. My keyword of the day is {word}.

2. Import the snippet into your destination file.

destination-file.mdx theme={null}
   ---
   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:

   snippets/path/to/custom-variables.mdx theme={null}
   export const myName = 'my name';
   
   export const myObject = { fruit: 'strawberries' };

2. Import the snippet from your destination file and use the variable:

destination-file.mdx theme={null}
   ---
   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.

   snippets/custom-component.mdx theme={null}
   export const MyComponent = ({ title }) => (
     <div>
       <h1>{title}</h1>
       <p>... snippet content ...</p>
     </div>
   );

2. Import the snippet into your destination file and pass in the props

destination-file.mdx theme={null}
   ---
   title: My title
   description: My Description
   ---

import { MyComponent } from '/snippets/custom-component.mdx';

Lorem ipsum dolor sit amet.

<MyComponent title={'Custom title'} />