MJS Hack to GFM to get tables to work

Riverscapes · Dec 14, 2023 · 82a9a30 · 82a9a30
1 parent 6496119
commit 82a9a30
Show file tree

Hide file tree

Showing 6 changed files with 344 additions and 9 deletions.
diff --git a/sites/devsite/content/page/demo.mdx b/sites/devsite/content/page/demo.mdx
@@ -216,7 +216,7 @@ If you need a bit more control you can use the `<RSStaticImage />` HTML syntax.
 
 - **Float**: You can add a `float` attribute to float the image to the `left` or `right`. This is useful for text wrapping. 
     - ***NOTE: Float is ignored if `noWrap` is used***
-    - Floats are sometimes hard to work with and can be unpredictable. If you need a clearing element use a horizotal rule `------------`
+    - Floats are sometimes hard to work with and can be unpredictable. Headers (i.e. `#`, `##`, `###`), Dividers (`---`), and lists (`*`, `1.`, `-`) will clear the float.
     - Floats will revert to full width on mobile screens.
 
 ```typescript
@@ -275,6 +275,7 @@ Or if you need a bit more control you can use the `<RSStaticImage />` HTML synta
 
 # Markdown StyleGuide
 
+```markdown
 ## Headers
 
 # H1 Header
@@ -297,6 +298,56 @@ Paragraph2 In amet excepteur non labore anim pariatur nostrud ad consequat quis
 
 Paragraph3 Elit labore aliquip exercitation dolor voluptate reprehenderit occaecat esse Lorem consectetur ad. Occaecat non esse velit in. Qui aute eu elit consectetur duis anim sunt cupidatat. Elit aliquip dolor ex commodo anim. Nulla Lorem sit et aute velit officia aute adipisicing. Adipisicing esse eiusmod nulla elit exercitation laborum. Consectetur cillum sint adipisicing laborum ex aute et dolor labore amet in in dolore.
 
