Fix README imports, stop crashin in ThemUIPrism

Author: hasparus

packages/docs/declarations.d.ts

@@ -2,3 +2,13 @@ declare module '!!raw-loader!*' {
   const content: string
   export default content
 }
+
+declare module '*.mdx' {
+  let MDXComponent: (props: any) => JSX.Element
+  export default MDXComponent
+}
+
+declare module '*.md' {
+  let MDXComponent: (props: any) => JSX.Element
+  export default MDXComponent
+}

packages/docs/gatsby-config.js

@@ -1,4 +1,4 @@
-const remarkGfm = require('remark-gfm')
+const remarkGfm = require('remark-gfm-1')
 const remarkSlug = require('remark-slug')
 
 module.exports = {

packages/docs/gatsby-node.js

@@ -53,7 +53,10 @@ module.exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
               loader: '@mdx-js/loader',
               /** @type {import('@mdx-js/loader').Options} */
               options: {
-                remarkPlugins: [require('remark-slug'), require('remark-gfm')],
+                remarkPlugins: [
+                  require('remark-slug'),
+                  require('remark-gfm-1'),
+                ],
               },
             },
           ],

packages/docs/package.json

@@ -57,7 +57,7 @@
     "react-dom": "^18",
     "react-helmet": "^6.1.0",
     "react-live": "^2.1.2",
-    "remark-gfm": "^3.0.1",
+    "remark-gfm-1": "npm:remark-gfm@^1.0.0",
     "remark-slug": "^6",
     "stringify-object": "^3",
     "theme-ui": "workspace:^",

packages/docs/src/components/code.js

@@ -124,7 +124,7 @@ export const LiveCode = ({ children, preview, xray }) => {
  * } | import("react").ComponentProps<typeof LiveCode>
  *   | import('@theme-ui/prism').ThemeUIPrismProps} props
  */
-const Code = (props) => {
+const CodeBlock = (props) => {
   if (props.live) {
     return <LiveCode {...props} />
   }
@@ -151,4 +151,4 @@ const Code = (props) => {
   return <Prism {...props} />
 }
 
-export default Code
+export default CodeBlock

packages/docs/src/gatsby-plugin-theme-ui/components.js

@@ -1,4 +1,4 @@
-import code from '../components/code'
+import CodeBlock from '../components/code'
 import Note from '../components/note'
 
 const heading = (Tag) => (props) =>
@@ -22,8 +22,7 @@ const heading = (Tag) => (props) =>
   )
 
 const components = {
-  code,
-  pre: (props) => props.children,
+  pre: CodeBlock,
   h2: heading('h2'),
   h3: heading('h3'),
   h4: heading('h4'),

packages/docs/src/gatsby-plugin-theme-ui/index.js

@@ -315,13 +315,10 @@ const theme = {
       variant: 'prism',
     },
     code: {
-      fontFamily: 'monospace',
-      fontSize: 1,
-    },
-    inlineCode: {
       fontFamily: 'monospace',
       color: 'secondary',
       bg: 'muted',
+      fontSize: 1,
     },
     table: {
       width: '100%',

packages/docs/src/pages/packages/color.mdx

@@ -2,6 +2,6 @@
 title: '@theme-ui/color'
 ---
 
-import Readme from '@theme-ui/color/README.md'
+import Readme from '../../../../color/README.md'
 
 <Readme />

packages/docs/src/pages/packages/components.mdx

@@ -2,6 +2,6 @@
 title: '@theme-ui/components'
 ---
 
-import Readme from '@theme-ui/components/README.md'
+import Readme from '../../../../components/README.md'
 
 <Readme />

packages/docs/src/pages/packages/css.mdx

@@ -2,6 +2,6 @@
 title: '@theme-ui/css'
 ---
 
-import Readme from '@theme-ui/css/README.md'
+import Readme from '../../../../css/README.md'
 
 <Readme />