Merge 3173b239d3 into 08d977b8cd

components.d.ts

@@ -129,19 +129,31 @@ declare module '@vue/runtime-core' {
     MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
     MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
+    MyNewTool: typeof import('./src/tools/my-new-tool/my-new-tool.vue')['default']
+    NardyEncTool: typeof import('./src/tools/nardy-enc-tool/nardy-enc-tool.vue')['default']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
+    NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
+    NColorPicker: typeof import('naive-ui')['NColorPicker']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDivider: typeof import('naive-ui')['NDivider']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
+    NFormItem: typeof import('naive-ui')['NFormItem']
+    NGi: typeof import('naive-ui')['NGi']
+    NGrid: typeof import('naive-ui')['NGrid']
     NH1: typeof import('naive-ui')['NH1']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
+    NInputNumber: typeof import('naive-ui')['NInputNumber']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
+    NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSlider: typeof import('naive-ui')['NSlider']
     NSpace: typeof import('naive-ui')['NSpace']
+    NSpin: typeof import('naive-ui')['NSpin']
+    NSwitch: typeof import('naive-ui')['NSwitch']
     NTable: typeof import('naive-ui')['NTable']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']

scripts/create-tool.mjs

@@ -1,29 +1,30 @@
-import { mkdir, readFile, writeFile } from 'fs/promises';
+import { mkdir, readFile, writeFile } from 'node:fs/promises';
-import { dirname, join } from 'path';
+import { dirname, join } from 'node:path';
-import { fileURLToPath } from 'url';
+import { fileURLToPath } from 'node:url';
 
 const currentDirname = dirname(fileURLToPath(import.meta.url));
 
 const toolsDir = join(currentDirname, '..', 'src', 'tools');
-// eslint-disable-next-line no-undef
+
 const toolName = process.argv[2];
 
 if (!toolName) {
   throw new Error('Please specify a toolname.');
 }
 
-const toolNameCamelCase = toolName.replace(/-./g, (x) => x[1].toUpperCase());
+const toolCategory = process.argv[3] || 'Default';
+
 const toolNameTitleCase = toolName[0].toUpperCase() + toolName.slice(1).replace(/-/g, ' ');
 const toolDir = join(toolsDir, toolName);
 
 await mkdir(toolDir);
 console.log(`Directory created: ${toolDir}`);
 
-const createToolFile = async (name, content) => {
+async function createToolFile(name, content) {
   const filePath = join(toolDir, name);
   await writeFile(filePath, content.trim());
   console.log(`File created: ${filePath}`);
-};
+}
 
 createToolFile(
   `${toolName}.vue`,
@@ -44,7 +45,7 @@ createToolFile(
 );
 
 createToolFile(
-  `index.ts`,
+  'index.ts',
   `
 import { ArrowsShuffle } from '@vicons/tabler';
 import { defineTool } from '../tool';
@@ -53,15 +54,16 @@ export const tool = defineTool({
   name: '${toolNameTitleCase}',
   path: '/${toolName}',
   description: '',
-  keywords: ['${toolName.split('-').join("', '")}'],
+  keywords: ['${toolName.split('-').join('\', \'')}'],
   component: () => import('./${toolName}.vue'),
   icon: ArrowsShuffle,
   createdAt: new Date('${new Date().toISOString().split('T')[0]}'),
+  category: '${toolCategory}',
 });
 `,
 );
 
-createToolFile(`${toolName}.service.ts`, ``);
+createToolFile(`${toolName}.service.ts`, '');
 createToolFile(
   `${toolName}.service.test.ts`,
   `
@@ -92,13 +94,6 @@ test.describe('Tool - ${toolNameTitleCase}', () => {
 
   });
 });
-  
+
 `,
 );
-
-const toolsIndex = join(toolsDir, 'index.ts');
-const indexContent = await readFile(toolsIndex, { encoding: 'utf-8' }).then((r) => r.split('\n'));
-
-indexContent.splice(3, 0, `import { tool as ${toolNameCamelCase} } from './${toolName}';`);
-writeFile(toolsIndex, indexContent.join('\n'));
-console.log(`Added import in: ${toolsIndex}`);

src/tools/ascii-text-drawer/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   component: () => import('./ascii-text-drawer.vue'),
   icon: Artboard,
   createdAt: new Date('2024-03-03'),
+  category: 'Text',
 });

