docs: add default value for BrowserWindow URL field (#6207)

* docs: fix BrowserWindow URL field

* fix
This commit is contained in:
Joshua Chen 2021-12-28 15:19:23 +08:00 committed by GitHub
parent c8fad02029
commit 6a772828c5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 56 additions and 29 deletions

View file

@ -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[]`

View file

@ -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)

View file

@ -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>

View file

@ -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>

View file

@ -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...">

View file

@ -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>

View file

@ -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}>