ヘルプを Wiki から分離 (#424) (#430)

画面上でのテストは完了．
移行にす早さが求められるので，準備ができたらマージする．

Reviewed-on: #430
Co-authored-by: miteruzo <miteruzo@naver.com>

frontend/src/pages/help/HelpDetailPage.tsx

@@ -0,0 +1,106 @@
+import { useQuery } from '@tanstack/react-query'
+import { Helmet } from 'react-helmet-async'
+import { useLocation, useParams } from 'react-router-dom'
+
+import PrefetchLink from '@/components/PrefetchLink'
+import MainArea from '@/components/layout/MainArea'
+import { SITE_TITLE } from '@/config'
+import { getHelpArticle,
+	 getHelpEditionContent,
+	 helpEditionDate,
+	 parseHelpEdition } from '@/lib/help'
+import { dateString } from '@/lib/utils'
+import { helpKeys } from '@/lib/queryKeys'
+import NotFound from '@/pages/NotFound'
+
+import type { FC } from 'react'
+
+
+const HelpDetailPage: FC = () => {
+  const { identifier = '' } = useParams ()
+  const location = useLocation ()
+
+  // Locale 対応が入るまでは ja 固定
+  const language = 'ja'
+
+  const { data: article, isLoading: articleLoading } = useQuery ({
+      queryKey: helpKeys.article (identifier),
+      queryFn: () => getHelpArticle (identifier),
+      staleTime: Infinity })
+
+  const query = new URLSearchParams (location.search)
+  const requestedEdition = query.get ('edition')
+
+  const languageMeta = article?.languages[language]
+
+  const edition = requestedEdition ?? languageMeta?.currentEdition
+  const editionInfo = parseHelpEdition (edition ?? '')
+  const editionDate = helpEditionDate (edition ?? '')
+
+  const editions = languageMeta?.publishedEditions ?? []
+
+  const index = edition ? editions.indexOf (edition) : -1
+  const pred = index > 0 ? editions[index - 1] : undefined
+  const succ =
+      index >= 0 && index < editions.length - 1
+      ? editions[index + 1]
+      : undefined
+
+  const { data: current, isSuccess, isError } = useQuery ({
+      enabled: edition != null && editionInfo != null && editions.includes (edition),
+      queryKey: helpKeys.edition (identifier, language, edition ?? ''),
+      queryFn: () => getHelpEditionContent (identifier, language, edition ?? ''),
+      staleTime: Infinity })
+
+  if (!articleLoading
+      && (article == null
+	  || languageMeta == null
+	  || edition == null
+	  || editionInfo == null
+	  || !(editions.includes (edition))))
+    return <NotFound/>
+
+  if (isError || (isSuccess && current == null))
+    return <NotFound/>
+
+  const Content = current?.content
+
+  return (
+      <MainArea>
+	<Helmet>
+	  <title>{current?.title || identifier} ヘルプ | {SITE_TITLE}</title>
+	</Helmet>
+
+	{requestedEdition && (
+	    <div className="text-sm flex gap-3 items-center justify-center
+			    border border-gray-700 rounded px-2 py-1 mb-4">
+	      {pred
+	       ? (
+		  <PrefetchLink
+		      to={`/help/${ encodeURIComponent (identifier) }?edition=${ pred }`}>
+		    &lt; 古
+		  </PrefetchLink>)
+	       : '(最古)'}
+
+	      <span>
+		{editionDate != null && dateString (editionDate, 'hour')}
+		{editionInfo?.revision != null && ` .${ editionInfo.revision }`}
+	      </span>
+
+	      {succ
+	       ? (
+		  <PrefetchLink
+		      to={`/help/${ encodeURIComponent (identifier) }?edition=${ succ }`}>
+		    新 &gt;
+		  </PrefetchLink>)
+	       : '(最新)'}
+	    </div>)}
+
+	<article className="prose dark:prose-invert mx-auto p-4">
+	  {Content ? <Content/> : <div>Loading...</div>}
+	</article>
+      </MainArea>)
+}
+
+
+export default HelpDetailPage