みてるぞ
eb975e5301
Merge branch 'main' into feature/140 #140 Merge remote-tracking branch 'origin/main' into feature/140 #140 #140 #140 #140 #140 Merge remote-tracking branch 'origin/main' into feature/140 #140 #140 #140 #140 #140 #140 #140 #140 #140 #140 #140 Merge remote-tracking branch 'origin/main' into feature/140 Merge remote-tracking branch 'origin/main' into feature/140 #140 ぼちぼち Merge remote-tracking branch 'origin/main' into feature/140 #140 #140 #140 Co-authored-by: miteruzo <miteruzo@naver.com> Reviewed-on: #256
49 lines
1.9 KiB
TypeScript
49 lines
1.9 KiB
TypeScript
import { useQuery } from '@tanstack/react-query'
|
|
import { useMemo } from 'react'
|
|
import ReactMarkdown from 'react-markdown'
|
|
import remarkGFM from 'remark-gfm'
|
|
|
|
import PrefetchLink from '@/components/PrefetchLink'
|
|
import SectionTitle from '@/components/common/SectionTitle'
|
|
import SubsectionTitle from '@/components/common/SubsectionTitle'
|
|
import { wikiKeys } from '@/lib/queryKeys'
|
|
import remarkWikiAutoLink from '@/lib/remark-wiki-autolink'
|
|
import { fetchWikiPages } from '@/lib/wiki'
|
|
|
|
import type { FC } from 'react'
|
|
import type { Components } from 'react-markdown'
|
|
|
|
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))
|
|
? <PrefetchLink to={href!}>{children}</PrefetchLink>
|
|
: (
|
|
<a href={href}
|
|
target="_blank"
|
|
rel="noopener noreferrer">
|
|
{children}
|
|
</a>))) } as const satisfies Components
|
|
|
|
|
|
export default (({ title, body }: Props) => {
|
|
const { data } = useQuery ({
|
|
enabled: Boolean (body),
|
|
queryKey: wikiKeys.index ({ }),
|
|
queryFn: () => fetchWikiPages ({ }) })
|
|
const pageNames = (data ?? []).map (page => page.title).sort ((a, b) => b.length - a.length)
|
|
|
|
const remarkPlugins = useMemo (
|
|
() => [() => remarkWikiAutoLink (pageNames), remarkGFM], [pageNames])
|
|
|
|
return (
|
|
<ReactMarkdown components={mdComponents} remarkPlugins={remarkPlugins}>
|
|
{body || `このページは存在しません。[新規作成してください](/wiki/new?title=${ encodeURIComponent (title) })。`}
|
|
</ReactMarkdown>)
|
|
}) satisfies FC<Props>
|