Aug 29, 2020 · Aug 26, 2020 · Aug 26, 2020 · Aug 26, 2020 · Aug 27, 2020 · Aug 27, 2020
diff --git a/examples/with-mdx-remote/components/Layout.js b/examples/with-mdx-remote/components/Layout.js
        .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);
          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
 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
 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'
  // 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 }) {
          </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
 ---
 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](/).
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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);
Expand All		@@ -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>
		</>
		)
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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>
		</>
		)
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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'
Expand All		@@ -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 }) {
Expand All		@@ -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>
		)
		}
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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](/).