Convert GFM tables to HTML so we don't need the remark-gfm plugin

docs/css-prop.mdx

@@ -14,10 +14,35 @@ There are 2 ways to get started with the `css` prop.
 Both methods result in the same compiled code.
 After adding the preset or setting the pragma as a comment, compiled jsx code will use emotion's `jsx` function instead of `React.createElement`.
 
-|        | Input                      | Output                                              |
-| ------ | -------------------------- | --------------------------------------------------- |
-| Before | `<img src="avatar.png" />` | `React.createElement('img', { src: 'avatar.png' })` |
-| After  | `<img src="avatar.png" />` | `jsx('img', { src: 'avatar.png' })`                 |
+<table>
+  <thead>
+    <tr>
+      <th></th>
+      <th>Input</th>
+      <th>Output</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Before</td>
+      <td>
+        <code>&lt;img src="avatar.png" /&gt;</code>
+      </td>
+      <td>
+        <code>React.createElement('img', &#123; src: 'avatar.png' &#125;)</code>
+      </td>
+    </tr>
+    <tr>
+      <td>After</td>
+      <td>
+        <code>&lt;img src="avatar.png" /&gt;</code>
+      </td>
+      <td>
+        <code>jsx('img', &#123; src: 'avatar.png' &#125;)</code>
+      </td>
+    </tr>
+  </tbody>
+</table>
 
 #### Babel Preset
 

package.json

@@ -29,7 +29,6 @@
   "resolutions": {
     "**/react": "16.14.0",
     "**/react-dom": "16.14.0",
-    "**/@types/react": "16.14.21",
     "**/browserslist": "^3.2.8",
     "**/graphql-type-json": "0.2.4"
   },

packages/babel-preset-css-prop/README.md

@@ -77,10 +77,27 @@ require('@babel/core').transform(code, {
 
 This preset enables the `css` prop for an entire project via a single entry to the babel configuration. After adding the preset, compiled JSX code will use Emotion's `jsx` function instead of `React.createElement`.
 
-|        | Input                      | Output                                              |
-| ------ | -------------------------- | --------------------------------------------------- |
-| Before | `<img src="avatar.png" />` | `React.createElement('img', { src: 'avatar.png' })` |
-| After  | `<img src="avatar.png" />` | `jsx('img', { src: 'avatar.png' })`                 |
+<table>
+  <thead>
+    <tr>
+      <th></th>
+      <th>Input</th>
+      <th>Output</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Before</td>
+      <td><code>&lt;img src="avatar.png" /&gt;</code></td>
+      <td><code>React.createElement('img', &#123; src: 'avatar.png' &#125;)</code></td>
+    </tr>
+    <tr>
+      <td>After</td>
+      <td><code>&lt;img src="avatar.png" /&gt;</code></td>
+      <td><code>jsx('img', &#123; src: 'avatar.png' &#125;)</code></td>
+    </tr>
+  </tbody>
+</table>
 
 `import { jsx } from '@emotion/react'` is automatically added to the top of files where required.
 

site/next.config.js

@@ -1,8 +1,6 @@
 const path = require('path')
 
 // To run bundle analyzer, set the `ANALYZE` environment variable to 'true'.
-// For example with PowerShell, run:
-// $Env:ANALYZE='true'; yarn build
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true'
 })

site/package.json

@@ -14,7 +14,13 @@
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.1.18",
+    "@next/bundle-analyzer": "^12.1.5",
+    "@types/babel__standalone": "^7.1.4",
+    "@types/js-yaml": "^4.0.5",
+    "@types/node": "^12.20.37",
     "@types/prismjs": "^1.26.0",
+    "@types/react": "^18.0.9",
+    "@types/remark-prism": "^1.3.3",
     "escape-goat": "^4.0.0",
     "facepaint": "^1.2.1",
     "gray-matter": "^4.0.3",
@@ -27,15 +33,7 @@
     "react-simple-code-editor": "^0.11.0",
     "remark-prism": "^1.3.6",
     "sharp": "^0.30.4",
+    "typescript": "^4.5.5",
     "unist-util-visit": "^4.1.0"
-  },
-  "devDependencies": {
-    "@next/bundle-analyzer": "^12.1.5",
-    "@types/babel__standalone": "^7.1.4",
-    "@types/js-yaml": "^4.0.5",
-    "@types/node": "^12.20.37",
-    "@types/react": "^18.0.9",
-    "@types/remark-prism": "^1.3.3",
-    "typescript": "^4.5.5"
   }
 }

site/pages/docs/[slug].tsx

@@ -34,7 +34,8 @@ export async function getStaticProps({ params }: GetStaticPropsContext) {
   const { title, content } = docQueries.getMdx(slug)
 
   // mdxOptions is duplicated in an attempt to prevent the client-side bundle
-  // from containing any mdx/remark JS
+  // from containing any mdx/remark JS. This is recommended by the
+  // next-mdx-remote README.
   const mdx = await serialize(content, {
     mdxOptions: {
       // remarkLiveEditor must come before remarkPrism

yarn.lock

@@ -5256,7 +5256,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@16.14.21", "@types/react@>=16", "@types/react@^18.0.9":
+"@types/react@*", "@types/react@>=16":
   version "16.14.21"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.21.tgz#35199b21a278355ec7a3c40003bd6a334bd4ae4a"
   integrity sha512-rY4DzPKK/4aohyWiDRHS2fotN5rhBSK6/rz1X37KzNna9HJyqtaGAbq9fVttrEPWF5ywpfIP1ITL8Xi2QZn6Eg==
@@ -5265,6 +5265,15 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/react@^18.0.9":
+  version "18.0.14"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.14.tgz#e016616ffff51dba01b04945610fe3671fdbe06d"
+  integrity sha512-x4gGuASSiWmo0xjDLpm5mPb52syZHJx02VKbqUKdLmKtAwIh63XClGsiTI1K6DO5q7ox4xAsQrU+Gl3+gGXF9Q==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/remark-prism@^1.3.3":
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/@types/remark-prism/-/remark-prism-1.3.3.tgz#ed001b50ee30e0ef6a782c17966f58f3e9abb3a6"
@@ -7496,7 +7505,12 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001010:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001012.tgz#653ec635e815b9e0fb801890923b0c2079eb34ec"
   integrity sha512-7RR4Uh04t9K1uYRWzOJmzplgEOAXbfK72oVNokCdMzA67trrhPzy93ahKk1AWHiA0c58tD2P+NHqxrA8FZ+Trg==
 
-caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30001283:
+caniuse-lite@^1.0.30000844:
+  version "1.0.30001361"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001361.tgz#ba2adb2527566fb96f3ac7c67698ae7fc495a28d"
+  integrity sha512-ybhCrjNtkFji1/Wto6SSJKkWk6kZgVQsDq5QI83SafsF6FXv2JB4df9eEdH6g8sdGgqTXrFLjAxqBGgYoU3azQ==
+
+caniuse-lite@^1.0.30001283:
   version "1.0.30001299"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001299.tgz#d753bf6444ed401eb503cbbe17aa3e1451b5a68c"
   integrity sha512-iujN4+x7QzqA2NCSrS5VUy+4gLmRd4xv6vbBBsmfVqTx8bLAD8097euLqQgKxSVLvxjSDcvF1T/i9ocgnUFexw==
@@ -9499,9 +9513,9 @@ ejs@^3.1.6:
     jake "^10.6.1"
 
 electron-to-chromium@^1.3.47:
-  version "1.4.46"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.46.tgz#c88a6fedc766589826db0481602a888864ade1ca"
-  integrity sha512-UtV0xUA/dibCKKP2JMxOpDtXR74zABevuUEH4K0tvduFSIoxRVcYmQsbB51kXsFTX8MmOyWMt8tuZAlmDOqkrQ==
+  version "1.4.177"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.177.tgz#b6a4436eb788ca732556cd69f384b8a3c82118c5"
+  integrity sha512-FYPir3NSBEGexSZUEeht81oVhHfLFl6mhUKSkjHN/iB/TwEIt/WHQrqVGfTLN5gQxwJCQkIJBe05eOXjI7omgg==
 
 elegant-spinner@^1.0.1:
   version "1.0.1"