component---frontend-pages-endpoint-js-6e7710f37ebdba419059.js.map

{"version":3,"sources":["webpack:///./frontend/pages/endpoint.js"],"names":["__webpack_require__","r","__webpack_exports__","react__WEBPACK_IMPORTED_MODULE_0__","react__WEBPACK_IMPORTED_MODULE_0___default","n","prop_types__WEBPACK_IMPORTED_MODULE_1__","prop_types__WEBPACK_IMPORTED_MODULE_1___default","styled_components__WEBPACK_IMPORTED_MODULE_2__","_core_badge_urls_make_badge_url__WEBPACK_IMPORTED_MODULE_3__","_constants__WEBPACK_IMPORTED_MODULE_4__","_components_meta__WEBPACK_IMPORTED_MODULE_5__","_components_header__WEBPACK_IMPORTED_MODULE_6__","_components_footer__WEBPACK_IMPORTED_MODULE_7__","_components_common__WEBPACK_IMPORTED_MODULE_8__","_components_snippet__WEBPACK_IMPORTED_MODULE_9__","_components_customizer_customizer__WEBPACK_IMPORTED_MODULE_10__","MainContainer","styled","BaseFont","withConfig","displayName","componentId","Explanation","div","JsonExampleBlock","code","_ref","fontSize","JsonExample","_ref2","data","a","createElement","JSON","stringify","undefined","propTypes","PropTypes","object","isRequired","Schema","dl","EndpointPage","snippet","baseUrl","schemaVersion","label","message","color","alt","src","staticBadgeUrl","href","exampleNamedParams","exampleQueryParams","url","pattern","title"],"mappings":"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","file":"component---frontend-pages-endpoint-js-6e7710f37ebdba419059.js","sourcesContent":["import React from 'react'\nimport PropTypes from 'prop-types'\nimport styled from 'styled-components'\nimport { staticBadgeUrl } from '../../core/badge-urls/make-badge-url'\nimport { baseUrl } from '../constants'\nimport Meta from '../components/meta'\nimport Header from '../components/header'\nimport Footer from '../components/footer'\nimport { BaseFont, GlobalStyle, H3, Badge } from '../components/common'\nimport { Snippet } from '../components/snippet'\nimport Customizer from '../components/customizer/customizer'\n\nconst MainContainer = styled(BaseFont)`\n  text-align: center;\n`\n\nconst Explanation = styled.div`\n  display: block;\n  max-width: 800px;\n  margin: 0 auto;\n  text-align: left;\n`\n\nconst JsonExampleBlock = styled.code`\n  display: inline-block;\n\n  text-align: left;\n  line-height: 1.2em;\n  padding: 16px 18px;\n\n  border-radius: 4px;\n  background: #eef;\n\n  font-family: Lekton;\n  font-size: ${({ fontSize }) => fontSize};\n\n  white-space: pre;\n`\n\nconst JsonExample = ({ data }) => (\n  <JsonExampleBlock>{JSON.stringify(data, undefined, 2)}</JsonExampleBlock>\n)\nJsonExample.propTypes = {\n  data: PropTypes.object.isRequired,\n}\n\nconst Schema = styled.dl`\n  display: inline-block;\n  max-width: 800px;\n\n  margin: 0;\n  padding: 10px;\n  text-align: left;\n\n  background: #efefef;\n\n  clear: both;\n  overflow: hidden;\n\n  dt,\n  dd {\n    padding: 0 1%;\n    margin-top: 8px;\n    margin-bottom: 8px;\n    float: left;\n  }\n\n  dt {\n    width: 100px;\n    clear: both;\n  }\n\n  dd {\n    margin-left: 20px;\n    width: 75%;\n  }\n\n  @media (max-width: 600px) {\n    .data_table {\n      text-align: center;\n    }\n  }\n`\n\nconst EndpointPage = () => (\n  <MainContainer>\n    <GlobalStyle />\n    <Meta />\n    <Header />\n    <H3>Endpoint</H3>\n    <Snippet snippet={`${baseUrl}/endpoint.svg?url=...&style=...`} />\n    <p>Endpoint response:</p>\n    <JsonExample\n      data={{\n        schemaVersion: 1,\n        label: 'hello',\n        message: 'sweet world',\n        color: 'orange',\n      }}\n    />\n    <p>Shields response:</p>\n    <Badge\n      alt=\"hello | sweet world\"\n      src={staticBadgeUrl({\n        baseUrl,\n        label: 'hello',\n        message: 'sweet world',\n        color: 'orange',\n      })}\n    />\n    <Explanation>\n      <p>\n        Developers rely on Shields for visual consistency and powerful\n        customization options. As a service provider or data provider, you can\n        use the endpoint badge to provide content while giving users the full\n        power of Shields' badge customization.\n      </p>\n      <p>\n        Using the endpoint badge, you can provide content for a badge through a\n        JSON endpoint. The content can be prerendered, or generated on the fly.\n        To strike a balance between responsiveness and bandwidth utilization on\n        one hand, and freshness on the other, cache behavior is configurable,\n        subject to the Shields minimum. The endpoint URL is provided to Shields\n        through the query string. Shields fetches it and formats the badge.\n      </p>\n      <p>\n        The endpoint badge is a better alternative than redirecting to the\n        static badge enpoint or generating SVG on your server:\n      </p>\n      <ol>\n        <li>\n          <a href=\"https://en.wikipedia.org/wiki/Separation_of_content_and_presentation\">\n            Content and presentation are separate.\n          </a>{' '}\n          The service provider authors the badge, and Shields takes input from\n          the user to format it. As a service provider you author the badge but\n          don't have to concern yourself with styling. You don't even have to\n          pass the formatting options through to Shields.\n        </li>\n        <li>\n          Badge formatting is always 100% up to date. There's no need to track\n          updates to the npm package, badge templates, or options.\n        </li>\n        <li>\n          A JSON response is easy to implement; easier than an HTTP redirect. It\n          is trivial in almost any framework, and is more compatible with\n          hosting environments such as{' '}\n          <a href=\"https://runkit.com/docs/endpoint\">RunKit endpoints</a>.\n        </li>\n        <li>\n          As a service provider you can rely on the Shields CDN. There's no need\n          to study the HTTP headers. Adjusting cache behavior is as simple as\n          setting a property in the JSON response.\n        </li>\n      </ol>\n    </Explanation>\n    <h4>Schema</h4>\n    <Explanation>\n      <p>\n        Breaking changes to the schema will trigger an increment to the\n        `schemaVersion`.\n      </p>\n    </Explanation>\n    <Schema>\n      <dt>schemaVersion</dt>\n      <dd>\n        Required. Always the number <code>1</code>.\n      </dd>\n      <dt>label</dt>\n      <dd>\n        Required. The left text, or the empty string to omit the left side of\n        the badge. This can be overridden by the query string.\n      </dd>\n      <dt>message</dt>\n      <dd>Required. Can't be empty. The right text.</dd>\n      <dt>color</dt>\n      <dd>\n        Default: <code>lightgrey</code>. The right color. Supports the eight\n        named colors above, as well as hex, rgb, rgba, hsl, hsla and css named\n        colors. This can be overridden by the query string.\n      </dd>\n      <dt>labelColor</dt>\n      <dd>\n        Default: <code>grey</code>. The left color. This can be overridden by\n        the query string.\n      </dd>\n      <dt>isError</dt>\n      <dd>\n        Default: <code>false</code>. <code>true</code> to treat this as an error\n        badge. This prevents the user from overriding the color. In the future\n        it may affect cache behavior.\n      </dd>\n      <dt>namedLogo</dt>\n      <dd>\n        Default: none. One of the named logos supported by Shields or {}\n        <a href=\"https://simpleicons.org/\">simple-icons</a>. Can be overridden\n        by the query string.\n      </dd>\n      <dt>logoSvg</dt>\n      <dd>Default: none. An SVG string containing a custom logo.</dd>\n      <dt>logoColor</dt>\n      <dd>\n        Default: none. Same meaning as the query string. Can be overridden by\n        the query string.\n      </dd>\n      <dt>logoWidth</dt>\n      <dd>\n        Default: none. Same meaning as the query string. Can be overridden by\n        the query string.\n      </dd>\n      <dt>logoPosition</dt>\n      <dd>\n        Default: none. Same meaning as the query string. Can be overridden by\n        the query string.\n      </dd>\n      <dt>style</dt>\n      <dd>\n        Default: <code>flat</code>. The default template to use. Can be\n        overridden by the query string.\n      </dd>\n      <dt>cacheSeconds</dt>\n      <dd>\n        Default: <code>300</code>, min <code>300</code>. Set the HTTP cache\n        lifetime in seconds, which should respected by the Shields' CDN and\n        downstream users. Values below 300 will be ignored. This lets you tune\n        performance and traffic vs. responsiveness. The value you specify can be\n        overridden by the user via the query string, but only to a longer value.\n      </dd>\n    </Schema>\n    <h4>Customize and test</h4>\n    <Customizer\n      baseUrl={baseUrl}\n      exampleNamedParams={{}}\n      exampleQueryParams={{ url: 'https://shields.redsparr0w.com/2473/monday' }}\n      pattern=\"/endpoint\"\n      title=\"Custom badge\"\n    />\n    <Footer baseUrl={baseUrl} />\n  </MainContainer>\n)\nexport default EndpointPage\n"],"sourceRoot":""}