Merge 3f7151be4c into b59942ad9f

package.json

@@ -81,6 +81,7 @@
     "plausible-tracker": "^0.3.8",
     "qrcode": "^1.5.1",
     "sql-formatter": "^13.0.0",
+    "tidy-url": "^1.15.1",
     "ua-parser-js": "^1.0.35",
     "ulid": "^2.3.0",
     "unicode-emoji-json": "^0.4.0",

pnpm-lock.yaml

@@ -143,6 +143,9 @@ dependencies:
   sql-formatter:
     specifier: ^13.0.0
     version: 13.0.0
+  tidy-url:
+    specifier: ^1.15.1
+    version: 1.15.1
   ua-parser-js:
     specifier: ^1.0.35
     version: 1.0.35
@@ -3351,7 +3354,7 @@ packages:
     dependencies:
       '@unhead/dom': 0.5.1
       '@unhead/schema': 0.5.1
-      '@vueuse/shared': 10.7.2(vue@3.3.4)
+      '@vueuse/shared': 10.9.0(vue@3.3.4)
       unhead: 0.5.1
       vue: 3.3.4
     transitivePeerDependencies:
@@ -3993,10 +3996,10 @@ packages:
       - vue
     dev: false
 
-  /@vueuse/shared@10.7.2(vue@3.3.4):
-    resolution: {integrity: sha512-qFbXoxS44pi2FkgFjPvF4h7c9oMDutpyBdcJdMYIMg9XyXli2meFMuaKn+UMgsClo//Th6+beeCgqweT/79BVA==}
+  /@vueuse/shared@10.9.0(vue@3.3.4):
+    resolution: {integrity: sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==}
     dependencies:
-      vue-demi: 0.14.6(vue@3.3.4)
+      vue-demi: 0.14.7(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -8405,6 +8408,10 @@ packages:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
     dev: true
 
+  /tidy-url@1.15.1:
+    resolution: {integrity: sha512-LYBtesJs2WD92VEAprqdHSDLdZ91eRiO+OcAOYhsTdeLZvtIGKs8kK8egnzUxF3sr7AkCYAMj4UoRWslo5HszA==}
+    dev: false
+
   /tiny-emitter@2.1.0:
     resolution: {integrity: sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==}
     dev: false
@@ -9151,8 +9158,8 @@ packages:
       vue: 3.3.4
     dev: false
 
-  /vue-demi@0.14.6(vue@3.3.4):
-    resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
+  /vue-demi@0.14.7(vue@3.3.4):
+    resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true

src/tools/index.ts

@@ -6,6 +6,7 @@ import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
 import { tool as textToUnicode } from './text-to-unicode';
 import { tool as safelinkDecoder } from './safelink-decoder';
+import { tool as urlCleaner } from './url-cleaner';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -115,6 +116,7 @@ export const toolsByCategory: ToolCategory[] = [
       urlEncoder,
       htmlEntities,
       urlParser,
+      urlCleaner,
       deviceInformation,
       basicAuthGenerator,
       metaTagGenerator,

src/tools/url-cleaner/index.ts

@@ -0,0 +1,12 @@
+import { ClearAll } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Url Cleaner',
+  path: '/url-cleaner',
+  description: 'Clean Ads tracker, UTM, Facebook and other ads provider parameters from an URL',
+  keywords: ['url', 'cleaner', 'utm', 'fbclip'],
+  component: () => import('./url-cleaner.vue'),
+  icon: ClearAll,
+  createdAt: new Date('2024-03-13'),
+});

src/tools/url-cleaner/url-cleaner.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { TidyURL } from 'tidy-url';
+import { Check as CheckIcon, LetterX as CrossIcon } from '@vicons/tabler';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+import { withDefaultOnError } from '@/utils/defaults';
+
+const inputUrl = ref('');
+const cleanedUrl = computed(() => withDefaultOnError(() => TidyURL.clean(inputUrl.value), undefined));
+const isClean = computed(() => withDefaultOnError(() => TidyURL.clean(inputUrl.value)?.url === inputUrl.value, false));
+</script>
+
+<template>
+  <c-card title="Clean url">
+    <c-input-text
+      v-model:value="inputUrl"
+      placeholder="Put your url here..."
+      label="Url to clean"
+    />
+
+    <n-divider />
+
+    <div v-if="inputUrl">
+      <n-p v-if="isClean" text-center>
+        <n-icon color="green">
+          <CheckIcon />
+        </n-icon>
+        Is clean
+      </n-p>
+      <n-p v-if="!isClean" text-center>
+        <n-icon color="red">
+          <CrossIcon />
+        </n-icon>
+        Was not clean
+      </n-p>
+      <TextareaCopyable
+        label="Cleaned url"
+        :value="cleanedUrl?.url || ''"
+        placeholder="The cleaned url will be here"
+        mb-5
+        mt-5
+      />
+    </div>
+  </c-card>
+</template>