add custom path

saenyakorn · Feb 24, 2023 · 647e922 · 647e922
1 parent 645ce7f
commit 647e922
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 57 deletions.
diff --git a/.gitignore b/.gitignore
@@ -13,7 +13,6 @@ dist-ssr
 *.local
 
 # Editor directories and files
-.vscode/*
 !.vscode/extensions.json
 .idea
 .DS_Store

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "editor.formatOnSave": true
+}
diff --git a/src/lib/ShortURL.svelte b/src/lib/ShortURL.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import Input from '$lib/Input.svelte'
   import type { Campaign } from '../types'
   import { getShortLink } from '../utils/shortLink'
   import Button from './Button.svelte'
@@ -58,13 +59,14 @@
     return url.toString()
   }
 
+  let customPath = ''
   async function generateShortUrl(): Promise<void> {
     try {
       const fullUrl = generateFullUrl(campaign)
       if (!fullUrl) {
         return
       }
-      const shortLink = await getShortLink(fullUrl)
+      const shortLink = await getShortLink(fullUrl, customPath)
       shortUrl = shortLink
     } catch (err) {
       if (err instanceof AxiosError) {
@@ -75,6 +77,8 @@
   }
 
   $: fullUrl = generateFullUrl(campaign)
+
+
 </script>
 
 <div class="flex flex-col gap-2 w-full">
@@ -89,6 +93,13 @@
 
   <Button type="button" onClick={generateShortUrl} label="Generate Short Link" />
 
+  <Input
+    bind:value={customPath}
+    id="customPath"
+    label="Custom shortlink path"
+    placeholder="custom path..."
+    helperText={`https://${import.meta.env.VITE_SHORT_IO_DOMAIN}/custom-path`}
+  />
   <h1 class="font-bold text-xl">Short link</h1>
   {#if shortUrl}
     <CopyToClipboard text={shortUrl} />

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -15,59 +15,63 @@
 
 <main class="flex flex-col p-20 gap-8 items-center">
   <h1 class="text-3xl font-bold text-center">UTM Builder</h1>
-  <form class="flex flex-col w-full max-w-md gap-4" on:submit|preventDefault={null}>
-    <Input
-      bind:value={campaign.websiteURL}
-      id="websiteURL"
-      label="Website URL"
-      placeholder="https://google.com"
-      helperText="The full website URL (e.g. https://www.example.com)"
-      required
-    />
-    <Input
-      bind:value={campaign.campaignId}
-      id="campaignId"
-      label="Campaign Id"
-      placeholder="campaign Id..."
-      helperText="The campaign id (e.g. abc.123)"
-    />
-    <Input
-      bind:value={campaign.campaignSource}
-      id="campaignSource"
-      label="Campaign source"
-      placeholder="campaign source..."
-      helperText="Identify the advertiser, site, publication (e.g. google, newsletter4)"
-      required
-    />
-    <Input
-      bind:value={campaign.campaignMedium}
-      id="campaignMedium"
-      label="Campaign medium"
-      placeholder="campaign medium..."
-      helperText="The advertising or marketing medium (e.g. cpc, banner, email)"
-      required
-    />
-    <Input
-      bind:value={campaign.campaignName}
-      id="campaignName"
-      label="Campaign name"
-      placeholder="campaign name..."
-      helperText="The individual campaign name, slogan, promo code, etc. for a product. (e.g. spring_sale)"
-    />
-    <Input
-      bind:value={campaign.campaignTerm}
-      id="campaignTerm"
-      label="Campaign term"
-      placeholder="campaign term..."
-      helperText="Identify the paid keywords (e.g. running+shoes)"
-    />
-    <Input
-      bind:value={campaign.campaignContent}
-      id="campaignContent"
-      label="Campaign content"
-      placeholder="campaign content..."
-      helperText="Use to differentiate ads or links that point to the same URL (e.g. logolink)"
-    />
-    <ShortUrl bind:campaign />
+  <form class="flex flex-row w-full gap-4 justify-center" on:submit|preventDefault={null}>
+    <div class="flex flex-col max-w-md gap-4">
+      <Input
+        bind:value={campaign.websiteURL}
+        id="websiteURL"
+        label="Website URL"
+        placeholder="https://google.com"
+        helperText="The full website URL (e.g. https://www.example.com)"
+        required
+      />
+      <Input
+        bind:value={campaign.campaignId}
+        id="campaignId"
+        label="Campaign Id"
+        placeholder="campaign Id..."
+        helperText="The campaign id (e.g. abc.123)"
+      />
+      <Input
+        bind:value={campaign.campaignSource}
+        id="campaignSource"
+        label="Campaign source"
+        placeholder="campaign source..."
+        helperText="Identify the advertiser, site, publication (e.g. google, newsletter4)"
+        required
+      />
+      <Input
+        bind:value={campaign.campaignMedium}
+        id="campaignMedium"
+        label="Campaign medium"
+        placeholder="campaign medium..."
+        helperText="The advertising or marketing medium (e.g. cpc, banner, email)"
+        required
+      />
+      <Input
+        bind:value={campaign.campaignName}
+        id="campaignName"
+        label="Campaign name"
+        placeholder="campaign name..."
+        helperText="The individual campaign name, slogan, promo code, etc. for a product. (e.g. spring_sale)"
+      />
+      <Input
+        bind:value={campaign.campaignTerm}
+        id="campaignTerm"
+        label="Campaign term"
+        placeholder="campaign term..."
+        helperText="Identify the paid keywords (e.g. running+shoes)"
+      />
+      <Input
+        bind:value={campaign.campaignContent}
+        id="campaignContent"
+        label="Campaign content"
+        placeholder="campaign content..."
+        helperText="Use to differentiate ads or links that point to the same URL (e.g. logolink)"
+      />
+    </div>
+    <div class="max-w-md w-full">
+      <ShortUrl bind:campaign />
+    </div>
   </form>
 </main>
diff --git a/src/utils/shortLink.ts b/src/utils/shortLink.ts
@@ -1,9 +1,10 @@
 import axios from 'axios'
 
-export async function getShortLink(url: string): Promise<string> {
+export async function getShortLink(url: string, customPath?: string): Promise<string> {
   const body = {
     domain: import.meta.env.VITE_SHORT_IO_DOMAIN,
     originalURL: url,
+    path: customPath,
   }
 
   const { data } = await axios.post('https://api.short.io/links/public', body, {