[alan-turing][m] - fix markdown

examples/alan-turing-portal/lib/markdown.js

@@ -23,12 +23,7 @@ import { serialize } from "next-mdx-remote/serialize";
  * @returns: { mdxSource: mdxSource, frontMatter: ...}
  */
 const parse = async function (source, format) {
-  const { content, data, excerpt } = matter(source, {
+  const { content, data } = matter(source);
-    excerpt: (file, options) => {
-      // Generate an excerpt for the file
-      file.excerpt = file.content.split("\n\n")[0];
-    },
-  });
 
   const mdxSource = await serialize(
     { value: content, path: format },
@@ -56,7 +51,7 @@ const parse = async function (source, format) {
           [
             rehypeAutolinkHeadings,
             {
-              properties: { className: 'heading-link' },
+              properties: { className: "heading-link" },
               test(element) {
                 return (
                   ["h2", "h3", "h4", "h5", "h6"].includes(element.tagName) &&
@@ -91,14 +86,12 @@ const parse = async function (source, format) {
         ],
         format,
       },
-      scope: data,
     }
   );
 
   return {
     mdxSource: mdxSource,
     frontMatter: data,
-    excerpt,
   };
 };
 

examples/alan-turing-portal/package-lock.json

@@ -36,7 +36,8 @@
         "focus-visible": "^5.2.0",
         "gray-matter": "^4.0.3",
         "hastscript": "^7.2.0",
-        "mdx-mermaid": "2.0.0-rc7",
+        "mdx-mermaid": "^2.0.0-rc7",
+        "mermaid": "^10.1.0",
         "next": "13.2.1",
         "next-mdx-remote": "^4.4.1",
         "next-router-mock": "^0.9.3",
@@ -3338,7 +3339,6 @@
       "version": "7.0.10",
       "resolved": "https://registry.npmjs.org/dagre-d3-es/-/dagre-d3-es-7.0.10.tgz",
       "integrity": "sha512-qTCQmEhcynucuaZgY5/+ti3X/rnszKZhEQH/ZdWdtP1tA/y3VoHJzcVrO9pjjJCNpigfscAtoUB5ONcd2wNn0A==",
-      "peer": true,
       "dependencies": {
         "d3": "^7.8.2",
         "lodash-es": "^4.17.21"
@@ -3353,8 +3353,7 @@
     "node_modules/dayjs": {
       "version": "1.11.7",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
-      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==",
+      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
-      "peer": true
     },
     "node_modules/debug": {
       "version": "4.3.4",
@@ -3544,8 +3543,7 @@
     "node_modules/dompurify": {
       "version": "2.4.5",
       "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.5.tgz",
-      "integrity": "sha512-jggCCd+8Iqp4Tsz0nIvpcb22InKEBrGz5dw3EQJMs8HPJDsKbFIO3STYtAvCfDx26Muevn1MHVI0XxjgFfmiSA==",
+      "integrity": "sha512-jggCCd+8Iqp4Tsz0nIvpcb22InKEBrGz5dw3EQJMs8HPJDsKbFIO3STYtAvCfDx26Muevn1MHVI0XxjgFfmiSA=="
-      "peer": true
     },
     "node_modules/dot-prop": {
       "version": "5.3.0",
@@ -7533,7 +7531,6 @@
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-10.1.0.tgz",
       "integrity": "sha512-LYekSMNJygI1VnMizAPUddY95hZxOjwZxr7pODczILInO0dhQKuhXeu4sargtnuTwCilSuLS7Uiq/Qn7HTVrmA==",
-      "peer": true,
       "dependencies": {
         "@braintree/sanitize-url": "^6.0.0",
         "@khanacademy/simple-markdown": "^0.8.6",
@@ -7558,7 +7555,6 @@
       "version": "0.8.6",
       "resolved": "https://registry.npmjs.org/@khanacademy/simple-markdown/-/simple-markdown-0.8.6.tgz",
       "integrity": "sha512-mAUlR9lchzfqunR89pFvNI51jQKsMpJeWYsYWw0DQcUXczn/T/V6510utgvm7X0N3zN87j1SvuKk8cMbl9IAFw==",
-      "peer": true,
       "dependencies": {
         "@types/react": ">=16.0.0"
       },
@@ -15739,7 +15735,6 @@
       "version": "7.0.10",
       "resolved": "https://registry.npmjs.org/dagre-d3-es/-/dagre-d3-es-7.0.10.tgz",
       "integrity": "sha512-qTCQmEhcynucuaZgY5/+ti3X/rnszKZhEQH/ZdWdtP1tA/y3VoHJzcVrO9pjjJCNpigfscAtoUB5ONcd2wNn0A==",
-      "peer": true,
       "requires": {
         "d3": "^7.8.2",
         "lodash-es": "^4.17.21"
@@ -15754,8 +15749,7 @@
     "dayjs": {
       "version": "1.11.7",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
-      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==",
+      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
-      "peer": true
     },
     "debug": {
       "version": "4.3.4",
@@ -15894,8 +15888,7 @@
     "dompurify": {
       "version": "2.4.5",
       "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.5.tgz",
-      "integrity": "sha512-jggCCd+8Iqp4Tsz0nIvpcb22InKEBrGz5dw3EQJMs8HPJDsKbFIO3STYtAvCfDx26Muevn1MHVI0XxjgFfmiSA==",
+      "integrity": "sha512-jggCCd+8Iqp4Tsz0nIvpcb22InKEBrGz5dw3EQJMs8HPJDsKbFIO3STYtAvCfDx26Muevn1MHVI0XxjgFfmiSA=="
-      "peer": true
     },
     "dot-prop": {
       "version": "5.3.0",
@@ -18847,7 +18840,6 @@
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-10.1.0.tgz",
       "integrity": "sha512-LYekSMNJygI1VnMizAPUddY95hZxOjwZxr7pODczILInO0dhQKuhXeu4sargtnuTwCilSuLS7Uiq/Qn7HTVrmA==",
-      "peer": true,
       "requires": {
         "@braintree/sanitize-url": "^6.0.0",
         "@khanacademy/simple-markdown": "^0.8.6",
@@ -18872,7 +18864,6 @@
           "version": "0.8.6",
           "resolved": "https://registry.npmjs.org/@khanacademy/simple-markdown/-/simple-markdown-0.8.6.tgz",
           "integrity": "sha512-mAUlR9lchzfqunR89pFvNI51jQKsMpJeWYsYWw0DQcUXczn/T/V6510utgvm7X0N3zN87j1SvuKk8cMbl9IAFw==",
-          "peer": true,
           "requires": {
             "@types/react": ">=16.0.0"
           }

examples/alan-turing-portal/package.json

@@ -12,47 +12,46 @@
   },
   "browserslist": "defaults, not ie <= 11",
   "dependencies": {
+    "@flowershow/core": "^0.4.10",
     "@flowershow/markdowndb": "^0.1.1",
+    "@flowershow/remark-callouts": "^1.0.0",
+    "@flowershow/remark-embed": "^1.0.0",
+    "@flowershow/remark-wiki-link": "^1.1.2",
     "@headlessui/react": "^1.7.13",
+    "@heroicons/react": "^2.0.17",
     "@mapbox/rehype-prism": "^0.8.0",
     "@mdx-js/loader": "^2.1.5",
     "@mdx-js/react": "^2.1.5",
     "@next/mdx": "^13.0.2",
+    "@opentelemetry/api": "^1.4.0",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.4",
-    "autoprefixer": "^10.4.12",
-    "clsx": "^1.2.1",
-    "fast-glob": "^3.2.11",
-    "feed": "^4.2.2",
-    "flexsearch": "^0.7.31",
-    "focus-visible": "^5.2.0",
-    "next-router-mock": "^0.9.3",
-    "next-superjson-plugin": "^0.5.7",
-    "postcss-focus-visible": "^6.0.4",
-    "react-hook-form": "^7.43.9",
-    "react-markdown": "^8.0.7",
-    "superjson": "^1.12.3",
-    "tailwindcss": "^3.3.0",
-    "@flowershow/core": "^0.4.10",
-    "@flowershow/remark-callouts": "^1.0.0",
-    "@flowershow/remark-embed": "^1.0.0",
-    "@flowershow/remark-wiki-link": "^1.1.2",
-    "@heroicons/react": "^2.0.17",
-    "@opentelemetry/api": "^1.4.0",
     "@tanstack/react-table": "^8.8.5",
     "@types/node": "18.16.0",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.0",
+    "autoprefixer": "^10.4.12",
+    "clsx": "^1.2.1",
     "eslint": "8.39.0",
     "eslint-config-next": "13.3.1",
+    "fast-glob": "^3.2.11",
+    "feed": "^4.2.2",
+    "flexsearch": "^0.7.31",
+    "focus-visible": "^5.2.0",
     "gray-matter": "^4.0.3",
     "hastscript": "^7.2.0",
-    "mdx-mermaid": "2.0.0-rc7",
+    "mdx-mermaid": "^2.0.0-rc7",
+    "mermaid": "^10.1.0",
     "next": "13.2.1",
     "next-mdx-remote": "^4.4.1",
+    "next-router-mock": "^0.9.3",
+    "next-superjson-plugin": "^0.5.7",
     "papaparse": "^5.4.1",
+    "postcss-focus-visible": "^6.0.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.43.9",
+    "react-markdown": "^8.0.7",
     "react-vega": "^7.6.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-katex": "^6.0.3",
@@ -61,7 +60,9 @@
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
     "remark-smartypants": "^2.0.0",
-    "remark-toc": "^8.0.1"
+    "remark-toc": "^8.0.1",
+    "superjson": "^1.12.3",
+    "tailwindcss": "^3.3.0"
   },
   "devDependencies": {
     "eslint": "8.26.0",

examples/alan-turing-portal/pages/[...slug].jsx

@@ -1,10 +1,12 @@
 import { Container } from '../components/Container'
 import clientPromise from '../lib/mddb'
-import fs from 'fs'
+import { promises as fs } from 'fs';
 import { MDXRemote } from 'next-mdx-remote'
 import { serialize } from 'next-mdx-remote/serialize'
 import { Card } from '../components/Card'
 import Head from 'next/head'
+import parse from '../lib/markdown'
+import { Mermaid } from '@flowershow/core';
 
 export const getStaticProps = async ({ params }) => {
   const urlPath = params.slug ? params.slug.join('/') : ''
@@ -12,8 +14,8 @@ export const getStaticProps = async ({ params }) => {
   const mddb = await clientPromise
   const dbFile = await mddb.getFileByUrl(urlPath)
 
-  const source = fs.readFileSync(dbFile.file_path, { encoding: 'utf-8' })
+  const source = await fs.readFile(dbFile.file_path,'utf-8')
-  const mdxSource = await serialize(source, { parseFrontmatter: true })
+  let mdxSource = await parse(source, '.mdx')
 
   return {
     props: {
@@ -74,7 +76,7 @@ const Meta = ({keyValuePairs}) => {
 }
 
 export default function DRDPage({ mdxSource }) {
-  const meta = mdxSource.frontmatter
+  const meta = mdxSource.frontMatter
   const keyValuePairs = Object.entries(meta).filter(
     (entry) => entry[0] !== 'title'
   )
@@ -94,7 +96,7 @@ export default function DRDPage({ mdxSource }) {
             </Card>
           </header>
           <div className="prose dark:prose-invert">
-            <MDXRemote {...mdxSource} />
+            <MDXRemote {...mdxSource.mdxSource} components={{mermaid: Mermaid}} />
           </div>
         </article>
       </Container>