src/tools/base64-file-converter/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['base64', 'converter', 'upload', 'image', 'file', 'conversion', 'web', 'data', 'format'],
   component: () => import('./base64-file-converter.vue'),
   icon: FileDigit,
+  category: 'Converter',
 });

src/tools/base64-string-converter/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./base64-string-converter.vue'),
   icon: FileDigit,
   redirectFrom: ['/file-to-base64', '/base64-converter'],
+  category: 'Converter',
 });

src/tools/basic-auth-generator/index.ts

@@ -19,4 +19,5 @@ export const tool = defineTool({
   ],
   component: () => import('./basic-auth-generator.vue'),
   icon: PasswordRound,
+  category: 'Web',
 });

src/tools/bcrypt/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['bcrypt', 'hash', 'compare', 'password', 'salt', 'round', 'storage', 'crypto'],
   component: () => import('./bcrypt.vue'),
   icon: LockSquare,
+  category: 'Crypto',
 });

src/tools/benchmark-builder/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./benchmark-builder.vue'),
   icon: SpeedFilled,
   createdAt: new Date('2023-04-05'),
+  category: 'Measurement',
 });

src/tools/bip39-generator/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['BIP39', 'passphrase', 'generator', 'mnemonic', 'entropy'],
   component: () => import('./bip39-generator.vue'),
   icon: AlignJustified,
+  category: 'Crypto',
 });

src/tools/camera-recorder/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./camera-recorder.vue'),
   icon: Camera,
   createdAt: new Date('2023-05-15'),
+  category: 'Images and videos',
 });

src/tools/case-converter/index.ts

@@ -23,4 +23,5 @@ export const tool = defineTool({
   ],
   component: () => import('./case-converter.vue'),
   icon: LetterCaseToggle,
+  category: 'Converter',
 });

src/tools/chmod-calculator/index.ts

@@ -20,4 +20,5 @@ export const tool = defineTool({
   ],
   component: () => import('./chmod-calculator.vue'),
   icon: FileInvoice,
+  category: 'Development',
 });

src/tools/chronometer/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['chronometer', 'time', 'lap', 'duration', 'measure', 'pause', 'resume', 'stopwatch'],
   component: () => import('./chronometer.vue'),
   icon: TimerOutlined,
+  category: 'Measurement',
 });

src/tools/color-converter/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./color-converter.vue'),
   icon: Palette,
   redirectFrom: ['/color-picker-converter'],
+  category: 'Converter',
 });

src/tools/crontab-generator/index.ts

@@ -23,4 +23,5 @@ export const tool = defineTool({
   ],
   component: () => import('./crontab-generator.vue'),
   icon: Alarm,
+  category: 'Development',
 });

src/tools/date-time-converter/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['date', 'time', 'converter', 'iso', 'utc', 'timezone', 'year', 'month', 'day', 'minute', 'seconde'],
   component: () => import('./date-time-converter.vue'),
   icon: Calendar,
+  category: 'Converter',
 });

src/tools/device-information/index.ts

@@ -21,4 +21,5 @@ export const tool = defineTool({
   ],
   component: () => import('./device-information.vue'),
   icon: DeviceDesktop,
+  category: 'Web',
 });

src/tools/docker-run-to-docker-compose-converter/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['docker', 'run', 'compose', 'yaml', 'yml', 'convert', 'deamon'],
   component: () => import('./docker-run-to-docker-compose-converter.vue'),
   icon: BrandDocker,
+  category: 'Development',
 });

src/tools/email-normalizer/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   component: () => import('./email-normalizer.vue'),
   icon: Mail,
   createdAt: new Date('2024-08-15'),
+  category: 'Development',
 });

src/tools/emoji-picker/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./emoji-picker.vue'),
   icon: MoodSmile,
   createdAt: new Date('2023-08-07'),
+  category: 'Text',
 });

src/tools/encryption/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./encryption.vue'),
   icon: Lock,
   redirectFrom: ['/cypher'],
+  category: 'Crypto',
 });

