Markdown in Learn Tab of Individuals

app/components/individual/data.ts

@@ -49,6 +49,19 @@ export function requestIndividualParquetFn(id: string) {
   };
 }
 
+export async function requestIndividualMdFn(id: string): Promise<string> {
+  const url = `${process.env.DATA_API}/data/${id}/${id}.md`;
+  try {
+    const response = await fetch(url);
+    if (!response.ok) throw new Error(`Failed to load the md file for id tag "${id}".`);
+    const text = await response.text();
+    return text;
+  } catch (error) {
+    console.error(error);
+    return 'Failed to load content.';
+  }
+}
+
 export function requestIndividualArrowFn(id: string) {
   return async () => {
     const url = `${process.env.DATA_API}/data/${id}/${id}_healpix.parquet`;

app/components/individual/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import {
   Box,
   Flex,
@@ -18,7 +18,7 @@ import {
 } from '@devseed-ui/collecticons-chakra';
 import { useQuery } from '@tanstack/react-query';
 
-import { requestIndividualArrowFn } from './data';
+import { requestIndividualArrowFn, requestIndividualMdFn } from './data';
 import { useDaySelect } from './utils';
 
 import SmartLink from '$components/common/smart-link';
@@ -33,6 +33,8 @@ import { changeValue } from '$utils/format';
 import { useRafEffect } from '$utils/use-raf-effect-hook';
 import { StringChart } from '$components/common/chart-string';
 import { getPDFColorLegend } from '$utils/data/color';
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 
 interface SpeciesComponentProps {
   params: {
@@ -50,6 +52,15 @@ export default function Component(props: SpeciesComponentProps) {
 
   const [isAnimating, setIsAnimating] = useState<boolean>(false);
   const { setCurrentPDFIndex } = useIndividualContext();
+  const [mdContent, setMdContent] = useState('Loading content...');
+
+  useEffect(() => {
+    const fetchMd = async () => {
+      const content = await requestIndividualMdFn(id);
+      setMdContent(content);
+    };
+    fetchMd();
+  }, [id]);
 
   const { data, isSuccess, error } = useQuery<
     IndividualListed[],
@@ -205,7 +216,7 @@ export default function Component(props: SpeciesComponentProps) {
             )}
           </TabPanel>
           <TabPanel>
-            <p>two!</p>
+            <Markdown remarkPlugins={[remarkGfm]}>{mdContent}</Markdown>
           </TabPanel>
         </TabPanels>
       </Tabs>

package.json

@@ -98,6 +98,8 @@
     "react-cool-dimensions": "^3.0.1",
     "react-dom": "^18.2.0",
     "react-map-gl": "^7.1.7",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
     "threads": "^1.7.0",
     "use-pan-and-zoom": "^0.6.5",
     "wouter": "^3.3.5"