#428

frontend/src/components/ErrorScreen.tsx

@@ -1,9 +1,7 @@
-import { Helmet } from 'react-helmet-async'
-
 import nikumaru from '@/assets/fonts/nikumaru.otf'
 import errorImg from '@/assets/images/not-found.gif'
 import MainArea from '@/components/layout/MainArea'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
 import { useUITranslation } from '@/lib/useUITranslation'
 
 import type { FC } from 'react'
@@ -40,10 +38,10 @@ const ErrorScreen: FC<Props> = ({ status }) => {
 
   return (
       <MainArea>
-	<Helmet>
+	<PageHead title={{ text: title,
+	    language: translate (`${status}.message`).language }}>
 	  <meta name="robots" content="noindex"/>
-	  <title>{title} | {SITE_TITLE}</title>
-	</Helmet>
+	</PageHead>
 	<div className="text-6xl font-bold text-transparent
 			bg-[linear-gradient(90deg,#ff0000,#ff8800,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000)]
 			bg-clip-text bg-[length:200%_100%] animate-rainbow-scroll drop-shadow-[0_0_6px_black]

frontend/src/components/common/PageHead.tsx

@@ -0,0 +1,34 @@
+import { Helmet } from 'react-helmet-async'
+
+import { useLocale } from '@/lib/useLocale'
+import { useUITranslation } from '@/lib/useUITranslation'
+
+import type { ReactNode } from 'react'
+
+type LocalisedTitle = { text: string; language: string }
+type Props = {
+    title?: string | LocalisedTitle
+    includeSiteName?: boolean
+    children?: ReactNode }
+
+
+const PageHead = ({ title, includeSiteName = true, children }: Props) => {
+  const locale = useLocale ()
+  const { message, siteTitle } = useUITranslation ('shared')
+  const pageTitle = typeof title === 'string' ? { text: title, language: locale } : title
+  const fullTitle =
+      pageTitle == null
+      ? siteTitle.text
+      : (includeSiteName ? `${pageTitle.text} | ${siteTitle.text}` : pageTitle.text)
+  const description = message ('head.description', { brand: siteTitle.text })
+
+  return (
+      <Helmet>
+	<title lang={pageTitle?.language ?? siteTitle.language}>{fullTitle}</title>
+	<meta name="description" content={description.text} lang={description.language}/>
+	{children}
+      </Helmet>)
+}
+
+
+export default PageHead