@mdx-js/react#MDXProvider JavaScript Examples

App = ({ Component, pageProps, router, ...rest }) => {
  return (
    <ModalProvider>
      <MDXProvider
        className="md:flex flex-col items-center w-full"
        components={mdComponents}
      >
        <Header />

        {router.pathname === '/' ? (
          <>
            <Nav home={true} />
            <div className="markdown-body">
              <Component {...pageProps} />
            </div>
          </>
        ) : (
          <>
            <Nav home={false} />
            <div className="markdown-body max-w-3xl pb-20 px-2 md:px-4 mx-auto">
              <Component {...pageProps} />
            </div>
          </>
        )}
        <Footer />
      </MDXProvider>
    </ModalProvider>
  )
}

Layout = ({ children, location, useFwTemplate }, theme) => (
  <ThemeProvider location={location}>
    <MDXProvider components={mdxComponents}>
      <SiteWrap>
        <Wrapper>
          {useFwTemplate ? (
            <Content fwTemplate={useFwTemplate}>
              <MaxWidth>{children}</MaxWidth>
            </Content>
          ) : (
            <>
              <LeftSideBarWidth className={'hiddenMobile'}>
                <Sidebar location={location} />
              </LeftSideBarWidth>
              {config.sidebar.title ? (
                <div
                  className={'sidebarTitle sideBarShow'}
                  dangerouslySetInnerHTML={{ __html: config.sidebar.title }}
                />
              ) : null}
              <Content>
                <MaxWidth>{children}</MaxWidth>
              </Content>
              <RightSideBarWidth className={'hiddenMobile'}>
                {location && <RightSidebar location={location} />}
              </RightSideBarWidth>
            </>
          )}
        </Wrapper>
        <Footer />
      </SiteWrap>
    </MDXProvider>
  </ThemeProvider>
)

StaticPage = ({ data: { mdx } }) => {
  return (
    <>
      <PageMetadata title={mdx.frontmatter.title} />
      <PageBody>
        <MDXProvider components={components}>
          <MDXRenderer>{mdx.body}</MDXRenderer>
        </MDXProvider>
      </PageBody>
    </>
  )
}

export default function Template({ pageContext }) {
    const { body } = pageContext;

    return (
        <div id="content">
            <MDXProvider>
                <MDXRenderer>{body}</MDXRenderer>
            </MDXProvider>
        </div>
    );
}

MDXCustomRenderer = ({ data: { mdx } }) => {
  return (
    <MDXProvider components={components}>
      <MDXRenderer frontmatter={mdx.frontmatter}>
        {mdx.body}
      </MDXRenderer>
    </MDXProvider>
  )
}

function MyApp({ Component, pageProps }) {
  return (
    <Chakra cookies={pageProps.cookies}>
      <ColorModeProvider
        options={{
          useSystemColorMode: false,
        }}
      >
        <MDXProvider components={MDXComponents}>
          <GlobalStyle>
            <DefaultSeo {...SEO} />
            <Component {...pageProps} />
          </GlobalStyle>
        </MDXProvider>
      </ColorModeProvider>
    </Chakra>
  )
}

Note = (data) => {
  const AnchorTag = (props) => (
    <components.a {...props} references={data.outboundReferences} />
  );

  return (
    <React.Fragment>
      {data.partOf ? (
        <div>
          Part of{" "}
          <LinkToStacked to={data.partOf.slug}>
            {data.partOf.title}
          </LinkToStacked>
        </div>
      ) : null}
      <MDXProvider components={{ ...components, a: AnchorTag }}>
        <MDXRenderer>{data.mdx}</MDXRenderer>
      </MDXProvider>
      <ReferencesBlock references={data.inboundReferences} />
    </React.Fragment>
  );
}

export default function WorkoutMenuItem(props) {
  return (
    <MenuItem
      style={{color: colors.text1}}
      icon={(
        React.createElement(props.icon, {
          style: {
            width: '100%',
            height: '100%',
            fill: 'currentColor'
          }
        })
      )}
      title={(
        <TextWrapper>
          <strong>{props.keyWord}</strong> {props.otherWords}
        </TextWrapper>
      )}
    >
      <InnerWrapper>
        <MDXProvider components={components}>
          {props.children}
        </MDXProvider>
      </InnerWrapper>
    </MenuItem>
  )
}

export default function Documentation({ location, data }) {
  const article = data.mdx
  return (
    <>
      <Seo title={article.frontmatter.title} description={article.excerpt} />
      <DocumentationContainer>
        <Sidebar sidebar={wikiSidebar} location={location} />
        <ContentWrapper>
          <Content>
            <h1>{article.frontmatter.title}</h1>
            <MDXProvider components={shortlinks}>
              <MDXRenderer>{article.body}</MDXRenderer>
            </MDXProvider>
          </Content>
        </ContentWrapper>
      </DocumentationContainer>
    </>
  )
}

function Usage({ children }) {
  return (
    <BasisProvider theme={defaultTheme} InternalLink={GatsbyLink}>
      <MDXProvider components={allDesignSystem}>
        <Container padding="3 6">{children}</Container>
      </MDXProvider>
    </BasisProvider>
  );
}

