@hashicorp/platform-docs-mdx

Utilities for working with mdx on docs-focused HashiCorp next.js websites

Usage no npm install needed!

<script type="module">
  import hashicorpPlatformDocsMdx from 'https://cdn.skypack.dev/@hashicorp/platform-docs-mdx';
</script>

README

@hashicorp/platform-docs-mdx

Providers are intended to be a source for data that is available either globally, or across a wide range of nested components within an app.

Docs

The docs provider provides a set of default components to be made available within mdx files. There are two methods for its use, depending on which markdown rendering strategy a website is using.

If your website is using next-mdx-enhanced, you can pull down a pre-configured MDXProvider to be used within mdx layouts, as such:

// Note that this is a named export, not the default
import { createMdxProvider } from '@hashicorp/platform-docs-mdx'

const MDXProvider = createMdxProvider({
  product: 'vault',
  additionalComponents: {
    /* add your own components here if you want */
  },
})

If your website is using next-mdx-remote, you don't need a provider, and an object containing the components necessary is enough. To produce this, you can use the following example:

import defaultMdxComponents from '@hashicorp/platform-docs-mdx'

const components = defaultMdxComponents({
  product: 'vault',
  additionalComponents: {
    /* add your own components here if you want */
  },
})