fix: migrate videos

src/components/VideoHeader.astro

@@ -6,7 +6,7 @@ export interface Props {
 }
 
 const { video } = Astro.props;
-const { frontmatter, author } = video;
+const { data: frontmatter, author } = video;
 ---
 
 <div class='border-b bg-white py-5 sm:py-12'>

src/components/VideoListItem.astro

@@ -6,21 +6,21 @@ export interface Props {
 }
 
 const { video } = Astro.props;
-const { frontmatter, id } = video;
+const { data: frontmatter, slug: id } = video;
 ---
 
 <a
   class:list={[
-    'block no-underline py-2 group text-md items-center text-gray-600 hover:text-blue-600 flex justify-between border-b',
+    'text-md group block flex items-center justify-between border-b py-2 text-gray-600 no-underline hover:text-blue-600',
   ]}
   href={`/videos/${id}`}
 >
-  <span class='group-hover:translate-x-2 transition-transform'>
+  <span class='transition-transform group-hover:translate-x-2'>
     {frontmatter.title}
 
     {
       frontmatter.isNew && (
-        <span class='bg-green-300 text-green-900 text-xs font-medium px-1.5 py-0.5 rounded-sm uppercase ml-1.5'>
+        <span class='ml-1.5 rounded-sm bg-green-300 px-1.5 py-0.5 text-xs font-medium uppercase text-green-900'>
           New
           <span class='hidden sm:inline'>
             &middot;
@@ -32,9 +32,9 @@ const { frontmatter, id } = video;
       )
     }
   </span>
-  <span class='capitalize text-gray-500 text-xs hidden sm:block'>
+  <span class='hidden text-xs capitalize text-gray-500 sm:block'>
     {frontmatter.duration}
   </span>
 
-  <span class='text-gray-400 text-xs block sm:hidden'> &raquo;</span>
+  <span class='block text-xs text-gray-400 sm:hidden'> &raquo;</span>
 </a>

src/content/config.ts

@@ -2,10 +2,12 @@ import { authorCollection } from './author';
 import { guideCollection } from './guide';
 import { projectCollection } from './project';
 import { questionGroupCollection } from './question-group';
+import { videoCollection } from './video';
 
 export const collections = {
   authors: authorCollection,
   guides: guideCollection,
   'question-groups': questionGroupCollection,
   projects: projectCollection,
+  videos: videoCollection,
 };

src/content/video.ts

@@ -0,0 +1,24 @@
+import { defineCollection, z } from 'astro:content';
+
+export const videoCollection = defineCollection({
+  type: 'content',
+  schema: z.object({
+    title: z.string(),
+    description: z.string(),
+    authorId: z.string(),
+    seo: z
+      .object({
+        title: z.string().optional(),
+        description: z.string().optional(),
+      })
+      .optional(),
+    isNew: z.boolean(),
+    duration: z.string(),
+    date: z.date(),
+    sitemap: z.object({
+      priority: z.number(),
+      changefreq: z.enum(['daily', 'weekly', 'monthly', 'yearly']),
+    }),
+    tags: z.array(z.string()),
+  }),
+});

src/lib/video.ts

@@ -1,44 +1,12 @@
 import type { MarkdownFileType } from './file';
 import type { AuthorFileType } from './author.ts';
 import { getAllAuthors } from './author.ts';
-import type { GuideFileType } from './guide.ts';
-import { getAllGuides } from './guide.ts';
+import { getCollection, type CollectionEntry } from 'astro:content';
 
