@asafarim/shared-i18n 0.5.0

package/locales/nl/web.json

@@ -0,0 +1,343 @@
+{
+  "home": {
+    "hero": {
+      "title": "ASafariM • Multi-framework monorepo",
+      "subtitle": "Multi-framework frontends (React, Angular, Docusaurus)",
+      "description": ".NET 8+ API’s met clean architecture en getypeerde clients",
+      "tagline": "Gedeelde tokens en UI voor consistente theming"
+    },
+    "features": {
+      "whatBuilding": {
+        "title": "Wat ik nu aan het bouwen ben",
+        "description": "Een feed ‘Wat ik nu bouw’ met GitHub commits"
+      },
+      "ai": {
+        "title": "AI",
+        "description": "AI met clean architecture, getypeerde clients en SSO"
+      },
+      "core": {
+        "title": "Kernapplicaties",
+        "description": "Gebruikers & Projecten met clean architecture, getypeerde clients en SSO"
+      },
+      "jobs": {
+        "title": "Job Tracker",
+        "description": "Volg sollicitaties en interviews. Angular UI + .NET Jobs API"
+      },
+      "blog": {
+        "title": "Blog & Documentatie",
+        "description": "Docusaurus TypeScript met gedeelde header/footer en tokens"
+      }
+    },
+    "monorepo": {
+      "title": "Wat zit er in deze monorepo?",
+      "items": {
+        "tokens": "Gedeelde tokens (CSS-variabelen) voor thema-evenwicht",
+        "apps": "Web, Core, AI (React TS) + Jobs (Angular TS)",
+        "blog": "Docusaurus-blog met gedeelde header/footer",
+        "apis": ".NET API's (Identity, Core, AI, Jobs) met getypeerde clients"
+      }
+    }
+  },
+  "about": {
+    "title": "Over ASafariM",
+    "description": "Fullstack .NET & React Developer",
+    "subtitle": "Ik bouw schaalbare, onderhoudbare en interactieve applicaties — van backend-API’s in ASP.NET Core tot moderne UI’s in React & TypeScript. Gepassioneerd door prestaties, clean code en data-gedreven oplossingen.",
+    "viewResume": "Bekijk CV",
+    "contactMe": "Contacteer Mij",
+    "whatIDo": {
+      "title": "Wat Ik Doe",
+      "backend": {
+        "title": "Backend met .NET",
+        "description": "Beveiligde en schaalbare REST API’s bouwen met ASP.NET Core, EF Core en SQL-databanken."
+      },
+      "frontend": {
+        "title": "Frontend met React",
+        "description": "Interactieve, responsieve UI’s creëren met React, TypeScript en TailwindCSS."
+      },
+      "fullstack": {
+        "title": "Volledige Fullstack Oplossingen",
+        "description": "Backend + frontend combineren tot productieklare oplossingen met CI/CD en cloud deployment."
+      }
+    },
+    "skills": {
+      "title": "Belangrijkste Vaardigheden",
+      "frontend": "Frontend: React (TypeScript), Redux, Tailwind, Syncfusion",
+      "backend": "Backend: ASP.NET Core, Entity Framework, SignalR, REST API’s",
+      "databases": "Databanken: SQL Server, MySQL, MongoDB",
+      "data": "Data & Visualisatie: D3.js, R, R.Net",
+      "devops": "DevOps & Tools: Git, Azure DevOps, Docker, Swagger, TestCafe"
+    },
+    "experience": {
+      "title": "Recente Ervaring",
+      "xitechnix": {
+        "title": "XiTechniX (2020–2023)",
+        "description": "Fullstack Scientific App Developer. Ontwikkelde .NET Core + React-applicaties voor wetenschappelijke en zakelijke domeinen."
+      },
+      "irc": {
+        "title": "IRC Engineering (2020)",
+        "description": "Stage – Energieverbruiksvisualisaties ontwikkeld met C# en R.Net."
+      },
+      "vmm": {
+        "title": "Vlaamse Milieumaatschappij (2018–2019)",
+        "description": "Stage – Hydrologische modellen (FORTRAN, WetSpa) verbeterd voor rivierafvoersimulaties."
+      }
+    },
+    "background": {
+      "title": "Achtergrond",
+      "appliedIT": {
+        "title": "Toegepaste Informatica - Programmeren",
+        "school": "Thomas More, Sint-Katelijne-Waver",
+        "description": "Overgestapt naar softwareontwikkeling met focus op fullstack- en dataprojecten."
+      },
+      "phd": {
+        "title": "Doctoraat in Hydrologische Ingenieurswetenschappen",
+        "school": "VUB, Brussel",
+        "description": "Sterke expertise in modellering en data-analyse. Gespecialiseerd in wetenschappelijke softwareontwikkeling met nadruk op numerieke modellering."
+      },
+      "bsc": {
+        "title": "Bachelor & Master in Natuurlijke Hulpbronnen",
+        "school": "Universiteit van Teheran",
+        "description": "Stevige basis in milieu- en ingenieurswetenschappen."
+      }
+    }
+  },
+  "contact": {
+    "title": "Contact",
+    "hero": {
+      "title": "Laten we samen iets geweldig bouwen",
+      "subtitle": "Als fullstack developer gespecialiseerd in .NET en React help ik je project tot leven te brengen — of je nu een schaalbare API, een interactieve webapp of een end-to-end oplossing nodig hebt."
+    },
+    "services": {
+      "backend": {
+        "title": "Backend Ontwikkeling",
+        "description": "ASP.NET Core API’s, Entity Framework, SQL-databanken"
+      },
+      "frontend": {
+        "title": "Frontend Ontwikkeling",
+        "description": "React, TypeScript, Tailwind, Moderne UI/UX"
+      },
+      "fullstack": {
+        "title": "Volledige Projectrealisatie",
+        "description": "End-to-end oplossingen met CI/CD en cloud deployment"
+      }
+    },
+    "form": {
+      "newConversation": "Nieuwe conversatie starten",
+      "replyToConversation": "Antwoord op conversatie {{reference}}",
+      "referenceNumber": "Referentienummer",
+      "referencePrevious": "Verwijs naar vorige",
+      "selectConversation": "Selecteer een conversatie om naar te verwijzen",
+      "name": "Naam",
+      "email": "E-mail",
+      "projectType": "Projecttype",
+      "projectTypePlaceholder": "bv. Fullstack Applicatie, API Ontwikkeling, Frontend UI",
+      "projectDetails": "Projectdetails",
+      "projectDetailsPlaceholder": "Beschrijf je project, tijdlijn en eventuele vereisten...",
+      "attachments": {
+        "title": "Bijlagen & Links",
+        "addFile": "Bestand toevoegen",
+        "addLink": "Link toevoegen",
+        "enterUrl": "Voer een URL in:",
+        "invalidUrl": "Voer een geldige URL in"
+      },
+      "submit": {
+        "sending": "Verzenden...",
+        "submit": "Laten we je project bespreken",
+        "success": "Bedankt voor je bericht! We hebben je vraag ontvangen en zullen je snel terugkeren.",
+        "error": "Bericht kon niet worden verzonden"
+      }
+    },
+    "conversations": {
+      "title": "Mijn Conversaties",
+      "show": "Toon Conversaties",
+      "hide": "Verberg Conversaties",
+      "empty": "Geen conversaties gevonden",
+      "reply": "Antwoord op deze conversatie",
+      "referringTo": "Verwijst naar conversatie:",
+      "links": "Links:",
+      "attachments": "Bijlagen:"
+    },
+    "info": {
+      "whyWorkWithMe": "Waarom met mij werken?",
+      "expertise": "Expert in zowel frontend als backend ontwikkeling",
+      "scientific": "Sterke achtergrond in wetenschappelijke toepassingen",
+      "visualization": "Ervaring met complexe datavisualisatie",
+      "delivery": "Bewezen staat van succesvolle projectoplevering",
+      "contactInfo": "Contactinformatie",
+      "email": "contact@asafarim.com",
+      "location": "Hasselt, België",
+      "availability": "Beschikbaar voor freelanceprojecten"
+    }
+  },
+  "portfolio": {
+    "title": "Portfolio",
+    "description": "Bekijk mijn werk en projecten"
+  },
+  "showcases": {
+    "title": "Aanbevolen Applicaties",
+    "intro": "Verken mijn aanbevolen applicaties en lopende projecten.",
+    "visitButton": "App Bezoeken",
+    "projects": {
+      "testora-ui": {
+        "title": "Testora UI",
+        "description": "Testora user interface is gemaakt met React en TypeScript, en het is deel van het Testora project. Het biedt een dashboard voor het monitoren en beheren van testuitvoeringen. De backend is gemaakt met ASP.NET Core en Entity Framework, PostgreSQL database."
+      },
+      "testora-testrunner": {
+        "title": "Testora e2e TestRunner",
+        "description": "TestRunner is een Node.js-applicatie die een TestCafe engine biedt voor het uitvoeren van test suites. Het is gemaakt met Node.js en TypeScript, en het is deel van het Testora project. Via SignalR, kan het test suites in real-time uitvoeren."
+      },
+      "taskManagement": {
+        "title": "Taakbeheer",
+        "description": "Een productiviteitsapp voor het beheren van persoonlijke en teamtaken met authenticatie en dashboards."
+      },
+      "smartops":
+      {
+        "title": "SmartOps",
+        "description": "SmartOps is een webapplicatie die een dashboard biedt voor het monitoren en beheren van slimme processen. De applicatie is gebouwd met React en TypeScript en maakt deel uit van het SmartOps-project."
+      },
+      "identityPortal": {
+        "title": "Identiteitsportaal",
+        "description": "Een veilig gebruikersbeheer- en authenticatiesysteem geïntegreerd met ASafariM backend."
+      },
+      "coreApp": {
+        "title": "Kern-app",
+        "description": "Centraal platform voor het beheren van CV's, portfolio's en professionele inhoud."
+      },
+      "aiPlatform": {
+        "title": "AI-platform",
+        "description": "Geavanceerde AI-aangedreven tools en hulpprogramma's voor intelligente automatisering."
+      },
+      "jobsPortal": {
+        "title": "Vacatureportaal",
+        "description": "Vacatures en carrièremogelijkheden geïntegreerd met het kernplatform."
+      },
+      "blog": {
+        "title": "Blog",
+        "description": "Technische artikelen, inzichten en documentatie over mijn projecten."
+      }
+    }
+  },
+  "resume": {
+    "loading": "CV wordt geladen...",
+    "error": "CV-details konden niet worden geladen",
+    "notFound": "CV niet gevonden",
+    "backToResumes": "Terug naar CV’s",
+    "published": "Gepubliceerd",
+    "publishedAt": "Gepubliceerd: {{date}}",
+    "sections": {
+      "summary": {
+        "title": "Professionele Samenvatting"
+      },
+      "experience": {
+        "title": "💼 Werkervaring",
+        "count": "{{count}} ervaring",
+        "count_plural": "{{count}} ervaringen",
+        "present": "Heden",
+        "achievements": "Prestaties"
+      },
+      "skills": {
+        "title": "🛠️ Vaardigheden",
+        "count": "{{count}} vaardigheid",
+        "count_plural": "{{count}} vaardigheden",
+        "categories": {
+          "category": "🏷️ {{category}}",
+          "level": "🔢 {{level}}"
+        }
+      },
+      "education": {
+        "title": "🎓 Opleiding",
+        "count": "{{count}} opleiding",
+        "count_plural": "{{count}} opleidingen",
+        "degree": "{{degree}}",
+        "field": "{{field}}",
+        "present": "Heden"
+      },
+      "certificates": {
+        "title": "📜 Certificaten",
+        "count": "{{count}} certificaat",
+        "count_plural": "{{count}} certificaten",
+        "issued": "Uitgegeven: {{date}}",
+        "expires": "Verloopt: {{date}}",
+        "viewCertificate": "Bekijk Certificaat →",
+        "credentialId": "ID: {{id}}"
+      },
+      "projects": {
+        "title": "🏗️ Projecten",
+        "count": "{{count}} project",
+        "count_plural": "{{count}} projecten",
+        "visit": "Bezoek →"
+      },
+      "languages": {
+        "title": "🌎 Talen",
+        "count": "{{count}} taal",
+        "count_plural": "{{count}} talen",
+        "level": "{{level}}"
+      },
+      "awards": {
+        "title": "🏆 Prijzen & Erkenningen",
+        "count": "{{count}} prijs",
+        "count_plural": "{{count}} prijzen",
+        "awarded": "{{date}}",
+        "issuer": "{{issuer}}"
+      },
+      "references": {
+        "title": "👨🏻 Referenties",
+        "count": "{{count}} referentie",
+        "count_plural": "{{count}} referenties"
+      },
+      "socialLinks": {
+        "title": "📲 Sociale Links",
+        "count": "{{count}} link",
+        "count_plural": "{{count}} links"
+      }
+    },
+    "actions": {
+      "editResume": "🖊 CV Bewerken",
+      "publishResume": "🌊 Publiceer CV",
+      "unpublish": "🫷 Publicatie intrekken",
+      "copyShareLink": "🟩 Kopieer Deel-link",
+      "exportPDF": "📥 Exporteer PDF",
+      "backToResumes": "╰┈➤ Terug naar CV's"
+    },
+    "messages": {
+      "publishedSuccess": "CV succesvol gepubliceerd!",
+      "publishedInfo": "Deellink: {{url}}",
+      "unpublishedSuccess": "CV-publicatie ingetrokken",
+      "unpublishedError": "Kon publicatie niet intrekken",
+      "copySuccess": "Deellink gekopieerd naar klembord!",
+      "copyError": "Kopiëren mislukt. Kopieer handmatig: {{url}}",
+      "invalidLink": "Ongeldige CV-link",
+      "notAvailable": "Deze CV is niet beschikbaar of niet langer gepubliceerd.",
+      "privacyNotice": "Deze CV wordt publiek gedeeld met toestemming. Voor privacyvragen, raadpleeg ons Privacybeleid."
+    }
+  },
+  "navbar": {
+    "brand": {
+      "text": "ASafariM"
+    },
+    "links": {
+      "resumes": {
+        "label": "CV's",
+        "icon": "📄"
+      },
+      "about": {
+        "label": "Over ons",
+        "icon": "🙋🏻‍♂️"
+      },
+      "contact": {
+        "label": "Contact",
+        "icon": "ᯓ➤"
+      },
+      "portfolio": {
+        "label": "Mijn Portfolio",
+        "icon": "🗃️"
+      }
+    },
+    "auth": {
+      "notSignedIn": "Niet ingelogd!",
+      "signIn": "Inloggen",
+      "signOut": "Uitloggen",
+      "welcome": "Welkom"
+    }
+  }
+}

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@asafarim/shared-i18n",
+  "version": "0.5.0",
+  "type": "module",
+  "files": [
+    "locales",
+    "config",
+    "hooks",
+    "utils",
+    "index.ts",
+    "package.json",
+    "tsconfig.json"
+  ],
+  "main": "index.ts",
+  "types": "index.ts",
+  "exports": {
+    ".": "./index.ts",
+    "./config": "./config/i18n.ts",
+    "./hooks": "./hooks/useLanguage.ts",
+    "./utils": "./utils/languageUtils.ts",
+    "./locales/*": "./locales/*"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "i18next": "^25.6.0",
+    "react-i18next": "^16.0.1",
+    "i18next-browser-languagedetector": "^8.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.3.1",
+    "@types/react": "^18.2.0 || ^19.0.0",
+    "@types/react-dom": "^18.2.0 || ^19.0.0",
+    "typescript": "~5.8.3"
+  },
+  "keywords": [
+    "asafarim",
+    "react",
+    "i18n",
+    "i18next",
+    "internationalization",
+    "language",
+    "localization",
+    "react-i18next",
+    "react-internationalization",
+    "react-localization",
+    "react-language",
+    "react-localization",
+    "typescript"
+  ],
+  "author": "Ali Safari <asafarim@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/asafarim/shared-i18n.git"
+  },
+  "bugs": {
+    "url": "https://github.com/asafarim/shared-i18n/issues"
+  },
+  "homepage": "https://github.com/asafarim/shared-i18n#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -b",
+    "dev": "tsc -w",
+    "start": "pnpm run build",
+    "demo": "pnpm run build && cd demo && pnpm run dev",
+    "predeploy": "pnpm run build && cd demo && pnpm run build && cd ..",
+    "deploy": "gh-pages -d demo/dist"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": ".",
+    "declaration": true,
+    "declarationMap": true,
+    "composite": true,
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": false
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.json"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

