c0ntroller/frontpage
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Activity

Use Content Component

Browse Source
This commit is contained in:
Daniel Kluge 2022-10-15 22:17:51 +02:00
parent c4b3471062
commit 46c755481a
6 changed files with 50 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/Blog/ContentPage.tsx Normal file
View File

@ -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;

11
components/Blog/DiaryPageSelector.tsx
View File

@ -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>

19
lib/content/types.ts
View File

@ -16,10 +16,21 @@ export interface Project extends Content {
type: "project";
}
export interface Diary extends Content {
type: "diary";
entries: {
export interface DiaryEntry {
title: string;
filename: string;
}[];
}
export interface Diary extends Content {
type: "diary";
entries: DiaryEntry[];
}
export interface ProjectRender extends Project {
html: string;
}
export interface DiaryRender extends Diary {
html: string;
pageSelected: number;
}

18
pages/blog/diary/[did].tsx
View File

@ -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
}
}
};

15
pages/blog/diary/[did]/[page].tsx
View File

@ -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>;
};

15
pages/blog/project/[pid].tsx
View File

@ -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>;
};