From 46c755481ac72f63ba46af5871dfa045d4f1cde9 Mon Sep 17 00:00:00 2001
From: Daniel Kluge <daniel-git@c0ntroller.de>
Date: Sat, 15 Oct 2022 22:17:51 +0200
Subject: [PATCH] Use Content Component

---
 components/Blog/ContentPage.tsx       | 14 ++++++++++++++
 components/Blog/DiaryPageSelector.tsx | 11 +++++++----
 lib/content/types.ts                  | 19 +++++++++++++++----
 pages/blog/diary/[did].tsx            | 18 ++++++------------
 pages/blog/diary/[did]/[page].tsx     | 15 ++++-----------
 pages/blog/project/[pid].tsx          | 15 ++++-----------
 6 files changed, 50 insertions(+), 42 deletions(-)
 create mode 100644 components/Blog/ContentPage.tsx

diff --git a/components/Blog/ContentPage.tsx b/components/Blog/ContentPage.tsx
new file mode 100644
index 0000000..97f6baa
--- /dev/null
+++ b/components/Blog/ContentPage.tsx
@@ -0,0 +1,14 @@
+import type { NextPage } from "next";
+import type { ProjectRender, DiaryRender } from "../../lib/content/types";
+import DiaryPageSelector from "./DiaryPageSelector";
+
+const ContentPage: NextPage<{ content: ProjectRender | DiaryRender }> = ({ content }) => {
+    return (<>
+        {content.type === "diary" ? <DiaryPageSelector title={content.title} pageSelected={0} name={content.name} pages={content.entries} /> : null}
+        <div dangerouslySetInnerHTML={{ __html: content.html }}>
+        </div>
+        {content.type === "diary" ? <DiaryPageSelector title={content.title} pageSelected={0} name={content.name} pages={content.entries} bottom /> : null}
+        </>);
+};
+
+export default ContentPage;
\ No newline at end of file
diff --git a/components/Blog/DiaryPageSelector.tsx b/components/Blog/DiaryPageSelector.tsx
index 0d1785f..1b4be56 100644
--- a/components/Blog/DiaryPageSelector.tsx
+++ b/components/Blog/DiaryPageSelector.tsx
@@ -3,11 +3,11 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import type { ChangeEvent, ChangeEventHandler } from "react";
 import { useEffect } from "react";
