mirror of
https://github.com/facebook/docusaurus.git
synced 2025-04-30 02:37:59 +02:00
docs: add default value for BrowserWindow URL field (#6207)
* docs: fix BrowserWindow URL field * fix
This commit is contained in:
parent
c8fad02029
commit
6a772828c5
7 changed files with 56 additions and 29 deletions
|
@ -33,7 +33,7 @@ Multi-line text inside `pre` will turn into one-liner, but it's okay (https://gi
|
||||||
### `pre > element`
|
### `pre > element`
|
||||||
|
|
||||||
<pre>
|
<pre>
|
||||||
<BrowserWindow url="http://localhost:3000">Lol bro</BrowserWindow>
|
<BrowserWindow>Lol bro</BrowserWindow>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
### `pre > element[]`
|
### `pre > element[]`
|
||||||
|
@ -78,7 +78,7 @@ Multi-line text inside `pre` will turn into one-liner, but it's okay (https://gi
|
||||||
### `code > element`
|
### `code > element`
|
||||||
|
|
||||||
<code>
|
<code>
|
||||||
<BrowserWindow url="http://localhost:3000">Lol bro</BrowserWindow>
|
<BrowserWindow>Lol bro</BrowserWindow>
|
||||||
</code>
|
</code>
|
||||||
|
|
||||||
### `code > element[]`
|
### `code > element[]`
|
||||||
|
@ -118,7 +118,7 @@ Multi-line text inside `pre` will turn into one-liner, but it's okay (https://gi
|
||||||
### `CodeBlock > element`
|
### `CodeBlock > element`
|
||||||
|
|
||||||
<CodeBlock className="language-yaml" title="test">
|
<CodeBlock className="language-yaml" title="test">
|
||||||
<BrowserWindow url="http://localhost:3000">Lol bro</BrowserWindow>
|
<BrowserWindow>Lol bro</BrowserWindow>
|
||||||
</CodeBlock>
|
</CodeBlock>
|
||||||
|
|
||||||
### `CodeBlock > element[]`
|
### `CodeBlock > element[]`
|
||||||
|
|
|
@ -17,3 +17,13 @@ import Readme from "../README.md"
|
||||||
|
|
||||||
<Readme />
|
<Readme />
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Other tests
|
||||||
|
|
||||||
|
- [Code block tests](/tests/pages/code-block-tests)
|
||||||
|
- [Error boundary tests](/tests/pages/error-boundary-tests)
|
||||||
|
- [Hydration tests](/tests/pages/hydration-tests)
|
||||||
|
- [Asset linking tests](/tests/pages/markdown-tests)
|
||||||
|
- [General Markdown tests](/tests/pages/markdownPageTests)
|
||||||
|
- [TOC tests](/tests/pages/page-toc-tests)
|
||||||
|
- [Tabs tests](/tests/pages/tabs-tests)
|
||||||
|
|
|
@ -72,7 +72,7 @@ import MyComponent from './myComponent';
|
||||||
<MyComponent />;
|
<MyComponent />;
|
||||||
```
|
```
|
||||||
|
|
||||||
<BrowserWindow url="http://localhost:3000">
|
<BrowserWindow>
|
||||||
|
|
||||||
<MyComponent/>
|
<MyComponent/>
|
||||||
|
|
||||||
|
@ -92,7 +92,7 @@ import CodeBlock from "@theme/CodeBlock"
|
||||||
|
|
||||||
import MyComponentSource from '!!raw-loader!@site/src/pages/examples/\_myComponent';
|
import MyComponentSource from '!!raw-loader!@site/src/pages/examples/\_myComponent';
|
||||||
|
|
||||||
<BrowserWindow url="http://localhost:3000">
|
<BrowserWindow>
|
||||||
|
|
||||||
<CodeBlock className="language-jsx">{MyComponentSource}</CodeBlock>
|
<CodeBlock className="language-jsx">{MyComponentSource}</CodeBlock>
|
||||||
|
|
||||||
|
|
|
@ -57,7 +57,7 @@ This will render in the browser as follows:
|
||||||
```mdx-code-block
|
```mdx-code-block
|
||||||
import BrowserWindow from '@site/src/components/BrowserWindow';
|
import BrowserWindow from '@site/src/components/BrowserWindow';
|
||||||
|
|
||||||
<BrowserWindow url="http://localhost:3000">
|
<BrowserWindow>
|
||||||
|
|
||||||
<h2>Hello from Docusaurus</h2>
|
<h2>Hello from Docusaurus</h2>
|
||||||
|
|
||||||
|
|
|
@ -5,10 +5,46 @@ description: Handling admonitions/callouts in Docusaurus Markdown
|
||||||
slug: /markdown-features/admonitions
|
slug: /markdown-features/admonitions
|
||||||
---
|
---
|
||||||
|
|
||||||
|
import BrowserWindow from '@site/src/components/BrowserWindow';
|
||||||
|
|
||||||
In addition to the basic Markdown syntax, we use [remark-admonitions](https://github.com/elviswolcott/remark-admonitions) alongside MDX to add support for admonitions. Admonitions are wrapped by a set of 3 colons.
|
In addition to the basic Markdown syntax, we use [remark-admonitions](https://github.com/elviswolcott/remark-admonitions) alongside MDX to add support for admonitions. Admonitions are wrapped by a set of 3 colons.
|
||||||
|
|
||||||
Example:
|
Example:
|
||||||
|
|
||||||
|
```md
|
||||||
|
:::note
|
||||||
|
|
||||||
|
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
:::tip
|
||||||
|
|
||||||
|
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
:::info
|
||||||
|
|
||||||
|
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
:::caution
|
||||||
|
|
||||||
|
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
:::danger
|
||||||
|
|
||||||
|
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
|
||||||
|
|
||||||
|
:::
|
||||||
|
```
|
||||||
|
|
||||||
|
<BrowserWindow>
|
||||||
|
|
||||||
:::note
|
:::note
|
||||||
|
|
||||||
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
|
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
|
||||||
|
@ -39,35 +75,7 @@ Example:
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
:::note
|
</BrowserWindow>
|
||||||
|
|
||||||
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
:::tip
|
|
||||||
|
|
||||||
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
:::info
|
|
||||||
|
|
||||||
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
:::caution
|
|
||||||
|
|
||||||
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
:::danger
|
|
||||||
|
|
||||||
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
## Usage with Prettier {#usage-with-prettier}
|
## Usage with Prettier {#usage-with-prettier}
|
||||||
|
|
||||||
|
@ -95,17 +103,23 @@ Hello world
|
||||||
|
|
||||||
You may also specify an optional title
|
You may also specify an optional title
|
||||||
|
|
||||||
|
```md
|
||||||
|
:::note Your Title
|
||||||
|
|
||||||
|
Some **content** with _markdown_ `syntax`.
|
||||||
|
|
||||||
|
:::
|
||||||
|
```
|
||||||
|
|
||||||
|
<BrowserWindow>
|
||||||
|
|
||||||
:::note Your Title
|
:::note Your Title
|
||||||
|
|
||||||
Some **content** with _markdown_ `syntax`.
|
Some **content** with _markdown_ `syntax`.
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
:::note Your Title
|
</BrowserWindow>
|
||||||
|
|
||||||
Some **content** with _markdown_ `syntax`.
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
## Admonitions with MDX
|
## Admonitions with MDX
|
||||||
|
|
||||||
|
@ -175,7 +189,6 @@ The types that are accepted are the same as above: `note`, `tip`, `danger`, `inf
|
||||||
|
|
||||||
```mdx-code-block
|
```mdx-code-block
|
||||||
import Admonition from '@theme/Admonition';
|
import Admonition from '@theme/Admonition';
|
||||||
import BrowserWindow from '@site/src/components/BrowserWindow';
|
|
||||||
|
|
||||||
<BrowserWindow>
|
<BrowserWindow>
|
||||||
<Admonition type="tip" icon="💡" title="Did you know...">
|
<Admonition type="tip" icon="💡" title="Did you know...">
|
||||||
|
|
|
@ -64,7 +64,7 @@ export const Highlight = ({children, color}) => (
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
|
|
||||||
<BrowserWindow minHeight={240} url="http://localhost:3000">
|
<BrowserWindow minHeight={240}>
|
||||||
|
|
||||||
<Highlight color="#25c2a0">Docusaurus green</Highlight>
|
<Highlight color="#25c2a0">Docusaurus green</Highlight>
|
||||||
{` `}and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
|
{` `}and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
|
||||||
|
@ -107,7 +107,7 @@ import MyComponentSource from '!!raw-loader!./myComponent';
|
||||||
import CodeBlock from '@theme/CodeBlock';
|
import CodeBlock from '@theme/CodeBlock';
|
||||||
import MyComponentSource from '!!raw-loader!@site/src/pages/examples/_myComponent';
|
import MyComponentSource from '!!raw-loader!@site/src/pages/examples/_myComponent';
|
||||||
|
|
||||||
<BrowserWindow url="http://localhost:3000">
|
<BrowserWindow>
|
||||||
|
|
||||||
<CodeBlock className="language-jsx">{MyComponentSource}</CodeBlock>
|
<CodeBlock className="language-jsx">{MyComponentSource}</CodeBlock>
|
||||||
|
|
||||||
|
@ -157,7 +157,7 @@ import PartialExample from './_markdown-partial-example.mdx';
|
||||||
```mdx-code-block
|
```mdx-code-block
|
||||||
import PartialExample from './_markdown-partial-example.mdx';
|
import PartialExample from './_markdown-partial-example.mdx';
|
||||||
|
|
||||||
<BrowserWindow url="http://localhost:3000">
|
<BrowserWindow>
|
||||||
<PartialExample name="Sebastien" />
|
<PartialExample name="Sebastien" />
|
||||||
</BrowserWindow>
|
</BrowserWindow>
|
||||||
|
|
||||||
|
|
|
@ -15,7 +15,11 @@ interface Props {
|
||||||
url: string;
|
url: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
function BrowserWindow({children, minHeight, url}: Props): JSX.Element {
|
function BrowserWindow({
|
||||||
|
children,
|
||||||
|
minHeight,
|
||||||
|
url = 'http://localhost:3000',
|
||||||
|
}: Props): JSX.Element {
|
||||||
return (
|
return (
|
||||||
<div className={styles.browserWindow} style={{minHeight}}>
|
<div className={styles.browserWindow} style={{minHeight}}>
|
||||||
<div className={styles.browserWindowHeader}>
|
<div className={styles.browserWindowHeader}>
|
||||||
|
|
Loading…
Add table
Reference in a new issue