feat(new tool): UTM URL Generator

UTM Url Generator
Fix #935

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 utmUrlGenerator } from './utm-url-generator';
 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,
+      utmUrlGenerator,
       deviceInformation,
       basicAuthGenerator,
       metaTagGenerator,

src/tools/utm-url-generator/index.ts

@@ -0,0 +1,12 @@
+import { Ad } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'UTM Url Generator',
+  path: '/utm-url-generator',
+  description: 'Generate an URL with utm_ parameters',
+  keywords: ['utm', 'url', 'generator'],
+  component: () => import('./utm-url-generator.vue'),
+  icon: Ad,
+  createdAt: new Date('2024-03-15'),
+});

src/tools/utm-url-generator/utm-url-generator.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { useCopy } from '@/composable/copy';
+import { useValidation } from '@/composable/validation';
+
+const url = useStorage('utm-generator:url', '');
+const utmSource = useStorage('utm-generator:source', '');
+const utmMedium = useStorage('utm-generator:medium', '');
+const utmCampaign = useStorage('utm-generator:campaign', '');
+const utmContent = useStorage('utm-generator:content', '');
+const utmTerm = useStorage('utm-generator:term', '');
+const utmifiedUrl = computed(() => {
+  try {
+    const utmUrl = new URL(url.value);
+    utmUrl.searchParams.set('utm_source', utmSource.value);
+    utmUrl.searchParams.set('utm_medium', utmMedium.value);
+    utmUrl.searchParams.set('utm_campaign', utmCampaign.value);
+    if (utmContent.value) {
+      utmUrl.searchParams.set('utm_content', utmContent.value);
+    }
+    if (utmContent.value) {
+      utmUrl.searchParams.set('utm_term', utmTerm.value);
+    }
+    return utmUrl.href;
+  }
+  catch {
+    return '# invalid inputs';
+  }
+});
+
+const urlValidation = useValidation({
+  source: url,
+  rules: [
+    {
+      message: 'Invalid url string',
+      validator: (value) => {
+        try {
+          const _ = (new URL(value));
+          return true;
+        }
+        catch {
+          return false;
+        }
+      },
+    },
+  ],
+});
+const utmMediumValidation = useValidation({
+  source: utmMedium,
+  rules: [
+    {
+      message: 'UTM Medium is required',
+      validator: value => value !== '',
+    },
+  ],
+});
+const utmSourceValidation = useValidation({
+  source: utmSource,
+  rules: [
+    {
+      message: 'UTM Source is required',
+      validator: value => value !== '',
+    },
+  ],
+});
+const utmCampaignValidation = useValidation({
+  source: utmCampaign,
+  rules: [
+    {
+      message: 'UTM Campaign is required',
+      validator: value => value !== '',
+    },
+  ],
+});
+const { copy } = useCopy({ source: utmifiedUrl, text: 'UTMified url copied.' });
+</script>
+
+<template>
+  <div>
+    <n-p>
+      For more info about UTM, see <n-a href="https://en.wikipedia.org/wiki/UTM_parameters" target="_blank" rel="noopener noreferrer">
+        UTM Parameters
+      </n-a>
+    </n-p>
+
+    <c-input-text
+      v-model:value="url"
+      label="Website url"
+      placeholder="Put your website url here..."
+      clearable
+      mb-2
+      :validation="urlValidation"
+    />
+    <c-input-text
+      v-model:value="utmSource"
+      label="UTM Source (Identifies which site sent the traffic)"
+      placeholder="Put your UTM Source here..."
+      clearable
+      mb-2
+      :validation="utmSourceValidation"
+    />
+    <c-input-text
+      v-model:value="utmMedium"
+      label="UTM Medium (Identifies what type of link was used)"
+      placeholder="Put your UTM Medium here..."
+      clearable
+      mb-2
+      :validation="utmMediumValidation"
+    />
+    <c-input-text
+      v-model:value="utmCampaign"
+      label="UTM Campaign (Identifies a specific product promotion or strategic campaign)"
+      placeholder="Put your UTM Campaign here..."
+      clearable
+      mb-2
+      :validation="utmCampaignValidation"
+    />
+    <c-input-text
+      v-model:value="utmContent"
+      label="UTM Content (Identifies search terms)"
+      placeholder="Put your UTM Content here..."
+      clearable
+      mb-2
+    />
+    <c-input-text
+      v-model:value="utmTerm"
+      label="UTM Term (Identifies what specifically was clicked to bring the user to the site)"
+      placeholder="Put your UTM Term here..."
+      clearable
+      mb-2
+    />
+
+    <div v-if="utmifiedUrl">
+      <div mb-2>
+        Your url with UTM parameters added
+      </div>
+      <c-card>
+        {{ utmifiedUrl }}
+      </c-card>
+
+      <div mt-3 flex justify-center>
+        <c-button autofocus @click="copy()">
+          Copy url
+        </c-button>
+      </div>
+    </div>
+  </div>
+</template>