fix: tsc

src/components/ToolLayout.tsx

@@ -5,7 +5,10 @@ import ToolHeader from './ToolHeader';
 import Separator from './Separator';
 import AllTools from './allTools/AllTools';
 import { getToolsByCategory } from '@tools/index';
-import { capitalizeFirstLetter } from '../utils/string';
+import {
+  capitalizeFirstLetter,
+  getI18nNamespaceFromToolCategory
+} from '../utils/string';
 import { IconifyIcon } from '@iconify/react';
 import { useTranslation } from 'react-i18next';
 import { ToolCategory } from '@tools/defineTool';
@@ -30,7 +33,10 @@ export default function ToolLayout({
     shortDescription: FullI18nKey;
   };
 }) {
-  const { t } = useTranslation();
+  const { t } = useTranslation([
+    'translation',
+    getI18nNamespaceFromToolCategory(type)
+  ]);
 
   // Use i18n keys if available, otherwise fall back to provided strings
   //@ts-ignore

src/components/allTools/AllTools.tsx

@@ -1,10 +1,12 @@
 import { Box, Grid, Stack, Typography } from '@mui/material';
 import ToolCard from './ToolCard';
 import { IconifyIcon } from '@iconify/react';
+import { useTranslation } from 'react-i18next';
+import { FullI18nKey } from '../../i18n';
 
 export interface ToolCardProps {
-  title: string;
-  description: string;
+  title: FullI18nKey;
+  description: FullI18nKey;
   link: string;
   icon: IconifyIcon | string;
 }
@@ -15,6 +17,7 @@ interface AllToolsProps {
 }
 
 export default function AllTools({ title, toolCards }: AllToolsProps) {
+  const { t } = useTranslation();
   return (
     <Box mt={4} mb={10}>
       <Typography mb={2} fontSize={30} color={'primary'}>
@@ -25,8 +28,10 @@ export default function AllTools({ title, toolCards }: AllToolsProps) {
           {toolCards.map((card, index) => (
             <Grid item xs={12} md={6} lg={4} key={index}>
               <ToolCard
-                title={card.title}
-                description={card.description}
+                //@ts-ignore
+                title={t(card.title)}
+                //@ts-ignore
+                description={t(card.description)}
                 link={card.link}
                 icon={card.icon}
               />

src/pages/home/index.tsx

@@ -1,6 +1,7 @@
 import { Box, useTheme } from '@mui/material';
 import Hero from 'components/Hero';
 import Categories from './Categories';
+import { Helmet } from 'react-helmet';
 
 export default function Home() {
   const theme = useTheme();
@@ -25,6 +26,7 @@ export default function Home() {
       justifyContent={'center'}
       width={'100%'}
     >
+      <Helmet title={'OmniTools'} />
       <Hero />
       <Categories />
     </Box>

src/pages/tools-by-category/index.tsx

@@ -11,7 +11,10 @@ import Typography from '@mui/material/Typography';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import { filterTools, getToolsByCategory } from '../../tools';
 import Hero from 'components/Hero';
-import { getToolCategoryTitle } from '@utils/string';
+import {
+  getI18nNamespaceFromToolCategory,
+  getToolCategoryTitle
+} from '@utils/string';
 import { Icon } from '@iconify/react';
 import { categoriesColors } from 'config/uiConfig';
 import React, { useEffect } from 'react';
@@ -40,7 +43,7 @@ export default function ToolsByCategory() {
   );
   const { t } = useTranslation(
     categoryTools.length
-      ? (categoryTools[0].name.split(':')[0] as I18nNamespaces)
+      ? getI18nNamespaceFromToolCategory(categoryTools[0].type)
       : 'translation'
   );
   useEffect(() => {
@@ -124,9 +127,11 @@ export default function ToolsByCategory() {
                     }}
                     to={'/' + tool.path}
                   >
+                    {/*@ts-ignore*/}
                     {t(tool.name)}
                   </StyledLink>
                   <Typography sx={{ mt: 2 }}>
+                    {/*@ts-ignore*/}
                     {t(tool.shortDescription)}
                   </Typography>
                 </Box>

src/pages/tools/image/i18n/en.json

@@ -42,7 +42,7 @@
   },
   "changeColors": {
     "title": "Change colors in image",
-    "description": "World",
+    "description": "Change colors in image quickly",
     "shortDescription": "Quickly swap colors in a image"
   },
   "changeOpacity": {

src/pages/tools/number/generic-calc/data/ohmsLaw.ts

@@ -21,6 +21,12 @@ const ohmsLawCalc: GenericCalcType = {
   longDescription:
     "This calculator applies Ohm's Law (V = I × R) to determine any of the three electrical parameters when the other two are known. Ohm's Law is a fundamental principle in electrical engineering that describes the relationship between voltage (V), current (I), and resistance (R). This tool is essential for electronics hobbyists, electrical engineers, and students working with circuits to quickly solve for unknown values in their electrical designs.",
   formula: 'V = I * R',
+  i18n: {
+    name: 'number:ohmsLaw.title',
+    description: 'number:ohmsLaw.description',
+    shortDescription: 'number:ohmsLaw.shortDescription',
+    longDescription: 'number:ohmsLaw.longDescription'
+  },
   presets: [],
   variables: [
     {

src/pages/tools/number/generic-calc/data/slackline.ts

@@ -19,6 +19,12 @@ const slackline: GenericCalcType = {
   longDescription: 'This calculator assumes a load in the center of the rope',
   formula: 'T = (W * sqrt((S**2) + ((L/2)**2)) )/ (2S)',
   presets: [],
+  i18n: {
+    name: 'number:slackline.title',
+    description: 'number:slackline.description',
+    shortDescription: 'number:slackline.shortDescription',
+    longDescription: 'number:slackline.longDescription'
+  },
   variables: [
     {
       name: 'L',

src/pages/tools/number/generic-calc/data/sphereArea.ts

@@ -22,6 +22,12 @@ const areaSphere: GenericCalcType = {
     'This calculator determines the surface area of a sphere using the formula A = 4πr². You can either input the radius to find the surface area or enter the surface area to calculate the required radius. This tool is useful for students studying geometry, engineers working with spherical objects, and anyone needing to perform calculations involving spherical surfaces.',
   formula: 'A = 4 * pi * r**2',
   presets: [],
+  i18n: {
+    name: 'number:sphereArea.title',
+    description: 'number:sphereArea.description',
+    shortDescription: 'number:sphereArea.shortDescription',
+    longDescription: 'number:sphereArea.longDescription'
+  },
   variables: [
     {
       name: 'A',

src/pages/tools/number/generic-calc/data/sphereVolume.ts

@@ -16,6 +16,12 @@ const volumeSphere: GenericCalcType = {
   ],
   shortDescription: 'Calculate the volume of a sphere using radius or diameter',
   name: 'Volume of a Sphere',
+  i18n: {
+    name: 'number:sphereVolume.title',
+    description: 'number:sphereVolume.description',
+    shortDescription: 'number:sphereVolume.shortDescription',
+    longDescription: 'number:sphereVolume.longDescription'
+  },
   path: 'volume-sphere',
   description: 'Volume of a Sphere',
   longDescription:

src/pages/tools/number/generic-calc/data/voltageDropInWire.ts

@@ -21,6 +21,12 @@ const voltageDropInWire: GenericCalcType = {
   name: 'Round trip voltage drop in cable',
   path: 'cable-voltage-drop',
   formula: 'x = (((p * L) / (A/10**6) ) *2) * I',
+  i18n: {
+    name: 'number:voltageDropInWire.title',
+    description: 'number:voltageDropInWire.description',
+    shortDescription: 'number:voltageDropInWire.shortDescription',
+    longDescription: 'number:voltageDropInWire.longDescription'
+  },
   description:
     'Calculates round trip voltage and power loss in a 2 conductor cable',
   longDescription:

src/pages/tools/number/i18n/en.json

@@ -57,5 +57,35 @@
     "title": "Sum",
     "description": "Calculate the sum of a list of numbers. Enter numbers separated by commas or newlines to get their total sum.",
     "shortDescription": "Calculate sum of numbers"
+  },
+  "ohmsLaw": {
+    "title": "Ohm's Law",
+    "description": "Calculates voltage, current and resistance",
+    "shortDescription": "Calculate voltage, current, or resistance in electrical circuits using Ohm's Law",
+    "longDescription": "This calculator applies Ohm's Law (V = I × R) to determine any of the three electrical parameters when the other two are known. Ohm's Law is a fundamental principle in electrical engineering that describes the relationship between voltage (V), current (I), and resistance (R). This tool is essential for electronics hobbyists, electrical engineers, and students working with circuits to quickly solve for unknown values in their electrical designs."
+  },
+  "slackline": {
+    "title": "Slackline Tension",
+    "description": "Calculates tension in a slackline",
+    "shortDescription": "Calculate the approximate tension of a slackline or clothesline. Do not rely on this for safety.",
+    "longDescription": "This calculator assumes a load in the center of the rope"
+  },
+  "sphereArea": {
+    "title": "Area of a Sphere",
+    "description": "Area of a Sphere",
+    "shortDescription": "Calculate the surface area of a sphere based on its radius",
+    "longDescription": "This calculator determines the surface area of a sphere using the formula A = 4πr². You can either input the radius to find the surface area or enter the surface area to calculate the required radius. This tool is useful for students studying geometry, engineers working with spherical objects, and anyone needing to perform calculations involving spherical surfaces."
+  },
+  "sphereVolume": {
+    "title": "Volume of a Sphere",
+    "description": "Volume of a Sphere",
+    "shortDescription": "Calculate the volume of a sphere using radius or diameter",
+    "longDescription": "This calculator computes the volume of a sphere using the formula V = (4/3)πr³. You can input either the radius or diameter to find the volume, or enter the volume to determine the required radius. The tool is valuable for students, engineers, and professionals working with spherical objects in fields such as physics, engineering, and manufacturing."
+  },
+  "voltageDropInWire": {
+    "title": "Round trip voltage drop in cable",
+    "description": "Calculates round trip voltage and power loss in a 2 conductor cable",
+    "shortDescription": "Calculate voltage drop and power loss in electrical cables based on length, material, and current",
+    "longDescription": "This calculator helps determine the voltage drop and power loss in a two-conductor electrical cable. It takes into account the cable length, wire gauge (cross-sectional area), material resistivity, and current flow. The tool calculates the round-trip voltage drop, total resistance of the cable, and the power dissipated as heat. This is particularly useful for electrical engineers, electricians, and hobbyists when designing electrical systems to ensure voltage levels remain within acceptable limits at the load."
   }
 }

src/tools/defineTool.tsx

@@ -2,6 +2,7 @@ import ToolLayout from '../components/ToolLayout';
 import React, { JSXElementConstructor, LazyExoticComponent } from 'react';
 import { IconifyIcon } from '@iconify/react';
 import { FullI18nKey } from '../i18n';
+import { ParseKeys } from 'i18next';
 
 export interface ToolMeta {
   path: string;
@@ -38,9 +39,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;

src/utils/string.ts

@@ -1,5 +1,7 @@
 import { UpdateField } from '@components/options/ToolOptions';
 import { getToolsByCategory } from '@tools/index';
+import { ToolCategory } from '@tools/defineTool';
+import { I18nNamespaces } from '../i18n';
 
 // Here starting the shared values for string manipulation.
 
@@ -110,3 +112,39 @@ export function itemCounter(
 export const getToolCategoryTitle = (categoryName: string): string =>
   getToolsByCategory().find((category) => category.type === categoryName)!
     .rawTitle;
+
+// Type guard to check if a value is a valid I18nNamespaces
+const isValidI18nNamespace = (value: string): value is I18nNamespaces => {
+  const validNamespaces: I18nNamespaces[] = [
+    'string',
+    'number',
+    'video',
+    'list',
+    'json',
+    'time',
+    'csv',
+    'pdf',
+    'audio',
+    'xml',
+    'translation',
+    'image'
+  ];
+  return validNamespaces.includes(value as I18nNamespaces);
+};
+
+export const getI18nNamespaceFromToolCategory = (
+  category: ToolCategory
+): I18nNamespaces => {
+  // Map image-related categories to 'image'
+  if (['png', 'image-generic'].includes(category)) {
+    return 'image';
+  } else if (['gif'].includes(category)) {
+    return 'video';
+  }
+  // Use type guard to check if category is a valid I18nNamespaces
+  if (isValidI18nNamespace(category)) {
+    return category;
+  }
+
+  return 'translation';
+};