chore: refactor code

client/Dockerfile

@@ -12,14 +12,14 @@ RUN npm run build
 
 FROM node:18-alpine AS production
 
-LABEL "website.name"="short1url"
-LABEL "maintainer"="thuongtruong1009"
+LABEL "website.name"="onelink"
+LABEL "maintainer"="thuongtruong109"
 LABEL "org.opencontainers.image.authors"="Tran Nguyen Thuong Truong <[email protected]>"
 LABEL "org.opencontainers.image.version"="1.0"
 LABEL "org.opencontainers.image.description"="Ship your link in an easier way"
 LABEL "org.opencontainers.image.licenses"="MIT"
-LABEL "org.opencontainers.image.source"="https://github.com/thuongtruong1009/short1url/api"
-LABEL "org.opencontainers.image.documentation"="https://github.com/thuongtruong1009/short1url/blob/main/README.md"
+LABEL "org.opencontainers.image.source"="https://github.com/thuongtruong109/onelink/api"
+LABEL "org.opencontainers.image.documentation"="https://github.com/thuongtruong109/onelink/blob/main/README.md"
 
 WORKDIR /app
 

client/app.vue

@@ -24,27 +24,33 @@ const onClearInput = () => {
   toolOption.value = EBUTTON_OPTION.SHORTEN;
 };
 
