add api

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

@@ -1,32 +1,23 @@
 import React from "react";
-import prisma from "../../../../lib/prisma";
-import styles from "../../../../styles/modules/TutorialContentTable.module.scss";
+import styles from "../../../../styles/modules/ArticleContentTable.module.scss";
 import { Article, ContentTableEntry } from "@prisma/client";
 
-export default function ContentTable({
-	contentTableEntries,
-}: {
-	contentTableEntries: ContentTableEntry[];
-}) {
-	return (
-		<div className={styles.tutorialContentTable}>
-			<div className={styles.stickyContainer}>
-				<div className={styles.list}>
-					<h2>Contents</h2>
-					{contentTableEntries?.map((e, i) => {
-						return (
-							<a key={i} href={"#" + e.anchor}>
-								{e.title}
-							</a>
-						);
-					})}
-				</div>
-				{contentTableEntries?.length < 15 ? (
-					<div className={styles.adContainer}>Future advertisement</div>
-				) : (
-					""
-				)}
-			</div>
-		</div>
-	);
+export default function ContentTable({ contentTableEntries }: { contentTableEntries: ContentTableEntry[] }) {
+  return (
+    <div className={styles.articleContentTable}>
+      <div className={styles.stickyContainer}>
+        <div className={styles.list}>
+          <h2>Contents</h2>
+          {contentTableEntries?.map((e, i) => {
+            return (
+              <a key={i} href={"#" + e.anchor}>
+                {e.title}
+              </a>
+            );
+          })}
+        </div>
+        {contentTableEntries?.length < 15 ? <div className={styles.adContainer}>Future advertisement</div> : ""}
+      </div>
+    </div>
+  );
 }

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

@@ -1,82 +1,93 @@
 import { marked } from "marked";
 import ContentTable from "./ContentTable";
 import Sidebar from "./Sidebar";
-import styles from "../../../../styles/modules/Tutorial.module.scss";
+import styles from "../../../../styles/modules/Article.module.scss";
 import LoadMarkdown from "./LoadMarkdown";
-import prisma from "../../../../lib/prisma";
 import { Article, Category, ContentTableEntry } from "@prisma/client";
+import Image from "next/image";
+import urlJoin from "url-join";
+import { apiUrl } from "../../../global";
+import { Prisma } from "@prisma/client";
 
-export async function GetContentTableEntries(
-	article: Article
-): Promise<ContentTableEntry[]> {
-	const entries = await prisma.contentTableEntry.findMany({
-		where: { articleId: article?.id ?? 1 },
-		orderBy: { orderIndex: "asc" },
-	});
+type ArticleWithContentTableEntries = Prisma.ArticleGetPayload<{ include: { contentTableEntries: true } }>;
+type ArticleWithCategory = Prisma.ArticleGetPayload<{ include: { category: true } }>;
 
-	return entries;
-}
+// export async function GetContentTableEntries(article: Article): Promise<ContentTableEntry[]> {
+//   const entries = await prisma.contentTableEntry.findMany({
+//     where: { articleId: article?.id ?? 1 },
+//     orderBy: { orderIndex: "asc" },
+//   });
 
-export async function GetArticle(articleName: string) {
-	const article = await prisma.article.findUnique({
-		where: { name: articleName.toLowerCase() ?? "" },
-	});
+//   return entries;
+// }
 
-	return article;
+export async function GetArticle(articleName: string): Promise<any> {
+  const result: Response = await fetch(urlJoin(apiUrl, `articles/${articleName ?? ""}`), {
+    cache: "force-cache",
+    next: { revalidate: 60 * 10 },
+  });
+
+  return result.json();
 }
 
 function ParseMarkdown(markdown: string): string {
-	let result = marked.parse(markdown);
-
-	return result;
+  let result = marked.parse(markdown);
+  return result;
 }
 
 //* MAIN
-export default async function ArticlePage({
-	params,
-}: {
-	params: { articleName: string; categoryName: string };
-}) {
-	const articleName: string = params.articleName
-		.toLowerCase()
-		.replaceAll("%20", " ");
-	const article: Article = await GetArticle(articleName);
-	const markdown: string = article?.markdown ?? "";
-	const contentTableEntries: ContentTableEntry[] = await GetContentTableEntries(
-		article
-	);
+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 markdown: string = article?.markdown ?? "";
 
-	return (
-		<div className={styles.tutorial}>
-			<ContentTable contentTableEntries={contentTableEntries} />
-			<div className={styles.tutorialContent}>
-				<div className={styles.head}>
-					<h1>{article?.title}</h1>
-				</div>
-				<div
-					className="markdown"
-					dangerouslySetInnerHTML={{
-						__html: ParseMarkdown(markdown),
-					}}
-				></div>
-				<LoadMarkdown />
-			</div>
-			<Sidebar />
-		</div>
-	);
+  return (
+    <div className={styles.article}>
+      <ContentTable contentTableEntries={article.contentTableEntries} />
+      <div className={styles.tutorialContent}>
+        <div className={styles.header}>
+          <p className="text-muted">Published on January 13, 2022</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"}
+            height={350}
+            width={750}
+            alt="Image"
+            quality={100}
+            placeholder="blur"
+            blurDataURL="/images/blur.png"
+            loading="lazy"
+          />
+        </div>
+        <div
+          className="markdown"
+          dangerouslySetInnerHTML={{
+            __html: ParseMarkdown(markdown),
+          }}
+        ></div>
+        <LoadMarkdown />
+      </div>
+      <Sidebar />
+    </div>
+  );
 }
 
 export async function generateStaticParams() {
-	const articles = await prisma.article.findMany();
+  const articles: ArticleWithCategory[] = await (
+    await fetch(urlJoin(apiUrl, `articles/`), {
+      cache: "force-cache",
+      next: { revalidate: 60 * 10 },
+    })
+  ).json();
 
-	async function GetCategory(categoryId: number): Promise<Category> {
-		return await prisma.category.findUnique({ where: { id: categoryId } });
-	}
-
-	return await Promise.all(
-		articles.map(async (article) => ({
-			categoryName: (await GetCategory(article.categoryId)).name ?? "",
-			articleName: article.name ?? "",
-		}))
-	);
+  return await Promise.all(
+    articles.map(async (article) => ({
+      categoryName: article.category?.name ?? "",
+      articleName: article.name ?? "",
+    }))
+  );
 }

app/articles/[categoryName]/page.tsx

@@ -1,63 +1,72 @@
 import styles from "../../../styles/modules/Category.module.scss";
 import Link from "next/link";
-import prisma from "../../../lib/prisma";
+import { apiUrl } from "../../global";
 import { Article, Category } from "@prisma/client";
+import urlJoin from "url-join";
 
-export async function GetAllArticles(category: Category): Promise<Article[]> {
-	return await prisma.article.findMany({ where: { category: category } });
+async function GetAllArticles(categoryName: string): Promise<any> {
+  const result: Response = await fetch(urlJoin(apiUrl, `articles?categoryName=${categoryName}`), {
+    cache: "force-cache",
+    next: { revalidate: 3600 },
+  });
+  return result.json();
 }
 
-export async function GetPopularArticles(
-	category: Category
-): Promise<Article[]> {
-	return await prisma.article.findMany({
-		where: { category: category },
-		take: 6,
-	});
+async function GetPopularArticles(categoryName: string): Promise<any> {
+  const result: Response = await fetch(
+    urlJoin(apiUrl, `articles?categoryName=${categoryName}&limit=6&orderBy=popularity`),
+    {
+      cache: "force-cache",
+      next: { revalidate: 3600 },
+    }
+  );
+  return result.json();
 }
 
-export async function GetRecentArticles(
-	category: Category
-): Promise<Article[]> {
-	return await prisma.article.findMany({
-		where: { category: category },
-		take: 6,
-		orderBy: { dateCreated: "desc" },
-	});
+async function GetRecentArticles(categoryName: string): Promise<any> {
+  const result: Response = await fetch(
+    urlJoin(apiUrl, `articles?categoryName=${categoryName}&limit=6&orderBy=recent`),
+    {
+      cache: "force-cache",
+      next: { revalidate: 3600 },
+    }
+  );
+  return result.json();
 }
 
-export async function GetCategory(categoryName: string): Promise<Category> {
-	return await prisma.category.findUnique({ where: { name: categoryName } });
+async function GetCategory(categoryName: string): Promise<any> {
+  const result: Response = await fetch(urlJoin(apiUrl, `categories/${categoryName}`), {
+    cache: "force-cache",
+    next: { revalidate: 3600 },
+  });
+  return result.json();
 }
-export default async function CategoryPage({
-	params,
-}: {
-	params: { categoryName: string };
-}) {
-	const categoryName = params.categoryName.toLowerCase().replaceAll("%20", " ");
-	const category: Category = await GetCategory(categoryName);
-	const allArticles: Article[] = await GetAllArticles(category);
-	const popularArticles: Article[] = await GetPopularArticles(category);
-	const recentArticles: Article[] = await GetRecentArticles(category);
 
-	return (
-		<div className={styles.category}>
-			<h1>{category?.title}</h1>
-			<div className={styles.content}>
-				<div className={`${styles.showcase} ${styles.smallShowcase}`}>
-					<h2>Most popular articles</h2>
-					{popularArticles?.map((a, i) => {
-						{
-							return (
-								<Link key={i} href={`/articles/${category.name}/${a.name}`}>
-									{a.name}
-								</Link>
-							);
-						}
-					})}
-				</div>
+export default async function CategoryPage({ params }: { params: { categoryName: string } }) {
+  const categoryName = params.categoryName.toLowerCase().replaceAll("%20", " ");
+  const category: Category = await GetCategory(categoryName);
+  const allArticles: Article[] = await GetAllArticles(categoryName);
+  const popularArticles: Article[] = await GetPopularArticles(categoryName);
+  const recentArticles: Article[] = await GetRecentArticles(categoryName);
+  console.log(popularArticles);
+  return (
+    <div className={styles.category}>
+      <h1>{category?.title}</h1>
+      <div className={styles.content}>
+        <div className={`${styles.showcase} ${styles.smallShowcase}`}>
+          <h2>Most popular articles</h2>
+          {popularArticles?.map((a, i) => {
+            {
+              return (
+                <Link key={i} href={`/articles/${category.name}/${a.name}`}>
+                  {a.name}
+                </Link>
+              );
+            }
+          })}
+        </div>
 
-				{/* <div className={`${styles.showcase} ${styles.smallShowcase}`}>
+        {/* <div className={`${styles.showcase} ${styles.smallShowcase}`}>
 					<h2>Most recent articles</h2>
 					{recentArticles?.map((a, i) => {
 						{
@@ -70,19 +79,19 @@ export default async function CategoryPage({
 					})}
 				</div> */}
 
-				<div className={styles.showcase}>
-					<h2>All articles</h2>
-					{allArticles?.map((a, i) => {
-						{
-							return (
-								<Link key={i} href={`/articles/${category.name}/${a.name}`}>
-									{a.name}
-								</Link>
-							);
-						}
-					})}
-				</div>
-			</div>
-		</div>
-	);
+        <div className={styles.showcase}>
+          <h2>All articles</h2>
+          {allArticles?.map((a, i) => {
+            {
+              return (
+                <Link key={i} href={`/articles/${category.name}/${a.name}`}>
+                  {a.name}
+                </Link>
+              );
+            }
+          })}
+        </div>
+      </div>
+    </div>
+  );
 }

app/articles/page.tsx

@@ -1,47 +1,45 @@
 import styles from "../../styles/modules/CategoryList.module.scss";
 import Link from "next/link";
-import prisma from "../../lib/prisma";
 import { Category, Svg, Prisma } from "@prisma/client";
-import { Suspense } from "react";
-import dynamic from "next/dynamic";
+import urlJoin from "url-join";
+import { apiUrl } from "../global";
 
 type CategoryWithSvg = Prisma.CategoryGetPayload<{ include: { svg: true } }>;
 
-export async function GetCategories(): Promise<CategoryWithSvg[]> {
-	return await prisma.category.findMany({ include: { svg: true } });
+export async function GetCategories(): Promise<any> {
+  const result: Response = await fetch(urlJoin(apiUrl, `categories`), {
+    cache: "force-cache",
+    next: { revalidate: 3600 },
+  });
+
+  return result.json();
 }
 
 export default async function CategoryList() {
-	const categories = await GetCategories();
-	return (
-		<div className={styles.categoryList}>
-			<h1>Overview</h1>
-			<div className={styles.content}>
-				<div className={styles.grid}>
-					{categories?.length > 0
-						? categories.map((cat, i) => {
-								return (
-									<div key={i} className={styles.linkContainer}>
-										<Link
-											href={`/articles/${cat.name.toLowerCase()}`}
-											style={{ backgroundColor: cat.color }}
-										>
-											<div className={styles.svgContainer}>
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													viewBox={cat?.svg?.viewbox}
-												>
-													<path d={cat?.svg?.path} />
-												</svg>
-											</div>
-											{cat.title}
-										</Link>
-									</div>
-								);
-						  })
-						: "We did not find any categories"}
-				</div>
-			</div>
-		</div>
-	);
+  const categories = await GetCategories();
+  return (
+    <div className={styles.categoryList}>
+      <h1>Overview</h1>
+      <div className={styles.content}>
+        <div className={styles.grid}>
+          {categories?.length > 0
+            ? categories.map((cat, i) => {
+                return (
+                  <div key={i} className={styles.linkContainer}>
+                    <Link href={`/articles/${cat.name.toLowerCase()}`} style={{ backgroundColor: cat.color }}>
+                      <div className={styles.svgContainer}>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox={cat?.svg?.viewbox}>
+                          <path d={cat?.svg?.path} />
+                        </svg>
+                      </div>
+                      {cat.title}
+                    </Link>
+                  </div>
+                );
+              })
+            : "We did not find any categories"}
+        </div>
+      </div>
+    </div>
+  );
 }