Improve Markdown for static pages

src/components/StaticSites/Markdown.tsx

@@ -6,7 +6,7 @@ import rehypeKatex from 'rehype-katex'
 import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
 
-import {H1, H2, H3, Li, MarkdownLink, Ol, P, Table, Td, Th} from './Texts'
+import {H1, H2, H3, MarkdownLink, Ol, P, Table, Td, Th, Ul} from './Texts'
 
 type MarkdownProps = {
   content: string
@@ -25,8 +25,11 @@ export const Markdown: FC<MarkdownProps> = ({content}) => (
       h1: H1,
       h2: H2,
       h3: H3,
+      h4: H3,
+      h5: H3,
+      h6: H3,
       ol: Ol,
-      li: Li,
+      ul: Ul,
     }}
   >
     {content}

src/components/StaticSites/Texts.tsx

@@ -2,11 +2,11 @@ import {Typography} from '@mui/material'
 import {FC, ReactNode} from 'react'
 import {
   HeadingProps,
-  LiProps,
   OrderedListProps,
   ReactMarkdownProps,
   TableDataCellProps,
   TableHeaderCellProps,
+  UnorderedListProps,
 } from 'react-markdown/lib/ast-to-react'
 
 import {Link} from '../Clickable/Link'
@@ -45,8 +45,8 @@ export const Ol: FC<OrderedListProps> = ({children}) => (
   </Typography>
 )
 
-export const Li: FC<LiProps> = ({children}) => (
-  <Typography variant="body1" mt={1} component="li">
+export const Ul: FC<UnorderedListProps> = ({children}) => (
+  <Typography variant="body1" component="ul">
     {children}
   </Typography>
 )
@@ -58,19 +58,19 @@ export const P: FC<ReactMarkdownProps> = ({children}) => (
 )
 
 export const H1: FC<HeadingProps> = ({children}) => (
-  <Typography variant="h1" mt={10}>
+  <Typography variant="h1" mt={10} component="div">
     {children}
   </Typography>
 )
 
 export const H2: FC<HeadingProps> = ({children}) => (
-  <Typography variant="h2" mt={5}>
+  <Typography variant="h2" mt={5} component="div">
     {children}
   </Typography>
 )
 
 export const H3: FC<HeadingProps> = ({children}) => (
-  <Typography variant="h3" mt={3}>
+  <Typography variant="h3" mt={3} component="div">
     {children}
   </Typography>
 )