fix: add base prefix for urls

src/components/blog/Loop.astro

@@ -12,14 +12,15 @@ interface Props {
 }
 
 const { posts, title } = Astro.props
+const base = import.meta.env.BASE_URL
 ---
 
 <section>
   {title && <h2>{title}</h2>}
   <ul role="list">
     {posts.map(({ body, data, slug }) => (
       <li role="listitem">
-        <a href={`/blog/${slug}`}>
+        <a href={`${base}/blog/${slug}`}>
           {data.heroImage && (
             <Picture
               src={data.heroImage} height={360} width={720}

src/components/blog/Pager.astro

@@ -8,22 +8,23 @@ interface Props extends HTMLAttributes<'nav'> {
 }
 
 const { prev, next, ...attrs } = Astro.props
+const base = import.meta.env.BASE_URL
 ---
 
 <nav aria-labelledby="pager-label" {...attrs}>
   <h2 class="sr-only" id="pager-label">Other Posts</h2>
   <ul role="list">
     {prev && (
       <li role="listitem" class="pager__prev">
-        <a href={`/blog/${prev.slug}`}>
+        <a href={`${base}/blog/${prev.slug}`}>
           <span>Previous Post</span>
           {prev.data.title && <span>{prev.data.title}</span>}
         </a>
       </li>
     )}
     {next && (
       <li role="listitem" class="pager__next">
-        <a href={`/blog/${next.slug}`}>
+        <a href={`${base}/blog/${next.slug}`}>
           <span>Next Post</span>
           {next.data.title && <span>{next.data.title}</span>}
         </a>

src/components/layout/Footer.astro

@@ -9,10 +9,11 @@ const updated = new Intl.DateTimeFormat(SITE.LOCALE, {
   hourCycle: 'h23',
   timeZone: SITE.TIMEZONE,
 })
+const base = import.meta.env.BASE_URL
 ---
 
 <footer>
-	<div>&copy; {year} <a href="/">{SITE.TITLE}</a>. All rights reserved.</div>
+	<div>&copy; {year} <a href={base}>{SITE.TITLE}</a>. All rights reserved.</div>
   <div>Built with <a href="https://astro.build">{Astro.generator}</a></div>
   <small>updated: <time datetime={now.toISOString()}>{updated.format(now)}</time></small>
 </footer>

src/components/layout/Head.astro

@@ -8,10 +8,12 @@ interface Props {
 	image?: string
 }
 
+const base = import.meta.env.BASE_URL
+
 const {
 	title,
 	description,
-	image = '/blog-placeholder-1.jpg'
+	image = `${base}/blog-placeholder-1.jpg`
 } = Astro.props
 const { pathname } = Astro.url
 const canonical = new URL(pathname, Astro.site)
@@ -41,7 +43,7 @@ const canonical = new URL(pathname, Astro.site)
 <meta property="twitter:description" content={description} />
 <meta property="twitter:image" content={new URL(image, Astro.url)} />
 
-<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-<link rel="preload" href="/fonts/recursive.woff2" as="font" type="font/woff" crossorigin />
+<link rel="icon" type="image/svg+xml" href={`${base}/favicon.svg`} />
+<link rel="preload" href={`${base}/fonts/recursive.woff2`} as="font" type="font/woff" crossorigin />
 
 <link rel="alternate" href={new URL('rss.xml', Astro.site)} type="application/rss+xml" title="Your Site's Title" />

src/components/layout/Navigation.astro

@@ -2,16 +2,18 @@
 import NavLink from '@src/components/layout/Link.astro'
 
 import { SITE } from '@src/consts'
+
+const base = import.meta.env.BASE_URL
 ---
 
 <nav>
   <section>
     <div>
-      <NavLink href="/">{SITE.TITLE}</NavLink>
+      <NavLink href={base}>{SITE.TITLE}</NavLink>
     </div>
     <ul role="list">
-      <li role="listitem"><NavLink href="/blog">Blog</NavLink></li>
-      <li role="listitem"><NavLink href="/about">About</NavLink></li>
+      <li role="listitem"><NavLink href={`${base}/blog`}>Blog</NavLink></li>
+      <li role="listitem"><NavLink href={`${base}/about`}>About</NavLink></li>
     </ul>
   </section>
 </nav>

src/layouts/Base.astro

@@ -13,10 +13,12 @@ interface Props {
 	image?: string
 }
 
+const base = import.meta.env.BASE_URL
+
 const {
   title,
   description,
-  image = '/blog-placeholder-1.jpg'
+  image = `${base}/blog-placeholder-1.jpg`
 } = Astro.props
 ---
 

src/pages/404.astro

@@ -9,14 +9,15 @@ import { getAllPosts } from '@src/utils/posts'
 const posts = await getAllPosts(SITE.LATEST_POSTS)
 const title = '404: Page not found!'
 const description = 'The page you are looking for does not exist.'
+const base = import.meta.env.BASE_URL
 ---
 
 <Base {title} {description}>
 	<header slot="before-content"><h1>{title}</h1></header>
   <p>
     The page you are looking for could not be found,
     please try the <a href="/">home page</a> or check the
-    <a href="/blog">blog</a> for more posts.
+    <a href={`${base}/blog`}>blog</a> for more posts.
   </p>
 	<BlogLoop {posts} title="Latest Posts" />
   <hr>

src/pages/blog/[slug].astro

@@ -46,13 +46,14 @@ const {
   tagged
 } = post.data
 const { Content } = await post.render()
+const base = import.meta.env.BASE_URL
 ---
 
 <Base {title} {description} {image}>
 	{image && (
     <header slot="before-breadcrumbs">
       <Picture
-        src={image} height={510} width={1020} alt=""
+        src={base + image} height={510} width={1020} alt=""
         loading="eager" formats={['jpg']}
       />
     </header>

src/pages/blog/tags/[slug]/[...page].astro

@@ -39,12 +39,13 @@ export async function getStaticPaths (
 const { current, page } = Astro.props
 const title = `Tagged: ${current.name}`
 const description = `Listing of all posts tagged with "${current.name}"`
+const base = import.meta.env.BASE_URL
 ---
 
 <Base {title} {description}>
 	<header slot="before-breadcrumbs"><h1>{title}</h1></header>
 	<BlogLoop posts={page.data} />
-  <p><a href="/blog/tags">View All Tags</a></p>
+  <p><a href={`${base}/blog/tags`}>View All Tags</a></p>
 	<Pagination {page} />
 </Base>
 

src/utils/posts.ts

@@ -2,6 +2,8 @@
 import { slug } from 'github-slugger'
 import { type CollectionEntry, getCollection } from 'astro:content'
 
+const base = import.meta.env.BASE_URL
+
 export type TaggedItem = {
   count?: number
   href: string
@@ -42,7 +44,7 @@ export async function getAllPosts (
 
   for (let { data } of posts) {
     data.tagged = data.tags.map((tag: string) => ({
-      href: `/blog/tags/${slug(tag)}`,
+      href: `${base}/blog/tags/${slug(tag)}`,
       name: tag,
     })) || []
   }
@@ -60,7 +62,7 @@ export async function getAllTags (
 
   return tags.map((tag: string) => ({
     count: filterByTag(tag, posts).length,
-    href: `/blog/tags/${slug(tag)}`,
+    href: `${base}/blog/tags/${slug(tag)}`,
     name: tag,
   })).sort(
     (a, b) => b.count - a.count