make the PostLayout component

Author: silkie-chicken

src/components/PostLayout.tsx

@@ -1,96 +1,100 @@
-import Head from "next/head";
 import React from "react";
 import styles from "../../public/styles/content.module.css";
-import Author from "../components/Author";
-import Copyright from "../components/Copyright";
-import Date from "../components/Date";
-import Layout from "../components/Layout";
-import BasicMeta from "../components/meta/BasicMeta";
-import JsonLdMeta from "../components/meta/JsonLdMeta";
-import OpenGraphMeta from "../components/meta/OpenGraphMeta";
-import TwitterCardMeta from "../components/meta/TwitterCardMeta";
-import { SocialList } from "../components/SocialList";
-import TagButton from "../components/TagButton";
+import Author from "./Author";
+import Copyright from "./Copyright";
+import Date from "./Date";
+import Layout from "./Layout";
+import BasicMeta from "./meta/BasicMeta";
+import JsonLdMeta from "./meta/JsonLdMeta";
+import OpenGraphMeta from "./meta/OpenGraphMeta";
+import TwitterCardMeta from "./meta/TwitterCardMeta";
+import { SocialList } from "./SocialList";
+import TagButton from "./TagButton";
 import { getAuthor } from "../lib/authors";
 import { getTag } from "../lib/tags";
-
+import { MdxRemote } from "next-mdx-remote/types"
+import hydrate from "next-mdx-remote/hydrate"
 
 type Props = {
   title: string;
-  date: string;
+  date: Date;
   slug: string;
   tags: string[];
   author: string;
+  components: MdxRemote.Components;
+  source: MdxRemote.Source;
   description?: string;
 };
-export default function Index({
+export default function PostLayout({
   title,
   date,
   slug,
   author,
   tags,
+  source,
+  components,
   description = "",
 }: Props) {
+  const content = hydrate(source, { components });
   const keywords = tags.map((it) => getTag(it).name);
   const authorName = getAuthor(author).name;
-  return ({ children: content }) => {
-    return (
-      <Layout>
-        <BasicMeta
-          url={`/posts/${slug}`}
-          title={title}
-          keywords={keywords}
-          description={description}
-        />
-        <TwitterCardMeta
-          url={`/posts/${slug}`}
-          title={title}
-          description={description}
-        />
-        <OpenGraphMeta
-          url={`/posts/${slug}`}
-          title={title}
-          description={description}
-        />
-        <JsonLdMeta
-          url={`/posts/${slug}`}
-          title={title}
-          keywords={keywords}
-          date={date}
-          author={authorName}
-          description={description}
-        />
-        <div className={"container"}>
-          <article>
-            <header>
-              <h1>{title}</h1>
-              <div className={"metadata"}>
-                <div>
-                  <Date date={date} />
-                </div>
-                <div>
-                  <Author author={getAuthor(author)} />
-                </div>
+  return (
+    <Layout>
+      <BasicMeta
+        url={`/posts/${slug}`}
+        title={title}
+        keywords={keywords}
+        description={description}
+      />
+      <TwitterCardMeta
+        url={`/posts/${slug}`}
+        title={title}
+        description={description}
+      />
+      <OpenGraphMeta
+        url={`/posts/${slug}`}
+        title={title}
+        description={description}
+      />
+      <JsonLdMeta
+        url={`/posts/${slug}`}
+        title={title}
+        keywords={keywords}
+        date={date}
+        author={authorName}
+        description={description}
+      />
+      <div className={"container"}>
+        <article>
+          <header>
+            <h1>{title}</h1>
+            <div className={"metadata"}>
+              <div>
+                <Date date={date} />
+              </div>
+              <div>
+                <Author author={getAuthor(author)} />
               </div>
-            </header>
-            <div className={styles.content}>{content}</div>
-            <ul className={"tag-list"}>
-              {tags.map((it, i) => (
-                <li key={i}>
-                  <TagButton tag={getTag(it)} />
-                </li>
-              ))}
-            </ul>
-          </article>
-          <footer>
-            <div className={"social-list"}>
-              <SocialList />
             </div>
-            <Copyright />
-          </footer>
-        </div>
-        <style jsx>
-          {`
+          </header>
+          <div className={styles.content}>{content}</div>
+          <ul className={"tag-list"}>
+            {tags.map((it, i) => (
+              <li key={i}>
+                <TagButton tag={getTag(it)} />
+              </li>
+            ))}
+          </ul>
+        </article>
+        <footer>
+          <div className={"social-list"}>
+            <SocialList />
+          </div>
+          <Copyright />
+        </footer>
+      </div>
+      <style jsx>
+        {`
             .container {
               display: block;
               max-width: 36rem;
@@ -132,9 +136,9 @@ export default function Index({
               }
             }
           `}
-        </style>
-        <style global jsx>
-          {`
+      </style>
+      <style global jsx>
+        {`
             /* Syntax highlighting */
             .token.comment,
             .token.prolog,
@@ -232,8 +236,7 @@ export default function Index({
               color: #005cc5;
             }
           `}
-        </style>
-      </Layout>
-    );
-  };
+      </style>
+    </Layout>
+  );
 }