Merge branch 'main' into tools-filtering

src/tools/defineTool.tsx

@@ -1,6 +1,8 @@
 import ToolLayout from '../components/ToolLayout';
 import React, { JSXElementConstructor, LazyExoticComponent } from 'react';
 import { IconifyIcon } from '@iconify/react';
+import { FullI18nKey, validNamespaces } from '../i18n';
+import { useTranslation } from 'react-i18next';
 
 export type UserType =
   | 'General Users'
@@ -14,11 +16,13 @@ export interface ToolMeta {
   component: LazyExoticComponent<JSXElementConstructor<ToolComponentProps>>;
   keywords: string[];
   icon: IconifyIcon | string;
-  name: string;
-  description: string;
-  shortDescription: string;
-  longDescription?: string;
-  userTypes?: UserType[];
+  i18n: {
+    name: FullI18nKey;
+    description: FullI18nKey;
+    shortDescription: FullI18nKey;
+    longDescription?: FullI18nKey;
+    userTypes?: UserType[];
+  };
 }
 
 export type ToolCategory =
@@ -39,9 +43,9 @@ export type ToolCategory =
 export interface DefinedTool {
   type: ToolCategory;
   path: string;
-  name: string;
-  description: string;
-  shortDescription: string;
+  name: FullI18nKey;
+  description: FullI18nKey;
+  shortDescription: FullI18nKey;
   icon: IconifyIcon | string;
   keywords: string[];
   component: () => JSX.Element;
@@ -57,36 +61,32 @@ export const defineTool = (
   basePath: ToolCategory,
   options: ToolMeta
 ): DefinedTool => {
-  const {
-    icon,
-    path,
-    name,
-    description,
-    keywords,
-    component,
-    shortDescription,
-    longDescription,
-    userTypes
-  } = options;
+  const { icon, path, keywords, component, i18n } = options;
   const Component = component;
   return {
     type: basePath,
     path: `${basePath}/${path}`,
-    name,
+    name: i18n.name,
     icon,
-    description,
-    shortDescription,
+    description: i18n.description,
+    shortDescription: i18n.shortDescription,
     keywords,
-    userTypes,
-    component: () => {
+    userTypes: i18n.userTypes,
+    component: function ToolComponent() {
+      const { t } = useTranslation(validNamespaces);
       return (
         <ToolLayout
-          title={name}
-          description={description}
           icon={icon}
           type={basePath}
+          i18n={i18n}
+          fullPath={`${basePath}/${path}`}
         >
-          <Component title={name} longDescription={longDescription} />
+          <Component
+            title={t(i18n.name)}
+            longDescription={
+              i18n.longDescription ? t(i18n.longDescription) : undefined
+            }
+          />
         </ToolLayout>
       );
     }

src/tools/index.ts

@@ -13,6 +13,8 @@ import { timeTools } from '../pages/tools/time';
 import { IconifyIcon } from '@iconify/react';
 import { pdfTools } from '../pages/tools/pdf';
 import { xmlTools } from '../pages/tools/xml';
+import { TFunction } from 'i18next';
+import { FullI18nKey, I18nNamespaces } from '../i18n';
 
 const toolCategoriesOrder: ToolCategory[] = [
   'image-generic',
@@ -45,95 +47,93 @@ export const tools: DefinedTool[] = [
 ];
 const categoriesConfig: {
   type: ToolCategory;
-  value: string;
-  title?: string;
+  title: FullI18nKey;
+  value: FullI18nKey;
   icon: IconifyIcon | string;
 }[] = [
   {
     type: 'string',
-    title: 'Text',
     icon: 'solar:text-bold-duotone',
-    value:
-      'Tools for working with text – convert text to images, find and replace text, split text into fragments, join text lines, repeat text, and much more.'
+    value: 'translation:categories.string.description',
+    title: 'translation:categories.string.title'
   },
   {
     type: 'png',
     icon: 'ph:file-png-thin',
-    value:
-      'Tools for working with PNG images – convert PNGs to JPGs, create transparent PNGs, change PNG colors, crop, rotate, resize PNGs, and much more.'
+    value: 'translation:categories.png.description',
+    title: 'translation:categories.png.title'
   },
   {
     type: 'number',
     icon: 'lsicon:number-filled',
-    value:
-      'Tools for working with numbers – generate number sequences, convert numbers to words and words to numbers, sort, round, factor numbers, and much more.'
+    value: 'translation:categories.number.description',
+    title: 'translation:categories.number.title'
   },
   {
     type: 'gif',
     icon: 'material-symbols-light:gif-rounded',
-    value:
-      'Tools for working with GIF animations – create transparent GIFs, extract GIF frames, add text to GIF, crop, rotate, reverse GIFs, and much more.'
+    value: 'translation:categories.gif.description',
+    title: 'translation:categories.gif.title'
   },
   {
     type: 'list',
     icon: 'solar:list-bold-duotone',
-    value:
-      'Tools for working with lists – sort, reverse, randomize lists, find unique and duplicate list items, change list item separators, and much more.'
+    value: 'translation:categories.list.description',
+    title: 'translation:categories.list.title'
   },
   {
     type: 'json',
     icon: 'lets-icons:json-light',
-    value:
-      'Tools for working with JSON data structures – prettify and minify JSON objects, flatten JSON arrays, stringify JSON values, analyze data, and much more'
+    value: 'translation:categories.json.description',
+    title: 'translation:categories.json.title'
   },
   {
     type: 'time',
     icon: 'mdi:clock-time-five',
-    value:
-      'Tools for working with time and date – calculate time differences, convert between time zones, format dates, generate date sequences, and much more.'
+    value: 'translation:categories.time.description',
+    title: 'translation:categories.time.title'
   },
   {
     type: 'csv',
     icon: 'material-symbols-light:csv-outline',
-    value:
-      'Tools for working with CSV files - convert CSV to different formats, manipulate CSV data, validate CSV structure, and process CSV files efficiently.'
+    value: 'translation:categories.csv.description',
+    title: 'translation:categories.csv.title'
   },
   {
     type: 'video',
     icon: 'lets-icons:video-light',
-    value:
-      'Tools for working with videos – extract frames from videos, create GIFs from videos, convert videos to different formats, and much more.'
+    value: 'translation:categories.video.description',
+    title: 'translation:categories.video.title'
   },
   {
     type: 'pdf',
     icon: 'tabler:pdf',
-    value:
-      'Tools for working with PDF files - extract text from PDFs, convert PDFs to other formats, manipulate PDFs, and much more.'
+    value: 'translation:categories.pdf.description',
+    title: 'translation:categories.pdf.title'
   },
   {
     type: 'time',
     icon: 'fluent-mdl2:date-time',
-    value:
-      'Tools for working with time and date – draw clocks and calendars, generate time and date sequences, calculate average time, convert between time zones, and much more.'
+    value: 'translation:categories.time.description',
+    title: 'translation:categories.time.title'
   },
   {
     type: 'image-generic',
-    title: 'Image',
     icon: 'material-symbols-light:image-outline-rounded',
-    value:
-      'Tools for working with pictures – compress, resize, crop, convert to JPG, rotate, remove background and much more.'
+    value: 'translation:categories.image-generic.description',
+    title: 'translation:categories.image-generic.title'
   },
   {
     type: 'audio',
     icon: 'ic:twotone-audiotrack',
-    value:
-      'Tools for working with audio – extract audio from video, adjusting audio speed, merging multiple audio files and much more.'
+    value: 'translation:categories.audio.description',
+    title: 'translation:categories.audio.title'
   },
   {
     type: 'xml',
     icon: 'mdi-light:xml',
-    value:
-      'Tools for working with XML data structures - viewer, beautifier, validator and much more'
+    value: 'translation:categories.xml.description',
+    title: 'translation:categories.xml.title'
   }
 ];
 
@@ -161,7 +161,8 @@ export const filterToolsByUserTypes = (
 export const filterTools = (
   tools: DefinedTool[],
   query: string,
-  userTypes: UserType[] = []
+  userTypes: UserType[] = [],
+  t: TFunction<I18nNamespaces[]>
 ): DefinedTool[] => {
   let filteredTools = tools;
 
@@ -177,9 +178,9 @@ export const filterTools = (
 
   return filteredTools.filter(
     (tool) =>
-      tool.name.toLowerCase().includes(lowerCaseQuery) ||
-      tool.description.toLowerCase().includes(lowerCaseQuery) ||
-      tool.shortDescription.toLowerCase().includes(lowerCaseQuery) ||
+      t(tool.name).toLowerCase().includes(lowerCaseQuery) ||
+      t(tool.description).toLowerCase().includes(lowerCaseQuery) ||
+      t(tool.shortDescription).toLowerCase().includes(lowerCaseQuery) ||
       tool.keywords.some((keyword) =>
         keyword.toLowerCase().includes(lowerCaseQuery)
       )
@@ -187,7 +188,8 @@ export const filterTools = (
 };
 
 export const getToolsByCategory = (
-  userTypes: UserType[] = []
+  userTypes: UserType[] = [],
+  t: TFunction<I18nNamespaces[]>
 ): {
   title: string;
   rawTitle: string;
@@ -213,9 +215,13 @@ export const getToolsByCategory = (
           : tools ?? [];
 
       return {
-        rawTitle: categoryConfig?.title ?? capitalizeFirstLetter(type),
-        title: `${categoryConfig?.title ?? capitalizeFirstLetter(type)} Tools`,
-        description: categoryConfig?.value ?? '',
+        rawTitle: categoryConfig?.title
+          ? t(categoryConfig.title)
+          : capitalizeFirstLetter(type),
+        title: categoryConfig?.title
+          ? t(categoryConfig.title)
+          : `${capitalizeFirstLetter(type)} Tools`,
+        description: categoryConfig?.value ? t(categoryConfig.value) : '',
         type,
         icon: categoryConfig!.icon,
         tools: filteredTools,