gatsby-plugin-mdx#MDXRenderer TypeScript Examples

export function MdxRawContent({ body, headings, siblings }: MdxPageProps) {
  const { classes } = useStyles();
  return (
    <MdxPageBase>
      <div className={classes.wrapper}>
        <div className={classes.container}>
          <MDXRenderer>{body}</MDXRenderer>
          <MdxSiblings siblings={siblings} />
        </div>

        <div className={classes.tableOfContents}>
          <TableOfContents headings={headings} withTabs={false} />
        </div>
      </div>
    </MdxPageBase>
  );
}

TagPageTemplate: React.FC<Props> = ({ data, pageContext }) => {
  const tagDescBody = data.mdx?.body
  const posts = data.allMdx.edges
  const { tag, slug } = pageContext

  const title = `タグ: ${tag}`
  return (
    <Layout title={title} slug={slug} rightSide={<Bio />}>
      <SEO title={title} />
      <h1>
        <FontAwesomeIcon icon="tags" aria-label="タグ" />
        {tag}
      </h1>
      {tagDescBody && (
        <>
          <main>
            <MDXRenderer>{tagDescBody}</MDXRenderer>
          </main>
          <hr />
        </>
      )}
      {posts.map(({ node }) => {
        return <ArticleListItem key={node.fields.slug} {...node} />
      })}
    </Layout>
  )
}

export default function PageTemplate(props: any) {
  const { mdx } = props.data
  const { frontmatter: fm = {}, body = null } = mdx || {}

  return (
    <Layout>
      <SEO
        description={fm.seo?.description || fm.description}
        title={fm.seo?.title || fm.title}
        keywords={fm.seo?.keywords || ''}
      />
      <MDXBody padded={true}>
        {body ? <MDXRenderer>{body}</MDXRenderer> : 'Nothing here'}
      </MDXBody>
    </Layout>
  )
}

export default function PageTemplate(props: any) {
  const { mdx } = props.data // data.mdx holds our post data
  const { frontmatter: fn, body, timeToRead } = mdx

  return (
    <Layout>
      <SEO description={fn.metaDescription || ''} title={fn.metaTitle} />
      <BlogHero
        title={fn.title}
        author={fn.author}
        date={fn.lastUpdatedAt && `Last updated at ${fn.lastUpdatedAt}`}
        timeToRead={timeToRead}
      />
      <MDXBody padded={false}>
        <MDXRenderer>{body}</MDXRenderer>
      </MDXBody>
    </Layout>
  )
}

export default function PageTemplate(props: any) {
  const { mdx } = props.data // data.mdx holds our post data
  const { frontmatter: fn, body } = mdx

  return (
    <Layout>
      <SEO
        description={fn.seo?.description || fn.description}
        title={fn.seo?.title || fn.title}
        keywords={fn.seo?.keywords || ''}
      />
      <MDXBody padded={true}>
        <MDXRenderer>{body}</MDXRenderer>
      </MDXBody>
    </Layout>
  )
}

export default function BlogTemplate(props: any) {
  const { mdx } = props.data // data.mdx holds our post data
  const { body = null, frontmatter = {}, timeToRead = null } = mdx || {}
  return (
    <PlainBlogTemplate frontmatter={frontmatter} timeToRead={timeToRead}>
      {body && <MDXRenderer>{body}</MDXRenderer>}
    </PlainBlogTemplate>
  )
}

DefaultTemplate: React.FC<IProps> = ({ children, pageContext, data }) => {
  const page = data.mdx;

  return (
    <>
      <MDXRenderer slug={page.fields.slug}>{page.body}</MDXRenderer>
      <NextAndPrev prev={pageContext.prev} next={pageContext.next} />
    </>
  );
}

Page = ({ data: { page } }: PageProps) => (
  <Layout>
    <SEO title={page.title} description={page.excerpt} />
    <Styled.h1>{page.title}</Styled.h1>
    <section sx={{ my: 5 }}>
      <MDXRenderer>{page.body}</MDXRenderer>
    </section>
  </Layout>
)

// Provide common components here

