logo

pages/blog/[slug].tsx

@@ -10,8 +10,11 @@ import { MarkdownRenderingResult } from "../../types/types";
 import { MainLayout } from "../../layouts/MainLayout";
 import Link from "next/link";
 import { IoMdArrowRoundBack as BackIcon } from "react-icons/io";
+import { BasicBlogProps } from ".";
 
 export const BlogArticle = ({ frontMatter, html }: MarkdownRenderingResult) => {
+  const { title, author, date, description, authorLink } =
+    frontMatter as BasicBlogProps;
   return (
     <MainLayout>
       <Link href="/blog">
@@ -21,12 +24,19 @@ export const BlogArticle = ({ frontMatter, html }: MarkdownRenderingResult) => {
         </button>
       </Link>
       <div className="lg:mt-10 mt-4 mb-2 text-sm font-medium text-gray-500">
-        {frontMatter.date}
+        {date}
       </div>
-      <div className="lg:text-5xl font-bold">{frontMatter.title}</div>
+      <div className="lg:text-5xl font-bold">{title}</div>
       <div className="mt-2 font-medium">
-        By: <span className="text-action">@{frontMatter.author}</span>
+        By{" "}
+        {authorLink && (
+          <Link href={authorLink} className="text-action">
+            @{author}
+          </Link>
+        )}
+        {!authorLink && <span className="text-action">@{author}</span>}
       </div>
+      <div className="mt-2">{description}</div>
       <div
         className="mt-4 prose prose-headings:text-primary-text prose-p:text-gray-400"
         dangerouslySetInnerHTML={{ __html: html }}

pages/blog/index.tsx

@@ -4,11 +4,12 @@ import { BlogPost, getAllFilesFrontMatter } from "../../utils/markdown";
 import { FrontMatter } from "../../types/types";
 import Link from "next/link";
 
-interface BasicBlogProps extends FrontMatter {
+export interface BasicBlogProps extends FrontMatter {
   title: string;
   description: string;
   date: string;
   author: string;
+  authorLink: string;
 }
 
 const BlogCard = ({ blog, slug }: { blog: BasicBlogProps; slug: string }) => {

pages/index.tsx

@@ -2,8 +2,8 @@ import { MainLayout } from "../layouts/MainLayout";
 export default function Home() {
   return (
     <MainLayout>
-      <div className="grid lg:grid-cols-2 grid-cols-1 mt-4 lg:mt-20 gap-10 items-center">
-        <div className="bg-primary-dark p-10 rounded-lg flex flex-col gap-10 h-fit lg:w-2/3 w-full text-lg text-primary-text/90 shadow-lg shadow-gradient-dark/20">
+      <div className="grid lg:grid-cols-2 grid-cols-1 mt-4 lg:mt-20 gap-10 items-center p-6">
+        <div className="bg-primary-dark p-10 rounded-lg flex flex-col gap-10 h-fit 3xl:w-2/3 w-full text-lg text-primary-text/90 shadow-lg shadow-gradient-dark/20">
           <div>
             <span className="font-bold text-xl text-primary-text">
               Lorem ipsum dolor{" "}