#277 Use i18next-parser

next/components/atoms/ShareButton.tsx

@@ -7,7 +7,6 @@ import LinkedInIcon from '@/assets/icons/social-platforms/linkedin.svg'
 import TwitterIcon from '@/assets/icons/social-platforms/twitter.svg'
 import WhatsAppIcon from '@/assets/icons/social-platforms/whatsapp.svg'
 import Link from '@/components/atoms/Link'
-import { capitalizeFirstLetter } from '@/utils/capitalize'
 import { getNextUrl } from '@/utils/getNextUrl'
 
 interface ShareButtonProps {
@@ -50,6 +49,14 @@ const ShareButton = ({ slug, platform, title, className }: ShareButtonProps) =>
     linkedin: LinkedInIcon,
   }[platform]
 
+  const translationMap = {
+    facebook: t('common.shareOn.facebook'),
+    email: t('common.shareOn.email'),
+    twitter: t('common.shareOn.twitter'),
+    whatsapp: t('common.shareOn.whatsapp'),
+    linkedin: t('common.shareOn.linkedin'),
+  } satisfies Record<Platform, string>
+
   return (
     <Link
       href={encodedHref}
@@ -62,7 +69,7 @@ const ShareButton = ({ slug, platform, title, className }: ShareButtonProps) =>
         window.open(encodedHref, t('common.share'), 'width=600,height=600')
         event.preventDefault()
       }}
-      aria-label={t(`common.shareOn${capitalizeFirstLetter(platform)}`)}
+      aria-label={translationMap[platform]}
     >
       <span className={cx(className)}>
         <ShareIcon {...size} className="dw-[32]" />

next/components/molecules/CookieConsent.tsx

@@ -249,7 +249,7 @@ interface PanelProps {
 }
 
 const Panel = ({ title, content, value, onValueChange, isOpen, setPanel }: PanelProps) => {
-  const { t } = useTranslation(['common'])
+  const { t } = useTranslation()
   return (
     <>
       <div

next/components/molecules/Map.tsx

@@ -77,6 +77,7 @@ type FeaturePoint =
 
 interface Gallery {
   key: string
+  localisedName: string
   icon: FC<SVGProps<SVGSVGElement>>
   hoverIcon: FC<SVGProps<SVGSVGElement>>
   coordinates: [number, number]
@@ -139,6 +140,7 @@ const Map = ({ mapboxAccessToken }: MapProps) => {
   const galleries: Gallery[] = [
     {
       key: 'mirbach',
+      localisedName: t('map.palaceTitle.mirbach'),
       icon: GmbLogoIcon,
       hoverIcon: MirbachovPalacIcon,
       coordinates: [17.107_771, 48.144_776],
@@ -169,6 +171,7 @@ const Map = ({ mapboxAccessToken }: MapProps) => {
     },
     {
       key: 'palffy',
+      localisedName: t('map.palaceTitle.palffy'),
       icon: GmbLogoIcon,
       hoverIcon: PalffyhoPalacIcon,
       coordinates: [17.107_084, 48.142_137],
@@ -446,7 +449,7 @@ const Map = ({ mapboxAccessToken }: MapProps) => {
                       className="flex items-center gap-2 text-md hover:underline"
                       onClick={(e) => onGalleryClick(gallery, e)}
                     >
-                      <span>{t(`map.${gallery.key}Palace`)}</span>
+                      <span>{gallery.localisedName}</span>
                     </button>
                   ))}
                 </>

next/i18next-parser.config.js

@@ -0,0 +1,12 @@
+const { i18n, reloadOnPrerender } = require('./next-i18next.config')
+
+module.exports = {
+  locales: i18n.locales,
+  input: '(assets|components|pages|services|styles|types|utils)/**/*.{tsx,ts}',
+  output: './public/locales/$LOCALE/$NAMESPACE.json',
+  // if set to true preserves old values in a separate json file
+  createOldCatalogs: false,
+  sort: true,
+  // makes the translation json file flat
+  keySeparator: false,
+}

next/next-i18next.config.js

@@ -8,9 +8,7 @@ module.exports = {
     defaultLocale: 'sk',
     locales: ['en', 'sk'],
     localeDetection: false,
-    returnNull: false,
   },
-  serializeConfig: false,
+  defaultNS: ['translation'], // Changed to match the namespace used by i18next-parser
   reloadOnPrerender: process.env.NODE_ENV === 'development',
-  localePath: path.resolve('./public/locales'),
 }