Chris/author authorimg

content/chris.md

@@ -7,7 +7,7 @@ slug: understanding-typescript
 tags:
   - typescript
   - programming
-imageUrl: "/Chris.png"
+author: Christopher Forti
 ---
 
 # Content

content/example.md

@@ -4,6 +4,7 @@ title: Example
 description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit aliquam finibus. Sed venenatis placerat eros, eget pulvinar lacus elementum ut. In hac habitasse platea dictumst. Etiam sed erat quis odio vehicula consequat. Phasellus magna magna, dignissim at felis eu, pulvinar venenatis turpis. Sed molestie consectetur magna, eget aliquam erat fermentum at. Nam bibendum enim in quam consequat, ut ultricies orci pellentesque. Curabitur viverra, est efficitur cursus cursus, ante magna eleifend sapien, eget pellentesque eros erat sit amet ante. Integer volutpat hendrerit imperdiet. Nulla facilisi. Quisque laoreet sem dolor, sed porttitor turpis pulvinar quis.
 date: 2023-03-04
 slug: example
+author: Christopher Forti
 ---
 
 # Example

content/test.md

@@ -4,6 +4,7 @@ title: Test
 description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit aliquam finibus. Sed venenatis placerat eros, eget pulvinar lacus elementum ut. In hac habitasse platea dictumst. Etiam sed erat quis odio vehicula consequat. Phasellus magna magna, dignissim at felis eu, pulvinar venenatis turpis. Sed molestie consectetur magna, eget aliquam erat fermentum at. Nam bibendum enim in quam consequat, ut ultricies orci pellentesque. Curabitur viverra, est efficitur cursus cursus, ante magna eleifend sapien, eget pellentesque eros erat sit amet ante. Integer volutpat hendrerit imperdiet. Nulla facilisi. Quisque laoreet sem dolor, sed porttitor turpis pulvinar quis.
 date: 2023-03-04
 slug: test
+author: Christopher Forti
 ---
 
 # Test File

content/with-image.md

@@ -5,6 +5,7 @@ description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blan
 date: 2024-03-04
 imageUrl: https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80
 slug: with-image
+author: Christopher Forti
 ---
 
 # Example

parse-markdown.ts

@@ -10,6 +10,8 @@ type Metadata = {
   description: string;
   date: Date;
   slug: string;
+  author: string;
+  authorImage: string;
   tags?: string[];
   imageUrl?: string;
 };
@@ -87,8 +89,16 @@ function validateMetadata(metadata: unknown, fileName: string) {
     return false;
   }
 
