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">