Importing MDX
For more background see the official documentation for importing MDX on docusaurus.io
Let's say you're working on supporting documentation for your API and you want to reference a particular schema. With Docusaurus, you can import generated *.schema.mdx
files and use them as components!
Standalone Schema
import PetSchema from './petstore/schemas/pet.schema.mdx';
<PetSchema />
Pet
A pet
Array [
]
- cat
- dog
- bee
Pet ID
category
Category
Categories this pet belongs to
Category ID
Category name
Possible values: non-empty
sub
object
Test Sub Category
Dumb Property
The name given to a pet
Guru
The list of URL to a cute photos featuring pet
Possible values: <= 20
tags
Tag[]
required
Tags attached to the pet
Possible values: >= 1
Tag ID
Tag name
Possible values: non-empty
Pet status in the store
Enum Value | Description |
---|---|
available | When the pet is available |
pending | When the pet is being sold |
sold | When the pet has been sold. These descriptions can contain line breaks and also links |
Possible values: [available
, pending
, sold
]
petType
string
Type of a pet
Possible values: [cat
, dog
, bee
]
The measured skill for hunting
Possible values: [clueless
, lazy
, adventurous
, aggressive
]
lazy
adventurous
The size of the pack the dog is from
Possible values: >= 1
1
Average amount of honey produced per day in ounces
0
3.14
Schema in BrowserWindow
The BrowserWindow
component implemented by docusaurus.io was adapted for this example. Aside from visually framing a schema it also supports passing custom styles to the schema component itself.
import PetSchema from './petstore/schemas/pet.schema.mdx';
import BrowserWindow from '@site/src/components/BrowserWindow';
<BrowserWindow bodyStyle={{height: 350, overflow: "auto", fontSize: "80%"}} url="https://docusaurus-openapi.tryingpan.dev/advanced#schema-inside-browserwindow">
<PetSchema />
</BrowserWindow>
Pet
A pet
Array [
]
- cat
- dog
- bee
Pet ID
category
Category
Categories this pet belongs to
Category ID
Category name
Possible values: non-empty
sub
object
Test Sub Category
Dumb Property
The name given to a pet
Guru
The list of URL to a cute photos featuring pet
Possible values: <= 20
tags
Tag[]
required
Tags attached to the pet
Possible values: >= 1
Tag ID
Tag name
Possible values: non-empty
Pet status in the store
Enum Value | Description |
---|---|
available | When the pet is available |
pending | When the pet is being sold |
sold | When the pet has been sold. These descriptions can contain line breaks and also links |
Possible values: [available
, pending
, sold
]
petType
string
Type of a pet
Possible values: [cat
, dog
, bee
]
The measured skill for hunting
Possible values: [clueless
, lazy
, adventurous
, aggressive
]
lazy
adventurous
The size of the pack the dog is from
Possible values: >= 1
1
Average amount of honey produced per day in ounces
0
3.14