Add Markdown component for Posts

src/components/Posts/Post.tsx

@@ -6,6 +6,7 @@ import {useSeminarInfo} from '@/utils/useSeminarInfo'
 
 import {Button} from '../Clickable/Button'
 import {Link} from '../Clickable/Link'
+import {PostMarkdown} from './PostMarkdown'
 
 export interface IPost {
   id: number
@@ -66,9 +67,7 @@ export const Post: FC<IPost> = ({caption, short_text, links, details, sites, add
           <Typography variant="postTitle" textTransform="uppercase" fontStyle="italic">
             {caption}
           </Typography>
-          <Typography variant="postBody" fontWeight={300} sx={{whiteSpace: 'pre-line'}}>
-            {details}
-          </Typography>
+          <PostMarkdown content={details} />
         </Stack>
       )}
     </Stack>

src/components/Posts/PostMarkdown.tsx

@@ -0,0 +1,35 @@
+import 'katex/dist/katex.min.css'
+
+import {FC} from 'react'
+import ReactMarkdown from 'react-markdown'
+import rehypeKatex from 'rehype-katex'
+import remarkGfm from 'remark-gfm'
+import remarkMath from 'remark-math'
+
+import {Header, MarkdownLink, Ol, Paragraph, Ul} from './PostMarkdownTexts'
+
+type PostMarkdownProps = {
+  content: string
+}
+
+export const PostMarkdown: FC<PostMarkdownProps> = ({content}) => (
+  <ReactMarkdown
+    remarkPlugins={[remarkGfm, remarkMath]}
+    rehypePlugins={[rehypeKatex]}
+    components={{
+      a: MarkdownLink,
+      p: Paragraph,
+      h1: Header,
+      h2: Header,
+      h3: Header,
+      h4: Header,
+      h5: Header,
+      h6: Header,
+      ol: Ol,
+      ul: Ul,
+    }}
+    disallowedElements={['table']}
+  >
+    {content}
+  </ReactMarkdown>
+)

src/components/Posts/PostMarkdownTexts.tsx

@@ -0,0 +1,40 @@
+import {Typography} from '@mui/material'
+import {FC, ReactNode} from 'react'
+import {HeadingProps, OrderedListProps, ReactMarkdownProps, UnorderedListProps} from 'react-markdown/lib/ast-to-react'
+
+import {Link} from '../Clickable/Link'
+
+type MarkdownLinkProps = {
+  children: ReactNode[]
+  href?: string
+}
+
+export const MarkdownLink: FC<MarkdownLinkProps> = ({children, href}) => (
+  <Link href={href}>
+    <Typography variant="postBody">{children}</Typography>
+  </Link>
+)
+
+export const Ol: FC<OrderedListProps> = ({children}) => (
+  <Typography variant="postBody" component="ol">
+    {children}
+  </Typography>
+)
+
+export const Ul: FC<UnorderedListProps> = ({children}) => (
+  <Typography variant="postBody" component="ul">
+    {children}
+  </Typography>
+)
+
+export const Paragraph: FC<ReactMarkdownProps> = ({children}) => (
+  <Typography variant="postBody" mt={1} component="div">
+    {children}
+  </Typography>
+)
+
+export const Header: FC<HeadingProps> = ({children}) => (
+  <Typography variant="postBody" mt={1} component="div" fontWeight={800}>
+    {children}
+  </Typography>
+)