function Resources({ children }) {
  return (
    <BasisProvider theme={defaultTheme} InternalLink={GatsbyLink}>
      <MDXProvider components={allDesignSystem}>
        <Container padding="3 6">{children}</Container>
      </MDXProvider>
    </BasisProvider>
  );
}

Layout = ({ children, location }) => (
  <ThemeProvider location={location}>
    <MDXProvider components={mdxComponents}>
      <Wrapper>
        <LeftSideBarWidth className={'hiddenMobile'}>
          <Sidebar location={location} />
        </LeftSideBarWidth>
        {config.sidebar.title ? (
          <div
            className={'sidebarTitle sideBarShow'}
            dangerouslySetInnerHTML={{ __html: config.sidebar.title }}
          />
        ) : null}
        <Content>
          <MaxWidth>{children}</MaxWidth>
        </Content>
        <RightSideBarWidth className={'hiddenMobile'}>
          <RightSidebar location={location} />
        </RightSideBarWidth>
      </Wrapper>
    </MDXProvider>
  </ThemeProvider>
)

export default function App({ Component, pageProps }) {
  const [constructor, setConstructor] = useState(false);

  useEffect(() => {
    if (!constructor) {
      smartlookClient.init("8046e53cf51c2e51fc173ffc28bd6343f04ed2ec");
      setConstructor(true);
    }
  });

  return (
    <ThemeProvider attribute="class" defaultTheme="system">
      <MDXProvider components={mdComponents}>
        <DefaultSeo {...SEO} />
        <div className="bg-white dark:bg-dark-bg-primary dark:text-dark-text-primary">
          <div className="w-full fixed z-50 border-b bg-white dark:bg-dark-bg-header">
            <Header />
          </div>
          <div className="md:container w-full mx-auto px-4 flex flex-col md:flex-row ">
            <Menu />
            <div
              className="w-full pt-16 md:pt-28 md:w-4/5 pb-24"
              style={{ minHeight: "calc(100vh)" }}
            >
              <Component {...pageProps} />
            </div>
          </div>
        </div>
      </MDXProvider>
    </ThemeProvider>
  );
}

DocTemplate = ({ data: { site, mdx }, location }) => {
  const siteTitle = site.siteMetadata.title;
  const shortcodes = { Link, JupyterNotebook }; // Provide common components here

  return (
    <Layout location={location} title={siteTitle}>
      <SEO
        title={mdx.frontmatter.title}
        description={mdx.frontmatter.description}
        srcLink={mdx.fields.srcLink}
      />
      <PageSection className="doc" variant={PageSectionVariants.light}>
        <TextContent>
          <h1>{mdx.frontmatter.title}</h1>
          <MDXProvider components={shortcodes}>
            <MDXRenderer>{mdx.body}</MDXRenderer>
          </MDXProvider>
        </TextContent>
      </PageSection>
    </Layout>
  );
}

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <title>RocDev</title>
        <meta name="description" content="RocDev - We are a community of professionals in disciplines related to software development in the Greater Rochester Area."/>
        <link rel="icon" href="/favicon.ico" />
        <link
          href="https://fonts.googleapis.com/css?family=Crimson+Text"
          rel="stylesheet"
        />
      </Head>
      <Nav />
      <div className="font-sans flex flex-col min-h-screen">
        <MDXProvider components={htmlReplacements}>
          <main className="flex-1 w-5/6 md:w-3/5 xl:w-2/5 mx-auto">
            <Component {...pageProps} />
          </main>
        </MDXProvider>
        <footer className="mt-8 border-t border-gray-300 p-8 text-center">
          <div className="w-2/5 lg:w-1/5 mx-auto">
            This work is licensed under a{" "}
            <Anchor href="https://creativecommons.org/licenses/by-nc/4.0/legalcode">
              Creative Commons Attribution-NonCommercial 4.0 International
              Public License
            </Anchor>
            .
          </div>
        </footer>
      </div>
    </>
  );
}

wrapRootElement = ({ element }) => <MDXProvider>{element}</MDXProvider>

