Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update mdx.md #18247

Merged
merged 3 commits into from
May 24, 2022
Merged

Update mdx.md #18247

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
38767d7
Update mdx.md
TheeMattOliver May 18, 2022
3aa19fe
adds optimized png and moves snippets to snippets folder
TheeMattOliver May 19, 2022
7a2a78e
update mdx.md with correct path to optimized example image
TheeMattOliver May 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 32 additions & 1 deletion docs/writing-docs/mdx.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,6 +211,37 @@ Write your documentation as you usually would, and your existing SCSS code block

<!-- prettier-ignore-end -->

### Creating a Changelog story

One common use case for MDX-only docs stories is importing a project's `CHANGELOG.md` into an MDX story, so that users can easily refer to the CHANGELOG via a documentation node in Storybook.

First, ensure that `transcludeMarkdown` is set to `true` in `main.js`:

```js
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
// set transcludeMarkdown to true
{
name: "@storybook/addon-docs",
options: { transcludeMarkdown: true },
},
]
```
TheeMattOliver marked this conversation as resolved.
Show resolved Hide resolved

Then, import the markdown and treat the imported file as a component in the MDX file:

```mdx
import { Meta } from "@storybook/addon-docs";

import Changelog from "../CHANGELOG.md";

<Meta title="Changelog" />

<Changelog />
```
TheeMattOliver marked this conversation as resolved.
Show resolved Hide resolved
![Changelog markdown in an MDX story](https://user-images.githubusercontent.com/9900326/168942693-b3954bed-0369-4eb5-a4ed-634ebb7575fa.png)

jonniebigodes marked this conversation as resolved.
Show resolved Hide resolved
## Linking to other stories and pages

When writing MDX, you may want to provide links to other stories or documentation pages and sections. You can use the `path` query string.
Expand Down Expand Up @@ -276,4 +307,4 @@ Update your Storybook configuration (in `.storybook/main.js|ts`) and add the `pr
]}
/>

<!-- prettier-ignore-end -->
<!-- prettier-ignore-end -->