src/tools/eta-calculator/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['eta', 'calculator', 'estimated', 'time', 'arrival', 'average'],
   component: () => import('./eta-calculator.vue'),
   icon: Hourglass,
+  category: 'Math',
 });

src/tools/git-memo/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['git', 'push', 'force', 'pull', 'commit', 'amend', 'rebase', 'merge', 'reset', 'soft', 'hard', 'lease'],
   component: () => import('./git-memo.vue'),
   icon: BrandGit,
+  category: 'Development',
 });

src/tools/hash-text/index.ts

@@ -24,4 +24,5 @@ export const tool = defineTool({
   component: () => import('./hash-text.vue'),
   icon: EyeOff,
   redirectFrom: ['/hash'],
+  category: 'Crypto',
 });

src/tools/hmac-generator/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['hmac', 'generator', 'MD5', 'SHA1', 'SHA256', 'SHA224', 'SHA512', 'SHA384', 'SHA3', 'RIPEMD160'],
   component: () => import('./hmac-generator.vue'),
   icon: ShortTextRound,
+  category: 'Crypto',
 });

src/tools/html-entities/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['html', 'entities', 'escape', 'unescape', 'special', 'characters', 'tags'],
   component: () => import('./html-entities.vue'),
   icon: Code,
+  category: 'Web',
 });

src/tools/html-wysiwyg-editor/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['html', 'wysiwyg', 'editor', 'p', 'ul', 'ol', 'converter', 'live'],
   component: () => import('./html-wysiwyg-editor.vue'),
   icon: Edit,
+  category: 'Web',
 });

src/tools/http-status-codes/index.ts

@@ -17,4 +17,5 @@ export const tool = defineTool({
   component: () => import('./http-status-codes.vue'),
   icon: HttpRound,
   createdAt: new Date('2023-04-13'),
+  category: 'Web',
 });

src/tools/iban-validator-and-parser/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./iban-validator-and-parser.vue'),
   icon: Bank,
   createdAt: new Date('2023-08-26'),
+  category: 'Data',
 });

src/tools/index.ts

@@ -1,196 +1,19 @@
-import { tool as base64FileConverter } from './base64-file-converter';
+import type { ToolCategory, ToolWithCategory } from './tools.types';
-import { tool as base64StringConverter } from './base64-string-converter';
-import { tool as basicAuthGenerator } from './basic-auth-generator';
-import { tool as emailNormalizer } from './email-normalizer';
 
-import { tool as asciiTextDrawer } from './ascii-text-drawer';
+const modules = import.meta.glob<true, string, ToolWithCategory>('./*/index.ts', { eager: true, import: 'tool' });
 
