Create cloudformation stack for SSR lambda deployment

.github/workflows/deploy-frontend-test.yml

@@ -0,0 +1,42 @@
+name: DeployFrontendTestLambda
+
+on:
+  push:
+
+jobs:
+  deploy-backend-prod:
+    runs-on: ubuntu-latest
+    permissions:
+      id-token: write
+      contents: read
+    steps:
+      - name: Checkout
+        uses: actions/[email protected]
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          role-to-assume: arn:aws:iam::${{ secrets.AWS_ACCOUNT_ID }}:role/github-actions-frontend-access
+          aws-region: ap-south-1
+
+      - name: Build frontend and copy zip to S3
+        run: |
+          cd nuxt-frontend
+          sed -i "s|VITE_IFRAMELY_KEY_VALUE|${{ secrets.IFRAMELY_KEY }}|g" config.js
+          sed -i "s|VITE_RECAPTCHA_SITE_KEY_VALUE|${{ secrets.RECAPTCHA_SITE_KEY }}|g" config.js
+          sed -i "s|RESOURCES_URL|${{ secrets.RESOURCES_URL }}|g" config.js
+          sed -i "s|CLOUDFRONT_URL_VALUE|${{ secrets.CLOUDFRONT_URL_VALUE }}|g" config.js
+          sh ./../deploy/generate-sitemap.sh https://dev-stack.canopas.com https://dev-stack-api.canopas.com
+          yarn install --frozen-lockfile && yarn build
+          aws s3 sync ./.output/public s3://canopas-website-static --exclude "*.js"
+          aws s3 sync ./.output/public s3://canopas-website-static --include "*.js" --content-type "application/javascript"
+
+      - name: Deploy cloudformation stack
+        id: canopas-website-prod-lambda-stack-frontend
+        uses: aws-actions/aws-cloudformation-github-deploy@v1
+        with:
+          name: canopas-website-prod-lambda-stack-frontend
+          template: infrastructure/frontend-test.yml
+          capabilities: CAPABILITY_IAM,CAPABILITY_NAMED_IAM
+          timeout-in-minutes: "10"
+          no-fail-on-empty-changeset: "1"

infrastructure/frontend-test.yml

@@ -0,0 +1,29 @@
+AWSTemplateFormatVersion: "2010-09-09"
+Transform: AWS::Serverless-2016-10-31
+Description: NuxtJS deployment with AWS Lambda function
+Resources:
+  HttpApi:
+    Type: AWS::Serverless::HttpApi
+    Properties:
+      StageName: $default
+      Name: canopas website lambda frontend
+
+  HttpApiFunction:
+    Type: AWS::Serverless::Function
+    Properties:
+      CodeUri: .output/server/
+      Handler: index.handler
+      Runtime: nodejs20.x
+      Architectures:
+        - x86_64
+      MemorySize: 128
+      Timeout: 100
+      Description: Nuxt 3 SSR Lambda
+      Events:
+        ProxyResource:
+          Type: HttpApi
+          Properties:
+            ApiId: 
+              Ref: HttpApi
+            Path: $default
+            Method: any

nuxt-frontend/assets/css/app.css

@@ -11,7 +11,7 @@
   font-family: FuturaLT-Bold;
   font-style: bold;
   font-weight: 700;
