feat(posts): embed per-episode Slidev decks

src/components/SlidesEmbed.astro

@@ -0,0 +1,26 @@
+---
+interface Props {
+  src: string
+  title?: string
+}
+
+const { src, title } = Astro.props
+---
+
+<div class="w-full">
+  <iframe
+    src={src}
+    title={title ?? 'Slides'}
+    allowfullscreen="true"
+    loading="lazy"
+    class="w-full aspect-video border-0 rounded-lg"
+  ></iframe>
+  <a
+    href={src}
+    target="_blank"
+    referrerpolicy="no-referrer"
+    class="text-xs opacity-70 hover:opacity-100 hover:underline mt-2 inline-block"
+  >
+    在新标签页打开幻灯片 ↗
+  </a>
+</div>

src/constants.ts

@@ -36,3 +36,8 @@ export const evonia = {
   url: 'https://evoniaai.github.io/',
   logo: '/evonia/logo-dark.svg',
 } as const;
+
+// Base URL where per-episode Slidev decks are hosted (the video-slides repo,
+// deployed to GitHub Pages). The deck for an episode lives at `${SLIDES_BASE_URL}/<ep>/`.
+// Change this if the decks move to a custom domain.
+export const SLIDES_BASE_URL = 'https://asynctalk.github.io/video-slides';

src/content.config.ts

@@ -13,6 +13,8 @@ const posts = defineCollection({
     draftLink: z.string().url().optional(),
     youtubeId: z.string().optional(),
     biliUrl: z.string().optional(),
+    hasSlides: z.boolean().optional(),
+    slidesUrl: z.string().url().optional(),
   })
 });
 

src/content/posts/ep68.mdx

@@ -18,6 +18,7 @@ explicit: false
 xyzLink: https://www.xiaoyuzhoufm.com/episode/6a33665acc736a4409ef201d
 youtubeId: _VmBKj9Da40
 biliUrl: //player.bilibili.com/player.html?isOutside=true&aid=116766487355374&bvid=BV1wdLd6TEYR&cid=39197607273&p=1
+hasSlides: true
 categories:
     - swagger
     - openapi

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

@@ -20,6 +20,8 @@ import type { InferGetStaticPropsType } from "astro";
 import Player from "../../components/Player.astro";
 import AdSense from "../../components/AdSense.astro";
 import VideoEmbed from "../../components/VideoEmbed.astro";
+import SlidesEmbed from "../../components/SlidesEmbed.astro";
+import { SLIDES_BASE_URL } from "../../constants";
 
 export async function getStaticPaths() {
   const posts = await getCollection("posts");
@@ -43,6 +45,9 @@ const { Content } = await render(post);
 const isPreRelease = post.data.status !== "published";
 const frontData = post.data;
 const tags = frontData.categories;
+const slug = post.id.replace(/^\/?posts\//, "");
+const slidesSrc =
+  frontData.slidesUrl ?? `${SLIDES_BASE_URL}/${slug}/`;
 const imgUrl = `${Astro.site?.origin}${post.id}-og.png`;
 ---
 
@@ -155,6 +160,15 @@ const imgUrl = `${Astro.site?.origin}${post.id}-og.png`;
       )
     }
 
+    {
+      (frontData.hasSlides || frontData.slidesUrl) && (
+        <>
+          <SlidesEmbed src={slidesSrc} title={frontData.title} />
+          <Hr className="my-10" />
+        </>
+      )
+    }
+
     <article
       class="leading-loose w-full at-mdx-content at-scrollbar text-gray-100 break-all"
     >