-import { tool as textToUnicode } from './text-to-unicode';
+export const toolsByCategory = Object.values(modules).reduce((la, moduleDef) => {
-import { tool as safelinkDecoder } from './safelink-decoder';
+  let found = la.find(l => l.name === moduleDef.category);
-import { tool as xmlToJson } from './xml-to-json';
+  if (!found) {
-import { tool as jsonToXml } from './json-to-xml';
+    found = {
-import { tool as regexTester } from './regex-tester';
+      name: moduleDef.category,
-import { tool as regexMemo } from './regex-memo';
+      components: [],
-import { tool as markdownToHtml } from './markdown-to-html';
+    };
-import { tool as pdfSignatureChecker } from './pdf-signature-checker';
+    la.push(found);
-import { tool as numeronymGenerator } from './numeronym-generator';
+  }
-import { tool as macAddressGenerator } from './mac-address-generator';
+  found.components.push(moduleDef);
-import { tool as textToBinary } from './text-to-binary';
+  return la;
-import { tool as ulidGenerator } from './ulid-generator';
+}, [] as ToolCategory[]);
-import { tool as ibanValidatorAndParser } from './iban-validator-and-parser';
-import { tool as stringObfuscator } from './string-obfuscator';
-import { tool as textDiff } from './text-diff';
-import { tool as emojiPicker } from './emoji-picker';
-import { tool as passwordStrengthAnalyser } from './password-strength-analyser';
-import { tool as yamlToToml } from './yaml-to-toml';
-import { tool as jsonToToml } from './json-to-toml';
-import { tool as tomlToYaml } from './toml-to-yaml';
-import { tool as tomlToJson } from './toml-to-json';
-import { tool as jsonToCsv } from './json-to-csv';
-import { tool as cameraRecorder } from './camera-recorder';
-import { tool as listConverter } from './list-converter';
-import { tool as phoneParserAndFormatter } from './phone-parser-and-formatter';
-import { tool as jsonDiff } from './json-diff';
-import { tool as ipv4RangeExpander } from './ipv4-range-expander';
-import { tool as httpStatusCodes } from './http-status-codes';
-import { tool as yamlToJson } from './yaml-to-json-converter';
-import { tool as jsonToYaml } from './json-to-yaml-converter';
-import { tool as ipv6UlaGenerator } from './ipv6-ula-generator';
-import { tool as ipv4AddressConverter } from './ipv4-address-converter';
-import { tool as benchmarkBuilder } from './benchmark-builder';
-import { tool as userAgentParser } from './user-agent-parser';
-import { tool as ipv4SubnetCalculator } from './ipv4-subnet-calculator';
-import { tool as dockerRunToDockerComposeConverter } from './docker-run-to-docker-compose-converter';
-import { tool as htmlWysiwygEditor } from './html-wysiwyg-editor';
-import { tool as rsaKeyPairGenerator } from './rsa-key-pair-generator';
-import { tool as textToNatoAlphabet } from './text-to-nato-alphabet';
-import { tool as slugifyString } from './slugify-string';
-import { tool as keycodeInfo } from './keycode-info';
-import { tool as jsonMinify } from './json-minify';
-import { tool as bcrypt } from './bcrypt';
-import { tool as bip39 } from './bip39-generator';
-import { tool as caseConverter } from './case-converter';
-import { tool as chmodCalculator } from './chmod-calculator';
-import { tool as chronometer } from './chronometer';
-import { tool as colorConverter } from './color-converter';
-import { tool as crontabGenerator } from './crontab-generator';
-import { tool as dateTimeConverter } from './date-time-converter';
-import { tool as deviceInformation } from './device-information';
-import { tool as cypher } from './encryption';
-import { tool as etaCalculator } from './eta-calculator';
-import { tool as percentageCalculator } from './percentage-calculator';
-import { tool as gitMemo } from './git-memo';
-import { tool as hashText } from './hash-text';
-import { tool as hmacGenerator } from './hmac-generator';
-import { tool as htmlEntities } from './html-entities';
-import { tool as baseConverter } from './integer-base-converter';
-import { tool as jsonViewer } from './json-viewer';
-import { tool as jwtParser } from './jwt-parser';
-import { tool as loremIpsumGenerator } from './lorem-ipsum-generator';
-import { tool as mathEvaluator } from './math-evaluator';
-import { tool as metaTagGenerator } from './meta-tag-generator';
-import { tool as mimeTypes } from './mime-types';
-import { tool as otpCodeGeneratorAndValidator } from './otp-code-generator-and-validator';
-import { tool as qrCodeGenerator } from './qr-code-generator';
-import { tool as wifiQrCodeGenerator } from './wifi-qr-code-generator';
-import { tool as randomPortGenerator } from './random-port-generator';
-import { tool as romanNumeralConverter } from './roman-numeral-converter';
-import { tool as sqlPrettify } from './sql-prettify';
-import { tool as svgPlaceholderGenerator } from './svg-placeholder-generator';
-import { tool as temperatureConverter } from './temperature-converter';
-import { tool as textStatistics } from './text-statistics';
-import { tool as tokenGenerator } from './token-generator';
-import type { ToolCategory } from './tools.types';
-import { tool as urlEncoder } from './url-encoder';
-import { tool as urlParser } from './url-parser';
-import { tool as uuidGenerator } from './uuid-generator';
-import { tool as macAddressLookup } from './mac-address-lookup';
-import { tool as xmlFormatter } from './xml-formatter';
-import { tool as yamlViewer } from './yaml-viewer';
-
-export const toolsByCategory: ToolCategory[] = [
-  {
-    name: 'Crypto',
-    components: [tokenGenerator, hashText, bcrypt, uuidGenerator, ulidGenerator, cypher, bip39, hmacGenerator, rsaKeyPairGenerator, passwordStrengthAnalyser, pdfSignatureChecker],
-  },
-  {
-    name: 'Converter',
-    components: [
-      dateTimeConverter,
-      baseConverter,
-      romanNumeralConverter,
-      base64StringConverter,
-      base64FileConverter,
-      colorConverter,
-      caseConverter,
-      textToNatoAlphabet,
-      textToBinary,
-      textToUnicode,
-      yamlToJson,
-      yamlToToml,
-      jsonToYaml,
-      jsonToToml,
-      listConverter,
-      tomlToJson,
-      tomlToYaml,
-      xmlToJson,
-      jsonToXml,
-      markdownToHtml,
-    ],
-  },
-  {
-    name: 'Web',
-    components: [
-      urlEncoder,
-      htmlEntities,
-      urlParser,
-      deviceInformation,
-      basicAuthGenerator,
-      metaTagGenerator,
-      otpCodeGeneratorAndValidator,
-      mimeTypes,
-      jwtParser,
-      keycodeInfo,
-      slugifyString,
-      htmlWysiwygEditor,
-      userAgentParser,
-      httpStatusCodes,
-      jsonDiff,
-      safelinkDecoder,
-    ],
-  },
-  {
-    name: 'Images and videos',
-    components: [qrCodeGenerator, wifiQrCodeGenerator, svgPlaceholderGenerator, cameraRecorder],
-  },
-  {
-    name: 'Development',
-    components: [
-      gitMemo,
-      randomPortGenerator,
-      crontabGenerator,
-      jsonViewer,
-      jsonMinify,
-      jsonToCsv,
-      sqlPrettify,
-      chmodCalculator,
-      dockerRunToDockerComposeConverter,
-      xmlFormatter,
-      yamlViewer,
-      emailNormalizer,
-      regexTester,
-      regexMemo,
-    ],
-  },
-  {
-    name: 'Network',
-    components: [ipv4SubnetCalculator, ipv4AddressConverter, ipv4RangeExpander, macAddressLookup, macAddressGenerator, ipv6UlaGenerator],
-  },
-  {
-    name: 'Math',
-    components: [mathEvaluator, etaCalculator, percentageCalculator],
-  },
-  {
-    name: 'Measurement',
-    components: [chronometer, temperatureConverter, benchmarkBuilder],
-  },
-  {
-    name: 'Text',
-    components: [
-      loremIpsumGenerator,
-      textStatistics,
-      emojiPicker,
-      stringObfuscator,
-      textDiff,
-      numeronymGenerator,
-      asciiTextDrawer,
-    ],
-  },
-  {
-    name: 'Data',
-    components: [phoneParserAndFormatter, ibanValidatorAndParser],
-  },
-];
 
 export const tools = toolsByCategory.flatMap(({ components }) => components);
 export const toolsWithCategory = toolsByCategory.flatMap(({ components, name }) =>

src/tools/integer-base-converter/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['integer', 'number', 'base', 'conversion', 'decimal', 'hexadecimal', 'binary', 'octal', 'base64'],
   component: () => import('./integer-base-converter.vue'),
   icon: ArrowsLeftRight,
+  category: 'Converter',
 });

