diff --git a/src/components/ToolLayout.tsx b/src/components/ToolLayout.tsx
index 63eee44..9457dce 100644
--- a/src/components/ToolLayout.tsx
+++ b/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
diff --git a/src/components/allTools/AllTools.tsx b/src/components/allTools/AllTools.tsx
index 06d663b..bd447e0 100644
--- a/src/components/allTools/AllTools.tsx
+++ b/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 (
@@ -25,8 +28,10 @@ export default function AllTools({ title, toolCards }: AllToolsProps) {
{toolCards.map((card, index) => (
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index 4443975..bf891d8 100644
--- a/src/pages/home/index.tsx
+++ b/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%'}
>
+
diff --git a/src/pages/tools-by-category/index.tsx b/src/pages/tools-by-category/index.tsx
index 399c815..63b4f36 100644
--- a/src/pages/tools-by-category/index.tsx
+++ b/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)}
+ {/*@ts-ignore*/}
{t(tool.shortDescription)}
diff --git a/src/pages/tools/image/i18n/en.json b/src/pages/tools/image/i18n/en.json
index e9a47e1..2475b12 100644
--- a/src/pages/tools/image/i18n/en.json
+++ b/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": {
diff --git a/src/pages/tools/number/generic-calc/data/ohmsLaw.ts b/src/pages/tools/number/generic-calc/data/ohmsLaw.ts
index 237c71d..40d6a4e 100644
--- a/src/pages/tools/number/generic-calc/data/ohmsLaw.ts
+++ b/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: [
{
diff --git a/src/pages/tools/number/generic-calc/data/slackline.ts b/src/pages/tools/number/generic-calc/data/slackline.ts
index 843a110..830b83b 100644
--- a/src/pages/tools/number/generic-calc/data/slackline.ts
+++ b/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',
diff --git a/src/pages/tools/number/generic-calc/data/sphereArea.ts b/src/pages/tools/number/generic-calc/data/sphereArea.ts
index 15a8d13..2a83d30 100644
--- a/src/pages/tools/number/generic-calc/data/sphereArea.ts
+++ b/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',
diff --git a/src/pages/tools/number/generic-calc/data/sphereVolume.ts b/src/pages/tools/number/generic-calc/data/sphereVolume.ts
index b6132bc..1b59eac 100644
--- a/src/pages/tools/number/generic-calc/data/sphereVolume.ts
+++ b/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:
diff --git a/src/pages/tools/number/generic-calc/data/voltageDropInWire.ts b/src/pages/tools/number/generic-calc/data/voltageDropInWire.ts
index 1fc8c72..512bb01 100644
--- a/src/pages/tools/number/generic-calc/data/voltageDropInWire.ts
+++ b/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:
diff --git a/src/pages/tools/number/i18n/en.json b/src/pages/tools/number/i18n/en.json
index 06b257c..9c6814c 100644
--- a/src/pages/tools/number/i18n/en.json
+++ b/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."
}
}
diff --git a/src/tools/defineTool.tsx b/src/tools/defineTool.tsx
index 08438a4..c0cb9a9 100644
--- a/src/tools/defineTool.tsx
+++ b/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;
diff --git a/src/utils/string.ts b/src/utils/string.ts
index 4e7899e..a801508 100644
--- a/src/utils/string.ts
+++ b/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';
+};