x

apps/spa/src/components/ThemeInjector.tsx

@@ -1,9 +1,12 @@
 import { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
 import { API_BASE } from '@homaroma/types'
 
 export default function ThemeInjector() {
+  const { i18n } = useTranslation()
+
   useEffect(() => {
-    const lang = localStorage.getItem('app_lang') || 'en'
+    const lang = i18n.language || localStorage.getItem('app_lang') || 'en'
     
     fetch(`${API_BASE}/settings?lang=${lang}`)
       .then(res => res.ok ? res.json() : null)
@@ -11,6 +14,52 @@ export default function ThemeInjector() {
         if (!settings) return
         const root = document.documentElement
 
+        // --- Global SEO & Document Title ---
+        const pageTitle = settings.defaultSeoTitle || settings.brandName
+        if (pageTitle) {
+          document.title = pageTitle
+        }
+
+        if (settings.defaultSeoDescription) {
+          let metaDesc = document.querySelector('meta[name="description"]')
+          if (!metaDesc) {
+            metaDesc = document.createElement('meta')
+            metaDesc.setAttribute('name', 'description')
+            document.head.appendChild(metaDesc)
+          }
+          metaDesc.setAttribute('content', settings.defaultSeoDescription)
+        }
+
+        if (pageTitle) {
+          let ogTitle = document.querySelector('meta[property="og:title"]')
+          if (!ogTitle) {
+            ogTitle = document.createElement('meta')
+            ogTitle.setAttribute('property', 'og:title')
+            document.head.appendChild(ogTitle)
+          }
+          ogTitle.setAttribute('content', pageTitle)
+        }
+
+        if (settings.defaultSeoDescription) {
+          let ogDesc = document.querySelector('meta[property="og:description"]')
+          if (!ogDesc) {
+            ogDesc = document.createElement('meta')
+            ogDesc.setAttribute('property', 'og:description')
+            document.head.appendChild(ogDesc)
+          }
+          ogDesc.setAttribute('content', settings.defaultSeoDescription)
+        }
+
+        if (settings.defaultOgImage) {
+          let ogImg = document.querySelector('meta[property="og:image"]')
+          if (!ogImg) {
+            ogImg = document.createElement('meta')
+            ogImg.setAttribute('property', 'og:image')
+            document.head.appendChild(ogImg)
+          }
+          ogImg.setAttribute('content', settings.defaultOgImage)
+        }
+
         // --- Theme tokens ---
         const tokens = settings?.themeTokens
         if (tokens && typeof tokens === 'object') {
@@ -48,8 +97,8 @@ export default function ThemeInjector() {
         root.style.setProperty('--scroll-reveal-style', style)
         root.style.setProperty('--scroll-reveal-duration', `${duration}ms`)
       })
-      .catch(err => console.error('Failed to inject theme in SPA:', err))
-  }, [])
+      .catch(err => console.error('Failed to inject theme/SEO in SPA:', err))
+  }, [i18n.language])
 
   return null
 }