-  src: url(../fonts/FuturaLT-Bold-Subset.woff2);
+  src: url(../fonts/FuturaLT-Bold-Subset.woff2) format("woff2");
 }
 
 @font-face {
@@ -59,15 +59,15 @@
   font-family: Roboto-Bold;
   font-style: normal;
   font-weight: 600;
-  src: url(../fonts/Roboto-Bold-Subset.woff2);
+  src: url(../fonts/Roboto-Bold-Subset.woff2) format("woff2");
 }
 
 @font-face {
   font-display: swap;
   font-family: Roboto-Medium;
   font-style: normal;
   font-weight: 500;
-  src: url(../fonts/Roboto-Medium-Subset.woff2);
+  src: url(../fonts/Roboto-Medium-Subset.woff2) format("woff2");
 }
 
 @font-face {

nuxt-frontend/components/android-app-development/CaseStudySection.vue

@@ -20,7 +20,7 @@
         class="mt-6 relative lg:hidden"
         :class="item.className"
       >
-        <a
+        <nuxt-link
           class="cursor-pointer"
           :href="item.url"
           @click.native="$mixpanel.track('tap_android_app_portfolio')"
@@ -41,7 +41,7 @@
               v-html="item.content"
             ></span>
           </div>
-        </a>
+        </nuxt-link>
       </div>
       <div
         v-for="item in cta"
@@ -104,7 +104,7 @@
                   {{ item.title }}
                 </span>
               </div>
-              <a
+              <nuxt-link
                 class="cursor-pointer"
                 :href="item.url"
                 @click.native="$mixpanel.track('tap_android_app_portfolio')"
@@ -114,7 +114,7 @@
                   class="mt-4 font-opensans-semibold desk-header-3 text-black-87"
                   v-html="item.deskcontent"
                 ></h2
-              ></a>
+              ></nuxt-link>
               <span
                 class="mt-4 text-black-60 sub-h3-medium md:mobile-header-3-medium"
                 v-html="item.description"
@@ -159,7 +159,7 @@
               </div>
             </div>
             <div>
-              <a
+              <nuxt-link
                 class="cursor-pointer"
                 :href="item.url"
                 @click.native="$mixpanel.track('tap_android_app_portfolio')"
@@ -170,7 +170,7 @@
                   :srcset="`${item.images[2]} 400w,${item.images[3]} 800w`"
                   class="mt-12 h-80 lg:h-[24.75006rem] xl:h-[29.75006rem] w-[25.87525rem] lg:w-[30.87525rem] xl:w-[29.87525rem] object-fit"
                   alt="CaseStudyImage"
-              /></a>
+              /></nuxt-link>
             </div>
           </div>
         </swiper-slide>

nuxt-frontend/components/backend-development/CaseStudySection.vue

@@ -18,7 +18,7 @@
         class="mt-6 relative lg:hidden"
         :class="item.className"
       >
-        <a
+        <nuxt-link
           class="cursor-pointer"
           :href="item.url"
           @click.native="$mixpanel.track('tap_backend_app_portfolio')"
@@ -41,7 +41,7 @@
             </h2>
             <p class="sub-h3-regular text-black-60" v-html="item.content"></p>
           </div>
-        </a>
+        </nuxt-link>
       </div>
     </div>
     <!-- ------------------------ MOBILE UI END---------------------- -->
@@ -72,7 +72,7 @@
                 </span>
               </div>
               <div class="flex flex-col gap-4">
-                <a
+                <nuxt-link
                   class="cursor-pointer"
                   :href="item.url"
                   @click.native="$mixpanel.track('tap_backend_app_portfolio')"
@@ -82,15 +82,15 @@
                     class="desk-header-3 text-black-87"
                     v-html="item.deskcontent"
                   ></h3
-                ></a>
+                ></nuxt-link>
                 <p
                   class="text-black-60 mobile-header-3-medium"
                   v-html="item.description"
                 ></p>
               </div>
             </div>
             <div class="flex-1">
-              <a
+              <nuxt-link
                 class="cursor-pointer"
                 :href="item.url"
                 @click.native="$mixpanel.track('tap_backend_app_portfolio')"
@@ -102,7 +102,7 @@
                   class="w-[29.79663rem] h-[28.95819rem] object-fit mx-auto"
                   :alt="item.title"
                   loading="lazy"
-              /></a>
+              /></nuxt-link>
             </div>
           </div>
         </swiper-slide>

nuxt-frontend/components/home-new/BlogSection.vue

@@ -16,7 +16,7 @@
           Well, at least the community says Hell Yeah. Our blogs hosted on
           medium have
           <span
-            class="secondary-color sub-h1-semibold lg:mobile-header-2-semibold"
+            class="v2-canopas-gradient-text sub-h1-semibold lg:mobile-header-2-semibold"
             >100k+</span
           >
           minutes monthly reading time and it’s only rising.

nuxt-frontend/components/home-new/CaseStudy.vue

@@ -22,7 +22,7 @@
       class="container mt-4 mb-6 text-black-60 text-center sub-h1-regular lg:mobile-header-2-regular"
     >
       <span
-        class="sub-h1-semibold lg:mobile-header-2-semibold relative after:absolute after:-bottom-0.5 after:right-0 after:content-[''] after:w-[89px] md:after:w-[90px] lg:after:w-[108px] xl:after:w-[120px] after:h-2.5 md:after:h-3.5 after:bg-[#FFF3F7] after:-z-[1] secondary-color"
+        class="sub-h1-semibold lg:mobile-header-2-semibold relative after:absolute after:-bottom-0.5 after:right-0 after:content-[''] after:w-[89px] md:after:w-[90px] lg:after:w-[108px] xl:after:w-[120px] after:h-2.5 md:after:h-3.5 after:bg-[#FFF3F7] after:-z-[1] v2-canopas-gradient-text"
         >1M+ users</span
       >
       use our apps every day

nuxt-frontend/components/home-new/LandingSection.vue

@@ -80,7 +80,11 @@
                   alt="client-image"
                 />
               </div>
-              <a v-if="client.plusIcon" href="/contact" aria-label="contact">
+              <nuxt-link
+                v-if="client.plusIcon"
+                href="/contact"
+                aria-label="contact"
+              >
                 <div
                   class="w-10 h-10 border-[2px] border-[#EBEBEB] rounded-full bg-white"
                   :class="client.className"
@@ -90,7 +94,7 @@
                     name="fa6-solid:plus"
                   />
                 </div>
-              </a>
+              </nuxt-link>
             </div>
             <div class="pl-2.5 md:pl-1.5">
               <div class="flex mt-[3px]">

nuxt-frontend/components/home-new/ServiceSection.vue

@@ -7,7 +7,7 @@
       How we can help you
     </p>
 
-    <a
+    <nuxt-link
       v-for="(service, index) in services"
       :key="service"
       @mouseover="activeIndex = index"
@@ -52,7 +52,7 @@
           {{ service.title }}
         </span>
       </div>
-    </a>
+    </nuxt-link>
   </div>
 </template>
 

nuxt-frontend/components/home-new/ServiceSectionMobile.vue

@@ -31,9 +31,12 @@
           loading="lazy"
           class="-mr-5 h-[50px] w-[50px]"
         />
-        <a :href="service.url" class="mobile-header-3 v2-canopas-gradient-text">
+        <nuxt-link
+          :href="service.url"
+          class="mobile-header-3 v2-canopas-gradient-text"
+        >
           {{ service.title }}
-        </a>
+        </nuxt-link>
         <div class="pt-4 sub-h3-regular text-black-60 sm:w-[70%] md:w-[65%]">
           {{ service.content }}
         </div>

nuxt-frontend/components/partials/NewHeader.vue

@@ -37,7 +37,6 @@
                   @mouseover="
                     showContributionMenu = navbar.name == 'Contribution'
                   "
-                  v-if="!navbar.target"
                   :to="navbar.url"
                   @click.native="$mixpanel.track(navbar.event)"
                   class="group relative mr-5 inline-block sm:mr-[30px] lg:mr-2 xl:mr-[30px]"
@@ -55,26 +54,19 @@
                     >{{ navbar.name }}</span
                   >
                 </nuxt-link>
-                <a
-                  v-else
-                  class="relative mr-5 inline-block after:absolute after:bottom-0 after:left-0 after:top-[27px] after:h-[3px] after:w-full after:origin-bottom-left after:scale-x-0 after:from-[#f2709c] after:to-[#ff9472] after:duration-300 after:bg-gradient-[90deg] hover:from-[#ff9472] hover:to-[#f2709c] hover:bg-clip-text hover:text-transparent hover:bg-gradient-[270.11deg] hover:after:origin-bottom-left hover:after:scale-x-100 sm:mr-[30px] lg:mr-2 xl:mr-[30px]"
-                  :href="navbar.url"
-                  :target="navbar.target"
-                  >{{ navbar.name }}</a
-                >
 
                 <ul
                   v-show="showContributionMenu"
                   @mouseleave="showContributionMenu = false"
                   class="absolute w-max flex-col space-y-6 rounded-[5px] border bg-white !px-6 py-[1.5rem] shadow-md lg:top-[4.5rem] lg:left-[169px] xl:left-[296px] 2xl:left-[475px]"
                 >
                   <li v-for="navbar in subMenus" :key="navbar">
-                    <a
+                    <nuxt-link
                       class="relative py-4 font-inter-medium text-[1rem] leading-[1.125rem] text-black-core/[0.6] md:text-[1.09375rem] md:leading-[1.28125rem] lg:text-[1.188rem] lg:leading-[1.437rem] after:absolute after:bottom-0 after:left-0 after:top-[42px] after:h-[3px] after:w-full after:origin-bottom-left after:scale-x-0 after:from-[#f2709c] after:to-[#ff9472] after:duration-300 after:bg-gradient-[90deg] hover:from-[#ff9472] hover:to-[#f2709c] hover:bg-clip-text hover:text-transparent hover:bg-gradient-[270.11deg] hover:after:origin-bottom-left hover:after:scale-x-100"
                       :href="navbar.url"
-                      :target="navbar.target"
+                      target="_self"
                       >{{ navbar.name }}
-                    </a>
+                    </nuxt-link>
                   </li>
                 </ul>
               </li>
@@ -128,7 +120,6 @@
             class="my-2 ml-1 py-2 lg:ml-0"
           >
             <nuxt-link
-              v-if="!navbar.target"
               :to="navbar.url == '/contributions' ? '' : navbar.url"
               @click.native="$mixpanel.track(navbar.event)"
               class="group relative mr-5 inline-block sm:mr-[30px] lg:mr-5"
@@ -146,14 +137,6 @@
             >
               {{ navbar.name }}</nuxt-link
             >
-
-            <a
-              v-else
-              class="relative mr-5 inline-block after:absolute after:bottom-0 after:left-0 after:top-[27px] after:h-[3px] after:w-full after:origin-bottom-left after:scale-x-0 after:from-[#f2709c] after:to-[#ff9472] after:duration-300 after:bg-gradient-[90deg] hover:from-[#ff9472] hover:to-[#f2709c] hover:bg-clip-text hover:text-transparent hover:bg-gradient-[270.11deg] hover:after:origin-bottom-left hover:after:scale-x-100 sm:mr-[30px]"
-              :href="navbar.url"
-              :target="navbar.target"
-              >{{ navbar.name }}</a
-            >
             <ul
               :class="
                 showContributionMenu && navbar.name == 'Contribution'
@@ -163,12 +146,12 @@
               class="flex-col space-y-6"
             >
               <li v-for="navbar in subMenus" :key="navbar">
-                <a
+                <nuxt-link
                   class="relative py-2 font-inter-medium text-[1rem] leading-[1.125rem] text-black-core/[0.6] group-hover:z-[1] group-hover:text-white md:text-[1.09375rem] md:leading-[1.28125rem] lg:text-[1.188rem] lg:leading-[1.437rem] after:absolute after:bottom-0 after:left-0 after:top-[30px] md:after:top-[35px] after:h-[3px] after:w-full after:origin-bottom-left after:scale-x-0 after:from-[#f2709c] after:to-[#ff9472] after:duration-300 after:bg-gradient-[90deg] hover:from-[#ff9472] hover:to-[#f2709c] hover:bg-clip-text hover:text-transparent hover:bg-gradient-[270.11deg] hover:after:origin-bottom-left hover:after:scale-x-100"
                   :href="navbar.url"
-                  :target="navbar.target"
+                  target="_self"
                   >{{ navbar.name }}
-                </a>
+                </nuxt-link>
               </li>
             </ul>
           </li>
@@ -192,7 +175,6 @@
 </template>
 
 <script type="module">
-import config from "@/config.js";
 export default {
   data() {
     return {
@@ -245,20 +227,17 @@ export default {
       subMenus: [
         {
           name: "Open Source",
-          target: "_self",
           url: "/contributions",
           event: "tap_header_contributions",
         },
         {
           name: "Blog",
-          target: "_self",
           url: "/blog",
           event: "tap_header_blog",
         },
         {
           name: "Resources",
           url: "/resources",
-          target: "_self",
           event: "tap_header_resources",
         },
       ],

nuxt-frontend/config.js

@@ -10,6 +10,7 @@ export default Object.freeze({
   STRAPI_URL: "RESOURCES_URL",
   VITE_IFRAMELY_KEY: "VITE_IFRAMELY_KEY_VALUE",
   VITE_RECAPTCHA_SITE_KEY: "VITE_RECAPTCHA_SITE_KEY_VALUE",
+  CLOUDFRONT_URL: "CLOUDFRONT_URL_VALUE",
   MIX_PANEL_TOKEN: "acf7239a736ff487ca6058c981a55d7e",
 
   // API urls