App = (props) => {
  const [initialColorMode, setColorMode] = useState(null);
  const router = useRouter();

  useEffect(() => {
    /**
     * <html style="color-scheme: light;">
     */
    const root = document.documentElement;
    const colorScheme = root.style.getPropertyValue('color-scheme');
    if ((colorScheme === 'dark' || colorScheme === 'light') && (initialColorMode !== colorScheme)) {
      setColorMode(colorScheme);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // https://github.com/vercel/next.js/blob/canary/examples/with-react-ga/pages/_app.js
  useEffect(() => {
    ReactGA.initialize(process.env.GA_TRACKING_ID);
    // `routeChangeComplete` won't run for the first page load unless the query string is
    // hydrated later on, so here we log a page view if this is the first render and
    // there's no query string
    if (!router.asPath.includes('?')) {
      pageview();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    // Listen for page changes after a navigation or when the query changes
    router.events.on('routeChangeComplete', pageview);
    return () => {
      router.events.off('routeChangeComplete', pageview);
    };
  }, [router]);

  if (!initialColorMode) {
    return null;
  }

  const Page = (router.pathname === '/') ? DefaultPage : DocsPage;

  return (
    <TonicProvider
      key={initialColorMode} // Force re-render if color mode changes
      colorMode={{
        defaultValue: initialColorMode,
      }}
      colorStyle={{
        defaultValue: defaultColorStyle,
      }}
      useCSSBaseline
    >
      <ToastProvider>
        <MDXProvider components={MDXComponents}>
          <Page {...props} />
          <GlobalStyles />
        </MDXProvider>
      </ToastProvider>
    </TonicProvider>
  );
}

export default function MDX({ children }) {
  return <MDXProvider components={components}>{children}</MDXProvider>
}

export default function Template(props) {
  const {hash, pathname} = props.location;
  const {file, site} = props.data;
  const {frontmatter, headings, fields} =
    file.childMarkdownRemark || file.childMdx;
  const {title, description} = site.siteMetadata;
  const {
    sidebarContents,
    githubUrl,
    spectrumUrl,
    twitterHandle,
    baseUrl
  } = props.pageContext;

  const pages = sidebarContents
    .reduce((acc, {pages}) => acc.concat(pages), [])
    .filter(page => !page.anchor);

  return (
    <Fragment>
      <CustomSEO
        title={frontmatter.title}
        description={frontmatter.description || description}
        siteName={title}
        baseUrl={baseUrl}
        image={fields.image}
        twitterHandle={twitterHandle}
      />
      <StyledContentWrapper>
        <PageHeader {...frontmatter} />
        <hr />
        <PageContent
          title={frontmatter.title}
          graphManagerUrl={fields.graphManagerUrl}
          pathname={pathname}
          pages={pages}
          headings={headings}
          hash={hash}
          githubUrl={githubUrl}
          spectrumUrl={spectrumUrl}
        >
          <CustomLinkContext.Provider
            value={{
              pathPrefix: site.pathPrefix,
              baseUrl
            }}
          >
            {file.childMdx ? (
              <MDXProvider components={components}>
                <MDXRenderer>{file.childMdx.body}</MDXRenderer>
              </MDXProvider>
            ) : (
              renderAst(file.childMarkdownRemark.htmlAst)
            )}
          </CustomLinkContext.Provider>
        </PageContent>
        <Footer />
      </StyledContentWrapper>
    </Fragment>
  );
}

Content = ({
    title,
    date,
    updated,
    tags,
    body,
    slug,
    devArticleId,
    showAd,
    bookInfo,
    showTableOfContents,
    contentType,
}) => {
    useCarbonAd(slug);

    return (
        <MDXProvider
            components={{
                Gif: showTableOfContents ? GifWithToC : Gif,
                InlineImage,
            }}
        >
            <Title title={title} contentType={contentType} />
            <Container>
                <DateAndTags>
                    {renderDate(date, updated)}
                    <Interpunct>·</Interpunct>{' '}
                    {tags.map((tag) => (
                        <Tag tag={tag} key={tag} />
                    ))}
                </DateAndTags>
                <Socials>
                    <GithubLink slug={slug} />
                    <DevComments devArticleId={devArticleId} />
                </Socials>
            </Container>
            {showAd && <CarbonAd />}
            {bookInfo && (
                <ImageContainer>
                    <GatsbyImage
                        image={
                            bookInfo.coverImage.childImageSharp
                                .gatsbyImageData
                        }
                        alt={bookInfo.title}
                    />
                </ImageContainer>
            )}
            <MDXRenderer>{body}</MDXRenderer>
        </MDXProvider>
    );
}

export default function Template(props) {
  const {hash, pathname} = props.location;
  const {file, site} = props.data;
  const {frontmatter, headings, fields} =
  file.childMarkdownRemark || file.childMdx;
  const {title, description} = site.siteMetadata;
  const {
    sidebarContents,
    githubUrl,
    twitterHandle,
    adSense,
    baseUrl
  } = props.pageContext;

  const pages = sidebarContents
    .reduce((acc, {pages}) => acc.concat(pages), [])
    .filter(page => !page.anchor);

  return (
    <>
      <SEO
        title={frontmatter.title}
        description={frontmatter.description || description}
        siteName={title}
        baseUrl={baseUrl}
        image={fields.image}
        twitterHandle={twitterHandle}
        adSense={adSense}
      />
      <ContentWrapper>
        <PageHeader {...frontmatter} />
        <hr />
        {frontmatter.ytLink &&
          <>
            <VideoBox videoUrl={frontmatter.ytLink} />
            <hr />
          </>
        }
        <PageContent
          title={frontmatter.title}
          graphManagerUrl={fields.graphManagerUrl}
          pathname={pathname}
          pages={pages}
          headings={headings}
          hash={hash}
          githubUrl={githubUrl}
        >
          <CustomLinkContext.Provider
            value={{
              pathPrefix: site.pathPrefix,
              baseUrl
            }}
          >
            {file.childMdx ? (
              <MDXProvider components={components}>
                <MDXRenderer>{file.childMdx.body}</MDXRenderer>
              </MDXProvider>
            ) : (
              renderAst(file.childMarkdownRemark.htmlAst)
            )}
          </CustomLinkContext.Provider>
        </PageContent>
        <Footer />
      </ContentWrapper>
    </>
  );
}

wrapRootElement = ({ element }) => (
  <MDXProvider components={components}>{element}</MDXProvider>
)

Mdx = ({ children }) => (
  <MDXProvider components={components}>{children}</MDXProvider>
)

Layout = ({ children, location, pageResources, ...props }) => {
  const path = location.pathname;
  function getPrevNextRoutes(routes) {
    const validRoutes = flatten(createTree(processRoutes(routes, path)));

    const currentPathIndex = validRoutes.findIndex(
      route => route.slug === path
    );

    return {
      prev: validRoutes[currentPathIndex - 1],
      next: validRoutes[currentPathIndex + 1],
    };
  }

  // HACK: remove this if the plugin can somehow work by default...
  // Fixes the anchor not being scrolled to on page load
  useLayoutEffect(anchorScroll, []);

  return (
    <MDXProvider components={components}>
      <Global
        styles={css`
          h1,
          h2,
          h3,
          h4,
          h5,
          h6 {
            color: #f4e0f1;
            font-weight: bold;
          }

          h1 {
            font-size: 40px;
            margin-top: 20px;
            padding-top: 20px;
            line-height: 1.1;
          }

          h2 {
            font-size: 32px;
            line-height: 1.3;
          }

          h3 {
            font-size: 24px;
            margin-bottom: 10px;
            margin-top: 40px;
          }

          h4 {
            font-size: 20px;
            margin-bottom: 10px;
          }

          h5 {
            font-size: 18px;
          }

          h2::before {
            content: ' ';
            display: block;
            border-bottom: 1px solid #44395d;
            padding-top: 20px;
            margin-bottom: 40px;
          }

          blockquote {
            margin: 0;
            padding: 0.5em 30px;
            border-radius: 0px 10px 10px 0px;
            background-color: rgba(135, 82, 27, 0.25);
            color: #ddc5a1;
            border-left: 2px dashed #ddc5a1;
          }

          h3 > code[class*='language-'] {
            color: #ffe69d;
          }

          ul {
            padding-left: 20px;
          }

          li {
            margin-bottom: 5px;
          }

          a {
            color: #ffe69d;
            text-decoration: none;
            padding-bottom: 1px;
            border-bottom: 2px solid rgba(255, 228, 148, 0.25);
            transition: border-bottom-color 0.15s ease-in-out;

            &:hover {
              border-bottom: 2px solid rgba(255, 228, 148, 1);
            }

            &:active {
              border-bottom-style: dashed;
            }
          }

          ${media.md} {
            pre[class*='language-'] {
              padding: 15px 20px;
            }
          }

          h1 .gatsby-link-icon {
            display: none;
          }

          h2,
          h3,
          h4,
          h5,
          h6 {
            &:hover {
              .gatsby-link-icon {
                opacity: 1;
              }
            }
          }

          .gatsby-link-icon {
            fill: #ffb6b3;
            border: none;
            margin-left: -30px;
            padding-right: 10px;
            opacity: 0;
            transition: opacity 0.15s ease-in-out;
            float: right;

            ${media.md} {
              float: left;
            }

            &:focus {
              opacity: 1;
            }

            &:hover {
              border: none;
            }

            svg {
              width: 20px;
              height: 20px;
            }
          }
        `}
      />
      <div>
        {pageResources && (
          <SEO
            title={
              pageResources.json.pageContext.frontmatter.title ||
              pageResources.json.pageContext.frontmatter.navigationLabel
            }
          />
        )}
        <Navigation root="/" target="location" path={path} />
        <Main>
          <Container>
            {children}
            <EditPage path={path} />
          </Container>
          <MdxRoutes>
            {routes => {
              const { prev, next } = getPrevNextRoutes(routes);
              return (
                <NavButtonWrapper>
                  <NavButtonContainer>
                    <NavButtonCell>
                      {prev && (
                        <NavButton to={`${prev.slug}`} data-first>
                          <NavButtonDirection data-prev>
                            <ChevronLeft size={28} css={arrowCss} />
                          </NavButtonDirection>
                          {prev.navigationLabel}
                        </NavButton>
                      )}
                    </NavButtonCell>
                    <NavDivider />
                    <NavButtonCell>
                      {next && (
                        <NavButton to={`${next.slug}`} data-last>
                          {next.navigationLabel}
                          <NavButtonDirection data-next>
                            <ChevronRight size={28} css={arrowCss} />
                          </NavButtonDirection>
                        </NavButton>
                      )}
                    </NavButtonCell>
                  </NavButtonContainer>
                </NavButtonWrapper>
              );
            }}
          </MdxRoutes>
        </Main>
        <FooterStyled>© {new Date().getFullYear()} MIT License</FooterStyled>
      </div>
    </MDXProvider>
  );
}

Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query LandingTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `);

  return (
    <MDXProvider components={components}>
      <SEO title="Home" />
      <Header siteTitle={data.site.siteMetadata.title} />
      <InstallBar />
      <CarbonAds
        css={css`
          ${media.lg} {
            position: absolute;
            top: 0;
            right: 15px;
            .carbonplaceholder,
            #carbonads {
              background-color: #ffffff4f;
              color: #632f45;
            }
          }
        `}
      />

      <Container maxWidth={1400}>
        <PlacementExample />
        <PreventOverflowExample />
        <FlipExample />
      </Container>

      <Section>
        <Container>
          <Crop size={50} stroke="#ffe69d" />
          <Heading>In a nutshell, Popper:</Heading>
          <Ul>
            <Li>
              <Check />
              <strong>
                Places your tooltip or popover relative to the reference
              </strong>{' '}
              taking into account their sizes, and positions its arrow centered
              to the reference.
            </Li>
            <Li>
              <Check />
              <strong>
                Takes into account the many different contexts it can live in
              </strong>{' '}
              relative to the reference (different offsetParents, different or
              nested scrolling containers).
            </Li>
            <Li>
              <Check />
              <strong>
                Keeps your tooltip or popover in view as best as possible
              </strong>
              . It prevents it from being clipped or cut off (overflow
              prevention) and changes the placement if the original does not fit
              (flipping).
            </Li>
          </Ul>
        </Container>
      </Section>

      <Section>
        <Container>
          <CloudLightning size={50} stroke="#ffe69d" />
          <Heading>Our Sponsors</Heading>
          <p>
            Popper is proudly sponsored by the following organizations,
            <br />
            join them on{' '}
            <ExternalLinkStyled to="https://opencollective.com/floating-ui">
              Open Collective
            </ExternalLinkStyled>{' '}
            to support us.
          </p>

          <Sponsors />
        </Container>
      </Section>

      <Section>
        <Container>
          <Layers size={50} stroke="#ffe69d" />
          <Heading>Granular configuration with sensible defaults</Heading>
          <p>
            Popper aims to "just work" without you needing to configure much. Of
            course, there are cases where you need to configure Popper beyond
            its defaults – in these cases, Popper shines by offering high
            granularity of configuration to fine-tune the position or behavior
            of your popper.
          </p>
          <p>
            You can extend Popper with your own modifiers (or plugins) to make
            your popper work for you, no matter how advanced the scenario.
          </p>
        </Container>
      </Section>

      <Section>
        <Container>
          <Check size={50} stroke="#ffe69d" />
          <Heading>No compromises</Heading>
          <Ul>
            <Li>
              <Check />
              <strong>No detachment</strong>. Position updates take less than a
              millisecond on average devices. Popper doesn't debounce the
              positioning updates of the tooltip to the point where it will{' '}
              <em>ever</em> detach from its reference, but this doesn't come at
              the cost of poor performance.
            </Li>
            <Li>
              <Check />
              <strong>
                You don't have to change the DOM context of your tooltip or
                popover element
              </strong>
              ; it will work no matter where your popper and reference elements
              live, even in the most complex scenarios like nested scrolling
              containers or alternative offsetParent contexts.
            </Li>
            <Li>
              <Check />
              <strong>Still lightweight</strong>. Handling all of this
              complexity is still done in an efficient manner. The base Popper
              is only 2 kB minzipped.
            </Li>
          </Ul>
        </Container>
      </Section>

      <Section>
        <Container>
          <Heart size={50} stroke="#ffe69d" />
          <Heading>Free open-source, used by millions</Heading>
          <p>
            Popper has billions of hits across the web, is trusted by millions
            of developers in production, and used in popular libraries like
            Bootstrap and Material UI.
          </p>
          <Button
            href="https://opencollective.com/floating-ui"
            target="_blank"
            rel="noopener noreferrer"
          >
            Support us
          </Button>
          <UsedByContainer>
            {USED_BY_LIST.map(({ logo, label, url }) => (
              <UsedByLogo href={url} src={logo} alt={label} key={url} />
            ))}
          </UsedByContainer>
        </Container>
      </Section>

      <Section>
        <Container>
          <ChevronRight size={50} stroke="#ffe69d" />
          <Heading>Ready to start?</Heading>
          <p>
            Start reading{' '}
            <LinkStyled to="/docs/">Popper's documentation</LinkStyled>!
          </p>
        </Container>
      </Section>

      <Footer>
        <Container>
          <p>© {new Date().getFullYear()} MIT License</p>
        </Container>
      </Footer>
    </MDXProvider>
  );
}

Layout = ({
  children,
  titleType,
  pageTitle,
  pageDescription,
  pageKeywords,
  relativePagePath,
  component,
  tabs,
  logos,
  showMobile,
  ...rest
}) => {
  const is404 = children && children.key === null;
  const [isToastActive, setIsToastActive] = useState(false);
  const [toastTitle, setToastTitle] = useState('');

  function getJsxCode(name) {
    let keys = Object.keys(jsonData).filter((key) =>
      key.includes(pageTitle.toLowerCase())
    );

    const variantName = keys.filter((elt) =>
      elt.includes(name)
    );

    const jsxCode = variantName.length
      ? jsonData[variantName[0]].parameters.storySource
          .source
      : '';
    return jsxCode;
  }

    function getHTMLCode(name) {
      let keys = Object.keys(htmlData).filter((key) =>
        key.includes(pageTitle.toLowerCase())
      );
      
      const variantName = keys.filter((elt) =>
        elt.includes(name)
      );

      const jsxCode = variantName.length
        ? htmlData[variantName[0]].html
        : '';
      return jsxCode;
    }

  function getPropTableData(name) {
    let keys = Object.keys(jsonData).filter((key) =>
      key.includes(pageTitle.toLowerCase())
    );

    const variantName = keys.filter((elt) =>
      elt.includes(name)
    );
    const jsxCode = variantName.length
      ? jsonData[variantName[0]].parameters.argTypes
      : '';
    return jsxCode;
  }

  const Preview = ({ children, name, ...rest }) => {
    return (
      <>
        <div {...rest}>{children}</div>
        <PropsTable
          componentData={getJsxCode(name)}
          showArgsTable={false}
          htmlData={getHTMLCode(name)}
        />
      </>
    );
  };

  const PreviewWithPropTable = ({
    children,
    name,
    ...rest
  }) => {
    return (
      <>
        <div {...rest}>{children}</div>
        <PropsTable
          componentData={getJsxCode(name)}
          propData={getPropTableData(name)}
        />
      </>
    );
  };

  const toggleToast = (name) => {
    setIsToastActive(true);
    setToastTitle(name);
  }

  const Logos = ({ children, logoData, ...rest }) => {
    return (
        <ProductLogos
          logoData={logoData}
          toggleToast={toggleToast}
        />
    );
  };

  const Rectangle = ({ name, ...rest }) => {
    return (
      <div className='rectangle'>{name}</div>
    );
  };

    const Colors = ({ children, colorData, ...rest }) => {
      return (
        <ProductColors
          colorData={colorData}
          toggleToast={toggleToast}
        />
      );
    };

  const DSComponents = {
    ...MDSComponents,
    code: Code,
    Preview: Preview,
    PreviewWithPropTable: PreviewWithPropTable,
    Rules,
    DOs,
    DONTs,
    InlineMessage,
    IconWrapper,
    h1: (props) => <Heading size='xxl' {...props} />,
    h2: (props) => <Heading size='xl' {...props} />,
    h3: (props) => <Heading size='l' {...props} />,
    h4: (props) => <Heading size='m' {...props} />,
    h5: (props) => <Heading size='s' {...props} />,
    ul: List,
    Logos: (props) => <Logos {...props} />,
    Rectangle: (props) => <Rectangle {...props} />,
    Colors: (props) => <Colors {...props} />,
  };
  return (
    <>
      <Meta
        titleType={titleType}
        pageTitle={pageTitle}
        pageDescription={pageDescription}
        pageKeywords={pageKeywords}
      />
      <Header
        leftMenuList={leftMenuList}
        relativePagePath={relativePagePath}
      />
      <Row style={{ height: 'calc(100vh - 48px)' }}>
        <LeftNav
          is404Page={is404}
          relativePagePath={relativePagePath}
          pageTitle={pageTitle}
          showMobile={showMobile}
        />
        <Column className="page-animation page-scroll h-100">
          <Row>
            <Column className="px-12 py-8 min-vh-100" size={9}>
              {!relativePagePath.includes('components') && (
                <Container
                  pageTitle={pageTitle}
                  relativePagePath={relativePagePath}
                  tabs={tabs}
                  pageDescription={pageDescription}
                  logos={logos}
                >
                  <MDXProvider components={DSComponents}>
                    {children}
                  </MDXProvider>
                </Container>
              )}
              {relativePagePath.includes('components') && (
                <ComponentsContainer
                  pageTitle={pageTitle}
                  relativePagePath={relativePagePath}
                  component={component}
                  tabs={tabs}
                  pageDescription={pageDescription}
                >
                  <MDXProvider components={DSComponents}>
                    {children}
                  </MDXProvider>
                </ComponentsContainer>
              )}
            </Column>

            <Column
              size={3}
              className="pb-6 in-page-nav"
            >
              <TableOfContent
                is404Page={is404}
                relativePagePath={relativePagePath}
                pageTitle={pageTitle}
                location={rest.location}
              />
            </Column>
          </Row>
          {isToastActive && (
            <Toast
              appearance='success'
              title={toastTitle}
              className='toast'
              onClose={() => setIsToastActive(false)}
            />
          )}
          <Footer relativePagePath={relativePagePath} />
        </Column>
      </Row>
    </>
  );
}

AnchorTag = ({
  title,
  href,
  references = [],
  withoutLink,
  withoutPopup,
  ...restProps
}) => {
  // same as in gatsby-transformer-markdown-references/src/compute-inbounds.ts#getRef
  const ref = references.find(
    (x) =>
      withPrefix(x.slug) === withPrefix(href) ||
      x.title === title ||
      (x.aliases || []).some((alias) => alias === title) ||
      basename(x.slug) === title
  );

  let content;
  let popupContent;
  let child;

  if (ref) {
    const nestedComponents = {
      a(props) {
        return <AnchorTag {...props} references={references} withoutLink />;
      },
      p(props) {
        return <span {...props} />;
      },
    };
    content =
      ref.title === ref.displayTitle ? (
        restProps.children
      ) : (
        <MDXProvider components={nestedComponents}>
          <MDXRenderer>{ref.mdx}</MDXRenderer>
        </MDXProvider>
      );
    popupContent = (
      <div id={ref.id} className="popover with-markdown">
        {ref.title === ref.displayTitle ? (
          <React.Fragment>
            <MDXProvider components={nestedComponents}>
              <MDXRenderer>{ref.mdx}</MDXRenderer>
            </MDXProvider>
          </React.Fragment>
        ) : (
          <React.Fragment>
            <h5>{ref.displayTitle}</h5>
            <ul>
              <li>
                <MDXProvider components={nestedComponents}>
                  <MDXRenderer>{ref.mdx}</MDXRenderer>
                </MDXProvider>
              </li>
            </ul>
          </React.Fragment>
        )}
        <div className="more-content-blind" />
      </div>
    );
    child = (
      <LinkToStacked {...restProps} to={ref.slug} title={title}>
        {content}
      </LinkToStacked>
    );
  } else {
    content = restProps.children;
    popupContent = <div className="popover no-max-width">{href}</div>;
    // eslint-disable-next-line jsx-a11y/anchor-has-content
    const externalLink = /^(http(s?)):\/\//i.test(href);
    child = (
      <a
        {...restProps}
        target={externalLink ? '_blank' : null}
        // Add noopener and noreferrer for security reasons
        rel={externalLink ? 'noopener noreferrer' : null}
        href={
          !href || (href.indexOf && href.indexOf("#") === 0)
            ? href
            : withPrefix(href)
        }
        title={title}
      />
    );
  }

  if (withoutLink) {
    return <span>{content}</span>;
  }

  if (withoutPopup) {
    return child;
  }

  return (
    <Tippy animation="shift-away" content={popupContent} maxWidth="none">
      {child}
    </Tippy>
  );
}

export default function Post(props) {
  const { data, pageContext } = props
  const post = data.mdx
  const { previous, next, ogImage } = pageContext
  const { imageTop, imageBottom } = post.frontmatter
  const isDraft = post.frontmatter.draft
  const distance = formatDistance(new Date(post.frontmatter.date), new Date(), {
    addSuffix: true,
  })

  return (
    <>
      <Layout imageTop={imageTop} imageBottom={imageBottom}>
        <LayoutContent mx="auto" width="100%">
          <SEO
            canonical={post.slug}
            title={post.frontmatter.title}
            description={post.frontmatter.description || post.excerpt}
            image={ogImage}
          />
          <Grid gap={24}>
            <CenteredGrid
              gridRowGap={3}
              as="header"
              mx="auto"
              width="100%"
              mt={[8, 12, 18]}
            >
              <Text color="text.300">
                <Box
                  as="span"
                  fontWeight="semibold"
                  color="brand.100"
                  textTransform="uppercase"
                >
                  {isDraft && "Draft"} Article
                </Box>
                <Box mx={3} as="span">
                  —
                </Box>
                {post.fields.readingTime.text}
              </Text>
              <Heading
                as="h1"
                mb={2}
                color="text.200"
                fontSize={["3xl", "4xl", "7xl"]}
                lineHeight="110%"
                fontWeight="black"
              >
                {post.frontmatter.title}
              </Heading>
              <Text
                as="h2"
                fontSize={["lg", "xl"]}
                fontWeight="normal"
                color="text.300"
                mb={4}
              >
                {post.frontmatter.description}
              </Text>
              {isDraft && <DraftDisclaimer />}
              <Hr />
              <Flex
                alignItems="flex-start"
                color="text.400"
                justify="space-between"
                flexDirection={{ base: "column", md: "row" }}
              >
                <HStack
                  mb={{ base: 2, md: 0 }}
                  justify="center"
                  textTransform="capitalize"
                  // fontSize="sm"
                  spacing={{ base: 4, md: 6 }}
                  fontWeight="medium"
                >
                  {post.frontmatter.tags.map((tag, i) => (
                    <Text color="brand.100" key={tag}>
                      {tag}
                    </Text>
                  ))}
                </HStack>
                <Flex
                  alignItems={{ base: "flex-start", md: "flex-end" }}
                  flexDirection="column"
                >
                  <Text
                    as="time"
                    dateTime={post.frontmatter.date}
                    color="text.100"
                  >
                    {post.frontmatter.date}
                  </Text>
                  <Text fontSize="sm">{distance}</Text>
                </Flex>
              </Flex>
            </CenteredGrid>
            <CenteredGrid
              className="blog-post centered-grid"
              fontSize="lg"
              lineHeight={{ base: "180%", md: "200%" }}
            >
              <ExContextWrapper>
                <MDXProvider
                  components={{
                    T,
                    ...Chatbox,
                    ...MarkdownComponents,
                    ...MarkdownOverrides,
                    ...postData,
                    Link,
                    Box,
                    Flex,
                    Grid,
                    Button,
                    getImage,
                    Constrain,
                    ImageWrapper,
                    WideMedia,
                    GatsbyImage,
                    StaticImage,
                    maxWidth,
                    Text,
                    Heading,
                    Skeleton,
                    Tag,
                    ChakraImage: Image,
                    Image,
                    Toastable,
                    Hr,
                    a: ({ children, ...props }) => (
                      <Link color="brandSecondary" {...props}>
                        {children}
                      </Link>
                    ),
                    RoughNotation,
                    h6: makeHeader("h6"),
                    h5: makeHeader("h5"),
                    h4: makeHeader("h4", { fonts: ["md", "lg", "xl"] }),
                    h3: makeHeader("h3", { fonts: ["md", "lg", "2xl"] }),
                    h2: makeHeader("h2", { fonts: ["md", "lg", "2xl"], mt: 6 }),
                    h1: makeHeader("h1", {
                      fonts: ["lg", "xl", "4xl"],
                      mt: 8,
                      mb: 8,
                    }),
                    table: ({ children, ...props }) => (
                      <Box overflowX="auto" mb={8}>
                        <Table {...props}>{children}</Table>
                      </Box>
                    ),
                    th: Th,
                    tr: Tr,
                    td: ({ children, ...props }) => (
                      <Td
                        fontSize={["sm", "md", "lg"]}
                        verticalAlign="initial"
                        {...props}
                      >
                        {children}
                      </Td>
                    ),
                    ul: ({ children, ...props }) => (
                      <Box
                        as="ul"
                        listStyleType={sample([
                          "katakana",
                          "hiragana",
                          "simp-chinese-formal",
                          "korean-hanja-formal",
                          "korean-hangul-formal",
                        ])}
                        fontSize={["md", null, "lg"]}
                        mb={8}
                        {...props}
                      >
                        {children}
                      </Box>
                    ),
                    blockquote: ({ children, ...props }) => (
                      <Box
                        as="blockquote"
                        textAlign="center"
                        borderColor="borderSubtle"
                        fontSize={{ base: "lg", lg: "2xl" }}
                        color="text.200"
                        mt={4}
                        mb={8}
                        px={{ base: 8, lg: 24 }}
                        {...props}
                      >
                        {children}
                      </Box>
                    ),
                    p: ({ children, ...props }) => (
                      <Text
                        as="p"
                        fontSize={["md", null, "lg"]}
                        mb={8}
                        {...props}
                      >
                        {children}
                      </Text>
                    ),
                  }}
                >
                  <MDXRenderer>{post.body}</MDXRenderer>
                </MDXProvider>
              </ExContextWrapper>
            </CenteredGrid>
            {!isDraft && (
              <CenteredGrid>
                <Box as="footer">
                  <Grid
                    as="section"
                    gridAutoFlow="row"
                    alignItems="center"
                    justifyContent="center"
                    gridTemplateColumns={["1fr", null, null, "1fr 1fr"]}
                    flexDirection={["row", "column"]}
                    gap={4}
                    m={0}
                    p={0}
                    className="justify-center flex flex-row p-0 m-0 text-sm w-fullgap-4"
                  >
                    <Navigator pos="left" link={previous} />
                    <Navigator pos="right" link={next} />
                  </Grid>
                </Box>
              </CenteredGrid>
            )}
          </Grid>
          <PopupPortal>
            <Popup />
          </PopupPortal>
        </LayoutContent>
      </Layout>
    </>
  )
}

function BlogPostItem(props) {
  const {
    children,
    frontMatter,
    metadata,
    truncated,
    isBlogPostPage = false,
  } = props;
  const {date, permalink, tags} = metadata;
  const {author, title} = frontMatter;

  const authorURL = frontMatter.author_url || frontMatter.authorURL;
  const authorTitle = frontMatter.author_title || frontMatter.authorTitle;
  const authorImageURL =
    frontMatter.author_image_url || frontMatter.authorImageURL;

  const renderPostHeader = () => {
    const TitleHeading = isBlogPostPage ? 'h1' : 'h2';
    const match = date.substring(0, 10).split('-');
    const year = match[0];
    const month = MONTHS[parseInt(match[1], 10) - 1];
    const day = parseInt(match[2], 10);

    return (
      <header>
        <TitleHeading
          className={classnames('margin-bottom--sm', styles.blogPostTitle)}>
          {isBlogPostPage ? title : <Link to={permalink}>{title}</Link>}
        </TitleHeading>
        <div className="margin-bottom--sm">
          <time dateTime={date} className={styles.blogPostDate}>
            {month} {day}, {year}
          </time>
        </div>
        <div className="avatar margin-bottom--md">
          {authorImageURL && (
            <a
              className="avatar__photo-link"
              href={authorURL}
              target="_blank"
              rel="noreferrer noopener">
              <img
                className="avatar__photo"
                src={authorImageURL}
                alt={author}
              />
            </a>
          )}
          <div className="avatar__intro">
            {author && (
              <>
                <h4 className="avatar__name">
                  <a href={authorURL} target="_blank" rel="noreferrer noopener">
                    {author}
                  </a>
                </h4>
                <small className="avatar__subtitle">{authorTitle}</small>
              </>
            )}
          </div>
        </div>
      </header>
    );
  };

  return (
    <article className={!isBlogPostPage ? 'margin-bottom--xl' : undefined}>
      {renderPostHeader()}
      <section className="markdown">
        <MDXProvider components={MDXComponents}>{children}</MDXProvider>
      </section>
      {(tags.length > 0 || truncated) && (
        <footer className="row margin-vert--lg">
          {tags.length > 0 && (
            <div className="col">
              <strong>Tags:</strong>
              {tags.map(({label, permalink: tagPermalink}) => (
                <Link
                  key={tagPermalink}
                  className="margin-horiz--sm"
                  to={tagPermalink}>
                  {label}
                </Link>
              ))}
            </div>
          )}
          {truncated && (
            <div className="col text--right">
              <Link
                to={metadata.permalink}
                aria-label={`Read more about ${title}`}>
                <strong>Read More</strong>
              </Link>
            </div>
          )}
        </footer>
      )}
    </article>
  );
}