feat: ✨ Add cover for SexualAssaultNote.md

src/components/BlogPost.astro

@@ -2,31 +2,39 @@
 import ArticleTags from '@components/ArticleTags.astro';
 import ArticleTime from '@components/ArticleTime.astro';
 import BaseLayout from '../layouts/BaseLayout.astro';
+import { Image } from 'astro:assets';
+import type { CollectionEntry } from 'astro:content';
 
 export type Props = {
   remarkPluginFrontmatter: any;
   title: string;
   slug: string;
   description: string;
   tag: string[] | undefined;
+  image: CollectionEntry<'posts'>['data']['image'];
   date: Date;
 };
 
-const { title, slug, remarkPluginFrontmatter, description, tag, date } = Astro.props;
+const { title, slug, remarkPluginFrontmatter, description, tag, date, image } = Astro.props;
 ---
 
 <BaseLayout title={title} description={description}>
   <div class="flex">
     <div class="flex-grow min-w-0">
-      <article class="prose prose-neutral dark:prose-invert max-w-full card p-6">
+      <article class="prose prose-neutral dark:prose-invert max-w-full card overflow-clip">
         <header>
           <slot name="before-article" />
-          <ArticleTime slug={slug} date={date} class="mb-2" />
-          <h1 class="mb-6">{title}</h1>
-          <ArticleTags tag={tag} />
+          {image && <Image class="w-full object-contain" src={image} alt="Article cover" />}
+          <div class="p-6 pb-0">
+            <ArticleTime slug={slug} date={date} class="mb-2" />
+            <h1 class="mb-6">{title}</h1>
+            <ArticleTags tag={tag} />
+          </div>
         </header>
-        <slot />
-        <ArticleTags tag={tag} />
+        <div class="p-6">
+          <slot />
+          <ArticleTags tag={tag} />
+        </div>
       </article>
       <div class="prose prose-neutral min-w-0 dark:prose-invert max-w-none">
         <details class="rounded-md card">

src/components/PostCard.astro

@@ -2,6 +2,7 @@
 import type { CollectionEntry } from 'astro:content';
 import ArticleTime from './ArticleTime.astro';
 import idToSlug from '@utils/idToSlug';
+import { Image } from 'astro:assets';
 
 export interface Props {
   post: CollectionEntry<'posts'>;
@@ -10,17 +11,24 @@ const { post } = Astro.props;
 const isForward = post.data.tag?.includes('转载');
 ---
 
-<li class="flex flex-col items-start p-6 card">
-  <ArticleTime slug={idToSlug(post.id)} date={post.data.date} class="mb-1" />
-  <a href={`/posts/${idToSlug(post.id)}/`} class="text-[2rem] mb-6">
-    {post.data.title}
-    {
-      isForward && (
-        <span class="break-keep text-sm border-[#3273dc] border rounded-full text-[#3273dc] px-2 py-1 ml-2 v-mid">
-          转载
-        </span>
-      )
-    }
-  </a>
-  <div class="text-neutral-500">{post.data.description}</div>
+<li class="flex flex-col items-start card overflow-clip">
+  {
+    post.data.image && (
+      <Image class="object-contain w-full mb-2" src={post.data.image} alt="Article cover" />
+    )
+  }
+  <div class="p-6">
+    <ArticleTime slug={idToSlug(post.id)} date={post.data.date} class="mb-1" />
+    <a href={`/posts/${idToSlug(post.id)}/`} class="text-[2rem] mb-6">
+      {post.data.title}
+      {
+        isForward && (
+          <span class="break-keep text-sm border-[#3273dc] border rounded-full text-[#3273dc] px-2 py-1 ml-2 v-mid">
+            转载
+          </span>
+        )
+      }
+    </a>
+    <div class="text-neutral-500">{post.data.description}</div>
+  </div>
 </li>

src/content/config.ts

@@ -2,12 +2,14 @@ import { defineCollection, z } from 'astro:content';
 
 const postsCollection = defineCollection({
   type: 'content',
-  schema: z.object({
-    title: z.string(),
-    date: z.date(),
-    description: z.string(),
-    tag: z.array(z.string()).optional(),
-  }),
+  schema: ({ image }) =>
+    z.object({
+      title: z.string(),
+      date: z.date(),
+      description: z.string(),
+      tag: z.array(z.string()).optional(),
+      image: image().optional(),
+    }),
 });
 
 export const collections = { posts: postsCollection };

src/content/posts/SexualAssaultNote.md

@@ -5,6 +5,7 @@ description: 我在 1 月 12 日 - 1 月 14 日期间遭到了一个有一定家
 tag:
   - 杂谈
   - 随笔
+image: src/assets/SexualAssaultNote.svg
 ---
 
 我在 1 月 12 日 - 1 月 14 日期间遭到了一个有一定家庭背景的跨性别男性的骚扰、性侵和 PUA。昨天见的朋友说：“这肯定是一个惯犯。”我也这么觉得。
@@ -46,4 +47,5 @@ tag:
 ---
 
 [^1]: 这句描述的症状是“现实解体”。
+
 [^2]: 现在想起来这位太惯犯了我操，我当时要是没带人一起去，恐怕就要被强奸了。

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

@@ -23,6 +23,7 @@ const { Content, remarkPluginFrontmatter } = await entry.render();
   slug={idToSlug(entry.id)}
   description={entry.data.description}
   tag={entry.data.tag}
+  image={entry.data.image}
 >
   <Content />
 </BlogPost>