[alan-turing][m] - small tweaks

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

@@ -23,7 +23,12 @@ import { serialize } from "next-mdx-remote/serialize";
  * @returns: { mdxSource: mdxSource, frontMatter: ...}
  */
 const parse = async function (source, format) {
-  const { content, data } = matter(source);
+  const { content, data, excerpt } = 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 },
@@ -51,7 +56,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) &&
@@ -86,12 +91,14 @@ const parse = async function (source, format) {
         ],
         format,
       },
+      scope: data,
     }
   );
 
   return {
     mdxSource: mdxSource,
     frontMatter: data,
+    excerpt,
   };
 };
 

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

@@ -36,8 +36,7 @@
         "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",
@@ -3339,6 +3338,7 @@
       "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,7 +3353,8 @@
     "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",
@@ -3543,7 +3544,8 @@
     "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",
@@ -7531,6 +7533,7 @@
       "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",
@@ -7555,6 +7558,7 @@
       "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"
       },
@@ -15735,6 +15739,7 @@
       "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"
@@ -15749,7 +15754,8 @@
     "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",
@@ -15888,7 +15894,8 @@
     "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",
@@ -18840,6 +18847,7 @@
       "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",
@@ -18864,6 +18872,7 @@
           "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,46 +12,47 @@
   },
   "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",
-    "@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",
-    "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",
+    "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",
+    "eslint": "8.39.0",
+    "eslint-config-next": "13.3.1",
+    "gray-matter": "^4.0.3",
+    "hastscript": "^7.2.0",
+    "mdx-mermaid": "2.0.0-rc7",
+    "next": "13.2.1",
+    "next-mdx-remote": "^4.4.1",
+    "papaparse": "^5.4.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-vega": "^7.6.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-katex": "^6.0.3",
@@ -60,9 +61,7 @@
     "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,12 +1,10 @@
 import { Container } from '../components/Container'
 import clientPromise from '../lib/mddb'
-import { promises as fs } from 'fs';
+import 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('/') : ''
@@ -14,8 +12,8 @@ export const getStaticProps = async ({ params }) => {
   const mddb = await clientPromise
   const dbFile = await mddb.getFileByUrl(urlPath)
 
-  const source = await fs.readFile(dbFile.file_path,'utf-8')
+  const source = fs.readFileSync(dbFile.file_path, { encoding: 'utf-8' })
-  let mdxSource = await parse(source, '.mdx')
+  const mdxSource = await serialize(source, { parseFrontmatter: true })
 
   return {
     props: {
@@ -76,7 +74,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'
   )
@@ -96,7 +94,7 @@ export default function DRDPage({ mdxSource }) {
             </Card>
           </header>
           <div className="prose dark:prose-invert">
-            <MDXRemote {...mdxSource.mdxSource} components={{mermaid: Mermaid}} />
+            <MDXRemote {...mdxSource} />
           </div>
         </article>
       </Container>