Setup to deploy website on s3

canopas · May 9, 2024 · 636b8f8 · 636b8f8
1 parent 3b02ab7
commit 636b8f8
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 58 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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={{