feat: add internationalization support

src/pages/tools/json/escape-json/meta.ts

@@ -4,11 +4,15 @@ import { lazy } from 'react';
 export const tool = defineTool('json', {
   name: 'Escape JSON',
   path: 'escape-json',
-  icon: 'lets-icons:json-light',
+  icon: 'material-symbols:code',
   description:
-    'Free online JSON escaper. Just load your JSON in the input field and it will automatically get escaped. In the tool options, you can optionally enable wrapping the escaped JSON in double quotes to get an escaped JSON string.',
-  shortDescription: 'Quickly escape special JSON characters.',
-  longDescription: `This tool converts special characters in JSON files and data structures into their escaped versions. Such special characters are, for example, double quotes, newline characters, backslashes, tabs, and many others. If these characters aren't escaped and appear in a raw JSON string without escaping, they can lead to errors in data parsing. The program turns them into safe versions by adding a backslash (\\) before the character, changing its interpretation. Additionally, you can enable the "Wrap Output in Quotes" checkbox in the options, which adds double quotes around the resulting escaped JSON data. This is useful when the escaped JSON data needs to be used as a string in other data structures or the JavaScript programming language. Json-abulous!`,
-  keywords: ['escape', 'json'],
-  component: lazy(() => import('./index'))
+    'Escape special characters in JSON strings. Convert JSON data to properly escaped format for safe transmission or storage.',
+  shortDescription: 'Escape special characters in JSON',
+  keywords: ['json', 'escape', 'characters', 'format'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'json.escapeJson.name',
+    description: 'json.escapeJson.description',
+    shortDescription: 'json.escapeJson.shortDescription'
+  }
 });

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

@@ -0,0 +1,39 @@
+{
+  "prettify": {
+    "title": "Prettify JSON",
+    "description": "Format JSON with proper indentation and spacing.",
+    "inputTitle": "Input JSON",
+    "resultTitle": "Prettified JSON",
+    "indentation": "Indentation",
+    "useSpaces": "Use Spaces",
+    "useSpacesDescription": "Indent output with spaces",
+    "useTabs": "Use Tabs",
+    "useTabsDescription": "Indent output with tabs.",
+    "toolInfo": {
+      "title": "Prettify JSON",
+      "description": "This tool allows you to format JSON data with proper indentation and spacing, making it more readable and easier to work with."
+    }
+  },
+  "minify": {
+    "title": "Minify JSON",
+    "description": "Remove all unnecessary whitespace from JSON.",
+    "inputTitle": "Input JSON",
+    "resultTitle": "Minified JSON",
+    "toolInfo": {
+      "title": "What Is JSON Minification?",
+      "description": "JSON minification is the process of removing all unnecessary whitespace characters from JSON data while maintaining its validity. This includes removing spaces, newlines, and indentation that aren't required for the JSON to be parsed correctly. Minification reduces the size of JSON data, making it more efficient for storage and transmission while keeping the exact same data structure and values."
+    }
+  },
+  "validateJson": {
+    "title": "Validate JSON",
+    "description": "Check if JSON is valid and well-formed.",
+    "inputTitle": "Input JSON",
+    "resultTitle": "Validation Result",
+    "validJson": "✅ Valid JSON",
+    "invalidJson": "❌ {{error}}",
+    "toolInfo": {
+      "title": "What is JSON Validation?",
+      "description": "JSON (JavaScript Object Notation) is a lightweight data-interchange format. JSON validation ensures that the structure of the data conforms to the JSON standard. A valid JSON object must have: - Property names enclosed in double quotes. - Properly balanced curly braces {}. - No trailing commas after the last key-value pair. - Proper nesting of objects and arrays. This tool checks the input JSON and provides feedback to help identify and fix common errors."
+    }
+  }
+}

src/pages/tools/json/json-to-xml/meta.ts

@@ -2,11 +2,17 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('json', {
-  name: 'Convert JSON to XML',
+  name: 'JSON to XML',
   path: 'json-to-xml',
-  icon: 'mdi-light:xml',
-  description: 'Convert JSON files to XML format with customizable options.',
-  shortDescription: 'Convert JSON data to XML format',
-  keywords: ['json', 'xml', 'convert', 'transform', 'parse'],
-  component: lazy(() => import('./index'))
+  icon: 'material-symbols:code',
+  description:
+    'Convert JSON data to XML format. Transform structured JSON objects into well-formed XML documents.',
+  shortDescription: 'Convert JSON to XML format',
+  keywords: ['json', 'xml', 'convert', 'transform'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'json.jsonToXml.name',
+    description: 'json.jsonToXml.description',
+    shortDescription: 'json.jsonToXml.shortDescription'
+  }
 });