+* List item 1
+* List item 2
+
+1. List item 1
+1. List item 2
+
+| Header 1 | Header2  | Header 3   |
+|--------------|------|---|
+|Row1 Column1 | Row1 Column2 | Row1 Column3 |
+|Row2 Column1 | Row2 Column2 | Row2 Column3 |
+|Row3 Column1 | Row3 Column2 | Row3 Column3 |
+|Row4 Column1 | Row4 Column2 | Row4 Column3 |
+```
+
+
+## Headers
+
+# H1 Header
+
+## H2 Header
+
+### H3 Header
+
+#### H4 Header
+
+##### H5 Header
+
+###### H6 Header
+
+> Blockquote Et ullamco dolor anim magna dolor aliquip enim consequat ut minim aliqua ea.
+
+Paragraph1 Veniam est commodo sit cillum anim ipsum velit culpa id veniam. Sint aute dolor excepteur eu commodo minim reprehenderit amet reprehenderit esse ea. Eu Lorem consectetur sint id aute ex cillum aliqua laborum aute deserunt ipsum. Deserunt ullamco Lorem deserunt commodo consequat magna ea id.
+
+Paragraph2 In amet excepteur non labore anim pariatur nostrud ad consequat quis nostrud ea ullamco occaecat. Ad mollit cillum occaecat est laborum eu. Nostrud quis officia cillum qui proident aliqua deserunt voluptate culpa ad dolor irure cupidatat esse. Qui nulla duis esse velit. Reprehenderit laboris labore ea do minim anim aliqua elit occaecat voluptate duis excepteur dolore est.
+
+Paragraph3 Elit labore aliquip exercitation dolor voluptate reprehenderit occaecat esse Lorem consectetur ad. Occaecat non esse velit in. Qui aute eu elit consectetur duis anim sunt cupidatat. Elit aliquip dolor ex commodo anim. Nulla Lorem sit et aute velit officia aute adipisicing. Adipisicing esse eiusmod nulla elit exercitation laborum. Consectetur cillum sint adipisicing laborum ex aute et dolor labore amet in in dolore.
+
+* List item 1
+* List item 2
+
+1. List item 1
+1. List item 2
+
+| Header 1 | Header2  | Header 3   |
+|--------------|------|---|
+|Row1 Column1 | Row1 Column2 | Row1 Column3 |
+|Row2 Column1 | Row2 Column2 | Row2 Column3 |
+|Row3 Column1 | Row3 Column2 | Row3 Column3 |
+|Row4 Column1 | Row4 Column2 | Row4 Column3 |
+
 ----------------
 
 ## Youtube embeds

diff --git a/sites/devsite/content/page/table.mdx b/sites/devsite/content/page/table.mdx
@@ -0,0 +1,13 @@
+---
+title: table test
+banner: true
+---
+
+This is a table
+
+| Header 1 | Header2  | Header 3   |
+|--------------|------|---|
+|Row1 Column1 | Row1 Column2 | Row1 Column3 |
+|Row2 Column1 | Row2 Column2 | Row2 Column3 |
+|Row3 Column1 | Row3 Column2 | Row3 Column3 |
+|Row4 Column1 | Row4 Column2 | Row4 Column3 |
diff --git a/theme/gatsby-config.js → theme/gatsby-config.mjs b/theme/gatsby-config.js → theme/gatsby-config.mjs
@@ -1,7 +1,11 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const path = require(`path`)
+import path from 'path'
+import remarkGfm from 'remark-gfm'
+import { fileURLToPath } from 'url'
 
-module.exports = ({ contentPath, manifest }) => {
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+const config = ({ contentPath, manifest }) => {
   const srcRoot = path.resolve(path.join(__dirname))
   if (!contentPath) throw new Error('contentPath is required')
   if (!manifest) throw new Error('manifest is required')
@@ -29,6 +33,11 @@ module.exports = ({ contentPath, manifest }) => {
       {
         resolve: `gatsby-plugin-mdx`,
         options: {
+          mdxOptions: {
+            // NOTE: DO NOT UPDATE REMARK TO VERSION 4 UNTIL YOU TEST TABLES
+            // https://github.com/storybookjs/storybook/issues/24743#issuecomment-1799810754
+            remarkPlugins: [remarkGfm],
+          },
           gatsbyRemarkPlugins: [
             {
               resolve: `gatsby-remark-images`,
@@ -88,3 +97,5 @@ module.exports = ({ contentPath, manifest }) => {
     ],
   }
 }
+
+export default config
diff --git a/theme/package.json b/theme/package.json
@@ -30,7 +30,8 @@
     "gatsby-transformer-remark": "^6.10.0",
     "gatsby-transformer-sharp": "^5.10.0",
     "loglevel": "^1.8.1",
-    "prismjs": "^1.29.0"
+    "prismjs": "^1.29.0",
+    "remark-gfm": "^3.0.0"
   },
   "peerDependencies": {
     "gatsby": "^5.10.0",

diff --git a/theme/src/components/MDXRender.tsx b/theme/src/components/MDXRender.tsx
@@ -1,6 +1,21 @@
 import React from 'react'
 import { MDXProvider } from '@mdx-js/react'
-import { Box, Divider, Stack, Grid, Typography, useTheme, Alert } from '@mui/material'
+import {
+  Box,
+  Divider,
+  Stack,
+  Grid,
+  Typography,
+  useTheme,
+  Alert,
+  TableContainer,
+  Table,
+  TableRow,
+  TableCell,
+  TableHead,
+  TableBody,
+  TableFooter,
+} from '@mui/material'
 import 'prismjs/themes/prism-dark.css'
 import Button from './RSLinkButton'
 import { RSLink } from './RSLink'
@@ -37,6 +52,7 @@ const MDXRender: React.FC<React.PropsWithChildren> = ({ children }) => {
   const hStyles = {
     mt: 8,
     mb: 6,
+    clear: 'both',
     '&:hover': {
       '& .header-link-icon': {
         display: 'block',
@@ -125,6 +141,24 @@ const MDXRender: React.FC<React.PropsWithChildren> = ({ children }) => {
               }}
             />
           ),
+          ul: ({ children }) => (
+            <ul
+              style={{
+                clear: 'both',
+              }}
+            >
+              {children}
+            </ul>
+          ),
+          ol: ({ children }) => (
+            <ol
+              style={{
+                clear: 'both',
+              }}
+            >
+              {children}
+            </ol>
+          ),
           li: ({ children }) => (
             <Typography
               component="li"
@@ -153,6 +187,29 @@ const MDXRender: React.FC<React.PropsWithChildren> = ({ children }) => {
               {children}
             </Typography>
           ),
+          table: ({ children }) => (
+            <TableContainer
+              sx={{
+                clear: 'both',
+              }}
+            >
+              <Table>{children}</Table>
+            </TableContainer>
+          ),
+          thead: ({ children }) => <TableHead>{children}</TableHead>,
+          tbody: ({ children }) => <TableBody>{children}</TableBody>,
+          tfoot: ({ children }) => <TableFooter>{children}</TableFooter>,
+          tr: ({ children }) => (
+            <TableRow
+              style={{
+                clear: 'both',
+              }}
+            >
+              {children}
+            </TableRow>
+          ),
+          td: ({ children }) => <TableCell>{children}</TableCell>,
+          th: ({ children }) => <TableCell sx={{ fontWeight: 'bold' }}>{children}</TableCell>,
           '*': ({ children }) => (
             <Typography
               component="span"
@@ -169,11 +226,11 @@ const MDXRender: React.FC<React.PropsWithChildren> = ({ children }) => {
           // Any last-minute style injection can happen here
           sx={{
             // Inline code blocks need some tweaking from what prismjs gives us
-            '& code.language-text': {
+            '& :not(pre) > code[class*="language-"]': {
               color: '#555577',
               fontSize: '0.9em',
               fontFamily: '"JetBrains Mono", "Courier New", sans-serif',
-              background: '#44444444',
+              backgroundColor: '#44444444',
               border: '1px solid #2a2a2a',
               px: 1,
               mx: 0.5,