add api

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "printWidth": 120
+}

app/Nav.tsx

@@ -2,14 +2,11 @@
 import styles from "../styles/modules/Nav.module.scss";
 import Image from "next/image";
 import Link from "next/link";
-import { MutableRefObject, useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
-import async from "./articles/[categoryName]/[articleName]/head";
+import { Category } from "@prisma/client";
-import ContentTable from "./articles/[categoryName]/[articleName]/ContentTable";
+import urlJoin from "url-join";
-
+import { apiUrl } from "./global";
-export type NavCategory = {
+import { GetStaticProps } from "next";
-	name: string;
-	title: string;
-};
 
 function switchTheme(theme) {
   const bodyElement = document.getElementsByTagName("body")[0];
@@ -44,7 +41,7 @@ function toggleTheme() {
   }, 150);
 }
 
-export default function Nav({ categories }: { categories: NavCategory[] }) {
+export default function Nav({ categories }: { categories: Category[] }) {
   const [searchResults, setSearchResults] = useState([]);
 
   async function handleSearchInput(event) {
@@ -74,12 +71,7 @@ export default function Nav({ categories }: { categories: NavCategory[] }) {
   return (
     <nav className={styles.nav}>
       <div className={styles.containerLeft}>
-				<Image
+        <Image src={"/images/logo.svg"} height={40} width={160} alt="Nav bar logo" />
-					src={"/images/logo.svg"}
-					height={40}
-					width={160}
-					alt="Nav bar logo"
-				/>
         <div className={styles.links}>
           <div className={styles.dropDown}>
             <Link href="/articles">Categories</Link>
@@ -89,10 +81,7 @@ export default function Nav({ categories }: { categories: NavCategory[] }) {
                 {categories?.map((cat, i) => {
                   {
                     return (
-											<Link
+                      <Link key={i} href={`/articles/${cat.name.toLowerCase()}`}>
-												key={i}
-												href={`/articles/${cat.name.toLowerCase()}`}
-											>
                         {cat.title}
                       </Link>
                     );
@@ -116,11 +105,7 @@ export default function Nav({ categories }: { categories: NavCategory[] }) {
           <div className={styles.content}>
             {searchResults.map((s) => {
               {
-								return (
+                return <Link href={`/articles/${s.name.toLowerCase()}`}>{s.title}</Link>;
-									<Link href={`/articles/${s.name.toLowerCase()}`}>
-										{s.title}
-									</Link>
-								);
               }
             })}
           </div>
@@ -133,11 +118,7 @@ export default function Nav({ categories }: { categories: NavCategory[] }) {
             toggleTheme();
           }}
         >
-					<svg
+          <svg id="themeSwitchSvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-						id="themeSwitchSvg"
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 512 512"
-					>
             <path d="M448 256c0-106-86-192-192-192V448c106 0 192-86 192-192zm64 0c0 141.4-114.6 256-256 256S0 397.4 0 256S114.6 0 256 0S512 114.6 512 256z" />
           </svg>
         </div>

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

@@ -1,15 +1,10 @@
 import React from "react";
-import prisma from "../../../../lib/prisma";
+import styles from "../../../../styles/modules/ArticleContentTable.module.scss";
-import styles from "../../../../styles/modules/TutorialContentTable.module.scss";
 import { Article, ContentTableEntry } from "@prisma/client";
 
-export default function ContentTable({
+export default function ContentTable({ contentTableEntries }: { contentTableEntries: ContentTableEntry[] }) {
-	contentTableEntries,
-}: {
-	contentTableEntries: ContentTableEntry[];
-}) {
   return (
-		<div className={styles.tutorialContentTable}>
+    <div className={styles.articleContentTable}>
       <div className={styles.stickyContainer}>
         <div className={styles.list}>
           <h2>Contents</h2>
@@ -21,11 +16,7 @@ export default function ContentTable({
             );
           })}
         </div>
-				{contentTableEntries?.length < 15 ? (
+        {contentTableEntries?.length < 15 ? <div className={styles.adContainer}>Future advertisement</div> : ""}
-					<div className={styles.adContainer}>Future advertisement</div>
-				) : (
-					""
-				)}
       </div>
     </div>
   );

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

@@ -1,57 +1,67 @@
 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(
+type ArticleWithContentTableEntries = Prisma.ArticleGetPayload<{ include: { contentTableEntries: true } }>;
-	article: Article
+type ArticleWithCategory = Prisma.ArticleGetPayload<{ include: { category: true } }>;
-): Promise<ContentTableEntry[]> {
+
-	const entries = await prisma.contentTableEntry.findMany({
+// export async function GetContentTableEntries(article: Article): Promise<ContentTableEntry[]> {
-		where: { articleId: article?.id ?? 1 },
+//   const entries = await prisma.contentTableEntry.findMany({
-		orderBy: { orderIndex: "asc" },
+//     where: { articleId: article?.id ?? 1 },
+//     orderBy: { orderIndex: "asc" },
+//   });
+
+//   return entries;
+// }
+
+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 entries;
+  return result.json();
-}
-
-export async function GetArticle(articleName: string) {
-	const article = await prisma.article.findUnique({
-		where: { name: articleName.toLowerCase() ?? "" },
-	});
-
-	return article;
 }
 
 function ParseMarkdown(markdown: string): string {
   let result = marked.parse(markdown);
-
   return result;
 }
 
 //* MAIN
-export default async function ArticlePage({
+export default async function ArticlePage({ params }: { params: { articleName: string; categoryName: string } }) {
-	params,
+  const articleName: string = params.articleName.toLowerCase().replaceAll("%20", " ");
-}: {
+  const article: ArticleWithContentTableEntries = await GetArticle(articleName);
-	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
-	);
 
   return (
-		<div className={styles.tutorial}>
+    <div className={styles.article}>
-			<ContentTable contentTableEntries={contentTableEntries} />
+      <ContentTable contentTableEntries={article.contentTableEntries} />
       <div className={styles.tutorialContent}>
-				<div className={styles.head}>
+        <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"
@@ -67,15 +77,16 @@ export default async function ArticlePage({
 }
 
 export async function generateStaticParams() {
-	const articles = await prisma.article.findMany();
+  const articles: ArticleWithCategory[] = await (
-
+    await fetch(urlJoin(apiUrl, `articles/`), {
-	async function GetCategory(categoryId: number): Promise<Category> {
+      cache: "force-cache",
-		return await prisma.category.findUnique({ where: { id: categoryId } });
+      next: { revalidate: 60 * 10 },
-	}
+    })
+  ).json();
 
   return await Promise.all(
     articles.map(async (article) => ({
-			categoryName: (await GetCategory(article.categoryId)).name ?? "",
+      categoryName: article.category?.name ?? "",
       articleName: article.name ?? "",
     }))
   );

app/articles/[categoryName]/page.tsx

@@ -1,45 +1,54 @@
 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[]> {
+async function GetAllArticles(categoryName: string): Promise<any> {
-	return await prisma.article.findMany({ where: { category: category } });
+  const result: Response = await fetch(urlJoin(apiUrl, `articles?categoryName=${categoryName}`), {
-}
+    cache: "force-cache",
-
+    next: { revalidate: 3600 },
-export async function GetPopularArticles(
-	category: Category
-): Promise<Article[]> {
-	return await prisma.article.findMany({
-		where: { category: category },
-		take: 6,
   });
+  return result.json();
 }
 
-export async function GetRecentArticles(
+async function GetPopularArticles(categoryName: string): Promise<any> {
-	category: Category
+  const result: Response = await fetch(
-): Promise<Article[]> {
+    urlJoin(apiUrl, `articles?categoryName=${categoryName}&limit=6&orderBy=popularity`),
-	return await prisma.article.findMany({
+    {
-		where: { category: category },
+      cache: "force-cache",
-		take: 6,
+      next: { revalidate: 3600 },
-		orderBy: { dateCreated: "desc" },
+    }
+  );
+  return result.json();
+}
+
+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();
+}
+
+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 async function GetCategory(categoryName: string): Promise<Category> {
+export default async function CategoryPage({ params }: { params: { categoryName: string } }) {
-	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 allArticles: Article[] = await GetAllArticles(categoryName);
-	const popularArticles: Article[] = await GetPopularArticles(category);
+  const popularArticles: Article[] = await GetPopularArticles(categoryName);
-	const recentArticles: Article[] = await GetRecentArticles(category);
+  const recentArticles: Article[] = await GetRecentArticles(categoryName);
-
+  console.log(popularArticles);
   return (
     <div className={styles.category}>
       <h1>{category?.title}</h1>

app/articles/page.tsx

@@ -1,14 +1,18 @@
 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 urlJoin from "url-join";
-import dynamic from "next/dynamic";
+import { apiUrl } from "../global";
 
 type CategoryWithSvg = Prisma.CategoryGetPayload<{ include: { svg: true } }>;
 
-export async function GetCategories(): Promise<CategoryWithSvg[]> {
+export async function GetCategories(): Promise<any> {
-	return await prisma.category.findMany({ include: { svg: true } });
+  const result: Response = await fetch(urlJoin(apiUrl, `categories`), {
+    cache: "force-cache",
+    next: { revalidate: 3600 },
+  });
+
+  return result.json();
 }
 
 export default async function CategoryList() {
@@ -22,15 +26,9 @@ export default async function CategoryList() {
             ? categories.map((cat, i) => {
                 return (
                   <div key={i} className={styles.linkContainer}>
-										<Link
+                    <Link href={`/articles/${cat.name.toLowerCase()}`} style={{ backgroundColor: cat.color }}>
-											href={`/articles/${cat.name.toLowerCase()}`}
-											style={{ backgroundColor: cat.color }}
-										>
                       <div className={styles.svgContainer}>
-												<svg
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox={cat?.svg?.viewbox}>
-													xmlns="http://www.w3.org/2000/svg"
-													viewBox={cat?.svg?.viewbox}
-												>
                           <path d={cat?.svg?.path} />
                         </svg>
                       </div>

app/global.ts

@@ -0,0 +1,3 @@
+//! Using this because publicRuntimeConfig is not implemented in appDir yet
+
+export const apiUrl: string = "http://localhost:3000/api/";

app/layout.tsx

@@ -4,28 +4,26 @@ import "../styles/variables.scss";
 import Nav from "./Nav";
 import Footer from "./Footer";
 import { Category } from "@prisma/client";
-import prisma from "../lib/prisma";
+import urlJoin from "url-join";
-import { NavCategory } from "./Nav";
+import { apiUrl } from "./global";
 
-export async function GetNavCategories(): Promise<NavCategory[]> {
+async function getCategories(): Promise<Category[]> {
-	const result: NavCategory[] = await prisma.category.findMany({
+  const result: Response = await fetch(urlJoin(apiUrl, `categories`), {
-		select: { name: true, title: true },
+    cache: "force-cache",
+    next: { revalidate: 3600 },
   });
-	return result;
+
+  return await result.json();
 }
 
-export default async function RootLayout({
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
-	children,
-}: {
-	children: React.ReactNode;
-}) {
   return (
     <html style={{ scrollBehavior: "smooth" }}>
       <head></head>
 
       <body className="body">
         <header>
-					<Nav categories={await GetNavCategories()} />
+          <Nav categories={await getCategories()} />
         </header>
         <main>{children}</main>
         <Footer />

next.config.js

@@ -4,6 +4,11 @@ const nextConfig = {
   experimental: {
     appDir: true,
   },
+  typescript: {
+    // !! WARN !!
+    // Dangerously allow production builds to successfully complete even if your project has type errors.
+    ignoreBuildErrors: true,
+  },
 };
 
 module.exports = nextConfig;

package.json

@@ -5,34 +5,32 @@
   "scripts": {
     "prisma": "prisma generate && prisma db push && prisma studio",
     "dev": "next dev",
-		"build": "prisma generate && prisma migrate deploy && prisma db push && next build",
+    "build": "prisma generate && prisma migrate deploy && next build",
     "start": "next start",
-		"lint": "next lint"
+    "lint": "next lint",
+    "vercel-build": "prisma generate && prisma db push && next build",
+    "prisma:generate": "prisma generate"
   },
   "dependencies": {
     "@next/font": "13.0.7",
     "@prisma/client": "^4.8.0",
+    "@types/express": "^4.17.15",
     "@types/marked": "^4.0.8",
-		"@types/pg-promise": "^5.4.3",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",
     "encoding": "^0.1.13",
     "eslint": "8.30.0",
     "eslint-config-next": "13.0.7",
-		"flexsearch": "^0.7.31",
     "marked": "^4.2.4",
-		"next": "^13.1.1-canary.1",
+    "next": "^13.1.2-canary.2",
-		"node-html-parser": "^6.1.4",
-		"pg": "^8.8.0",
-		"pg-promise": "^10.15.4",
     "prismjs": "^1.29.0",
     "react": "18.2.0",
     "react-code-blocks": "^0.0.9-0",
     "react-dom": "18.2.0",
     "reflect-metadata": "^0.1.13",
     "sass": "^1.57.0",
-		"typeorm": "^0.3.11",
+    "typescript": "4.9.4",
-		"typescript": "4.9.4"
+    "url-join": "^5.0.0"
   },
   "devDependencies": {
     "@types/node": "^18.11.17",

pages/api/articles/[articleName].ts

@@ -0,0 +1,31 @@
+import { Request, Response } from "express";
+import prisma from "../../../lib/prisma";
+import { Article } from "@prisma/client";
+import { ResponseError } from "../../../types/responseErrors";
+
+export default async function handler(req: Request, res: Response) {
+  res.setHeader("Content-Type", "application/json");
+
+  const articleName: string = req.query.articleName.toString();
+
+  await prisma.article
+    .findUnique({ where: { name: articleName }, include: { category: true, contentTableEntries: true } })
+    .then((result: Article) => {
+      if (result !== null) {
+        res.end(JSON.stringify(result));
+      } else {
+        const error: ResponseError = {
+          code: "404",
+          message: "No article with this name found!",
+        };
+        res.status(404).send(JSON.stringify(error));
+      }
+    })
+    .catch((err) => {
+      const error: ResponseError = {
+        code: "500",
+        message: err,
+      };
+      res.status(500).send(JSON.stringify(error));
+    });
+}

pages/api/articles/index.ts

@@ -0,0 +1,53 @@
+import { Request, Response } from "express";
+import prisma from "../../../lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Article, Category } from "@prisma/client";
+import { ResponseError } from "../../../types/responseErrors";
+
+export default async function handler(req: Request, res: Response) {
+  res.setHeader("Content-Type", "application/json");
+
+  const categoryName: string = req.query.categoryName?.toString() ?? "";
+  const limit: number = req.query.limit ? Number(req.query.limit) : undefined;
+  const orderBy: string = req.query.orderBy?.toString() ?? "";
+
+  const category = await prisma.category.findUnique({ where: { name: categoryName } });
+
+  let orderByObj: Prisma.Enumerable<Prisma.ArticleOrderByWithRelationInput>;
+
+  if (orderBy === "recent") {
+    orderByObj = {
+      dateCreated: "desc"
+    }
+  } else if (orderBy === "popularity") {
+
+  }
+
+
+  await prisma.article
+    .findMany({
+      where: { category: categoryName.length > 0 ? category : undefined },
+      include: { category: true, contentTableEntries: true },
+      take: limit,
+      orderBy: orderByObj
+    })
+    .then((result: Article[]) => {
+      if (result !== null) {
+
+        res.end(JSON.stringify(result));
+      } else {
+        const error: ResponseError = {
+          code: "404",
+          message: "No articles found!",
+        };
+        res.status(404).send(JSON.stringify(error));
+      }
+    })
+    .catch((err) => {
+      const error: ResponseError = {
+        code: "500",
+        message: err,
+      };
+      res.status(500).send(JSON.stringify(error));
+    });
+}

pages/api/categories/[categoryName].tsx

@@ -0,0 +1,31 @@
+import { Request, Response } from "express";
+import prisma from "../../../lib/prisma";
+import { Category } from "@prisma/client";
+import { ResponseError } from "../../../types/responseErrors";
+
+export default async function handler(req: Request, res: Response) {
+  res.setHeader("Content-Type", "application/json");
+
+  const categoryName: string = req.query.categoryName.toString() ?? undefined;
+
+  await prisma.category
+    .findUnique({ where: { name: categoryName }, include: { svg: true } })
+    .then((result: Category) => {
+      if (result !== null) {
+        res.end(JSON.stringify(result));
+      } else {
+        const error: ResponseError = {
+          code: "404",
+          message: "No category with this name found!",
+        };
+        res.status(404).send(JSON.stringify(error));
+      }
+    })
+    .catch((err) => {
+      const error: ResponseError = {
+        code: "500",
+        message: err,
+      };
+      res.status(500).send(JSON.stringify(error));
+    });
+}

pages/api/categories/index.tsx

@@ -0,0 +1,29 @@
+import { Request, Response } from "express";
+import prisma from "../../../lib/prisma";
+import { Category } from "@prisma/client";
+import { ResponseError } from "../../../types/responseErrors";
+
+export default async function handler(req: Request, res: Response) {
+  res.setHeader("Content-Type", "application/json");
+
+  await prisma.category
+    .findMany({ include: { svg: true } })
+    .then((result: Category[]) => {
+      if (result !== null) {
+        res.end(JSON.stringify(result));
+      } else {
+        const error: ResponseError = {
+          code: "404",
+          message: "No categories found!",
+        };
+        res.status(404).send(JSON.stringify(error));
+      }
+    })
+    .catch((err) => {
+      const error: ResponseError = {
+        code: "500",
+        message: err,
+      };
+      res.status(500).send(JSON.stringify(error));
+    });
+}

pages/api/search.tsx

@@ -1,13 +1,13 @@
 import prisma from "../../lib/prisma";
 
-export default async function search(req, res) {
+export default async function handler(req, res) {
   res.setHeader("Content-Type", "application/json");
   let query: string = req.query?.q ?? "";
 
   query = query.toLowerCase().replaceAll("%20", "");
   query = query.toLowerCase().replaceAll(" ", "");
 
-	if (query.length > 1) {
+  if (query.length > 0) {
     const articles = await prisma.article.findMany({
       select: { title: true, name: true },
       take: 5,

prisma/migrations/20230107035654_init/migration.sql

@@ -0,0 +1,109 @@
+-- CreateTable
+CREATE TABLE "Article" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "title" TEXT NOT NULL,
+    "markdown" TEXT NOT NULL,
+    "categoryId" INTEGER,
+    "typeId" INTEGER,
+    "dateCreated" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "dateUpdated" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "Article_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "ContentTableEntry" (
+    "id" SERIAL NOT NULL,
+    "title" TEXT NOT NULL,
+    "anchor" TEXT NOT NULL,
+    "orderIndex" INTEGER NOT NULL,
+    "articleId" INTEGER NOT NULL,
+    "dateCreated" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "dateUpdated" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "ContentTableEntry_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Category" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "title" TEXT NOT NULL,
+    "color" TEXT NOT NULL,
+    "svgId" INTEGER NOT NULL,
+    "dateCreated" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "dateUpdated" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "Category_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "ArticleType" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "title" TEXT NOT NULL,
+    "dateCreated" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "dateUpdated" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "ArticleType_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Image" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "url" TEXT NOT NULL DEFAULT '',
+    "dateCreated" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "Image_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Svg" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "path" TEXT NOT NULL DEFAULT '',
+    "viewbox" TEXT NOT NULL DEFAULT '0 0 512 512',
+
+    CONSTRAINT "Svg_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Article_name_key" ON "Article"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Article_title_key" ON "Article"("title");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Category_name_key" ON "Category"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Category_title_key" ON "Category"("title");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Category_color_key" ON "Category"("color");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "ArticleType_name_key" ON "ArticleType"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "ArticleType_title_key" ON "ArticleType"("title");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Image_name_key" ON "Image"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Svg_name_key" ON "Svg"("name");
+
+-- AddForeignKey
+ALTER TABLE "Article" ADD CONSTRAINT "Article_categoryId_fkey" FOREIGN KEY ("categoryId") REFERENCES "Category"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Article" ADD CONSTRAINT "Article_typeId_fkey" FOREIGN KEY ("typeId") REFERENCES "ArticleType"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "ContentTableEntry" ADD CONSTRAINT "ContentTableEntry_articleId_fkey" FOREIGN KEY ("articleId") REFERENCES "Article"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Category" ADD CONSTRAINT "Category_svgId_fkey" FOREIGN KEY ("svgId") REFERENCES "Svg"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "postgresql"

prisma/schema.prisma

@@ -53,6 +53,13 @@ model ArticleType {
   dateUpdated DateTime  @default(now())
 }
 
+model Image {
+  id          Int      @id @default(autoincrement())
+  name        String   @unique
+  url         String   @default("")
+  dateCreated DateTime @default(now())
+}
+
 model Svg {
   id       Int        @id @default(autoincrement())
   name     String     @unique

styles/modules/Article.module.scss

@@ -0,0 +1,37 @@
+@import "../variables.scss";
+.article {
+  display: grid;
+  gap: 70px;
+  grid-template-columns: $tutorial-content-table-width minmax(0px, 1fr) $tutorial-sidebar-width;
+  margin: 0px auto;
+  max-width: 1800px;
+  padding: 0px 24px;
+
+  @media (max-width: $tutorial-breakpoint-1) {
+    grid-template-columns: $tutorial-content-table-width 1fr;
+  }
+
+  @media (max-width: $tutorial-breakpoint-2) {
+    grid-template-columns: 1fr;
+  }
+  .header {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 10px 0px 10px 0px;
+    gap: 10px 0px;
+
+    h1 {
+    }
+    img {
+      width: min(100%, 750px);
+      height: auto;
+      aspect-ratio: 15/7;
+    }
+  }
+
+  .tutorialContent {
+    min-width: 0;
+  }
+}

styles/modules/ArticleContentTable.module.scss

@@ -0,0 +1,29 @@
+@import "../variables.scss";
+
+.articleContentTable {
+  @media (max-width: $tutorial-breakpoint-2) {
+    display: none;
+  }
+  .stickyContainer {
+    position: sticky;
+    top: $tutorial-grid-sticky-top;
+
+    .list {
+      align-items: flex-start;
+      display: flex;
+      flex-direction: column;
+      margin-bottom: 16px;
+      padding-bottom: 16px;
+      row-gap: 10px;
+    }
+
+    .adContainer {
+      background-color: #ff00003e;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

styles/modules/Nav.module.scss

@@ -1,4 +1,5 @@
 @import "../variables.scss";
+
 .nav {
 	background-color: var(--color-background-nav);
 	height: $nav-height-inital;

styles/modules/Tutorial.module.scss

@@ -1,21 +0,0 @@
-@import "../variables.scss";
-.tutorial {
-	display: grid;
-	gap: 70px;
-	grid-template-columns: $tutorial-content-table-width minmax(0px, 1fr) $tutorial-sidebar-width;
-	margin: 0px auto;
-	max-width: 1800px;
-	padding: 0px 24px;
-
-	@media (max-width: $tutorial-breakpoint-1) {
-		grid-template-columns: $tutorial-content-table-width 1fr;
-	}
-
-	@media (max-width: $tutorial-breakpoint-2) {
-		grid-template-columns: 1fr;
-	}
-
-	.tutorialContent {
-		min-width: 0;
-	}
-}

styles/modules/TutorialContentTable.module.scss

@@ -1,29 +0,0 @@
-@import "../variables.scss";
-
-.tutorialContentTable {
-	@media (max-width: $tutorial-breakpoint-2) {
-		display: none;
-	}
-	.stickyContainer {
-		position: sticky;
-		top: $tutorial-grid-sticky-top;
-
-		.list {
-			align-items: flex-start;
-			display: flex;
-			flex-direction: column;
-			margin-bottom: 16px;
-			padding-bottom: 16px;
-			row-gap: 10px;
-		}
-
-		.adContainer {
-			background-color: #ff00003e;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			width: 100%;
-			height: 100%;
-		}
-	}
-}

styles/typography.scss

@@ -70,3 +70,9 @@ a {
     color: var(--color-font-link);
   }
 }
+
+.text-muted {
+  color: var(--color-font-muted);
+  font-weight: bold;
+  font-size: 0.8em;
+}

styles/variables_colors.scss

@@ -7,13 +7,14 @@
   /* Colors: General */
   --color-background-body: #181a1b;
   --color-font: #ffffff;
+  --color-font-muted: #929292;
   --color-shadow-nav: #00000033;
 
   --color-overlay-mix: var(--color-font);
   --color-background-nav: transparent;
-	--color-svg-nav: rgb(191, 191, 191);
+  --color-svg-nav: #bfbfbf;
 
-	--color-background-card: rgba(123, 123, 123, 0.13);
+  --color-background-card: #7b7b7b21;
   --color-background-dropdown: var(--color-background-body);
   --color-accent: #2294ff;
   --color-font-link: var(--color-accent);
@@ -21,16 +22,16 @@
   --color-font-link-hover: #5caffc;
 
   /* Colors: Markdown */
-	--md-color-font: rgb(220, 217, 217);
+  --md-color-font: #dcd9d9;
-	--md-color-headline: rgb(229, 228, 228);
+  --md-color-headline: #e5e4e4;
-	--md-color-hr: rgba(125, 125, 125, 0.481);
+  --md-color-hr: #7d7d7d7b;
 
   --md-color-table-col-even-background: #3b556f;
   --md-color-table-col-odd-background: #2f4459;
-	--md-color-table-row-even-background: rgba(52, 52, 52, 0.174);
+  --md-color-table-row-even-background: #3434342c;
   --md-color-table-row-odd-background: transparent;
   --md-color-blockquote-border: var(--color-accent);
-	--md-color-blockquote-background: rgba(52, 52, 52, 0.2);
+  --md-color-blockquote-background: #34343433;
 
   .theme-light {
     --color-background-body: #ffffff;
@@ -39,7 +40,7 @@
 
     --color-overlay-mix: var(--color-font);
     --color-background-nav: transparent;
-		--color-svg-nav: rgb(54, 54, 54);
+    --color-svg-nav: #363636;
 
     --color-background-card: rgba(171, 170, 170, 0.13);
     --color-background-dropdown: var(--color-background-body);

types/responseErrors.tsx

@@ -0,0 +1,4 @@
+export type ResponseError = {
+  code: string;
+  message: string;
+};