Commit bdcf86b
Changed files (6)
src
components
layouts
pages
posts
utils
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;
}