feat(new tool): Punycode Converter

Fix CorentinTh#1235

Author: sharevb

components.d.ts

@@ -132,26 +132,23 @@ declare module '@vue/runtime-core' {
     NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDivider: typeof import('naive-ui')['NDivider']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
-    NForm: typeof import('naive-ui')['NForm']
-    NFormItem: typeof import('naive-ui')['NFormItem']
     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']
-    NSwitch: typeof import('naive-ui')['NSwitch']
     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']
     PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']
     PdfSignatureChecker: typeof import('./src/tools/pdf-signature-checker/pdf-signature-checker.vue')['default']
     PdfSignatureDetails: typeof import('./src/tools/pdf-signature-checker/components/pdf-signature-details.vue')['default']
     PercentageCalculator: typeof import('./src/tools/percentage-calculator/percentage-calculator.vue')['default']
     PhoneParserAndFormatter: typeof import('./src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue')['default']
+    PunycodeConverter: typeof import('./src/tools/punycode-converter/punycode-converter.vue')['default']
     QrCodeGenerator: typeof import('./src/tools/qr-code-generator/qr-code-generator.vue')['default']
     RandomPortGenerator: typeof import('./src/tools/random-port-generator/random-port-generator.vue')['default']
     ResultRow: typeof import('./src/tools/ipv4-range-expander/result-row.vue')['default']

package.json

@@ -42,6 +42,7 @@
     "@tiptap/starter-kit": "2.1.6",
     "@tiptap/vue-3": "2.0.3",
     "@types/figlet": "^1.5.8",
+    "@types/punycode": "^2.1.4",
     "@vicons/material": "^0.12.0",
     "@vicons/tabler": "^0.12.0",
     "@vueuse/core": "^10.3.0",
@@ -81,6 +82,7 @@
     "pdf-signature-reader": "^1.4.2",
     "pinia": "^2.0.34",
     "plausible-tracker": "^0.3.8",
+    "punycode": "^2.3.1",
     "qrcode": "^1.5.1",
     "sql-formatter": "^13.0.0",
     "ua-parser-js": "^1.0.35",

pnpm-lock.yaml

@@ -2,6 +2,7 @@ import { tool as base64FileConverter } from './base64-file-converter';
 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 punycodeConverter } from './punycode-converter';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
@@ -158,7 +159,16 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Network',
-    components: [ipv4SubnetCalculator, ipv4AddressConverter, ipv4RangeExpander, macAddressLookup, macAddressGenerator, ipv6UlaGenerator],
+    components: [
+      ipv4SubnetCalculator,
+      ipv4AddressConverter,
+      // ipv6AddressConverter,
+      ipv4RangeExpander,
+      macAddressLookup,
+      macAddressGenerator,
+      ipv6UlaGenerator,
+      punycodeConverter,
+    ],
   },
   {
     name: 'Math',

src/tools/index.ts

@@ -0,0 +1,12 @@
+import { World } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Punycode Converter',
+  path: '/punycode-converter',
+  description: 'Convert international unicode domain names or emails from/to ASCII Punycode version',
+  keywords: ['punycode', 'converter', 'rfc3492', 'bootstring', 'domain', 'dns'],
+  component: () => import('./punycode-converter.vue'),
+  icon: World,
+  createdAt: new Date('2024-08-15'),
+});

src/tools/punycode-converter/index.ts

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { toASCII, toUnicode } from 'punycode/';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+
+const punycodeInput = ref('');
+const intlOutput = computed(
+  () => {
+    try {
+      return toUnicode(punycodeInput.value?.trim());
+    }
+    catch (e: any) {
+      return e.toString();
+    }
+  },
+);
+
+const intlInput = ref('');
+const punycodeOutput = computed(
+  () => {
+    try {
+      return toASCII(intlInput.value?.trim());
+    }
+    catch (e: any) {
+      return e.toString();
+    }
+  },
+);
+</script>
+
+<template>
+  <div max-w-600>
+    <c-card title="Punycode to International">
+      <c-input-text
+        v-model:value="punycodeInput"
+        placeholder="Put your punycode domain name or email to decode..."
+        label="Punycode Domain name/Email"
+        raw-text
+      />
+
+      <n-divider />
+
+      <TextareaCopyable
+        label="Decoded Domain name/Email"
+        :value="intlOutput"
+        readonly
+      />
+    </c-card>
+
+    <c-card title="International to Punycode" mt-5>
+      <c-input-text
+        v-model:value="intlInput"
+        placeholder="Put your international domain or email name here..."
+        label="Domain name or email to encode"
+        raw-text
+      />
+
+      <n-divider />
+
+      <TextareaCopyable
+        label="Punycode Domain name/Email"
+        :value="punycodeOutput"
+        readonly
+      />
+    </c-card>
+  </div>
+</template>