Skip to content

Commit

Permalink
remove example component docs
Browse files Browse the repository at this point in the history
  • Loading branch information
souporserious committed May 14, 2024
1 parent 9337bd9 commit 39245eb
Showing 1 changed file with 2 additions and 34 deletions.
36 changes: 2 additions & 34 deletions site/docs/04.examples/02.rendering.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,43 +3,11 @@ export const metadata = {
label: 'Rendering',
}

Examples can be rendered in MDX using the `Example` component. This component takes a `source` prop, which is the name of the example file or code block in any of the [locations examples can exist](./01.authoring.mdx).

As an illustration of how this works, let's say we have the following file structure:

```
├── examples
│ ├── Basic.tsx
│ └── Advanced.tsx
└── README.mdx
└── Button.tsx
```

We can now render the `Basic.tsx` example in the `README.mdx` like so:

```mdx
# Button Examples

<Example source="Basic.tsx" />
```

## Code Block Examples

When declaring a code block in MDX, you can target the `filename` prop to render the code block as an example:

````mdx
```tsx filename="Basic.tsx"
export const Basic = () => <div>Basic</div>
```

<Example source="Basic.tsx" />
````
Examples can be rendered using the router of your preferred Server Component framework. This guide will show you how to render examples using Next.js, but the same principles can be applied to other frameworks.

## Templating

The `Example` component is ideal for blogs and one-off situations. However, it is less effective for handling a multitude of examples as found in libraries and applications.

For this, you can lean on your specific framework to handle templating and querying the metadata collected from `createSource`. Using Next.js as an example framework, we can create a custom page that will render the example based on the name of the example file:
Each framework should have a concept of templating and routing. To render examples, query the metadata collected from `createSource`. Using Next.js as an example framework, we can create a custom page that will render the example based on the name of the example file:

{/* TODO: Use real example from site here <CodeBlock source="../../app/(examples)/components/[component]/examples/[example]/page.tsx" baseDirectory="../../app/(examples)" /> */}

Expand Down

0 comments on commit 39245eb

Please sign in to comment.