Merge pull request #12 from RENCI/test/frontmatter

Test/frontmatter

next.config.mjs

@@ -0,0 +1,18 @@
+import nextMdx from '@next/mdx'
+import remarkFrontmatter from 'remark-frontmatter';
+import remarkMdxFrontmatter from 'remark-mdx-frontmatter';
+
+const withMdx = nextMdx({
+  extension: /\.mdx?$/,
+  options: {
+    jsx: true,
+    remarkPlugins: [remarkFrontmatter, [remarkMdxFrontmatter, { name: 'frontmatter' }]],
+    rehypePlugins: []
+  },
+})
+
+export default withMdx({
+  output: 'export',
+  basePath: process.env.BASE_PATH ?? '',
+  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx']
+})

package.json

@@ -23,6 +23,8 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.44.3",
+    "remark-frontmatter": "^5.0.0",
+    "remark-mdx-frontmatter": "^5.0.0",
     "typescript": "5.0.4"
   },
   "devDependencies": {

src/app/page.tsx

@@ -11,12 +11,12 @@ import { Section } from "@/components/Section/Section";
 import { DataIcon } from "@/components/icons/DataIcon";
 import { QueryIcon } from "@/components/icons/QueryIcon";
 import Resources from '../content/resources.mdx'
-import { tools } from '../content/tools.mdx'
+import { frontmatter as tools } from '../content/tools.mdx'
 import Funding from '../content/funding.mdx'
 import License from '../content/license.mdx'
 import Events from '../content/events.mdx'
 
-interface Tool {
+interface Tools {
   title: string;
   link: string;
   description: string;

src/content/tools.mdx

@@ -1,18 +1,23 @@
-export const tools =  [
-    {
-      title: "ROBOKOP KG",
-      link: "http://robokopkg.renci.org/",
-      description: "ROBOKOP KG is an open-source biomedical knowledge graph containing ~10M nodes and ~250M edges drawn from ~30 biological data sources and bio-ontologies. Query the ROBOKOP KG directly in the Neo4j browser."
-    },
-    {
-      title: "ExEmPLAR",
-      link: "https://www.exemplar.mml.unc.edu/",
-      warning: "ExEmplar is under development and should be considered an experimental alternative to the ROBOKOP UI.",
-      description: "ExEmplar is a generic Neo4j query-and-answer exploration tool that supports queries of the ROBOKOP KG and other Neo4j databases."
-    },
-    {
-      title: "RoboDocumentation",
-      link: "https://github.com/RobokopU24/RoboDocumentation/",
-      description: "A collection of notebooks and other documents to help users get the most out of ROBOKOP."
-    }
-  ]
+---
+- title: "ROBOKOP KG"
+  link: "http://robokopkg.renci.org/"
+  description: >
+    ROBOKOP KG is an open-source biomedical knowledge graph 
+    containing ~10M nodes and ~250M edges drawn from ~30 
+    biological data sources and bio-ontologies. Query the 
+    ROBOKOP KG directly in the Neo4j browser.
+- title: "ExEmPLAR"
+  link: "https://www.exemplar.mml.unc.edu/"
+  warning: >
+    ExEmplar is under development and should be considered an
+    experimental alternative to the ROBOKOP UI.
+  description: >
+    ExEmplar is a generic Neo4j query-and-answer exploration 
+    tool that supports queries of the ROBOKOP KG and other 
+    Neo4j databases.
+- title: "RoboDocumentation"
+  link: "https://github.com/RobokopU24/RoboDocumentation/"
+  description: >
+    A collection of notebooks and other documents to help 
+    users get the most out of ROBOKOP.
+---

src/mdx-components.tsx

@@ -10,3 +10,10 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
     ...components,
   }
 }
+
+declare module '*.mdx' {
+  // This is the export key for the frontmatter (defined in the next.config.mjs file)
+  // If the shape of the frontmatter gets more complex, we can define a better type
+  // here or use a runtime validator like zod.
+  export const frontmatter: any;
+}