Use Content Component

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;

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>

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: {
+    entries: DiaryEntry[];
-        title: string;
-        filename: string;
-    }[];
 }
+
+export interface ProjectRender extends Project {
+    html: string;
+}
+
+export interface DiaryRender extends Diary {
+    html: string;
+    pageSelected: number;
+}

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 {
+const DiaryMain: NextPage<{ content: DiaryRender }> = ({ content }) => {
-    html: string;
-}
-
-const DiaryMain: NextPage<{ content: IContentRender }> = ({ content }) => {
     return <Layout title={`${content.title} - c0ntroller.de`}>
-        <DiaryPageSelector title={content.title} pageSelected={0} name={content.name} pages={content.entries.map(e => e.title)} />
+        <ContentPage content={content} />
-        <div dangerouslySetInnerHTML={{ __html: content.html }}>
-        </div>
-        <DiaryPageSelector title={content.title} pageSelected={0} name={content.name} pages={content.entries.map(e => e.title)} bottom />
     </Layout>;
 };
 
@@ -33,7 +26,8 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
         props: {
             content: {
                 ...contentEntry,
-                html: contentHtml
+                html: contentHtml,
+                pageSelected: 0
             }
         }
     };

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 {
+const DiaryMain: NextPage<{ content: DiaryRender }> = ({ content }) => {
-    html: string;
-    pageSelected: number;
-}
-
-const DiaryMain: NextPage<{ content: IContentRender }> = ({ content }) => {
     return <Layout title={`${content.entries[content.pageSelected - 1].title} - ${content.title} - c0ntroller.de`}>
-        <div dangerouslySetInnerHTML={{ __html: content.html }}>
+        <ContentPage content={content} />
-        </div>
-        <DiaryPageSelector title={content.title} pageSelected={content.pageSelected} name={content.name} pages={content.entries.map(e => e.title)} bottom />
     </Layout>;
 };
 

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 {
+const Post: NextPage<{ content: ProjectRender }> = ({ content }) => {
-    more?: string;
-    repo?: string;
-    title: string;
-    html: string;
-}
-
-const Post: NextPage<{ content: IContentRender }> = ({ content }) => {
     return <Layout title={`${content.title} - c0ntroller.de`}>
-        <div dangerouslySetInnerHTML={{ __html: content.html }}>
+        <ContentPage content={content} />
-        </div>
     </Layout>;
 };