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

refactor

Browse Source
This commit is contained in:
Janis
2023-02-07 15:42:40 +01:00
parent d2ff34d3b6
commit 29f359610f
16 changed files with 421 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
pages/articles/[categoryName]/[articleName]/index.tsx
View File

@@ -5,7 +5,9 @@ import Image from "next/image";
import Markdown from "@/components/Markdown";
import { formatTextToUrlName } from "@/utils";
import prisma, { ArticleWithIncludes, CategoryWithIncludes } from "@/lib/prisma";
import articles from "../..";
import ArticleControl from "../../../../components/ArticleControl";
import { IContentTableEntry } from "@/types/contentTable";
import { Prisma } from "@prisma/client";
//* MAIN
export default function ArticlePage({ article }: { article: ArticleWithIncludes }) {
@@ -14,27 +16,32 @@ export default function ArticlePage({ article }: { article: ArticleWithIncludes
const dateOptions: Intl.DateTimeFormatOptions = { month: "long", day: "numeric", year: "numeric" };
return (
<div className={styles.article}>
<ContentTable contentTableData={article?.contentTable ? article?.contentTable : []} />
<div className={styles.tutorialContent}>
<div className={styles.header}>
<p className={`${styles.dates} text-muted`}>
{`Published on ${dateCreated.toLocaleDateString("en-US", dateOptions)}`}
<br />
{dateUpdated > dateCreated ? `Updated on ${dateUpdated.toLocaleDateString("en-US", dateOptions)}` : ""}
</p>
<>
<ArticleControl articleId={article.id} />
<div className={styles.article}>
<ContentTable
contentTableData={article?.contentTable ? Array.from(article.contentTable as Prisma.JsonArray).map((c: any) => ({ anchor: c.anchor, title: c.title })) : []}
/>
<div className={styles.tutorialContent}>
<div className={styles.header}>
<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>
<div className={styles.tags}>
<a href="#">Docker</a> <a href="#">Setup</a> <a href="#">Ubuntu</a>
<h1>{article?.title}</h1>
<div className={styles.tags}>
<a href="#">Docker</a> <a href="#">Setup</a> <a href="#">Ubuntu</a>
</div>
<Image src={""} height={350} width={750} alt={""} quality={100} placeholder="blur" blurDataURL="/images/blur.png" loading="lazy" />
<p>{article?.introduction}</p>
</div>
<Image src={""} height={350} width={750} alt={""} quality={100} placeholder="blur" blurDataURL="/images/blur.png" loading="lazy" />
<p>{article?.introduction}</p>
<Markdown value={article?.markdown ?? ""} />
</div>
<Markdown value={article?.markdown ?? ""} />
<Sidebar />
</div>
<Sidebar />
</div>
</>
);
}

50
pages/articles/[categoryName]/index.tsx
View File

@@ -3,15 +3,18 @@ import Link from "next/link";
import { formatTextToUrlName } from "@/utils";
import { Article, Category } from "@prisma/client";
import prisma, { CategoryWithIncludes } from "@/lib/prisma";
import CategoryControl from "../../../components/CategoryControl";
export default function CategoryPage({ category }: { category: CategoryWithIncludes | null }) {
export default function CategoryPage({ category }: { category: CategoryWithIncludes }) {
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) => {
<>
<CategoryControl categoryId={category.id} />
<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}`}>
@@ -20,9 +23,9 @@ export default function CategoryPage({ category }: { category: CategoryWithInclu
);
}
})} */}
</div>
</div>
{/* <div className={`${styles.showcase} ${styles.smallShowcase}`}>
{/* <div className={`${styles.showcase} ${styles.smallShowcase}`}>
<h2>Most recent articles</h2>
{recentArticles?.map((a, i) => {
{
@@ -35,22 +38,23 @@ export default function CategoryPage({ category }: { category: CategoryWithInclu
})}
</div> */}
<div className={styles.showcase}>
<h2>All articles</h2>
{category?.articles
? Array.from(category?.articles).map((a: Article, i: number) => {
{
return (
<Link key={i} href={`/articles/${category.name}/${a.name}`}>
{a.title}
</Link>
);
}
})
: ""}
<div className={styles.showcase}>
<h2>All articles</h2>
{category?.articles
? Array.from(category?.articles).map((a: Article, i: number) => {
{
return (
<Link key={i} href={`/articles/${category.name}/${a.name}`}>
{a.title}
</Link>
);
}
})
: ""}
</div>
</div>
</div>
</div>
</>
);
}
export async function getServerSideProps(context: any) {