src/tools/ipv4-address-converter/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./ipv4-address-converter.vue'),
   icon: Binary,
   createdAt: new Date('2023-04-08'),
+  category: 'Network',
 });

src/tools/ipv4-range-expander/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./ipv4-range-expander.vue'),
   icon: UnfoldMoreOutlined,
   createdAt: new Date('2023-04-19'),
+  category: 'Network',
 });

src/tools/ipv4-subnet-calculator/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['ipv4', 'subnet', 'calculator', 'mask', 'network', 'cidr', 'netmask', 'bitmask', 'broadcast', 'address'],
   component: () => import('./ipv4-subnet-calculator.vue'),
   icon: RouterOutlined,
+  category: 'Network',
 });

src/tools/ipv6-ula-generator/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./ipv6-ula-generator.vue'),
   icon: BuildingFactory,
   createdAt: new Date('2023-04-09'),
+  category: 'Network',
 });

src/tools/json-diff/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./json-diff.vue'),
   icon: CompareArrowsRound,
   createdAt: new Date('2023-04-20'),
+  category: 'Web',
 });

src/tools/json-minify/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['json', 'minify', 'format'],
   component: () => import('./json-minify.vue'),
   icon: Braces,
+  category: 'Development',
 });

src/tools/json-to-csv/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./json-to-csv.vue'),
   icon: List,
   createdAt: new Date('2023-06-18'),
