From aebff49be9b2fe2bef8ced96118680f89b46bfa2 Mon Sep 17 00:00:00 2001
From: Riyyi <riyyi3@gmail.com>
Date: Sat, 5 Apr 2025 16:37:40 +0200
Subject: [PATCH] Fix article image path on index page

---
 content.config.ts                    |  2 +-
 src/components/content/prose-img.vue | 15 ++++-----------
 src/pages/articles/index.vue         |  6 +++---
 src/utils/index.ts                   | 15 +++++++++++++++
 4 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/content.config.ts b/content.config.ts
index 8d9ceea..eb95476 100644
--- a/content.config.ts
+++ b/content.config.ts
@@ -16,4 +16,4 @@ export default defineContentConfig({
 			})
 		})
 	}
-})
+});
diff --git a/src/components/content/prose-img.vue b/src/components/content/prose-img.vue
index d0787cf..5e28204 100644
--- a/src/components/content/prose-img.vue
+++ b/src/components/content/prose-img.vue
@@ -8,8 +8,7 @@
 </template>
 
 <script setup lang="ts">
-import { withTrailingSlash, withLeadingSlash, joinURL } from "ufo"
-import { useRuntimeConfig, computed } from "#imports"
+import { computed } from "#imports"
 
 import ImageComponent from "#build/mdc-image-component.mjs"
 
@@ -43,17 +42,11 @@ const props = defineProps({
 		type: String,
 		default: "lazy" // eager, lazy
 	},
-})
+});
 
 const refinedSrc = computed(() => {
-	if (props.src?.startsWith("/") && !props.src.startsWith("//")) {
-		const _base = withLeadingSlash(withTrailingSlash(useRuntimeConfig().app.baseURL))
-		if (_base !== "/" && !props.src.startsWith(_base)) {
-			return joinURL(_base, props.src)
-		}
-	}
-	return props.src
-})
+	return getPublicPath(props.src);
+});
 </script>
 
 <!--
diff --git a/src/pages/articles/index.vue b/src/pages/articles/index.vue
index c32c7fa..ce631ec 100644
--- a/src/pages/articles/index.vue
+++ b/src/pages/articles/index.vue
@@ -5,7 +5,7 @@
 		<div class="row pt-5" v-for="article in articles" :key="article.path">
 			<div class="col-5 col-lg-4 col-xl-3">
 				<NuxtLink v-if="article.img" :to="article.path">
-					<img class="img-fluid" :src="article.img as string" :alt="article.title" loading="lazy" :title="article.title">
+					<img class="img-fluid" :src="getPublicPath(article.img)" :alt="article.title" loading="lazy" :title="article.title">
 				</NuxtLink>
 			</div>
 			<div class="col-7 col-lg-8 col-xl-9">
@@ -41,7 +41,7 @@ a h4:hover {
 </style>
 
 <script setup lang="ts">
-import { useAsyncData, queryCollection } from "#imports";
+import { useAsyncData, queryCollection } from "#imports"
 
-const { data: articles } = await useAsyncData("articles", () => queryCollection("content").order("date", "DESC").all())
+const { data: articles } = await useAsyncData("articles", () => queryCollection("content").order("date", "DESC").all());
 </script>
diff --git a/src/utils/index.ts b/src/utils/index.ts
index f793ce5..69dad12 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1 +1,16 @@
+import { withTrailingSlash, withLeadingSlash, joinURL } from "ufo"
+import { useRuntimeConfig } from "#imports"
+
 export const isDev = process.env.NODE_ENV === "development";
+
+export const getPublicPath = function (path: string): string {
+	if (path?.startsWith("/") && !path.startsWith("//")) {
+		const _base = withLeadingSlash(withTrailingSlash(useRuntimeConfig().app.baseURL));
+		if (_base !== "/" && !path.startsWith(_base)) {
+			return joinURL(_base, path);
+		}
+	}
+	return path;
+}
+
+// datetime format