Merge pull request #20 from hipstersmoothie/mdx

upgrade next-mdx-enhanced. fix it all

package.json

@@ -37,7 +37,7 @@
     "gravatar": "^1.8.0",
     "mdx-prism": "^0.3.1",
     "next": "^9.4.4",
-    "next-mdx-enhanced": "^3.0.0",
+    "next-mdx-enhanced": "^4.0.0",
     "next-prefixed": "^0.0.11",
     "nextjs-sitemap-generator": "^1.0.0",
     "parse-github-url": "^1.0.2",

src/components/blog-index.tsx

@@ -5,12 +5,11 @@ import { useMDXComponents } from "@mdx-js/react";
 import makeClass from "clsx";
 
 import getBlogPosts from "../utils/get-blog-posts";
-import makeNavBarLayout from "../layouts/nav-bar";
+import NavBarLayout from "../layouts/nav-bar";
 import Avatar from "./avatar";
 
 declare var PROJECT_NAME: string;
 
-const NavBarLayout = makeNavBarLayout();
 const posts = getBlogPosts();
 const dateFormat = new Intl.DateTimeFormat("default", {
   hour: "numeric",

src/index.ts

@@ -1,7 +1,7 @@
-export { default as makeBlogLayout } from "./layouts/blog";
-export { default as makeDocsLayout } from "./layouts/docs";
-export { default as makeHomePageLayout } from "./layouts/home-page";
-export { default as makeNavBarLayout } from "./layouts/nav-bar";
+export { default as BlogLayout } from "./layouts/blog";
+export { default as DocsLayout } from "./layouts/docs";
+export { default as HomePageLayout } from "./layouts/home-page";
+export { default as NavBarLayout } from "./layouts/nav-bar";
 
 export { default as igniteComponents } from "./components/mdx-components";
 export * from "./components/mdx-components";

src/layouts/blog.tsx

@@ -2,11 +2,10 @@ import React from "react";
 import makeClass from "clsx";
 import Head from "next/head";
 
-import makeNavBarLayout from "./nav-bar";
+import NavBarLayout from "./nav-bar";
 import { BlogPost } from "../utils/types";
 import Avatar from "../components/avatar";
 
-const NavBarLayout = makeNavBarLayout();
 const dateFormat = new Intl.DateTimeFormat("en-us", {
   year: "2-digit",
   month: "numeric",
@@ -21,9 +20,10 @@ interface BlogPageFrontMatter extends BlogPost {
 }
 
 /** A layout to render a basic home page */
-export default (frontMatter: BlogPageFrontMatter) => ({
+const BlogLayout = ({
   children: content,
-}: React.PropsWithChildren<{}>) => {
+  frontMatter,
+}: React.PropsWithChildren<{ frontMatter: BlogPageFrontMatter }>) => {
   const color = frontMatter.color || "primary";
 
   return (
@@ -75,3 +75,5 @@ export default (frontMatter: BlogPageFrontMatter) => ({
     </NavBarLayout>
   );
 };
+
+export default BlogLayout;

src/layouts/docs.tsx

@@ -4,13 +4,12 @@ import { useMDXComponents, MDXProviderComponents } from "@mdx-js/react";
 import makeClass from "clsx";
 
 import { Sidebar } from "../components/sidebar";
-import makeNavBarLayout from "./nav-bar";
+import NavBarLayout from "./nav-bar";
 import { Page } from "../utils/types";
 import getFrontMatters from "../utils/get-front-matters";
 
 declare var PAGES: string[];
 
-const NavBarLayout = makeNavBarLayout();
 const CONTENT_AREA =
   "pt-8 pb-32 px-4 lg:mx-auto max-w-full md:max-w-screen-sm lg:max-w-screen-md";
 const CODE_BLOCK_REGEX = /([^`]*)`([^`]*)`(.*)/m;
@@ -39,9 +38,10 @@ function constructTitleFromMarkdown(
   return <div>{children}</div>;
 }
 
-export default (frontMatter: Page) => ({
+const DocsLayout = ({
   children: content,
-}: React.PropsWithChildren<{}>) => {
+  frontMatter,
+}: React.PropsWithChildren<{ frontMatter: Page }>) => {
   const [menuOpen, setMenuOpen] = React.useState(false);
   const components = useMDXComponents();
   const resource = frontMatter.__resourcePath.split("/")[0];
@@ -74,3 +74,5 @@ export default (frontMatter: Page) => ({
     </NavBarLayout>
   );
 };
+
+export default DocsLayout;

src/layouts/home-page.tsx

@@ -3,12 +3,11 @@ import Link from "next/link";
 import makeClass from "clsx";
 import Head from "next/head";
 
-import makeNavBarLayout from "./nav-bar";
+import NavBarLayout from "./nav-bar";
 import { Page } from "../utils/types";
 import { formatPath } from "../utils/format-path";
 
 declare var PROJECT_NAME: string;
-const NavBarLayout = makeNavBarLayout();
 
 interface HomePageFrontMatter extends Page {
   /** Theme color for the home page */
@@ -20,9 +19,10 @@ interface HomePageFrontMatter extends Page {
 }
 
 /** A layout to render a basic home page */
-export default (frontMatter: HomePageFrontMatter) => ({
+const HomePageLayout = ({
   children: content,
-}: React.PropsWithChildren<{}>) => {
+  frontMatter,
+}: React.PropsWithChildren<{ frontMatter: HomePageFrontMatter }>) => {
   const color = frontMatter.color || "primary";
 
   return (
@@ -69,3 +69,5 @@ export default (frontMatter: HomePageFrontMatter) => ({
     </NavBarLayout>
   );
 };
+
+export default HomePageLayout;

src/layouts/nav-bar.tsx

@@ -19,7 +19,7 @@ interface NavBarProps {
 }
 
 /** Make a  basic navbar page layout */
-export default () => ({
+const NavBarLayout = ({
   children: content,
   ...props
 }: NavBarProps & React.PropsWithChildren<{}>) => {
@@ -63,3 +63,5 @@ export default () => ({
     </MobileMenuContext.Provider>
   );
 };
+
+export default NavBarLayout;

src/utils/types.ts

@@ -18,5 +18,6 @@ export interface BlogPost extends Page {
 export interface MarkdownPage extends Page {
   title: string;
   author: string;
+  email?: string;
   content: string;
 }