#89

frontend/src/components/WikiBody.tsx

@@ -4,13 +4,31 @@ import { useEffect, useState } from 'react'
 import ReactMarkdown from 'react-markdown'
 import { Link } from 'react-router-dom'
 
+import SectionTitle from '@/components/common/SectionTitle'
+import SubsectionTitle from '@/components/common/SubsectionTitle'
 import { API_BASE_URL } from '@/config'
 
+import type { Components } from 'react-markdown'
+
 import type { WikiPage } from '@/types'
 
 type Props = { title: string
 	       body?: string }
 
+const mdComponents = { h1:  ({ children }) => <SectionTitle>{children}</SectionTitle>,
+		       h2:  ({ children }) => <SubsectionTitle>{children}</SubsectionTitle>,
+		       ol:  ({ children }) => <ol className="list-decimal pl-6">{children}</ol>,
+		       ul:  ({ children }) => <ul className="list-disc pl-6">{children}</ul>,
+		       a:   (({ href, children }) => (
+				['/', '.'].some (e => href?.startsWith (e))
+			        ? <Link to={href!}>{children}</Link>
+			        : (
+				    <a href={href}
+				       target="_blank"
+				       rel="noopener noreferrer">
+				      {children}
+				    </a>))) } as const satisfies Components
+
 
 export default ({ title, body }: Props) => {
   const [pageNames, setPageNames] = useState<string[]> ([])
@@ -75,10 +93,7 @@ export default ({ title, body }: Props) => {
   }, [pageNames])
 
   return (
-      <ReactMarkdown components={{ a: (
-	  ({ href, children }) => (['/', '.'].some (e => href?.startsWith (e))
-				   ? <Link to={href!}>{children}</Link>
-				   : <a href={href} target="_blank" rel="noopener noreferrer">{children}</a>)) }}>
+      <ReactMarkdown components={mdComponents}>
 	{realBody || `このページは存在しません。[新規作成してください](/wiki/new?title=${ encodeURIComponent (title) })。`}
       </ReactMarkdown>)
 }