From 636b8f8c1e288dc9ac57fa8132b3fbc2a19d975c Mon Sep 17 00:00:00 2001
From: cp-dharti-r <dharti.r@canopas.com>
Date: Thu, 9 May 2024 11:36:27 +0530
Subject: [PATCH] Setup to deploy website on s3

---
 .github/workflows/deploy.yml                  | 78 +++++++------------
 website/components/FoodCategory/index.tsx     |  2 +-
 website/components/ItemCard/index.tsx         |  2 +-
 website/components/YouMayLike/index.tsx       |  2 +-
 website/next.config.mjs                       |  1 +
 website/pages/category/[category].tsx         |  2 +-
 .../[restaurant]/categories/[category].tsx    |  4 +-
 .../pages/restaurants/[restaurant]/index.tsx  |  3 +-
 .../restaurants/[restaurant]/menus/[menu].tsx |  2 +-
 9 files changed, 38 insertions(+), 58 deletions(-)

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index cf45458..d353bd9 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -1,60 +1,38 @@
-name: Deploy website and admin panel
+name: Deploy website and admin panel on s3
 
 on:
   push:
     branches:
-      - main
+      - deploy-website-using-s3
 
 jobs:
-  merge:
-    runs-on: ubuntu-latest
+  build-and-deploy:
+  name: Build and Deploy
+  runs-on: ubuntu-latest
 
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v2
+  steps:
+    - name: Checkout
+      uses: actions/checkout@v2
 
-      - name: Fetch and reset main branch
-        run: |
-          git fetch origin main
-          git checkout main
-          git reset --hard origin/main
+    - name: Set up Node.js
+      uses: actions/setup-node@v2
+      with:
+        node-version: "20.x"
 
