Bugfixing and include page selector

lib/content/generateBackend.ts

@@ -13,13 +13,24 @@ const projectServerErrorHtml = `<div class="${"error"}">Sorry! A server error ha
 
 const ad = asciidoctor();
 
-// No error catching here as we are screwed if this fails
+const listPath = resolve("./public", "content", "list.json");
 const projectPath = resolve("./public", "content", "projects");
 const diaryPath = resolve("./public", "content", "diaries");
+// No error catching here as we are screwed if this fails
 const projectFiles = readdirSync(projectPath, { withFileTypes: true }).filter((f) => f.isFile() && f.name.endsWith(".adoc"));
 // As we need the diaries too, no filter here
 const diaryFiles = readdirSync(diaryPath, { withFileTypes: true });
 
+export async function getContentList() {
+    try {
+        const list = await readFile(listPath, { encoding: "utf-8" });
+        return JSON.parse(list);
+    } catch (e) {
+        console.error(e);
+        return [];
+    }
+}
+
 export async function generateContent(content: Project|Diary, selectedPage?: number): Promise<string> {
     if(!content) return projectEmpty;
     switch (content.type) {

pages/blog/diary/[did].tsx

@@ -1,30 +1,29 @@
 import type { GetServerSideProps, NextPage } from "next";
 import Layout from "../../../components/Blog/Layout";
-import { generateContent } from "../../../lib/content/generateBackend";
+import DiaryPageSelector from "../../../components/Blog/DiaryPageSelector";
-import type { ContentList } from "../../../lib/content/types";
+import { generateContent, getContentList } from "../../../lib/content/generateBackend";
-
+import type { ContentList, Diary } from "../../../lib/content/types";
-import contentList from "../../../public/content/list.json";
 
 import styles from "../../../styles/Blog/Content.module.scss";
 
-interface IContentRender {
+interface IContentRender extends Diary {
-    more?: string;
-    repo?: string;
-    title: string;
     html: string;
 }
 
 const DiaryMain: NextPage<{ content: IContentRender }> = ({ content }) => {
-    console.log(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 />
     </Layout>;
 };
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
     const { did } = context.query;
-    const contentEntry = (contentList as ContentList).find((c) => c.name === did && c.type === "diary");
+    const contentList = await getContentList();
+    
+    const contentEntry: Diary | undefined = (contentList as ContentList).find((c) => c.name === did && c.type === "diary") as Diary | undefined;
 
     if (!contentEntry) return { notFound: true };
 
@@ -33,9 +32,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     return {
         props: {
             content: {
-                more: contentEntry.more || null,
+                ...contentEntry,
-                repo: contentEntry.repo || null,
-                title: contentEntry.title,
                 html: contentHtml
             }
         }

pages/blog/diary/[did]/[page].tsx

@@ -1,29 +1,29 @@
 import type { GetServerSideProps, NextPage } from "next";
+import DiaryPageSelector from "../../../../components/Blog/DiaryPageSelector";
 import Layout from "../../../../components/Blog/Layout";
-import { generateContent } from "../../../../lib/content/generateBackend";
+import { generateContent, getContentList } from "../../../../lib/content/generateBackend";
-import type { ContentList } from "../../../../lib/content/types";
+import type { ContentList, Diary } from "../../../../lib/content/types";
-
-import contentList from "../../../../public/content/list.json";
 
 import styles from "../../../../styles/Blog/Content.module.scss";
 
-interface IContentRender {
+interface IContentRender extends Diary {
-    more?: string;
-    repo?: string;
-    title: string;
     html: string;
+    pageSelected: number;
 }
 
 const DiaryMain: NextPage<{ content: IContentRender }> = ({ content }) => {
-    return <Layout title={`${content.title} - c0ntroller.de`}>
+    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 />
     </Layout>;
 };
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
     const { did, page } = context.query;
-    const contentEntry = (contentList as ContentList).find((c) => c.name === did && c.type === "diary");
+    const contentList = await getContentList();
+    
+    const contentEntry: Diary | undefined = (contentList as ContentList).find((c) => c.name === did && c.type === "diary") as Diary | undefined;
 
     if (!contentEntry || !page || typeof page !== "string") return { notFound: true };
 
@@ -32,10 +32,9 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     return {
         props: {
             content: {
-                more: contentEntry.more || null,
+                ...contentEntry,
-                repo: contentEntry.repo || null,
+                html: contentHtml,
-                title: contentEntry.title,
+                pageSelected: Number.parseInt(page)
-                html: contentHtml
             }
         }
     };

pages/blog/project/[pid].tsx

@@ -1,28 +1,28 @@
 import type { GetServerSideProps, NextPage } from "next";
 import Layout from "../../../components/Blog/Layout";
-import { generateContent } from "../../../lib/content/generateBackend";
+import { generateContent, getContentList } from "../../../lib/content/generateBackend";
 import type { ContentList } from "../../../lib/content/types";
 
-import contentList from "../../../public/content/list.json";
-
 import styles from "../../../styles/Blog/Content.module.scss";
 
 interface IContentRender {
-  more?: string;
+    more?: string;
-  repo?: string;
+    repo?: string;
-  title: string;
+    title: string;
-  html: string;
+    html: string;
 }
 
 const Post: NextPage<{ content: IContentRender }> = ({ content }) => {
-  return <Layout title={`${content.title} - c0ntroller.de`}>
+    return <Layout title={`${content.title} - c0ntroller.de`}>
-            <div dangerouslySetInnerHTML={{ __html: content.html}}>
+        <div dangerouslySetInnerHTML={{ __html: content.html }}>
-            </div>
+        </div>
     </Layout>;
 };
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
     const { pid } = context.query;
+    const contentList = await getContentList();
+
     const contentEntry = (contentList as ContentList).find((c) => c.name === pid && c.type === "project");
 
 
@@ -31,15 +31,15 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     const contentHtml = await generateContent(contentEntry);
 
     return {
-      props: {
+        props: {
-        content: {
+            content: {
-          more: contentEntry.more || null,
+                more: contentEntry.more || null,
-          repo: contentEntry.repo || null,
+                repo: contentEntry.repo || null,
-          title: contentEntry.title,
+                title: contentEntry.title,
-          html: contentHtml
+                html: contentHtml,
-      }
+            }
-    }
+        }
-  };
+    };
 };
 
 export default Post;