+import type { DiaryEntry } from "../../lib/content/types";
 
 import styles from "../../styles/Blog/DiaryPageSelector.module.scss";
 
 interface IContent {
-    pages: string[];
     name: string;
     title: string;
     pageSelected: number
@@ -15,10 +15,12 @@ interface IContent {
 
 interface IContentNavBar extends IContent {
     mobile?: boolean;
+    pages: string[];
 }
 
 interface IContentNav extends IContent {
     bottom?: boolean;
+    pages: DiaryEntry[];
 }
 
 const PageSelectorBar: NextPage<IContentNavBar> = ({ pages, name, title, pageSelected, mobile }) => {
@@ -64,17 +66,18 @@ const PageSelectorBar: NextPage<IContentNavBar> = ({ pages, name, title, pageSel
 };
 
 const PageSelector: NextPage<IContentNav> = (content) => {
+    const entries = content.pages.map(p => p.title);
 
-    if (content.bottom) return <PageSelectorBar pages={content.pages} name={content.name} title={content.title} pageSelected={content.pageSelected} />;
+    if (content.bottom) return <PageSelectorBar pages={entries} name={content.name} title={content.title} pageSelected={content.pageSelected} />;
 
     return (
         <div className={styles.nav}>
-            <PageSelectorBar pages={content.pages} name={content.name} title={content.title} pageSelected={content.pageSelected} mobile />
+            <PageSelectorBar pages={entries} name={content.name} title={content.title} pageSelected={content.pageSelected} mobile />
             
             <div className={`${styles.sideNav} ${styles.desktop}`}>
                 <Link href={`/blog/diary/${content.name}`}><a><h4>{content.title}</h4></a></Link>
                 <ul>
-                    {content.pages.map((e, idx) => <li key={idx}><Link href={`/blog/diary/${content.name}/${idx + 1}`}><a>{e}</a></Link></li>)}
+                    {entries.map((e, idx) => <li key={idx}><Link href={`/blog/diary/${content.name}/${idx + 1}`}><a>{e}</a></Link></li>)}
                 </ul>
             </div>
         </div>
diff --git a/lib/content/types.ts b/lib/content/types.ts
index 984a401..4e583c7 100644
--- a/lib/content/types.ts
+++ b/lib/content/types.ts
@@ -16,10 +16,21 @@ export interface Project extends Content {
     type: "project";
 }
 
+export interface DiaryEntry {
+    title: string;
+    filename: string;
+}
+
 export interface Diary extends Content {
     type: "diary";
-    entries: {
-        title: string;
-        filename: string;
-    }[];
+    entries: DiaryEntry[];
 }
+
+export interface ProjectRender extends Project {
+    html: string;
+}
+
+export interface DiaryRender extends Diary {
+    html: string;
+    pageSelected: number;
+}
\ No newline at end of file
diff --git a/pages/blog/diary/[did].tsx b/pages/blog/diary/[did].tsx
index e79a3e9..d4dd306 100644
--- a/pages/blog/diary/[did].tsx
+++ b/pages/blog/diary/[did].tsx
@@ -1,21 +1,14 @@
 import type { GetServerSideProps, NextPage } from "next";
 import Layout from "../../../components/Blog/Layout";
-import DiaryPageSelector from "../../../components/Blog/DiaryPageSelector";
+import ContentPage from "../../../components/Blog/ContentPage";
 import { generateContent, getContentList } from "../../../lib/content/generateBackend";
-import type { ContentList, Diary } from "../../../lib/content/types";
+import type { ContentList, DiaryRender, Diary } from "../../../lib/content/types";
 
 import styles from "../../../styles/Blog/Content.module.scss";
 
-interface IContentRender extends Diary {
-    html: string;
-}
-
-const DiaryMain: NextPage<{ content: IContentRender }> = ({ content }) => {
+const DiaryMain: NextPage<{ content: DiaryRender }> = ({ content }) => {
     return <Layout title={`${content.title} - c0ntroller.de`}>
-        <DiaryPageSelector title={content.title} pageSelected={0} name={content.name} pages={content.entries.map(e => e.title)} />
-        <div dangerouslySetInnerHTML={{ __html: content.html }}>
-        </div>
-        <DiaryPageSelector title={content.title} pageSelected={0} name={content.name} pages={content.entries.map(e => e.title)} bottom />
+        <ContentPage content={content} />
     </Layout>;
 };
 
@@ -33,7 +26,8 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
         props: {
             content: {
                 ...contentEntry,
-                html: contentHtml
+                html: contentHtml,
+                pageSelected: 0
             }
         }
     };
diff --git a/pages/blog/diary/[did]/[page].tsx b/pages/blog/diary/[did]/[page].tsx
index f31728d..1cc74ae 100644
--- a/pages/blog/diary/[did]/[page].tsx
+++ b/pages/blog/diary/[did]/[page].tsx
@@ -1,21 +1,14 @@
 import type { GetServerSideProps, NextPage } from "next";
-import DiaryPageSelector from "../../../../components/Blog/DiaryPageSelector";
+import ContentPage from "../../../../components/Blog/ContentPage";
 import Layout from "../../../../components/Blog/Layout";
 import { generateContent, getContentList } from "../../../../lib/content/generateBackend";
-import type { ContentList, Diary } from "../../../../lib/content/types";
+import type { ContentList, Diary, DiaryRender } from "../../../../lib/content/types";
 
 import styles from "../../../../styles/Blog/Content.module.scss";
 
-interface IContentRender extends Diary {
-    html: string;
-    pageSelected: number;
-}
-
-const DiaryMain: NextPage<{ content: IContentRender }> = ({ content }) => {
+const DiaryMain: NextPage<{ content: DiaryRender }> = ({ content }) => {
     return <Layout title={`${content.entries[content.pageSelected - 1].title} - ${content.title} - c0ntroller.de`}>
-        <div dangerouslySetInnerHTML={{ __html: content.html }}>
-        </div>
-        <DiaryPageSelector title={content.title} pageSelected={content.pageSelected} name={content.name} pages={content.entries.map(e => e.title)} bottom />
+        <ContentPage content={content} />
     </Layout>;
 };
 
diff --git a/pages/blog/project/[pid].tsx b/pages/blog/project/[pid].tsx
index 92305d0..53c3010 100644
--- a/pages/blog/project/[pid].tsx
+++ b/pages/blog/project/[pid].tsx
@@ -1,21 +1,14 @@
 import type { GetServerSideProps, NextPage } from "next";
+import ContentPage from "../../../components/Blog/ContentPage";
 import Layout from "../../../components/Blog/Layout";
 import { generateContent, getContentList } from "../../../lib/content/generateBackend";
-import type { ContentList } from "../../../lib/content/types";
+import type { ContentList, ProjectRender } from "../../../lib/content/types";
 
 import styles from "../../../styles/Blog/Content.module.scss";
 
-interface IContentRender {
-    more?: string;
-    repo?: string;
-    title: string;
-    html: string;
-}
-
-const Post: NextPage<{ content: IContentRender }> = ({ content }) => {
+const Post: NextPage<{ content: ProjectRender }> = ({ content }) => {
     return <Layout title={`${content.title} - c0ntroller.de`}>
-        <div dangerouslySetInnerHTML={{ __html: content.html }}>
-        </div>
+        <ContentPage content={content} />
     </Layout>;
 };