Merge branch 'feat/punycode' into chore/all-my-stuffs

# Conflicts:
#	components.d.ts
#	package.json
#	pnpm-lock.yaml
#	src/tools/index.ts

Author: sharevb

package.json

@@ -82,6 +82,7 @@
     "@types/figlet": "^1.5.8",
     "@types/markdown-it": "^13.0.7",
     "@types/potrace": "^2.1.5",
+    "@types/punycode": "^2.1.4",
     "@vicons/material": "^0.12.0",
     "@vicons/tabler": "^0.12.0",
     "@vueuse/core": "^10.11.1",
@@ -181,6 +182,7 @@
     "plausible-tracker": "^0.3.8",
     "pretty-ms": "^9.1.0",
     "qpdf-wasm-esm-embedded": "^1.1.1",
+    "punycode": "^2.3.1",
     "qrcode": "^1.5.1",
     "randexp": "^0.5.3",
     "regex": "^4.3.3",

pnpm-lock.yaml

@@ -31,6 +31,7 @@ import { tool as mathOcr } from './math-ocr';
 import { tool as markdownTocGenerator } from './markdown-toc-generator';
 import { tool as passphraseGenerator } from './passphrase-generator';
 import { tool as pinCodeGenerator } from './pin-code-generator';
+import { tool as punycodeConverter } from './punycode-converter';
 
 import { tool as cssXpathConverter } from './css-xpath-converter';
 import { tool as cssSelectorsMemo } from './css-selectors-memo';
@@ -307,6 +308,7 @@ export const toolsByCategory: ToolCategory[] = [
     components: [
       ipv4SubnetCalculator,
       ipv4AddressConverter,
+      // ipv6AddressConverter,
       ipv4RangeExpander,
       macAddressLookup,
       macAddressGenerator,
@@ -318,6 +320,7 @@ export const toolsByCategory: ToolCategory[] = [
       ipGeoLocation,
       macAddressConverter,
       ipv6UlaGenerator,
+      punycodeConverter,
     ],
   },
   {

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>