Use Layout component

This commit is contained in:
Daniel Kluge 2022-10-07 23:36:57 +02:00
parent 28c50f1d4f
commit 2d11de3432
3 changed files with 39 additions and 32 deletions

View File

@ -0,0 +1,25 @@
import type { NextPage } from "next";
import Head from "next/head";
import Navigation from "./Navigation";
interface ILayoutProps {
title?: string;
}
const Layout: NextPage<ILayoutProps> = ({ title, children }) => {
return <>
<Head>
<title>{title ?? "c0ntroller.de"}</title>
</Head>
<div id={"blogBody"}>
<header>
<Navigation />
</header>
<main>
{ children }
</main>
</div>
</>;
};
export default Layout;

View File

@ -1,6 +1,5 @@
import type { GetServerSideProps, NextPage } from "next"; import type { GetServerSideProps, NextPage } from "next";
import Head from "next/head"; import Layout from "../../../components/Blog/Layout";
import Navigation from "../../../components/Blog/Navigation";
import { generateContent } from "../../../lib/content/generateBackend"; import { generateContent } from "../../../lib/content/generateBackend";
import type { ContentList } from "../../../lib/content/types"; import type { ContentList } from "../../../lib/content/types";
@ -16,18 +15,10 @@ interface IContentRender {
} }
const Post: NextPage<{ content: IContentRender }> = ({ content }) => { const Post: NextPage<{ content: IContentRender }> = ({ content }) => {
return <> return <Layout title={`${content.title} - c0ntroller.de`}>
<Head> <div dangerouslySetInnerHTML={{ __html: content.html}}>
<title>{content.title} - c0ntroller.de</title> </div>
</Head> </Layout>;
<div id={"blogBody"}>
<header>
<Navigation />
</header>
<main dangerouslySetInnerHTML={{ __html: content.html}}>
</main>
</div>
</>;
}; };
export const getServerSideProps: GetServerSideProps = async (context) => { export const getServerSideProps: GetServerSideProps = async (context) => {

View File

@ -1,12 +1,11 @@
import type { NextPage } from "next"; import type { NextPage } from "next";
import Head from "next/head";
import type { ContentList } from "../lib/content/types"; import type { ContentList } from "../lib/content/types";
import Navigation from "../components/Blog/Navigation";
import ProjectCard from "../components/Blog/Card"; import ProjectCard from "../components/Blog/Card";
import contentList from "../public/content/list.json"; import contentList from "../public/content/list.json";
import styles from "../styles/Blog/Front.module.scss"; import styles from "../styles/Blog/Front.module.scss";
import Layout from "../components/Blog/Layout";
const Blog: NextPage<{ content: ContentList }> = ({content}) => { const Blog: NextPage<{ content: ContentList }> = ({content}) => {
const generateCards = (type: string) => { const generateCards = (type: string) => {
@ -14,22 +13,14 @@ const Blog: NextPage<{ content: ContentList }> = ({content}) => {
}; };
return <> return <>
<Head> <Layout>
<title>c0ntroller.de</title> <h1>Hello there!</h1>
</Head> <p>Miaumiau Lorem ipsum</p>
<div id={"blogBody"}> <h2>Projects</h2>
<header> { generateCards("project") }
<Navigation /> <h2>Diaries</h2>
</header> { generateCards("diary") }
<main> </Layout>
<h1>Hello there!</h1>
<p>Miaumiau Lorem ipsum</p>
<h2>Projects</h2>
{ generateCards("project") }
<h2>Diaries</h2>
{ generateCards("diary") }
</main>
</div>
</>; </>;
}; };