theme-ui#Styled JavaScript Examples

getAsComponent = (type, shortCodeComponents) => {
  if ((typeof (type) === 'string') || (type instanceof String)) {
    if (type in Styled) {
      return Styled[type];
    }

    if (type in shortCodeComponents) {
      return shortCodeComponents[type];
    }
  }

  return type;
}

CodeHighlight = ({children, language, className: outerClassName}) => {
  const theme = useConfig().themeConfig.prism.light;
  
  return (
    <Highlight
      {...defaultProps}
      code={children.trim()}
      language={language}
      theme={theme}
    >
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
        <Styled.pre
          className={`${outerClassName || ''} ${className}`}
          style={{ ...style, overflowX: 'auto' }}
          data-testid="code"
        >
          {tokens.map((line, i) => (
            <div {...getLineProps({ line, key: i })}>
              {line.map((token, key) => (
                <span
                  {...getTokenProps({ token, key })}
                  sx={{ display: 'inline-block' }}
                />
              ))}
            </div>
          ))}
        </Styled.pre>
      )}
    </Highlight>
  );
}

Tile = ({ title, slug, price, image }) => {
  const data = useStaticQuery(graphql`
    query {
      placeholderImage: file(relativePath: { eq: "placeholder/shoe.png" }) {
        childImageSharp {
          fluid(maxWidth: 600) {
            ...GatsbyImageSharpFluid_withWebp
          }
        }
      }
    }
  `)

  const imageSrc = image ? image : data.placeholderImage.childImageSharp.fluid

  return (
    <Card
      sx={{
        maxWidth: 290,
        p: 3,
        display: "flex",
        flexDirection: "column",
      }}
    >
      <div sx={{ position: "relative" }}>
        <Img fluid={imageSrc} />
      </div>
      <Styled.h2 sx={{ mt: 4, mb: 0, fontSize: 3 }}>{title}</Styled.h2>
      <Text sx={{ fontSize: 4, mb: 2 }}>${price.toFixed(2)}</Text>
      <Link url={`/product/${slug}`} isButton>
        View
      </Link>
    </Card>
  )
}

ExampleLink = ({children, text, link, codeLink}) => (
  <div sx={{pb: [3, 4, 5]}}>
    <Styled.p>
      <Styled.a
        href={link}
        target="_blank"
      >
        {text}
      </Styled.a>
      &nbsp;&nbsp;&nbsp;
      {codeLink &&
        <Styled.a
          href={codeLink}
          target="_blank"
          sx={{
            fontSize: 2,
            color: 'rgb(249, 172, 0)',
            textTransform: 'lowercase',
            fontVariant: 'small-caps',
          }}
        >
          (Code)
        </Styled.a>
      }
    </Styled.p>
    <div sx={{px: [1, 2, 3]}}>
      {children}
    </div>
  </div>
)

ObjectProps = ({of: object, include, exclude, transform, pre='', post=''}) => {
  const {themeConfig} = useConfig();
  const filter = filterProperties(include, exclude);
  const code = (pre + stringifyObject(object, {indent: '  ', filter, transform}) + post).trim();

  return (
    <Highlight {...defaultProps} theme={themeConfig.prism.light} code={code} language='js'>
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
        <Styled.pre className={className} style={style}>
          {tokens.map((line, i) => (
            <div {...getLineProps({ line, key: i })}>
              {line.map((token, key) => (
                <span {...getTokenProps({ token, key })} />
              ))}
            </div>
          ))}
        </Styled.pre>
      )}
    </Highlight>
  );
}

export default function Navigation() {
  const data = useStaticQuery(
    graphql`
      query SiteMetaData {
        site {
          siteMetadata {
            menuLinks {
              name
              url
            }
          }
        }
      }
    `,
  );
  const navLinks = data.site.siteMetadata.menuLinks;

  return (
    <nav>
      <ul>
        {navLinks.map((link) => (
          <li key={link.name}>
            <Styled.a as={Link} to={link.url}>
              {link.name}
            </Styled.a>
          </li>
        ))}
      </ul>
    </nav>
  );
}

Caption = ({name, type}) => {
  return (
    <div style={{textAlign: 'center'}}>
      <Styled.p
        sx={{
          fontFamily: 'light',
          fontSize: [2, 3, 4],
          textAlign: 'center',
          mt: 0,
        }}>
        {type === 'articles' ? (
          <Styled.em>
            Dive into many interesting articles related to Web Development,
            Software Tools, Tips&nbsp;&&nbsp;Tricks,&nbsp;etc.
          </Styled.em>
        ) : (
          <Styled.em>
            The articles related to <strong>{name}</strong> {type}.
          </Styled.em>
        )}
      </Styled.p>
    </div>
  )
}

Theme = ({children}) => {
  const config = useConfig();
  return (
    <ThemeProvider theme={config.themeConfig}>
      <ComponentsProvider components={componentsMap}>
        <Styled.root>{children}</Styled.root>
      </ComponentsProvider>
    </ThemeProvider>
  );
}