-export interface VideoFrontmatter {
-  title: string;
-  description: string;
-  authorId: string;
-  seo: {
-    title: string;
-    description: string;
-  };
-  isNew: boolean;
-  duration: string;
-  date: string;
-  sitemap: {
-    priority: number;
-    changefreq: 'daily' | 'weekly' | 'monthly' | 'yearly';
-  };
-  tags: string[];
-}
-
-export type VideoFileType = MarkdownFileType<VideoFrontmatter> & {
-  id: string;
+export type VideoFileType = CollectionEntry<'videos'> & {
   author: AuthorFileType;
 };
 
-/**
- * Generates id from the given video file
- * @param filePath Markdown file path
- *
- * @returns unique video identifier
- */
-function videoPathToId(filePath: string): string {
-  const fileName = filePath.split('/').pop() || '';
-
-  return fileName.replace('.md', '');
-}
-
 export async function getVideosByAuthor(
   authorId: string,
 ): Promise<VideoFileType[]> {
@@ -52,43 +20,38 @@ export async function getVideosByAuthor(
  * @returns Promisifed video files
  */
 export async function getAllVideos(): Promise<VideoFileType[]> {
-  const videos = import.meta.glob<VideoFileType>('/src/data/videos/*.md', {
-    eager: true,
-  });
-
+  const videoEntries = await getCollection('videos');
   const allAuthors = await getAllAuthors();
 
-  const videoFiles = Object.values(videos);
-  const enrichedVideos = videoFiles.map((videoFile) => ({
+  const enrichedVideos = videoEntries.map((videoFile) => {
+    const author = allAuthors.find(
+      (author) => author.slug === videoFile.data.authorId,
+    );
+
+    if (!author) {
+      throw new Error(
+        `Author with ID ${videoFile.data.authorId} not found for video ${videoFile.data.title}`,
+      );
+    }
+
+    return {
       ...videoFile,
-    id: videoPathToId(videoFile.file),
-    author: allAuthors.find(
-      (author) => author.slug === videoFile.frontmatter.authorId,
-    )!,
-  }));
+      author,
+    };
+  });
 
   return enrichedVideos.sort(
-    (a, b) =>
-      new Date(b.frontmatter.date).valueOf() -
-      new Date(a.frontmatter.date).valueOf(),
+    (a, b) => new Date(b.data.date).valueOf() - new Date(a.data.date).valueOf(),
   );
 }
 
 export async function getVideoById(id: string): Promise<VideoFileType> {
-  const videoFilesMap: Record<string, VideoFileType> =
-    import.meta.glob<VideoFileType>('../data/videos/*.md', {
-      eager: true,
-    });
+  const allVideos = await getAllVideos();
+  const videoFile = allVideos.find((video) => video.slug === id);
 
-  const videoFile = Object.values(videoFilesMap).find((videoFile) => {
-    return videoPathToId(videoFile.file) === id;
-  });
   if (!videoFile) {
     throw new Error(`Video with ID ${id} not found`);
   }
 
-  return {
-    ...videoFile,
-    id: videoPathToId(videoFile.file),
-  };
+  return videoFile;
 }

src/pages/pages.json.ts

@@ -50,9 +50,9 @@ export async function GET() {
         group: 'Guides',
       })),
       ...videos.map((video) => ({
-        id: video.id,
-        url: `/videos/${video.id}`,
-        title: video.frontmatter.title,
+        id: video.slug,
+        url: `/videos/${video.slug}`,
+        title: video.data.title,
         group: 'Videos',
       })),
       ...projects.map((project) => ({

src/pages/videos/[videoId].astro

@@ -1,7 +1,7 @@
 ---
 import VideoHeader from '../../components/VideoHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getAllVideos, VideoFileType } from '../../lib/video';
+import { getAllVideos, type VideoFileType } from '../../lib/video';
 
 export interface Props {
   video: VideoFileType;
@@ -11,18 +11,19 @@ export async function getStaticPaths() {
   const videos = await getAllVideos();
 
   return videos.map((video) => ({
-    params: { videoId: video.id },
+    params: { videoId: video.slug },
     props: { video },
   }));
 }
 
 const { videoId } = Astro.params;
 const { video } = Astro.props;
+const { Content } = await video.render();
 ---
 
 <BaseLayout
-  title={video.frontmatter.title}
-  description={video.frontmatter.description}
+  title={video.data.title}
+  description={video.data.description}
   permalink={`/videos/${videoId}`}
 >
   <VideoHeader video={video} />
@@ -31,7 +32,7 @@ const { video } = Astro.props;
     <div
       class='container prose prose-h2:mb-2 prose-h2:mt-4 prose-h2:text-3xl prose-h3:mt-2 prose-code:bg-transparent prose-img:mt-1'
     >
-      <video.Content />
+      <Content />
     </div>
   </div>
 </BaseLayout>