From dbcaf6c4cc2437717741f20431c6ce480477ca42 Mon Sep 17 00:00:00 2001
From: HJfod <60038575+HJfod@users.noreply.github.com>
Date: Tue, 5 Mar 2024 00:20:09 +0200
Subject: [PATCH] this should fix the url issues

---
 astro.config.mjs            |  1 +
 src/components/Button.astro |  3 ++-
 src/components/Link.astro   |  3 ++-
 src/components/Navbar.astro | 23 ++++++++++-------------
 src/layouts/Default.astro   | 12 ++++++------
 5 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/astro.config.mjs b/astro.config.mjs
index 91b37a7..4d72a78 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -5,5 +5,6 @@ import tailwind from "@astrojs/tailwind";
 // https://astro.build/config
 export default defineConfig({
     site: 'https://globed.dev',
+    base: '/',
     integrations: [tailwind()]
 });
diff --git a/src/components/Button.astro b/src/components/Button.astro
index e739ad2..ee83947 100644
--- a/src/components/Button.astro
+++ b/src/components/Button.astro
@@ -1,6 +1,7 @@
 ---
 const { link, style, solidWidth } = Astro.props;
-const url = link.startsWith('https') || link.startsWith('#') ? link : `${import.meta.env.BASE_URL}${link}`;
+const urlBase = import.meta.env.BASE_URL.endsWith('/') ? import.meta.env.BASE_URL.slice(0, -1) : import.meta.env.BASE_URL;
+const url = link.startsWith('https') || link.startsWith('#') ? link : `${urlBase}${link}`;
 const classList = `${style} ${Astro.slots.has('post-icon') ? 'has-post-icon' : ''} ${solidWidth === 'true' ? 'is-solid-width' : ''}`;
 ---
 
diff --git a/src/components/Link.astro b/src/components/Link.astro
index f815593..3533f2a 100644
--- a/src/components/Link.astro
+++ b/src/components/Link.astro
@@ -1,7 +1,8 @@
 ---
 const { href, style, noUnderline } = Astro.props;
 const classList = `${style} ${noUnderline === 'true' ? 'no-link-underline' : ''}`;
-const url = href.startsWith('https') || href.startsWith('#') ? href : `${import.meta.env.BASE_URL}${href}`;
+const urlBase = import.meta.env.BASE_URL.endsWith('/') ? import.meta.env.BASE_URL.slice(0, -1) : import.meta.env.BASE_URL;
+const url = href.startsWith('https') || href.startsWith('#') ? href : `${urlBase}${href}`;
 ---
 <!-- this is to prevent any unintended whitespace appearing after the link --><a href={url} class={classList}><slot/></a><style>
     a {
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index d290993..6177341 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -6,7 +6,7 @@ import discord from "../images/discord.svg?raw"
 import github from "../images/github.svg?raw"
 import kofi from "../images/kofi.svg?raw"
 
-const base = import.meta.env.BASE_URL;
+const urlBase = import.meta.env.BASE_URL.endsWith('/') ? import.meta.env.BASE_URL.slice(0, -1) : import.meta.env.BASE_URL;
 ---
 
 <nav class="
@@ -20,16 +20,16 @@ const base = import.meta.env.BASE_URL;
 ">
     <div class="grid sm:grid-cols-3 max-sm:grid-cols-2 justify-center items-center">
         <div class="flex flex-row justify-start items-center gap-3">
-            <a class="home-button" href={base}>
+            <a class="home-button" href={`${urlBase}/`}>
                 <!-- <Image src={logo} alt="Globed logo" class="w-[24px] h-[24px]"/> -->
                 <GlobeIcon/>
                 <span class="font-head text-xl">Globed</span>
             </a>
         </div>
         <div class="flex flex-row justify-center max-sm:hidden font-head text-lg">
-            <a href={base}>Home</a>
-            <a href={`${base}/install`}>Install</a>
-            <a href={`${base}/about`}>About</a>
+            <a href={`${urlBase}/`}>Home</a>
+            <a href={`${urlBase}/install`}>Install</a>
+            <a href={`${urlBase}/about`}>About</a>
         </div>
         <div class="flex flex-row justify-end">
             <a href="https://ko-fi.com/globed">
@@ -50,22 +50,19 @@ const base = import.meta.env.BASE_URL;
         </div>
     </div>
     <div id="rollover" class="flex flex-col px-4 font-head">
-        <a href={base}><span>Home</span></a>
-        <a href={`${base}/install`}><span>Install</span></a>
-        <a href={`${base}/about`}><span>About</span></a>
+        <a href={`${urlBase}/`}><span>Home</span></a>
+        <a href={`${urlBase}/install`}><span>Install</span></a>
+        <a href={`${urlBase}/about`}><span>About</span></a>
     </div>
 </nav>
 
-<script define:vars={{ base }}>
+<script>
     document.querySelectorAll('.home-button').forEach(btn => {
         btn.addEventListener('click', e => {
-            e.preventDefault();
             if (window.matchMedia("(max-width: 640px)").matches) {
+                e.preventDefault();
                 document.querySelector('nav')?.classList.toggle('open');
             }
-            else {
-                window.location.href = base;
-            }
         });
     });
 </script>
diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro
index 30435f0..747c676 100644
--- a/src/layouts/Default.astro
+++ b/src/layouts/Default.astro
@@ -4,6 +4,7 @@ import Footer from "../components/Footer.astro";
 import Navbar from "../components/Navbar.astro";
 
 const { title, description } = Astro.props;
+const urlBase = import.meta.env.BASE_URL.endsWith('/') ? import.meta.env.BASE_URL.slice(0, -1) : import.meta.env.BASE_URL;
 ---
 
 <html lang="en">
@@ -16,28 +17,27 @@ const { title, description } = Astro.props;
         <!-- title, desc and icon -->
         <title>{title}</title>
         <meta name="description" content={description}>
-        <link rel="icon" type="image/png" href={`${import.meta.env.BASE_URL}/logo.png`} />
+        <link rel="icon" type="image/png" href={`${urlBase}/logo.png`} />
 
         <!-- some embed bullshit idk -->
-        <meta property="og:url" content={import.meta.env.SITE}>
+        <meta property="og:url" content={Astro.site}>
         <meta property="og:type" content="website">
         <meta property="og:title" content="Globed - Multiplayer for Geometry Dash">
         <meta property="og:description" content={description}>
-        <meta property="og:image" content={`${import.meta.env.BASE_URL}/logo.png`}>
+        <meta property="og:image" content={`${urlBase}/logo.png`}>
         <meta property="og:image:width" content="80">
         <meta property="og:image:height" content="80">
         
         <meta name="twitter:card" content="summary">
-        <meta property="twitter:url" content={import.meta.env.SITE}>
+        <meta property="twitter:url" content={Astro.site}>
         <meta name="twitter:title" content="Globed - Multiplayer for Geometry Dash">
         <meta name="twitter:description" content={description}>
-        <meta property="twitter:image:src" content={`${import.meta.env.BASE_URL}/logo.png`}>
+        <meta property="twitter:image:src" content={`${urlBase}/logo.png`}>
     
         <!-- fonts -->
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
         <link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Open+Sans:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
-    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     </head>
 
     <body class="bg-wallpaper-darkest flex flex-col justify-stretch items-center">