Add nuxt-link

canopas · Feb 15, 2024 · 1c96dbc · 1c96dbc
1 parent bb3c369
commit 1c96dbc
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 58 deletions.
diff --git a/nuxt-frontend/components/home-new/ContributionSection.vue b/nuxt-frontend/components/home-new/ContributionSection.vue
@@ -40,10 +40,12 @@
           <source :data-src="contribution.video[0]" type="video/mp4" />
         </video>
 
-        <div
-          @click="
-            openBlog(contribution.link, 'tap_home_github_contribution_section')
+        <nuxt-link
+          :to="contribution.link"
+          @click.native="
+            $mixpanel.track('tap_home_github_contribution_section')
           "
+          target="_blank"
           class="relative flex flex-col basis-1/2 xl:basis-3/5 2xl:basis-[66%] my-auto w-full translate-y-0 bg-white p-4 xl:p-8 shadow-[0_0px_10px_rgba(0,0,0,0.1)] active:scale-[0.98]"
           :class="[index % 2 == 0 ? 'rounded-r-xl' : 'rounded-l-xl']"
         >
@@ -109,7 +111,7 @@
               </a>
             </div>
           </div>
-        </div>
+        </nuxt-link>
       </div>
     </div>
   </div>
@@ -123,7 +125,7 @@ import jcAnimationsMp4 from "@/assets/images/contribution/animations/JetpackComp
 import jcAnimationsWebm from "@/assets/images/contribution/animations/JetpackComposeAnimations.webm";
 import config from "@/config.js";
 import lozad from "lozad";
-import { setGithubStars, openBlog } from "@/utils.js";
+import { setGithubStars } from "@/utils.js";
 import { mapState } from "pinia";
 import { useContributionStore } from "@/stores/contribution";
 
