Refactor more docs

Author: wooorm

docs/_asset/editor.jsx

@@ -93,12 +93,12 @@ const grammars = [
 /** @type {Awaited<ReturnType<typeof createStarryNight>>} */
 let starryNight
 
-const body = document.querySelector('.body')
+const editor = document.querySelector('#js-editor')
 
-if (body && window.location.pathname === '/playground/') {
+if (window.location.pathname === '/playground/' && editor) {
  const root = document.createElement('div')
  root.classList.add('playground')
- body.after(root)
+ editor.after(root)
  init(root)
 }
 
@@ -204,7 +204,10 @@ function Playground() {
 
  if (show === 'result') {
  /** @type {MDXModule} */
- const mod = await run(String(file), runtime)
+ const mod = await run(String(file), {
+ ...runtime,
+ baseUrl: window.location.href
+ })
 
  return (
  <ErrorBoundary FallbackComponent={ErrorFallback}>

docs/_asset/index.css

@@ -331,7 +331,6 @@ hr {
 table {
  border-collapse: collapse;
  border-spacing: 0;
- display: block;
  overflow: auto;
  width: 100%;
  font-variant-numeric: lining-nums;
@@ -539,6 +538,16 @@ button.success {
  );
 }
 
+.full-bleed {
+ width: 100vw;
+ position: relative;
+ left: 50%;
+ right: 50%;
+ margin-left: -50vw;
+ margin-right: -50vw;
+ padding-inline: calc(1em + 1ex);
+}
+
 /* Note that the `backdrop-filter` itself is applied in light mode. */
 @supports (backdrop-filter: blur(1ex)) {
  .navigation::before {
@@ -1224,7 +1233,6 @@ details[open] {
  grid-template-columns: 49% 49%;
  min-height: 40rem;
  gap: calc(1em + 1ex);
- margin-inline: calc(1em + 1ex);
 }
 
 .playground-area,

docs/_config.js

@@ -38,13 +38,11 @@ export const redirect = {
  '/contributing/index.html': '/community/contribute/',
  '/editor-plugins/index.html': '/docs/getting-started/#editor',
  '/editors/index.html': '/docs/getting-started/#editor',
- '/getting-started/create-react-app/index.html':
- '/docs/getting-started/#create-react-app-cra',
+ '/getting-started/create-react-app/index.html': '/docs/getting-started/#vite',
  '/getting-started/gatsby/index.html': '/docs/getting-started/#gatsby',
  '/getting-started/next/index.html': '/docs/getting-started/#nextjs',
  '/getting-started/parcel/index.html': '/docs/getting-started/#parcel',
- '/getting-started/react-static/index.html':
- '/docs/getting-started/#react-static',
+ '/getting-started/react-static/index.html': '/docs/getting-started/#vite',
  '/getting-started/table-of-components/index.html': '/table-of-components/',
  '/getting-started/typescript/index.html': '/docs/getting-started/#types',
  '/getting-started/webpack/index.html': '/docs/getting-started/#webpack',

docs/blog/v1.mdx

@@ -77,12 +77,12 @@ for implementing this feature.
 **Good libraries need great docs**, so we’ve been working on adding content and
 improving the overall documentation website experience.
 
-*  [Search (thanks Algolia)](https://mobile.twitter.com/4lpine/status/1114270174096412672)
-*  [Guides](/guides/)
-*  [Automatic deployment via ZEIT](https://zeit.co)
-*  [Custom Gatsby theme](https://gatsbyjs.org)
-*  Reorganization of docs for intuitiveness
-*  Full page rewrites to improve clarity
+* [Search (thanks Algolia)](https://mobile.twitter.com/4lpine/status/1114270174096412672)
+* [Guides](/guides/)
+* [Automatic deployment via ZEIT](https://zeit.co)
+* [Custom Gatsby theme](https://gatsbyjs.org)
+* Reorganization of docs for intuitiveness
+* Full page rewrites to improve clarity
 
 Special thanks to [@jxnblk](https://github.com/jxnblks) and
 [@wooorm](https://github.com/wooorm) for their help improving the docs and
@@ -97,12 +97,12 @@ The community has evolved and we’ve come up with newer, better ideas over the
 last year.
 We have made sure the impact is small and have written a full migration guide.
 
-*  🚨`@mdx-js/tag` is replaced by `@mdx-js/react` and an `@mdx` pragma
-  — [migration guide](/migrating/v1#pragma)
-*  MDXProvider now merges component contexts when nested
-  — [migration guide](/migrating/v1#mdxprovider)
-*  React support now requires `>= 16.8` in `@mdx-js/react`
-  — [migration guide](/migrating/v1#react)
+* 🚨`@mdx-js/tag` is replaced by `@mdx-js/react` and an `@mdx` pragma
+ — [migration guide](/migrating/v1#pragma)
+* MDXProvider now merges component contexts when nested
+ — [migration guide](/migrating/v1#mdxprovider)
+* React support now requires `>= 16.8` in `@mdx-js/react`
+ — [migration guide](/migrating/v1#react)
 
 [Read the full v1 migration guide](/migrating/v1)
 
@@ -123,11 +123,11 @@ We’ve also seen projects/products/application we never even imagined.
 
 ### Numbers
 
-*  **Downloads**: 125,000/week, 2.4M total
-*  **Stars**: 6,200
-*  **Contributors**: 50
-*  **Pull requests**: 281
-*  **Commits**: 670
+* **Downloads**: 125,000/week, 2.4M total
+* **Stars**: 6,200
+* **Contributors**: 50
+* **Pull requests**: 281
+* **Commits**: 670
 
 The contributor growth is one of the most important aspects here as we have
 numerous community members that are familiar with MDX internals.
@@ -138,30 +138,30 @@ against an ever growing team of contributors.
 
 ### Ecosystem
 
-*  [Prettier](https://prettier.io)
-*  [Docz](https://docz.site)
-*  [MDX Deck](https://github.com/jxnblk/mdx-deck)
-*  [Next.js](https://nextjs.org)
-*  [Gatsby](https://gatsbyjs.org)
-*  [AST Explorer](https://astexplorer.net)
-*  [Vue support (alpha)](/docs/getting-started/#vue)
-*  [Demoboard](https://frontarm.com/demoboard/)
-*  [Editors](/docs/getting-started/#editor)
+* [Prettier](https://prettier.io)
+* [Docz](https://docz.site)
+* [MDX Deck](https://github.com/jxnblk/mdx-deck)
+* [Next.js](https://nextjs.org)
+* [Gatsby](https://gatsbyjs.org)
+* [AST Explorer](https://astexplorer.net)
+* [Vue support (alpha)](/docs/getting-started/#vue)
+* [Demoboard](https://frontarm.com/demoboard/)
+* [Editors](/docs/getting-started/#editor)
 
 ## 🛣 Roadmap
 
 With v1 released we have a roadmap in place that we’ll continue working towards
 over the next 6 months or so in addition to bug fixes and parsing issues we
 might encounter.
 
-*  MDXs: [#454](https://github.com/mdx-js/mdx/issues/454)
-*  Interleaving: [#195](https://github.com/mdx-js/mdx/issues/195)
-*  Global shortcodes: [#508](https://github.com/mdx-js/mdx/pull/508)
-*  Stable Vue support: [#238](https://github.com/mdx-js/mdx/issues/238)
-*  Blocks: MDX WYSIWYG: [blocks/blocks](https://github.com/blocks/blocks)
-*  MDX playground inspired by AST Explorer: [#220](https://github.com/mdx-js/mdx/issues/220)
-*  New splash page: [#444](https://github.com/mdx-js/mdx/issues/444)
-*  Showcase page: [#414](https://github.com/mdx-js/mdx/issues/414)
+* MDXs: [#454](https://github.com/mdx-js/mdx/issues/454)
+* Interleaving: [#195](https://github.com/mdx-js/mdx/issues/195)
+* Global shortcodes: [#508](https://github.com/mdx-js/mdx/pull/508)
+* Stable Vue support: [#238](https://github.com/mdx-js/mdx/issues/238)
+* Blocks: MDX WYSIWYG: [blocks/blocks](https://github.com/blocks/blocks)
+* MDX playground inspired by AST Explorer: [#220](https://github.com/mdx-js/mdx/issues/220)
+* New splash page: [#444](https://github.com/mdx-js/mdx/issues/444)
+* Showcase page: [#414](https://github.com/mdx-js/mdx/issues/414)
 
 ### Vue support
 
@@ -196,11 +196,11 @@ dealing with many sources of content.
 unified projects are used all over the web, and it would never be possible
 without financial support from our fine sponsors.
 
-*  [ZEIT](https://zeit.co) 🥇
-*  [Gatsby](https://gatsbyjs.org) 🥇
-*  [Holloway](https://www.holloway.com) 🥉
-*  [Backers](https://opencollective.com/unified#budget) 🏆
-*  [You?](https://opencollective.com/unified)👤
+* [ZEIT](https://zeit.co) 🥇
+* [Gatsby](https://gatsbyjs.org) 🥇
+* [Holloway](https://www.holloway.com) 🥉
+* [Backers](https://opencollective.com/unified#budget) 🏆
+* [You?](https://opencollective.com/unified)👤
 
 ## 🙏 Thanks
 

docs/blog/v2.mdx

@@ -21,17 +21,17 @@ Here are the highlights:
 {/* more */}
 
 <div className="emoji-list">
- *  📝 **Improved syntax** makes it easier to use markdown in JSX
- *  🧑‍💻 **JavaScript expressions** turn `{2 * Math.PI}` into {2 * Math.PI}
- *  🔌 New **esbuild**, **Rollup**, and **Node.js** integrations
- *  ⚛️ **Any JSX runtime**: React, Preact, Vue, Emotion, you name it, they’re
-  all supported
- *  🌳 **Improved AST** exposes more info in greater detail
- *  🏃‍♀️ Compiles at least **25% faster**
- *  🚴 Generated code runs twice as fast (**100% faster**)
- *  🚄 Bundle size of `@mdx-js/mdx` is more than three times as small
-  (**250% smaller**)
- *  🧵 …and much, so much more
+ * 📝 **Improved syntax** makes it easier to use markdown in JSX
+ * 🧑‍💻 **JavaScript expressions** turn `{2 * Math.PI}` into {2 * Math.PI}
+ * 🔌 New **esbuild**, **Rollup**, and **Node.js** integrations
+ * ⚛️ **Any JSX runtime**: React, Preact, Vue, Emotion, you name it, they’re
+ all supported
+ * 🌳 **Improved AST** exposes more info in greater detail
+ * 🏃‍♀️ Compiles at least **25% faster**
+ * 🚴 Generated code runs twice as fast (**100% faster**)
+ * 🚄 Bundle size of `@mdx-js/mdx` is more than three times as small
+ (**250% smaller**)
+ * 🧵 …and much, so much more
 </div>
 
 It’s been 4 years since this project was announced.
@@ -41,13 +41,13 @@ Let’s dive in!
 
 ## Contents
 
-*  [Improvements to the MDX format](#improvements-to-the-mdx-format)
-*  [Rollup, esbuild, and other integrations](#rollup-esbuild-and-other-integrations)
-*  [Architectural improvements](#architectural-improvements)
-*  [TypeScript](#typescript)
-*  [Docs & site](#docs--site)
-*  [Breaking changes](#breaking-changes)
-*  [Thanks](#thanks)
+* [Improvements to the MDX format](#improvements-to-the-mdx-format)
+* [Rollup, esbuild, and other integrations](#rollup-esbuild-and-other-integrations)
+* [Architectural improvements](#architectural-improvements)
+* [TypeScript](#typescript)
+* [Docs & site](#docs--site)
+* [Breaking changes](#breaking-changes)
+* [Thanks](#thanks)
 
 ## Improvements to the MDX format
 

docs/community/about.mdx

@@ -29,28 +29,28 @@ MDX solves this.
 There are many languages objectively better than markdown, however, markdown is
 great because:
 
-*  It looks like what it means and is relatively easy to read
-*  Although images are [confusing][], most stuff is relatively simple to write
-*  It’s loose and ambiguous: it may not work but you won’t get an error (great
-  for someone posting a comment to a forum if they forgot an asterisk)
+* It looks like what it means and is relatively easy to read
+* Although images are [confusing][], most stuff is relatively simple to write
+* It’s loose and ambiguous: it may not work but you won’t get an error (great
+ for someone posting a comment to a forum if they forgot an asterisk)
 
 Markdown *does* have a way to extend it, HTML, but that has drawbacks:
 
-*  HTML in markdown is naïve, how it’s parsed sometimes doesn’t make sense
-*  HTML is unsafe by default, so it’s sometimes (partially) unsupported
-*  HTML and markdown don’t mix well, resulting in confusing rules such as
-  blank lines or `markdown="1"` attributes
-*  HTML is coupled with browsers, markdown is useful for other things too
+* HTML in markdown is naïve, how it’s parsed sometimes doesn’t make sense
+* HTML is unsafe by default, so it’s sometimes (partially) unsupported
+* HTML and markdown don’t mix well, resulting in confusing rules such as
+ blank lines or `markdown="1"` attributes
+* HTML is coupled with browsers, markdown is useful for other things too
 
 The frontend world has an alternative to HTML: JSX.
 JSX is great, amongst other things, because:
 
-*  It has a relatively familiar syntax (like XML)
-*  It’s agnostic to semantics and intended for compilers (can have any
-  domain-specific meaning)
-*  It’s strict and unambiguous (great if an author forgot a slash somewhere, as
-  they’ll get an error early, instead of a book going to print with broken
-  stuff in it)
+* It has a relatively familiar syntax (like XML)
+* It’s agnostic to semantics and intended for compilers (can have any
+ domain-specific meaning)
+* It’s strict and unambiguous (great if an author forgot a slash somewhere, as
+ they’ll get an error early, instead of a book going to print with broken
+ stuff in it)
 
 ## Who governs MDX?
 
@@ -104,17 +104,17 @@ The following projects inspired `@mdx-js/*` originally:
 
 {/* Note: please keep the original project names intact: */}
 
-*  [`jamesknelson/mdxc`](https://github.com/frontarm/mdx-util)
-*  [`ticky/markdown-component-loader`](https://github.com/ticky/markdown-component-loader)
-*  [`threepointone/markdown-in-js`](https://github.com/threepointone/markdown-in-js)
-*  [`fazouane-marouane/remark-jsx`](https://github.com/remarkjs/remark-jsx)
-*  [`mapbox/remark-react`](https://github.com/remarkjs/remark-react)
-*  [`rx-ts/eslint-mdx`](https://github.com/mdx-js/eslint-mdx)
+* [`jamesknelson/mdxc`](https://github.com/frontarm/mdx-util)
+* [`ticky/markdown-component-loader`](https://github.com/ticky/markdown-component-loader)
+* [`threepointone/markdown-in-js`](https://github.com/threepointone/markdown-in-js)
+* [`fazouane-marouane/remark-jsx`](https://github.com/remarkjs/remark-jsx)
+* [`mapbox/remark-react`](https://github.com/remarkjs/remark-react)
+* [`rx-ts/eslint-mdx`](https://github.com/mdx-js/eslint-mdx)
 
 The following articles inspired `@mdx-js/*` originally:
 
-*  [IA Markdown Content Blocks](https://github.com/iainc/Markdown-Content-Blocks)
-*  [Idyll: Markup language for interactive documents](https://idyll-lang.org)
+* [IA Markdown Content Blocks](https://github.com/iainc/Markdown-Content-Blocks)
+* [Idyll: Markup language for interactive documents](https://idyll-lang.org)
 
 [what]: /docs/what-is-mdx/