+  category: 'Development',
 });

src/tools/json-to-toml/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./json-to-toml.vue'),
   icon: Braces,
   createdAt: new Date('2023-06-23'),
+  category: 'Converter',
 });

src/tools/json-to-xml/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   component: () => import('./json-to-xml.vue'),
   icon: Braces,
   createdAt: new Date('2024-08-09'),
+  category: 'Converter',
 });

src/tools/json-to-yaml-converter/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./json-to-yaml.vue'),
   icon: Braces,
   createdAt: new Date('2023-04-10'),
+  category: 'Converter',
 });

src/tools/json-viewer/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./json-viewer.vue'),
   icon: Braces,
   redirectFrom: ['/json-viewer'],
+  category: 'Development',
 });

src/tools/jwt-parser/index.ts

@@ -25,4 +25,5 @@ export const tool = defineTool({
   ],
   component: () => import('./jwt-parser.vue'),
   icon: Key,
+  category: 'Web',
 });

src/tools/keycode-info/index.ts

@@ -24,4 +24,5 @@ export const tool = defineTool({
   ],
   component: () => import('./keycode-info.vue'),
   icon: Keyboard,
+  category: 'Web',
 });

src/tools/list-converter/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./list-converter.vue'),
   icon: List,
   createdAt: new Date('2023-05-07'),
+  category: 'Converter',
 });

src/tools/lorem-ipsum-generator/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['lorem', 'ipsum', 'dolor', 'sit', 'amet', 'placeholder', 'text', 'filler', 'random', 'generator'],
   component: () => import('./lorem-ipsum-generator.vue'),
   icon: AlignJustified,
+  category: 'Text',
 });

src/tools/mac-address-generator/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./mac-address-generator.vue'),
   icon: Devices,
   createdAt: new Date('2023-11-31'),
+  category: 'Network',
 });

src/tools/mac-address-lookup/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./mac-address-lookup.vue'),
   icon: Devices,
   createdAt: new Date('2023-04-06'),
+  category: 'Network',
 });

src/tools/markdown-to-html/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   component: () => import('./markdown-to-html.vue'),
   icon: Markdown,
   createdAt: new Date('2024-08-25'),
+  category: 'Converter',
 });

src/tools/math-evaluator/index.ts

@@ -41,4 +41,5 @@ export const tool = defineTool({
   ],
   component: () => import('./math-evaluator.vue'),
   icon: Math,
+  category: 'Math',
 });

src/tools/meta-tag-generator/index.ts

@@ -23,4 +23,5 @@ export const tool = defineTool({
   ],
   component: () => import('./meta-tag-generator.vue'),
   icon: Tags,
+  category: 'Web',
 });

src/tools/mime-types/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['mime', 'types', 'extension', 'content', 'type'],
   component: () => import('./mime-types.vue'),
   icon: World,
+  category: 'Web',
 });

src/tools/numeronym-generator/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./numeronym-generator.vue'),
   icon: n7mIcon,
   createdAt: new Date('2023-11-05'),
+  category: 'Text',
 });

src/tools/otp-code-generator-and-validator/index.ts

@@ -25,4 +25,5 @@ export const tool = defineTool({
   ],
   component: () => import('./otp-code-generator-and-validator.vue'),
   icon: DeviceMobile,
+  category: 'Web',
 });

src/tools/password-strength-analyser/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./password-strength-analyser.vue'),
   icon: PasswordIcon,
   createdAt: new Date('2023-06-24'),
+  category: 'Crypto',
 });

src/tools/pdf-signature-checker/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./pdf-signature-checker.vue'),
   icon: FileCertIcon,
   createdAt: new Date('2023-12-09'),
+  category: 'Crypto',
 });

src/tools/percentage-calculator/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./percentage-calculator.vue'),
   icon: Percentage,
   createdAt: new Date('2023-06-18'),
