Add author pages

src/components/VideoHeader.astro

@@ -1,40 +1,38 @@
 ---
 import type { VideoFileType } from '../lib/video';
-import YouTubeAlert from "./YouTubeAlert.astro";
+import YouTubeAlert from './YouTubeAlert.astro';
 
 export interface Props {
   video: VideoFileType;
 }
 
 const { video } = Astro.props;
-const { frontmatter } = video;
-const { author } = frontmatter;
+const { frontmatter, author } = video;
 ---
 
-<div class='bg-white border-b py-5 sm:py-12'>
+<div class='border-b bg-white py-5 sm:py-12'>
   <div class='container text-left sm:text-center'>
     <p
-      class='text-gray-400 hidden sm:flex items-center justify-start sm:justify-center'
+      class='hidden items-center justify-start text-gray-400 sm:flex sm:justify-center'
     >
       <a
-        href={author.url}
-        target='_blank'
-        class='font-medium hover:text-gray-600 inline-flex items-center hover:underline'
+        href={`/authors/${author.id}`}
+        class='inline-flex items-center font-medium hover:text-gray-600 hover:underline'
       >
         <img
-          alt={author.name}
-          src={author.imageUrl}
-          class='w-5 h-5 inline mr-2 rounded-full'
+          alt={author.frontmatter.name}
+          src={author.frontmatter.imageUrl}
+          class='mr-2 inline h-5 w-5 rounded-full'
         />
-        {author.name}
+        {author.frontmatter.name}
       </a>
       <span class='mx-1.5'>&middot;</span>
       <span class='capitalize'>Illustrated Video</span>
     </p>
-    <h1 class='text-2xl sm:text-5xl my-0 sm:my-3.5 font-bold'>
+    <h1 class='my-0 text-2xl font-bold sm:my-3.5 sm:text-5xl'>
       {frontmatter.title}
     </h1>
-    <p class='hidden sm:block text-gray-400 text-md'>
+    <p class='text-md hidden text-gray-400 sm:block'>
       {frontmatter.description}
     </p>
   </div>