MDX Component Usage

[nfmastroianni]

Apologies if this is not the place to do this.
I am hoping to achieve the following using this wonderful source plugin:
I'd like to be able to use components inside Google Docs to build more complex elements. The simplest goal I have is to be able to span multiple paragraphs like this:

<Prose>Liquorice tootsie roll macaroon croissant sesame snaps gummies fruitcake biscuit. Carrot cake toffee powder cookie fruitcake. Halvah gingerbread tiramisu candy canes icing pastry. Cupcake macaroon icing carrot cake gingerbread danish sweet cake. Jelly beans jujubes cupcake lollipop gummi bears danish wafer. Chocolate bar icing cake halvah cheesecake jelly beans.

Bear claw gummies chocolate toffee jujubes chupa chups cake. Pudding liquorice cheesecake jelly beans tiramisu sweet roll chupa chups. Lemon drops lemon drops pudding pudding macaroon. Candy shortbread pie sugar plum sugar plum. Apple pie bear claw gummi bears sesame snaps sweet roll lollipop jelly beans cotton candy powder. Sweet bear claw halvah bonbon carrot cake pie chocolate bar tart bonbon.</Prose>

My simple Prose component looks as follows:

import * as React from "react"

export default function Prose({ children }) {
  return <div className="prose prose-green prose-lg mx-auto">{children}</div>
}

The layout file that includes the component is below:

import * as React from "react"
import { MDXProvider } from "@mdx-js/react"
import Prose from "./Prose"
import Navbar from "./Navbar"
import Footer from "./Footer"
import { BsArrowReturnLeft } from "react-icons/bs"

export default function Layout({ children, path }) {
  const components = {
    Prose: Prose,
  }
  return (
    <MDXProvider components={components} className="relative">
      <ul id="nav-access" className="relative mx-auto">
        <li>
          <a
            href="#main-content"
            className="absolute z-50 -top-20 sm:left-1/4 text-2xl text-green-200 inline-block w-full sm:w-1/2 text-center bg-gray-900 bg-opacity-30 transform focus:translate-y-20 transition-all duration-500 ease-in-out"
          >
            Skip to main content{" "}
            <span className="text-gray-800 px-3 py-0 bg-green-200 text-base rounded-sm">
              Return
              <BsArrowReturnLeft className="w-3 h-3 inline text-gray-800 ml-1" />
            </span>
          </a>
        </li>
      </ul>
      <div className="flex flex-col min-h-screen dark:bg-gray-900">
        <header>
          <Navbar path={path} />
        </header>
        <main id="main-content" className="">
          {children}
        </main>
        <Footer />
      </div>
    </MDXProvider>
  )
}

The page template

import * as React from "react"
import { graphql } from "gatsby"
import { MDXRenderer } from "gatsby-plugin-mdx"
import Layout from "../components/Layout"
import Seo from "../components/Seo"

export const pageQuery = graphql`
  query Page($path: String!) {
    page: googleDocs(slug: { eq: $path }) {
      name
      locale
      modifiedTime(formatString: "dddd MMMM Do, YYYY")
      childMdx {
        body
      }
    }
  }
`

export default function PageTemplate({
  path,
  data: {
    page: { name, modifiedTime, childMdx },
  },
}) {
  return (
    <Layout path={path}>
      <Seo title={name} />
      <div className="mx-auto py-2 sm:py-3 md:py-4 lg:py-5 px-3 sm:px-4 md:px-6 lg:px-8 dark:text-white prose prose-xl prose-green">
        <h1>{name}</h1>
        <h2 className="text-sm text-gray-600">Last Updated {modifiedTime}</h2>
        <MDXRenderer>{childMdx.body}</MDXRenderer>
      </div>
    </Layout>
  )
}

The children are returned as markdown so links are [link text](url) formatted. And if the component contains more than one child element (i.e. more than 1 paragraph), it fails saying it expected a terminating tag.
Any guidance on this would be greatly appreciated.

[cedricdelpoux]

Hi @nfmastroianni , sorry for the delay.
Could you try using the example folder as base and modify it to you need to see if it works?

I used some MDX in it and you can see some results here