+  category: 'Math',
 });

src/tools/phone-parser-and-formatter/index.ts

@@ -22,4 +22,5 @@ export const tool = defineTool({
   component: () => import('./phone-parser-and-formatter.vue'),
   icon: Phone,
   createdAt: new Date('2023-05-01'),
+  category: 'Data',
 });

src/tools/qr-code-generator/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['qr', 'code', 'generator', 'square', 'color', 'link', 'low', 'medium', 'quartile', 'high', 'transparent'],
   component: () => import('./qr-code-generator.vue'),
   icon: Qrcode,
+  category: 'Images and videos',
 });

src/tools/random-port-generator/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['system', 'port', 'lan', 'generator', 'random', 'development', 'computer'],
   component: () => import('./random-port-generator.vue'),
   icon: Server,
+  category: 'Development',
 });

src/tools/regex-memo/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   component: () => import('./regex-memo.vue'),
   icon: BrandJavascript,
   createdAt: new Date('2024-09-20'),
+  category: 'Development',
 });

src/tools/regex-tester/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   component: () => import('./regex-tester.vue'),
   icon: Language,
   createdAt: new Date('2024-09-20'),
+  category: 'Development',
 });

src/tools/roman-numeral-converter/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['roman', 'arabic', 'converter', 'X', 'I', 'V', 'L', 'C', 'D', 'M'],
   component: () => import('./roman-numeral-converter.vue'),
   icon: LetterX,
+  category: 'Converter',
 });

src/tools/rsa-key-pair-generator/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['rsa', 'key', 'pair', 'generator', 'public', 'private', 'secret', 'ssh', 'pem'],
   component: () => import('./rsa-key-pair-generator.vue'),
   icon: Certificate,
+  category: 'Crypto',
 });

src/tools/safelink-decoder/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   component: () => import('./safelink-decoder.vue'),
   icon: Mailbox,
   createdAt: new Date('2024-03-11'),
+  category: 'Web',
 });

src/tools/slugify-string/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['slugify', 'string', 'escape', 'emoji', 'special', 'character', 'space', 'trim'],
   component: () => import('./slugify-string.vue'),
   icon: AbcRound,
+  category: 'Web',
 });

src/tools/sql-prettify/index.ts

@@ -24,4 +24,5 @@ export const tool = defineTool({
   ],
   component: () => import('./sql-prettify.vue'),
   icon: Database,
+  category: 'Development',
 });

src/tools/string-obfuscator/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./string-obfuscator.vue'),
   icon: EyeOff,
   createdAt: new Date('2023-08-16'),
+  category: 'Text',
 });

src/tools/svg-placeholder-generator/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['svg', 'placeholder', 'generator', 'image', 'size', 'mockup'],
   component: () => import('./svg-placeholder-generator.vue'),
   icon: ImageOutlined,
+  category: 'Images and videos',
 });

src/tools/temperature-converter/index.ts

@@ -21,4 +21,5 @@ export const tool = defineTool({
   ],
   component: () => import('./temperature-converter.vue'),
   icon: Temperature,
+  category: 'Measurement',
 });

src/tools/text-diff/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./text-diff.vue'),
   icon: FileDiff,
   createdAt: new Date('2023-08-16'),
+  category: 'Text',
 });

src/tools/text-statistics/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./text-statistics.vue'),
   icon: FileText,
   redirectFrom: ['/text-stats'],
+  category: 'Text',
 });

src/tools/text-to-binary/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./text-to-binary.vue'),
   icon: Binary,
   createdAt: new Date('2023-10-15'),
+  category: 'Converter',
 });

src/tools/text-to-nato-alphabet/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['string', 'nato', 'alphabet', 'phonetic', 'oral', 'transmission'],
   component: () => import('./text-to-nato-alphabet.vue'),
   icon: Speakerphone,
+  category: 'Converter',
 });

src/tools/text-to-unicode/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./text-to-unicode.vue'),
   icon: TextWrap,
   createdAt: new Date('2024-01-31'),
+  category: 'Converter',
 });

src/tools/token-generator/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['token', 'random', 'string', 'alphanumeric', 'symbols', 'number', 'letters', 'lowercase', 'uppercase', 'password'],
   component: () => import('./token-generator.tool.vue'),
   icon: ArrowsShuffle,
