How to use @mdx-js/mdx - 10 common examples

const extractMdxMeta = (content) => {
  let meta = {};
  mdx.sync(content, {
    remarkPlugins: [
      () => (tree) => {
        visit(tree, 'export', (node) => {
          const ast = parse(node.value, {
            plugins: ['jsx'],
            sourceType: 'module'
          });
          traverse(ast, {
            VariableDeclarator: (path) => {
              if (path.node.id.name === 'meta') {
                // eslint-disable-next-line no-eval
                meta = eval(`module.exports = ${generate(path.node.init).code}`);
              }
            }
          });
        });

/** @jsx jsx */

import React, { useEffect, useRef, useState } from 'react'; // eslint-disable-line no-unused-vars
import { Helmet } from 'react-helmet';
import { Link, graphql } from 'gatsby';
import MDXRenderer from 'gatsby-mdx/mdx-renderer';
import throttle from 'lodash.throttle';
import { MDXProvider } from '@mdx-js/tag';
import { jsx } from '@emotion/core';
import { SkipNavContent } from '@reach/skip-nav';
import { borderRadius, colors, gridSize } from '@arch-ui/theme';

import matter from 'gray-matter';
import visit from 'unist-util-visit';
import rawMDX from '@mdx-js/mdx';
const compiler = rawMDX.createMdxAstCompiler({ mdPlugins: [] });

import Layout from '../templates/layout';
import mdComponents from '../components/markdown';
import { SiteMeta } from '../components/SiteMeta';
import { media, mediaMax } from '../utils/media';
import { Container, Footer, Sidebar, Search } from '../components';
import { CONTAINER_GUTTERS } from '../components/Container';

const SIDEBAR_WIDTH = 280;

function titleCase(str, at = '-') {
  if (!str) return str;

  const arr = str
    .toLowerCase()
    .split(at)

function mdxLoader(src) {
  const { math } = getOptions(this);
  const cb = this.async();
  const remarkPlugins = math
    ? [emoji, require('remark-math'), require('remark-html-katex') /* avoid warnings */, mdxPlugin]
    : [emoji, mdxPlugin];
  const result = mdx.sync(src, {
    remarkPlugins
  });

  cb(null, result);
}

)
  }
  let documentPath = path.join(filename, '..', documentFilename);
  let imports = `import React from 'react'\nimport { MDXTag } from '@mdx-js/tag'\n`

  // In development mode, we want to import the original document so that
  // changes will be picked up and cause a re-build.
  // Note: this relies on files with macros *not* being cached by babel.
  if (process.env.NODE_ENV === "development") {
    imports += `import '${documentPath}'\n`
  }

  let source = fs.readFileSync(documentPath, 'utf8');
  let transformedSource =
    babel.transformSync(
      imports+mdx.sync(source),
      {
        presets: [babelPresetReactApp],
        filename: documentPath,
      },
    ).code

  return writeTempFile(documentPath, transformedSource)
}

function inlineMDX({
  babel,
  referencePath,
  state,
}) {
  let { file: { opts: { filename } } } = state
  let program = state.file.path

  let rawCode = referencePath.parent.quasi.quasis[0].value.raw
  let transformedSource = mdx.sync(rawCode).replace('export default', '')

  // Need to parse the transformed source this way instead of
  // with babel.parse or babel.transform, as otherwise the
  // generated code has errors. I'm not sure why.
  let ast = parse(
    transformedSource,
    {
      plugins: ['jsx', 'objectRestSpread'],
      sourceType: "module",
      sourceFilename: filename,
    },
  )

  function visitImport(path) {
    let name = path.node.local.name
    var binding = path.scope.getBinding(name)

function extractStories(node, options) {
  // we're overriding default export
  const defaultJsx = mdxToJsx.toJSX(node, {}, { ...options, skipExport: true });
  const storyExports = [];
  let counter = 0;
  node.children.forEach(n => {
    const stories = getStories(n, counter);
    if (stories) {
      stories.forEach(story => {
        storyExports.push(story);
        counter += 1;
      });
    }
  });

  const fullJsx = [
    'import { DocsContainer } from "@storybook/addon-docs/blocks";',
    defaultJsx,
    wrapperJs,

function extractExports(node, options) {
  // we're overriding default export
  const defaultJsx = mdxToJsx.toJSX(node, {}, { ...options, skipExport: true });
  const storyExports = [];
  const includeStories = [];
  let metaExport = null;
  let counter = 0;
  node.children.forEach(n => {
    const exports = getExports(n, counter);
    if (exports) {
      const { stories, meta } = exports;
      if (stories) {
        Object.entries(stories).forEach(([key, story]) => {
          includeStories.push(key);
          storyExports.push(story);
          counter += 1;
        });
      }
      if (meta) {

function extractExports(node, options) {
  // we're overriding default export
  const defaultJsx = mdxToJsx.toJSX(node, {}, { ...options, skipExport: true });
  const storyExports = [];
  const includeStories = [];
  let metaExport = null;
  let counter = 0;
  node.children.forEach(n => {
    const exports = getExports(n, counter);
    if (exports) {
      const { stories, meta } = exports;
      if (stories) {
        Object.entries(stories).forEach(([key, story]) => {
          includeStories.push(key);
          storyExports.push(story);
          counter += 1;
        });
      }
      if (meta) {

slides.forEach((slide) => {
      const hash = mdxAstToMdxHast()({
        type: 'root',
        children: slide
      });
      const mdxJSX = toJSX(hash);

      // jsx variable is established, so we don't use babel/parser
      const jsx = mdxJSX.match(/([\s\S]*)<\/MDXLayout>/m);

      if (jsx) {
        const template = `
          (props) => (
            <>
              ${jsx[1]}
            
          )`;
        const fusumaProps = createFusumaProps(slide);

        res.jsx.push(template);
        res.fusumaProps.push(fusumaProps);
      }

export const mdxTranspileAsync = async (mdxText: string, isEntry: boolean, preview: Preview) => {
  let mdxTextToCompile: string;
  if (!hasDefaultExport(mdxText)) {
    // inject vscode markdown styles if we haven't found a default export
    mdxTextToCompile = injectMDXStyles(mdxText, preview);
  } else {
    mdxTextToCompile = mdxText;
  }
  const compiledMDX = await mdx(mdxTextToCompile);
  return wrapCompiledMdx(compiledMDX, isEntry);
};