{"version":3,"file":"component---src-pages-docs-integrations-js-a520ec87cf3a5e9567e6.js","mappings":"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","sources":["webpack://roadie-marketing-site/./src/components/backstage/plugins/ListItemHeader.js","webpack://roadie-marketing-site/./src/components/backstage/plugins/Logo.js","webpack://roadie-marketing-site/./content/assets/logos/code/code.png","webpack://roadie-marketing-site/./src/pages/docs/integrations.js"],"sourcesContent":["import React from 'react';\nimport { Link, Title } from 'components';\n\nimport Logo from './Logo';\n\nconst ListItemHeader = ({ slug, logoImage, humanName }) => {\n  const sharpImage = logoImage && logoImage.childImageSharp;\n\n  return (\n    <Link to={slug} className=\"underline-none capitalize\">\n      <Logo sharpImage={sharpImage} alt={`${humanName} logo`} />\n      <div className=\"pb-4\">\n        <Title>{humanName}</Title>\n      </div>\n    </Link>\n  );\n};\n\nexport default ListItemHeader;\n","import React from 'react';\nimport { GatsbyImage } from 'gatsby-plugin-image';\n\nconst Logo = ({ sharpImage, alt, minHeight = 200 }) => {\n  let image = <img src=\"https://placehold.jp/140x140.png\" alt=\"Placeholder\" />;\n  let height = minHeight;\n\n  if (sharpImage) {\n    height = Math.max(minHeight, sharpImage.gatsbyImageData.height);\n    image = <GatsbyImage image={sharpImage.gatsbyImageData} alt={alt} />;\n  }\n\n  return (\n    <div className=\"flex justify-center items-center\" style={{ height }}>\n      {image}\n    </div>\n  );\n};\n\nexport default Logo;\n","export default __webpack_public_path__ + \"static/code-30df9950ea76a80179575bc6f3f21be9.png\";","import React, { useState } from 'react';\nimport { graphql } from 'gatsby';\nimport { SEO, SitewideFooter, Headline, Input, Lead, TextLink, Chip, TabInner } from 'components';\nimport classnames from 'classnames';\n\nimport DocsHeader from 'components/SitewideHeader/DocsHeader';\nimport ListItemHeader from 'components/backstage/plugins/ListItemHeader';\nimport customPluginsLogoImagePath from '../../../content/assets/logos/code/code.png';\n\nconst INTEGRATION_TYPE_FILTERS = Object.freeze({\n  OSS_PLUGIN: 'oss plugin',\n  INTEGRATION: 'integration',\n  ALL: 'all',\n});\n\nconst ListItem = ({\n  fields: { slug },\n  frontmatter: {\n    logoImage,\n    humanName,\n    integrationType,\n  },\n  dashed = false\n}) => (\n  <div\n    className={\n      classnames('border-2 p-4 text-center', {\n        'border-dashed': dashed,\n      })\n    }\n    style={{ height: 350 }}\n  >\n    <ListItemHeader slug={slug} logoImage={logoImage} humanName={humanName} />\n    <Chip label={integrationType} />\n  </div>\n);\n\nconst Tab = ({ label, isActive, onClick }) => (\n  <div className=\"flex text-gray-400\">\n    <button onClick={onClick}>\n      <TabInner label={label} isActive={isActive} />\n    </button>\n  </div>\n);\n\nconst Header = ({ count }) => (\n  <header className=\"mb-6 lg:mb-28\">\n    <div className=\"mb-2\">\n      <Headline size=\"small\">Plugins & Integrations</Headline>\n    </div>\n    <Lead>Roadie supports {count} plugins and integrations out of the box. If we&apos;re missing something, <TextLink to=\"/docs/details/requesting-plugins/\" color=\"primary\">request it</TextLink>.</Lead>\n    <Lead>Growth plan customers can <TextLink color=\"primary\" to=\"/docs/custom-plugins/\">write their own plugins</TextLink>.</Lead>\n  </header>\n);\n\nconst SearchAndFilterBar = ({\n  integrationTypeFilter,\n  setIntegrationTypeFilter,\n  handleQueryInput,\n  query,\n}) => (\n  <section className=\"md:flex justify-between items-center\">\n    <div className=\"flex mb-2\">\n      <Tab\n        isActive={integrationTypeFilter === INTEGRATION_TYPE_FILTERS.ALL}\n        label=\"All\"\n        onClick={() => setIntegrationTypeFilter(INTEGRATION_TYPE_FILTERS.ALL)}\n      />\n\n      <Tab\n        isActive={integrationTypeFilter === INTEGRATION_TYPE_FILTERS.OSS_PLUGIN}\n        label=\"Plugins\"\n        onClick={() => setIntegrationTypeFilter(INTEGRATION_TYPE_FILTERS.OSS_PLUGIN)}\n      />\n\n      <Tab\n        isActive={integrationTypeFilter === INTEGRATION_TYPE_FILTERS.INTEGRATION}\n        label=\"Integrations\"\n        onClick={() => setIntegrationTypeFilter(INTEGRATION_TYPE_FILTERS.INTEGRATION)}\n      />\n    </div>\n\n    <form className=\"md:w-96\">\n      <Input\n        type=\"text\"\n        onChange={handleQueryInput}\n        value={query}\n        aria-label=\"Filter\"\n        placeholder=\"Filter\"\n        fullWidth\n      />\n    </form>\n  </section>\n);\n\nconst CUSTOM_PLUGIN_PLACEHOLDER = {\n  frontmatter: {\n    humanName: 'Write your own',\n    integrationType: 'OSS plugin',\n    logoImage: {\n      childImageSharp: {\n        gatsbyImageData: {\n          height: 100,\n          images: {\n            fallback: {\n              src: customPluginsLogoImagePath,\n            },\n          },\n          layout: 'fixed',\n          width: 100,\n        },\n      },\n    },\n  },\n  fields: {\n    slug: '/docs/custom-plugins/',\n  },\n  dashed: true,\n};\n\nconst DocsIntegrations = ({\n  data: {\n    site: { siteMetadata },\n    integrations,\n  },\n  location,\n}) => {\n  const [query, setQuery] = useState('');\n  const [integrationTypeFilter, setIntegrationTypeFilter] = useState(INTEGRATION_TYPE_FILTERS.ALL);\n\n  const allIntegrations = [\n    ...integrations.nodes,\n    CUSTOM_PLUGIN_PLACEHOLDER,\n  ];\n\n  const count = integrations.nodes.length;\n\n  let filteredIntegrations = [];\n  if (query === '') {\n    if (integrationTypeFilter === INTEGRATION_TYPE_FILTERS.ALL) {\n      filteredIntegrations = [...allIntegrations];\n    } else {\n      filteredIntegrations = allIntegrations.filter(({ frontmatter }) => (\n        frontmatter.integrationType.toLowerCase() === integrationTypeFilter\n      ));\n    }\n  } else {\n    filteredIntegrations = allIntegrations.filter(({ frontmatter }) => {\n      return frontmatter.humanName.toLowerCase().includes(query.toLowerCase());\n    });\n  }\n\n  const handleQueryInput = (queryValue) => {\n    if (integrationTypeFilter !== INTEGRATION_TYPE_FILTERS.ALL) {\n      setIntegrationTypeFilter(INTEGRATION_TYPE_FILTERS.ALL);\n    }\n    setQuery(queryValue);\n  }\n\n  return (\n    <>\n      <SEO\n        title={`Backstage plugins & integrations docs | ${siteMetadata.title}`}\n        description=\"Learn how to add Backstage plugins and other integrations to your Roadie Backstage experience.\"\n      />\n      <DocsHeader location={location} />\n\n      <main className=\"pt-4 pb-8 px-4 sm:px-6 lg:pt-24 lg:pb-28\">\n        <div className=\"relative mx-auto lg:max-w-7xl mb-24\">\n          <Header count={count} />\n\n          <div className=\"border-b-2 border-gray-100 mb-6 pb-6\">\n            <SearchAndFilterBar\n              integrationTypeFilter={integrationTypeFilter}\n              setIntegrationTypeFilter={setIntegrationTypeFilter}\n              handleQueryInput={handleQueryInput}\n              query={query}\n            />\n          </div>\n\n\n          <section className=\"grid gap-16 md:grid-cols-2 lg:grid-cols-4 lg:gap-x-5 lg:gap-y-12\">\n            {filteredIntegrations.map(({ fields, frontmatter, dashed }) => (\n              <ListItem\n                frontmatter={frontmatter}\n                fields={fields}\n                key={fields.slug}\n                dashed={dashed}\n              />\n            ))}\n          </section>\n        </div>\n      </main>\n\n      <SitewideFooter maxWidth=\"full\" />\n    </>\n  );\n};\n\nexport default DocsIntegrations;\n\nexport const pageQuery = graphql`\n  query DocsIntegrations {\n    site {\n      siteMetadata {\n        title\n      }\n    }\n\n    integrations: allMarkdownRemark(\n      sort: { fields: frontmatter___humanName, order: ASC }\n      filter: { fileAbsolutePath: { regex: \"/.+/content/docs/integrations/.+/\" } }\n    ) {\n      nodes {\n        fields {\n          slug\n        }\n\n        frontmatter {\n          humanName\n          integrationType\n\n          logoImage {\n            childImageSharp {\n              gatsbyImageData(layout: FIXED, width: 140)\n            }\n          }\n        }\n      }\n    }\n  }\n`;\n"],"names":["slug","logoImage","humanName","sharpImage","childImageSharp","to","className","alt","minHeight","image","src","height","Math","max","gatsbyImageData","G","style","INTEGRATION_TYPE_FILTERS","Object","freeze","OSS_PLUGIN","INTEGRATION","ALL","ListItem","fields","frontmatter","integrationType","dashed","classnames","ListItemHeader","label","Tab","isActive","onClick","Header","count","size","color","SearchAndFilterBar","integrationTypeFilter","setIntegrationTypeFilter","handleQueryInput","query","type","onChange","value","placeholder","fullWidth","CUSTOM_PLUGIN_PLACEHOLDER","images","fallback","customPluginsLogoImagePath","layout","width","data","site","siteMetadata","integrations","location","setQuery","useState","allIntegrations","nodes","length","filteredIntegrations","filter","toLowerCase","includes","title","description","DocsHeader","queryValue","map","key","maxWidth"],"sourceRoot":""}