お知らせのMarkdownサポート + ogpタグ生成

src/frontend/pages/announcement.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNodeArray, useEffect, useState }  from 'react';
+import React, { useEffect, useState }  from 'react';
+import ReactMarkdown from 'react-markdown';
 import dayjs from 'dayjs';
 import { useParams } from 'react-router';
 import { IAnnouncement } from '../../common/types/announcement';
@@ -20,27 +21,18 @@ export const AnnouncementPage: React.VFC = () => {
 	return (
 		<article className="xarticle">
 			{!announcement ? <Skeleton width="100%" height="10rem" /> : (
-				<div className="card">
-					<div className="body">
-						<header className="mb-4">
-							<h2 className="mb-0">{announcement.title}</h2>
-							<aside className="text-dimmed">
-								<i className="bi bi-clock" />&nbsp;
-								{dayjs(announcement.createdAt).locale(lang.split('_')[0]).fromNow()}
-							</aside>
-						</header>
-						<section>
-							{(() => {
-								const res: ReactNodeArray = [];
-								announcement.body.split('\n').forEach(s => {
-									res.push(<>{s}</>);
-									res.push(<br />);
-								});
-								return res;
-							})()}
-						</section>
-					</div>
-				</div>
+				<>
+					<h2>
+						{announcement.title}
+						<aside className="inline ml-1 text-dimmed text-100">
+							<i className="bi bi-clock" />&nbsp;
+							{dayjs(announcement.createdAt).locale(lang.split('_')[0]).fromNow()}
+						</aside>
+					</h2>
+					<section>
+						<ReactMarkdown>{announcement.body}</ReactMarkdown>
+					</section>
+				</>
 			)}
 		</article>
 	);