function PortfolioModal({ fellow }: { fellow: Fellow }) {
  return (
    <div className="portfolio-page">
      {fellow && (
        <>
          <img
            className="modal-profile-image"
            src={fellow.profilePictureUrl}
            alt={`Profile of ${fellow.name}`}
          />
          <div className="heading u-margin-top-lg">{fellow.name}</div>
          <div className="subheading">{fellow.bio}</div>
          <div className="pod u-margin-top">
            &laquo;
            <span className="modal-pod">
              {' '}
              {fellow.podId + ' : ' + fellow.podName}{' '}
            </span>{' '}
            &raquo;
          </div>
          <PortfolioSocialLinks fellow={fellow} />

          {fellow.body && (
            <div className="portfolio-body">
              <MDXProvider components={shortcodes}>
                <MDXRenderer>{fellow.body}</MDXRenderer>
              </MDXProvider>
            </div>
          )}
          <div>
            <img
              className="flame-graph"
              src={`http://ghchart.rshah.org/${fellow.github}`}
            />
          </div>
          <div className="u-margin-top u-margin-bottom">
            <a
              className="u-color-green"
              href={
                'https://github.com/Korusuke/MLH-Fellow-Map/tree/master/src/profiles'
              }
              target="_blank"
              rel="noreferrer noopener"
            >
              <svg
                fill="#21af90"
                height="1.2em"
                width="1.2em"
                preserveAspectRatio="xMidYMid meet"
                viewBox="0 0 40 40"
                style={{
                  marginRight: '0.3em',
                  verticalAlign: 'sub',
                }}
              >
                <g>
                  <path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z" />
                </g>
              </svg>
              <span className="u-color-green">
                Is this you? Edit this page! :)
              </span>
            </a>
          </div>
        </>
      )}
    </div>
  );
}

DocumentationPage = ({ data, pageContext }) => {
  const { page } = data

  const categoryPage = pageContext.breadcrumbs[0]
  const siteName = 'Mock Service Worker Docs'
  const seo = {
    title: [page.frontmatter.title, categoryPage?.title]
      .filter(Boolean)
      .join(' - '),
    description:
      page.frontmatter.seo?.description || page.frontmatter.description,
  }

  return (
    <DocsLayout
      page={page}
      navTree={pageContext.navTree}
      breadcrumbs={pageContext.breadcrumbs}
      contributors={pageContext.contributors}
      lastModified={pageContext.lastModified}
    >
      <Seo
        title={seo.title}
        titleTemplate={`%s - ${siteName}`}
        description={page.frontmatter.description || siteName}
        socialDescription={seo.description}
        og={{
          siteName,
        }}
      />

      <h1>{page.frontmatter.title}</h1>
      {page.frontmatter.description && (
        <TextLead>{page.frontmatter.description}</TextLead>
      )}
      {page.frontmatter.ads !== false && <CarbonAds />}
      <MDXProvider components={components}>
        <MDXRenderer>{page.body}</MDXRenderer>
      </MDXProvider>
    </DocsLayout>
  )
}

MdxRenderer = ({ body }: { body: string }) => {
  return (
    <MDXProvider
      components={{
        // Typography
        h1: props => (
          <Title gutterBottom variant="h2" component="h1" {...props} />
        ),
        h2: props => (
          <Title gutterBottom variant="h3" component="h2" {...props} />
        ),
        h3: props => (
          <Title gutterBottom variant="h4" component="h3" {...props} />
        ),
        h4: props => (
          <Title gutterBottom variant="h5" component="h4" {...props} />
        ),
        h5: props => (
          <Title gutterBottom variant="h6" component="h5" {...props} />
        ),
        h6: props => (
          <Title gutterBottom variant="h6" component="h6" {...props} />
        ),
        a: props => <Link {...props} underline="hover" />,
        p: props => <Typography gutterBottom variant="body1" {...props} />,
        blockquote: (props: TypographyProps) => (
          <Quote variant="body1" {...props} />
        ),

        // Code
        pre: props => <Fragment {...props} />,
        code: (props: HTMLProps<HTMLElement>) => {
          // Extract code language
          let lang = undefined
          if (
            props.hasOwnProperty('className') &&
            typeof props.className !== 'undefined'
          ) {
            const classes = props.className.split(' ')
            classes.forEach((element: string) => {
              if (element.includes('language')) {
                lang = element.split('-')[1]
              }
            })
          }
          return (
            <Code code={childrenToString(props.children)} language={lang} />
          )
        },
        inlineCode: props => (
          <InlineCode
            gutterBottom
            variant="body2"
            component="code"
            {...props}
          />
        ),

        // Lists
        li: props => <Typography variant="body1" component="li" {...props} />,

        // Tables
        table: props => (
          <TableContainer as={Paper}>
            <Table {...props} />
          </TableContainer>
        ),
        tr: props => <TableRow {...props} />,
        td: props => <TableCell {...props} align="left" />,
        th: props => <TableCell {...props} align="left" />,

        // Mixins
        hr: () => <Divider />,
        thematicBreak: () => <Divider />,
      }}
    >
      <MDXRenderer>{body}</MDXRenderer>
    </MDXProvider>
  )
}

