Commit bdcf86b

HPCesia <me@hpcesia.com>
2025-02-14 06:58:30
refactor: post cover process
1 parent 867b82c
src/components/widgets/PostCard.astro
@@ -15,10 +15,9 @@ interface Props {
   category?: string;
   cover?: string;
   description: string;
-  basePath: string;
 }
 
-const { title, url, published, updated, tags, category, cover, basePath } = Astro.props;
+const { title, url, published, updated, tags, category, cover } = Astro.props;
 const className = Astro.props.class;
 
 const hasCover = cover !== '' && cover !== undefined && cover !== null;
@@ -89,7 +88,7 @@ const metas: ({ icon: string; text: string; link?: string; time?: Date } | undef
   {
     hasCover ? (
       <figure class="md:w-3/4 md:max-w-96">
-        <PostCardCover url={url} title={title} cover={cover} basePath={basePath} />
+        <PostCardCover url={url} title={title} cover={cover} />
       </figure>
     ) : (
       <figure>
src/components/widgets/PostCardCover.astro
@@ -6,10 +6,9 @@ interface Props {
   url: string;
   title: string;
   cover: string;
-  basePath?: string;
 }
 
-const { url, title, cover, basePath } = Astro.props;
+const { url, title, cover } = Astro.props;
 ---
 
 <a
@@ -22,5 +21,5 @@ const { url, title, cover, basePath } = Astro.props;
   >
     <Icon name="material-symbols:chevron-right-rounded" class="h-24 w-24 text-white" />
   </div>
-  <ImageWrapper src={cover} alt={title} basePath={basePath} />
+  <ImageWrapper src={cover} alt={title} />
 </a>
src/components/PostsPage.astro
@@ -1,7 +1,6 @@
 ---
 import { siteConfig } from '@/config';
 import type { BlogPost } from '@/types/data';
-import path from 'path';
 import Pagination from './widgets/Pagination.astro';
 import PostCard from './widgets/PostCard.astro';
 
@@ -34,7 +33,6 @@ posts = posts.slice((currentPage - 1) * postsPerPage, currentPage * postsPerPage
           category={data.category}
           cover={data.cover}
           description={data.description}
-          basePath={path.join('content/posts/', post.id)}
         />
       );
     })
src/layouts/PostPageLayout.astro
@@ -12,16 +12,18 @@ interface Props {
   lang?: string;
   headings?: MarkdownHeading[];
   comment?: boolean;
-  banner?: {
-    src: string;
-    basePath?: string;
-  };
+  banner?: string;
 }
 
 const { title, description, lang, headings, comment, banner } = Astro.props;
 ---
 
-<MainLayout title={title} description={description} lang={lang} banner={banner}>
+<MainLayout
+  title={title}
+  description={description}
+  lang={lang}
+  banner={banner ? { src: banner } : undefined}
+>
   <slot slot="head" name="head" />
   <slot slot="header-content" name="header-content" />
   <div class="card border-base-300 swup-transition-fade border-2 px-6 py-4">
src/pages/posts/[article].astro
@@ -20,9 +20,12 @@ const { article } = Astro.props;
 const { Content, headings, remarkPluginFrontmatter } = await render(article);
 const hasCover =
   article.data.cover !== '' && article.data.cover !== undefined && article.data.cover !== null;
-
+const coverSrc = hasCover
+  ? article.data.cover.startsWith('.')
+    ? path.join('content/posts', article.id, article.data.cover)
+    : article.data.cover
+  : undefined;
 const description = article.data.description || remarkPluginFrontmatter.excerpt;
-const basePath = path.join('content/posts/', article.id);
 ---
 
 <PostPageLayout
@@ -31,7 +34,7 @@ const basePath = path.join('content/posts/', article.id);
   headings={headings}
   comment={article.data.comment}
   lang={article.data.lang}
-  banner={hasCover ? { src: article.data.cover, basePath: basePath } : undefined}
+  banner={coverSrc}
 >
   <Fragment slot="header-content">
     <PostInfo
@@ -47,12 +50,7 @@ const basePath = path.join('content/posts/', article.id);
   </Fragment>
   {
     siteConfig.banner === false && hasCover && (
-      <ImageWrapper
-        src={article.data.cover}
-        class="mb-6 rounded-xl shadow"
-        alt={article.data.title}
-        basePath={basePath}
-      />
+      <ImageWrapper src={coverSrc!} class="mb-6 rounded-xl shadow" alt={article.data.title} />
     )
   }
   <Markdown>
src/utils/content-utils.ts
@@ -3,6 +3,7 @@ import type { BlogPost } from '@/types/data';
 import I18nKey from '@i18n/I18nKey';
 import { i18n } from '@i18n/translation';
 import { getCollection } from 'astro:content';
+import path from 'path';
 
 export async function getSortedPosts(): Promise<BlogPost[]> {
   const allBlogPosts = (await getCollection('posts')) as unknown as BlogPost[];
@@ -13,6 +14,12 @@ export async function getSortedPosts(): Promise<BlogPost[]> {
       return dateA > dateB ? -1 : 1;
     }
   );
+  sortedBlogPosts.forEach((post) => {
+    const coverPath = post.data.cover;
+    if (coverPath?.startsWith('.')) {
+      post.data.cover = path.join('content/posts', post.id, coverPath);
+    }
+  });
   return sortedBlogPosts;
 }