Merge branch 'feat/url-defanger' into chore/all-my-stuffs

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

Author: sharevb

package.json

@@ -163,6 +163,7 @@
     "exif-be-gone": "^1.5.1",
     "event-cron-parser": "^1.0.34",
     "fflate": "^0.8.2",
+    "fanger": "^0.3.1",
     "figlet": "^1.7.0",
     "exifreader": "^4.20.0",
     "figue": "^1.2.0",

pnpm-lock.yaml

@@ -133,6 +133,7 @@ import { tool as pgpKeygen } from './pgp-keygen';
 import { tool as portNumbers } from './port-numbers';
 import { tool as rsaEncryption } from './rsa-encryption';
 import { tool as urlCleaner } from './url-cleaner';
+import { tool as urlFanger } from './url-fanger';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -338,6 +339,7 @@ export const toolsByCategory: ToolCategory[] = [
       htmlEntities,
       urlParser,
       urlCleaner,
+      urlFanger,
       deviceInformation,
       basicAuthGenerator,
       htpasswdGenerator,

src/tools/index.ts

@@ -0,0 +1,12 @@
+import { EyeOff } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Url Fanger',
+  path: '/url-fanger',
+  description: 'Defang/Refang an URL or email address',
+  keywords: ['url', 'fanger', 'fange', 'defang', 'refang'],
+  component: () => import('./url-fanger.vue'),
+  icon: EyeOff,
+  createdAt: new Date('2024-03-09'),
+});

src/tools/url-fanger/index.ts

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { defang, refang } from 'fanger';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+
+const textInput = ref('');
+const defangOutput = computed(() => defang(textInput.value));
+
+const fangedInput = ref('');
+const refangOutput = computed(() => refang(fangedInput.value));
+</script>
+
+<template>
+  <c-card title="Refang string">
+    <c-input-text
+      v-model:value="fangedInput"
+      multiline
+      placeholder="Put your string here..."
+      rows="5"
+      label="String to refang"
+      raw-text
+      mb-5
+    />
+
+    <TextareaCopyable
+      label="String fanged"
+      :value="refangOutput"
+      placeholder="The refang encoding of your string will be here"
+      mb-5
+    />
+  </c-card>
+
+  <c-card title="Defang string">
+    <c-input-text
+      v-model:value="textInput"
+      multiline
+      placeholder="Your fanged string..."
+      rows="5"
+      label="Fanged string to decode"
+      mb-5
+    />
+
+    <TextareaCopyable
+      v-model:value="defangOutput"
+      label="Defanged string"
+      placeholder="The defanged string will be here"
+      mb-5
+    />
+  </c-card>
+</template>