feat: add Categories page with refined layout and translation support

prerender.cjs

@@ -28,7 +28,7 @@ class CategoryService {
     const cacheKey = `${categoryId}_${language}`;
     return null;
   }
-  
+
   async get(categoryId, language = "de") {
     const cacheKey = `${categoryId}_${language}`;
     return null;
@@ -159,6 +159,7 @@ const Batteriegesetzhinweise =
 const Widerrufsrecht = require("./src/pages/Widerrufsrecht.js").default;
 const Sitemap = require("./src/pages/Sitemap.js").default;
 const PrerenderSitemap = require("./src/PrerenderSitemap.js").default;
+const PrerenderCategoriesPage = require("./src/PrerenderCategoriesPage.js").default;
 const AGB = require("./src/pages/AGB.js").default;
 const NotFound404 = require("./src/pages/NotFound404.js").default;
 
@@ -189,7 +190,7 @@ const renderProductWorker = async (productSeoNames, workerId, progressCallback,
 
       try {
         const productDetails = await fetchProductDetails(workerSocket, productSeoName);
-        
+
         const actualSeoName = productDetails.product.seoName || productSeoName;
         const productComponent = React.createElement(PrerenderProduct, {
           productData: productDetails,
@@ -205,7 +206,7 @@ const renderProductWorker = async (productSeoNames, workerId, progressCallback,
         }, shopConfig.baseUrl, shopConfig);
         // Get category info from categoryMap if available
         const categoryInfo = productDetails.product.categoryId ? categoryMap[productDetails.product.categoryId] : null;
-        
+
         const jsonLdScript = generateProductJsonLd({
           ...productDetails.product,
           seoName: actualSeoName,
@@ -234,9 +235,9 @@ const renderProductWorker = async (productSeoNames, workerId, progressCallback,
           success,
           workerId
         };
-        
+
         results.push(result);
-        
+
         // Call progress callback if provided
         if (progressCallback) {
           progressCallback(result);
@@ -252,14 +253,14 @@ const renderProductWorker = async (productSeoNames, workerId, progressCallback,
           error: error.message,
           workerId
         };
-        
+
         results.push(result);
-        
+
         // Call progress callback if provided
         if (progressCallback) {
           progressCallback(result);
         }
-        
+
         setTimeout(processNextProduct, 25);
       }
     };
@@ -291,16 +292,16 @@ const renderProductsInParallel = async (allProductsArray, maxWorkers, totalProdu
     const barLength = 30;
     const filledLength = Math.round((barLength * current) / total);
     const bar = '█'.repeat(filledLength) + '░'.repeat(barLength - filledLength);
-    
+
     // @note Single line progress update to prevent flickering
     const truncatedName = productName ? ` - ${productName.substring(0, 25)}${productName.length > 25 ? '...' : ''}` : '';
-    
+
     // Build worker stats on one line
     let workerStats = '';
     for (let i = 0; i < Math.min(maxWorkers, 8); i++) { // Limit to 8 workers to fit on screen
       workerStats += `W${i + 1}:${workerCounts[i]}/${workerSuccess[i]} `;
     }
-    
+
     // Single line update without complex cursor movements
     process.stdout.write(`\r   [${bar}] ${percentage}% (${current}/${total})${truncatedName}\n   ${workerStats}${current < total ? '\x1b[1A' : '\n'}`);
   };
@@ -308,26 +309,26 @@ const renderProductsInParallel = async (allProductsArray, maxWorkers, totalProdu
   // Split products among workers
   const productsPerWorker = Math.ceil(allProductsArray.length / maxWorkers);
   const workerPromises = [];
-  
+
   // Initial progress bar
   updateProgressBar(0, totalProducts);
-  
+
   for (let i = 0; i < maxWorkers; i++) {
     const start = i * productsPerWorker;
     const end = Math.min(start + productsPerWorker, allProductsArray.length);
     const productsForWorker = allProductsArray.slice(start, end);
-    
+
     if (productsForWorker.length > 0) {
       const promise = renderProductWorker(productsForWorker, i + 1, (result) => {
         // Progress callback - called each time a product is completed
         completedProducts++;
         progressResults.push(result);
         lastProductName = result.productName;
-        
+
         // Update per-worker counters
         const workerIndex = result.workerId - 1; // Convert to 0-based index
         workerCounts[workerIndex]++;
-        
+
         if (result.success) {
           totalSuccessCount++;
           workerSuccess[workerIndex]++;
@@ -335,11 +336,11 @@ const renderProductsInParallel = async (allProductsArray, maxWorkers, totalProdu
           // Don't log errors immediately to avoid interfering with progress bar
           // Errors will be shown after completion
         }
-        
+
         // Update progress bar with worker stats
         updateProgressBar(completedProducts, totalProducts, lastProductName);
       }, categoryMap);
-      
+
       workerPromises.push(promise);
     }
   }
@@ -347,10 +348,10 @@ const renderProductsInParallel = async (allProductsArray, maxWorkers, totalProdu
   try {
     // Wait for all workers to complete
     await Promise.all(workerPromises);
-    
+
     // Ensure final progress update
     updateProgressBar(totalProducts, totalProducts, lastProductName);
-    
+
     // Show any errors that occurred
     const errorResults = progressResults.filter(r => !r.success && r.error);
     if (errorResults.length > 0) {
@@ -359,7 +360,7 @@ const renderProductsInParallel = async (allProductsArray, maxWorkers, totalProdu
         console.log(`   - ${result.productSeoName}: ${result.error}`);
       });
     }
-    
+
     return totalSuccessCount;
   } catch (error) {
     console.error('Error in parallel rendering:', error);
@@ -465,6 +466,13 @@ const renderApp = async (categoryData, socket) => {
       description: "Sitemap page",
       needsCategoryData: true,
     },
+    {
+      component: PrerenderCategoriesPage,
+      path: "/Kategorien",
+      filename: "Kategorien",
+      description: "Categories page",
+      needsCategoryData: true,
+    },
     { component: AGB, path: "/agb", filename: "agb", description: "AGB page" },
     { component: NotFound404, path: "/404", filename: "404", description: "404 Not Found page" },
     {
@@ -559,8 +567,7 @@ const renderApp = async (categoryData, socket) => {
         try {
           productData = await fetchCategoryProducts(socket, category.id);
           console.log(
-            `   ✅ Found ${
-              productData.products ? productData.products.length : 0
+            `   ✅ Found ${productData.products ? productData.products.length : 0
             } products`
           );
 
@@ -644,7 +651,7 @@ const renderApp = async (categoryData, socket) => {
       const totalProducts = allProducts.size;
       const numCPUs = os.cpus().length;
       const maxWorkers = Math.min(numCPUs, totalProducts, 8); // Cap at 8 workers to avoid overwhelming the server
-      
+
       // Create category map for breadcrumbs
       const categoryMap = {};
       allCategories.forEach(category => {
@@ -653,11 +660,11 @@ const renderApp = async (categoryData, socket) => {
           seoName: category.seoName
         };
       });
-      
+
       console.log(
         `\n📦 Rendering ${totalProducts} individual product pages using ${maxWorkers} parallel workers...`
       );
-      
+
       const productPagesRendered = await renderProductsInParallel(
         Array.from(allProducts),
         maxWorkers,
@@ -709,21 +716,21 @@ const renderApp = async (categoryData, socket) => {
   // Generate products.xml (Google Shopping feed) in parallel to sitemap.xml
   if (allProductsData.length > 0) {
     console.log("\n🛒 Generating products.xml (Google Shopping feed)...");
-    
+
     try {
       const productsXml = generateProductsXml(allProductsData, shopConfig.baseUrl, shopConfig);
-      
+
       const productsXmlPath = path.resolve(__dirname, config.outputDir, "products.xml");
-      
+
       // Write with explicit UTF-8 encoding
       fs.writeFileSync(productsXmlPath, productsXml, { encoding: 'utf8' });
-      
+
       console.log(`✅ products.xml generated: ${productsXmlPath}`);
       console.log(`   - Products included: ${allProductsData.length}`);
       console.log(`   - Format: Google Shopping RSS 2.0 feed`);
       console.log(`   - Encoding: UTF-8`);
       console.log(`   - Includes: title, description, price, availability, images`);
-      
+
       // Verify the file is valid UTF-8
       try {
         const verification = fs.readFileSync(productsXmlPath, 'utf8');
@@ -731,18 +738,18 @@ const renderApp = async (categoryData, socket) => {
       } catch (verifyError) {
         console.log(`   - File verification: ⚠️ ${verifyError.message}`);
       }
-      
+
       // Validate XML against Google Shopping schema
       try {
         const ProductsXmlValidator = require('./scripts/validate-products-xml.cjs');
         const validator = new ProductsXmlValidator(productsXmlPath);
         const validationResults = await validator.validate();
-        
+
         if (validationResults.valid) {
           console.log(`   - Schema validation: ✅ Valid Google Shopping RSS 2.0`);
         } else {
           console.log(`   - Schema validation: ⚠️ ${validationResults.summary.errorCount} errors, ${validationResults.summary.warningCount} warnings`);
-          
+
           // Show first few errors for quick debugging
           if (validationResults.errors.length > 0) {
             console.log(`   - First error: ${validationResults.errors[0].message}`);
@@ -751,7 +758,7 @@ const renderApp = async (categoryData, socket) => {
       } catch (validationError) {
         console.log(`   - Schema validation: ⚠️ Validation failed: ${validationError.message}`);
       }
-      
+
     } catch (error) {
       console.error(`❌ Error generating products.xml: ${error.message}`);
       console.log("\n⚠️  Skipping products.xml generation due to errors");
@@ -762,18 +769,18 @@ const renderApp = async (categoryData, socket) => {
 
   // Generate llms.txt (LLM-friendly markdown sitemap) and category-specific files
   console.log("\n🤖 Generating LLM sitemap files...");
-  
+
   try {
     // Generate main llms.txt overview file
     const llmsTxt = generateLlmsTxt(allCategories, allProductsData, shopConfig.baseUrl, shopConfig);
     const llmsTxtPath = path.resolve(__dirname, config.outputDir, "llms.txt");
     fs.writeFileSync(llmsTxtPath, llmsTxt, { encoding: 'utf8' });
-    
+
     console.log(`✅ Main llms.txt generated: ${llmsTxtPath}`);
     console.log(`   - Static pages: 8 pages`);
     console.log(`   - Categories: ${allCategories.length} with links to detailed files`);
     console.log(`   - File size: ${Math.round(llmsTxt.length / 1024)}KB`);
-    
+
     // Group products by category for category-specific files
     const productsByCategory = {};
     allProductsData.forEach((product) => {
@@ -783,20 +790,20 @@ const renderApp = async (categoryData, socket) => {
       }
       productsByCategory[categoryId].push(product);
     });
-    
+
     // Generate category-specific LLM files with pagination
     let categoryFilesGenerated = 0;
     let totalCategoryProducts = 0;
     let totalPaginatedFiles = 0;
-    
+
     for (const category of allCategories) {
       if (category.seoName) {
         const categoryProducts = productsByCategory[category.id] || [];
         const categorySlug = category.seoName.toLowerCase().replace(/[^a-z0-9]/g, '-');
-        
+
         // Generate all paginated files for this category
         const categoryPages = generateAllCategoryLlmsPages(category, categoryProducts, shopConfig.baseUrl, shopConfig);
-        
+
         // Write each paginated file
         for (const page of categoryPages) {
           const pagePath = path.resolve(__dirname, config.outputDir, page.fileName);
@@ -814,22 +821,22 @@ const renderApp = async (categoryData, socket) => {
 
         console.log(`   ✅ llms-${categorySlug}-page-*.txt - ${categoryProducts.length} products across ${pageCount} pages (${Math.round(totalSize / 1024)}KB total)`);
         console.log(`   📋 ${productList.fileName} - ${productList.productCount} products (${Math.round(productList.content.length / 1024)}KB)`);
-        
+
         categoryFilesGenerated++;
         totalCategoryProducts += categoryProducts.length;
       }
     }
-    
+
     console.log(`   📄 Total paginated files generated: ${totalPaginatedFiles}`);
     console.log(`   📦 Total products across all categories: ${totalCategoryProducts}`);
-    
+
     try {
       const verification = fs.readFileSync(llmsTxtPath, 'utf8');
       console.log(`   - File verification: ✅ All files valid UTF-8`);
     } catch (verifyError) {
       console.log(`   - File verification: ⚠️ ${verifyError.message}`);
     }
-    
+
   } catch (error) {
     console.error(`❌ Error generating LLM sitemap files: ${error.message}`);
     console.log("\n⚠️  Skipping LLM sitemap generation due to errors");
@@ -849,7 +856,7 @@ const fetchCategoryDataAndRender = () => {
 
   const socket = io(socketUrl, {
     path: "/socket.io/",
-    transports: [ "websocket"], 
+    transports: ["websocket"],
     reconnection: false,
     timeout: 10000,
   });