Share = ({articleURL, articleName, hideShareText = false}) => {
  const URL = siteUrl(articleURL)
  const sharePlatforms = [
    {
      name: 'Facebook',
      url: `https://www.facebook.com/sharer/sharer.php?u=${URL}`,
    },
    {
      name: 'Twitter',
      url: `https://twitter.com/intent/tweet?text=${articleName}&url=${URL}`,
    },
    {
      name: 'LinkedIn',
      url: `http://www.linkedin.com/shareArticle?url=${URL}`,
    },
    {
      name: 'WhatsApp',
      url: `https://wa.me/?text=${encodeURIComponent(`${articleName} ${URL}`)}`,
    },
  ]

  return (
    <div sx={{mt: hideShareText ? 2 : 4}}>
      {hideShareText ? null : (
        <Styled.h3 sx={{textAlign: 'center'}}>
          Share
          <FiShare2
            sx={{mx: 2, mb: -1}}
            title='Share this article on different platforms.'
          />
        </Styled.h3>
      )}
      <div sx={flexbox}>
        {sharePlatforms.map((platform, index) => {
          return (
            <Icon
              name={platform.name}
              url={platform.url}
              style={{
                color: 'secondary',
                fontSize: hideShareText ? [3] : [3, 4, 5],
                mx: 3,
                my: 1,
              }}
              key={index}
            />
          )
        })}
      </div>
    </div>
  )
}

