Merge pull request #239 from microbiomedata/issue-199-guide-content-r…

…efresh

Refresh Guide tab content

src/Router.tsx

@@ -4,7 +4,6 @@ import { IonRouterOutlet } from "@ionic/react";
 import { Redirect, Route } from "react-router-dom";
 import TokenPage from "./pages/TokenPage/TokenPage";
 import WelcomePage from "./pages/WelcomePage/WelcomePage";
-import ChecklistPage from "./pages/ChecklistPage/ChecklistPage";
 import AuthRoute from "./components/AuthRoute/AuthRoute";
 import HomePage from "./pages/HomePage/HomePage";
 import StudyViewPage from "./pages/StudyViewPage/StudyViewPage";
@@ -34,9 +33,6 @@ const Router: React.FC = () => {
         <Route exact path={paths.welcome}>
           <WelcomePage />
         </Route>
-        <Route exact path={paths.checklist}>
-          <ChecklistPage />
-        </Route>
 
         {/*
         TAB ROUTES

src/components/Markdown/Markdown.module.css

@@ -0,0 +1,29 @@
+.markdown {
+  font-size: var(--nmdc-font-size-sm);
+  line-height: 1.5;
+
+  a {
+    text-decoration: none;
+  }
+
+  ul {
+    padding-inline-start: 1.25em;
+  }
+
+  li {
+    margin: 10px 0;
+  }
+
+  li::marker {
+    color: var(--ion-color-primary);
+    font-size: 1.25em;
+    line-height: 0;
+  }
+
+  blockquote {
+    margin: 0;
+    border-left: 4px solid var(--ion-color-primary);
+    padding-left: 1em;
+    opacity: 0.8;
+  }
+}

src/components/Markdown/Markdown.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import SectionHeader, { Variant } from "../SectionHeader/SectionHeader";
+import ReactMarkdown from "react-markdown";
+
+import styles from "./Markdown.module.css";
+
+interface MarkdownProps {
+  /** The markdown content to render. */
+  children: string;
+
+  /** A CSS class name to apply to the container element */
+  className?: string;
+}
+
+const Markdown: React.FC<MarkdownProps> = ({ children, className }) => {
+  return (
+    <ReactMarkdown
+      className={`ion-padding ${styles.markdown} ${className}`}
+      components={{
+        h1: ({ children }) => (
+          <SectionHeader variant={Variant.NoMargin}>{children}</SectionHeader>
+        ),
+        blockquote: ({ children }) => (
+          <blockquote className={styles.blockquote}>{children}</blockquote>
+        ),
+      }}
+    >
+      {children}
+    </ReactMarkdown>
+  );
+};
+
+export default Markdown;

src/components/SectionHeader/SectionHeader.tsx

@@ -4,6 +4,7 @@ import styles from "./SectionHeader.module.css";
 export enum Variant {
   Default, // receives default styling
   WithinListHeader, // receives custom styling that compensates for `<IonListHeader>` styling
+  NoMargin, // receives no margin
 }
 
 interface Props extends HTMLAttributes<PropsWithChildren> {
@@ -17,12 +18,19 @@ const SectionHeader: React.FC<Props> = ({
   variant = Variant.Default,
 }) => {
   // Customize the `className` value based upon the specified variant.
-  let classNameVal = `${styles.header} ion-margin ${className}`;
-  if (variant === Variant.WithinListHeader) {
-    classNameVal = `${styles.header} ${styles.withinListHeader} ${className}`;
+  const classNameSet = new Set([styles.header]);
+  if (className) {
+    classNameSet.add(className);
+  }
+  if (variant === Variant.Default) {
+    classNameSet.add("ion-margin");
+  } else if (variant === Variant.WithinListHeader) {
+    classNameSet.add(styles.withinListHeader);
+  } else if (variant === Variant.NoMargin) {
+    classNameSet.add("ion-no-margin");
   }
 
-  return <div className={classNameVal}>{children}</div>;
+  return <div className={[...classNameSet].join(" ")}>{children}</div>;
 };
 
 export default SectionHeader;

src/pages/GuidePage/GuidePage.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import { IonContent, IonHeader, IonPage, IonTitle } from "@ionic/react";
-import Checklist from "../../components/Checklist/Checklist";
 import ThemedToolbar from "../../components/ThemedToolbar/ThemedToolbar";
+import Markdown from "../../components/Markdown/Markdown";
+
+import guidePageMd from "./md/guide-page.md?raw";
 
 const GuidePage: React.FC = () => {
   return (
@@ -12,7 +14,7 @@ const GuidePage: React.FC = () => {
         </ThemedToolbar>
       </IonHeader>
       <IonContent>
-        <Checklist />
+        <Markdown>{guidePageMd}</Markdown>
       </IonContent>
     </IonPage>
   );