feat: use relative paths for cover images

src/components/TitleCardNew.astro

@@ -1,4 +1,5 @@
 ---
+import path from "path";
 import PostMetadata from "./PostMetadata.astro";
 interface Props {
     class: string;
@@ -22,6 +23,7 @@ import { Icon } from 'astro-icon/components';
 import Button from "./control/Button.astro";
 import {i18n} from "../i18n/translation";
 import I18nKey from "../i18n/i18nKey";
+import {getDir} from "../utils/url-utils";
 
 const hasCover = image !== undefined && image !== null && image !== '';
 
@@ -69,7 +71,7 @@ const { remarkPluginFrontmatter } = await entry.render();
                   class="transition opacity-0 group-hover:opacity-100 text-white text-5xl">
             </Icon>
         </div>
-        <ImageBox src={image} alt="Cover Image of the Post"
+        <ImageBox src={image} basePath={path.join("content/posts/", getDir(entry.id))} alt="Cover Image of the Post"
                   class="w-full h-full">
         </ImageBox>
     </a>}

src/components/misc/ImageBox.astro

@@ -5,10 +5,11 @@ interface Props {
     src: string;
     class?: string;
     alt?: string
+    basePath?: string
 }
 import { Image } from 'astro:assets';
 
-const {id, src, alt} = Astro.props;
+const {id, src, alt, basePath = '/'} = Astro.props;
 const className = Astro.props.class;
 
 const isLocal = !(src.startsWith('/') || src.startsWith('http') || src.startsWith('https') || src.startsWith('data:'));
@@ -18,7 +19,7 @@ const isLocal = !(src.startsWith('/') || src.startsWith('http') || src.startsWit
 let img;
 if (isLocal) {
     const files = import.meta.glob<ImageMetadata>("../../**", { import: 'default' });
-    let normalizedPath = "../../" + path.normalize(src).replace(/\\/g, "/");
+    let normalizedPath = path.normalize(path.join("../../", basePath, src)).replace(/\\/g, "/");
     img = await (files[normalizedPath])();
 }
 

src/pages/posts/[...slug].astro

@@ -7,10 +7,11 @@ import PostMetadata from "@components/PostMetadata.astro";
 import Button from "@components/control/Button.astro";
 import {i18n} from "@i18n/translation";
 import I18nKey from "@i18n/i18nKey";
-import {getPostUrlBySlug} from "@utils/url-utils";
+import {getDir, getPostUrlBySlug} from "@utils/url-utils";
 import License from "@components/misc/License.astro";
 import {licenseConfig} from "src/config";
 import Markdown from "@components/misc/Markdown.astro";
+import path from "path";
 
 export async function getStaticPaths() {
     const blogEntries = await getCollection('posts', ({ data }) => {
@@ -72,7 +73,7 @@ const { remarkPluginFrontmatter } = await entry.render();
             <!-- always show cover as long as it has one -->
 
             {entry.data.image &&
-                <ImageBox src={entry.data.image} class="mb-8 rounded-xl"/>
+                <ImageBox src={entry.data.image} basePath={path.join("content/posts/", getDir(entry.id))} class="mb-8 rounded-xl"/>
             }
 
             {!entry.data.image && <div class="border-[var(--line-divider)] border-dashed border-b-[1px] mb-5"></div>}

src/utils/url-utils.ts

@@ -18,3 +18,11 @@ export function getCategoryUrl(category: string): string | null {
   if (!category) return null
   return `/archive/category/${category}`
 }
+
+export function getDir(path: string): string {
+    const lastSlashIndex = path.lastIndexOf('/')
+    if (lastSlashIndex < 0) {
+        return '/'
+    }
+    return path.substring(0, lastSlashIndex + 1)
+}