added advanced translations system

docusaurus.config.js

@@ -11,6 +11,7 @@ const config = {
   title: 'Jonas_Jones Docs',
   tagline: 'docs.jonasjones.dev',
   favicon: 'img/favicon.png',
+  staticDirectories: ['static', 'i18n'],
 
   // Set the production url of your site here
   url: 'https://docs.jonasjones.dev',
@@ -31,7 +32,7 @@ const config = {
   // may want to replace "en" with "zh-Hans".
   i18n: {
     defaultLocale: 'en',
-    locales: ['en'],
+    locales: ['en', 'de'],
   },
 
   presets: [

i18n/de/code.json

@@ -0,0 +1,5 @@
+{
+  "theme.ErrorPageContent.title": {
+    "message": "Diese Seite ist abgestürzt."
+  }
+}

i18n/de/pagecontents/index.json

@@ -0,0 +1,8 @@
+{
+  "pages.content.index.title": {
+    "message": "Jonas_Jones Dokumentation"
+  },
+  "pages.content.index.subtitle": {
+    "message": "Irgendetwas spezifisches nachdem du suchst?"
+  }
+}

i18n/en/pagecontents/index.json

@@ -0,0 +1,10 @@
+{
+  "pages.content.index.title": {
+    "message": "Jonas_Jones Documentation",
+    "description": "Title of the Index documentation page"
+  },
+  "pages.content.index.subtitle": {
+    "message": "Anything specific you're looking for?",
+    "description": "Subtitle of the Index documentation page"
+  }
+}

src/components/Translate.js

@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from 'react';
+import { translate } from '@docusaurus/Translate';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { loadAdditionalTranslations } from '../utils/loadTranslations'; // Import the helper function
+
+const Translate = ({ id }) => {
+  const [translations, setTranslations] = useState({});
+  const [loading, setLoading] = useState(true);
+  const { i18n } = useDocusaurusContext();
+
+  useEffect(() => {
+    const fetchTranslations = async () => {
+      try {
+        // Load additional translations based on the current locale
+        const pageTranslations = await loadAdditionalTranslations(i18n.currentLocale);
+        setTranslations(pageTranslations);
+      } catch (error) {
+        console.error('Failed to load translations:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchTranslations();
+  }, [i18n]); // Re-fetch translations if the locale changes
+
+  if (loading) {
+    return <span>Loading...</span>; // Show a loading state while translations are being fetched
+  }
+
+  // Look up translation from the default Docusaurus translations first
+  let translation = translate({ id });
+
+  // If not found in the default translations, try additional files
+    if (translation == id && translations[id]) {
+        console.log('translations', translations);
+        console.log('translation:', translations[id]);
+        console.log('translation.message:', translations[id].message);
+        translation = translations[id].message;
+    }
+
+  // If translation is found, return it; otherwise, return the id as fallback
+  return <>{translation || id}</>;
+};
+
+export default Translate;

src/utils/loadTranslations.js

@@ -0,0 +1,25 @@
+// Function to load additional translation files
+export const loadAdditionalTranslations = async (locale) => {
+    const translationFiles = [
+      `${locale}/pagecontents/index.json`
+    ];
+
+    const mergedTranslations = {};
+
+  for (const file of translationFiles) {
+    try {
+      const response = await fetch(file);
+      const data = await response.json();
+
+      // Merge the contents of each file into the mergedTranslations object
+      Object.keys(data).forEach((key) => {
+        // Flatten the keys by combining the file name with the key
+        mergedTranslations[key] = data[key];
+      });
+    } catch (error) {
+      console.error(`Error loading translation file ${file}:`, error);
+    }
+  }
+
+  return mergedTranslations;
+  };