Initial commit

essentials/reusable-snippets.mdx

@@ -0,0 +1,100 @@
+---
+title: "Reusable snippets"
+description: "Write once, reuse everywhere. Use snippets to keep content in sync across pages"
+icon: "recycle"
+---
+
+Any content you find yourself repeating across pages is a good candidate for a snippet. Create the file once in the `snippets/` directory, import it wherever you need it, and updates propagate everywhere automatically.
+
+<Note>
+  Files inside `snippets/` are not rendered as standalone pages. They only appear where you import them.
+</Note>
+
+## Content snippets
+
+The simplest pattern: write MDX content in a snippet file and import it as a component.
+
+```mdx snippets/prerequisites.mdx
+Before you begin, make sure you have:
+- Node.js 18 or higher
+- An API key from your [dashboard](https://dashboard.example.com)
+```
+
+Import it into any page using a root-relative path:
+
+```mdx your-page.mdx
+---
+title: Install the SDK
+---
+
+import Prerequisites from '/snippets/prerequisites.mdx';
+
+<Prerequisites />
+
+## Installation
+...
+```
+
+You can also use relative imports, which enables CMD+click navigation to the snippet in your editor:
+
+```mdx
+import Prerequisites from '../snippets/prerequisites.mdx';
+```
+
+## Variable snippets
+
+Export named constants from a snippet file to reuse values like product names, version numbers, or URLs.
+
+```mdx snippets/vars.mdx
+export const sdkVersion = '3.2.0';
+export const baseUrl = 'https://api.example.com/v1';
+```
+
+Import and use them inline:
+
+```mdx your-page.mdx
+import { sdkVersion, baseUrl } from '/snippets/vars.mdx';
+
+The current SDK version is **{sdkVersion}**.
+
+All requests go to `{baseUrl}`.
+```
+
+## Component snippets
+
+For snippets that need to vary based on where they're used, export an arrow function component that accepts props.
+
+```mdx snippets/endpoint-note.mdx
+export const EndpointNote = ({ method, path }) => (
+  <Note>
+    This guide covers the <code>{method} {path}</code> endpoint.
+    See the <a href="/api-reference/introduction">API reference</a> for full details.
+  </Note>
+);
+```
+
+* Use arrow function syntax (`const Foo = () => ...`).
+* The `function` keyword is not supported in snippet files.
+* MDX syntax doesn't compile inside arrow function bodies. Use plain HTML tags there, or use a default export instead.
+
+Pass props when you render it:
+
+```mdx your-page.mdx
+import { EndpointNote } from '/snippets/endpoint-note.mdx';
+
+<EndpointNote method="POST" path="/v1/users" />
+```
+
+## Snippets importing snippets
+
+Snippets can import other snippets, which is useful for composing larger shared sections from smaller pieces.
+
+```mdx snippets/auth-intro.mdx
+import AuthNote from '/snippets/auth-note.mdx';
+
+## Authentication
+
+All endpoints require a bearer token.
+
+<AuthNote />
+```