Fix gh pages deployment issues (#597)

* add links instead of a * add base paths to css urls * update env definition * removed extra env variable * run prettier
UoaWDCC · Jul 7, 2024 · 522e6c2 · 522e6c2
1 parent b3b2a8e
commit 522e6c2
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 14 deletions.
diff --git a/uasc-next/environment.d.ts b/uasc-next/environment.d.ts
@@ -19,6 +19,10 @@ declare global {
       readonly NEXT_PUBLIC_BACKEND_BASE_URL: string
       /** Stripe Publishable Key */
       readonly NEXT_PUBLIC_ENV_STRIPE_PUBLISHABLE_KEY: string
+      /** Used for deployments  */
+      readonly NEXT_CONFIG_ENV?: "production" | "staging"
+      /** What all paths should be prefixed with */
+      readonly DEPLOYMENT_BASE_PATH?: string
     }
   }
 }

diff --git a/uasc-next/src/app/sections/LandingSection.tsx b/uasc-next/src/app/sections/LandingSection.tsx
@@ -2,6 +2,7 @@ import UASCHeader from "@/assets/icons/uascLOGO.svg"
 import Button from "@/components/generic/FigmaButtons/FigmaButton"
 import Facebook from "@/assets/icons/FacebookBlue.svg"
 import Instagram from "@/assets/icons/InstagramBlue.svg"
+import Link from "next/link"
 
 const LandingSection = () => (
   <section>
@@ -24,38 +25,38 @@ const LandingSection = () => (
           </p>
 
           <span>
-            <a
+            <Link
               href="https://www.facebook.com/UoAsnowsports/"
               target="_blank"
               rel="noreferrer"
             >
               <Facebook className="w-14" />
-            </a>
+            </Link>
           </span>
 
           <span>
-            <a
+            <Link
               href="https://www.instagram.com/uasc_nz/"
               target="_blank"
               rel="noreferrer"
             >
               <Instagram className="w-14" />
-            </a>
+            </Link>
           </span>
         </div>
 
         <div className="flex flex-row gap-6">
-          <a href="/register" className="w-full cursor-pointer">
+          <Link href="/register" className="w-full cursor-pointer">
             <Button variant="default-big">Sign up now!</Button>
-          </a>
-          <a href="/Login" className="ml-auto w-full cursor-pointer">
+          </Link>
+          <Link href="/Login" className="ml-auto w-full cursor-pointer">
             <Button variant="inverted-default-big">LOG IN</Button>
-          </a>
+          </Link>
         </div>
       </div>
 
       <h5 className="text-dark-blue-100 bottom-3 my-8 uppercase sm:bottom-9">
-        <a href="#about">Find out more</a>
+        <Link href="#about">Find out more</Link>
       </h5>
     </div>
   </section>

diff --git a/uasc-next/tailwind.config.ts b/uasc-next/tailwind.config.ts
@@ -1,6 +1,8 @@
 import type { Config } from "tailwindcss"
 import defaultTheme from "tailwindcss/defaultTheme"
 
+const basePath = process.env.DEPLOYMENT_BASE_PATH || ""
+
 const config: Config = {
   content: [
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
@@ -10,11 +12,10 @@ const config: Config = {
   theme: {
     extend: {
       backgroundImage: {
-        "home-ski-image": "url('/images/homeLandingBackground.png')",
-        "home-about-image": "url('/images/AboutBackgroundImage.png')",
-        "mountain-background-image":
-          "url('/images/MountainBackgroundImage.png')",
-        "book-lodge-image": "url('/images/BookLodgeBackgroundImage.png')"
+        "home-ski-image": `url('${basePath}/images/homeLandingBackground.png')`,
+        "home-about-image": `url('${basePath}/images/AboutBackgroundImage.png')`,
+        "mountain-background-image": `url('${basePath}/images/MountainBackgroundImage.png')`,
+        "book-lodge-image": `url('${basePath}/images/BookLodgeBackgroundImage.png')`
       },
       fontFamily: {
         sans: ["Inter var", ...defaultTheme.fontFamily.sans]