janis/explainegy-nextjs
0
0
Fork 0
mirror of https://github.com/DerTyp7/explainegy-nextjs.git synced 2026-07-31 07:39:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor to pages

Browse Source
This commit is contained in:
Janis
2023-01-29 20:01:56 +01:00
parent 976a11a78f
commit 0997e8fdb8
26 changed files with 2050 additions and 1252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/admin/articles/editor/[articleId]/layout.tsx
View File

@@ -1,3 +1,3 @@
export default async function Layout({ children }) {
export default async function AdminArticleEditorLayout({ children }) {
return <div>{children}</div>;
}

2
app/admin/articles/editor/[articleId]/page.tsx
View File

@@ -18,7 +18,7 @@ import Markdown from "../../../../../components/Markdown";
type ArticleWithCategory = Prisma.ArticleGetPayload<{ include: { category: true } }>;
export default function ArticleEditor({ params }: { params: { articleId: string } }) {
export default function AdminArticlesEditorPage({ params }: { params: { articleId: string } }) {
const router = useRouter();
const [title, setTitle] = useState<string>("");
const [selectCategoriesOptions, setSelectCategoriesOptions] = useState<any>([]);

4
app/admin/articles/page.tsx
View File

@@ -2,7 +2,7 @@
import React from "react";
function AdminArticlesPage() {
export default function AdminArticlesPage() {
return (
<div>
<h1>Page to manage articles</h1>
@@ -11,5 +11,3 @@ function AdminArticlesPage() {
</div>
);
}
export default AdminArticlesPage;

2
app/admin/categories/editor/[categoryId]/layout.tsx
View File

@@ -1,3 +1,3 @@
export default async function Layout({ children }) {
export default async function AdminCategoriesEditorLayout({ children }) {
return <div>{children}</div>;
}

2
app/admin/categories/editor/[categoryId]/page.tsx
View File

@@ -14,7 +14,7 @@ import { apiUrl } from "../../../../../global";
type CategoryWithSvg = Prisma.CategoryGetPayload<{ include: { svg: true } }>;
export default function CategoryEditor({ params }: { params: { categoryId: string } }) {
export default function AdminCategoriesEditor({ params }: { params: { categoryId: string } }) {
const router = useRouter();
const [title, setTitle] = useState<string>("");
const [color, setColor] = useState<string>("");

2
app/admin/images/page.tsx
View File

@@ -19,6 +19,6 @@ async function getImages(): Promise<GalleryImage[]> {
}));
}
export default async function page() {
export default async function AdminImagesPage() {
return <Gallery images={await getImages()} />;
}

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

@@ -1,24 +0,0 @@
import React from "react";
import styles from "../../../../styles/modules/ArticleContentTable.module.scss";
import { Article } from "@prisma/client";
import { IContentTableEntry } from "../../../../types/contentTable";
export default function ContentTable({ contentTableData }: { contentTableData: any }) {
return (
<div className={styles.articleContentTable}>
<div className={styles.stickyContainer}>
<div className={styles.list}>
<h2>Contents</h2>
{contentTableData?.map((e, i) => {
return (
<a key={i} href={"#" + e.anchor}>
{e.title}
</a>
);
})}
</div>
{contentTableData?.length < 15 ? <div className={styles.adContainer}>Future advertisement</div> : ""}
</div>
</div>
);
}

28
app/articles/[categoryName]/[articleName]/Sidebar.tsx
View File

@@ -1,28 +0,0 @@
import React from "react";
import styles from "../../../../styles/modules/Sidebar.module.scss";
export default function Sidebar() {
return (
<div className={styles.sidebar}>
<div className={styles.stickyContainer}>
<div className={styles.sidebarContainer}>
<h3>Popular</h3>
<a href="#"> Set up Docker</a>
<a href="#"> Set up Docker</a>
<a href="#"> Set up Docker</a>
<a href="#"> Set up Docker</a>
<a href="#"> Set up Docker</a>
</div>
<div className={styles.sidebarContainer}>
<h3>Related</h3>
<a href="#"> Set up Docker</a>
<a href="#"> Set up Docker</a>
<a href="#"> Set up Docker</a>
<a href="#"> Set up Docker</a>
<a href="#"> Set up Docker</a>
</div>
<div className={styles.adContainer}>Future advertisement</div>
</div>
</div>
);
}

24
app/articles/[categoryName]/[articleName]/head.tsx
View File

@@ -1,17 +1,13 @@
import { Article } from "@prisma/client";
import { GetArticle } from "./page";
import { FetchManager } from "../../../../manager/fetchManager";
export default async function Head({
params,
}: {
params: { articleName: string; categoryName: string };
}) {
const articleName: string = params.articleName;
const article: Article = await GetArticle(articleName);
return (
<>
<title>{article?.title}</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</>
);
export default async function ArticleHead({ params }: { params: { articleName: string; categoryName: string } }) {
const articleName: string = params.articleName;
const article: Article = await FetchManager.Article.getByName(articleName);
return (
<>
<title>{article?.title}</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</>
);
}

2
app/articles/[categoryName]/[articleName]/layout.tsx
View File

@@ -1,3 +1,3 @@
export default function Layout({ children }) {
export default function ArticleLayout({ children }) {
return <div>{children}</div>;
}

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

@@ -1,31 +1,15 @@
import { marked } from "marked";
import ContentTable from "./ContentTable";
import Sidebar from "./Sidebar";
import ContentTable from "../../../../components/ContentTable";
import Sidebar from "../../../../components/Sidebar";
import styles from "../../../../styles/modules/Article.module.scss";
import Image from "next/image";
import urlJoin from "url-join";
import { apiUrl } from "../../../../global";
import { Prisma } from "@prisma/client";
import Markdown from "../../../../components/Markdown";
import { IContentTableEntry } from "../../../../types/contentTable";
type ArticleWithIncludes = Prisma.ArticleGetPayload<{
include: { category: true; image: true };
}>;
export async function GetArticle(articleName: string): Promise<any> {
const result: Response = await fetch(urlJoin(apiUrl, `articles/name/${articleName ?? ""}`), {
cache: "force-cache",
next: { revalidate: 60 * 10 },
});
return result.json();
}
import { ArticleWithIncludes, FetchManager } from "../../../../manager/fetchManager";
import { formatTextToUrlName } from "../../../../utils";
//* MAIN
export default async function ArticlePage({ params }: { params: { articleName: string; categoryName: string } }) {
const articleName: string = params.articleName.toLowerCase().replaceAll("%20", " ");
const article: ArticleWithIncludes = await GetArticle(articleName);
const articleName: string = formatTextToUrlName(params.articleName);
const article: ArticleWithIncludes = await FetchManager.Article.getByName(articleName);
const dateUpdated: Date = new Date(article.dateUpdated);
const dateCreated: Date = new Date(article.dateCreated);
@@ -60,14 +44,6 @@ export default async function ArticlePage({ params }: { params: { articleName: s
<p>{article?.introduction}</p>
</div>
<Markdown value={markdown} />
{/* <div
className="markdown"
dangerouslySetInnerHTML={{
__html: ParseMarkdown(markdown),
}}
></div>
<LoadMarkdown /> */}
</div>
<Sidebar />
</div>
@@ -75,12 +51,8 @@ export default async function ArticlePage({ params }: { params: { articleName: s
}
export async function generateStaticParams() {
const articles: ArticleWithIncludes[] = await (
await fetch(urlJoin(apiUrl, `articles/`), {
cache: "no-cache",
next: { revalidate: 60 * 10 },
})
).json();
// Fetchmanager does not work here
const articles: ArticleWithIncludes[] = await FetchManager.Article.list(false);
return await Promise.all(
articles.map(async (article) => ({

16
app/articles/page.tsx
View File

@@ -1,22 +1,10 @@
import styles from "../../styles/modules/CategoryList.module.scss";
import Link from "next/link";
import { Category, Svg, Prisma } from "@prisma/client";
import urlJoin from "url-join";
import { apiUrl } from "../../global";
type CategoryWithSvg = Prisma.CategoryGetPayload<{ 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();
}
import { FetchManager } from "../../manager/fetchManager";
export default async function CategoryList() {
const categories = await GetCategories();
const categories = await FetchManager.Category.list();
return (
<div className={styles.categoryList}>
<h1>Overview</h1>

12
app/head.tsx
View File

@@ -1,7 +1,7 @@
export default async function Head() {
return (
<>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</>
);
export default async function RootHead() {
return (
<>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</>
);
}

15
app/layout.tsx
View File

@@ -1,21 +1,10 @@
import "../styles/globals.scss";
import "../styles/variables_colors.scss";
import "../styles/variables.scss";
import { Category } from "@prisma/client";
import urlJoin from "url-join";
import { apiUrl } from "../global";
import Link from "next/link";
import Footer from "../components/Footer";
import Nav from "../components/Nav";
async function getCategories(): Promise<Category[]> {
const result: Response = await fetch(urlJoin(apiUrl, `categories`), {
cache: "no-cache",
next: { revalidate: 3600 },
});
return await result.json();
}
import { FetchManager } from "../manager/fetchManager";
export default async function RootLayout({ children }: { children: React.ReactNode }) {
return (
@@ -27,7 +16,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
<Link href={"/admin"}> Admin</Link>
</div>
<header>
<Nav categories={await getCategories()} />
<Nav categories={await FetchManager.Category.list()} />
</header>
<main>{children}</main>
<Footer />

4
app/page.tsx
View File

@@ -1,3 +1,3 @@
export default function Home() {
return <h1>Home</h1>;
export default function HomePage() {
return <h1>Home</h1>;
}

38
app/testing/typography/page.tsx
View File

@@ -1,23 +1,21 @@
import React from "react";
export default function Typograhy() {
return (
<div>
<h1>Testing this headline</h1>
<h2>Testing this headline</h2>
<h3>Testing this headline</h3>
<h4>Testing this headline</h4>
<h5>Testing this headline</h5>
<h6>Testing this headline</h6>
<br />
<p>
This is a paragraph Lorem ipsum dolor sit, amet consectetur adipisicing
elit. Dolores enim unde obcaecati ea harum voluptate, nisi quia. Quod,
et autem! Aperiam mollitia ullam ab eaque quidem facilis est ducimus
delectus.
</p>
<br />
<a href="#">This is a link</a>
</div>
);
export default function TypograhyPage() {
return (
<div>
<h1>Testing this headline</h1>
<h2>Testing this headline</h2>
<h3>Testing this headline</h3>
<h4>Testing this headline</h4>
<h5>Testing this headline</h5>
<h6>Testing this headline</h6>
<br />
<p>
This is a paragraph Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolores enim unde obcaecati ea
harum voluptate, nisi quia. Quod, et autem! Aperiam mollitia ullam ab eaque quidem facilis est ducimus delectus.
</p>
<br />
<a href="#">This is a link</a>
</div>
);
}