Now starting with real commit messages

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

@@ -32,12 +32,14 @@ function ParseMarkdown(markdown: string): string {
 }
 
 //* MAIN
-export default async function Tutorial({
+export default async function ArticlePage({
 	params,
 }: {
 	params: { articleName: string; categoryName: string };
 }) {
-	const articleName: string = params.articleName;
+	const articleName: string = params.articleName
+		.toLowerCase()
+		.replaceAll("%20", " ");
 	const article: Article = await GetArticle(articleName);
 	const markdown: string = article?.markdown ?? "";
 	const contentTableEntries: ContentTableEntry[] = await GetContentTableEntries(

app/articles/[categoryName]/page.tsx

@@ -1,3 +1,88 @@
-export default function Category() {
-	return <h1>List all articles in a category</h1>;
+import styles from "../../../styles/Category.module.scss";
+import Link from "next/link";
+import prisma from "../../../lib/prisma";
+import { Article, Category } from "@prisma/client";
+
+export async function GetAllArticles(category: Category): Promise<Article[]> {
+	return await prisma.article.findMany({ where: { category: category } });
+}
+
+export async function GetPopularArticles(
+	category: Category
+): Promise<Article[]> {
+	return await prisma.article.findMany({
+		where: { category: category },
+		take: 6,
+	});
+}
+
+export async function GetRecentArticles(
+	category: Category
+): Promise<Article[]> {
+	return await prisma.article.findMany({
+		where: { category: category },
+		take: 6,
+		orderBy: { dateCreated: "desc" },
+	});
+}
+
+export async function GetCategory(categoryName: string): Promise<Category> {
+	return await prisma.category.findUnique({ where: { name: categoryName } });
+}
+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>
+
+				{/* <div className={`${styles.showcase} ${styles.smallShowcase}`}>
+					<h2>Most recent articles</h2>
+					{recentArticles?.map((a, i) => {
+						{
+							return (
+								<Link key={i} href={`/articles/${category.name}/${a.name}`}>
+									{a.name}
+								</Link>
+							);
+						}
+					})}
+				</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,42 +1,45 @@
 import styles from "../../styles/CategoryList.module.scss";
 import Link from "next/link";
 import prisma from "../../lib/prisma";
-import { Category } from "@prisma/client";
+import { Category, Svg, Prisma } from "@prisma/client";
 import { Suspense } from "react";
 import dynamic from "next/dynamic";
 
-export async function GetCategories(): Promise<Category[]> {
-	return await prisma.category.findMany();
+type CategoryWithSvg = Prisma.CategoryGetPayload<{ include: { svg: true } }>;
+
+export async function GetCategories(): Promise<CategoryWithSvg[]> {
+	return await prisma.category.findMany({ include: { svg: true } });
 }
 
 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.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="0 0 640 512"
+					{categories?.length > 0
+						? categories.map((cat, i) => {
+								return (
+									<div key={i} className={styles.linkContainer}>
+										<Link
+											href={`/articles/${cat.name.toLowerCase()}`}
+											style={{ backgroundColor: cat.color }}
 										>
-											<path d={cat.svg} />
-										</svg>
+											<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>
-									{cat.name}
-								</Link>
-							</div>
-						);
-					})}
+								);
+						  })
+						: "We did not find any categories"}
 				</div>
 			</div>
 		</div>