-      - name: Merge website branch to website-main
-        run: |
-          git fetch origin
-          git config user.name github-actions
-          git config user.email github-actions@github.com
-          if [ "$(git diff origin/main:website origin/website-main | wc -l)" -gt "0" ]; then
-            echo "Detected uncommitted changes in the website folder after build. Pushing changes to website-main branch."
-            git checkout website-main
-            git rm -r *
-            git checkout main -- website
-            git mv website/* .
-            ls
-            rm -r website
-            git add .
-            git commit -m "Deploy website"
-            git push origin website-main
-          else
-            echo "No changes detected in the website folder after build. Exiting."
-          fi
+    - name: Install dependencies and Build website
+      run: |
+        cd website
+        npm install
+        npm run build
 
-      - name: Merge admin branch to admin-main
-        run: |
-          git fetch origin
-          git config user.name github-actions
-          git config user.email github-actions@github.com
-          if [ "$(git diff origin/main:admin origin/admin-main | wc -l)" -gt "0" ]; then
-            echo "Detected uncommitted changes in the admin folder after build. Pushing changes to admin-main branch."
-            git checkout admin-main
-            git rm -r *
-            git checkout main -- admin
-            git mv admin/* .
-            ls
-            rm -r admin
-            git add .
-            git commit -m "Deploy admin panel"
-            git push origin admin-main
-          else
-            echo "No changes detected in the admin folder after build. Exiting."
-          fi
+    - name: Configure AWS Credentials
+      uses: aws-actions/configure-aws-credentials@v1
+      with:
+        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+        aws-region: ${{ secrets.AWS_REGION }}
+
+    - name: Deploy to S3
+      run: |
+        cd website
+        aws s3 sync ./out s3://${{ secrets.WEBSITE_BUCKET_NAME }}
diff --git a/website/components/FoodCategory/index.tsx b/website/components/FoodCategory/index.tsx
index 2d59169..d22b87c 100644
--- a/website/components/FoodCategory/index.tsx
+++ b/website/components/FoodCategory/index.tsx
@@ -55,7 +55,7 @@ const FoodCategory = () => {
   return (
     <>
       <section className="py-16 md:py-20 lg:py-28">
-        <div className="container">
+        <div className="container animated-fade">
           <SectionTitle
             title="What's on your mind?"
             paragraph="We believe in the power of expression – so go ahead, let your thoughts flow."
diff --git a/website/components/ItemCard/index.tsx b/website/components/ItemCard/index.tsx
index e7613d5..4be2e9d 100644
--- a/website/components/ItemCard/index.tsx
+++ b/website/components/ItemCard/index.tsx
@@ -67,7 +67,7 @@ const ItemCard = () => {
 
   return (
     <section className="bg-primary bg-opacity-10 py-16 md:py-20 lg:py-28">
-      <div className="container">
+      <div className="container animated-fade">
         <SectionTitle
           title="Most browsed items from the location"
           paragraph="Connect Locally: Must-Visit Places in Your Neighborhood. In our vibrant community, explore top-rated local experiences."
diff --git a/website/components/YouMayLike/index.tsx b/website/components/YouMayLike/index.tsx
index f18507e..8abe66e 100644
--- a/website/components/YouMayLike/index.tsx
+++ b/website/components/YouMayLike/index.tsx
@@ -51,7 +51,7 @@ const YouMayLike = () => {
   return (
     <>
       <section className="py-16 md:py-20 lg:py-28">
-        <div className="container">
+        <div className="container animated-fade">
           <SectionTitle
             title="You May Like This"
             paragraph="From trending dishes to hidden gems, this personalized recommendation feature ensures that your next food adventure is always exciting and tailored to your unique taste buds."
diff --git a/website/next.config.mjs b/website/next.config.mjs
index a5957a7..801bb3e 100644
--- a/website/next.config.mjs
+++ b/website/next.config.mjs
@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   // reactStrictMode: true,
+  output: "export",
   images: {
     unoptimized: true,
     domains: ["rftxzccfellupeepddjl.supabase.co"],
diff --git a/website/pages/category/[category].tsx b/website/pages/category/[category].tsx
index 7979d80..e346e03 100644
--- a/website/pages/category/[category].tsx
+++ b/website/pages/category/[category].tsx
@@ -135,7 +135,7 @@ const Category = () => {
     <>
       {categoryData ? (
         <RootLayout>
-          <section className="py-16 md:py-20 lg:py-28">
+          <section className="py-16 md:py-20 lg:py-28 animated-fade">
             <div className="container">
               <SectionTitle
                 title={categoryData.name}
diff --git a/website/pages/restaurants/[restaurant]/categories/[category].tsx b/website/pages/restaurants/[restaurant]/categories/[category].tsx
index df1a3be..34f2bef 100644
--- a/website/pages/restaurants/[restaurant]/categories/[category].tsx
+++ b/website/pages/restaurants/[restaurant]/categories/[category].tsx
@@ -116,7 +116,7 @@ const RestaurantCategory = () => {
     <>
       {categoryData ? (
         <>
-          <div className="hidden sm:block">
+          <div className="hidden sm:block animated-fade">
             <RootLayout>
               <section className="py-16 md:py-20 lg:py-28">
                 <div className="container">
@@ -199,7 +199,7 @@ const RestaurantCategory = () => {
               </section>
             </RootLayout>
           </div>
-          <div className="sm:hidden">
+          <div className="sm:hidden animated-fade">
             <NoHeaderFooterLayout>
               <header className="select-none header left-0 top-0 z-40 w-full items-center absolute p-3 flex gap-2 text-white">
                 <button
diff --git a/website/pages/restaurants/[restaurant]/index.tsx b/website/pages/restaurants/[restaurant]/index.tsx
index 86a90b7..9973956 100644
--- a/website/pages/restaurants/[restaurant]/index.tsx
+++ b/website/pages/restaurants/[restaurant]/index.tsx
@@ -203,6 +203,7 @@ const RestaurantMenu = () => {
       if (!resizableRestaurantDiv || !scrolled) return;
 
       if (window.scrollY === 0) {
+        resizableRestaurantDiv.classList.add("smooth-resize");
         resizableRestaurantDiv.style.height = "100vh";
         setScrolled(false);
       }
@@ -221,7 +222,7 @@ const RestaurantMenu = () => {
     <>
       {restaurantData ? (
         <RootLayout manageHeaderColor={true}>
-          <section className="hidden sm:block select-none">
+          <section className="hidden sm:block select-none animated-fade">
             <div className="pb-28">
               <div className="relative mx-auto mb-16 capitalize">
                 <div
diff --git a/website/pages/restaurants/[restaurant]/menus/[menu].tsx b/website/pages/restaurants/[restaurant]/menus/[menu].tsx
index c341267..02e2980 100644
--- a/website/pages/restaurants/[restaurant]/menus/[menu].tsx
+++ b/website/pages/restaurants/[restaurant]/menus/[menu].tsx
@@ -141,7 +141,7 @@ const RestaurantMenu = () => {
             <span>|</span>
             <p className="font-bold text-sm">{menuName} dishes</p>
           </header>
-          <section className="select-none">
+          <section className="select-none animated-fade">
             <div
               className="reelsContainer scrollbar-hidden animated-fade"
               style={{