diff --git a/app/Nav.tsx b/app/Nav.tsx index e53a9d2..63dc1ca 100644 --- a/app/Nav.tsx +++ b/app/Nav.tsx @@ -1,10 +1,13 @@ "use client"; -import { time } from "console"; import styles from "../styles/Nav.module.scss"; import Image from "next/image"; import Link from "next/link"; import { useEffect } from "react"; -import Category from "./articles/[categoryName]/page"; + +export type NavCategory = { + name: string; + title: string; +}; function switchTheme(theme) { const bodyElement = document.getElementsByTagName("body")[0]; @@ -39,7 +42,7 @@ function toggleTheme() { }, 150); } -export default function Nav({ categories }) { +export default function Nav({ categories }: { categories: NavCategory[] }) { useEffect(() => { if (localStorage.getItem("theme") == "dark") { switchTheme("dark"); @@ -58,15 +61,18 @@ export default function Nav({ categories }) { />
- Categories + Categories
All {categories?.map((cat, i) => { { return ( - - {cat?.name} + + {cat.title} ); } diff --git a/app/articles/[categoryName]/[articleName]/page.tsx b/app/articles/[categoryName]/[articleName]/page.tsx index b1cf088..fa8d6e2 100644 --- a/app/articles/[categoryName]/[articleName]/page.tsx +++ b/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( diff --git a/app/articles/[categoryName]/page.tsx b/app/articles/[categoryName]/page.tsx index 3d17852..71df7e8 100644 --- a/app/articles/[categoryName]/page.tsx +++ b/app/articles/[categoryName]/page.tsx @@ -1,3 +1,88 @@ -export default function Category() { - return

List all articles in a category

; +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 { + return await prisma.article.findMany({ where: { category: category } }); +} + +export async function GetPopularArticles( + category: Category +): Promise { + return await prisma.article.findMany({ + where: { category: category }, + take: 6, + }); +} + +export async function GetRecentArticles( + category: Category +): Promise { + return await prisma.article.findMany({ + where: { category: category }, + take: 6, + orderBy: { dateCreated: "desc" }, + }); +} + +export async function GetCategory(categoryName: string): Promise { + 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 ( +
+

{category?.title}

+
+
+

Most popular articles

+ {popularArticles?.map((a, i) => { + { + return ( + + {a.name} + + ); + } + })} +
+ + {/*
+

Most recent articles

+ {recentArticles?.map((a, i) => { + { + return ( + + {a.name} + + ); + } + })} +
*/} + +
+

All articles

+ {allArticles?.map((a, i) => { + { + return ( + + {a.name} + + ); + } + })} +
+
+
+ ); } diff --git a/app/articles/page.tsx b/app/articles/page.tsx index 99e380b..6ab00cd 100644 --- a/app/articles/page.tsx +++ b/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 { - return await prisma.category.findMany(); +type CategoryWithSvg = Prisma.CategoryGetPayload<{ include: { svg: true } }>; + +export async function GetCategories(): Promise { + return await prisma.category.findMany({ include: { svg: true } }); } export default async function CategoryList() { const categories = await GetCategories(); - return (

Overview

- {categories.map((cat, i) => { - return ( -
- -
- 0 + ? categories.map((cat, i) => { + return ( +
+ - - +
+ + + +
+ {cat.title} +
- {cat.name} - -
- ); - })} + ); + }) + : "We did not find any categories"}
diff --git a/app/layout.tsx b/app/layout.tsx index d31ccdc..e1f9d7a 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -5,9 +5,13 @@ import Nav from "./Nav"; import Footer from "./Footer"; import { Category } from "@prisma/client"; import prisma from "../lib/prisma"; +import { NavCategory } from "./Nav"; -export async function GetCategories(): Promise { - return await prisma.category.findMany(); +export async function GetNavCategories(): Promise { + const result: NavCategory[] = await prisma.category.findMany({ + select: { name: true, title: true }, + }); + return result; } export default async function RootLayout({ @@ -21,7 +25,7 @@ export default async function RootLayout({
-
{children}