ads

app/articles/[categoryName]/[articleName]/page.tsx

@@ -9,17 +9,9 @@ import urlJoin from "url-join";
 import { apiUrl } from "../../../global";
 import { Prisma } from "@prisma/client";
 
-type ArticleWithContentTableEntries = Prisma.ArticleGetPayload<{ include: { contentTableEntries: true } }>;
-type ArticleWithCategory = Prisma.ArticleGetPayload<{ include: { category: true } }>;
-
-// export async function GetContentTableEntries(article: Article): Promise<ContentTableEntry[]> {
-//   const entries = await prisma.contentTableEntry.findMany({
-//     where: { articleId: article?.id ?? 1 },
-//     orderBy: { orderIndex: "asc" },
-//   });
-
-//   return entries;
-// }
+type ArticleWithIncludes = Prisma.ArticleGetPayload<{
+  include: { contentTableEntries: true; category: true; image: true };
+}>;
 
 export async function GetArticle(articleName: string): Promise<any> {
   const result: Response = await fetch(urlJoin(apiUrl, `articles/${articleName ?? ""}`), {
@@ -38,7 +30,10 @@ function ParseMarkdown(markdown: string): string {
 //* MAIN
 export default async function ArticlePage({ params }: { params: { articleName: string; categoryName: string } }) {
   const articleName: string = params.articleName.toLowerCase().replaceAll("%20", " ");
-  const article: ArticleWithContentTableEntries = await GetArticle(articleName);
+  const article: ArticleWithIncludes = await GetArticle(articleName);
+  const dateUpdated: Date = new Date(article.dateUpdated);
+  const dateCreated: Date = new Date(article.dateCreated);
+  const dateOptions: Intl.DateTimeFormatOptions = { month: "long", day: "numeric", year: "numeric" };
   const markdown: string = article?.markdown ?? "";
 
   return (
@@ -46,22 +41,27 @@ export default async function ArticlePage({ params }: { params: { articleName: s
       <ContentTable contentTableEntries={article.contentTableEntries} />
       <div className={styles.tutorialContent}>
         <div className={styles.header}>
-          <p className="text-muted">Published on January 13, 2022</p>
+          <p className={`${styles.dates} text-muted`}>
+            {`Published on ${dateCreated.toLocaleDateString("en-US", dateOptions)}`}
+            <br />
+            {dateUpdated > dateCreated ? `Updated on ${dateUpdated.toLocaleDateString("en-US", dateOptions)}` : ""}
+          </p>
 
           <h1>{article?.title}</h1>
           <div className={styles.tags}>
             <a href="#">Docker</a> <a href="#">Setup</a> <a href="#">Ubuntu</a>
           </div>
           <Image
-            src={"/images/test.jpg"}
+            src={article?.image?.url ?? ""}
             height={350}
             width={750}
-            alt="Image"
+            alt={article?.image?.alt ?? ""}
             quality={100}
             placeholder="blur"
             blurDataURL="/images/blur.png"
             loading="lazy"
           />
+          <p>{article?.introduction}</p>
         </div>
         <div
           className="markdown"
@@ -77,7 +77,7 @@ export default async function ArticlePage({ params }: { params: { articleName: s
 }
 
 export async function generateStaticParams() {
-  const articles: ArticleWithCategory[] = await (
+  const articles: ArticleWithIncludes[] = await (
     await fetch(urlJoin(apiUrl, `articles/`), {
       cache: "force-cache",
       next: { revalidate: 60 * 10 },