Merge pull request #79 from now-u/feature/archived-article-banner

Add header image to blog articles; show 'Archived' banner on Blog Articles that passed the 'end date'
now-u · Nov 6, 2024 · ec5aa85 · ec5aa85
2 parents b063e8e + 452d701
commit ec5aa85
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git a/src/app/blog/[slug]/page.tsx b/src/app/blog/[slug]/page.tsx
@@ -5,7 +5,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faUserCircle } from "@fortawesome/free-solid-svg-icons";
+import { faCircleExclamation, faUserCircle } from "@fortawesome/free-solid-svg-icons";
 
 // NOTE: https://blog.openreplay.com/creating-a-markdown-blog-powered-by-next-js-in-under-an-hour
 
@@ -50,6 +50,8 @@ export default async function Page({
   if (blog === undefined) {
     notFound();
   }
+  const archiveDate: number = Date.parse(blog.archiveDate ?? "")
+  const blogIsArchived = isNaN(archiveDate) ? false : Date.now() > archiveDate;
 
   return (
     <>
@@ -61,13 +63,32 @@ export default async function Page({
             {" "}
             {"< "} Back{" "}
           </Link>
+
+          {/* Archived Warning Banner */}
+          { blogIsArchived &&
+          <div className="flex flex-row items-baseline gap-3 py-2 px-4 rounded-xl bg-carolina-blue text-white mt-4">
+            <FontAwesomeIcon icon={faCircleExclamation} className="translate-y-[3px]" />
+            <p className="m-0 font-bold">The article you are looking at is archived and possibly outdated!</p>
+          </div>
+          }
+
+          <div className="">
+            <Image
+              src={blog.headerImage}
+              alt="Blog Header Image"
+              className="object-cover w-full h-64 m-0 rounded-lg mt-4 my-2"
+              width={448}
+              height={252}
+            />
+          </div>
           <div className="mt-4">
-            <h1 className="text-3xl">{blog.title}</h1>
+            <h1 className="text-3xl mb-2">{blog.title}</h1>
             {blog.subtitle !== "" && (
-              <p className="text-gray-500">{blog.subtitle}</p>
+              <p className="text-gray-500 mt-0">{blog.subtitle}</p>
             )}
           </div>
-          <hr className="my-0"/>
+          <hr className="m-0" />
+          {/* Divider */}
           <div
             dangerouslySetInnerHTML={{ __html: md().render(blog.content) }}
           />

diff --git a/src/app/blog/utils.ts b/src/app/blog/utils.ts
@@ -13,6 +13,7 @@ export interface Post {
   headerImage: string;
   readingTime: string;
   publishedDate: string;
+  archiveDate?: string;
 }
 
 /**
@@ -37,7 +38,8 @@ export async function getPostBySlug(slug: string): Promise<Post | undefined> {
       },
       headerImage: blog.header_image.url,
       readingTime: blog.reading_time.toString(),
-      publishedDate: blog.release_at
+      publishedDate: blog.release_at,
+      archiveDate: blog.end_at ?? undefined
     }
   } else {
     return undefined