package/utils/languageUtils.ts

@@ -0,0 +1,141 @@
+import { LANGUAGE_COOKIE_NAME, DEFAULT_LANGUAGE, SUPPORTED_LANGUAGES, type SupportedLanguage } from '../config/i18n';
+
+/**
+ * Resolve Identity API base URL from environment or hostname
+ */
+const getIdentityApiUrl = (): string => {
+  // Default to local identity API in development
+  let resolved = 'http://identity.asafarim.local:5101';
+
+  try {
+    // Prefer Vite env vars when available
+    // Guard access to import.meta for non-Vite environments
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const viteEnv = (typeof import.meta !== 'undefined') ? ((import.meta as any).env) : undefined;
+
+    if (viteEnv && (viteEnv as any).VITE_IDENTITY_API_URL) {
+      resolved = (viteEnv as any).VITE_IDENTITY_API_URL as string;
+    } else if (typeof window !== 'undefined') {
+      // Fallback based on hostname for runtime environments
+      const isProdHost = /asafarim\.be$/i.test(window.location.hostname);
+      resolved = isProdHost ? 'https://identity.asafarim.be' : 'http://identity.asafarim.local:5101';
+    }
+  } catch {
+    // Keep default if any detection fails
+  }
+
+  return resolved;
+};
+
+/**
+ * Get language from cookie
+ */
+export const getLanguageFromCookie = (): string | null => {
+  if (typeof document === 'undefined') return null;
+  
+  const cookies = document.cookie.split(';');
+  const languageCookie = cookies.find(cookie => 
+    cookie.trim().startsWith(`${LANGUAGE_COOKIE_NAME}=`)
+  );
+  
+  if (languageCookie) {
+    const value = languageCookie.split('=')[1];
+    return value || null;
+  }
+  
+  return null;
+};
+
+/**
+ * Set language cookie for .asafarim.be domain
+ */
+export const setLanguageCookie = (language: string): void => {
+  if (typeof document === 'undefined') return;
+  
+  const domain = window.location.hostname.includes('asafarim.be') 
+    ? '.asafarim.be' 
+    : window.location.hostname;
+  
+  // Set cookie with 1 year expiration
+  const expirationDate = new Date();
+  expirationDate.setFullYear(expirationDate.getFullYear() + 1);
+  
+  document.cookie = `${LANGUAGE_COOKIE_NAME}=${language}; domain=${domain}; path=/; expires=${expirationDate.toUTCString()}; SameSite=Lax`;
+};
+
+/**
+ * Validate if language is supported
+ */
+export const isSupportedLanguage = (lang: string): lang is SupportedLanguage => {
+  return SUPPORTED_LANGUAGES.includes(lang as SupportedLanguage);
+};
+
+/**
+ * Get browser language with fallback
+ */
+export const getBrowserLanguage = (): SupportedLanguage => {
+  if (typeof navigator === 'undefined') return DEFAULT_LANGUAGE;
+  
+  const browserLang = navigator.language.split('-')[0];
+  return isSupportedLanguage(browserLang) ? browserLang : DEFAULT_LANGUAGE;
+};
+
+/**
+ * Get initial language from cookie, browser, or default
+ */
+export const getInitialLanguage = (): SupportedLanguage => {
+  const cookieLang = getLanguageFromCookie();
+  if (cookieLang && isSupportedLanguage(cookieLang)) {
+    return cookieLang;
+  }
+  
+  return getBrowserLanguage();
+};
+
+/**
+ * Update user language preference on backend
+ * Note: Language preference is stored in cookies across all apps
+ * No backend sync needed - cookies are shared across .asafarim.local domain
+ */
+export const updateUserLanguagePreference = async (language: SupportedLanguage): Promise<boolean> => {
+  try {
+    const baseUrl = getIdentityApiUrl();
+    const response = await fetch(`${baseUrl}/api/me/preferences`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify({ preferredLanguage: language }),
+    });
+
+    if (!response.ok) {
+      const text = await response.text().catch(() => '');
+      console.warn('Failed to sync language preference with backend:', response.status, text);
+      return false;
+    }
+
+    return true;
+  } catch (error) {
+    console.error('Failed to update language preference: ' + language, error);
+    return false;
+  }
+};
+
+/**
+ * Fetch user language preference from backend
+ * Note: Language preference is stored in cookies across all apps
+ * No backend sync needed - cookies are shared across .asafarim.local domain
+ */
+export const fetchUserLanguagePreference = async (): Promise<SupportedLanguage | null> => {
+  try {
+    // Language is already available in cookie
+    // No backend call needed - cookies are the source of truth
+    const cookieLang = getLanguageFromCookie();
+    if (cookieLang && isSupportedLanguage(cookieLang)) {
+      return cookieLang;
+    }
+  } catch (error) {
+    console.error('Failed to fetch language preference:', error);
+  }
+  
+  return null;
+};