Add nicer styles and example content

vercel · Aug 28, 2020 · bcb948c · bcb948c
1 parent 0e031ac
commit bcb948c
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 3 deletions.
diff --git a/examples/with-mdx-remote/components/Layout.js b/examples/with-mdx-remote/components/Layout.js
@@ -6,9 +6,15 @@ export default function Layout({ children }) {
         .wrapper {
           max-width: 36rem;
           margin: 0 auto;
+          padding: 1.5rem;
         }
       `}</style>
       <style jsx global>{`
+        * {
+          margin: 0;
+          padding: 0;
+        }
+
         :root {
           --site-color: royalblue;
           --divider-color: rgba(0, 0, 0, 0.4);
@@ -28,6 +34,15 @@ export default function Layout({ children }) {
           color: var(--site-color);
           text-decoration-color: currentcolor;
         }
+
+        h1,
+        p {
+          margin-bottom: 1.5rem;
+        }
+
+        code {
+          font-family: 'Menlo';
+        }
       `}</style>
     </>
   )

diff --git a/examples/with-mdx-remote/components/TestComponent.js b/examples/with-mdx-remote/components/TestComponent.js
@@ -1,3 +1,16 @@
 export default function TestComponent({ name = 'world' }) {
-  return <div>Hello, {name}!</div>
+  return (
+    <>
+      <div>Hello, {name}!</div>
+      <style jsx>{`
+        div {
+          background-color: #111;
+          border-radius: 0.5em;
+          color: #fff;
+          margin-bottom: 1.5em;
+          padding: 0.5em 0.75em;
+        }
+      `}</style>
+    </>
+  )
 }
diff --git a/examples/with-mdx-remote/pages/posts/[slug].js b/examples/with-mdx-remote/pages/posts/[slug].js
@@ -3,6 +3,7 @@ import matter from 'gray-matter'
 import hydrate from 'next-mdx-remote/hydrate'
 import renderToString from 'next-mdx-remote/render-to-string'
 import dynamic from 'next/dynamic'
+import Head from 'next/head'
 import Link from 'next/link'
 import path from 'path'
 import CustomLink from '../../components/CustomLink'
@@ -19,6 +20,7 @@ const components = {
   // useful for conditionally loading components for certain routes.
   // See the notes in README.md for more details.
   TestComponent: dynamic(() => import('../../components/TestComponent')),
+  Head,
 }
 
 export default function PostPage({ source, frontMatter }) {
@@ -32,10 +34,26 @@ export default function PostPage({ source, frontMatter }) {
           </Link>
         </nav>
       </header>
-      <div className="wrapper">
+      <div className="post-header">
         <h1>{frontMatter.title}</h1>
-        {content}
+        {frontMatter.description && (
+          <p className="description">{frontMatter.description}</p>
+        )}
       </div>
+      <main>{content}</main>
+
+      <style jsx>{`
+        .post-header h1 {
+          margin-bottom: 0;
+        }
+
+        .post-header {
+          margin-bottom: 2rem;
+        }
+        .description {
+          opacity: 0.6;
+        }
+      `}</style>
     </Layout>
   )
 }

diff --git a/examples/with-mdx-remote/posts/example-post.mdx b/examples/with-mdx-remote/posts/example-post.mdx
@@ -1,9 +1,12 @@
 ---
 title: Example Post
+description: This frontmatter description will appear below the title
 ---
 
 This is an example post, with a [link](https://nextjs.org) and a React component:
 
 <TestComponent name="next-mdx-remote" />
 
+The title and description are pulled from the MDX file and processed using `gray-matter`. Additionally, links are rendered using a custom component passed to `next-mdx-remote`.
+
 Go back [home](/).