Post = ({ data: { post } }: PostProps) => {
  let disqusConfig = {
    url: `https://carlosazaustre.es${ post.slug}`,
    identifier: post.id,
    title: post.title
  };

  return (
    <Layout>
      <SEO
        title={post.title}
        description={post.description ? post.description : post.excerpt}
        image={post.banner ? post.banner.childImageSharp.resize.src : undefined}
      />
      <Styled.h1>{post.title}</Styled.h1>
      <p
        sx={{
          color: `secondary`,
          mt: 3,
          a: { color: `secondary` },
          fontSize: [1, 1, 2]
        }}
      >
        ? <time>{post.date}</time>
        {post.tags && (
          <React.Fragment>
            {` | `}
            <ItemTags tags={post.tags} />
          </React.Fragment>
        )}
        {` | `}
        <span>? {post.timeToRead} minutos de lectura</span>
        {` | `}
        <span>
          <Link to={post.slug + `#disqus_thread`}>
            ? <CommentCount config={disqusConfig} placeholder={`Comments`} />
          </Link>
        </span>
      </p>
      <section
        sx={{
          my: 5,
          ".gatsby-resp-image-wrapper": {
            my: [4, 4, 5],
            boxShadow: shadow.join(`, `)
          }
        }}
      >
        <MDXRenderer>{post.body}</MDXRenderer>
        <OpenPR
          slugPost={post.slug}
          text="✎ ¿Ves alguna errata? ¿Quieres modificar algo?"
        />
        <Disqus config={disqusConfig} />
        <Author />
      </section>
    </Layout>
  );
}

ArticleInner: React.FC<Props> = ({ className, post, slug }) => {
  const { site } = useStaticQuery<{
    site: {
      siteMetadata: Pick<SiteMetadata, "repo">
    }
  }>(
    graphql`
      query {
        site {
          siteMetadata {
            repo
          }
        }
      }
    `
  )

  return (
    <article className={className}>
      <header>
        <h1>{post.frontmatter.title}</h1>
        <p>
          <ArticleDate {...post.frontmatter} />
        </p>
        {post.frontmatter.tags ? (
          <div>
            <Tags tags={post.frontmatter.tags} />
          </div>
        ) : null}
      </header>
      <main>
        <MDXRenderer>{post.body}</MDXRenderer>
      </main>
      <footer>
        <FontAwesomeIcon icon={["fab", "github"]} />
        <a
          target="_blank"
          href={`${site.siteMetadata.repo}/tree/master/content${slug}`}
          rel="external noopener"
        >
          GitHubで見る（編集を提案）
        </a>
      </footer>
      <hr />
    </article>
  )
}

// Provide common components here

function PortfolioPage({ fellow }: { fellow: Fellow }) {
  return (
    <Layout>
      <div className="portfolio-page">
        <NavigationHeader fellow={fellow} />
        {fellow && (
          <>
            <img
              className="profile-image"
              src={fellow.profilePictureUrl}
              alt={`Profile of ${fellow.name}`}
            />
            <div className="heading">{fellow.name}</div>
            <div className="subheading">{fellow.bio}</div>

            <PortfolioSocialLinks fellow={fellow} />

            {fellow.body && (
              <div className="portfolio-body">
                <MDXProvider components={shortcodes}>
                  <MDXRenderer>{fellow.body}</MDXRenderer>
                </MDXProvider>
              </div>
            )}

            <div className="u-margin-top">
              <img
                className="flame-graph"
                src={`http://ghchart.rshah.org/${fellow.github}`}
              />
            </div>

            <a
              href={
                'https://github.com/Korusuke/MLH-Fellow-Map/edit/master/src/profiles'
              }
              target="_blank"
              rel="noreferrer noopener"
            >
              <div className="u-margin-top u-margin-bottom">
                <svg
                  fill="#21af90"
                  height="1.2em"
                  width="1.2em"
                  preserveAspectRatio="xMidYMid meet"
                  viewBox="0 0 40 40"
                  style={{
                    marginRight: '0.3em',
                    verticalAlign: 'sub',
                  }}
                >
                  <g>
                    <path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z" />
                  </g>
                </svg>
                <span className="u-color-green">
                  Is this you? Edit this page! :)
                </span>
              </div>
            </a>
          </>
        )}
      </div>
    </Layout>
  );
}

