Bugfixing and include page selector

This commit is contained in:
Daniel Kluge 2022-10-08 13:28:16 +02:00
parent 84057788b3
commit 7bb69e9b37
4 changed files with 54 additions and 47 deletions

View File

@ -13,13 +13,24 @@ const projectServerErrorHtml = `<div class="${"error"}">Sorry! A server error ha
const ad = asciidoctor(); 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 projectPath = resolve("./public", "content", "projects");
const diaryPath = resolve("./public", "content", "diaries"); 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")); const projectFiles = readdirSync(projectPath, { withFileTypes: true }).filter((f) => f.isFile() && f.name.endsWith(".adoc"));
// As we need the diaries too, no filter here // As we need the diaries too, no filter here
const diaryFiles = readdirSync(diaryPath, { withFileTypes: true }); 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> { export async function generateContent(content: Project|Diary, selectedPage?: number): Promise<string> {
if(!content) return projectEmpty; if(!content) return projectEmpty;
switch (content.type) { switch (content.type) {

View File

@ -1,30 +1,29 @@
import type { GetServerSideProps, NextPage } from "next"; import type { GetServerSideProps, NextPage } from "next";
import Layout from "../../../components/Blog/Layout"; 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"; import styles from "../../../styles/Blog/Content.module.scss";
interface IContentRender { interface IContentRender extends Diary {
more?: string;
repo?: string;
title: string;
html: string; html: string;
} }
const DiaryMain: NextPage<{ content: IContentRender }> = ({ content }) => { const DiaryMain: NextPage<{ content: IContentRender }> = ({ content }) => {
console.log(content);
return <Layout title={`${content.title} - c0ntroller.de`}> 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 dangerouslySetInnerHTML={{ __html: content.html }}>
</div> </div>
<DiaryPageSelector title={content.title} pageSelected={0} name={content.name} pages={content.entries.map(e => e.title)} bottom />
</Layout>; </Layout>;
}; };
export const getServerSideProps: GetServerSideProps = async (context) => { export const getServerSideProps: GetServerSideProps = async (context) => {
const { did } = context.query; 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 }; if (!contentEntry) return { notFound: true };
@ -33,9 +32,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
return { return {
props: { props: {
content: { content: {
more: contentEntry.more || null, ...contentEntry,
repo: contentEntry.repo || null,
title: contentEntry.title,
html: contentHtml html: contentHtml
} }
} }

View File

@ -1,29 +1,29 @@
import type { GetServerSideProps, NextPage } from "next"; import type { GetServerSideProps, NextPage } from "next";
import DiaryPageSelector from "../../../../components/Blog/DiaryPageSelector";
import Layout from "../../../../components/Blog/Layout"; 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"; import styles from "../../../../styles/Blog/Content.module.scss";
interface IContentRender { interface IContentRender extends Diary {
more?: string;
repo?: string;
title: string;
html: string; html: string;
pageSelected: number;
} }
const DiaryMain: NextPage<{ content: IContentRender }> = ({ content }) => { 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 dangerouslySetInnerHTML={{ __html: content.html }}>
</div> </div>
<DiaryPageSelector title={content.title} pageSelected={content.pageSelected} name={content.name} pages={content.entries.map(e => e.title)} bottom />
</Layout>; </Layout>;
}; };
export const getServerSideProps: GetServerSideProps = async (context) => { export const getServerSideProps: GetServerSideProps = async (context) => {
const { did, page } = context.query; 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 }; if (!contentEntry || !page || typeof page !== "string") return { notFound: true };
@ -32,10 +32,9 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
return { return {
props: { props: {
content: { content: {
more: contentEntry.more || null, ...contentEntry,
repo: contentEntry.repo || null, html: contentHtml,
title: contentEntry.title, pageSelected: Number.parseInt(page)
html: contentHtml
} }
} }
}; };

View File

@ -1,10 +1,8 @@
import type { GetServerSideProps, NextPage } from "next"; import type { GetServerSideProps, NextPage } from "next";
import Layout from "../../../components/Blog/Layout"; 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 } from "../../../lib/content/types";
import contentList from "../../../public/content/list.json";
import styles from "../../../styles/Blog/Content.module.scss"; import styles from "../../../styles/Blog/Content.module.scss";
interface IContentRender { interface IContentRender {
@ -23,6 +21,8 @@ const Post: NextPage<{ content: IContentRender }> = ({ content }) => {
export const getServerSideProps: GetServerSideProps = async (context) => { export const getServerSideProps: GetServerSideProps = async (context) => {
const { pid } = context.query; const { pid } = context.query;
const contentList = await getContentList();
const contentEntry = (contentList as ContentList).find((c) => c.name === pid && c.type === "project"); const contentEntry = (contentList as ContentList).find((c) => c.name === pid && c.type === "project");
@ -36,7 +36,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
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,
} }
} }
}; };