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

ads

Browse Source
This commit is contained in:
Janis
2023-01-07 10:13:39 +01:00
parent bb1ce95f13
commit fbb82b03e8
8 changed files with 255 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/Nav.tsx
View File

@@ -4,9 +4,6 @@ import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Category } from "@prisma/client"; import { Category } from "@prisma/client";
import urlJoin from "url-join";
import { apiUrl } from "./global";
import { GetStaticProps } from "next";
function switchTheme(theme) { function switchTheme(theme) {
const bodyElement = document.getElementsByTagName("body")[0]; const bodyElement = document.getElementsByTagName("body")[0];
@@ -71,7 +68,16 @@ export default function Nav({ categories }: { categories: Category[] }) {
return ( return (
<nav className={styles.nav}> <nav className={styles.nav}>
<div className={styles.containerLeft}> <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"
onClick={() => {
window.open("/", "_self");
}}
className={styles.logo}
/>
<div className={styles.links}> <div className={styles.links}>
<div className={styles.dropDown}> <div className={styles.dropDown}>
<Link href="/articles">Categories</Link> <Link href="/articles">Categories</Link>

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

@@ -9,17 +9,9 @@ import urlJoin from "url-join";
import { apiUrl } from "../../../global"; import { apiUrl } from "../../../global";
import { Prisma } from "@prisma/client"; import { Prisma } from "@prisma/client";
type ArticleWithContentTableEntries = Prisma.ArticleGetPayload<{ include: { contentTableEntries: true } }>; type ArticleWithIncludes = Prisma.ArticleGetPayload<{
type ArticleWithCategory = Prisma.ArticleGetPayload<{ include: { category: true } }>; include: { contentTableEntries: true; category: true; image: 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> { export async function GetArticle(articleName: string): Promise<any> {
const result: Response = await fetch(urlJoin(apiUrl, `articles/${articleName ?? ""}`), { const result: Response = await fetch(urlJoin(apiUrl, `articles/${articleName ?? ""}`), {
@@ -38,7 +30,10 @@ function ParseMarkdown(markdown: string): string {
//* MAIN //* MAIN
export default async function ArticlePage({ params }: { params: { articleName: string; categoryName: string } }) { export default async function ArticlePage({ params }: { params: { articleName: string; categoryName: string } }) {
const articleName: string = params.articleName.toLowerCase().replaceAll("%20", " "); const articleName: string = params.articleName.toLowerCase().replaceAll("%20", " ");
const article: ArticleWithContentTableEntries = await GetArticle(articleName); const article: ArticleWithIncludes = await GetArticle(articleName);
const dateUpdated: Date = new Date(article.dateUpdated);
const dateCreated: Date = new Date(article.dateCreated);
const dateOptions: Intl.DateTimeFormatOptions = { month: "long", day: "numeric", year: "numeric" };
const markdown: string = article?.markdown ?? ""; const markdown: string = article?.markdown ?? "";
return ( return (
@@ -46,22 +41,27 @@ export default async function ArticlePage({ params }: { params: { articleName: s
<ContentTable contentTableEntries={article.contentTableEntries} /> <ContentTable contentTableEntries={article.contentTableEntries} />
<div className={styles.tutorialContent}> <div className={styles.tutorialContent}>
<div className={styles.header}> <div className={styles.header}>
<p className="text-muted">Published on January 13, 2022</p> <p className={`${styles.dates} text-muted`}>
{`Published on ${dateCreated.toLocaleDateString("en-US", dateOptions)}`}
<br />
{dateUpdated > dateCreated ? `Updated on ${dateUpdated.toLocaleDateString("en-US", dateOptions)}` : ""}
</p>
<h1>{article?.title}</h1> <h1>{article?.title}</h1>
<div className={styles.tags}> <div className={styles.tags}>
<a href="#">Docker</a> <a href="#">Setup</a> <a href="#">Ubuntu</a> <a href="#">Docker</a> <a href="#">Setup</a> <a href="#">Ubuntu</a>
</div> </div>
<Image <Image
src={"/images/test.jpg"} src={article?.image?.url ?? ""}
height={350} height={350}
width={750} width={750}
alt="Image" alt={article?.image?.alt ?? ""}
quality={100} quality={100}
placeholder="blur" placeholder="blur"
blurDataURL="/images/blur.png" blurDataURL="/images/blur.png"
loading="lazy" loading="lazy"
/> />
<p>{article?.introduction}</p>
</div> </div>
<div <div
className="markdown" className="markdown"
@@ -77,7 +77,7 @@ export default async function ArticlePage({ params }: { params: { articleName: s
} }
export async function generateStaticParams() { export async function generateStaticParams() {
const articles: ArticleWithCategory[] = await ( const articles: ArticleWithIncludes[] = await (
await fetch(urlJoin(apiUrl, `articles/`), { await fetch(urlJoin(apiUrl, `articles/`), {
cache: "force-cache", cache: "force-cache",
next: { revalidate: 60 * 10 }, next: { revalidate: 60 * 10 },

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

@@ -48,7 +48,7 @@ export default async function CategoryPage({ params }: { params: { categoryName:
const allArticles: Article[] = await GetAllArticles(categoryName); const allArticles: Article[] = await GetAllArticles(categoryName);
const popularArticles: Article[] = await GetPopularArticles(categoryName); const popularArticles: Article[] = await GetPopularArticles(categoryName);
const recentArticles: Article[] = await GetRecentArticles(categoryName); const recentArticles: Article[] = await GetRecentArticles(categoryName);
console.log(popularArticles);
return ( return (
<div className={styles.category}> <div className={styles.category}>
<h1>{category?.title}</h1> <h1>{category?.title}</h1>

4
pages/api/articles/[articleName].ts
View File

@@ -3,7 +3,7 @@ import prisma from "../../../lib/prisma";
import { Article, Prisma, ContentTableEntry } from '@prisma/client'; import { Article, Prisma, ContentTableEntry } from '@prisma/client';
import { ResponseError } from "../../../types/responseErrors"; import { ResponseError } from "../../../types/responseErrors";
type ArticleWithIncludes = Prisma.ArticleGetPayload<{ include: { contentTableEntries: true, category: true } }> type ArticleWithIncludes = Prisma.ArticleGetPayload<{ include: { contentTableEntries: true, category: true, image: true } }>
function sortContentTableEntries(entries: ContentTableEntry[]): ContentTableEntry[] { function sortContentTableEntries(entries: ContentTableEntry[]): ContentTableEntry[] {
return entries.sort((a, b) => a.orderIndex - b.orderIndex); return entries.sort((a, b) => a.orderIndex - b.orderIndex);
@@ -16,7 +16,7 @@ export default async function handler(req: Request, res: Response) {
const articleName: string = req.query.articleName.toString(); const articleName: string = req.query.articleName.toString();
await prisma.article await prisma.article
.findUnique({ where: { name: articleName }, include: { category: true, contentTableEntries: true } }) .findUnique({ where: { name: articleName }, include: { category: true, contentTableEntries: true, image: true } })
.then((result: ArticleWithIncludes) => { .then((result: ArticleWithIncludes) => {
if (result !== null) { if (result !== null) {
result.contentTableEntries = sortContentTableEntries(result.contentTableEntries); result.contentTableEntries = sortContentTableEntries(result.contentTableEntries);

20
prisma/schema.prisma
View File

@@ -11,12 +11,13 @@ model Article {
id Int @id @default(autoincrement()) id Int @id @default(autoincrement())
name String @unique name String @unique
title String @unique title String @unique
introduction String @default("")
imageId Int?
image Image? @relation(fields: [imageId], references: [id])
markdown String markdown String
contentTableEntries ContentTableEntry[] contentTableEntries ContentTableEntry[]
categoryId Int? categoryId Int?
category Category? @relation(fields: [categoryId], references: [id]) category Category? @relation(fields: [categoryId], references: [id])
typeId Int?
type ArticleType? @relation(fields: [typeId], references: [id])
dateCreated DateTime @default(now()) dateCreated DateTime @default(now())
dateUpdated DateTime @default(now()) dateUpdated DateTime @default(now())
} }
@@ -44,20 +45,13 @@ model Category {
dateUpdated DateTime @default(now()) dateUpdated DateTime @default(now())
} }
model ArticleType { model Image {
id Int @id @default(autoincrement()) id Int @id @default(autoincrement())
name String @unique name String @unique
title String @unique alt String @default("")
Article Article[] url String @default("")
dateCreated DateTime @default(now()) dateCreated DateTime @default(now())
dateUpdated DateTime @default(now()) Article Article[]
}
model Image {
id Int @id @default(autoincrement())
name String @unique
url String @default("")
dateCreated DateTime @default(now())
} }
model Svg { model Svg {

25
styles/modules/Article.module.scss
View File

@@ -22,12 +22,35 @@
padding: 10px 0px 10px 0px; padding: 10px 0px 10px 0px;
gap: 10px 0px; gap: 10px 0px;
h1 { .dates {
text-align: center;
} }
img { img {
width: min(100%, 750px); width: min(100%, 750px);
height: auto; height: auto;
aspect-ratio: 15/7; aspect-ratio: 15/7;
border-radius: 10px;
}
.tags {
display: flex;
flex-direction: row;
gap: 5px 10px;
a {
font-size: 0.8em;
background-color: var(--color-background-article-tag);
opacity: 0.9;
color: var(--color-font-article-tag);
padding: 5px 10px 5px 10px;
border-radius: 5px;
text-decoration: none;
&:hover {
color: var(--color-font-article-tag) !important;
opacity: 1;
}
}
} }
} }

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

@@ -1,224 +1,227 @@
@import "../variables.scss"; @import "../variables.scss";
.nav { .nav {
background-color: var(--color-background-nav); background-color: var(--color-background-nav);
height: $nav-height-inital; height: $nav-height-inital;
margin-bottom: 10px; margin-bottom: 10px;
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
align-items: center; align-items: center;
box-shadow: var(--color-shadow-nav) 0px 4px 8px; box-shadow: var(--color-shadow-nav) 0px 4px 8px;
@media (max-width: $nav-breakpoint-1) { @media (max-width: $nav-breakpoint-1) {
grid-template-columns: 1fr 1fr 0.25fr; grid-template-columns: 1fr 1fr 0.25fr;
} }
@media (max-width: $nav-breakpoint-2) { @media (max-width: $nav-breakpoint-2) {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
height: 100px; height: 100px;
} }
& > div { & > div {
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.containerLeft { .containerLeft {
@media (max-width: $nav-breakpoint-2) { @media (max-width: $nav-breakpoint-2) {
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
} }
@media (max-width: $nav-breakpoint-3) { @media (max-width: $nav-breakpoint-3) {
column-gap: 20px; column-gap: 20px;
} }
.links { .logo {
font-size: 0.8em; cursor: pointer;
font-weight: bold; }
.links {
font-size: 0.8em;
font-weight: bold;
.dropDown { .dropDown {
color: var(--color-font-link); color: var(--color-font-link);
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
.dropDownContainer { .dropDownContainer {
display: block; display: block;
} }
} }
.dropDownContainer { .dropDownContainer {
display: none; display: none;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
.content { .content {
background-color: var(--color-background-dropdown); background-color: var(--color-background-dropdown);
min-width: 160px; min-width: 160px;
box-shadow: 0px 12px 16px 5px rgba(0, 0, 0, 0.2); box-shadow: 0px 12px 16px 5px rgba(0, 0, 0, 0.2);
margin-top: 21px; margin-top: 21px;
a { a {
float: none; float: none;
color: var(--color-font-link); color: var(--color-font-link);
padding: 12px 16px; padding: 12px 16px;
text-decoration: none; text-decoration: none;
display: block; display: block;
text-align: left; text-align: left;
border-left: 2px solid transparent; border-left: 2px solid transparent;
transition: all 50ms linear; transition: all 50ms linear;
&:hover { &:hover {
border-color: var(--color-accent); border-color: var(--color-accent);
} }
} }
} }
} }
} }
} }
} }
.containerCenter { .containerCenter {
width: 100%; width: 100%;
@media (max-width: $nav-breakpoint-2) { @media (max-width: $nav-breakpoint-2) {
grid-row: 2; grid-row: 2;
grid-column: span 2; grid-column: span 2;
} }
.searchBar { .searchBar {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: 2px solid rgba(95, 95, 95, 0.5); border: 2px solid rgba(95, 95, 95, 0.5);
border-radius: 5px; border-radius: 5px;
padding-left: 10px; padding-left: 10px;
transition: all 50ms linear; transition: all 50ms linear;
&:hover { &:hover {
border-color: rgba(91, 91, 91, 0.9); border-color: rgba(91, 91, 91, 0.9);
.icon { .icon {
svg { svg {
fill: var(--color-font); fill: var(--color-font);
} }
} }
} }
&:focus-within { &:focus-within {
border-color: rgba(91, 91, 91, 0.9); border-color: rgba(91, 91, 91, 0.9);
.icon { .icon {
svg { svg {
fill: var(--color-font); fill: var(--color-font);
} }
} }
} }
&:focus-within + .searchResults { &:focus-within + .searchResults {
display: block; display: block;
} }
input { input {
width: 300px; width: 300px;
height: 30px; height: 30px;
background-color: transparent; background-color: transparent;
border: 0px; border: 0px;
outline: 0; outline: 0;
padding-right: 10px; padding-right: 10px;
color: var(--color-font); color: var(--color-font);
@media (max-width: $nav-breakpoint-4) { @media (max-width: $nav-breakpoint-4) {
width: 200px; width: 200px;
} }
} }
.icon { .icon {
display: block; display: block;
padding-right: 10px; padding-right: 10px;
svg { svg {
height: 15px; height: 15px;
} }
} }
} }
.searchResults { .searchResults {
display: none; display: none;
position: absolute; position: absolute;
top: 48px; top: 48px;
&:hover { &:hover {
display: block; display: block;
} }
@media (max-width: $nav-breakpoint-2) { @media (max-width: $nav-breakpoint-2) {
top: 94px; top: 94px;
} }
.content { .content {
background-color: rgb(18, 18, 18); background-color: rgb(18, 18, 18);
width: 335px; width: 335px;
a { a {
text-decoration: none; text-decoration: none;
display: block; display: block;
width: 100%; width: 100%;
padding: 5px 10px 5px 10px; padding: 5px 10px 5px 10px;
float: none; float: none;
border-left: 2px solid transparent; border-left: 2px solid transparent;
transition: all 50ms linear; transition: all 50ms linear;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.8em; font-size: 0.8em;
&:hover { &:hover {
border-color: var(--color-accent); border-color: var(--color-accent);
background-color: rgba(41, 41, 41, 0.2); background-color: rgba(41, 41, 41, 0.2);
} }
} }
@media (max-width: $nav-breakpoint-4) { @media (max-width: $nav-breakpoint-4) {
width: 235px; width: 235px;
} }
} }
} }
} }
.containerRight { .containerRight {
justify-content: flex-end; justify-content: flex-end;
padding-right: 50px; padding-right: 50px;
@media (max-width: $nav-breakpoint-2) { @media (max-width: $nav-breakpoint-2) {
grid-row: 1; grid-row: 1;
} }
@media (max-width: $nav-breakpoint-4) { @media (max-width: $nav-breakpoint-4) {
padding-right: 20px; padding-right: 20px;
} }
.themeSwitch { .themeSwitch {
svg { svg {
transition: all 50ms linear; transition: all 50ms linear;
height: 24px; height: 24px;
cursor: pointer; cursor: pointer;
animation-duration: 150ms; animation-duration: 150ms;
animation-timing-function: linear; animation-timing-function: linear;
animation-iteration-count: 1; animation-iteration-count: 1;
animation-direction: normal; animation-direction: normal;
&:hover { &:hover {
fill: var(--color-font); fill: var(--color-font);
} }
} }
} }
} }
svg { svg {
aspect-ratio: 1; aspect-ratio: 1;
fill: var(--color-svg-nav); fill: var(--color-svg-nav);
} }
@keyframes spinThemeSwitch { @keyframes spinThemeSwitch {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
} }
to { to {
transform: rotate(-180deg); transform: rotate(-180deg);
} }
} }
} }

3
styles/variables_colors.scss
View File

@@ -18,7 +18,8 @@
--color-background-dropdown: var(--color-background-body); --color-background-dropdown: var(--color-background-body);
--color-accent: #2294ff; --color-accent: #2294ff;
--color-font-link: var(--color-accent); --color-font-link: var(--color-accent);
--color-font-article-tag: #fff;
--color-background-article-tag: #007aec;
--color-font-link-hover: #5caffc; --color-font-link-hover: #5caffc;
/* Colors: Markdown */ /* Colors: Markdown */