+  category: 'Crypto',
 });

src/tools/toml-to-json/index.ts

@@ -11,4 +11,5 @@ export const tool = defineTool({
   component: () => import('./toml-to-json.vue'),
   icon: BracketIcon,
   createdAt: new Date('2023-06-23'),
+  category: 'Converter',
 });

src/tools/toml-to-yaml/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./toml-to-yaml.vue'),
   icon: BracketIcon,
   createdAt: new Date('2023-06-23'),
+  category: 'Converter',
 });

src/tools/tool.ts

@@ -1,9 +1,9 @@
 import { isAfter, subWeeks } from 'date-fns';
-import type { Tool } from './tools.types';
+import type { ToolWithCategory } from './tools.types';
 
 type WithOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
 
-export function defineTool(tool: WithOptional<Tool, 'isNew'>) {
+export function defineTool(tool: WithOptional<ToolWithCategory, 'isNew'>) {
   const isNew = tool.createdAt ? isAfter(tool.createdAt, subWeeks(new Date(), 2)) : false;
 
   return {

src/tools/ulid-generator/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./ulid-generator.vue'),
   icon: SortDescendingNumbers,
   createdAt: new Date('2023-09-11'),
+  category: 'Crypto',
 });

src/tools/url-encoder/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['url', 'encode', 'decode', 'percent', '%20', 'format'],
   component: () => import('./url-encoder.vue'),
   icon: Link,
+  category: 'Web',
 });

src/tools/url-parser/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['url', 'parser', 'protocol', 'origin', 'params', 'port', 'username', 'password', 'href'],
   component: () => import('./url-parser.vue'),
   icon: Unlink,
+  category: 'Web',
 });

src/tools/user-agent-parser/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./user-agent-parser.vue'),
   icon: Browser,
   createdAt: new Date('2023-04-06'),
+  category: 'Web',
 });

src/tools/uuid-generator/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['uuid', 'v4', 'random', 'id', 'alphanumeric', 'identity', 'token', 'string', 'identifier', 'unique', 'v1', 'v3', 'v5', 'nil'],
   component: () => import('./uuid-generator.vue'),
   icon: Fingerprint,
+  category: 'Crypto',
 });

src/tools/wifi-qr-code-generator/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./wifi-qr-code-generator.vue'),
   icon: Qrcode,
   createdAt: new Date('2023-09-06'),
+  category: 'Images and videos',
 });

src/tools/xml-formatter/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./xml-formatter.vue'),
   icon: Code,
   createdAt: new Date('2023-06-17'),
+  category: 'Development',
 });

src/tools/xml-to-json/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   component: () => import('./xml-to-json.vue'),
   icon: Braces,
   createdAt: new Date('2024-08-09'),
+  category: 'Converter',
 });

src/tools/yaml-to-json-converter/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./yaml-to-json.vue'),
   icon: AlignJustified,
   createdAt: new Date('2023-04-10'),
+  category: 'Converter',
 });

src/tools/yaml-to-toml/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./yaml-to-toml.vue'),
   icon: AlignJustified,
   createdAt: new Date('2023-06-23'),
+  category: 'Converter',
 });

src/tools/yaml-viewer/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./yaml-viewer.vue'),
   icon: AlignJustified,
   createdAt: new Date('2024-01-31'),
+  category: 'Development',
 });

unocss.config.ts

@@ -10,7 +10,9 @@ import {
 import { presetScrollbar } from 'unocss-preset-scrollbar';
 
 export default defineConfig({
-  presets: [presetUno(), presetAttributify(), presetTypography(), presetScrollbar()],
+  presets: [presetUno(), presetAttributify({
+    ignoreAttributes: ['size'],
+  }), presetTypography(), presetScrollbar()],
   transformers: [transformerDirectives(), transformerVariantGroup()],
   theme: {
     colors: {

vite.config.ts

@@ -29,6 +29,7 @@ export default defineConfig({
       strictMessage: false,
       include: [
         resolve(__dirname, 'locales/**'),
+        resolve(__dirname, 'src/tools/*/locales/**'),
       ],
     }),
     AutoImport({