Merge pull request #5 from RENCI/add-content-management

Add content management

next.config.js

@@ -1,4 +1,6 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
-
-module.exports = nextConfig;
+const withMDX = require('@next/mdx')({
+ extension: /\.mdx?$/,
+})
+module.exports = withMDX({
+ pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
+})

package.json

@@ -10,6 +10,10 @@
  "format": "prettier --write ."
  },
  "dependencies": {
+ "@mdx-js/loader": "^3.0.1",
+ "@mdx-js/react": "^3.0.1",
+ "@next/mdx": "^14.2.3",
+ "@types/mdx": "^2.0.13",
  "@types/node": "20.2.5",
  "@types/react": "18.2.7",
  "@types/react-dom": "18.2.4",

src/app/page.tsx

@@ -10,6 +10,15 @@ import { OverviewSummary } from "@/components/OverviewSummary/OverviewSummary";
 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 Funding from '../content/funding.mdx'
+import License from '../content/license.mdx'
+
+interface tools {
+ [key: string]: any;
+}
+
 
 export default function Home() {
  return (
@@ -33,44 +42,26 @@ export default function Home() {
  </Section>
  <Section title="Tools" index={1}>
  <CardContainer>
- <Card
- title="ROBOKOP KG"
- href="http://robokopkg.renci.org/"
- target="_blank"
- >
- <p>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.</p>
- </Card>
- <Card
- title="ExEmPLAR"
- href="https://www.exemplar.mml.unc.edu/"
- target="_blank"
- warning="ExEmplar is under development and should be considered an experimental alternative to the ROBOKOP UI."
- >
- <p>ExEmplar is a generic Neo4j query-and-answer exploration tool that supports queries of the ROBOKOP KG and other Neo4j databases.</p>
- </Card>
- <Card
- title="RoboDocumentation"
- href="https:/RobokopU24/RoboDocumentation/"
- target="_blank"
- >
- <p>A collection of notebooks and other documents to help users get the most out of ROBOKOP.</p>
- </Card>
+ {tools.map((tool)=>(
+ <Card
+ title={tool.title}
+ href={tool.link}
+ warning={tool.warning}
+ target="_blank"
+ >
+ <p>{tool.description}</p>
+ </Card>
+ ))}
  </CardContainer>
  </Section>
  <Section title="Resources" index={2}>
- <ul>
- <li>Resource 1</li>
- </ul>
+ <Resources />
  </Section>
  <Section title="Funding" index={3}>
- <p>
- ROBOKOP is a joint creation of the <a href="https://renci.org" target="_blank">Renaissance Computing Institute (RENCI)</a> at the <a href="https://www.unc.edu/" target="_blank">University of North Carolina at Chapel Hill</a> and <a href="https://covar.com/" target="_blank">CoVar LLC</a>. The prototype was developed with funding from the <a href="https://ncats.nih.gov/" target="_blank">National Center for Advancing Translational Sciences</a>, <a href="https://www.nih.gov/" target="_blank">National Institutes of Health</a> (award <a href="https://taggs.hhs.gov/Detail/AwardDetail?arg_AwardNum=OT2TR002514&arg_ProgOfficeCode=264" target="_blank">#OT2TR002514</a>). ROBOKOP&apos;s continued development is supported with joint funding from the <a href="https://reporter.nih.gov/search/ALIFnrPqJU6PEtxDUvY9EA/project-details/10697371?" target="_blank">National Institute of Environmental Health Sciences</a> and the <a href="https://datascience.nih.gov/about/odss" target="_blank">Office of Data Science Strategy</a> within the <a href="https://www.nih.gov/" target="_blank">National Institutes of Health</a> (award <a href="https://tools.niehs.nih.gov/portfolio/index.cfm?do=portfolio.grantDetail&grant_number=U24ES035214" target="_blank">#U24ES035214</a>).
- </p>
+ <Funding />
  </Section>
  <Section title="License" index={4}>
- <p>
- ROBOKOP is available under the <a href="https://opensource.org/license/mit/" target="_blank">MIT license</a>.
- </p>
+ <License />
  <div style={{height: '300px'}}>
 
  </div>

src/components/OverviewSummary/OverviewSummary.tsx

@@ -1,12 +1,10 @@
 import styles from "./OverviewSummary.module.css";
+import About from "../../content/about.mdx"
 
 export const OverviewSummary = () => {
  return (
- <p className={styles.summary}>
- Led by Principal Investigator Corbin Jones, professor of biology in the 
- College of Arts and Sciences, AIxB has the potential to revolutionize AI 
- for biosciences by taking a fresh look at AI technologies through the lens 
- of biology.
- </p>
+ <div className={styles.summary}>
+ <About />
+ </div>
  );
 };

src/content/about.mdx

@@ -0,0 +1 @@
+Led by Principal Investigator Corbin Jones, professor of biology in the College of Arts and Sciences, AIxB has the potential to revolutionize AI for biosciences by taking a fresh look at AI technologies through the lens of biology.

src/content/funding.mdx

@@ -0,0 +1 @@
+ROBOKOP is a joint creation of the [Renaissance Computing Institute (RENCI)](https://renci.org/) at the [University of North Carolina at Chapel Hill](https://www.unc.edu/) and [CoVar LLC](https://covar.com/). The prototype was developed with funding from the [National Center for Advancing Translational Sciences](https://ncats.nih.gov/), [National Institutes of Health](https://www.nih.gov/) (award [#OT2TR002514](https://taggs.hhs.gov/Detail/AwardDetail?arg_AwardNum=OT2TR002514&arg_ProgOfficeCode=264)). ROBOKOP's continued development is supported with joint funding from the [National Institute of Environmental Health Sciences](https://reporter.nih.gov/search/ALIFnrPqJU6PEtxDUvY9EA/project-details/10697371?) and the [Office of Data Science Strategy](https://datascience.nih.gov/about/odss) within the [National Institutes of Health](https://www.nih.gov/) (award [#U24ES035214](https://tools.niehs.nih.gov/portfolio/index.cfm?do=portfolio.grantDetail&grant_number=U24ES035214)).

src/content/license.mdx

@@ -0,0 +1 @@
+ROBOKOP is available under the [MIT license](https://opensource.org/license/mit/).

src/content/resources.mdx

@@ -0,0 +1,2 @@
+- Resource 1: description description and a link
+- Resource 2: with link

src/content/tools.mdx

@@ -0,0 +1,18 @@
+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:/RobokopU24/RoboDocumentation/",
+ description: "A collection of notebooks and other documents to help users get the most out of ROBOKOP."
+ }
+ ]

src/mdx-components.tsx

@@ -0,0 +1,7 @@
+import type { MDXComponents } from 'mdx/types'
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+ return {
+ ...components,
+ }
+}

tsconfig.json

@@ -29,7 +29,8 @@
  "**/*.ts",
  "**/*.tsx",
  ".next/types/**/*.ts",
- "**/*.d.ts"
+ "**/*.d.ts",
+ "../mdx.d.ts"
  ],
  "exclude": ["node_modules"]
 }