janis/explainegy-nextjs
1
0
Fork 0
mirror of https://github.com/DerTyp7/explainegy-nextjs.git synced 2025-10-29 21:02:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

add api

Browse Source
This commit is contained in:
Janis
2023-01-07 08:52:59 +01:00
parent 6ed3cc22f3
commit dd121030e4
30 changed files with 7745 additions and 8665 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.prettierrc Normal file
View File

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

39
app/Nav.tsx
View File

@@ -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 async from "./articles/[categoryName]/[articleName]/head";
import ContentTable from "./articles/[categoryName]/[articleName]/ContentTable";
export type NavCategory = {
name: string;
title: string;
};
import { useEffect, useState } from "react";
import { Category } from "@prisma/client";
import urlJoin from "url-join";
import { apiUrl } from "./global";
import { GetStaticProps } from "next";
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
src={"/images/logo.svg"}
height={40}
width={160}
alt="Nav bar logo"
/>
<Image 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
key={i}
href={`/articles/${cat.name.toLowerCase()}`}
>
<Link 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 (
<Link href={`/articles/${s.name.toLowerCase()}`}>
{s.title}
</Link>
);
return <Link href={`/articles/${s.name.toLowerCase()}`}>{s.title}</Link>;
}
})}
</div>
@@ -133,11 +118,7 @@ export default function Nav({ categories }: { categories: NavCategory[] }) {
toggleTheme();
}}
>
<svg
id="themeSwitchSvg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<svg 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>

17
app/articles/[categoryName]/[articleName]/ContentTable.tsx
View File

@@ -1,15 +1,10 @@
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[];
}) {
export default function ContentTable({ 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 ? (
<div className={styles.adContainer}>Future advertisement</div>
) : (
""
)}
{contentTableEntries?.length < 15 ? <div className={styles.adContainer}>Future advertisement</div> : ""}
</div>
</div>
);

89
app/articles/[categoryName]/[articleName]/page.tsx
View File

@@ -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(
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 } }>;
// export async function GetContentTableEntries(article: Article): Promise<ContentTableEntry[]> {
// const entries = await prisma.contentTableEntry.findMany({
// 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;
}
export async function GetArticle(articleName: string) {
const article = await prisma.article.findUnique({
where: { name: articleName.toLowerCase() ?? "" },
});
return article;
return result.json();
}
function ParseMarkdown(markdown: string): string {
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);
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 ?? "";
const contentTableEntries: ContentTableEntry[] = await GetContentTableEntries(
article
);
return (
<div className={styles.tutorial}>
<ContentTable contentTableEntries={contentTableEntries} />
<div className={styles.article}>
<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();
async function GetCategory(categoryId: number): Promise<Category> {
return await prisma.category.findUnique({ where: { id: categoryId } });
}
const articles: ArticleWithCategory[] = await (
await fetch(urlJoin(apiUrl, `articles/`), {
cache: "force-cache",
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 ?? "",
}))
);

69
app/articles/[categoryName]/page.tsx
View File

@@ -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[]> {
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,
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 GetRecentArticles(
category: Category
): Promise<Article[]> {
return await prisma.article.findMany({
where: { category: category },
take: 6,
orderBy: { dateCreated: "desc" },
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();
}
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> {
return await prisma.category.findUnique({ where: { name: categoryName } });
}
export default async function CategoryPage({
params,
}: {
params: { categoryName: string };
}) {
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);
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>

24
app/articles/page.tsx
View File

@@ -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 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() {
@@ -22,15 +26,9 @@ export default async function CategoryList() {
? categories.map((cat, i) => {
return (
<div key={i} className={styles.linkContainer}>
<Link
href={`/articles/${cat.name.toLowerCase()}`}
style={{ backgroundColor: cat.color }}
>
<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}
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox={cat?.svg?.viewbox}>
<path d={cat?.svg?.path} />
</svg>
</div>

3
app/global.ts Normal file
View File

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

22
app/layout.tsx
View File

@@ -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 { NavCategory } from "./Nav";
import urlJoin from "url-join";
import { apiUrl } from "./global";
export async function GetNavCategories(): Promise<NavCategory[]> {
const result: NavCategory[] = await prisma.category.findMany({
select: { name: true, title: true },
async function getCategories(): Promise<Category[]> {
const result: Response = await fetch(urlJoin(apiUrl, `categories`), {
cache: "force-cache",
next: { revalidate: 3600 },
});
return result;
return await result.json();
}
export default async function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
export default async function RootLayout({ 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 />

5
next.config.js
View File

@@ -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;

1726
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

18
package.json
View File

@@ -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",
"node-html-parser": "^6.1.4",
"pg": "^8.8.0",
"pg-promise": "^10.15.4",
"next": "^13.1.2-canary.2",
"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",

31
pages/api/articles/[articleName].ts Normal file
View File

@@ -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));
});
}

53
pages/api/articles/index.ts Normal file
View File

@@ -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));
});
}

31
pages/api/categories/[categoryName].tsx Normal file
View File

@@ -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));
});
}

29
pages/api/categories/index.tsx Normal file
View File

@@ -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));
});
}

4
pages/api/search.tsx
View File

@@ -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,

109
prisma/migrations/20230107035654_init/migration.sql Normal file
View File

@@ -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;

3
prisma/migrations/migration_lock.toml Normal file
View File

@@ -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"

7
prisma/schema.prisma
View File

@@ -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

BIN
public/images/blur.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 549 B

BIN
public/images/docker.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
public/images/test.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 MiB

37
styles/modules/Article.module.scss Normal file
View File

@@ -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;
}
}

29
styles/modules/ArticleContentTable.module.scss Normal file
View File

@@ -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%;
}
}
}

1
styles/modules/Nav.module.scss
View File

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

21
styles/modules/Tutorial.module.scss
View File

@@ -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;
}
}

29
styles/modules/TutorialContentTable.module.scss
View File

@@ -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%;
}
}
}

6
styles/typography.scss
View File

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

17
styles/variables_colors.scss
View File

@@ -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-headline: rgb(229, 228, 228);
--md-color-hr: rgba(125, 125, 125, 0.481);
--md-color-font: #dcd9d9;
--md-color-headline: #e5e4e4;
--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);

4
types/responseErrors.tsx Normal file
View File

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