fixed coderabbit comments

Author: tonyboylehub

package.json

@@ -7,7 +7,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "sitemap": "node generate-sitemap.mjs"
+    "sitemap": "node generate-sitemap.mjs",
+    "validate-translations": "node scripts/validate-translations.js"
   },
   "browserslist": "defaults, not ie <= 11",
   "dependencies": {

scripts/validate-translations.js

@@ -0,0 +1,112 @@
+#!/usr/bin/env node
+
+/**
+ * Build-time validation script for navigation translations
+ *
+ * This script validates that all products have complete translations
+ * for all required locales. It helps prevent maintenance drift by
+ * ensuring that when navigation structure changes, translations are
+ * kept in sync.
+ *
+ * Usage:
+ *   node scripts/validate-translations.js
+ *   node scripts/validate-translations.js --fail-on-warning
+ */
+
+const { products } = require('../src/components/products/index.js')
+const {
+  validateProductTranslations,
+  extractNavigationKeys,
+  generateTranslationTemplate
+} = require('../src/utils/navigation-localization.js')
+
+const REQUIRED_LOCALES = ['ja', 'ko']
+const FAIL_ON_WARNING = process.argv.includes('--fail-on-warning')
+const GENERATE_TEMPLATE = process.argv.includes('--generate-template')
+
+console.log('Validating navigation translations...\n')
+
+let hasErrors = false
+let hasWarnings = false
+const allResults = []
+
+products.forEach(product => {
+  // Skip products without navigation
+  if (!product.sections || product.sections.length === 0) {
+    return
+  }
+
+  const keys = extractNavigationKeys(product)
+
+  // Skip products with no navigable content
+  if (keys.sections.length === 0 && keys.links.length === 0) {
+    return
+  }
+
+  console.log(`Checking ${product.name}...`)
+
+  // Generate template if requested
+  if (GENERATE_TEMPLATE && (!product.localizedNavigation || Object.keys(product.localizedNavigation).length === 0)) {
+    console.log(`  Template for ${product.name}:`)
+    REQUIRED_LOCALES.forEach(locale => {
+      const template = generateTranslationTemplate(product, locale)
+      console.log(`  ${locale}:`, JSON.stringify(template, null, 2))
+    })
+    console.log()
+    return
+  }
+
+  const validation = validateProductTranslations(product, REQUIRED_LOCALES)
+  allResults.push({ product: product.name, validation })
+
+  if (!validation.isValid) {
+    hasErrors = true
+    console.log(`  ❌ Validation failed`)
+    validation.errors.forEach(error => {
+      console.log(`     - ${error}`)
+    })
+  } else {
+    console.log(`  ✅ All translations complete`)
+  }
+
+  // Show detailed results for each locale
+  Object.entries(validation.results).forEach(([locale, result]) => {
+    if (!result.isValid) {
+      hasWarnings = true
+      console.log(`  Locale ${locale}:`)
+      if (result.missing.sections.length > 0) {
+        console.log(`    Missing sections: ${result.missing.sections.join(', ')}`)
+      }
+      if (result.missing.links.length > 0) {
+        console.log(`    Missing links: ${result.missing.links.join(', ')}`)
+      }
+      if (result.missing.headline) {
+        console.log(`    Missing headline`)
+      }
+      if (result.missing.description) {
+        console.log(`    Missing description`)
+      }
+    }
+  })
+
+  console.log()
+})
+
+// Summary
+console.log('Summary:')
+console.log(`  Total products validated: ${allResults.length}`)
+console.log(`  Products with errors: ${allResults.filter(r => !r.validation.isValid).length}`)
+console.log(`  Products with warnings: ${allResults.filter(r => Object.values(r.validation.results).some(v => !v.isValid)).length}`)
+
+if (hasErrors || (FAIL_ON_WARNING && hasWarnings)) {
+  console.log('\n❌ Translation validation failed!')
+  console.log('Please ensure all navigation items have translations for all required locales.')
+  process.exit(1)
+} else if (hasWarnings) {
+  console.log('\n⚠️  Some warnings found, but validation passed.')
+  console.log('Consider adding missing translations for better localization coverage.')
+  process.exit(0)
+} else {
+  console.log('\n✅ All translations validated successfully!')
+  process.exit(0)
+}

src/components/NavList.jsx

@@ -5,15 +5,11 @@ import Link from 'next/link'
 import { SwitcherPopover } from './products/SwitcherPopover'
 import { productCategories } from './products/index'
 import { useTranslations, useLocale } from '@/contexts/LocaleContext'
+import { getLocalizedHref } from '@/config/languages'
 
 const NavList = () => {
   const t = useTranslations('header')
   const { locale } = useLocale()
-  
-  const getLocalizedHref = (path) => {
-    if (locale === 'en') return path
-    return `/${locale}${path}`
-  }
 
   const getTranslatedCategory = (category) => {
     const categoryMap = {
@@ -29,7 +25,7 @@ const NavList = () => {
       {productCategories.map((item, index) => {
         if (item === 'Aura') {
           return (
-            <Link href={getLocalizedHref("/aura")} key={index}>
+            <Link href={getLocalizedHref("/aura", locale)} key={index}>
               <div className="-mx-4 -my-2 rounded-lg px-4 py-2 text-black dark:text-white">
                 {getTranslatedCategory(item)}
               </div>
@@ -48,7 +44,7 @@ const NavList = () => {
         )
       })}
       <div className="hidden flex-col lg:flex">
-        <Link href={getLocalizedHref("/guides")}>
+        <Link href={getLocalizedHref("/guides", locale)}>
           <div className="-mx-4 -my-2 rounded-lg px-4 py-2 text-black dark:text-white">
             {t('guides', 'Guides')}
           </div>

src/components/products/Grid.jsx

@@ -2,6 +2,7 @@ import Link from 'next/link';
 import { IconWithName } from './IconWithName';
 import { products as allProducts } from './index';
 import { useLocale } from '@/contexts/LocaleContext';
+import { getLocalizedHref } from '@/config/languages';
 
 export function Grid({
   onClick,
@@ -17,30 +18,21 @@ export function Grid({
 
   // Localize product headlines and descriptions
   const localizeProduct = (product) => {
-    if (locale === 'en' || !product.localizedNavigation) return product
+    if (locale === 'en' || !product.localizedNavigation || !product.localizedNavigation[locale]) {
+      return product
+    }
 
     const localizedProduct = { ...product }
-    const productNav = product.localizedNavigation[locale] || product.localizedNavigation['en']
-    
+    const productNav = product.localizedNavigation[locale]
+
     if (productNav.headline) {
       localizedProduct.headline = productNav.headline
     }
     if (productNav.description) {
       localizedProduct.description = productNav.description
     }
-    
-    return localizedProduct
-  }
 
-  const getLocalizedHref = (path) => {
-    // Handle external URLs - don't add locale prefix
-    if (path.startsWith('http://') || path.startsWith('https://') || path.startsWith('//')) {
-      return path
-    }
-    
-    // Handle internal paths
-    if (locale === 'en') return `/${path}`
-    return `/${locale}/${path}`
+    return localizedProduct
   }
 
   let className = `relative grid sm:grid-cols-2 grid-cols-1`
@@ -52,7 +44,7 @@ export function Grid({
         return (
           <li key={product.path || product.href}>
             <Link
-              href={getLocalizedHref(product.href || product.path)}
+              href={getLocalizedHref(product.href || product.path, locale)}
               className="block content-start rounded-lg p-3 hover:bg-slate-50 hover:dark:bg-slate-700"
               onClick={onClick}
               {...(product.target && { target: product.target })}