#428

frontend/src/pages/help/HelpDiffPage.tsx

@@ -6,7 +6,9 @@ import PrefetchLink from '@/components/PrefetchLink'
 import PageTitle from '@/components/common/PageTitle'
 import MainArea from '@/components/layout/MainArea'
 import { SITE_TITLE } from '@/config'
-import { getHelpDiff } from '@/lib/help'
+import { getHelpArticle, getHelpDiff, resolveHelpLanguage } from '@/lib/help'
+import { localeLanguage } from '@/lib/locales'
+import { useLocale } from '@/lib/useLocale'
 import { helpKeys } from '@/lib/queryKeys'
 import { cn } from '@/lib/utils'
 import NotFound from '@/pages/NotFound'
@@ -17,17 +19,23 @@ const markers = { added: '+ ', removed: '- ', unchanged: '  ' }
 
 
 const HelpDiffPage: FC = () => {
+  const locale = useLocale ()
   const { identifier = '' } = useParams ()
   const [searchParams] = useSearchParams ()
   const from = searchParams.get ('from') ?? ''
   const to = searchParams.get ('to') ?? ''
+  const { data: article } = useQuery ({
+      queryKey: helpKeys.article (identifier),
+      queryFn: () => getHelpArticle (identifier),
+      staleTime: Infinity })
+  const language = resolveHelpLanguage (article, localeLanguage (locale))
   const validParams = Boolean (identifier && from && to)
       && searchParams.getAll ('from').length === 1
       && searchParams.getAll ('to').length === 1
   const { data: diff, isLoading, isError } = useQuery ({
-      enabled: validParams,
-      queryKey: helpKeys.diff (identifier, 'ja', from, to),
-      queryFn: () => getHelpDiff (identifier, 'ja', from, to),
+      enabled: validParams && article != null,
+      queryKey: helpKeys.diff (identifier, language, from, to),
+      queryFn: () => getHelpDiff (identifier, language, from, to),
       staleTime: Infinity })
 
   if (!(validParams) || isError || (!(isLoading) && diff == null))
@@ -55,7 +63,7 @@ const HelpDiffPage: FC = () => {
 		  {diff.to.title} ({to})
 		</PrefetchLink>
 	      </div>
-	      <pre className="mt-4 overflow-x-auto whitespace-pre">
+	      <pre lang={language} className="mt-4 overflow-x-auto whitespace-pre">
 		<code>
 		  {diff.lines.map ((line, index) => {
 		    const colour = cn (