BlogPostTemplate: React.FC<Props> = ({ data, pageContext, location }) => {
  const post = data.mdx;
  const siteTitle = useSiteMetadata().title;
  const { previous, next } = pageContext;
  const tocData = data.mdx;

  return (
    <Layout location={location} title={siteTitle}>
      <Seo
        title={post.frontmatter.title}
        description={post.frontmatter.description || post.excerpt}
      />
      {/*TODO: This render method needs investigating*/}
      {tocData?.tableOfContents?.items && (
        <Toc>
          <InnerScroll>
            <TableOfContents items={tocData.tableOfContents.items} />
          </InnerScroll>
        </Toc>
      )}
      <article>
        <header>
          <h1
            style={{
              marginTop: rhythm(1),
              marginBottom: 0,
            }}
          >
            {post.frontmatter.title}
          </h1>
          <div
            style={{
              ...scale(-1 / 5),
              display: `block`,
              marginBottom: rhythm(1),
            }}
          >
            <p
              style={{
                float: "left",
              }}
            >
              {post.frontmatter.date}
            </p>
            <p
              style={{
                float: "right",
              }}
            >
              {post.frontmatter.author}
            </p>
          </div>
          <div style={{ clear: "both" }}></div>
        </header>
        <MDXRenderer>{post.body}</MDXRenderer>
        <hr
          style={{
            marginBottom: rhythm(1),
          }}
        />
        <footer>
          {/* <Bio /> TODO: Same as the other bio, we need to fix the bio component*/}
        </footer>
      </article>

      <nav>
        <ul
          style={{
            display: `flex`,
            flexWrap: `wrap`,
            justifyContent: `space-between`,
            listStyle: `none`,
            padding: 0,
          }}
        >
          <li>
            {previous && (
              <Link to={previous.fields.slug} rel="prev">
                ← {previous.frontmatter.title}
              </Link>
            )}
          </li>
          <li>
            {next && (
              <Link to={next.fields.slug} rel="next">
                {next.frontmatter.title} →
              </Link>
            )}
          </li>
        </ul>
      </nav>
    </Layout>
  );
}

export function MdxPageTabs({ body, frontmatter, headings, siblings }: MdxPageProps) {
  const [query, setQuery] = useState('');
  const { classes } = useStyles();
  const mobile = useMediaQuery('(max-width: 500px)');
  const location = useLocation();
  const initialTab = getInitialTab(location.search.replace('?t=', '') || 'docs');
  const hasProps = Array.isArray(frontmatter.props);
  const hasStyles = Array.isArray(frontmatter.styles);

  if (!hasProps && !hasStyles) {
    return null;
  }

  const propsTables = hasProps
    ? frontmatter.props.map((component) => (
        <div key={component}>
          <Title order={2} sx={{ fontWeight: 600 }} mb={20}>
            {component} component props
          </Title>
          <PropsTable key={component} component={component} query={query} />
        </div>
      ))
    : null;

  return (
    <MdxPageBase>
      <Tabs
        variant="outline"
        initialTab={initialTab}
        onTabChange={(index) => {
          const q = getTabQuery(index);
          navigate(q ? `${location.pathname}?t=${q}` : location.pathname, {
            replace: true,
          });
        }}
        classNames={{ tabsList: classes.tabsList, tabsListWrapper: classes.tabsWrapper }}
      >
        <Tab label="Documentation" className={classes.tab}>
          <div
            className={classes.tabContent}
            style={{
              display: 'flex',
              position: 'relative',
              justifyContent: 'space-between',
            }}
          >
            <div className={classes.main}>
              <MDXRenderer>{body}</MDXRenderer>
              <MdxSiblings siblings={siblings} />
            </div>

            <div className={classes.tableOfContents}>
              <TableOfContents headings={headings} withTabs />
            </div>
          </div>
        </Tab>

        {hasProps && (
          <Tab label={mobile ? 'Props' : 'Component props'} className={classes.tab}>
            <div
              style={{ maxWidth: 1178, marginLeft: 'auto', marginRight: 'auto', marginTop: 24 }}
              className={classes.tabContent}
            >
              <TextInput
                autoFocus
                icon={<MagnifyingGlassIcon />}
                placeholder="Search props"
                mb={20}
                value={query}
                onChange={(event) => setQuery(event.currentTarget.value)}
              />
              {propsTables}
            </div>
          </Tab>
        )}

        {hasStyles && (
          <Tab label={mobile ? 'Styles' : 'Styles API'} className={classes.tab}>
            <div
              style={{ maxWidth: 1178, marginLeft: 'auto', marginRight: 'auto', marginTop: 24 }}
              className={classes.tabContent}
            >
              <StylesApi components={frontmatter.styles} />
            </div>
          </Tab>
        )}
      </Tabs>
    </MdxPageBase>
  );
}

