アイヌ語追加 (#428) (#433)

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

frontend/src/mdx-components.tsx

@@ -1,29 +1,50 @@
-import { useMemo } from 'react'
+import { createContext, createElement, useContext, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 
 import PrefetchLink from '@/components/PrefetchLink'
+import { localiseUIChildren } from '@/components/LocalisedText'
+import { cn } from '@/lib/utils'
+import { currentRenderContext } from '@/lib/renderContext'
 
 import type { MDXComponents } from 'mdx/types'
-import type { ComponentProps } from 'react'
+import type { ComponentProps, HTMLAttributes, ReactNode } from 'react'
+
+
+const DocumentLanguageContext = createContext ('ja')
+
+
+export const LocalisedDocument = (
+    { language, children, className }: {
+	language: string
+	children: ReactNode
+	className?: string },
+) => (
+    <DocumentLanguageContext.Provider value={language}>
+      <div lang={language === 'ain' ? 'ain-Kana' : language}
+	  className={cn ('localised-document', className)}>
+	{children}
+      </div>
+    </DocumentLanguageContext.Provider>)
 
 
 const MDXLink = (
     { href, children, ...props }: ComponentProps<'a'>,
 ) => {
   const location = useLocation ()
+  const origin = currentRenderContext ()?.origin ?? 'http://localhost'
   const url = useMemo (() => {
     try
     {
-      const base = new URL (location.pathname + location.search, window.location.origin)
+      const base = new URL (location.pathname + location.search, origin)
       return href ? new URL (href, base) : null
     }
     catch
     {
       return null
     }
-  }, [href, location.pathname, location.search])
+  }, [href, location.pathname, location.search, origin])
   const internal = url != null
-      && url.origin === window.location.origin
+      && url.origin === origin
       && (url.protocol === 'http:' || url.protocol === 'https:')
   const anchor = href?.startsWith ('#')
       || (url?.pathname === location.pathname
@@ -49,4 +70,52 @@ const MDXLink = (
 }
 
 
-export const useMDXComponents = (): MDXComponents => ({ a: MDXLink })
+export const useMDXComponents = (): MDXComponents => {
+  const language = useContext (DocumentLanguageContext)
+  return {
+      a: MDXLink,
+      ...((language === 'ain' || language === 'ain-Kana') ? ainuMDXComponents : { }) }
+}
+
+
+const ainuElement = (element: string) => {
+  const AinuElement = (
+      { children, className, ...props }: HTMLAttributes<HTMLElement> & {
+	  node?: unknown },
+  ) => {
+    const documentLanguage = useContext (DocumentLanguageContext)
+    const language = props.lang ?? documentLanguage
+    // ReactMarkdown supplies its syntax node; it is not a DOM attribute.
+    delete props.node
+    return (
+	<DocumentLanguageContext.Provider value={language}>
+	  {createElement (element,
+	      { ...props,
+		lang: language === 'ain' ? 'ain-Kana' : language,
+		className: cn (
+		    (language === 'ain' || language === 'ain-Kana') && 'ainu-ui-text',
+		    className) },
+	      localiseUIChildren (children, language))}
+	</DocumentLanguageContext.Provider>)
+  }
+  return AinuElement
+}
+
+
+// Opt in using the document's language, independently of the URL locale.
+export const ainuMDXComponents = {
+    p: ainuElement ('p'),
+    h1: ainuElement ('h1'),
+    h2: ainuElement ('h2'),
+    h3: ainuElement ('h3'),
+    h4: ainuElement ('h4'),
+    h5: ainuElement ('h5'),
+    h6: ainuElement ('h6'),
+    li: ainuElement ('li'),
+    dt: ainuElement ('dt'),
+    dd: ainuElement ('dd'),
+    th: ainuElement ('th'),
+    td: ainuElement ('td'),
+    em: ainuElement ('em'),
+    strong: ainuElement ('strong'),
+    del: ainuElement ('del') }