refactor(docusarus): docusaurus migration

.gitignore

@@ -5,9 +5,11 @@ node_modules
 lib/core/metadata.js
 lib/core/MetadataBlog.js
 
-website/translated_docs
-website/build/
-website/i18n/*
+translated_docs
+build/
+i18n/*
+.docusaurus
+.cache-loader
 
 *.log
 

.vscode/markdown.code-snippets

@@ -1,53 +1,47 @@
 {
-	// Place your testing-library-docs workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
-	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
-	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
-	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
-	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
-	// Placeholders with the same ids are connected.
-	// Example:
-	// "Print to console": {
-	// 	"scope": "javascript,typescript",
-	// 	"prefix": "log",
-	// 	"body": [
-	// 		"console.log('$1');",
-	// 		"$2"
-	// 	],
-	// 	"description": "Log output to console"
-	// },
-	"Multilanguage Code Block": {
-		"scope": "markdown",
-		"prefix": "docblock",
-		"body": [
-			"```html",
-			"$4",
-			"```",
-			"",
-			"<!--DOCUSAURUS_CODE_TABS-->",
-			"",
-			"<!--Native-->",
-			"```js",
-			"import { $1 } from '@testing-library/dom'",
-			"",
-			"const container = document.body",
-			"const $3 = $1(container, '$2')",
-			"```",
-			"",
-			"<!--React-->",
-			"```js",
-			"import { render } from '@testing-library/react'",
-			"",
-			"const { $1 } = render(<MyComponent />)",
-			"const $3 = $1('$2')",
-			"```",
-			"",
-			"<!--Cypress-->",
-			"```js",
-			"cy.$1('$2').should('exist')",
-			"```",
-			"",
-			"<!--END_DOCUSAURUS_CODE_TABS-->"
-		],
-		"description": "Create a Docusaurus multi-language code block"
-	}
-}
+  "MDX title": {
+    "prefix": "mdxtitle",
+    "body": ["---", "id: $1", "title: $2", "sidebar_label: $3", "---"],
+    "description": "MDX file titles"
+  },
+  "MDX Multilingual Tabs": {
+    "prefix": "mdxtabs",
+    "body": [
+      "",
+      "import Tabs from '@theme/Tabs';",
+      "import TabItem from '@theme/TabItem';",
+      "",
+      "  <Tabs",
+      "    defaultValue=\"native\"",
+      "    values={[",
+      "    { label: 'Native', value: 'native' },",
+      "    { label: 'React', value: 'react' },",
+      "    { label: 'Cypress', value: 'cypress' }]",
+      "  }>",
+      "  <TabItem value=\"native\">",
+      "",
+      "  ```js",
+      "  $1",
+      "  ```",
+      "",
+      "  </TabItem>",
+      "  <TabItem value=\"react\">",
+      "",
+      "  ```jsx",
+      "  $2",
+      "  ```",
+      "",
+      "  </TabItem>",
+      "  <TabItem value=\"cypress\">",
+      "",
+      "  ```js",
+      "  $3",
+      "  ```",
+      "",
+      "  </TabItem>",
+      "  </Tabs>",
+      ""
+    ],
+    "description": "MDX multilingual tabs"
+  }
+}

.vscode/settings.json

@@ -2,5 +2,8 @@
   "editor.rulers": [
     60, // try to keep examples this long
     80, // hard wrap
-  ]
+  ],
+  "files.associations": {
+    "*.md": "mdx"
+   },
 }

README.md

@@ -10,8 +10,6 @@ testing-library-docs
 
 Documentation site for [React Testing Library](https://github.com/testing-library/react-testing-library), [DOM Testing Library](https://github.com/testing-library/dom-testing-library), and [related projects](https://github.com/testing-library)
 
-See [./website/README.md](./website/README.md) for instructions on building the site
-
 **https://testing-library.com**
 
 **Build Status**:
@@ -26,6 +24,108 @@ See [./website/README.md](./website/README.md) for instructions on building the
 [coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
 [coc]: https://github.com/testing-library/react-testing-library/blob/master/CODE_OF_CONDUCT.md
 
+This website was created with [Docusaurus](https://v2.docusaurus.io).
+
+# What's In This Document
+
+- [Get Started in 5 Minutes](#get-started-in-5-minutes)
+- [Directory Structure](#directory-structure)
+- [Editing Content](#editing-content)
+- [Adding Content](#adding-content)
+- [Full Documentation](#full-documentation)
+
+# Get Started in 5 Minutes
+
+1. Make sure all the dependencies for the website are installed:
+
+```sh
+# Install dependencies
+$ npm install
+```
+
+2. Run your dev server:
+
+```sh
+# Start the site
+$ npm run start
+```
+
+# Editing Content
+
+## Editing an existing docs page
+
+Edit docs by navigating to `docs/` and editing the corresponding document:
+
+`docs/doc-to-be-edited.mdx`
+
+```markdown
+---
+id: page-needs-edit
+title: This Doc Needs To Be Edited
+---
+
+Edit me...
+```
+
+For more information about docs, click [here](https://v2.docusaurus.io/docs)
+
+## Editing an existing blog post
+
+Edit blog posts by navigating to `blog` and editing the corresponding
+post:
+
+`blog/post-to-be-edited.mdx`
+
+```markdown
+---
+id: post-needs-edit
+title: This Blog Post Needs To Be Edited
+---
+
+Edit me...
+```
+
+For more information about blog posts, click
+[here](https://v2.docusaurus.io/docs/blog)
+
+# Adding Content
+
+## Adding a new docs page to an existing sidebar
+
+1. Create the doc as a new markdown file in `/docs`, example
+   `docs/newly-created-doc.mdx`:
+
+```md
+---
+id: newly-created-doc
+title: This Doc Needs To Be Edited
+---
+
+My new content here..
+```
+
+Note: Ensure the file name and the id value do not include non-url safe
+characters i.e. '\*'.
+
+2. Refer to that doc's ID in an existing sidebar in `sidebar.json`:
+
+```javascript
+// Add newly-created-doc to the Getting Started category of docs
+{
+  "docs": {
+    "Getting Started": [
+      "quick-start",
+      "newly-created-doc" // new doc here
+    ],
+    ...
+  },
+  ...
+}
+```
+
+For more information about adding new docs, click
+[here](https://v2.docusaurus.io/docs/)
+
 ## Contributors
 
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

website/blog/2018-12-29-new-site.md → blog/2018-12-29-new-site.mdx

@@ -1,7 +1,7 @@
 ---
 title: New Site
 author: Alex Krolick
-authorURL: http://github.com/alexkrolick
+authorURL: 'http://github.com/alexkrolick'
 ---
 
 We have a docs site now! It's built with [Docusaurus](https://docusaurus.io).
@@ -20,6 +20,6 @@ beyond!
 
 🎉 Happy new year!
 
-[dtl]: /
-[rtl]: /react
-[ctl]: /cypress
+[dtl]: /docs/dom-testing-library/intro
+[rtl]: /docs/react-testing-library/intro
+[ctl]: /docs/cypress-testing-library/intro

website/blog/2019-03-17-code-blocks.md → blog/2019-03-17-code-blocks.mdx

@@ -1,7 +1,7 @@
 ---
 title: Multi-Framework Code Blocks
 author: Alex Krolick
-authorURL: http://github.com/alexkrolick
+authorURL: "http://github.com/alexkrolick"
 ---
 
 Many of the code samples have been updated to include tabs to switch between

website/blog/2019-04-25-new-org.md → blog/2019-04-25-new-org.mdx

@@ -1,10 +1,10 @@
 ---
-# prettier doesn't like how long this line is.
-# prettier-ignore
+# prettier doesn't like how long this line is.: ""
+# prettier-ignore: ""
 title: "Testing Library Updates: new release, github org, open collective, and twitter account"
 author: Kent C. Dodds
-authorURL: https://kentcdodds.com
-authorImageURL: https://avatars0.githubusercontent.com/u/1500684?s=120&v=4
+authorURL: "https://kentcdodds.com"
+authorImageURL: "https://avatars0.githubusercontent.com/u/1500684?s=120&v=4"
 ---
 
 Hello friends! I'm pleased to announce the recent updates to the testing-library
@@ -35,8 +35,7 @@ just disable it here -->
 <iframe
   src="https://codesandbox.io/embed/9zw1wv59mw?fontsize=14&module=%2Fsrc%2F__tests__%2Findex.js&previewwindow=tests&view=editor"
   title="React Codesandbox"
-  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
-  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+  style={{width: '100%', height:500, border:0, borderRadius: 4, overflow:'hidden'}}   sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
 ></iframe>
 
 We hope that this helps you catch bugs better!
@@ -148,7 +147,7 @@ and more gets added to it daily. If you know of blog posts, YouTube videos,
 courses, or anything else about the Testing Library family of tools, please
 contribute to the list!
 
-> [Contribute to the learning materials page](https://github.com/testing-library/testing-library-docs/edit/master/docs/learning.md)
+> [Contribute to the learning materials page](https://github.com/testing-library/testing-library-docs/edit/master/docs/learning.mdx)
 
 ## Other Exciting news
 

docs/angular-testing-library/api.md → docs/angular-testing-library/api.mdx

@@ -7,7 +7,7 @@ sidebar_label: API
 `Angular Testing Library` re-exports everything from `DOM Testing Library` as
 well as these methods:
 
-- [`render`](<(#render)>)
+- [`render`](#render)
 
 Some of the `DOM Testing Library` re-exports are patched to work easier with
 Angular:

docs/angular-testing-library/intro.md → docs/angular-testing-library/intro.mdx

@@ -33,7 +33,7 @@ components. It provides light utility functions on top of
 in a way that encourages better testing practices. Its primary guiding principle
 is:
 
-> [The more your tests resemble the way your software is used, the more confidence they can give you.](guiding-principles.md)
+> [The more your tests resemble the way your software is used, the more confidence they can give you.](guiding-principles.mdx)
 
 So rather than dealing with instances of rendered Angular components, your tests
 will work with actual DOM nodes. The utilities this library provides facilitate

docs/dom-testing-library/api-async.md → docs/dom-testing-library/api-async.mdx

@@ -5,7 +5,7 @@ title: Async Utilities
 
 Several utilities are provided for dealing with asynchronous code. These can be
 useful to wait for an element to appear or disappear in response to an action.
-(See the [guide to testing disappearance](guide-disappearance.md).)
+(See the [guide to testing disappearance](guide-disappearance.mdx).)
 
 All the async utils are built on top of `waitFor`.
 
@@ -58,7 +58,7 @@ The default `onTimeout` takes the error and appends the `container`'s printed
 state to the error message which should hopefully make it easier to track down
 what caused the timeout.
 
-<a name="mutationobserveroptions"></a>The default `mutationObserverOptions` is
+The default `mutationObserverOptions` is
 `{subtree: true, childList: true, attributes: true, characterData: true}` which
 will detect additions and removals of child elements (including text nodes) in
 the `container` and any of its descendants. It will also detect attribute
@@ -199,7 +199,7 @@ wait for are descendants of `container`.
 The default `timeout` is `1000ms` which will keep you under
 [Jest's default timeout of `5000ms`](https://jestjs.io/docs/en/jest-object.html#jestsettimeouttimeout).
 
-<a name="mutationobserveroptions"></a>The default `mutationObserverOptions` is
+The default `mutationObserverOptions` is
 `{subtree: true, childList: true, attributes: true, characterData: true}` which
 will detect additions and removals of child elements (including text nodes) in
 the `container` and any of its descendants. It will also detect attribute
@@ -258,7 +258,7 @@ wait for will be attached to it, or set a different `container`.
 The default `timeout` is `4500ms` which will keep you under
 [Jest's default timeout of `5000ms`](https://facebook.github.io/jest/docs/en/jest-object.html#jestsettimeouttimeout).
 
-<a name="mutationobserveroptions"></a>The default `mutationObserverOptions` is
+The default `mutationObserverOptions` is
 `{subtree: true, childList: true, attributes: true, characterData: true}` which
 will detect additions and removals of child elements (including text nodes) in
 the `container` and any of its descendants. It will also detect attribute