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

* docs: fix BrowserWindow URL field * fix
facebook · Dec 28, 2021 · 6a77282 · 6a77282
1 parent c8fad02
commit 6a77282
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 29 deletions.
diff --git a/website/_dogfooding/_pages tests/code-block-tests.mdx b/website/_dogfooding/_pages tests/code-block-tests.mdx
@@ -33,7 +33,7 @@ Multi-line text inside `pre` will turn into one-liner, but it's okay (https://gi
 ### `pre > element`
 
 <pre>
-  <BrowserWindow url="http://localhost:3000">Lol bro</BrowserWindow>
+  <BrowserWindow>Lol bro</BrowserWindow>
 </pre>
 
 ### `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>
-  <BrowserWindow url="http://localhost:3000">Lol bro</BrowserWindow>
+  <BrowserWindow>Lol bro</BrowserWindow>
 </code>
 
 ### `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 className="language-yaml" title="test">
-  <BrowserWindow url="http://localhost:3000">Lol bro</BrowserWindow>
+  <BrowserWindow>Lol bro</BrowserWindow>
 </CodeBlock>
 
 ### `CodeBlock > element[]`

diff --git a/website/_dogfooding/_pages tests/index.md b/website/_dogfooding/_pages tests/index.md
@@ -17,3 +17,13 @@ import Readme from "../README.md"
 
 <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)
diff --git a/website/_dogfooding/_pages tests/markdownPageTests.md b/website/_dogfooding/_pages tests/markdownPageTests.md
@@ -72,7 +72,7 @@ import MyComponent from './myComponent';
 <MyComponent />;
 ```
 
-<BrowserWindow url="http://localhost:3000">
+<BrowserWindow>
 
 <MyComponent/>
 
@@ -92,7 +92,7 @@ import CodeBlock from "@theme/CodeBlock"
 
 import MyComponentSource from '!!raw-loader!@site/src/pages/examples/\_myComponent';
 
-<BrowserWindow url="http://localhost:3000">
+<BrowserWindow>
 
 <CodeBlock className="language-jsx">{MyComponentSource}</CodeBlock>
 

diff --git a/website/docs/guides/docs/docs-create-doc.mdx b/website/docs/guides/docs/docs-create-doc.mdx
@@ -57,7 +57,7 @@ This will render in the browser as follows:
 ```mdx-code-block
 import BrowserWindow from '@site/src/components/BrowserWindow';
 
-<BrowserWindow url="http://localhost:3000">
+<BrowserWindow>
 
 <h2>Hello from Docusaurus</h2>
 

diff --git a/website/docs/guides/markdown-features/markdown-features-admonitions.mdx b/website/docs/guides/markdown-features/markdown-features-admonitions.mdx
@@ -5,39 +5,45 @@ description: Handling admonitions/callouts in Docusaurus Markdown
 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.
 
 Example:
 
-    :::note
+```md
+:::note
 
-    Some **content** with _markdown_ `syntax`. Check [this `api`](#).
+Some **content** with _markdown_ `syntax`. Check [this `api`](#).
 
-    :::
+:::
 
-    :::tip
+:::tip
 
-    Some **content** with _markdown_ `syntax`. Check [this `api`](#).
+Some **content** with _markdown_ `syntax`. Check [this `api`](#).
 
-    :::
+:::
 
-    :::info
+:::info
 
-    Some **content** with _markdown_ `syntax`. Check [this `api`](#).
+Some **content** with _markdown_ `syntax`. Check [this `api`](#).
 
-    :::
+:::
 
-    :::caution
+:::caution
 
-    Some **content** with _markdown_ `syntax`. Check [this `api`](#).
+Some **content** with _markdown_ `syntax`. Check [this `api`](#).
 
-    :::
+:::
 
-    :::danger
+:::danger
 
-    Some **content** with _markdown_ `syntax`. Check [this `api`](#).
+Some **content** with _markdown_ `syntax`. Check [this `api`](#).
 
-    :::
+:::
+```
+
+<BrowserWindow>
 
 :::note
 
@@ -69,6 +75,8 @@ Some **content** with _markdown_ `syntax`. Check [this `api`](#).
 
 :::
 
+</BrowserWindow>
+
 ## Usage with Prettier {#usage-with-prettier}
 
 If you use [Prettier](https://prettier.io) to format your Markdown files, Prettier might autoformat your code to invalid admonition syntax. To avoid this problem, add empty lines around the starting and ending directives. This is also why the examples we show here all have empty lines around the content.
@@ -95,18 +103,24 @@ Hello world
 
 You may also specify an optional title
 
-    :::note Your Title
+```md
+:::note Your Title
+
+Some **content** with _markdown_ `syntax`.
 
-    Some **content** with _markdown_ `syntax`.
+:::
+```
 
-    :::
+<BrowserWindow>
 
 :::note Your Title
 
 Some **content** with _markdown_ `syntax`.
 
 :::
 
+</BrowserWindow>
+
 ## Admonitions with MDX
 
 You can use MDX inside admonitions too!
@@ -175,7 +189,6 @@ The types that are accepted are the same as above: `note`, `tip`, `danger`, `inf
 
 ```mdx-code-block
 import Admonition from '@theme/Admonition';
-import BrowserWindow from '@site/src/components/BrowserWindow';
 
 <BrowserWindow>
 <Admonition type="tip" icon="💡" title="Did you know...">

diff --git a/website/docs/guides/markdown-features/markdown-features-react.mdx b/website/docs/guides/markdown-features/markdown-features-react.mdx
@@ -64,7 +64,7 @@ export const Highlight = ({children, color}) => (
   </span>
 );
 
-<BrowserWindow minHeight={240} url="http://localhost:3000">
+<BrowserWindow minHeight={240}>
 
 <Highlight color="#25c2a0">Docusaurus green</Highlight>
 {` `}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 MyComponentSource from '!!raw-loader!@site/src/pages/examples/_myComponent';
 
-<BrowserWindow url="http://localhost:3000">
+<BrowserWindow>
 
 <CodeBlock className="language-jsx">{MyComponentSource}</CodeBlock>
 
@@ -157,7 +157,7 @@ import PartialExample from './_markdown-partial-example.mdx';
 ```mdx-code-block
 import PartialExample from './_markdown-partial-example.mdx';
 
-<BrowserWindow url="http://localhost:3000">
+<BrowserWindow>
   <PartialExample name="Sebastien" />
 </BrowserWindow>
 

diff --git a/website/src/components/BrowserWindow/index.tsx b/website/src/components/BrowserWindow/index.tsx
@@ -15,7 +15,11 @@ interface Props {
   url: string;
 }
 
-function BrowserWindow({children, minHeight, url}: Props): JSX.Element {
+function BrowserWindow({
+  children,
+  minHeight,
+  url = 'http://localhost:3000',
+}: Props): JSX.Element {
   return (
     <div className={styles.browserWindow} style={{minHeight}}>
       <div className={styles.browserWindowHeader}>