-  const { published, title, description, date, slug, tags, imageUrl } =
-    metadata as Metadata;
+  const {
+    published,
+    title,
+    description,
+    date,
+    author,
+    authorImage,
+    slug,
+    imageUrl,
+  } = metadata as Metadata;
   try {
     if (typeof published !== "boolean") {
       throw new Error(
@@ -125,11 +135,30 @@ function validateMetadata(metadata: unknown, fileName: string) {
         "\x1b[31mimageUrl must be an absolute URL or a path starting with /\nExample: /images/my-image.jpg for image in public folder\nOr: https://example.com/image.jpg for an external image\x1b[0m",
       );
     }
+    if (imageUrl === null) {
+      throw new Error("\x1b[31mimageUrl must be a string\x1b[0m");
+    }
+    if (typeof author !== "string") {
+      throw new Error(
+        "\x1b[31mThe markdown must contain a valid author.\x1b[0m",
+      );
+    }
+    if (typeof authorImage !== "string") {
+      throw new Error("\x1b[31mauthorImage must be a string\x1b[0m");
+    }
+    if (
+      !authorImage.startsWith("http://") &&
+      !authorImage.startsWith("https://") &&
+      !authorImage.startsWith("/")
+    ) {
+      throw new Error(
+        "\x1b[31mimageUrl must be an absolute URL or a path starting with /\nExample: /images/my-image.jpg for image in public folder\nOr: https://example.com/image.jpg for an external image\x1b[0m",
+      );
+    }
   } catch (error) {
-    if ("message" in (error as Error)) {
+    if (error instanceof Error) {
       console.error(
         "\x1b[34mThere was an error inside of " + fileName + ":\n\x1b[0m",
-        // @ts-expect-error
         error.message,
       );
     }

src/components/Mainpage.tsx

@@ -14,12 +14,15 @@ const postData = [
 ];
 
 export function Mainpage({ selectedPost }: MainpageProps) {
+  console.log(selectedPost);
   return (
     <main className="container m-0 flex h-[calc(100vh_-_12.5rem)] flex-col overflow-scroll bg-white p-4">
       {selectedPost > 0 ? (
         <Post post={postData[selectedPost] as PostData} />
       ) : (
-        (postData[0] as React.ReactNode[])
+        data.map((post, index) => {
+          return <PostPreview key={post.id} post={post} postIndex={index} />;
+        })
       )}
     </main>
   );

src/components/Post.tsx

@@ -12,6 +12,8 @@ export function Post({ post }: PostProps) {
     slug,
     tags,
     imageUrl,
+    author,
+    authorImage,
   } = post.metadata;
   const date = new Date(dateString);
   return (
@@ -22,7 +24,9 @@ export function Post({ post }: PostProps) {
           <h1 className="text-2xl font-semibold capitalize text-gray-800 lg:text-3xl dark:text-white">
             From the blog
           </h1>
-
+          <p className="block font-sans text-sm font-normal leading-normal text-gray-700 antialiased">
+            {slug}
+          </p>
           <div className="mt-8 flex flex-col items-center lg:-mx-6">
             {/* Image of the blog post */}
             <img
@@ -36,12 +40,16 @@ export function Post({ post }: PostProps) {
               <p className="text-sm text-gray-500 dark:text-gray-300">
                 {date.toLocaleDateString()}
               </p>
-
               {/* Title of the blog post */}
               <p className="text-xl font-semibold text-gray-800 dark:text-white">
                 {title}
               </p>
-
+              <p className="block font-sans text-sm font-normal leading-normal text-gray-700 antialiased">
+                {tags}
+              </p>
+              <p className="mb-8 block font-sans text-base font-normal leading-relaxed !text-gray-500 text-inherit antialiased">
+                {description}
+              </p>
               {/* Content of the blog post */}
               <div
                 className="mt-3 text-sm text-gray-500 md:text-sm dark:text-gray-300"
@@ -50,16 +58,18 @@ export function Post({ post }: PostProps) {
 
               {/* Author information */}
               <div className="mt-6 flex items-center">
-                {/* <img
+                <img
                   className="h-10 w-10 rounded-full object-cover object-center"
-                  src={post.authorImage}
-                  alt=""
-                /> */}
+                  src={authorImage ? authorImage : underdogLogo}
+                />
 
                 <div className="mx-4">
                   <h1 className="text-sm text-gray-700 dark:text-gray-200">
-                    To do add author
+                    {author}
                   </h1>
+                  <p className="block font-sans text-sm font-normal leading-normal text-gray-700 antialiased">
+                    {published}
+                  </p>
                 </div>
               </div>
             </div>

src/components/PostPreview.tsx

@@ -7,12 +7,16 @@ type PostPreviewProps = {
 };
 
 export function PostPreview(props: PostPreviewProps) {
+  console.log("entering PostPreview");
   const {
     title,
     tags,
+    slug,
     published,
     description,
     imageUrl,
+    authorImage,
+    author,
     date: dateString,
   } = props.post.metadata;
   const date = new Date(dateString);
@@ -25,6 +29,9 @@ export function PostPreview(props: PostPreviewProps) {
           className="h-full w-full object-cover"
         />
       </div>
+      <p className="block font-sans text-sm font-normal leading-normal text-gray-700 antialiased">
+        {slug}
+      </p>
       <div className="p-6 px-2 sm:pl-4 sm:pr-6">
         <p className="mb-4 block font-sans text-sm font-light leading-normal text-inherit antialiased">
           Technology
@@ -35,21 +42,27 @@ export function PostPreview(props: PostPreviewProps) {
         >
           {title}
         </a>
+        <p className="block font-sans text-sm font-normal leading-normal text-gray-700 antialiased">
+          {tags}
+        </p>
         <p className="mb-8 block font-sans text-base font-normal leading-relaxed !text-gray-500 text-inherit antialiased">
           {description}
         </p>
         <div className="flex items-center gap-4">
-          {/* <img
-            src={authorImage}
+          <img
+            src={authorImage ? authorImage : underdogLogo}
             className="relative inline-block h-12 w-12 !rounded-full object-cover object-center"
-          /> */}
+          />
           <div>
             <p className="text-blue-gray-900 mb-0.5 block font-sans text-base font-light leading-relaxed antialiased">
-              To do add author
+              {author}
             </p>
             <p className="block font-sans text-sm font-normal leading-normal text-gray-700 antialiased">
               {date.toDateString()}
             </p>
+            <p className="block font-sans text-sm font-normal leading-normal text-gray-700 antialiased">
+              {published}
+            </p>
           </div>
         </div>
       </div>