Use Layout component
This commit is contained in:
parent
28c50f1d4f
commit
2d11de3432
25
components/Blog/Layout.tsx
Normal file
25
components/Blog/Layout.tsx
Normal 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;
|
@ -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) => {
|
||||||
|
@ -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>
|
|
||||||
</>;
|
</>;
|
||||||
|
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user