@@ -135,7 +137,6 @@ export default {
   },
   data() {
     return {
-      openBlog,
       websiteOpenSourceUrl: config.WEBSITE_OPEN_SOURCE_URL,
       contributions: [
         {
@@ -172,7 +173,7 @@ export default {
         () => this.cData,
         (data) => {
           setGithubStars(this.contributions, data);
-        },
+        }
       );
       if (this.cData != null) {
         setGithubStars(this.contributions, this.cData);

diff --git a/nuxt-frontend/components/home-new/ContributionSectionMobile.vue b/nuxt-frontend/components/home-new/ContributionSectionMobile.vue
@@ -32,10 +32,10 @@
         </video>
       </div>
 
-      <div
-        @click="
-          openBlog(contribution.link, 'tap_home_github_contribution_section')
-        "
+      <nuxt-link
+        :to="contribution.link"
+        @click.native="$mixpanel.track('tap_home_github_contribution_section')"
+        target="_blank"
         class="absolute top-[50%] flex flex-col w-[67%] md:w-[52%] translate-y-[-50%] bg-[#FFFFFF] p-2.5 sm:p-4 shadow-[0_0px_10px_rgba(0,0,0,0.1)] active:scale-[0.98] rounded-xl md:rounded"
         :class="[
           index % 2 == 0
@@ -97,7 +97,7 @@
             </a>
           </div>
         </div>
-      </div>
+      </nuxt-link>
     </div>
   </div>
 </template>
@@ -110,7 +110,7 @@ import jcAnimationsMp4 from "@/assets/images/contribution/animations/JetpackComp
 import jcAnimationsWebm from "@/assets/images/contribution/animations/JetpackComposeAnimations.webm";
 import config from "@/config.js";
 import lozad from "lozad";
-import { setGithubStars, openBlog } from "@/utils.js";
+import { setGithubStars } from "@/utils.js";
 import { mapState } from "pinia";
 import { useContributionStore } from "@/stores/contribution";
 
@@ -122,7 +122,6 @@ export default {
   },
   data() {
     return {
-      openBlog,
       websiteOpenSourceUrl: config.WEBSITE_OPEN_SOURCE_URL,
       contributions: [
         {
@@ -159,7 +158,7 @@ export default {
         () => this.cData,
         (data) => {
           setGithubStars(this.contributions, data);
-        },
+        }
       );
       if (this.cData != null) {
         setGithubStars(this.contributions, this.cData);

diff --git a/nuxt-frontend/components/home-new/HomeIndex.vue b/nuxt-frontend/components/home-new/HomeIndex.vue
@@ -6,7 +6,7 @@
     <ServiceSectionMobile class="block lg:hidden" ref="service" />
     <CaseStudy ref="casestudies" />
     <ClientReview ref="clientReview" />
-    <BlogSection ref="blogs" />
+    <!-- <BlogSection ref="blogs" /> -->
     <ContributionSection
       class="hidden lg:block"
       ref="contributions"
@@ -49,9 +49,9 @@ const ClientReview = defineAsyncComponent(
 const CTASection = defineAsyncComponent(
   () => import("@/components/mobile-app-development/CTASection2.vue"),
 );
-const BlogSection = defineAsyncComponent(
-  () => import("@/components/home-new/BlogSection.vue"),
-);
+// const BlogSection = defineAsyncComponent(
+//   () => import("@/components/home-new/BlogSection.vue"),
+// );
 const NewFooter = defineAsyncComponent(
   () => import("@/components/partials/NewFooter.vue"),
 );
@@ -67,7 +67,7 @@ export default {
     ContributionSection,
     ContributionSectionMobile,
     CTASection,
-    BlogSection,
+    // BlogSection,
     NewFooter,
   },
   data() {

diff --git a/nuxt-frontend/components/services/SuccessStories.vue b/nuxt-frontend/components/services/SuccessStories.vue
@@ -55,15 +55,19 @@
           v-for="(story, index) in stories"
           :key="index"
           class="cursor-pointer"
-          @click="openPortfolio(story)"
         >
-          <img
-            :src="story.image[0]"
-            :srcset="`${story.image[0]} 400w, ${story.image[1]} 800w`"
-            class="mb-2 w-full h-[600px] lg:h-full object-cover"
-            alt="story-image"
-            loading="lazy"
-          />
+          <nuxt-link
+            :to="story.url"
+            @click.native="$mixpanel.track(story.event)"
+          >
+            <img
+              :src="story.image[0]"
+              :srcset="`${story.image[0]} 400w, ${story.image[1]} 800w`"
+              class="mb-2 w-full h-[600px] lg:h-full object-cover"
+              alt="story-image"
+              loading="lazy"
+            />
+          </nuxt-link>
         </swiper-slide>
         <div class="swiper-pagination"></div>
       </swiper>

diff --git a/nuxt-frontend/components/services/WhatWeOfferDesktop.vue b/nuxt-frontend/components/services/WhatWeOfferDesktop.vue
@@ -14,16 +14,17 @@
             :ref="'image-' + index"
           >
             <div class="absolute top-1/2 -translate-y-1/2">
-              <div
-                class="py-6"
-                @click="service.showServices ? openUrl(service.url) : ''"
-                :class="service.showServices ? 'cursor-pointer' : ''"
-              >
-                <span
-                  class="desk-header-2 text-black-87 bg-black-underline-out box-decoration-clone bg-no-repeat pb-[5px] bg-[length:100%] hover:animate-mulitpleUnderlineOut"
-                  >{{ service.title }}
-                </span>
-              </div>
+              <nuxt-link :to="service.showServices ? service.url : '#'">
+                <div
+                  class="py-6"
+                  :class="service.showServices ? 'cursor-pointer' : ''"
+                >
+                  <span
+                    class="desk-header-2 text-black-87 bg-black-underline-out box-decoration-clone bg-no-repeat pb-[5px] bg-[length:100%] hover:animate-mulitpleUnderlineOut"
+                    >{{ service.title }}
+                  </span>
+                </div>
+              </nuxt-link>
               <div class="mobile-header-3-regular text-black-60">
                 <p>{{ service.description }}</p>
               </div>
@@ -97,8 +98,8 @@ export default {
           image: uiuxdesign800w,
           title: "UI/UX Design",
           description:
-            "We help our clients see themselves through the eyes of the people whom they are trying to reach. Then we design something amazing.\
-            Product design is about how it works, but we make sure it look nice too. Then, we'll design a mobile or web experience that feels great.",
+            `We help our clients see themselves through the eyes of the people whom they are trying to reach. Then we design something amazing.
+            Product design is about how it works, but we make sure it look nice too. Then, we'll design a mobile or web experience that feels great.`,
         },
         {
           path: [100, 100],
@@ -134,7 +135,7 @@ export default {
       const elementIdx = elementInViewPort(this.$refs);
       if (elementIdx) {
         const index = parseInt(
-          elementIdx ? elementIdx.charAt(elementIdx.length - 1) : 0,
+          elementIdx ? elementIdx.charAt(elementIdx.length - 1) : 0
         );
 
         if (this.prevIndex != index) {
@@ -184,9 +185,6 @@ export default {
         this.lastScrollY = scrollY;
       }
     },
-    openUrl(url) {
-      window.open(url, "_self");
-    },
   },
   mounted() {
     this.height = window.innerHeight;

diff --git a/nuxt-frontend/components/services/WhatWeOfferMobile.vue b/nuxt-frontend/components/services/WhatWeOfferMobile.vue
@@ -17,15 +17,16 @@
         </div>
 
         <div :class="service.class" class="px-2.5 sm:px-20 pb-10">
-          <div
-            class="py-5 sm:py-6"
-            @click="service.showServices ? openUrl(service.url) : ''"
-            :class="service.showServices ? 'cursor-pointer' : ''"
-          >
-            <span class="mobile-header-3-semibold text-black-87">{{
-              service.title
-            }}</span>
-          </div>
+          <nuxt-link :to="service.showServices ? service.url : '#'">
+            <div
+              class="py-5 sm:py-6"
+              :class="service.showServices ? 'cursor-pointer' : ''"
+            >
+              <span class="mobile-header-3-semibold text-black-87">{{
+                service.title
+              }}</span>
+            </div>
+          </nuxt-link>
           <div class="sub-h3-regular text-black-60">
             <p>{{ service.description }}</p>
           </div>
@@ -122,10 +123,5 @@ export default {
       ],
     };
   },
-  methods: {
-    openUrl(url) {
-      window.open(url, "_self");
-    },
-  },
 };
 </script>