export default function Doc({
  pageContext: { name, availIn, pathConfig, filePath },
  data,
}: Props) {
  const {
    site,
    mdx: { frontmatter, tableOfContents, body },
    navigation: { navigation },
  } = data

  const tocData = useMemo(() => {
    if (tableOfContents.items!.length === 1) {
      return tableOfContents.items![0].items
    }
    return tableOfContents.items
  }, [tableOfContents.items])

  const stableBranch = getStable(pathConfig.repo)

  const dispatch = useDispatch()

  useEffect(() => {
    // https://github.com/pingcap/website-docs/issues/221
    // md title with html tag will cause anchor mismatch
    replaceInternalHref(pathConfig.locale, pathConfig.repo, pathConfig.version)

    dispatch(
      setDocInfo({
        lang: pathConfig.locale,
        type: pathConfig.repo,
        version: pathConfig.version,
      })
    )
  }, [dispatch, pathConfig])

  useCodeBlock()

  return (
    <Layout locale={availIn.locale}>
      <article className="PingCAP-Doc">
        <Columns>
          <div className="column is-one-fifth">
            <div className="left-aside">
              {pathConfig.repo !== 'tidbcloud' && (
                <VersionSwitcher
                  name={name}
                  pathConfig={pathConfig}
                  availIn={availIn.version}
                />
              )}
              <Navigation data={navigation} />
            </div>
          </div>

          <Seo
            title={frontmatter.title}
            description={frontmatter.summary}
            meta={[
              {
                name: 'doc:lang',
                content: pathConfig.locale,
              },
              {
                name: 'doc:type',
                content: pathConfig.repo,
              },
              {
                name: 'doc:version',
                content: pathConfig.branch,
              },
            ]}
            link={[
              ...(pathConfig.branch !== stableBranch && stableBranch != null
                ? [
                    {
                      rel: 'canonical',
                      href: `${site.siteMetadata.siteUrl}${generateUrl(name, {
                        ...pathConfig,
                        branch: stableBranch,
                      })}`,
                    },
                  ]
                : []),
            ]}
          />
          <Column size={7}>
            <div className="markdown-body doc-content">
              <CustomNotice
                name={name}
                pathConfig={pathConfig}
                availIn={availIn.version}
              />

              <MDXProvider components={{ ...Shortcodes, Link }}>
                <MDXRenderer>{body}</MDXRenderer>
              </MDXProvider>

              {pathConfig.repo !== Repo.tidbcloud && (
                <GitCommitInfo
                  pathConfig={pathConfig}
                  title={frontmatter.title}
                  filePath={filePath}
                />
              )}
            </div>
          </Column>

          <Column>
            <div className="right-aside">
              <Block>
                <DownloadPDF pathConfig={pathConfig} />
                {pathConfig.repo !== 'tidbcloud' && (
                  <>
                    <FeedbackDoc pathConfig={pathConfig} filePath={filePath} />
                    {pathConfig.version === 'dev' && (
                      <Improve pathConfig={pathConfig} filePath={filePath} />
                    )}
                  </>
                )}
                {pathConfig.locale === 'zh' && <TechFeedback />}
              </Block>
              <div className="doc-toc">
                <Title size={6} style={{ marginBottom: 0 }}>
                  <Trans i18nKey="doc.toc" />
                </Title>
                {tocData && <Toc data={tocData} />}
              </div>
            </div>
          </Column>

          <UserFeedback title={frontmatter.title} locale={pathConfig.locale} />
        </Columns>
      </article>
    </Layout>
  )
}