fix(v2): examples should use Node 14 by default on CodeSandbox + regen with alpha72 (#4574)

* codesandbox: use node 14 by default

* Regenerate examples

* Add example json files to prettierrignore
This commit is contained in:
Sébastien Lorber 2021-04-07 18:28:06 +02:00 committed by GitHub
parent 44029128fa
commit 3bcd0a6ab1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 1790 additions and 1601 deletions

View file

@ -14,3 +14,6 @@ __fixtures__
website-1.x/translated_docs
website/i18n
examples/**/package.json
examples/**/sandbox.config.json

View file

@ -14,7 +14,7 @@ $ yarn
$ yarn start
```
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.
### Build

View file

@ -15,8 +15,8 @@
"dev": "docusaurus start"
},
"dependencies": {
"@docusaurus/core": "2.0.0-alpha.71",
"@docusaurus/preset-bootstrap": "2.0.0-alpha.71",
"@docusaurus/core": "2.0.0-alpha.72",
"@docusaurus/preset-bootstrap": "2.0.0-alpha.72",
"@mdx-js/react": "^1.5.8",
"classnames": "^2.2.6",
"react": "^17.0.1",

View file

@ -2,5 +2,9 @@
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "docusaurus"
"template": "docusaurus",
"node": "14",
"container": {
"node": "14"
}
}

File diff suppressed because it is too large Load diff

View file

@ -14,7 +14,7 @@ yarn install
yarn start
```
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.
## Build

View file

@ -0,0 +1,25 @@
---
title: Create a Blog Post
---
This page will help you on how to create blog posts in Docusaurus.
## Create a Blog Post
Create a file at `blog/2021-02-28-greetings.md`:
```md title="blog/2021-02-28-greetings.md"
---
title: Greetings!
author: Steven Hansel
author_title: Docusaurus Contributor
author_url: https://github.com/ShinteiMai
author_image_url: https://github.com/ShinteiMai.png
---
Congratulations, you have made your first post!
Feel free to play around and edit this post as much you like.
```
A new blog post is now available at `http://localhost:3000/blog/greetings`.

View file

@ -0,0 +1,38 @@
---
title: Create a Document
---
Documents are pages with a **sidebar**, a **previous/next navigation** and many other useful features.
## Create a Document
Create a markdown file at `docs/my-doc.md`:
```mdx title="docs/hello.md"
---
title: Hello, World!
---
## Hello, World!
This is your first document in **Docusaurus**, Congratulations!
```
A new document is now available at `http://localhost:3000/docs/hello`.
## Add your document to the sidebar
Add `hello` to the `sidebars.js` file:
```diff title="sidebars.js"
module.exports = {
docs: [
{
type: 'category',
label: 'Docusaurus Tutorial',
- items: ['getting-started', 'create-a-doc', ...],
+ items: ['getting-started', 'create-a-doc', 'hello', ...],
},
],
};
```

View file

@ -0,0 +1,45 @@
---
title: Create a Page
---
Any React or Markdown file created under `src/pages` directory is converted into a website page:
- `src/pages/index.js` -> `localhost:3000/`
- `src/pages/foo.md` -> `localhost:3000/foo`
- `src/pages/foo/bar.js` -> `localhost:3000/foo/bar`
## Create a React Page
Create a file at `src/pages/my-react-page.js`:
```jsx title="src/pages/my-react-page.js"
import React from 'react';
import Layout from '@theme/Layout';
function HelloWorld() {
return (
<Layout>
<h1>My React page</h1>
<p>This is a React page</p>
</Layout>
);
}
```
A new page is now available at `http://localhost:3000/my-react-page`.
## Create a Markdown Page
Create a file at `src/pages/my-markdown-page.md`:
```mdx title="src/pages/my-markdown-page.md"
---
title: My Markdown page
---
# My Markdown page
This is a Markdown page
```
A new page is now available at `http://localhost:3000/my-markdown-page`.

View file

@ -1,203 +0,0 @@
---
id: doc1
title: Style Guide
sidebar_label: Style Guide
slug: /
---
You can write content using [GitHub-flavored Markdown syntax](https://github.github.com/gfm/).
## Markdown Syntax
To serve as an example page when styling markdown based Docusaurus sites.
## Headers
# H1 - Create the best documentation
## H2 - Create the best documentation
### H3 - Create the best documentation
#### H4 - Create the best documentation
##### H5 - Create the best documentation
###### H6 - Create the best documentation
---
## Emphasis
Emphasis, aka italics, with _asterisks_ or _underscores_.
Strong emphasis, aka bold, with **asterisks** or **underscores**.
Combined emphasis with **asterisks and _underscores_**.
Strikethrough uses two tildes. ~~Scratch this.~~
---
## Lists
1. First ordered list item
1. Another item
- Unordered sub-list.
1. Actual numbers don't matter, just that it's a number
1. Ordered sub-list
1. And another item.
- Unordered list can use asterisks
* Or minuses
- Or pluses
---
## Links
[I'm an inline-style link](https://www.google.com/)
[I'm an inline-style link with title](https://www.google.com/ "Google's Homepage")
[I'm a reference-style link][arbitrary case-insensitive reference text]
[You can use numbers for reference-style link definitions][1]
Or leave it empty and use the [link text itself].
URLs and URLs in angle brackets will automatically get turned into links. http://www.example.com/ or <http://www.example.com/> and sometimes example.com (but not on GitHub, for example).
Some text to show that the reference links can follow later.
[arbitrary case-insensitive reference text]: https://www.mozilla.org/
[1]: http://slashdot.org/
[link text itself]: http://www.reddit.com/
---
## Images
Here's our logo (hover to see the title text):
Inline-style: ![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png 'Logo Title Text 1')
Reference-style: ![alt text][logo]
[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png 'Logo Title Text 2'
Images from any folder can be used by providing path to file. Path should be relative to the original markdown file or absolute to the `/static` folder.
![img](/img/logo.svg)
---
## Code
```javascript
var s = 'JavaScript syntax highlighting';
alert(s);
```
```python
s = "Python syntax highlighting"
print(s)
```
```
No language indicated, so no syntax highlighting.
But let's throw in a <b>tag</b>.
```
```js {2}
function highlightMe() {
console.log('This line can be highlighted!');
}
```
---
## Tables
Colons can be used to align columns.
| Tables | Are | Cool |
| ------------- | :-----------: | -----: |
| col 3 is | right-aligned | \$1600 |
| col 2 is | centered | \$12 |
| zebra stripes | are neat | \$1 |
There must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.
| Markdown | Less | Pretty |
| -------- | --------- | ---------- |
| _Still_ | `renders` | **nicely** |
| 1 | 2 | 3 |
---
## Blockquotes
> Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.
Quote break.
> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can _put_ **Markdown** into a blockquote.
---
## Inline HTML
<dl>
<dt>Definition list</dt>
<dd>Is something people use sometimes.</dd>
<dt>Markdown in HTML</dt>
<dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
</dl>
---
## Line Breaks
Here's a line for us to start with.
This line is separated from the one above by two newlines, so it will be a _separate paragraph_.
This line is also a separate paragraph, but... This line is only separated by a single newline, so it's a separate line in the _same paragraph_.
---
## Admonitions
:::note
This is a note
:::
:::tip
This is a tip
:::
:::important
This is important
:::
:::caution
This is a caution
:::
:::warning
This is a warning
:::

View file

@ -1,6 +0,0 @@
---
id: doc2
title: Document Number 2
---
This is a link to [another document.](doc3.md) This is a link to an [external page.](http://www.example.com/)

View file

@ -1,14 +0,0 @@
---
id: doc3
title: This is Document Number 3
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac euismod odio, eu consequat dui. Nullam molestie consectetur risus id imperdiet. Proin sodales ornare turpis, non mollis massa ultricies id. Nam at nibh scelerisque, feugiat ante non, dapibus tortor. Vivamus volutpat diam quis tellus elementum bibendum. Praesent semper gravida velit quis aliquam. Etiam in cursus neque. Nam lectus ligula, malesuada et mauris a, bibendum faucibus mi. Phasellus ut interdum felis. Phasellus in odio pulvinar, porttitor urna eget, fringilla lectus. Aliquam sollicitudin est eros. Mauris consectetur quam vitae mauris interdum hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis et egestas libero, imperdiet faucibus ipsum. Sed posuere eget urna vel feugiat. Vivamus a arcu sagittis, fermentum urna dapibus, congue lectus. Fusce vulputate porttitor nisl, ac cursus elit volutpat vitae. Nullam vitae ipsum egestas, convallis quam non, porta nibh. Morbi gravida erat nec neque bibendum, eu pellentesque velit posuere. Fusce aliquam erat eu massa eleifend tristique.
Sed consequat sollicitudin ipsum eget tempus. Integer a aliquet velit. In justo nibh, pellentesque non suscipit eget, gravida vel lacus. Donec odio ante, malesuada in massa quis, pharetra tristique ligula. Donec eros est, tristique eget finibus quis, semper non nisl. Vivamus et elit nec enim ornare placerat. Sed posuere odio a elit cursus sagittis.
Phasellus feugiat purus eu tortor ultrices finibus. Ut libero nibh, lobortis et libero nec, dapibus posuere eros. Sed sagittis euismod justo at consectetur. Nulla finibus libero placerat, cursus sapien at, eleifend ligula. Vivamus elit nisl, hendrerit ac nibh eu, ultrices tempus dui. Nam tellus neque, commodo non rhoncus eu, gravida in risus. Nullam id iaculis tortor.
Nullam at odio in sem varius tempor sit amet vel lorem. Etiam eu hendrerit nisl. Fusce nibh mauris, vulputate sit amet ex vitae, congue rhoncus nisl. Sed eget tellus purus. Nullam tempus commodo erat ut tristique. Cras accumsan massa sit amet justo consequat eleifend. Integer scelerisque vitae tellus id consectetur.

View file

@ -0,0 +1,28 @@
---
title: Getting Started
slug: /
---
## Step 1: Generate a new Docusaurus site
If you haven't already, generate a new Docusaurus site using the classic template:
```shell
npx @docusaurus/init@latest init my-website classic
```
## Step 2: Start your Docusaurus site
Run the development server in the newly created `my-website` folder:
```shell
cd my-website
npx docusaurus start
```
Open `docs/getting-started.md` and edit some lines. The site reloads automatically and display your changes.
## That's it!
Congratulations! You've successfully run and modified your Docusaurus project.

View file

@ -1,27 +0,0 @@
---
id: mdx
title: Powered by MDX
---
You can write JSX and use React components within your Markdown thanks to [MDX](https://mdxjs.com/).
The `.mdx` extension is not required, but will enable better support from tooling (IDE, Prettier...).
export const Highlight = ({children, color}) => (
<span
style={{
backgroundColor: color,
borderRadius: '2px',
color: '#fff',
padding: '0.2rem',
}}
onClick={() => alert('Highlight pressed!')}>
{children}
</span>
);
<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">
Facebook blue
</Highlight> are my favorite colors.
I can write **Markdown** alongside my _JSX_!

View file

@ -0,0 +1,128 @@
---
title: Markdown Features
---
Docusaurus supports the [Markdown](https://daringfireball.net/projects/markdown/syntax) syntax and has some additional features.
## Front Matter
Markdown documents can have associated metadata at the top called [Front Matter](https://jekyllrb.com/docs/front-matter/):
```md
---
id: my-doc
title: My document title
description: My document description
sidebar_label: My doc
---
Markdown content
```
## Markdown links
Regular Markdown links are supported using url paths or relative file paths.
```md
Let's see how to [Create a page](/create-a-page).
```
```md
Let's see how to [Create a page](./create-a-page.md).
```
Let's see how to [Create a page](./create-a-page.md).
## Markdown images
Regular Markdown images are supported.
Add an image at `static/img/docusaurus.png` and use this Markdown declaration:
```md
![Docusaurus logo](/img/docusaurus.png)
```
![Docusaurus logo](/img/docusaurus.png)
## Code Blocks
Markdown code blocks are supported with Syntax highlighting.
```jsx title="src/components/HelloDocusaurus.js"
function HelloDocusaurus() {
return (
<h1>Hello, Docusaurus!</h1>
)
}
```
```jsx title="src/components/HelloDocusaurus.js"
function HelloDocusaurus() {
return <h1>Hello, Docusaurus!</h1>;
}
```
## Admonitions
Docusaurus has a special syntax to create admonitions and callouts:
:::tip My tip
Use this awesome feature option
:::
:::danger Take care
This action is dangerous
:::
:::tip My tip
Use this awesome feature option
:::
:::danger Take care
This action is dangerous
:::
## React components
Thanks to [MDX](https://mdxjs.com/), you can make your doc more interactive and use React components inside Markdown:
```jsx
export const Highlight = ({children, color}) => (
<span
style={{
backgroundColor: color,
borderRadius: '2px',
color: 'red',
padding: '0.2rem',
}}>
{children}
</span>
);
<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
```
export const Highlight = ({children, color}) => (
<span
style={{
backgroundColor: color,
borderRadius: '2px',
color: '#fff',
padding: '0.2rem',
}}>
{children}
</span>
);
<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">
Facebook blue
</Highlight> are my favorite colors.

View file

@ -0,0 +1,17 @@
---
title: Thank you!
---
Congratulations on making it this far!
You have learned the **basics of Docusaurus** and made some changes to the **initial template**.
But Docusaurus has **much more to offer**!
## What's next?
- [Read the official documentation](https://v2.docusaurus.io/).
- [Design and Layout your Docusaurus site](https://v2.docusaurus.io/docs/styling-layout)
- [Integrate a search bar into your site](https://v2.docusaurus.io/docs/search)
- [Find inspirations in Docusaurus showcase](https://v2.docusaurus.io/showcase)
- [Get involved in the Docusaurus Community](https://v2.docusaurus.io/community/support)

View file

@ -38,13 +38,9 @@ module.exports = {
title: 'Docs',
items: [
{
label: 'Style Guide',
label: 'Getting Started',
to: 'docs/',
},
{
label: 'Second Doc',
to: 'docs/doc2/',
},
],
},
{

View file

@ -15,8 +15,8 @@
"dev": "docusaurus start"
},
"dependencies": {
"@docusaurus/core": "2.0.0-alpha.71",
"@docusaurus/preset-classic": "2.0.0-alpha.71",
"@docusaurus/core": "2.0.0-alpha.72",
"@docusaurus/preset-classic": "2.0.0-alpha.72",
"@mdx-js/react": "^1.6.21",
"clsx": "^1.1.1",
"react": "^17.0.1",

View file

@ -2,5 +2,9 @@
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "docusaurus"
"template": "docusaurus",
"node": "14",
"container": {
"node": "14"
}
}

View file

@ -1,6 +1,16 @@
module.exports = {
someSidebar: {
Docusaurus: ['doc1', 'doc2', 'doc3'],
Features: ['mdx'],
},
docs: [
{
type: 'category',
label: 'Docusaurus Tutorial',
items: [
'getting-started',
'create-a-page',
'create-a-document',
'create-a-blog-post',
'markdown-features',
'thank-you',
],
},
],
};

Binary file not shown.

After

Width:  |  Height:  |  Size: 5 KiB

File diff suppressed because it is too large Load diff

View file

@ -8,7 +8,7 @@
*/
const OFF = 0;
// const WARNING = 1;
const WARNING = 1;
const ERROR = 2;
module.exports = {
@ -19,7 +19,7 @@ module.exports = {
jest: true,
node: true,
},
parser: '@babel/eslint-parser',
parser: 'babel-eslint',
parserOptions: {
allowImportExportEverywhere: true,
},

View file

@ -14,7 +14,7 @@ $ yarn
$ yarn start
```
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.
### Build

View file

@ -19,24 +19,24 @@
"dev": "docusaurus start"
},
"dependencies": {
"@docusaurus/core": "2.0.0-alpha.71",
"@docusaurus/preset-classic": "2.0.0-alpha.71",
"@docusaurus/core": "2.0.0-alpha.72",
"@docusaurus/preset-classic": "2.0.0-alpha.72",
"@mdx-js/react": "^1.6.21",
"clsx": "^1.1.1",
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"@babel/eslint-parser": "^7.13.10",
"eslint": "^7.20.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^6.15.0",
"babel-eslint": "^10.0.3",
"eslint": "^6.7.1",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-prettier": "^6.7.0",
"eslint-plugin-header": "^3.0.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"prettier": "^2.2.1",
"eslint-plugin-import": "^2.21.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.20.0",
"eslint-plugin-react-hooks": "^4.0.4",
"prettier": "^2.0.2",
"stylelint": "^13.2.1"
},
"browserslist": {

View file

@ -2,5 +2,9 @@
"infiniteLoopProtection": true,
"hardReloadOnChange": true,
"view": "browser",
"template": "docusaurus"
"template": "docusaurus",
"node": "14",
"container": {
"node": "14"
}
}

File diff suppressed because it is too large Load diff

View file

@ -65,6 +65,10 @@ function generateTemplateExample(template) {
hardReloadOnChange: true,
view: 'browser',
template: 'docusaurus',
node: '14',
container: {
node: '14',
},
};
writeFileSync(