-onMounted(() => {
-  getAllShorted();
-});
-
-const getAllShorted = async () => {
-  const ipData = await FetchMethod(config.public.ipSource);
-  const allData = await FetchMethod(
-    `${config.public.apiBase}/all?ip=${ipData?.ip}`,
-    {
-      method: "POST",
-    }
-  );
-
-  shortedUrl.value = allData;
-};
+// onMounted(() => {
+//   getAllShorted();
+// });
+
+// const getAllShorted = async () => {
+//   const ipData = await FetchMethod(config.public.ipSource, 
+//     {
+//       method: "GET",
+//       mode: 'no-cors',
+//     }
+//   );
+//   const allData = await FetchMethod(
+//     `${config.public.apiBase}/own?ip=${ipData?.ip}`,
+//     {
+//       method: "POST",
+//       mode: 'no-cors', 
+//     }
+//   );
+
+//   shortedUrl.value = allData;
+// };
 
 const onShorten = async () => {
   if (!url.value) return;
   toolOption.value = EBUTTON_OPTION.SHORTEN;
 
-  const shortenData = await FetchMethod(`${config.public.apiBase}`, {
+  const shortenData = await FetchMethod(`${config.public.apiBase}/`, {
     method: "POST",
     body: JSON.stringify({ url: url.value }),
   });
@@ -95,7 +101,7 @@ const onClickOptionBtn = (option: EBUTTON_OPTION) => {
               @click="onClickOptionBtn(EBUTTON_OPTION.QRCODE)"
             >
               <QR />
-              <span>QR Code</span>
+              <span>QR</span>
             </button>
           </li>
 
@@ -108,7 +114,7 @@ const onClickOptionBtn = (option: EBUTTON_OPTION) => {
               @click="onClickOptionBtn(EBUTTON_OPTION.BARCODE)"
             >
               <Bar />
-              <span>Bar Code</span>
+              <span>Bar</span>
             </button>
           </li>
         </ul>
@@ -136,10 +142,11 @@ main {
   align-items: center;
   min-height: 100vh;
   overflow: hidden;
-  background-image: url("/landing.png");
+  background-image: url("/landing.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: 100% 100%;
+  background-attachment: fixed;
 
   section {
     border-radius: 0.5rem;
@@ -148,12 +155,8 @@ main {
 
     .form {
       display: flex;
-      flex-direction: column;
       align-items: center;
       justify-content: space-between;
-      margin: 1rem;
-      padding: 2rem 1rem;
-      background: rgba(247, 247, 247, 0.3);
       border-radius: 0.5rem;
       width: 100%;
 
@@ -167,21 +170,23 @@ main {
 
       ul {
         @include flex-center;
-        width: 100%;
-        margin-top: 1rem;
+        width: fit-content;
         list-style: none;
 
         li {
           .bar_btn {
             @include button($blue);
+            padding: 1.1rem 0.8rem;
           }
 
           .qr_btn {
             @include button($purple);
+            padding: 1.1rem 0.8rem;
           }
 
           .short_btn {
             @include button($red);
+            padding: 1.1rem 0.8rem;
           }
         }
       }

client/assets/_base.scss

@@ -30,3 +30,7 @@ a {
     text-decoration: none;
     color: inherit;
 }
+
+a:hover {
+    text-decoration: underline;
+}

client/components/Footer.vue

@@ -2,7 +2,7 @@
   <footer>
     <p>
       Copyright
-      <a href="https://github.com/thuongtruong1009">@thuongtruong1009</a>, 2023
+      <a href="https://github.com/thuongtruong1009">@thuongtruong</a>, 2023
     </p>
   </footer>
 </template>
@@ -11,7 +11,7 @@
 footer {
   position: absolute;
   bottom: 0;
-  color: white;
+  color: gray;
   text-align: center;
   padding: 1rem;
   font-size: 0.75rem;

client/components/Header.vue

@@ -2,27 +2,28 @@
   <header>
     <div>
       <img src="/favicon.svg" alt="logo" />
-      <h1>Short1url</h1>
+      <h1>Onelink</h1>
     </div>
     <blockquote>Ship your link in an easier way</blockquote>
   </header>
 </template>
 
 <style lang="scss" scoped>
 header {
+  padding: 1rem 0 2rem;
+  
   div {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    font-size: 1.7rem;
-    margin-top: 3rem;
+    font-size: 1.5rem;
     letter-spacing: 0.25rem;
     font-family: "Lobster Two", cursive;
 
     img {
-      width: 3.2rem;
-      height: 3.2rem;
+      width: 2.5rem;
+      height: 2.5rem;
       object-fit: cover;
       object-position: center;
       margin-right: 0.5rem;
@@ -35,7 +36,7 @@ header {
   }
 
   blockquote {
-    color: white;
+    color: gray;
     margin: 1rem 0 2rem;
     font-size: 1.2rem;
     text-align: center;

client/components/ShortedItem.vue

@@ -26,7 +26,7 @@ const onCopy = (text: string) => {
 
 <template>
   <li>
-    <h4>Your shorted URL:</h4>
+    <h4>Shorted URL:</h4>
     <a :href="props.url" target="_blank">{{ props.url }}</a>
     <button @click="onCopy(props.url)">
       <Copy v-if="!isCopied" />
@@ -41,7 +41,7 @@ li {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
   background: $light-blue;
   padding: 0.5rem;
   border-radius: 0.5rem;

client/components/icons/Copy.vue

@@ -1,3 +1,3 @@
 <template>
-    <svg xmlns="http://www.w3.org/2000/svg" width="1.2rem" height="1.2rem" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 9V6.2c0-1.12 0-1.68.218-2.108c.192-.377.497-.682.874-.874C10.52 3 11.08 3 12.2 3h5.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C21 4.52 21 5.08 21 6.2v5.6c0 1.12 0 1.68-.218 2.108a2.002 2.002 0 0 1-.874.874C19.48 15 18.92 15 17.803 15H15M9 9H6.2c-1.12 0-1.68 0-2.108.218a1.999 1.999 0 0 0-.874.874C3 10.52 3 11.08 3 12.2v5.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874c.427.218.987.218 2.105.218h5.607c1.117 0 1.676 0 2.104-.218a2 2 0 0 0 .874-.874c.218-.428.218-.987.218-2.105V15M9 9h2.8c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874c.218.427.218.987.218 2.105V15"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1.1em" height="1.1em" viewBox="0 0 20 20"><path fill="currentColor" d="M8 3a1 1 0 0 0-1 1v.5a.5.5 0 0 1-1 0V4a2 2 0 0 1 2-2h.5a.5.5 0 0 1 0 1zm-1 9a1 1 0 0 0 1 1h.5a.5.5 0 0 1 0 1H8a2 2 0 0 1-2-2v-.5a.5.5 0 0 1 1 0zm0-5.5a.5.5 0 0 0-1 0v3a.5.5 0 0 0 1 0zM16 3a1 1 0 0 1 1 1v.5a.5.5 0 0 0 1 0V4a2 2 0 0 0-2-2h-.5a.5.5 0 0 0 0 1zm0 10a1 1 0 0 0 1-1v-.5a.5.5 0 0 1 1 0v.5a2 2 0 0 1-2 2h-.5a.5.5 0 0 1 0-1zm1.5-7a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 1 0v-3a.5.5 0 0 0-.5-.5m-7-4a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zM10 13.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M4 6h1v1H4a1 1 0 0 0-1 1v6.5A2.5 2.5 0 0 0 5.5 17H12a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H5.5A3.5 3.5 0 0 1 2 14.5V8a2 2 0 0 1 2-2"/></svg>
 </template>

client/components/icons/Link.vue

@@ -1,3 +1,3 @@
 <template>
-    <svg xmlns="http://www.w3.org/2000/svg" width="1.2rem" height="1.3rem" viewBox="0 0 24 24"><path fill="currentColor" d="M8.465 11.293c1.133-1.133 3.109-1.133 4.242 0l.707.707l1.414-1.414l-.707-.707c-.943-.944-2.199-1.465-3.535-1.465s-2.592.521-3.535 1.465L4.929 12a5.008 5.008 0 0 0 0 7.071a4.983 4.983 0 0 0 3.535 1.462A4.982 4.982 0 0 0 12 19.071l.707-.707l-1.414-1.414l-.707.707a3.007 3.007 0 0 1-4.243 0a3.005 3.005 0 0 1 0-4.243l2.122-2.121z"/><path fill="currentColor" d="m12 4.929l-.707.707l1.414 1.414l.707-.707a3.007 3.007 0 0 1 4.243 0a3.005 3.005 0 0 1 0 4.243l-2.122 2.121c-1.133 1.133-3.109 1.133-4.242 0L10.586 12l-1.414 1.414l.707.707c.943.944 2.199 1.465 3.535 1.465s2.592-.521 3.535-1.465L19.071 12a5.008 5.008 0 0 0 0-7.071a5.006 5.006 0 0 0-7.071 0z"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1.1em" height="1.1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.2 19.404V13.8H4.596m14.808-3.6H13.8V4.596M21 3l-7.2 7.2m-3.6 3.6L3 21"/></svg>
 </template>

client/nuxt.config.ts

@@ -1,3 +1,4 @@
+import path from "path";
 import pkg from "./package.json";
 
 export default defineNuxtConfig({
@@ -36,16 +37,16 @@ export default defineNuxtConfig({
     },
   },
 
-  modules: [
-    "@nuxtjs/robots",
-    [
-      "@nuxtjs/robots",
-      {
-        UserAgent: "*",
-        Disallow: "/",
-      },
-    ],
-  ],
+  // modules: [
+  //   "@nuxtjs/robots",
+  //   [
+  //     "@nuxtjs/robots",
+  //     {
+  //       UserAgent: "*",
+  //       Disallow: "/",
+  //     },
+  //   ],
+  // ],
 
   runtimeConfig: {
     public: {

client/package.json

@@ -1,8 +1,8 @@
 {
-  "name": "short1url",
+  "name": "onelink",
   "private": true,
   "version": "1.0",
-  "description": "Ship your link in an easier way",
+  "description": "Ship your link in an easiest way",
   "keywords": [
     "docker",
     "nginx",
@@ -15,13 +15,13 @@
     "scss",
     "typescript"
   ],
-  "homepage": "https://github.com/thuongtruong1009/short1url#readme",
+  "homepage": "https://github.com/thuongtruong1009/onelink#readme",
   "bugs": {
-    "url": "https://github.com/thuongtruong1009/short1url/issues"
+    "url": "https://github.com/thuongtruong1009/onelink/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/thuongtruong1009/short1url"
+    "url": "git+https://github.com/thuongtruong1009/onelink"
   },
   "funding": "https://paypal.me/thuongtruong1009",
   "license": "MIT",