Layout = ({ children, hasHero }) => {
  const {
    site: {
      siteMetadata: { title, description },
    },
  } = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
          description
        }
      }
    }
  `)

  return (
    <Styled.root>
      <Header siteTitle={title} />
      {hasHero ? <Hero title={title} description={description} /> : null}
      <div
        sx={{
          margin: `0 auto`,
          maxWidth: 960,
          padding: 3,
          paddingTop: 0,
        }}
      >
        <main>{children}</main>
        <footer sx={{ mt: 6 }}>
          <Styled.p>
            © {new Date().getFullYear()} {title}, Built with
            {` `}
            <Styled.a href="https://www.gatsbyjs.org">Gatsby</Styled.a>
            {` and `}
            <Styled.a href="https://www.shopify.ca">Shopify</Styled.a>.
          </Styled.p>
        </footer>
      </div>
    </Styled.root>
  )
}

Header = ({ siteTitle }) => {
  const count = useCartCount()

  const countMarkup = (
    <span
      sx={{
        display: "inline-block",
        background: "white",
        color: "black",
        height: "20px",
        lineHeight: "20px",
        width: "20px",
        fontSize: "0.8em",
        borderRadius: "10px",
        ml: 2,
        top: "-2px",
        position: "relative",
        textAlign: "center",
      }}
    >
      {count}
    </span>
  )

  return (
    <Styled.div as="header">
      <div
        sx={{
          margin: `0 auto`,
          maxWidth: 960,
          py: 4,
          px: 3,
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <Styled.h1 sx={{ margin: 0, fontSize: 20, fontWeight: "bold" }}>
          <Link
            url="/"
            sx={{
              color: "black",
              letterSpacing: -0.5,
              textDecoration: `none`,
              paddingLeft: "20px",
              "&:hover": {
                textDecoration: "underline",
              },
              "&::before": {
                content: '"▼"',
                position: "absolute",
                marginLeft: "-20px",
              },
            }}
          >
            {siteTitle}
          </Link>
        </Styled.h1>
        <Link url="/cart" isButton>
          Cart
          {countMarkup}
        </Link>
      </div>
    </Styled.div>
  )
}

MDXPTitleLayout = ({subtitle = ''}) => {
  const step = useStep(2);
  const styles = step === 0 ?
    {
      '& .letter': {
        fill: t => t.colors.MDXPGray1,
        '&.hide': {
          fillOpacity: 0
        }
      },
      '& .arrow-up': {
        fill: t => t.colors.MDXPYellow,
        fillOpacity: 1
      },
      '& .arrow-down': {
        fill: t => t.colors.MDXPYellow,
        fillOpacity: 1
      },
      '& h2': {
        opacity: 0
      }
    } :
    {
      '& .letter': {
        fill: t => t.colors.MDXPGray1,
        '&.hide': {
          fillOpacity: 1,
          transition: 'all 0.5s ease-in 1s'
        }
      },
      '& .arrow-up': {
        fill: t => t.colors.MDXPYellow,
        fillOpacity: 0,
        transform: 'translate(0, -150%)',
        transition: 'all 0.5s cubic-bezier(0.9,-0.45, 1, 1)'
      },
      '& .arrow-down': {
        fill: t => t.colors.MDXPYellow,
        fillOpacity: 0,
        transform: 'translate(0, 150%)',
        transition: 'all 0.5s cubic-bezier(0.9,-0.45, 1, 1)'
      },
      '& h2': {
        opacity: 1,
        transition: 'all 0.5s ease-in-out 1s'
      }
    };

  return (
    <BlankLayout
      sx={{
        variant: 'gradient.light',
        '& svg': {
          width: '60%',
          height: 'auto'
        },
        ...styles
      }}
    >
      <Place top="20%" sx={{width: '100%', textAlign: 'center'}}>
        <Logo />
        <Styled.h2 sx={{color: 'MDXPYellow'}}>{subtitle}</Styled.h2>
      </Place>
      <AutoStepper time={1500} />
    </BlankLayout>
  );
}

export default function Article({uid, tags, article, author, articles}) {
  const {asPath: URL} = useRouter()
  const [showComments, setShowComments] = useState(false)
  const [showShareIcons, setShowShareIcons] = useState(false)
  const toggleShareIcons = () => {
    setShowShareIcons(!showShareIcons)
  }
  const toggleComments = () => {
    setShowComments(!showComments)
  }
  return (
    <Fragment>
      <Snakke
        color='#484848'
        top='0px'
        height='5px'
        opacity='1'
        zIndex='10'
        shadow={false}
      />
      <Layout
        page='Article'
        title={RichText.asText(article.title)}
        description={RichText.asText(article.excerpt)}
        image={article.article_image.url}
        pathUrl={URL}>
        <Styled.h1 sx={{textAlign: 'center', mb: 3}}>
          {RichText.asText(article.title)}
        </Styled.h1>
        <div
          sx={{
            fontWeight: 'bold',
            my: 0,
            pt: 0,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            position: 'relative',
          }}>
          <Styled.em
            title={formatDate(article.created)}
            aria-label={formatDate(article.created)}>
            {formatDate(article.created)}
          </Styled.em>
          <Styled.em
            sx={{mx: 4}}
            title='Time to read the article'
            aria-label='Time to read the article'>
            <FiClock style={{marginBottom: '-0.15rem'}} />
            &nbsp;{article.read_time}&nbsp;min read
          </Styled.em>
          <p sx={{m: 0}}>
            <FiShare2
              sx={{
                fontSize: [3],
                mx: 2,
                mb: -1,
                ':hover': {cursor: 'pointer'},
              }}
              title={`Share ${RichText.asText(
                article.title
              )} article on different platforms.`}
              onMouseEnter={toggleShareIcons}
              onClick={toggleShareIcons}
            />
            {/* Share */}
            {showShareIcons && (
              <div
                sx={{
                  position: 'absolute',
                  mt: '-2rem',
                  ml: '2rem',
                  '@media screen and (max-width: 40rem)': {
                    mt: '-2rem',
                    ml: '2.5rem',
                  },
                }}
                onMouseLeave={toggleShareIcons}>
                <Share
                  articleURL={URL}
                  articleName={RichText.asText(article.title)}
                  hideShareText={true}
                />
              </div>
            )}
          </p>
        </div>

        {/* categories */}
        <div
          sx={{
            display: 'flex',
            flexFlow: 'row wrap',
            justifyContent: 'center',
            alignItems: 'center',
            mt: 2,
          }}>
          {article.categories.map(({slug}, index) => {
            return (
              slug && (
                <Chip name={slug} slug={slug} type='category' key={index} />
              )
            )
          })}
        </div>

        <Styled.p
          sx={{
            my: 4,
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          {RichText.asText(article.excerpt)}
        </Styled.p>

        <Banner image={article.article_image} />

        {/* slices */}
        <SliceMachine slices={article.body} />

        <Styled.em sx={{color: 'gray'}}>
          This article was last updated on {formatDate(article.modified)}
        </Styled.em>

        {/* tags */}
        <div
          sx={{
            display: 'flex',
            flexFlow: 'row wrap',
            justifyContent: 'flex-start',
            alignItems: 'center',
            my: 2,
          }}>
          {tags.map((tag, index) => {
            return <Chip name={tag} slug={tag} type='tag' key={index} />
          })}
        </div>

        {/* Share */}
        <Share articleURL={URL} articleName={RichText.asText(article.title)} />

        {author && <Author author={author} />}

        <RelatedArticles
          uid={uid}
          categories={article.categories}
          tags={tags}
          related={articles}
        />

        <p style={{textAlign: 'center'}}>
          <button
            onClick={toggleComments}
            sx={{
              margin: '1rem auto 0.5rem auto',
              py: 2,
              px: 4,
              color: 'text',
              backgroundColor: 'shade2',
              fontFamily: 'light',
              fontSize: [1, 2],
              textTransform: 'uppercase',
              letterSpacing: '2px',
              border: 'none',
              borderRadius: '2rem',
              cursor: 'pointer',
              '&:hover': {
                color: 'accent',
                backgroundColor: 'shade1',
              },
            }}>
            {showComments ? 'Hide' : 'Show'} Comments
          </button>
        </p>

        {/* Disqus comments */}
        {showComments ? (
          <div sx={{mt: 4}}>
            <DisqusComments
              slug={uid}
              title={RichText.asText(article.title)}
              pathname={URL}
            />
          </div>
        ) : null}
      </Layout>
    </Fragment>
  )
}

render() {
        return (
          <Styled.root>
            <div className="timelineContainer">
                <Timeline lineColor={'#ddd'}>
                  <TimelineItem
                    key="001"
                    dateText="1: Pre PR"
                    dateInnerStyle={{ background: '#20A4F3' }}
                    style={{ color: '#20A4F3' }}>
                    <Styled.h2>Before Developer submits a PR</Styled.h2>
                    <Styled.h3>Actor(s)</Styled.h3>
                    <Styled.ul className="timelineKey">
                      <li style={{backgroundColor: '#20A4F3'}}>Developer</li>
                    </Styled.ul>
                    <Styled.h3>Step(s)</Styled.h3>
                    <Styled.p>
                      <img src="https://github.com/newrelic/nr1-catalog/blob/master/docs/docs/images/screenshot01.png?raw=true" style={{width:'95%'}} />
                    </Styled.p>
                    <Styled.ul>
                      <li><strong>Developer</strong> <Styled.a href="https://help.github.com/en/github/getting-started-with-github/fork-a-repo">forks</Styled.a> this <strong><Styled.a href="https://github.com/newrelic/nr1-catalog">nr1-catalog</Styled.a></strong> repository</li>
                      <li><strong>Developer</strong> reviews <Styled.a href="#">documentation</Styled.a> on this website</li>
                      <li><strong>Developer</strong> preps their nerdpack based on the PR checklist to either <Styled.a href="add-checklist">add</Styled.a> or <Styled.a href="update-checklist">update</Styled.a> code</li>
                      <li><strong>Developer</strong> adds that repository as a <Styled.a href="https://git-scm.com/book/en/v2/Git-Tools-Submodules">git submodule</Styled.a> under the <strong>apps</strong> directory in the following manner:</li>
                    </Styled.ul>
                    <Styled.i>
                      Note: Before executing a <strong>git submodule add</strong> to include your Nerdpack to your fork of the nr1-catalog, you must ensure that your Nerdpack is in a publicly accessible repository. If that's not the case, you'll need to contact <a href="https://github.com/newrelic/nr1-catalog/issues/new?assignees=&labels=question&template=question.md&title=">nr1-catalog Maintainers</a> to request special assistance.
                    </Styled.i>
                    <Styled.p>
                      <Styled.h4>If adding a submodule</Styled.h4>
                    <Styled.pre>
                      <code>
                        # assumed state: you've forked newrelic/nr1-catalog<br/>
                        # assumed state: git clone https://github.com/[YOUR_GITHUB_HANDLE]/nr1-catalog.git<br/>
                        cd nr1-catalog/apps<br/>
                        git submodule add [YOUR REPO URL]<br/>
                        # example: git submodule add https://github.com/newrelic/nr1-browser-analyzer.git<br/>
                        git commit -a -m "feat: Adding [YOUR REPO NAME] to nr1-catalog."<br/>
                        git push
                      </code>
                    </Styled.pre>
                    </Styled.p>
                    <Styled.p><em>Note: By convention, you must use the <strong>https</strong> URL for the git repository.</em></Styled.p>
                    <Styled.p>
                      <Styled.h4>If updating a submodule to the latest commit</Styled.h4>
                    <Styled.pre>
                      <code>
                        # assumed state: you've forked newrelic/nr1-catalog<br/>
                        # assumed state: git clone https://github.com/[YOUR_GITHUB_HANDLE]/nr1-catalog.git<br/>
                        cd nr1-catalog/apps/[YOUR REPO URL]<br/>
                        git pull<br/>
                        cd ..<br/>
                        git commit -a -m "feat: Updating [YOUR REPO NAME] to v. [YOUR REPO VERSION]."<br/>
                        git push
                      </code>
                    </Styled.pre>
                    </Styled.p>
                    <Styled.h3>Outcomes</Styled.h3>
                    <Styled.ul>
                      <li>
                      Nerdpack repository is prepared for a Pull Request to the <strong>newrelic/nr1-catalog</strong> repository.
                      </li>
                    </Styled.ul>
                    <Styled.h3>Next Step(s)</Styled.h3>
                    <Styled.ul>
                      <li>Submitting a Pull Request to the <strong>newrelic/nr1-catalog</strong> repository</li>
                    </Styled.ul>
                  </TimelineItem>
                  <TimelineItem
                    key="002"
                    dateText="2: Submit PR"
                    dateInnerStyle={{ background: '#20A4F3' }}
                    style={{ color: '#20A4F3' }}>
                    <Styled.h2>Developer submits a PR</Styled.h2>
                    <Styled.h3>Actor(s)</Styled.h3>
                    <Styled.ul className="timelineKey">
                      <li style={{backgroundColor: '#20A4F3'}}>Developer</li>
                    </Styled.ul>
                    <Styled.h3>Step(s)</Styled.h3>
                    <Styled.p>
                      <img src="https://help.github.com/assets/images/help/pull_requests/pull-request-start-review-button.png" style={{maxWidth:'50%'}} />
                    </Styled.p>
                    <Styled.p>
                    In this phase, the <strong>Developer</strong> <Styled.a href="https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request-from-a-fork">submits a pull request</Styled.a> from <em>their</em> forked instance of the <strong>nr1-catalog</strong> to <strong>newrelic/nr1-catalog</strong> repository.
                    </Styled.p>
                    <Styled.h3>Outcomes</Styled.h3>
                    <Styled.ul>
                      <li>PR is structurally verified via <Styled.a href="https://github.com/newrelic/nr1-catalog/tree/master/.github/workflows">automation</Styled.a> in <strong>newrelic/nr1-catalog</strong> </li>
                      <li>Nerdpack is ready for the <strong>Verify</strong> phase</li>
                      <li><strong>Developer</strong> can track the status and queue depth of their Pull Request in GitHub</li>
                    </Styled.ul>
                    <Styled.h3>Next Step(s)</Styled.h3>
                    <Styled.ul>
                      <li><strong>Maintainers</strong> and <strong>Reviewers</strong> execute a multi-phased review of the Nerdpack</li>
                    </Styled.ul>
                  </TimelineItem>
                  <TimelineItem
                    key="003"
                    dateText="3: Verify"
                    dateInnerStyle={{ background: '#3357B2' }}
                    style={{ color: '#3357B2' }}>
                    <Styled.h2>Verify the Nerdpack</Styled.h2>
                    <Styled.h3>Actor(s)</Styled.h3>
                    <Styled.ul className="timelineKey">
                      <li style={{backgroundColor: '#20A4F3'}}>Developer</li>
                      <li style={{backgroundColor: '#F44708'}}>Reviewer</li>
                      <li style={{backgroundColor: '#3357B2'}}>Maintainer</li>
                    </Styled.ul>
                    <Styled.h3>Step(s)</Styled.h3>
                    <Styled.p>
                      <img src="https://help.github.com/assets/images/help/pull_requests/pull-request-review-statuses.png" style={{maxWidth:'95%'}} />
                    </Styled.p>

                    <Styled.p>Based on the level of change (new Nerdpacks require more verification), <strong>Maintainers</strong> shepherd the submitted nerdpack (submitted to the <strong>newrelic/nr1-catalog</strong> repository as a <em>git submodule</em>) through a number of standards set by expert <strong>Reviewers</strong>. This phase can take hours or days, depending on the size of the Nerdpack and level of change.
                    </Styled.p>
                    <Styled.p>Verification covers the following
                      <Styled.ul>
                        <li>Security verification</li>
                        <li>Code verification</li>
                        <li>Design verification</li>
                        <li>Documentation verification</li>
                      </Styled.ul>
                    </Styled.p>
                    <Styled.p>In each phase, remedian may be requested and/or required of the <strong>Developer</strong> by the <strong>Reviewer(s)</strong>, as communicated through the GitHub Pull Request.</Styled.p>
                    <Styled.h3>Outcomes</Styled.h3>
                    <Styled.ul>
                      <li>Pull Request is rejected and closed</li>
                      <li>Pull Request is ready for <strong>Approval</strong> and merge to master</li>
                    </Styled.ul>
                  </TimelineItem>
                  <TimelineItem
                    key="004"
                    dateText="4: Approval"
                    dateInnerStyle={{ background: '#FAA613' }}
                    style={{ color: '#FAA613' }}>
                    <Styled.h2>Final Approval of the Nerdpack</Styled.h2>
                    <Styled.h3>Stakeholders</Styled.h3>
                    <Styled.ul className="timelineKey">
                      <li style={{backgroundColor: '#FAA613'}}>Approver</li>
                      <li style={{backgroundColor: '#3357B2'}}>Maintainer</li>
                    </Styled.ul>
                    <Styled.h3>Step(s)</Styled.h3>
                    <Styled.p>
                      <img src="https://i.stack.imgur.com/0WXlq.gif" style={{maxWidth:'95%'}} />
                    </Styled.p>
                    <Styled.ul>
                      <li><strong>Maintainer</strong> requests via GitHub Pull Request Review features for <strong>Approver</strong> to provide official sign off</li>
                      <li><strong>Approver</strong> indicates approval via GitHub Pull Request Review features approval for deployment</li>
                    </Styled.ul>
                    <Styled.h3>Outcomes</Styled.h3>
                    <Styled.ul>
                      <li>Approved, accepted Pull Request</li>
                    </Styled.ul>
                  </TimelineItem>
                  <TimelineItem
                    key="005"
                    dateText="5: Deployment"
                    dateInnerStyle={{ background: '#3357B2' }}
                    style={{ color: '#3357B2' }}>
                    <Styled.h2>Deployment to the New Relic One Catalog</Styled.h2>
                    <Styled.h3>Actor(s)</Styled.h3>
                    <Styled.ul className="timelineKey">
                      <li style={{backgroundColor: '#3357B2'}}>Maintainer</li>
                    </Styled.ul>
                    <Styled.h3>Step(s)</Styled.h3>
                    <Styled.p>
                      <img src="https://i.stack.imgur.com/lnBI8.png" style={{ width: '95%'}} />
                    </Styled.p>
                    <Styled.p>Once approved, the <strong>Maintainer</strong> will merge the nerdpack (attached as a git submodule) to the master branch of <strong>newrelic/nr1-catalog</strong>, and automation will perform the following:
                    <Styled.ul>
                      <li>Build the application</li>
                      <li>Assign/retrieve the application's global catalog uuid</li>
                      <li>Publish the application to New Relic One</li>
                      <li>Update the New Relic One Catalog service with the application's metadata</li>
                    </Styled.ul>
                    </Styled.p>
                  </TimelineItem>
                </Timeline>

            </div>
            </Styled.root>

        )
    }

Header = () => {
  const {theme, colorMode, setColorMode} = useThemeUI()

  return (
    <Headroom disableInlineStyles upTolerance={10} downTolerance={10}>
      <header style={{background: `${theme.colors.muted}`}} className='header'>
        <div className='header-content'>
          <div>
            <Styled.h1 style={{margin: '0'}}>
              <NextLink href='/' passHref>
                <Styled.a
                  style={{
                    textDecoration: 'none',
                    fontFamily: 'Damion',
                    letterSpacing: '0.15rem',
                  }}
                  onClick={() =>
                    trackGAEvent('logo', `clicked on site logo`, 'link click')
                  }
                  rel='noreferrer noopener'>
                  Blog
                </Styled.a>
              </NextLink>
            </Styled.h1>
          </div>
          <div className='header-links'>
            {/* <Styled.h2 style={{ margin: "0 1rem" }}>
              <Styled.a as={Link} to="/">
                Tags
              </Styled.a>
            </Styled.h2> */}
            {/* <p>
              <GoSearch
                title="Search"
                style={{
                  fontSize: "1.2rem",
                  verticalAlign: "middle",
                  marginTop: "0.2rem",
                }}
              />
            </p> */}
            <p>
              {colorMode === 'light' ? (
                <span
                  title='Switch to Dark Mode'
                  aria-label='Switch to Dark Mode'>
                  <FiSun
                    className='theme-icon'
                    onClick={() => {
                      setColorMode('dark')
                      trackGAEvent(
                        'toggle theme',
                        `enabled dark theme`,
                        'icon click'
                      )
                    }}
                  />
                </span>
              ) : (
                <span
                  title='Switch to Light Mode'
                  aria-label='Switch to Light Mode'>
                  <FiMoon
                    className='theme-icon'
                    onClick={() => {
                      setColorMode('light')
                      trackGAEvent(
                        'toggle theme',
                        `enabled light theme`,
                        'icon click'
                      )
                    }}
                  />
                </span>
              )}
            </p>
          </div>
        </div>
      </header>
    </Headroom>
  )
}

MDXPCodeHighlight = ({children}) => {
  const theme = useConfig().themeConfig.prism.light;
  const [showState, setShowState] = useState(false);

  const show = () => {
    document.prevScroll = document.scrollingElement.scrollTop;
    document.body.style.overflow = 'hidden';
    document.body.style.position = 'fixed';
    document.body.style.top = `-${document.prevScroll}px`;
    document.body.style.width = '100%';

    window.location.hash = '';
    setShowState(true);
  };
  const hide = () => {
    setShowState(false);

    document.body.style.removeProperty('overflow');
    document.body.style.removeProperty('position');
    document.body.style.removeProperty('top');
    document.body.style.removeProperty('width');
    window.scrollTo(0, document.prevScroll);
  };

  return (
    <React.Fragment>
      <Highlight
        {...defaultProps}
        code={children.trim()}
        language='md'
        theme={theme}
      >
        {({ className, style, tokens, getLineProps, getTokenProps }) => (
          <Styled.pre
            className={`language-md ${className}`}
            style={{ ...style, position: 'relative', overflowX: 'auto' }}
            data-testid="code"
          >
            <span
              sx={{
                fontSize: 1,
                position: 'absolute',
                top: '10px',
                right: '10px',
                color: 'rgb(249, 172, 0)',
                textTransform: 'uppercase',
                letterSpacing: 'caps',
                cursor: 'pointer',
                '&:hover': {
                  top: '11px',
                  right: '11px',
                  fontWeight: 'bold'
                },
                '&:active': {
                  top: '11px',
                  right: '11px',
                  fontWeight: 'bold'
                },
                '@media screen and (max-width: 920px)': {
                  display: 'none'
                }
              }}
              onClick={show}
            >
              Show
            </span>
            {tokens.map((line, i) => (
              <div {...getLineProps({ line, key: i })}>
                {line.map((token, key) => (
                  <span
                    {...getTokenProps({ token, key })}
                    sx={{ display: 'inline-block' }}
                  />
                ))}
              </div>
            ))}
          </Styled.pre>
        )}
      </Highlight>
      <MDXPDemo code={children} onOuterClick={hide} show={showState} />
    </React.Fragment>
  );
}

CartPage = () => {
  const {
    allShopifyProductVariant: { nodes: variants },
    allShopifyProduct: { nodes: products },
  } = useStaticQuery(graphql`
    query {
      allShopifyProductVariant {
        nodes {
          shopifyId
          image {
            localFile {
              childImageSharp {
                fluid(maxWidth: 120) {
                  ...GatsbyImageSharpFluid_withWebp
                }
              }
            }
          }
        }
      }
      allShopifyProduct {
        nodes {
          handle
          variants {
            shopifyId
          }
        }
      }
    }
  `)

  const lineItems = useCartItems()
  const { tax, total } = useCartTotals()
  const removeFromCart = useRemoveItemFromCart()
  const checkout = useCheckout()
  const addItemToCart = useAddItemToCart()

  const betterProductHandles = products.map(({ handle, variants }) => {
    const newVariants = variants.map(variant => variant.shopifyId)
    return {
      variants: newVariants,
      handle,
    }
  })

  function getHandleForVariant(variantId) {
    const selectedProduct = betterProductHandles.find(product => {
      return product.variants.includes(variantId)
    })

    return selectedProduct ? selectedProduct.handle : null
  }

  function getImageFluidForVariant(variantId) {
    const selectedVariant = variants.find(variant => {
      return variant.shopifyId === variantId
    })

    if (selectedVariant) {
      return selectedVariant.image.localFile.childImageSharp.fluid
    }
    return null
  }

  const LineItem = ({ item }) => (
    <div
      sx={{
        display: "grid",
        gridGap: "15px",
        gridTemplateColumns: "120px 2fr 80px 80px",
        alignItems: "center",
      }}
    >
      <div>
        <div sx={{ padding: 1, border: "1px solid gray" }}>
          <Img fluid={getImageFluidForVariant(item.variant.id)} />
        </div>
      </div>
      <div>
        <Link
          url={`/product/${getHandleForVariant(item.variant.id)}`}
          sx={{ fontSize: 3, m: 0, fontWeight: 700 }}
        >
          {item.title}
        </Link>
        <Styled.ul sx={{ mt: 2, mb: 0, padding: 0, listStyle: "none" }}>
          {item.variant.selectedOptions.map(({ name, value }) => (
            <li key={name}>
              <strong>{name}: </strong>
              {value}
            </li>
          ))}
          <li key="quantity">
            <strong>Quantity: </strong>
            {item.quantity}
          </li>
        </Styled.ul>
      </div>
      <Button variant="link" onClick={() => removeFromCart(item.id)}>
        Delete
      </Button>
      <Text
        sx={{
          fontSize: 4,
          fontWeight: 700,
          marginLeft: "auto",
        }}
      >
        ${Number(item.variant.priceV2.amount).toFixed(2)}
      </Text>
    </div>
  )

  const emptyCart = (
    <Layout>
      <SEO title="Cart" />
      <Styled.h1>Cart</Styled.h1>
      <Styled.p>Your shopping cart is empty.</Styled.p>
      <Button
        sx={{ mt: 4 }}
        onClick={() =>
          addItemToCart(
            variants[Math.floor(Math.random() * (variants.length - 1))]
              .shopifyId,
            1
          )
        }
      >
        <span role="img" aria-label="Dice Emoji">
          ?
        </span>{" "}
        Random item plz
      </Button>
    </Layout>
  )

  return lineItems.length < 1 ? (
    emptyCart
  ) : (
    <Layout>
      <SEO title="Cart" />
      <Styled.h1>Cart</Styled.h1>
      {lineItems.map(item => (
        <React.Fragment key={item.id}>
          <LineItem key={item.id} item={item} />
          <Divider sx={{ my: 3 }} />
        </React.Fragment>
      ))}
      <div sx={{ display: "flex" }}>
        <Card sx={{ marginLeft: "auto", minWidth: "10rem", p: 4 }}>
          <Styled.h3 sx={{ mt: 0, mb: 3 }}>Cart Summary</Styled.h3>
          <Divider />

          <Grid gap={1} columns={2} sx={{ my: 3 }}>
            <Text>Subtotal:</Text>
            <Text sx={{ marginLeft: "auto" }}>{total}</Text>
            <Text>Shipping:</Text>
            <Text sx={{ marginLeft: "auto" }}> - </Text>
            <Text>Tax: </Text>
            <Text sx={{ marginLeft: "auto" }}>{tax}</Text>
          </Grid>

          <Divider />
          <Grid gap={1} columns={2}>
            <Text variant="bold">Estimated Total:</Text>
            <Text variant="bold" sx={{ marginLeft: "auto" }}>
              {total}
            </Text>
          </Grid>
          <Button sx={{ mt: 4, width: "100%" }} onClick={checkout}>
            Checkout
          </Button>
        </Card>
      </div>
    </Layout>
  )
}

ProductPage = () => {
  const {
    allFile: { nodes: productImages },
  } = useStaticQuery(graphql`
    query placeholderProductPage {
      allFile(filter: { relativeDirectory: { eq: "placeholder" } }) {
        nodes {
          id
          childImageSharp {
            fluid(maxWidth: 445) {
              ...GatsbyImageSharpFluid_withWebp
            }
          }
        }
      }
    }
  `)

  if (productImages.length < 1) {
    throw new Error("Must have product images!")
  }

  const [image, setImage] = useState(productImages[0])
  const colors = ["Blue", "Black", "Green"]
  const sizes = ["Small", "Medium", "Large"]

  const Thumbnail = ({ image }) => {
    return (
      <div
        sx={{
          cursor: "pointer",
          border: "1px solid gray",
          padding: 1,
        }}
      >
        <Img
          key={image.id}
          fluid={image.childImageSharp.fluid}
          onClick={() => setImage(image)}
        />
      </div>
    )
  }

  const gallery = (
    <div>
      <div
        sx={{
          border: "1px solid gray",
          padding: 2,
          marginBottom: 2,
        }}
      >
        <Img fluid={image.childImageSharp.fluid} />
      </div>
      <Grid gap={2} columns={6}>
        {productImages.map(productImage => (
          <Thumbnail key={productImage.id} image={productImage} />
        ))}
      </Grid>
    </div>
  )

  const description = (
    <div>
      <Styled.p>
        This is where the product description goes. It's where you can learn
        more about the product.
      </Styled.p>
      <Styled.ul>
        <li>There's a hat</li>
        <li>There's a pair of glasses</li>
        <li>There's a shoe</li>
        <li>They're all drawings, which makes them pretty hard to wear</li>
      </Styled.ul>
    </div>
  )

  return (
    <Layout>
      <SEO title="Product Name" />
      <Grid gap={4} columns={2}>
        {gallery}
        <div sx={{ display: "flex", flexDirection: "column" }}>
          <Styled.h1 sx={{ mt: 0, mb: 2 }}>Product Name</Styled.h1>
          {description}
          <div>
            <Grid padding={2} columns={2}>
              <div>
                <Label>Color</Label>
                <Select defaultValue={colors[0]}>
                  {colors.map(color => (
                    <option value={color}>{color}</option>
                  ))}
                </Select>
              </div>
              <div>
                <Label>Size</Label>
                <Select defaultValue={sizes[0]}>
                  {sizes.map(size => (
                    <option value={size}>{size}</option>
                  ))}
                </Select>
              </div>
            </Grid>
          </div>
          <Button sx={{ margin: 2, display: "block" }}>Add to Cart</Button>
        </div>
      </Grid>
    </Layout>
  )
}

ProductPage = ({ data: { shopifyProduct: product } }) => {
  const colors = product.options.find(
    option => option.name.toLowerCase() === "color"
  ).values
  const sizes = product.options.find(
    option => option.name.toLowerCase() === "size"
  ).values

  const variants = useMemo(() => prepareVariantsWithOptions(product.variants), [
    product.variants,
  ])
  const images = useMemo(() => prepareVariantsImages(variants, "color"), [
    variants,
  ])

  if (images.length < 1) {
    throw new Error("Must have at least one product image!")
  }

  const addItemToCart = useAddItemToCart()
  const [variant, setVariant] = useState(variants[0])
  const [color, setColor] = useState(variant.color)
  const [size, setSize] = useState(variant.size)
  const [addedToCartMessage, setAddedToCartMessage] = useState(null)

  useEffect(() => {
    const newVariant = variants.find(variant => {
      return variant.size === size && variant.color === color
    })

    if (variant.shopifyId !== newVariant.shopifyId) {
      setVariant(newVariant)
    }
  }, [size, color, variants, variant.shopifyId])

  const gallery =
    images.length > 1 ? (
      <Grid gap={2} columns={6}>
        {images.map(({ src, color }) => (
          <Thumbnail key={color} src={src} onClick={() => setColor(color)} />
        ))}
      </Grid>
    ) : null

  function handleAddToCart() {
    addItemToCart(variant.shopifyId, 1)
    setAddedToCartMessage("? Added to your cart!")
  }

  return (
    <Layout>
      <SEO title={product.title} />
      {addedToCartMessage ? (
        <Alert sx={{ mb: 4 }} variant="primary">
          {addedToCartMessage}
          <Close
            ml="auto"
            mr={-2}
            sx={{
              "&:hover": {
                cursor: "pointer",
              },
            }}
            onClick={() => setAddedToCartMessage(null)}
          />
        </Alert>
      ) : null}
      <Grid gap={4} columns={2}>
        <div>
          <div
            sx={{
              border: "1px solid gray",
              padding: 2,
              marginBottom: 2,
            }}
          >
            <Img fluid={variant.image.localFile.childImageSharp.fluid} />
          </div>
          {gallery}
        </div>
        <div sx={{ display: "flex", flexDirection: "column" }}>
          <Styled.h1 sx={{ mt: 0, mb: 2 }}>{product.title}</Styled.h1>
          <div dangerouslySetInnerHTML={{ __html: product.descriptionHtml }} />
          <div>
            <Grid padding={2} columns={2}>
              <OptionPicker
                key="Color"
                name="Color"
                options={colors}
                selected={color}
                onChange={event => setColor(event.target.value)}
              />
              <OptionPicker
                key="Size"
                name="Size"
                options={sizes}
                selected={size}
                onChange={event => setSize(event.target.value)}
              />
            </Grid>
          </div>
          <Button
            sx={{ margin: 2, display: "block" }}
            onClick={handleAddToCart}
          >
            Add to Cart
          </Button>
        </div>
      </Grid>
    </Layout>
  )
}