feat: prefix base url for all links

astro.config.mjs

@@ -176,7 +176,7 @@ export default defineConfig({
         mdx({
             rehypePlugins: [
                 rehypeHeadingIds,
-                rehypeRelativeAssets,
+                [rehypeRelativeAssets, { base: isGithubPages ? '/website' : '' }],
             ]
         }),
         react(),

src/components/card.v2.tsx

@@ -1,6 +1,8 @@
 import type { ReactNode } from "react";
 import {truncateStringToLength} from "../lib/utils.ts";
 
+const BASE = import.meta.env.BASE_URL;
+
 export type CardTypeProps = {
     title: string;
     summary: string;
@@ -14,7 +16,7 @@ export default function CardV2(props: CardTypeProps) {
         <li className="shadow-xl bg-light-surface dark:bg-dark-surface rounded-lg overflow-clip transition-all duration-300 hover:shadow-2xl hover:opacity-95">
             <a href={`${props.link}`} className="block">
                 <div className="h-48 bg-white overflow-clip flex items-center justify-center">
-                    <img src={props?.cover ?? "/assets/og/default.jpg"}
+                    <img src={props?.cover ?? `${BASE}assets/og/default.jpg`}
                          alt={props.title || "Article cover image"}
                          loading="lazy"
                          className="w-auto h-auto"/>

src/components/featured-news.astro

@@ -4,21 +4,22 @@ import { HiArrowSmRight } from "react-icons/hi";
 const news = (await getCollection("news"))
     .sort((a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime())
     .splice(0, 3);
+const BASE = import.meta.env.BASE_URL;
 ---
 
 <ul class="flex flex-col gap-y-4">
     {news.map((article) => {
         return (
                 <li>
-                    <a href={`/news/${article.id.replace(/\.mdx$/, "")}`}>
+                    <a href={`${BASE}news/${article.id.replace(/\.mdx$/, "")}`}>
                         <span class="link block">{article.data.title}</span>
                         <time class="datetime block text-sm">{article.data.date}</time>
                     </a>
                 </li>
         )
     })}
     <li>
-        <a href="/news" class="link flex items-center">
+        <a href={`${BASE}news`} class="link flex items-center">
             More news
             <HiArrowSmRight/>
         </a>

src/components/footer.tsx

@@ -2,6 +2,8 @@ import { SiFlickr, SiLinkedin, SiYoutube } from "react-icons/si";
 import { FaTwitter } from "react-icons/fa";
 import React from "react";
 
+const BASE = import.meta.env.BASE_URL;
+
 const Footer = () => {
     return (
         <footer className="bg-slate-50 py-12 px-4 md:px-12 dark:bg-dark-surface mt-24" aria-labelledby="footer-heading">
@@ -21,17 +23,17 @@ const ElixirBrand = () => {
     return (
         <div className="col-span-full lg:col-span-1 place-content-end">
             <div className="flex flex-col justify-between items-center lg:items-start gap-y-12">
-                <a href="/" className="sm:order-1">
+                <a href={BASE} className="sm:order-1">
                     <img
                         alt="ELIXIR Norway Logo"
-                        src="/assets/logos/elixir-no-light.svg"
+                        src={`${BASE}assets/logos/elixir-no-light.svg`}
                         className="hidden dark:block h-28 lg:h-36 w-auto"
                         width="auto"
                         height="144"
                     />
                     <img
                         alt="ELIXIR Norway Logo"
-                        src="/assets/logos/elixir-no-dark.svg"
+                        src={`${BASE}assets/logos/elixir-no-dark.svg`}
                         className="block dark:hidden h-24 w-auto"
                         width="auto"
                         height="96"
@@ -62,17 +64,17 @@ const ElixirBrand = () => {
 const ElixirOrgs = () => {
 
     const orgs = [
-        ["https://uib.no/", "/assets/logos/orgs/uib.svg", "UiB logo"],
-        ["https://uio.no/", "/assets/logos/orgs/uio.svg", "UiO logo"],
-        ["https://uit.no/", "/assets/logos/orgs/uit.svg", "UiT logo"],
-        ["https://ntnu.no/", "/assets/logos/orgs/ntnu.svg", "NTNU logo"],
-        ["https://nmbu.no/", "/assets/logos/orgs/nmbu.svg", "NMBU logo"],
+        ["https://uib.no/", `${BASE}assets/logos/orgs/uib.svg`, "UiB logo"],
+        ["https://uio.no/", `${BASE}assets/logos/orgs/uio.svg`, "UiO logo"],
+        ["https://uit.no/", `${BASE}assets/logos/orgs/uit.svg`, "UiT logo"],
+        ["https://ntnu.no/", `${BASE}assets/logos/orgs/ntnu.svg`, "NTNU logo"],
+        ["https://nmbu.no/", `${BASE}assets/logos/orgs/nmbu.svg`, "NMBU logo"],
     ];
 
     const funders = [
-        ["https://forskningsradet.no/", "/assets/logos/orgs/nfr.svg", "Research Council of Norway logo"],
-        ["https://www.nordforsk.org", "/assets/logos/orgs/nordforsk.svg", "Nordforsk logo"],
-        ["https://research-and-innovation.ec.europa.eu/", "/assets/logos/orgs/eu.svg", "EU co-funded logo"],
+        ["https://forskningsradet.no/", `${BASE}assets/logos/orgs/nfr.svg`, "Research Council of Norway logo"],
+        ["https://www.nordforsk.org", `${BASE}assets/logos/orgs/nordforsk.svg`, "Nordforsk logo"],
+        ["https://research-and-innovation.ec.europa.eu/", `${BASE}assets/logos/orgs/eu.svg`, "EU co-funded logo"],
     ];
 
     return (
@@ -118,10 +120,10 @@ const Links = () => {
         <div
             className="col-span-full lg:col-span-1 text-right place-content-end place-items-end place-self-center lg:place-self-end">
             <div role="list" className="flex sm:flex-row lg:flex-col gap-y-2 gap-x-2 [&_*]:text-gray-800">
-                <a href="/research-support" className="text-sm leading-6">Support </a>
+                <a href={`${BASE}research-support`} className="text-sm leading-6">Support </a>
                 <a href="https://elixir-europe.org/about-us/vacancies" className="text-sm leading-6">Careers</a>
-                <a href="/about" className="text-sm leading-6">Organisations</a>
-		        <a href="/accessibility" className="text-sm leading-6">Accessibility</a>
+                <a href={`${BASE}about`} className="text-sm leading-6">Organisations</a>
+                <a href={`${BASE}accessibility`} className="text-sm leading-6">Accessibility</a>
             </div>
         </div>
     );

src/components/navigation.tsx

@@ -5,9 +5,11 @@ import { IoSearch } from "react-icons/io5";
 import CommandPalette from "./command-palette.tsx";
 import ThemeToggle from "./theme-toggle.tsx";
 
+const BASE = import.meta.env.BASE_URL;
+
 const navigation = [
     {
-        href: "/about",
+        href: `${BASE}about`,
         name: "About",
         sections: [
             { id: "organization", name: "Organization" },
@@ -16,12 +18,12 @@ const navigation = [
             { id: "international-collaboration", name: "International Collaboration\n" },
         ]
     },
-    { href: "/research-support", name: "Research Support" },
-    { href: "/services", name: "Services" },
-    { href: "/events", name: "Events" },
-    { href: "/training", name: "Training" },
-    { href: "/funding-and-projects", name: "Funding & Projects" },
-    { href: "/news", name: "News" },
+    { href: `${BASE}research-support`, name: "Research Support" },
+    { href: `${BASE}services`, name: "Services" },
+    { href: `${BASE}events`, name: "Events" },
+    { href: `${BASE}training`, name: "Training" },
+    { href: `${BASE}funding-and-projects`, name: "Funding & Projects" },
+    { href: `${BASE}news`, name: "News" },
 ];
 
 export const Navigation = ({ pathname }) => {
@@ -54,18 +56,18 @@ export const Navigation = ({ pathname }) => {
                      className="sticky max-w-full 2xl:max-w-[90%] top-0 z-50 flex items-center justify-between pb-6 px-6 pt-6 lg:pb-0 lg:px- mx-auto">
                     <CommandPalette {...{ open, setOpen }} />
                     <div className="flex lg:flex-1">
-                        <a href="/" className="-m-1.5 p-1.5">
+                        <a href={BASE} className="-m-1.5 p-1.5">
                             <span className="sr-only">ELIXIR Norway</span>
                             <img
                                 alt="ELIXIR Norway logo"
-                                src="/assets/logos/elixir-no-light.svg"
+                                src={`${BASE}assets/logos/elixir-no-light.svg`}
                                 className="hidden dark:block h-20 w-auto"
                                 width="auto"
                                 height="80"
                             />
                             <img
                                 alt="ELIXIR Norway logo"
-                                src="/assets/logos/elixir-no-dark.svg"
+                                src={`${BASE}assets/logos/elixir-no-dark.svg`}
                                 className="block dark:hidden h-20 w-auto"
                                 width="auto"
                                 height="80"
@@ -111,18 +113,18 @@ export const Navigation = ({ pathname }) => {
                     <DialogPanel
                         className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
                         <div className="flex items-center justify-between">
-                            <a href="/" className="-m-1.5 p-1.5">
+                            <a href={BASE} className="-m-1.5 p-1.5">
                                 <span className="sr-only">ELIXIR Norway</span>
                                 <img
                                     alt="ELIXIR Norway logo"
-                                    src="/assets/logos/elixir-no-light.svg"
+                                    src={`${BASE}assets/logos/elixir-no-light.svg`}
                                     className="hidden dark:block h-16 w-auto"
                                     width="auto"
                                     height="80"
                                 />
                                 <img
                                     alt="ELIXIR Norway logo"
-                                    src="/assets/logos/elixir-no-dark.svg"
+                                    src={`${BASE}assets/logos/elixir-no-dark.svg`}
                                     className="block dark:hidden h-16 w-auto"
                                     width="auto"
                                     height="80"

src/components/people.astro

@@ -75,7 +75,7 @@ const resolveLayoutClass = () => {
 <Fragment>
     {isSummary ? (
             <div class="text-center">
-                <A href="/about/everyone">70 amazing souls collaborate at Elixir Norway. See them all here.</A>.
+                <A href={`${import.meta.env.BASE_URL}about/everyone`}>70 amazing souls collaborate at Elixir Norway. See them all here.</A>.
             </div>
     ) : (
             <ul class={`grid gap-y-4 gap-x-4 place-content-center ${resolveLayoutClass()}`}>
@@ -90,7 +90,7 @@ const resolveLayoutClass = () => {
                                     {!hidePicture && (
                                             <div class="mt-1 mr-2 flex-shrink-0 w-14 h-14 rounded-full overflow-hidden">
                                                 <img alt={person.name}
-                                                     src={person.photo}
+                                                     src={`${import.meta.env.BASE_URL}${person.photo.replace(/^\//, '')}`}
                                                      class="object-cover aspect-square"/>
                                             </div>
                                     )}

src/components/services-list.astro

@@ -9,7 +9,7 @@ console.log(services);
         {services.map((service) => (
                 <li class={`overflow-clip bg-light-surface dark:bg-dark-surface shadow-2xl relative px-6 py-6 flex animate__animated animate__fadeIn`}
                     data-tags={`${service.tags?.join(",")}`}>
-                    <a href={`/services/${idToSlug(service.id)}`}>
+                    <a href={`${import.meta.env.BASE_URL}services/${idToSlug(service.id)}`}>
                         {service.tags.includes("service") && (
                                 <span class="absolute shadow top-0 z-10 text-xs right-0 text-white bg-brand-primary px-1.5 py-0.5 rounded-bl opacity-75">
                                     Node Service

src/components/simple-icon-cards.astro

@@ -3,24 +3,25 @@ import { FaBookOpen } from "react-icons/fa";
 import { RiGovernmentFill } from "react-icons/ri";
 import { IoIosPaper } from "react-icons/io";
 
+const BASE = import.meta.env.BASE_URL;
 const cards = [
     {
         name: 'Case Studies',
         Icon: FaBookOpen,
         color: "bg-green-500",
-        href: '/about/case-studies',
+        href: `${BASE}about/case-studies`,
     },
     {
         name: 'Publications',
         Icon: IoIosPaper,
         color: "bg-red-500",
-        href: '/about/publications',
+        href: `${BASE}about/publications`,
     },
     {
         name: 'Political Impact',
         Icon: RiGovernmentFill,
         color: "bg-yellow-500",
-        href: '/about/political-impact',
+        href: `${BASE}about/political-impact`,
     },
 ]
 ---

src/components/team-section.tsx

@@ -1,6 +1,8 @@
 import type { FunctionComponent, PropsWithChildren } from "react";
 import React from "react";
 
+const BASE = import.meta.env.BASE_URL;
+
 type TeamSectionComponent = FunctionComponent<PropsWithChildren<{
     title?: string,
     layout?: "relaxed" | "compact"
@@ -56,7 +58,7 @@ const Member = ({ name, title, organization, displayOrgLogo = true, photo, hideP
         <div
             className={`absolute w-12 p-0.5 ${resolveOrgCssShape()} bottom-2 right-2 overflow-hidden bg-white border-2 border-white`}>
             <img
-                src={`/assets/logos/orgs/${resolveMemberOrgImageAsset()}`}
+                src={`${BASE}assets/logos/orgs/${resolveMemberOrgImageAsset()}`}
                 alt="Organization Logo"
                 className="w-full h-full object-contain"
             />
@@ -68,7 +70,7 @@ const Member = ({ name, title, organization, displayOrgLogo = true, photo, hideP
             {!hidePhoto && <div className="relative">
                 <img
                     className="w-full rounded-2xl aspect-[6/6] object-cover"
-                    src={photo ?? "/assets/placeholders/person.png"}
+                    src={photo ?? `${BASE}assets/placeholders/person.png`}
                     alt={name}
                 />
                 {organization && displayOrgLogo ? MemberOrgLogo : null}

src/components/universities.tsx

@@ -1,33 +1,35 @@
 import React from "react";
 
+const BASE = import.meta.env.BASE_URL;
+
 const Universities = () => {
     return (
         <div className="grid grid-cols-2 gap-5 sm:grid-cols-3 lg:grid-cols-5 place-content-center">
             <Entry
-                src="/assets/logos/orgs/uib.svg"
+                src={`${BASE}assets/logos/orgs/uib.svg`}
                 alt="University of Bergen"
                 location="Bergen"
-                href="/about/bergen"/>
+                href={`${BASE}about/bergen`}/>
             <Entry
-                src="/assets/logos/orgs/uio.svg"
+                src={`${BASE}assets/logos/orgs/uio.svg`}
                 alt="University of Oslo"
                 location="Oslo"
-                href="/about/oslo"/>
+                href={`${BASE}about/oslo`}/>
             <Entry
-                src="/assets/logos/orgs/uit.svg"
+                src={`${BASE}assets/logos/orgs/uit.svg`}
                 alt="The Arctic University of Norway"
                 location="Tromsø"
-                href="/about/tromso"/>
+                href={`${BASE}about/tromso`}/>
             <Entry
-                src="/assets/logos/orgs/nmbu.svg"
+                src={`${BASE}assets/logos/orgs/nmbu.svg`}
                 alt="Norwegian University of Life Sciences"
                 location="Ås"
-                href="/about/aas"/>
+                href={`${BASE}about/aas`}/>
             <Entry
-                src="/assets/logos/orgs/ntnu.svg"
+                src={`${BASE}assets/logos/orgs/ntnu.svg`}
                 alt="Norwegian University of Science and Technology"
                 location="Trondheim"
-                href="/about/trondheim"/>
+                href={`${BASE}about/trondheim`}/>
         </div>
     );
 }

src/layouts/base.astro

@@ -27,15 +27,15 @@ const { seo } = Astro.props;
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta name="generator" content={Astro.generator} />
-        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <link rel="icon" type="image/svg+xml" href={`${import.meta.env.BASE_URL}favicon.svg`} />
 
         <SEOHead {...seo} />
 
         <!-- Pagefind Search -->
-        <script is:inline>
+        <script is:inline define:vars={{ pagefindBase: import.meta.env.BASE_URL }}>
             (async () => {
                 try {
-                    window.pagefind = await import("/pagefind/pagefind.js");
+                    window.pagefind = await import(pagefindBase + "pagefind/pagefind.js");
                     await window.pagefind.options({
                         ranking: { pageLength: 0.35 },
                     });

src/layouts/page.astro

@@ -40,8 +40,11 @@ const finalSeo = frontmatter?.seo || seo;
 // Resolve relative asset paths (./file.png) to their public URL using the page pathname
 function resolvePageAsset(src: string): string {
     if (!src?.startsWith('./')) return src;
-    const pagePath = Astro.url.pathname.replace(/\/$/, '');
-    return `/content${pagePath}/${src.slice(2)}`;
+    const base = import.meta.env.BASE_URL.replace(/\/$/, '');
+    const pathname = Astro.url.pathname.replace(/\/$/, '');
+    // Strip base prefix so the content path doesn't include it
+    const contentPath = base && pathname.startsWith(base) ? pathname.slice(base.length) : pathname;
+    return `${base}/content${contentPath}/${src.slice(2)}`;
 }
 const finalCover = rawCover
     ? { ...rawCover, source: resolvePageAsset(rawCover.source) }

src/lib/utils.ts

@@ -58,5 +58,6 @@ export const resolveContentAsset = (entryId: string, assetPath: string): string
     if (!assetPath?.startsWith('./')) return assetPath;
     // "news/2025-05-26_ELITMa/index.mdx" → strip filename → "news/2025-05-26_ELITMa"
     const dir = entryId.replace(/\/[^/]+$/, '');
-    return `/content/${dir}/${assetPath.slice(2)}`;
+    const base = import.meta.env.BASE_URL.replace(/\/$/, '');
+    return `${base}/content/${dir}/${assetPath.slice(2)}`;
 };

src/pages/events/index.astro

@@ -27,7 +27,7 @@ events.sort((a, b) => parseDate(b.data.date) - parseDate(a.data.date));
             events.map((entry) => {
                 return (
                     <CardV2
-                        link={`/events/${idToSlug(entry.id)}`}
+                        link={`${import.meta.env.BASE_URL}events/${idToSlug(entry.id)}`}
                         title={entry.data.title}
                         summary={entry.data.summary}
                         cover={entry.data?.cover?.source

src/pages/funding-and-projects/index.astro

@@ -169,7 +169,7 @@ const _filters = [
             {_projects.map((project) => {
                 return (
                         <ProjectCard project={project} title={project.title}
-                                     href={`/funding-and-projects/${idToSlug(project.id)}`}>
+                                     href={`${import.meta.env.BASE_URL}funding-and-projects/${idToSlug(project.id)}`}>
                             {project.summary}
                         </ProjectCard>
                 );

src/pages/news/index.astro

@@ -24,7 +24,7 @@ news.sort((a, b) => parseDate(b.data.date) - parseDate(a.data.date));
         {news.map((entry) => {
             return (
                     <CardV2
-                            link={`/news/${idToSlug(entry.id)}`}
+                            link={`${import.meta.env.BASE_URL}news/${idToSlug(entry.id)}`}
                             title={entry.data.title}
                             summary={entry.data.summary}
                             cover={entry.data?.cover?.source