fix: implement author page

src/components/NavigationDropdown.tsx

@@ -68,12 +68,13 @@ export function NavigationDropdown() {
         })}
         onClick={() => setIsOpen(true)}
         onMouseOver={() => setIsOpen(true)}
+        aria-label="Open Navigation Dropdown"
       >
         <Menu className="h-5 w-5" />
       </button>
       <div
         className={cn(
-          'absolute pointer-events-none invisible left-0 top-full z-[999] mt-2 w-48 min-w-[320px] -translate-y-1 rounded-lg bg-slate-800 py-2 opacity-0 shadow-xl transition-all duration-100',
+          'pointer-events-none invisible absolute left-0 top-full z-[999] mt-2 w-48 min-w-[320px] -translate-y-1 rounded-lg bg-slate-800 py-2 opacity-0 shadow-xl transition-all duration-100',
           {
             'pointer-events-auto visible translate-y-2.5 opacity-100': isOpen,
           },

src/lib/video.ts

@@ -1,8 +1,8 @@
 import type { MarkdownFileType } from './file';
 import type { AuthorFileType } from './author.ts';
 import { getAllAuthors } from './author.ts';
-import type {GuideFileType} from "./guide.ts";
+import type { GuideFileType } from './guide.ts';
-import {getAllGuides} from "./guide.ts";
+import { getAllGuides } from './guide.ts';
 
 export interface VideoFrontmatter {
   title: string;
@@ -40,7 +40,7 @@ function videoPathToId(filePath: string): string {
 }
 
 export async function getVideosByAuthor(
-    authorId: string,
+  authorId: string,
 ): Promise<VideoFileType[]> {
   const allVideos = await getAllVideos();
 
@@ -75,10 +75,20 @@ export async function getAllVideos(): Promise<VideoFileType[]> {
 }
 
 export async function getVideoById(id: string): Promise<VideoFileType> {
-  const video = await import(`../data/videos/${id}.md`);
+  const videoFilesMap: Record<string, VideoFileType> =
+    import.meta.glob<VideoFileType>('../data/videos/*.md', {
+      eager: true,
+    });
+
+  const videoFile = Object.values(videoFilesMap).find((videoFile) => {
+    return videoPathToId(videoFile.file) === id;
+  });
+  if (!videoFile) {
+    throw new Error(`Video with ID ${id} not found`);
+  }
 
   return {
-    ...video,
+    ...videoFile,
-    id: videoPathToId(video.file),
+    id: videoPathToId(videoFile.file),
   };
 }

src/pages/authors/[authorId].astro

@@ -2,24 +2,23 @@
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import AstroIcon from '../../components/AstroIcon.astro';
 import { getGuidesByAuthor } from '../../lib/guide';
-import { getAllVideos, getVideosByAuthor } from '../../lib/video';
+import { getVideosByAuthor } from '../../lib/video';
 import GuideListItem from '../../components/GuideListItem.astro';
-import { getAuthorById, getAuthorIds } from '../../lib/author';
+import { getAuthorById } from '../../lib/author';
 import VideoListItem from '../../components/VideoListItem.astro';
 
 interface Params extends Record<string, string | undefined> {}
 
-export async function getStaticPaths() {
-  const authorIds = await getAuthorIds();
-
-  return authorIds.map((authorId) => ({
-    params: { authorId },
-  }));
-}
-
 const { authorId } = Astro.params;
+if (!authorId) {
+  return Astro.redirect('/404');
+}
 
 const author = await getAuthorById(authorId);
+if (!author) {
+  return Astro.redirect('/404');
+}
+
 const authorFrontmatter = author.frontmatter;
 
 const guides = await getGuidesByAuthor(authorId);

src/pages/authors/[authorId].json.ts

@@ -1,25 +1,20 @@
 import type { APIRoute } from 'astro';
-import { getAuthorById, getAuthorIds } from '../../lib/author';
+import { getAuthorById } from '../../lib/author';
 
-export async function getStaticPaths() {
+export const GET: APIRoute = async function ({ params, request, props }) {
-  const authorIds = await getAuthorIds();
+  const { authorId } = params as { authorId: string };
-
-  return await Promise.all(
-    authorIds.map(async (authorId) => {
-      const authorDetails = await getAuthorById(authorId);
 
-      return {
+  const authorDetails = await getAuthorById(authorId);
-        params: { authorId },
+  if (!authorDetails) {
-        props: {
+    return new Response(JSON.stringify({ error: 'Not found' }), {
-          authorDetails: authorDetails?.frontmatter || {},
+      status: 404,
-        },
+      headers: {
-      };
+        'Content-Type': 'application/json',
-    }),
+      },
-  );
+    });
-}
+  }
 
-export const GET: APIRoute = async function ({ params, request, props }) {
+  return new Response(JSON.stringify(authorDetails?.frontmatter), {
-  return new Response(JSON.stringify(props.authorDetails), {
     status: 200,
     headers: {
       'Content-Type': 'application/json',