src/pages/tools/json/minify/index.tsx

@@ -5,6 +5,7 @@ import ToolTextResult from '@components/result/ToolTextResult';
 import { minifyJson } from './service';
 import { CardExampleType } from '@components/examples/ToolExamples';
 import { ToolComponentProps } from '@tools/defineTool';
+import { useTranslation } from 'react-i18next';
 
 type InitialValuesType = Record<string, never>;
 
@@ -47,6 +48,7 @@ const exampleCards: CardExampleType<InitialValuesType>[] = [
 ];
 
 export default function MinifyJson({ title }: ToolComponentProps) {
+  const { t } = useTranslation();
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
 
@@ -58,11 +60,15 @@ export default function MinifyJson({ title }: ToolComponentProps) {
     <ToolContent
       title={title}
       inputComponent={
-        <ToolTextInput title="Input JSON" value={input} onChange={setInput} />
+        <ToolTextInput
+          title={t('json.minify.inputTitle')}
+          value={input}
+          onChange={setInput}
+        />
       }
       resultComponent={
         <ToolTextResult
-          title="Minified JSON"
+          title={t('json.minify.resultTitle')}
           value={result}
           extension={'json'}
         />
@@ -70,9 +76,8 @@ export default function MinifyJson({ title }: ToolComponentProps) {
       initialValues={initialValues}
       getGroups={null}
       toolInfo={{
-        title: 'What Is JSON Minification?',
-        description:
-          "JSON minification is the process of removing all unnecessary whitespace characters from JSON data while maintaining its validity. This includes removing spaces, newlines, and indentation that aren't required for the JSON to be parsed correctly. Minification reduces the size of JSON data, making it more efficient for storage and transmission while keeping the exact same data structure and values."
+        title: t('json.minify.toolInfo.title'),
+        description: t('json.minify.toolInfo.description')
       }}
       exampleCards={exampleCards}
       input={input}

src/pages/tools/json/minify/meta.ts

@@ -4,10 +4,15 @@ import { lazy } from 'react';
 export const tool = defineTool('json', {
   name: 'Minify JSON',
   path: 'minify',
-  icon: 'lets-icons:json-light',
+  icon: 'material-symbols:code',
   description:
-    'Minify your JSON by removing all unnecessary whitespace and formatting. This tool compresses JSON data to its smallest possible size while maintaining valid JSON structure.',
-  shortDescription: 'Quickly compress JSON file.',
-  keywords: ['minify', 'compress', 'minimize', 'json', 'compact'],
-  component: lazy(() => import('./index'))
+    'Minify JSON data by removing unnecessary whitespace and formatting. Reduce file size while maintaining data integrity.',
+  shortDescription: 'Minify JSON by removing whitespace',
+  keywords: ['json', 'minify', 'compress', 'whitespace'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'json.minify.name',
+    description: 'json.minify.description',
+    shortDescription: 'json.minify.shortDescription'
+  }
 });

src/pages/tools/json/prettify/index.tsx

@@ -14,6 +14,7 @@ import RadioWithTextField from '@components/options/RadioWithTextField';
 import SimpleRadio from '@components/options/SimpleRadio';
 import { isNumber, updateNumberField } from '../../../../utils/string';
 import ToolContent from '@components/ToolContent';
+import { useTranslation } from 'react-i18next';
 
 type InitialValuesType = {
   indentationType: 'tab' | 'space';
@@ -115,6 +116,7 @@ const exampleCards: CardExampleType<InitialValuesType>[] = [
 ];
 
 export default function PrettifyJson({ title }: ToolComponentProps) {
+  const { t } = useTranslation();
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
 
@@ -128,11 +130,15 @@ export default function PrettifyJson({ title }: ToolComponentProps) {
       title={title}
       input={input}
       inputComponent={
-        <ToolTextInput title={'Input JSON'} value={input} onChange={setInput} />
+        <ToolTextInput
+          title={t('json.prettify.inputTitle')}
+          value={input}
+          onChange={setInput}
+        />
       }
       resultComponent={
         <ToolTextResult
-          title={'Pretty JSON'}
+          title={t('json.prettify.resultTitle')}
           value={result}
           extension={'json'}
         />
@@ -140,14 +146,14 @@ export default function PrettifyJson({ title }: ToolComponentProps) {
       initialValues={initialValues}
       getGroups={({ values, updateField }) => [
         {
-          title: 'Indentation',
+          title: t('json.prettify.indentation'),
           component: (
             <Box>
               <RadioWithTextField
                 checked={values.indentationType === 'space'}
-                title={'Use Spaces'}
+                title={t('json.prettify.useSpaces')}
                 fieldName={'indentationType'}
-                description={'Indent output with spaces'}
+                description={t('json.prettify.useSpacesDescription')}
                 value={values.spacesCount.toString()}
                 onRadioClick={() => updateField('indentationType', 'space')}
                 onTextChange={(val) =>
@@ -157,8 +163,8 @@ export default function PrettifyJson({ title }: ToolComponentProps) {
               <SimpleRadio
                 onClick={() => updateField('indentationType', 'tab')}
                 checked={values.indentationType === 'tab'}
-                description={'Indent output with tabs.'}
-                title={'Use Tabs'}
+                description={t('json.prettify.useTabsDescription')}
+                title={t('json.prettify.useTabs')}
               />
             </Box>
           )
@@ -168,9 +174,8 @@ export default function PrettifyJson({ title }: ToolComponentProps) {
       setInput={setInput}
       exampleCards={exampleCards}
       toolInfo={{
-        title: 'What Is a JSON Prettifier?',
-        description:
-          'This tool adds consistent formatting to the data in JavaScript Object Notation (JSON) format. This transformation makes the JSON code more readable, making it easier to understand and edit. The program parses the JSON data structure into tokens and then reformats them by adding indentation and line breaks. If the data is hierarchial, then it adds indentation at the beginning of lines to visually show the depth of the JSON and adds newlines to break long single-line JSON arrays into multiple shorter, more readable ones. Additionally, this utility can remove unnecessary spaces and tabs from your JSON code (especially leading and trailing whitespaces), making it more compact. You can choose the line indentation method in the options: indent with spaces or indent with tabs. When using spaces, you can also specify how many spaces to use for each indentation level (usually 2 or 4 spaces). '
+        title: t('json.prettify.toolInfo.title'),
+        description: t('json.prettify.toolInfo.description')
       }}
     />
   );

src/pages/tools/json/prettify/meta.ts

@@ -4,10 +4,15 @@ import { lazy } from 'react';
 export const tool = defineTool('json', {
   name: 'Prettify JSON',
   path: 'prettify',
-  icon: 'lets-icons:json-light',
+  icon: 'material-symbols:code',
   description:
-    "Just load your JSON in the input field and it will automatically get prettified. In the tool options, you can choose whether to use spaces or tabs for indentation and if you're using spaces, you can specify the number of spaces to add per indentation level.",
-  shortDescription: 'Quickly beautify a JSON data structure.',
-  keywords: ['prettify'],
-  component: lazy(() => import('./index'))
+    'Format and beautify JSON data with proper indentation and spacing. Make JSON files more readable and organized.',
+  shortDescription: 'Format and beautify JSON code',
+  keywords: ['json', 'prettify', 'format', 'beautify'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'json.prettify.name',
+    description: 'json.prettify.description',
+    shortDescription: 'json.prettify.shortDescription'
+  }
 });

src/pages/tools/json/stringify/meta.ts

@@ -4,18 +4,15 @@ import { lazy } from 'react';
 export const tool = defineTool('json', {
   name: 'Stringify JSON',
   path: 'stringify',
-  icon: 'ant-design:field-string-outlined',
+  icon: 'material-symbols:code',
   description:
-    'Convert JavaScript objects and arrays into their JSON string representation. Options include custom indentation and HTML character escaping for web-safe JSON strings.',
-  shortDescription: 'Convert JavaScript objects to JSON strings',
-  keywords: [
-    'stringify',
-    'serialize',
-    'convert',
-    'object',
-    'array',
-    'json',
-    'string'
-  ],
-  component: lazy(() => import('./index'))
+    'Convert JavaScript objects to JSON string format. Serialize data structures into JSON strings for storage or transmission.',
+  shortDescription: 'Convert objects to JSON string',
+  keywords: ['json', 'stringify', 'serialize', 'convert'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'json.stringify.name',
+    description: 'json.stringify.description',
+    shortDescription: 'json.stringify.shortDescription'
+  }
 });

src/pages/tools/json/tsv-to-json/meta.ts

@@ -2,14 +2,17 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('json', {
-  name: 'Convert TSV to JSON',
+  name: 'TSV to JSON',
   path: 'tsv-to-json',
-  icon: 'material-symbols:tsv-rounded',
+  icon: 'material-symbols:code',
   description:
-    'Convert TSV files to JSON format with customizable options for delimiters, quotes, and output formatting. Support for headers, comments, and dynamic type conversion.',
-  shortDescription: 'Convert TSV data to JSON format.',
-  longDescription:
-    'This tool allows you to convert TSV (Tab-Separated Values) files into JSON format. You can customize the conversion process by specifying delimiters, quote characters, and whether to use headers. It also supports dynamic type conversion for values, handling comments, and skipping empty lines. The output can be formatted with indentation or minified as needed.',
-  keywords: ['tsv', 'json', 'convert', 'transform', 'parse'],
-  component: lazy(() => import('./index'))
+    'Convert TSV (Tab-Separated Values) data to JSON format. Transform tabular data into structured JSON objects.',
+  shortDescription: 'Convert TSV to JSON format',
+  keywords: ['tsv', 'json', 'convert', 'tabular'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'json.tsvToJson.name',
+    description: 'json.tsvToJson.description',
+    shortDescription: 'json.tsvToJson.shortDescription'
+  }
 });

src/pages/tools/json/validateJson/index.tsx

@@ -5,6 +5,7 @@ import { CardExampleType } from '@components/examples/ToolExamples';
 import { validateJson } from './service';
 import { ToolComponentProps } from '@tools/defineTool';
 import ToolContent from '@components/ToolContent';
+import { useTranslation } from 'react-i18next';
 
 const exampleCards: CardExampleType<{}>[] = [
   {
@@ -46,6 +47,7 @@ const exampleCards: CardExampleType<{}>[] = [
 ];
 
 export default function ValidateJson({ title }: ToolComponentProps) {
+  const { t } = useTranslation();
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
 
@@ -53,9 +55,9 @@ export default function ValidateJson({ title }: ToolComponentProps) {
     const { valid, error } = validateJson(input);
 
     if (valid) {
-      setResult('✅ Valid JSON');
+      setResult(t('json.validateJson.validJson'));
     } else {
-      setResult(`❌ ${error}`);
+      setResult(t('json.validateJson.invalidJson', { error }));
     }
   };
 
@@ -63,25 +65,23 @@ export default function ValidateJson({ title }: ToolComponentProps) {
     <ToolContent
       title={title}
       inputComponent={
-        <ToolTextInput title="Input JSON" value={input} onChange={setInput} />
+        <ToolTextInput
+          title={t('json.validateJson.inputTitle')}
+          value={input}
+          onChange={setInput}
+        />
       }
       resultComponent={
-        <ToolTextResult title="Validation Result" value={result} />
+        <ToolTextResult
+          title={t('json.validateJson.resultTitle')}
+          value={result}
+        />
       }
       initialValues={{}}
       getGroups={null}
       toolInfo={{
-        title: 'What is JSON Validation?',
-        description: `
-          JSON (JavaScript Object Notation) is a lightweight data-interchange format.
-          JSON validation ensures that the structure of the data conforms to the JSON standard.
-          A valid JSON object must have:
-          - Property names enclosed in double quotes.
-          - Properly balanced curly braces {}.
-          - No trailing commas after the last key-value pair.
-          - Proper nesting of objects and arrays.
-          This tool checks the input JSON and provides feedback to help identify and fix common errors.
-          `
+        title: t('json.validateJson.toolInfo.title'),
+        description: t('json.validateJson.toolInfo.description')
       }}
       exampleCards={exampleCards}
       input={input}

src/pages/tools/json/validateJson/meta.ts

@@ -3,11 +3,16 @@ import { lazy } from 'react';
 
 export const tool = defineTool('json', {
   name: 'Validate JSON',
-  path: 'validateJson',
-  icon: 'lets-icons:json-light',
+  path: 'validate-json',
+  icon: 'material-symbols:check-circle',
   description:
-    'Validate JSON data and identify formatting issues such as missing quotes, trailing commas, and incorrect brackets.',
-  shortDescription: 'Quickly validate a JSON data structure.',
-  keywords: ['validate', 'json', 'syntax'],
-  component: lazy(() => import('./index'))
+    'Validate JSON code for syntax errors and proper structure. Check if JSON documents follow correct formatting rules.',
+  shortDescription: 'Validate JSON code for errors',
+  keywords: ['json', 'validate', 'check', 'syntax', 'errors'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'json.validateJson.name',
+    description: 'json.validateJson.description',
+    shortDescription: 'json.validateJson.shortDescription'
+  }
 });