Add author pages

Author: kamranahmedse

public/authors/peter-thaleikis.png

@@ -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>

src/components/VideoHeader.astro

@@ -0,0 +1,8 @@
+---
+name: 'Ebrahim Bharmal'
+imageUrl: '/authors/ebrahimbharmal007.png'
+social:
+  twitter: 'https://twitter.com/BharmalEbrahim'
+---
+
+Full-stack developer interested in all things web development.

src/data/authors/ebrahim-bharmal.md

@@ -0,0 +1,9 @@
+---
+name: 'Jesse Li'
+imageUrl: '/authors/jesse.png'
+social:
+  twitter: 'https://twitter.com/__jesse_li'
+  github: 'https://github.com/veggiedefender'
+---
+
+Jesse has made several [interesting open-source projects](https://github.com/veggiedefender) and wrote some interesting [articles on his blog](https://blog.jse.li/) including the one he wrote on roadmap.sh.

src/data/authors/jesse-li.md

@@ -0,0 +1,9 @@
+---
+name: 'Peter Thaleikis'
+imageUrl: '/authors/peter-thaleikis.png'
+social:
+  twitter: 'https://twitter.com/spekulatius1984'
+  website: 'https://peterthaleikis.com/'
+---
+
+Peter Thaleikis a software engineer and business owner. He has been developing web applications since around 2000. Before he started his own software development company [Bring Your Own Ideas Ltd.](https://bringyourownideas.com/), he has been a Lead Developer for multiple organizations.

src/data/authors/peter-thaleikis.md

@@ -1,10 +1,7 @@
 ---
 title: 'Proxy Servers'
 description: 'How do proxy servers work and what are forward and reverse proxies?'
-author:
-  name: 'Ebrahim Bharmal'
-  url: 'https://twitter.com/BharmalEbrahim'
-  imageUrl: '/authors/ebrahimbharmal007.png'
+authorId: 'ebrahim-bharmal'
 seo:
   title: 'Proxy Servers - roadmap.sh'
   description: 'How do proxy servers work and what are forward and reverse proxies?'

src/data/guides/proxy-servers.md

@@ -1,10 +1,7 @@
 ---
 title: 'Building a BitTorrent Client'
 description: 'Learn everything you need to know about BitTorrent by writing a client in Go'
-author:
-  name: 'Jesse Li'
-  url: 'https://twitter.com/__jesse_li'
-  imageUrl: '/authors/jesse.png'
+authorId: 'jesse-li'
 seo:
   title: 'Building a BitTorrent Client - roadmap.sh'
   description: 'Learn everything you need to know about BitTorrent by writing a client in Go'

src/data/guides/torrent-client.md

@@ -1,10 +1,7 @@
 ---
 title: 'Build it and they will come?'
 description: 'Why “build it and they will come” alone won’t work anymore'
-author:
-  name: 'Peter Thaleikis'
-  url: 'https://twitter.com/spekulatius1984'
-  imageUrl: '/authors/spekulatius.jpg'
+authorId: 'peter-thaleikis'
 seo:
   title: 'Build it and they will come? - roadmap.sh'
   description: 'Why “build it and they will come” alone won’t work anymore'

src/data/guides/why-build-it-and-they-will-come-wont-work-anymore.md

@@ -4,10 +4,7 @@ description: 'Learn what it means for a database to be ACID compliant with examp
 duration: '5 minutes'
 isNew: false
 date: 2021-09-26
-author:
-  name: 'Kamran Ahmed'
-  url: 'https://twitter.com/kamrify'
-  imageUrl: '/authors/kamranahmedse.jpeg'
+authorId: 'kamran'
 sitemap:
   priority: 0.7
   changefreq: 'weekly'

src/data/videos/acid-explained.md

@@ -4,10 +4,7 @@ description: 'Learn what is HTTP caching, places for caching and different cachi
 duration: '13 minutes'
 isNew: false
 date: 2020-10-04
-author:
-  name: 'Kamran Ahmed'
-  url: 'https://twitter.com/kamrify'
-  imageUrl: '/authors/kamranahmedse.jpeg'
+authorId: 'kamran'
 sitemap:
   priority: 0.7
   changefreq: 'weekly'