Refactor more docs

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/