Rework Documentation pages to make use of MDX (#264)

* reorganize and update links and content in C2M2 docs (#167)
* convert all docs to MDX
* improve MDX styling and rendering

drc-portals/app/info/documentation/C2M2/[doc]/page.tsx

@@ -1,7 +1,8 @@
 import { Grid } from "@mui/material";
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from "remark-gfm"
-import { fetchC2m2Markdown, LinkRenderer, HeadingRenderer } from '@/components/misc/ReactMarkdownRenderers'
+import { fetchC2m2Markdown } from "@/components/misc/ExternalC2m2";
+import {  LinkRenderer } from '@/components/misc/ReactMarkdownRenderers'
 
 export default async function StandardsPage(
   { params } : { params: { doc: string } }
@@ -25,9 +26,17 @@ export default async function StandardsPage(
     }
 
     const suffix = fixProblematic(params.doc)
-    const markdown = await fetchC2m2Markdown(suffix)
-    const title = '# ' + suffix.split('-')[1].split('.md')[0] + '\n\n'
-    const source = '*Sourced from the [CFDE Coordination Center Documentation Wiki](https://github.com/nih-cfde/published-documentation/wiki/' + params.doc + ')*\n\n'
+    let markdown = await fetchC2m2Markdown(suffix)
+    markdown = markdown
+      .replaceAll('https://docs.nih-cfde.org/en/latest/c2m2', 'https://github.com/nih-cfde/c2m2/blob/master')
+      .replaceAll('./C2M2-Table-Summary', './#c2m2-tables')
+      .replaceAll('osf.io/vzgx9', 'osf.io/3sra4')
+      .replaceAll('./submission-prep-script', './#submission-prep-script')
+    const title = suffix.includes('_') ? 
+      `# ${suffix.split("-")[1].split(".md")[0]}\n\n` : `# ${suffix.split(".md")[0].replaceAll("-"," ")}\n\n`
+    const source = '*Sourced from the [CFDE-CC Documentation Wiki]'
+      + '(https://github.com/nih-cfde/published-documentation/wiki/' 
+      + params.doc + ')*\n\n'
     return (
       <Grid container sx={{ml:3, mt:3}}>
         <Grid item sx={{mb:5}}>
@@ -36,16 +45,12 @@ export default async function StandardsPage(
             skipHtml
             remarkPlugins={[remarkGfm]}
             components={{ 
-              a: LinkRenderer,
-              h2: HeadingRenderer,
-              h3: HeadingRenderer
+              a: LinkRenderer
           }} className="prose">
             {''.concat(
               title,
               source,
-              markdown
-                .replaceAll('https://docs.nih-cfde.org/en/latest/c2m2', 'https://github.com/nih-cfde/c2m2/blob/master')
-                .replaceAll('./C2M2-Table-Summary', './#c2m2-tables'),
+              markdown,
               '\n#### Return to [C2M2 Documentation](./)' 
             )}
           </ReactMarkdown>

drc-portals/app/info/documentation/C2M2/page.tsx

@@ -1,67 +1,22 @@
-import { Grid, Typography } from "@mui/material";
-import ReactMarkdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
-import { fetchC2m2Markdown, LinkRenderer, HeadingRenderer } from '@/components/misc/ReactMarkdownRenderers'
-import { readFileSync } from 'fs'
+import { Grid, Toolbar } from "@mui/material";
+import ScrollToTop from "@/components/misc/ScrollToTop";
+import C2M2 from '../markdown/C2M2.mdx';
+import { H2Renderer, LinkRenderer } from "@/components/misc/ReactMarkdownRenderers";
+import React from "react";
 
-const toc = `
-## Table of Contents
-* [Introduction](#introduction)
-* [Resources](#resources)
-* [Frictionless Data Packages](#frictionless-data-packages)
-* [Identifiers](#identifiers)
-* [C2M2 Tables](#c2m2-tables)
-* [Submission Prep Script](#submission-prep-script)
-* [General Steps](#general-steps)
-* [Tutorial](#tutorial)
-`
-
-export default async function C2M2Page() {
-  const intro = readFileSync(
-    'app/info/documentation/markdown/C2M2-intro.md', 
-    {encoding:'utf8', flag:'r'}
-  ) 
-  const c2m2Tables = await fetchC2m2Markdown(
-    'C2M2-Table-Summary.md'
-  )
-  const submissionPrep = await fetchC2m2Markdown(
-    'submission-prep-script.md'
-  )
-  const tutorial = readFileSync(
-    'app/info/documentation/markdown/C2M2-tutorial.md', 
-    {encoding:'utf8', flag:'r'}
-  )
+export default function C2M2Page() {
+  const props = {
+    components: {
+      a: LinkRenderer,
+      h2: H2Renderer
+    }
+  }
   return (
     <Grid container sx={{ml:3, mt:3}}>
-      <Grid item xs={12}>
-        <Typography variant="h1" color="secondary.dark">C2M2</Typography>
-      </Grid>
       <Grid item sx={{mb:5}}>
-        <br/>
-        <ReactMarkdown 
-          skipHtml
-          remarkPlugins={[remarkGfm]}
-          components={{ 
-            a: LinkRenderer,
-            h2: HeadingRenderer,
-            h3: HeadingRenderer
-        }} className="prose">
-          {''.concat(
-            toc, // table of contents
-            intro, // intro
-            c2m2Tables
-              .replaceAll('./', './C2M2/')
-              .replaceAll('/submission-prep-script', '#submission-prep-script'), // C2M2 table descriptions from original docs
-            '\n## Submission Prep Script\n',
-            '*Sourced from the [CFDE Coordination Center Documentation Wiki](https://github.com/nih-cfde/published-documentation/wiki/submission-prep-script)*\n',
-            submissionPrep
-              .replace('## Overview', '')
-              .replace('## Usage', '## General Steps')
-              .split('This script is under')[0], 
-            tutorial, // overview of steps
-            '\n#### Return to [Documentation](./)'
-          )}
-        </ReactMarkdown>
+        <Toolbar variant="dense" disableGutters sx={{ minHeight:20, height:20 }} id="back-to-top-anchor" />
+        {C2M2(props)}
+        <ScrollToTop />
       </Grid>
     </Grid>
   )

drc-portals/app/info/documentation/[doc]/page.tsx

@@ -1,39 +1,43 @@
-import { Grid, Typography } from "@mui/material";
-import ReactMarkdown from 'react-markdown'
-import { LinkRenderer, HeadingRenderer } from '@/components/misc/ReactMarkdownRenderers'
-import path from 'path'
-import { readFileSync } from 'fs'
+import { Grid, Toolbar } from "@mui/material";
+import ScrollToTop from "@/components/misc/ScrollToTop";
+import { H2Renderer, H3Renderer, LinkRenderer } from '@/components/misc/ReactMarkdownRenderers'
+import dynamic from 'next/dynamic'
+import { notFound } from "next/navigation";
 
-const title_map: { [ key: string ]: string }= {
-  'OpenAPI': 'OpenAPI and SmartAPI',
-  'PWBMetanodes': 'Playbook Workflow Builder',
-  'KGAssertions': 'Data Distillery Knowledge Graph Assertions'
+const pageMap : { [ key: string ] : Function } = {
+  'FAIRshake': dynamic(() => import('../markdown/FAIRshake.mdx')),
+  'OpenAPI': dynamic(() => import('../markdown/OpenAPI.mdx')),
+  'PWBMetanodes': dynamic(() => import('../markdown/PWBMetanodes.mdx')),
+  'KGAssertions': dynamic(() => import('../markdown/KGAssertions.mdx'))
 }
 
 export default function StandardsPage(
   { params } : { params: { doc: string } }
 ) {
-  const markdown = readFileSync(
-    path.resolve('app/info/documentation/markdown', './doc.md'.replace('doc', params.doc)), 
-    {encoding:'utf8', flag:'r'}
-  )
-  var title = (params.doc in title_map) ? title_map[params.doc] : params.doc
-  return (
-    <Grid container sx={{ml:3, mt:3}}>
-      <Grid item xs={12}>
-        <Typography variant="h1" color="secondary.dark">{title}</Typography>
+  if (params.doc in pageMap) {
+    const props = {
+      components: {
+        a: LinkRenderer,
+        h2: H2Renderer,
+        h3: H3Renderer
+      }
+    }
+    return (
+      <Grid container sx={{ml:3, mt:3}}>
+        <Grid item sx={{mb:5}}>
+          <Toolbar 
+            variant="dense" 
+            disableGutters 
+            sx={{ minHeight:20, height:20 }} 
+            id="back-to-top-anchor" />
+          {pageMap[params.doc](props)}
+        <ScrollToTop />
+        </Grid>
       </Grid>
-      <Grid item sx={{mb:5}}>
-        <br/>
-        <ReactMarkdown 
-          components={{ 
-            a: LinkRenderer,
-            h2: HeadingRenderer,
-            h3: HeadingRenderer
-        }} className="prose">
-          {markdown}
-        </ReactMarkdown>
-      </Grid>
-    </Grid>
-  )
+    )
+  } else {
+    return (
+      notFound()
+    )
+  }
 }