From bc132aca10f41b44045121e0b19f2e54292f6048 Mon Sep 17 00:00:00 2001
From: g4ze <bhaiyajionline17@gmail.com>
Date: Sun, 20 Oct 2024 11:52:47 +0530
Subject: [PATCH] env variablkes and public paths

---
 .env.development          | 3 +++
 .env.production           | 2 ++
 src/app/page.jsx          | 8 ++++----
 src/components/Navbar.jsx | 4 ++--
 4 files changed, 11 insertions(+), 6 deletions(-)
 create mode 100644 .env.development
 create mode 100644 .env.production

diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..a5175b0
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,3 @@
+# for development only
+NEXT_PUBLIC_PUBLIC_PATH=""
+# for example public_path/assets/image.jpg
diff --git a/.env.production b/.env.production
new file mode 100644
index 0000000..21728c9
--- /dev/null
+++ b/.env.production
@@ -0,0 +1,2 @@
+# for production only
+NEXT_PUBLIC_PUBLIC_PATH=https://gdg-oncampus-bu.github.io/landing-page-WIP/
diff --git a/src/app/page.jsx b/src/app/page.jsx
index f0d8e70..e4430c2 100644
--- a/src/app/page.jsx
+++ b/src/app/page.jsx
@@ -6,11 +6,11 @@ import EventsSection from "@/components/EventsSection";
 import Links from "@/components/Links";
 
 export default function Home() {
+  const publicPath = process.env.NEXT_PUBLIC_PUBLIC_PATH ;
   const [eventsData, setEventsData] = useState([]);
-
   useEffect(() => {
     const fetchEventsData = async () => {
-      const response = await fetch("/data/events.json");
+      const response = await fetch(publicPath+"/data/events.json");
       const data = await response.json();
       setEventsData(data);
     };
@@ -30,7 +30,6 @@ export default function Home() {
       }, 600);
     }
   };
-
   return (
     <>
       <Navbar />
@@ -38,7 +37,8 @@ export default function Home() {
       <div
         className="flex flex-col items-center justify-center min-h-screen p-8 pb-20 gap-8 sm:p-20 text-center"
         style={{
-          backgroundImage: `url('/assets/image1.png')`,
+          // we are hardcoding the image url here due to gh pages and next contraints
+          backgroundImage: `url('https://gdg-oncampus-bu.github.io/landing-page-WIP/assets/image1.png')`,
           backgroundSize: "contain",
           backgroundRepeat: "no-repeat",
           backgroundPosition: "bottom",
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 6420720..c6e7fd2 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react";
 import Image from "next/image";
-import gdg_logo from "../../public/assets/logo_gdg.png";
 
 export default function Navbar() {
+  const public_path = process.env.NEXT_PUBLIC_PUBLIC_PATH
   const [visible, setVisible] = useState(false);
   const [scrollPosition, setScrollPosition] = useState(0);
 
@@ -36,7 +36,7 @@ export default function Navbar() {
             className="flex items-center space-x-3 rtl:space-x-reverse"
           >
             <Image
-              src={gdg_logo}
+              src={public_path + "/assets/logo_gdg.png"}
               alt="GDG Logo"
               width={32}
               height={32}