construct-hub-webapp 0.1.255 → 0.1.259

package/build/static/js/{10.4d9b4ad2.chunk.js → 10.85c70ef7.chunk.js}

@@ -1,2 +1,2 @@
 (this["webpackJsonpconstruct-hub-webapp"]=this["webpackJsonpconstruct-hub-webapp"]||[]).push([[10],{228:function(e,t,n){"use strict";n.d(t,"a",(function(){return s}));var a=n(0),r=n(241),c={home:{event:{name:"Home Load"}},faq:{event:{name:"Frequently Asked Questions Load"}},packageProfile:{event:{name:"Package Profile Load"}},search:{event:{name:"Search Load"}},siteTerms:{event:{name:"Site Terms Load"}},notFound:{page:{pageType:"errorPage"},event:{name:"404 Page Load"}}},i=n(114),o=n(1),s=function(e){var t=e.children,n=e.meta,s=e.pageName,l=Object(i.b)(c[s]);Object(a.useEffect)((function(){l()}),[l]);var u=n.suffix,d=void 0===u||u,b=n.title,m=n.description,f=d?"".concat(b," - Construct Hub"):b;return Object(o.jsxs)(o.Fragment,{children:[Object(o.jsxs)(r.a,{children:[!1,Object(o.jsx)("meta",{content:"width=device-width, initial-scale=1",name:"viewport"}),Object(o.jsx)("meta",{charSet:"utf-8"}),Object(o.jsx)("title",{children:f}),Object(o.jsx)("meta",{content:f,property:"og:title"}),Object(o.jsx)("meta",{content:f,name:"twitter:title"}),Object(o.jsx)("meta",{content:"summary",name:"twitter:card"}),Object(o.jsx)("meta",{content:m,name:"description"}),Object(o.jsx)("meta",{content:m,property:"og:description"}),Object(o.jsx)("meta",{content:m,name:"twitter:description"})]}),t]})}},244:function(e,t,n){"use strict";n.d(t,"a",(function(){return u}));var a=n(6),r=n(22),c=n(21),i=n(188),o=n(295),s=n(1),l=["sources"],u=Object(c.a)((function(e,t){var n=e.sources,c=Object(r.a)(e,l);return Object(s.jsxs)(i.a,{as:"picture",children:[null===n||void 0===n?void 0:n.map((function(e,t){return Object(s.jsx)("source",{media:e.media,srcSet:e.srcSet},t)})),Object(s.jsx)(o.a,Object(a.a)({ref:t},c))]})}));u.displayName="Picture"},269:function(e,t,n){"use strict";n.r(t),n.d(t,"NotFound",(function(){return d})),n.d(t,"default",(function(){return d}));var a=n(211),r=n(203),c=n(148),i=n(29),o=n(228),s=n(244),l=n(1),u={optimal:[{media:"(max-width:1024px)",srcSet:"/assets/404-hive@50.webp"},{media:"(min-width:1024px)",srcSet:"/assets/404-hive@100.webp"},{media:"(min-width:1024px)",srcSet:"/assets/404-hive@100.png"}],fallback:"/assets/404-hive@50.png"},d=function(){return Object(l.jsx)(o.a,{meta:{title:"Not Found",description:"Oops! The page you were looking for does not exist"},pageName:"notFound",children:Object(l.jsxs)(a.a,{h:"100%",position:"relative",w:"100%",children:[Object(l.jsx)(s.a,{alt:"",inset:0,position:"absolute",sources:u.optimal,src:u.fallback,zIndex:"hide"}),Object(l.jsxs)(r.a,{align:"center",direction:"column",justify:"center",children:[Object(l.jsx)(s.a,{alt:"404 Image",sources:[{srcSet:"/assets/robot.webp"}],src:"/assets/robot.png"}),Object(l.jsx)(c.a,{as:i.b,colorScheme:"blue",to:"/",children:"Take Me Home"})]})]})})}},295:function(e,t,n){"use strict";n.d(t,"a",(function(){return m}));var a=n(21),r=n(25),c=n(26),i=n(8),o=n(0),s=n(4),l=n(140);function u(){return u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},u.apply(this,arguments)}function d(e,t){if(null==e)return{};var n,a,r={},c=Object.keys(e);for(a=0;a<c.length;a++)n=c[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}var b=o.forwardRef((function(e,t){var n=e.htmlWidth,a=e.htmlHeight,r=e.alt,c=d(e,["htmlWidth","htmlHeight","alt"]);return o.createElement("img",u({width:n,height:a,ref:t,alt:r},c))})),m=Object(a.a)((function(e,t){var n=e.fallbackSrc,a=e.fallback,i=e.src,m=e.srcSet,f=e.align,j=e.fit,g=e.loading,p=e.ignoreFallback,h=e.crossOrigin,O=d(e,["fallbackSrc","fallback","src","srcSet","align","fit","loading","ignoreFallback","crossOrigin"]),v=null!=g||p||void 0===n&&void 0===a,x=function(e){var t=e.loading,n=e.src,a=e.srcSet,r=e.onLoad,c=e.onError,i=e.crossOrigin,u=e.sizes,d=e.ignoreFallback,b=Object(o.useState)("pending"),m=Object(s.a)(b,2),f=m[0],j=m[1];Object(o.useEffect)((function(){j(n?"loading":"pending")}),[n]);var g=Object(o.useRef)(),p=Object(o.useCallback)((function(){if(n){h();var e=new Image;e.src=n,i&&(e.crossOrigin=i),a&&(e.srcset=a),u&&(e.sizes=u),t&&(e.loading=t),e.onload=function(e){h(),j("loaded"),null==r||r(e)},e.onerror=function(e){h(),j("failed"),null==c||c(e)},g.current=e}}),[n,i,a,u,r,c,t]),h=function(){g.current&&(g.current.onload=null,g.current.onerror=null,g.current=null)};return Object(l.a)((function(){if(!d)return"loading"===f&&p(),function(){h()}}),[f,p,d]),d?"loaded":f}(u({},e,{ignoreFallback:v})),w=u({ref:t,objectFit:j,objectPosition:f},v?O:Object(c.g)(O,["onError","onLoad"]));return"loaded"!==x?a||o.createElement(r.a.img,u({as:b,className:"chakra-image__placeholder",src:n},w)):o.createElement(r.a.img,u({as:b,src:i,srcSet:m,crossOrigin:h,loading:g,className:"chakra-image"},w))}));i.a&&(m.displayName="Image")}}]);
-//# sourceMappingURL=10.4d9b4ad2.chunk.js.map
+//# sourceMappingURL=10.85c70ef7.chunk.js.map

package/build/static/js/{10.4d9b4ad2.chunk.js.map → 10.85c70ef7.chunk.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["constants/pageInfo.ts","components/Page/Page.tsx","components/Picture/Picture.tsx","views/NotFound/NotFound.tsx","../../../src/image.tsx","../../../src/use-image.ts"],"names":["pageInfo","home","event","name","faq","packageProfile","search","siteTerms","notFound","page","pageType","Page","children","meta","pageName","trackPageView","usePageView","useEffect","suffix","title","description","formattedTitle","Helmet","process","content","charSet","property","Picture","forwardRef","ref","sources","props","as","map","source","idx","media","srcSet","displayName","bgSources","optimal","fallback","NotFound","h","position","w","alt","inset","src","zIndex","align","direction","justify","Link","colorScheme","to","NativeImage","width","height","Image","crossOrigin","shouldIgnore","loading","fallbackSrc","status","ignoreFallback","useState","setStatus","imageRef","useRef","load","useCallback","flush","img","onLoad","error","onError","sizes","useSafeLayoutEffect","useImage","shared","objectFit","objectPosition","rest","omit","className"],"mappings":"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","file":"static/js/10.4d9b4ad2.chunk.js","sourcesContent":["export const pageInfo = {\n  home: {\n    event: {\n      name: \"Home Load\",\n    },\n  },\n  faq: {\n    event: {\n      name: \"Frequently Asked Questions Load\",\n    },\n  },\n  packageProfile: {\n    event: {\n      name: \"Package Profile Load\",\n    },\n  },\n  search: {\n    event: {\n      name: \"Search Load\",\n    },\n  },\n  siteTerms: {\n    event: {\n      name: \"Site Terms Load\",\n    },\n  },\n  notFound: {\n    page: {\n      pageType: \"errorPage\",\n    },\n    event: {\n      name: \"404 Page Load\",\n    },\n  },\n} as const;\n","import { FunctionComponent, useEffect } from \"react\";\nimport { Helmet } from \"react-helmet\";\nimport { pageInfo } from \"../../constants/pageInfo\";\nimport { usePageView } from \"../../contexts/Analytics\";\n\nexport interface PageProps {\n  pageName: keyof typeof pageInfo;\n  meta: {\n    suffix?: boolean;\n    title: string;\n    description: string;\n  };\n}\n\nexport const Page: FunctionComponent<PageProps> = ({\n  children,\n  meta,\n  pageName,\n}) => {\n  const trackPageView = usePageView(pageInfo[pageName]);\n\n  useEffect(() => {\n    trackPageView();\n  }, [trackPageView]);\n\n  const { suffix = true, title, description } = meta;\n  const formattedTitle = suffix ? `${title} - Construct Hub` : title;\n\n  return (\n    <>\n      <Helmet>\n        {process.env.NODE_ENV === \"development\" && (\n          <meta\n            content=\"default-src 'self' 'unsafe-inline' https://*.awsstatic.com https://amazonwebservices.d2.sc.omtrdc.net; connect-src 'self' https://*.shortbread.aws.dev ws://localhost:3000 https://*.awsstatic.com https://amazonwebservices.d2.sc.omtrdc.net; frame-src 'none'; img-src 'self' https://* http://*.omtrdc.net; object-src 'none'; style-src 'self' 'unsafe-inline';\"\n            httpEquiv=\"Content-Security-Policy\"\n          />\n        )}\n\n        <meta content=\"width=device-width, initial-scale=1\" name=\"viewport\" />\n        <meta charSet=\"utf-8\" />\n\n        <title>{formattedTitle}</title>\n        <meta content={formattedTitle} property=\"og:title\" />\n        <meta content={formattedTitle} name=\"twitter:title\" />\n        <meta content=\"summary\" name=\"twitter:card\" />\n\n        <meta content={description} name=\"description\" />\n        <meta content={description} property=\"og:description\" />\n        <meta content={description} name=\"twitter:description\" />\n      </Helmet>\n      {children}\n    </>\n  );\n};\n","import { Box, HTMLChakraProps, forwardRef, Image } from \"@chakra-ui/react\";\n\nexport interface PictureProps extends HTMLChakraProps<\"img\"> {\n  alt: string;\n  src: string;\n  sources?: {\n    media?: string;\n    srcSet: string;\n  }[];\n}\n\nexport const Picture = forwardRef<PictureProps, \"img\">(\n  ({ sources, ...props }, ref) => (\n    <Box as=\"picture\">\n      {sources?.map((source, idx) => (\n        <source key={idx} media={source.media} srcSet={source.srcSet} />\n      ))}\n      <Image ref={ref} {...props} />\n    </Box>\n  )\n);\n\nPicture.displayName = \"Picture\";\n","import { Button, Center, Flex } from \"@chakra-ui/react\";\nimport type { FunctionComponent } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { Page } from \"../../components/Page\";\nimport { Picture } from \"../../components/Picture\";\n\nconst bgSources = {\n  optimal: [\n    { media: \"(max-width:1024px)\", srcSet: \"/assets/404-hive@50.webp\" },\n    { media: \"(min-width:1024px)\", srcSet: \"/assets/404-hive@100.webp\" },\n    { media: \"(min-width:1024px)\", srcSet: \"/assets/404-hive@100.png\" },\n  ],\n  fallback: \"/assets/404-hive@50.png\",\n};\n\nexport const NotFound: FunctionComponent = () => {\n  return (\n    <Page\n      meta={{\n        title: \"Not Found\",\n        description: \"Oops! The page you were looking for does not exist\",\n      }}\n      pageName=\"notFound\"\n    >\n      <Center h=\"100%\" position=\"relative\" w=\"100%\">\n        <Picture\n          alt=\"\"\n          inset={0}\n          position=\"absolute\"\n          sources={bgSources.optimal}\n          src={bgSources.fallback}\n          zIndex=\"hide\"\n        />\n        <Flex align=\"center\" direction=\"column\" justify=\"center\">\n          <Picture\n            alt=\"404 Image\"\n            sources={[{ srcSet: \"/assets/robot.webp\" }]}\n            src=\"/assets/robot.png\"\n          />\n          <Button as={Link} colorScheme=\"blue\" to=\"/\">\n            Take Me Home\n          </Button>\n        </Flex>\n      </Center>\n    </Page>\n  );\n};\n","import {\n  chakra,\n  PropsOf,\n  SystemProps,\n  forwardRef,\n  HTMLChakraProps,\n} from \"@chakra-ui/system\"\nimport { omit, __DEV__ } from \"@chakra-ui/utils\"\nimport * as React from \"react\"\nimport { useImage, UseImageProps } from \"./use-image\"\n\ninterface NativeImageOptions {\n  /**\n   * The native HTML `width` attribute to the passed to the `img`\n   */\n  htmlWidth?: string | number\n  /**\n   * The native HTML `height` attribute to the passed to the `img`\n   */\n  htmlHeight?: string | number\n}\n\ninterface NativeImageProps extends PropsOf<\"img\">, NativeImageOptions {}\n\nconst NativeImage = React.forwardRef(\n  (props: NativeImageProps, ref: React.Ref<any>) => {\n    const { htmlWidth, htmlHeight, alt, ...rest } = props\n    return (\n      <img\n        width={htmlWidth}\n        height={htmlHeight}\n        ref={ref}\n        alt={alt}\n        {...rest}\n      />\n    )\n  },\n)\n\ninterface ImageOptions extends NativeImageOptions {\n  /**\n   * Fallback image `src` to show if image is loading or image fails.\n   *\n   * Note 🚨: We recommend you use a local image\n   */\n  fallbackSrc?: string\n  /**\n   * Fallback element to show if image is loading or image fails.\n   * @type React.ReactElement\n   */\n  fallback?: React.ReactElement\n  /**\n   * Defines loading strategy\n   */\n  loading?: \"eager\" | \"lazy\"\n  /**\n   * How the image to fit within its bounds.\n   * It maps to css `object-fit` property.\n   * @type SystemProps[\"objectFit\"]\n   */\n  fit?: SystemProps[\"objectFit\"]\n  /**\n   * How to align the image within its bounds.\n   * It maps to css `object-position` property.\n   * @type SystemProps[\"objectPosition\"]\n   */\n  align?: SystemProps[\"objectPosition\"]\n  /**\n   * If `true`, opt out of the `fallbackSrc` logic and use as `img`\n   */\n  ignoreFallback?: boolean\n}\n\nexport interface ImageProps\n  extends UseImageProps,\n    Omit<HTMLChakraProps<\"img\">, keyof UseImageProps>,\n    ImageOptions {}\n\n/**\n * React component that renders an image with support\n * for fallbacks\n *\n * @see Docs https://chakra-ui.com/image\n */\nexport const Image = forwardRef<ImageProps, \"img\">((props, ref) => {\n  const {\n    fallbackSrc,\n    fallback,\n    src,\n    srcSet,\n    align,\n    fit,\n    loading,\n    ignoreFallback,\n    crossOrigin,\n    ...rest\n  } = props\n\n  /**\n   * Defer to native `img` tag if `loading` prop is passed\n   * @see https://github.com/chakra-ui/chakra-ui/issues/1027\n   */\n  const shouldIgnore =\n    loading != null ||\n    ignoreFallback ||\n    (fallbackSrc === undefined && fallback === undefined) // if the user doesn't provide any kind of fallback we should ignore it\n\n  const status = useImage({\n    ...props,\n    ignoreFallback: shouldIgnore,\n  })\n\n  const shared = {\n    ref,\n    objectFit: fit,\n    objectPosition: align,\n    ...(shouldIgnore ? rest : omit(rest, [\"onError\", \"onLoad\"])),\n  }\n\n  if (status !== \"loaded\") {\n    /**\n     * If user passed a custom fallback component,\n     * let's render it here.\n     */\n    if (fallback) return fallback\n\n    return (\n      <chakra.img\n        as={NativeImage}\n        className=\"chakra-image__placeholder\"\n        src={fallbackSrc}\n        {...shared}\n      />\n    )\n  }\n\n  return (\n    <chakra.img\n      as={NativeImage}\n      src={src}\n      srcSet={srcSet}\n      crossOrigin={crossOrigin}\n      loading={loading}\n      className=\"chakra-image\"\n      {...shared}\n    />\n  )\n})\n\nexport interface ImgProps extends HTMLChakraProps<\"img\">, NativeImageOptions {}\n\n/**\n * Fallback component for most SSR users who want to use the native `img` with\n * support for chakra props\n */\nexport const Img = forwardRef<ImgProps, \"img\">((props, ref) => (\n  <chakra.img ref={ref} as={NativeImage} className=\"chakra-image\" {...props} />\n))\n\nif (__DEV__) {\n  Image.displayName = \"Image\"\n}\n","import { useSafeLayoutEffect } from \"@chakra-ui/hooks\"\nimport {\n  ImgHTMLAttributes,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\"\n\ntype NativeImageProps = ImgHTMLAttributes<HTMLImageElement>\n\nexport interface UseImageProps {\n  /**\n   * The image `src` attribute\n   */\n  src?: string\n  /**\n   * The image `srcset` attribute\n   */\n  srcSet?: string\n  /**\n   * The image `sizes` attribute\n   */\n  sizes?: string\n  /**\n   * A callback for when the image `src` has been loaded\n   */\n  onLoad?: NativeImageProps[\"onLoad\"]\n  /**\n   * A callback for when there was an error loading the image `src`\n   */\n  onError?: NativeImageProps[\"onError\"]\n  /**\n   * If `true`, opt out of the `fallbackSrc` logic and use as `img`\n   */\n  ignoreFallback?: boolean\n  /**\n   * The key used to set the crossOrigin on the HTMLImageElement into which the image will be loaded.\n   * This tells the browser to request cross-origin access when trying to download the image data.\n   */\n  crossOrigin?: NativeImageProps[\"crossOrigin\"]\n  loading?: NativeImageProps[\"loading\"]\n}\n\ntype Status = \"loading\" | \"failed\" | \"pending\" | \"loaded\"\n\ntype ImageEvent = React.SyntheticEvent<HTMLImageElement, Event>\n\n/**\n * React hook that loads an image in the browser,\n * and let's us know the `status` so we can show image\n * fallback if it is still `pending`\n *\n * @returns the status of the image loading progress\n *\n * @example\n *\n * ```jsx\n * function App(){\n *   const status = useImage({ src: \"image.png\" })\n *   return status === \"loaded\" ? <img src=\"image.png\" /> : <Placeholder />\n * }\n * ```\n */\nexport function useImage(props: UseImageProps) {\n  const {\n    loading,\n    src,\n    srcSet,\n    onLoad,\n    onError,\n    crossOrigin,\n    sizes,\n    ignoreFallback,\n  } = props\n\n  const [status, setStatus] = useState<Status>(\"pending\")\n\n  useEffect(() => {\n    setStatus(src ? \"loading\" : \"pending\")\n  }, [src])\n\n  const imageRef = useRef<HTMLImageElement | null>()\n\n  const load = useCallback(() => {\n    if (!src) return\n\n    flush()\n\n    const img = new Image()\n    img.src = src\n    if (crossOrigin) img.crossOrigin = crossOrigin\n    if (srcSet) img.srcset = srcSet\n    if (sizes) img.sizes = sizes\n    if (loading) img.loading = loading\n\n    img.onload = (event) => {\n      flush()\n      setStatus(\"loaded\")\n      onLoad?.((event as unknown) as ImageEvent)\n    }\n    img.onerror = (error) => {\n      flush()\n      setStatus(\"failed\")\n      onError?.(error as any)\n    }\n\n    imageRef.current = img\n  }, [src, crossOrigin, srcSet, sizes, onLoad, onError, loading])\n\n  const flush = () => {\n    if (imageRef.current) {\n      imageRef.current.onload = null\n      imageRef.current.onerror = null\n      imageRef.current = null\n    }\n  }\n\n  useSafeLayoutEffect(() => {\n    /**\n     * If user opts out of the fallback/placeholder\n     * logic, let's bail out.\n     */\n    if (ignoreFallback) return undefined\n\n    if (status === \"loading\") {\n      load()\n    }\n    return () => {\n      flush()\n    }\n  }, [status, load, ignoreFallback])\n\n  /**\n   * If user opts out of the fallback/placeholder\n   * logic, let's just return 'loaded'\n   */\n  return ignoreFallback ? \"loaded\" : status\n}\n\nexport type UseImageReturn = ReturnType<typeof useImage>\n"],"sourceRoot":""}
+{"version":3,"sources":["constants/pageInfo.ts","components/Page/Page.tsx","components/Picture/Picture.tsx","views/NotFound/NotFound.tsx","../../../src/image.tsx","../../../src/use-image.ts"],"names":["pageInfo","home","event","name","faq","packageProfile","search","siteTerms","notFound","page","pageType","Page","children","meta","pageName","trackPageView","usePageView","useEffect","suffix","title","description","formattedTitle","Helmet","process","content","charSet","property","Picture","forwardRef","ref","sources","props","as","map","source","idx","media","srcSet","displayName","bgSources","optimal","fallback","NotFound","h","position","w","alt","inset","src","zIndex","align","direction","justify","Link","colorScheme","to","NativeImage","width","height","Image","crossOrigin","shouldIgnore","loading","fallbackSrc","status","ignoreFallback","useState","setStatus","imageRef","useRef","load","useCallback","flush","img","onLoad","error","onError","sizes","useSafeLayoutEffect","useImage","shared","objectFit","objectPosition","rest","omit","className"],"mappings":"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","file":"static/js/10.85c70ef7.chunk.js","sourcesContent":["export const pageInfo = {\n  home: {\n    event: {\n      name: \"Home Load\",\n    },\n  },\n  faq: {\n    event: {\n      name: \"Frequently Asked Questions Load\",\n    },\n  },\n  packageProfile: {\n    event: {\n      name: \"Package Profile Load\",\n    },\n  },\n  search: {\n    event: {\n      name: \"Search Load\",\n    },\n  },\n  siteTerms: {\n    event: {\n      name: \"Site Terms Load\",\n    },\n  },\n  notFound: {\n    page: {\n      pageType: \"errorPage\",\n    },\n    event: {\n      name: \"404 Page Load\",\n    },\n  },\n} as const;\n","import { FunctionComponent, useEffect } from \"react\";\nimport { Helmet } from \"react-helmet\";\nimport { pageInfo } from \"../../constants/pageInfo\";\nimport { usePageView } from \"../../contexts/Analytics\";\n\nexport interface PageProps {\n  pageName: keyof typeof pageInfo;\n  meta: {\n    suffix?: boolean;\n    title: string;\n    description: string;\n  };\n}\n\nexport const Page: FunctionComponent<PageProps> = ({\n  children,\n  meta,\n  pageName,\n}) => {\n  const trackPageView = usePageView(pageInfo[pageName]);\n\n  useEffect(() => {\n    trackPageView();\n  }, [trackPageView]);\n\n  const { suffix = true, title, description } = meta;\n  const formattedTitle = suffix ? `${title} - Construct Hub` : title;\n\n  return (\n    <>\n      <Helmet>\n        {process.env.NODE_ENV === \"development\" && (\n          <meta\n            content=\"default-src 'self' 'unsafe-inline' https://*.awsstatic.com https://amazonwebservices.d2.sc.omtrdc.net; connect-src 'self' https://*.shortbread.aws.dev ws://localhost:3000 https://*.awsstatic.com https://amazonwebservices.d2.sc.omtrdc.net; frame-src 'none'; img-src 'self' https://* http://*.omtrdc.net; object-src 'none'; style-src 'self' 'unsafe-inline';\"\n            httpEquiv=\"Content-Security-Policy\"\n          />\n        )}\n\n        <meta content=\"width=device-width, initial-scale=1\" name=\"viewport\" />\n        <meta charSet=\"utf-8\" />\n\n        <title>{formattedTitle}</title>\n        <meta content={formattedTitle} property=\"og:title\" />\n        <meta content={formattedTitle} name=\"twitter:title\" />\n        <meta content=\"summary\" name=\"twitter:card\" />\n\n        <meta content={description} name=\"description\" />\n        <meta content={description} property=\"og:description\" />\n        <meta content={description} name=\"twitter:description\" />\n      </Helmet>\n      {children}\n    </>\n  );\n};\n","import { Box, HTMLChakraProps, forwardRef, Image } from \"@chakra-ui/react\";\n\nexport interface PictureProps extends HTMLChakraProps<\"img\"> {\n  alt: string;\n  src: string;\n  sources?: {\n    media?: string;\n    srcSet: string;\n  }[];\n}\n\nexport const Picture = forwardRef<PictureProps, \"img\">(\n  ({ sources, ...props }, ref) => (\n    <Box as=\"picture\">\n      {sources?.map((source, idx) => (\n        <source key={idx} media={source.media} srcSet={source.srcSet} />\n      ))}\n      <Image ref={ref} {...props} />\n    </Box>\n  )\n);\n\nPicture.displayName = \"Picture\";\n","import { Button, Center, Flex } from \"@chakra-ui/react\";\nimport type { FunctionComponent } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { Page } from \"../../components/Page\";\nimport { Picture } from \"../../components/Picture\";\n\nconst bgSources = {\n  optimal: [\n    { media: \"(max-width:1024px)\", srcSet: \"/assets/404-hive@50.webp\" },\n    { media: \"(min-width:1024px)\", srcSet: \"/assets/404-hive@100.webp\" },\n    { media: \"(min-width:1024px)\", srcSet: \"/assets/404-hive@100.png\" },\n  ],\n  fallback: \"/assets/404-hive@50.png\",\n};\n\nexport const NotFound: FunctionComponent = () => {\n  return (\n    <Page\n      meta={{\n        title: \"Not Found\",\n        description: \"Oops! The page you were looking for does not exist\",\n      }}\n      pageName=\"notFound\"\n    >\n      <Center h=\"100%\" position=\"relative\" w=\"100%\">\n        <Picture\n          alt=\"\"\n          inset={0}\n          position=\"absolute\"\n          sources={bgSources.optimal}\n          src={bgSources.fallback}\n          zIndex=\"hide\"\n        />\n        <Flex align=\"center\" direction=\"column\" justify=\"center\">\n          <Picture\n            alt=\"404 Image\"\n            sources={[{ srcSet: \"/assets/robot.webp\" }]}\n            src=\"/assets/robot.png\"\n          />\n          <Button as={Link} colorScheme=\"blue\" to=\"/\">\n            Take Me Home\n          </Button>\n        </Flex>\n      </Center>\n    </Page>\n  );\n};\n","import {\n  chakra,\n  PropsOf,\n  SystemProps,\n  forwardRef,\n  HTMLChakraProps,\n} from \"@chakra-ui/system\"\nimport { omit, __DEV__ } from \"@chakra-ui/utils\"\nimport * as React from \"react\"\nimport { useImage, UseImageProps } from \"./use-image\"\n\ninterface NativeImageOptions {\n  /**\n   * The native HTML `width` attribute to the passed to the `img`\n   */\n  htmlWidth?: string | number\n  /**\n   * The native HTML `height` attribute to the passed to the `img`\n   */\n  htmlHeight?: string | number\n}\n\ninterface NativeImageProps extends PropsOf<\"img\">, NativeImageOptions {}\n\nconst NativeImage = React.forwardRef(\n  (props: NativeImageProps, ref: React.Ref<any>) => {\n    const { htmlWidth, htmlHeight, alt, ...rest } = props\n    return (\n      <img\n        width={htmlWidth}\n        height={htmlHeight}\n        ref={ref}\n        alt={alt}\n        {...rest}\n      />\n    )\n  },\n)\n\ninterface ImageOptions extends NativeImageOptions {\n  /**\n   * Fallback image `src` to show if image is loading or image fails.\n   *\n   * Note 🚨: We recommend you use a local image\n   */\n  fallbackSrc?: string\n  /**\n   * Fallback element to show if image is loading or image fails.\n   * @type React.ReactElement\n   */\n  fallback?: React.ReactElement\n  /**\n   * Defines loading strategy\n   */\n  loading?: \"eager\" | \"lazy\"\n  /**\n   * How the image to fit within its bounds.\n   * It maps to css `object-fit` property.\n   * @type SystemProps[\"objectFit\"]\n   */\n  fit?: SystemProps[\"objectFit\"]\n  /**\n   * How to align the image within its bounds.\n   * It maps to css `object-position` property.\n   * @type SystemProps[\"objectPosition\"]\n   */\n  align?: SystemProps[\"objectPosition\"]\n  /**\n   * If `true`, opt out of the `fallbackSrc` logic and use as `img`\n   */\n  ignoreFallback?: boolean\n}\n\nexport interface ImageProps\n  extends UseImageProps,\n    Omit<HTMLChakraProps<\"img\">, keyof UseImageProps>,\n    ImageOptions {}\n\n/**\n * React component that renders an image with support\n * for fallbacks\n *\n * @see Docs https://chakra-ui.com/image\n */\nexport const Image = forwardRef<ImageProps, \"img\">((props, ref) => {\n  const {\n    fallbackSrc,\n    fallback,\n    src,\n    srcSet,\n    align,\n    fit,\n    loading,\n    ignoreFallback,\n    crossOrigin,\n    ...rest\n  } = props\n\n  /**\n   * Defer to native `img` tag if `loading` prop is passed\n   * @see https://github.com/chakra-ui/chakra-ui/issues/1027\n   */\n  const shouldIgnore =\n    loading != null ||\n    ignoreFallback ||\n    (fallbackSrc === undefined && fallback === undefined) // if the user doesn't provide any kind of fallback we should ignore it\n\n  const status = useImage({\n    ...props,\n    ignoreFallback: shouldIgnore,\n  })\n\n  const shared = {\n    ref,\n    objectFit: fit,\n    objectPosition: align,\n    ...(shouldIgnore ? rest : omit(rest, [\"onError\", \"onLoad\"])),\n  }\n\n  if (status !== \"loaded\") {\n    /**\n     * If user passed a custom fallback component,\n     * let's render it here.\n     */\n    if (fallback) return fallback\n\n    return (\n      <chakra.img\n        as={NativeImage}\n        className=\"chakra-image__placeholder\"\n        src={fallbackSrc}\n        {...shared}\n      />\n    )\n  }\n\n  return (\n    <chakra.img\n      as={NativeImage}\n      src={src}\n      srcSet={srcSet}\n      crossOrigin={crossOrigin}\n      loading={loading}\n      className=\"chakra-image\"\n      {...shared}\n    />\n  )\n})\n\nexport interface ImgProps extends HTMLChakraProps<\"img\">, NativeImageOptions {}\n\n/**\n * Fallback component for most SSR users who want to use the native `img` with\n * support for chakra props\n */\nexport const Img = forwardRef<ImgProps, \"img\">((props, ref) => (\n  <chakra.img ref={ref} as={NativeImage} className=\"chakra-image\" {...props} />\n))\n\nif (__DEV__) {\n  Image.displayName = \"Image\"\n}\n","import { useSafeLayoutEffect } from \"@chakra-ui/hooks\"\nimport {\n  ImgHTMLAttributes,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\"\n\ntype NativeImageProps = ImgHTMLAttributes<HTMLImageElement>\n\nexport interface UseImageProps {\n  /**\n   * The image `src` attribute\n   */\n  src?: string\n  /**\n   * The image `srcset` attribute\n   */\n  srcSet?: string\n  /**\n   * The image `sizes` attribute\n   */\n  sizes?: string\n  /**\n   * A callback for when the image `src` has been loaded\n   */\n  onLoad?: NativeImageProps[\"onLoad\"]\n  /**\n   * A callback for when there was an error loading the image `src`\n   */\n  onError?: NativeImageProps[\"onError\"]\n  /**\n   * If `true`, opt out of the `fallbackSrc` logic and use as `img`\n   */\n  ignoreFallback?: boolean\n  /**\n   * The key used to set the crossOrigin on the HTMLImageElement into which the image will be loaded.\n   * This tells the browser to request cross-origin access when trying to download the image data.\n   */\n  crossOrigin?: NativeImageProps[\"crossOrigin\"]\n  loading?: NativeImageProps[\"loading\"]\n}\n\ntype Status = \"loading\" | \"failed\" | \"pending\" | \"loaded\"\n\ntype ImageEvent = React.SyntheticEvent<HTMLImageElement, Event>\n\n/**\n * React hook that loads an image in the browser,\n * and let's us know the `status` so we can show image\n * fallback if it is still `pending`\n *\n * @returns the status of the image loading progress\n *\n * @example\n *\n * ```jsx\n * function App(){\n *   const status = useImage({ src: \"image.png\" })\n *   return status === \"loaded\" ? <img src=\"image.png\" /> : <Placeholder />\n * }\n * ```\n */\nexport function useImage(props: UseImageProps) {\n  const {\n    loading,\n    src,\n    srcSet,\n    onLoad,\n    onError,\n    crossOrigin,\n    sizes,\n    ignoreFallback,\n  } = props\n\n  const [status, setStatus] = useState<Status>(\"pending\")\n\n  useEffect(() => {\n    setStatus(src ? \"loading\" : \"pending\")\n  }, [src])\n\n  const imageRef = useRef<HTMLImageElement | null>()\n\n  const load = useCallback(() => {\n    if (!src) return\n\n    flush()\n\n    const img = new Image()\n    img.src = src\n    if (crossOrigin) img.crossOrigin = crossOrigin\n    if (srcSet) img.srcset = srcSet\n    if (sizes) img.sizes = sizes\n    if (loading) img.loading = loading\n\n    img.onload = (event) => {\n      flush()\n      setStatus(\"loaded\")\n      onLoad?.((event as unknown) as ImageEvent)\n    }\n    img.onerror = (error) => {\n      flush()\n      setStatus(\"failed\")\n      onError?.(error as any)\n    }\n\n    imageRef.current = img\n  }, [src, crossOrigin, srcSet, sizes, onLoad, onError, loading])\n\n  const flush = () => {\n    if (imageRef.current) {\n      imageRef.current.onload = null\n      imageRef.current.onerror = null\n      imageRef.current = null\n    }\n  }\n\n  useSafeLayoutEffect(() => {\n    /**\n     * If user opts out of the fallback/placeholder\n     * logic, let's bail out.\n     */\n    if (ignoreFallback) return undefined\n\n    if (status === \"loading\") {\n      load()\n    }\n    return () => {\n      flush()\n    }\n  }, [status, load, ignoreFallback])\n\n  /**\n   * If user opts out of the fallback/placeholder\n   * logic, let's just return 'loaded'\n   */\n  return ignoreFallback ? \"loaded\" : status\n}\n\nexport type UseImageReturn = ReturnType<typeof useImage>\n"],"sourceRoot":""}

package/build/static/js/11.cc98cce3.chunk.js

@@ -0,0 +1,2 @@
+(this["webpackJsonpconstruct-hub-webapp"]=this["webpackJsonpconstruct-hub-webapp"]||[]).push([[11],{291:function(e,t,c){"use strict";c.d(t,"a",(function(){return o}));var n=c(193),a=c(1),r=function(e){var t=e.children;return Object(a.jsx)(n.a,{as:"em",color:"blue.500",fontWeight:"bold",children:t})},o=function(e){var t=e.limit,c=e.offset,o=e.count,i=e.filtered,s=t*c,l=s+t;return Object(a.jsxs)(n.a,{children:["Displaying"," ",Object(a.jsxs)(r,{children:[o?s+1:o," - ",l>o?o:l]})," ","of ",Object(a.jsx)(r,{children:o})," ",i?"search results":"constructs","."]})}},292:function(e,t,c){"use strict";c.d(t,"a",(function(){return n}));var n=25},294:function(e,t,c){"use strict";c.d(t,"a",(function(){return S}));var n=c(352),a=c(298),r=c(143),o=c(203),i=c(6),s=c(201),l=c(29),u=c(1),j=function(e){var t=e.icon,c=e.offset,n=e.getPageUrl,a={"aria-label":"Page ".concat(c," link"),borderRadius:"md",borderColor:"blue.500",colorScheme:"blue",icon:Object(u.jsx)(t,{color:"blue.500",h:5,w:5}),mx:2,h:10,w:10,variant:"outline"};return void 0!==c?Object(u.jsx)(s.a,Object(i.a)(Object(i.a)({},a),{},{as:l.b,to:n({offset:c})})):Object(u.jsx)(s.a,Object(i.a)(Object(i.a)({},a),{},{disabled:!0}))},f=c(4),b=c(220),d=c(193),g=c(0),O=c(18),h=function(e){var t=e.pageLimit,c=e.offset,n=e.getPageUrl,a=Object(g.useState)((c+1).toString()),r=Object(f.a)(a,2),i=r[0],s=r[1],l=Object(O.g)().push;Object(g.useEffect)((function(){s((c+1).toString())}),[c]);return Object(u.jsxs)(o.a,{align:"center",as:"form",mx:2,onSubmit:function(e){e.preventDefault(),l(n({offset:parseInt(i)-1}))},children:[Object(u.jsx)(b.a,{colorScheme:"blue",h:10,max:t+1,min:1,name:"page",onChange:function(e){e.preventDefault(),s(e.target.value)},p:0,textAlign:"center",type:"number",value:i,w:10}),Object(u.jsxs)(d.a,{ml:2,w:"max-content",children:["of ",t+1]})]})},p=c(351),x=c(148),v={children:"Next Page",colorScheme:"blue",rightIcon:Object(u.jsx)(p.a,{color:"white"})},m=function(e){var t=e.nextPageUrl;return t?Object(u.jsx)(x.a,Object(i.a)(Object(i.a)({},v),{},{as:l.b,to:t})):Object(u.jsx)(x.a,Object(i.a)(Object(i.a)({},v),{},{disabled:!0}))},S=function(e){var t=e.offset,c=e.pageLimit,i=e.getPageUrl,s=t<c?t+1:void 0,l=t>0?t-1:void 0;return Object(u.jsxs)(r.a,{alignItems:"center",pt:4,templateColumns:"repeat(3, 1fr)",templateRows:"1fr",children:[Object(u.jsx)(r.b,{colStart:2,justifySelf:"center",children:Object(u.jsx)(m,{nextPageUrl:s?i({offset:s}):void 0})}),Object(u.jsx)(r.b,{colStart:3,justifySelf:"end",children:Object(u.jsxs)(o.a,{align:"center",justify:"center",py:4,children:[Object(u.jsx)(h,{getPageUrl:i,offset:t,pageLimit:c}),Object(u.jsx)(j,{getPageUrl:i,icon:n.a,offset:l}),Object(u.jsx)(j,{getPageUrl:i,icon:a.a,offset:s})]})})]})}},598:function(e,t,c){"use strict";c.r(t),c.d(t,"SearchResults",(function(){return m})),c.d(t,"default",(function(){return m}));var n=c(6),a=c(203),r=c(188),o=c(205),i=c(0),s=c(18),l=c(119),u=c(228),j=c(348),f=c(11),b=c(116),d=c(120),g=c(118),O=c(112),h=c(294),p=c(291),x=c(292),v=c(1),m=function(){var e,t,c=Object(g.a)(),m=decodeURIComponent(null!==(e=c.get(f.b.SEARCH_QUERY))&&void 0!==e?e:""),S=c.get(f.b.LANGUAGE),w=Object(d.a)({defaultQuery:null!==m&&void 0!==m?m:void 0,defaultLanguage:null!==S&&void 0!==S?S:void 0}),y=function(e){var t=parseInt(e);return"NaN"==="".concat(t)?0:t}(null!==(t=c.get(f.b.OFFSET))&&void 0!==t?t:"0"),U=Object(s.g)().push,P=Object(b.a)({query:m,offset:y,limit:x.a,language:S}),E=P.results,L=P.page,C=P.pageLimit,R=function(e){var t,c;return Object(O.c)({query:null!==(t=e.q)&&void 0!==t?t:m,language:null!==S&&void 0!==S?S:void 0,offset:null!==(c=e.offset)&&void 0!==c?c:y})};return Object(i.useEffect)((function(){E.length&&(y<0||y>C)&&U(R(y<0?{offset:0}:{offset:C}))}),[E,C,y]),Object(i.useEffect)((function(){m!==w.query&&w.setQuery(m)}),[m]),Object(v.jsx)(u.a,{meta:{title:m||"Search",description:m?"".concat(E.length," results for ").concat(m," at Construct Hub"):"Search reusable components for your cloud application"},pageName:"search",children:Object(v.jsxs)(a.a,{direction:"column",maxW:"100vw",children:[Object(v.jsx)(r.a,{p:4,children:Object(v.jsx)(l.a,Object(n.a)({},w))}),Object(v.jsx)(o.a,{}),Object(v.jsxs)(r.a,{p:4,children:[Object(v.jsx)(a.a,{align:"center",justify:"space-between",pb:4,wrap:"wrap",children:Object(v.jsx)(p.a,{count:E.length,filtered:!!m,limit:x.a,offset:y})}),Object(v.jsx)(j.a,{language:null!==S&&void 0!==S?S:void 0,results:L}),Object(v.jsx)(h.a,{getPageUrl:R,limit:x.a,offset:y,pageLimit:C})]})]})})}}}]);
+//# sourceMappingURL=11.cc98cce3.chunk.js.map

package/build/static/js/11.cc98cce3.chunk.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["views/SearchResults/components/ShowingDetails.tsx","views/SearchResults/constants.ts","views/SearchResults/components/ArrowButton.tsx","views/SearchResults/components/GoToPage.tsx","views/SearchResults/components/NextPage.tsx","views/SearchResults/components/PageControls.tsx","views/SearchResults/SearchResults.tsx"],"names":["Em","children","as","color","fontWeight","ShowingDetails","limit","offset","count","filtered","first","last","LIMIT","ArrowButton","Icon","icon","getPageUrl","props","borderRadius","borderColor","colorScheme","h","w","mx","variant","undefined","Link","to","disabled","GoToPage","pageLimit","useState","toString","inputValue","setInputValue","push","useHistory","useEffect","align","onSubmit","e","preventDefault","parseInt","max","min","name","onChange","target","value","p","textAlign","type","ml","btnProps","rightIcon","ArrowForward","NextPage","nextPageUrl","PageControls","nextOffset","prevOffset","alignItems","pt","templateColumns","templateRows","colStart","justifySelf","justify","py","ChevronLeftIcon","ChevronRightIcon","SearchResults","queryParams","useQueryParams","searchQuery","decodeURIComponent","get","QUERY_PARAMS","SEARCH_QUERY","languageQuery","LANGUAGE","searchAPI","useCatalogSearch","defaultQuery","defaultLanguage","val","result","toNum","OFFSET","useCatalogResults","query","language","results","page","getUrl","params","getSearchPath","q","length","setQuery","Page","meta","title","description","pageName","direction","maxW","CatalogSearch","pb","wrap","Results"],"mappings":"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","file":"static/js/11.cc98cce3.chunk.js","sourcesContent":["import { Text } from \"@chakra-ui/react\";\nimport { FunctionComponent } from \"react\";\n\nexport interface ShowingDetailsProps {\n  limit: number;\n  offset: number;\n  count: number;\n  filtered: boolean;\n}\n\nconst Em: FunctionComponent = ({ children }) => (\n  <Text as=\"em\" color=\"blue.500\" fontWeight=\"bold\">\n    {children}\n  </Text>\n);\n\nexport const ShowingDetails: FunctionComponent<ShowingDetailsProps> = ({\n  limit,\n  offset,\n  count,\n  filtered,\n}) => {\n  const first = limit * offset;\n  const last = first + limit;\n  return (\n    <Text>\n      Displaying{\" \"}\n      <Em>\n        {count ? first + 1 : count} - {last > count ? count : last}\n      </Em>{\" \"}\n      of <Em>{count}</Em> {filtered ? \"search results\" : \"constructs\"}.\n    </Text>\n  );\n};\n","import type { QueryParamKey } from \"../../constants/url\";\n\nexport const LIMITS = [25, 50, 75, 100];\nexport const LIMIT = LIMITS[0];\n\nexport type SearchQueryParam = Extract<QueryParamKey, \"offset\" | \"q\">;\n","import { IconButton, IconProps } from \"@chakra-ui/react\";\nimport type { FunctionComponent } from \"react\";\nimport { Link } from \"react-router-dom\";\n\nexport interface ArrowButtonProps {\n  icon: FunctionComponent<IconProps>;\n  offset?: number;\n  getPageUrl: (params: { offset: number }) => string;\n}\n\nexport const ArrowButton: FunctionComponent<ArrowButtonProps> = ({\n  icon: Icon,\n  offset,\n  getPageUrl,\n}) => {\n  const label = `Page ${offset} link`;\n\n  const props = {\n    \"aria-label\": label,\n    borderRadius: \"md\",\n    borderColor: \"blue.500\",\n    colorScheme: \"blue\",\n    icon: <Icon color=\"blue.500\" h={5} w={5} />,\n    mx: 2,\n    h: 10,\n    w: 10,\n    variant: \"outline\",\n  };\n\n  if (offset !== undefined) {\n    return <IconButton {...props} as={Link} to={getPageUrl({ offset })} />;\n  }\n\n  return <IconButton {...props} disabled />;\n};\n","import { Flex, Input, Text } from \"@chakra-ui/react\";\nimport {\n  FormEventHandler,\n  FunctionComponent,\n  SyntheticEvent,\n  useEffect,\n  useState,\n} from \"react\";\nimport { useHistory } from \"react-router-dom\";\n\nexport interface GoToPageProps {\n  pageLimit: number;\n  offset: number;\n  getPageUrl: (params: { offset: number }) => string;\n}\n\nexport const GoToPage: FunctionComponent<GoToPageProps> = ({\n  pageLimit,\n  offset,\n  getPageUrl,\n}) => {\n  const [inputValue, setInputValue] = useState((offset + 1).toString());\n  const { push } = useHistory();\n\n  useEffect(() => {\n    setInputValue((offset + 1).toString());\n  }, [offset]);\n\n  const onInputChange = (e: SyntheticEvent<HTMLInputElement>) => {\n    e.preventDefault();\n    setInputValue((e.target as HTMLInputElement).value);\n  };\n\n  const onSubmit: FormEventHandler<HTMLInputElement> = (e) => {\n    e.preventDefault();\n    push(getPageUrl({ offset: parseInt(inputValue) - 1 }));\n  };\n\n  return (\n    <Flex align=\"center\" as=\"form\" mx={2} onSubmit={onSubmit}>\n      <Input\n        colorScheme=\"blue\"\n        h={10}\n        max={pageLimit + 1}\n        min={1}\n        name=\"page\"\n        onChange={onInputChange}\n        p={0}\n        textAlign=\"center\"\n        type=\"number\"\n        value={inputValue}\n        w={10}\n      />\n      <Text ml={2} w=\"max-content\">\n        of {pageLimit + 1}\n      </Text>\n    </Flex>\n  );\n};\n","import { ArrowForwardIcon } from \"@chakra-ui/icons\";\nimport { Button } from \"@chakra-ui/react\";\nimport type { FunctionComponent } from \"react\";\nimport { Link } from \"react-router-dom\";\n\nexport interface NextPageProps {\n  nextPageUrl?: string;\n}\n\nconst btnProps = {\n  children: \"Next Page\",\n  colorScheme: \"blue\",\n  rightIcon: <ArrowForwardIcon color=\"white\" />,\n};\n\nexport const NextPage: FunctionComponent<NextPageProps> = ({ nextPageUrl }) => {\n  if (!nextPageUrl) {\n    return <Button {...btnProps} disabled />;\n  }\n\n  return <Button {...btnProps} as={Link} to={nextPageUrl} />;\n};\n","import { ChevronLeftIcon, ChevronRightIcon } from \"@chakra-ui/icons\";\nimport { Flex, Grid, GridItem } from \"@chakra-ui/react\";\nimport type { FunctionComponent } from \"react\";\nimport { ArrowButton } from \"./ArrowButton\";\nimport { GoToPage } from \"./GoToPage\";\nimport { NextPage } from \"./NextPage\";\n\nexport interface PageControlsProps {\n  limit: number;\n  offset: number;\n  pageLimit: number;\n  getPageUrl: (params: { offset?: number }) => string;\n}\n\nexport const PageControls: FunctionComponent<PageControlsProps> = ({\n  offset,\n  pageLimit,\n  getPageUrl,\n}) => {\n  const nextOffset = offset < pageLimit ? offset + 1 : undefined;\n  const prevOffset = offset > 0 ? offset - 1 : undefined;\n\n  return (\n    <Grid\n      alignItems=\"center\"\n      pt={4}\n      templateColumns=\"repeat(3, 1fr)\"\n      templateRows=\"1fr\"\n    >\n      <GridItem colStart={2} justifySelf=\"center\">\n        <NextPage\n          nextPageUrl={\n            nextOffset ? getPageUrl({ offset: nextOffset }) : undefined\n          }\n        />\n      </GridItem>\n      <GridItem colStart={3} justifySelf=\"end\">\n        <Flex align=\"center\" justify=\"center\" py={4}>\n          <GoToPage\n            getPageUrl={getPageUrl}\n            offset={offset}\n            pageLimit={pageLimit}\n          />\n          <ArrowButton\n            getPageUrl={getPageUrl}\n            icon={ChevronLeftIcon}\n            offset={prevOffset}\n          />\n          <ArrowButton\n            getPageUrl={getPageUrl}\n            icon={ChevronRightIcon}\n            offset={nextOffset}\n          />\n        </Flex>\n      </GridItem>\n    </Grid>\n  );\n};\n","import { Box, Divider, Flex } from \"@chakra-ui/react\";\nimport { FunctionComponent, useEffect } from \"react\";\nimport { useHistory } from \"react-router-dom\";\nimport { CatalogSearch } from \"../../components/CatalogSearch\";\nimport { Page } from \"../../components/Page\";\nimport { Results } from \"../../components/Results\";\nimport { Language } from \"../../constants/languages\";\nimport { QUERY_PARAMS } from \"../../constants/url\";\nimport { useCatalogResults } from \"../../hooks/useCatalogResults\";\nimport { useCatalogSearch } from \"../../hooks/useCatalogSearch\";\nimport { useQueryParams } from \"../../hooks/useQueryParams\";\nimport { getSearchPath } from \"../../util/url\";\nimport { PageControls } from \"./components/PageControls\";\nimport { ShowingDetails } from \"./components/ShowingDetails\";\nimport { LIMIT, SearchQueryParam } from \"./constants\";\n\nconst toNum = (val: string) => {\n  const result = parseInt(val);\n\n  if (`${result}` === \"NaN\") {\n    return 0;\n  }\n\n  return result;\n};\n\nexport const SearchResults: FunctionComponent = () => {\n  const queryParams = useQueryParams();\n\n  const searchQuery = decodeURIComponent(\n    queryParams.get(QUERY_PARAMS.SEARCH_QUERY) ?? \"\"\n  );\n\n  const languageQuery = queryParams.get(\n    QUERY_PARAMS.LANGUAGE\n  ) as Language | null;\n\n  const searchAPI = useCatalogSearch({\n    defaultQuery: searchQuery ?? undefined,\n    defaultLanguage: languageQuery ?? undefined,\n  });\n\n  const offset = toNum(queryParams.get(QUERY_PARAMS.OFFSET) ?? \"0\");\n\n  const { push } = useHistory();\n\n  const { results, page, pageLimit } = useCatalogResults({\n    query: searchQuery,\n    offset,\n    limit: LIMIT,\n    language: languageQuery,\n  });\n\n  const getUrl = (\n    params: Partial<{ [key in SearchQueryParam]: number | string }>\n  ) => {\n    return getSearchPath({\n      query: (params.q ?? searchQuery) as string,\n      language: languageQuery ?? undefined,\n      offset: params.offset ?? offset,\n    });\n  };\n\n  useEffect(() => {\n    // If the query has results but the page has nothing to show...\n    if (results.length && (offset < 0 || offset > pageLimit)) {\n      // Handle an out of bounds offset\n      if (offset < 0) {\n        push(getUrl({ offset: 0 }));\n      } else {\n        // Offset is too large, just take last page\n        push(getUrl({ offset: pageLimit }));\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [results, pageLimit, offset]);\n\n  useEffect(() => {\n    // Reflect changes to queryParam to search input (specifically for tag clicks)\n    if (searchQuery !== searchAPI.query) {\n      searchAPI.setQuery(searchQuery);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [searchQuery]);\n\n  return (\n    <Page\n      meta={{\n        title: searchQuery || \"Search\",\n        description: searchQuery\n          ? `${results.length} results for ${searchQuery} at Construct Hub`\n          : \"Search reusable components for your cloud application\",\n      }}\n      pageName=\"search\"\n    >\n      <Flex direction=\"column\" maxW=\"100vw\">\n        <Box p={4}>\n          <CatalogSearch {...searchAPI} />\n        </Box>\n        <Divider />\n        <Box p={4}>\n          <Flex align=\"center\" justify=\"space-between\" pb={4} wrap=\"wrap\">\n            <ShowingDetails\n              count={results.length}\n              filtered={!!searchQuery}\n              limit={LIMIT}\n              offset={offset}\n            />\n          </Flex>\n          <Results language={languageQuery ?? undefined} results={page} />\n          <PageControls\n            getPageUrl={getUrl}\n            limit={LIMIT}\n            offset={offset}\n            pageLimit={pageLimit}\n          />\n        </Box>\n      </Flex>\n    </Page>\n  );\n};\n"],"sourceRoot":""}

package/build/static/js/{12.23aa8975.chunk.js → 12.d831689a.chunk.js}

@@ -1,2 +1,2 @@
-(this["webpackJsonpconstruct-hub-webapp"]=this["webpackJsonpconstruct-hub-webapp"]||[]).push([[12],{244:function(e,t,a){"use strict";a.d(t,"a",(function(){return u}));var r=a(6),c=a(22),n=a(21),i=a(188),s=a(295),o=a(1),l=["sources"],u=Object(n.a)((function(e,t){var a=e.sources,n=Object(c.a)(e,l);return Object(o.jsxs)(i.a,{as:"picture",children:[null===a||void 0===a?void 0:a.map((function(e,t){return Object(o.jsx)("source",{media:e.media,srcSet:e.srcSet},t)})),Object(o.jsx)(s.a,Object(r.a)({ref:t},n))]})}));u.displayName="Picture"},295:function(e,t,a){"use strict";a.d(t,"a",(function(){return j}));var r=a(21),c=a(25),n=a(26),i=a(8),s=a(0),o=a(4),l=a(140);function u(){return u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e},u.apply(this,arguments)}function b(e,t){if(null==e)return{};var a,r,c={},n=Object.keys(e);for(r=0;r<n.length;r++)a=n[r],t.indexOf(a)>=0||(c[a]=e[a]);return c}var d=s.forwardRef((function(e,t){var a=e.htmlWidth,r=e.htmlHeight,c=e.alt,n=b(e,["htmlWidth","htmlHeight","alt"]);return s.createElement("img",u({width:a,height:r,ref:t,alt:c},n))})),j=Object(r.a)((function(e,t){var a=e.fallbackSrc,r=e.fallback,i=e.src,j=e.srcSet,f=e.align,h=e.fit,g=e.loading,p=e.ignoreFallback,O=e.crossOrigin,m=b(e,["fallbackSrc","fallback","src","srcSet","align","fit","loading","ignoreFallback","crossOrigin"]),x=null!=g||p||void 0===a&&void 0===r,v=function(e){var t=e.loading,a=e.src,r=e.srcSet,c=e.onLoad,n=e.onError,i=e.crossOrigin,u=e.sizes,b=e.ignoreFallback,d=Object(s.useState)("pending"),j=Object(o.a)(d,2),f=j[0],h=j[1];Object(s.useEffect)((function(){h(a?"loading":"pending")}),[a]);var g=Object(s.useRef)(),p=Object(s.useCallback)((function(){if(a){O();var e=new Image;e.src=a,i&&(e.crossOrigin=i),r&&(e.srcset=r),u&&(e.sizes=u),t&&(e.loading=t),e.onload=function(e){O(),h("loaded"),null==c||c(e)},e.onerror=function(e){O(),h("failed"),null==n||n(e)},g.current=e}}),[a,i,r,u,c,n,t]),O=function(){g.current&&(g.current.onload=null,g.current.onerror=null,g.current=null)};return Object(l.a)((function(){if(!b)return"loading"===f&&p(),function(){O()}}),[f,p,b]),b?"loaded":f}(u({},e,{ignoreFallback:x})),S=u({ref:t,objectFit:h,objectPosition:f},x?m:Object(n.g)(m,["onError","onLoad"]));return"loaded"!==v?r||s.createElement(c.a.img,u({as:d,className:"chakra-image__placeholder",src:a},S)):s.createElement(c.a.img,u({as:d,src:i,srcSet:j,crossOrigin:O,loading:g,className:"chakra-image"},S))}));i.a&&(j.displayName="Image")},597:function(e,t,a){"use strict";a.r(t),a.d(t,"Home",(function(){return K})),a.d(t,"default",(function(){return K}));var r=a(6),c=a(4),n=a(188),i=a(225),s=a(209),o=a(594),l=a(0),u=a(66),b=a(119),d=a(228),j=a(244),f=a(348),h=a(116),g=a(120),p=a(351),O=a(352),m=a(298),x=a(143),v=a(148),S=a(203),k=a(201),w=a(56),y=Object(w.a)("home",["headings","results","nextPageBtn","nextIcon","prevIcon"]),C=a(1),P={borderRadius:"md",borderColor:"blue.500",colorScheme:"blue",mx:2,h:10,w:10,variant:"outline"},I={color:"blue.500",h:5,w:5},D=function(e){var t=e.offset,a=e.pageLimit,c=e.setOffset,n=t===a,i=0===t,s=function(){c(t+1)};return Object(C.jsxs)(x.a,{alignItems:"center",pt:6,templateColumns:"repeat(3, 1fr)",templateRows:"1fr",children:[Object(C.jsx)(x.b,{colStart:2,justifySelf:"center",children:Object(C.jsx)(v.a,{colorScheme:"blue","data-testid":y.nextPageBtn,disabled:n,onClick:s,rightIcon:Object(C.jsx)(p.a,{color:"white"}),children:"Next Page"})}),Object(C.jsx)(x.b,{colStart:3,justifySelf:"end",children:Object(C.jsxs)(S.a,{align:"center",justify:"center",py:4,children:[Object(C.jsx)(k.a,Object(r.a)({"aria-label":"Previous Page","data-testid":y.prevIcon,disabled:i,icon:Object(C.jsx)(O.a,Object(r.a)({},I)),onClick:function(){c(t-1)}},P)),Object(C.jsx)(k.a,Object(r.a)({"aria-label":"Next Page","data-testid":y.nextIcon,disabled:n,icon:Object(C.jsx)(m.a,Object(r.a)({},I)),onClick:s},P))]})})]})},F={optimal:[{media:"(max-width:1024px)",srcSet:"/assets/hive@50.webp"},{media:"(min-width:1024px)",srcSet:"/assets/hive@100.webp"},{media:"(min-width:1024px)",srcSet:"/assets/hive@100.png"}],fallback:"/assets/hive@50.png"},K=function(){var e=Object(g.a)(),t=Object(l.useState)(0),a=Object(c.a)(t,2),p=a[0],O=a[1],m=Object(h.a)({offset:p,limit:20,query:"",language:null,sort:u.a.PublishDateDesc}),x=m.results,v=m.page,S=m.pageLimit;return Object(C.jsx)(d.a,{meta:{title:"Construct Hub",description:"Construct Hub helps developers find open-source construct libraries for use with AWS CDK, CDK8s, CDKTf and other construct-based tools.",suffix:!1},pageName:"home",children:Object(C.jsxs)(n.a,{position:"relative",children:[Object(C.jsx)(j.a,{alt:"",h:"540px",position:"absolute",sources:F.optimal,src:F.fallback,top:"0",w:"100%",zIndex:"hide"}),Object(C.jsxs)(i.a,{align:"stretch",direction:"column",justify:"center",m:"0 auto",maxW:"container.lg",p:[10,15,20],spacing:8,children:[Object(C.jsxs)(i.a,{color:"blue.800","data-testid":y.headings,spacing:4,textAlign:"center",children:[Object(C.jsx)(s.a,{size:"2xl",children:"Find reusable components for your cloud applications"}),Object(C.jsx)(s.a,{as:"h3",size:"md",children:"AWS CDK | CDK for Terraform | CDK For Kubernetes"}),Object(C.jsxs)(s.a,{as:"h4",mb:8,size:"sm",children:["Search from"," ",x.length?Object(C.jsx)(n.a,{as:"span",color:"blue.500",children:x.length}):Object(C.jsx)(o.a,{display:"inline-block",h:3,w:8})," ","construct libraries"]})]}),Object(C.jsx)(b.a,Object(r.a)({},e))]}),Object(C.jsxs)(n.a,{p:4,pb:8,children:[Object(C.jsx)(f.a,{results:v}),Object(C.jsx)(D,{offset:p,pageLimit:S,setOffset:O})]})]})})}}}]);
-//# sourceMappingURL=12.23aa8975.chunk.js.map
+(this["webpackJsonpconstruct-hub-webapp"]=this["webpackJsonpconstruct-hub-webapp"]||[]).push([[12],{244:function(e,t,a){"use strict";a.d(t,"a",(function(){return u}));var r=a(6),c=a(22),n=a(21),i=a(188),s=a(295),o=a(1),l=["sources"],u=Object(n.a)((function(e,t){var a=e.sources,n=Object(c.a)(e,l);return Object(o.jsxs)(i.a,{as:"picture",children:[null===a||void 0===a?void 0:a.map((function(e,t){return Object(o.jsx)("source",{media:e.media,srcSet:e.srcSet},t)})),Object(o.jsx)(s.a,Object(r.a)({ref:t},n))]})}));u.displayName="Picture"},295:function(e,t,a){"use strict";a.d(t,"a",(function(){return j}));var r=a(21),c=a(25),n=a(26),i=a(8),s=a(0),o=a(4),l=a(140);function u(){return u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e},u.apply(this,arguments)}function b(e,t){if(null==e)return{};var a,r,c={},n=Object.keys(e);for(r=0;r<n.length;r++)a=n[r],t.indexOf(a)>=0||(c[a]=e[a]);return c}var d=s.forwardRef((function(e,t){var a=e.htmlWidth,r=e.htmlHeight,c=e.alt,n=b(e,["htmlWidth","htmlHeight","alt"]);return s.createElement("img",u({width:a,height:r,ref:t,alt:c},n))})),j=Object(r.a)((function(e,t){var a=e.fallbackSrc,r=e.fallback,i=e.src,j=e.srcSet,f=e.align,h=e.fit,g=e.loading,p=e.ignoreFallback,O=e.crossOrigin,m=b(e,["fallbackSrc","fallback","src","srcSet","align","fit","loading","ignoreFallback","crossOrigin"]),x=null!=g||p||void 0===a&&void 0===r,v=function(e){var t=e.loading,a=e.src,r=e.srcSet,c=e.onLoad,n=e.onError,i=e.crossOrigin,u=e.sizes,b=e.ignoreFallback,d=Object(s.useState)("pending"),j=Object(o.a)(d,2),f=j[0],h=j[1];Object(s.useEffect)((function(){h(a?"loading":"pending")}),[a]);var g=Object(s.useRef)(),p=Object(s.useCallback)((function(){if(a){O();var e=new Image;e.src=a,i&&(e.crossOrigin=i),r&&(e.srcset=r),u&&(e.sizes=u),t&&(e.loading=t),e.onload=function(e){O(),h("loaded"),null==c||c(e)},e.onerror=function(e){O(),h("failed"),null==n||n(e)},g.current=e}}),[a,i,r,u,c,n,t]),O=function(){g.current&&(g.current.onload=null,g.current.onerror=null,g.current=null)};return Object(l.a)((function(){if(!b)return"loading"===f&&p(),function(){O()}}),[f,p,b]),b?"loaded":f}(u({},e,{ignoreFallback:x})),S=u({ref:t,objectFit:h,objectPosition:f},x?m:Object(n.g)(m,["onError","onLoad"]));return"loaded"!==v?r||s.createElement(c.a.img,u({as:d,className:"chakra-image__placeholder",src:a},S)):s.createElement(c.a.img,u({as:d,src:i,srcSet:j,crossOrigin:O,loading:g,className:"chakra-image"},S))}));i.a&&(j.displayName="Image")},597:function(e,t,a){"use strict";a.r(t),a.d(t,"Home",(function(){return K})),a.d(t,"default",(function(){return K}));var r=a(6),c=a(4),n=a(188),i=a(225),s=a(209),o=a(595),l=a(0),u=a(64),b=a(119),d=a(228),j=a(244),f=a(348),h=a(116),g=a(120),p=a(351),O=a(352),m=a(298),x=a(143),v=a(148),S=a(203),k=a(201),w=a(56),y=Object(w.a)("home",["headings","results","nextPageBtn","nextIcon","prevIcon"]),C=a(1),P={borderRadius:"md",borderColor:"blue.500",colorScheme:"blue",mx:2,h:10,w:10,variant:"outline"},I={color:"blue.500",h:5,w:5},D=function(e){var t=e.offset,a=e.pageLimit,c=e.setOffset,n=t===a,i=0===t,s=function(){c(t+1)};return Object(C.jsxs)(x.a,{alignItems:"center",pt:6,templateColumns:"repeat(3, 1fr)",templateRows:"1fr",children:[Object(C.jsx)(x.b,{colStart:2,justifySelf:"center",children:Object(C.jsx)(v.a,{colorScheme:"blue","data-testid":y.nextPageBtn,disabled:n,onClick:s,rightIcon:Object(C.jsx)(p.a,{color:"white"}),children:"Next Page"})}),Object(C.jsx)(x.b,{colStart:3,justifySelf:"end",children:Object(C.jsxs)(S.a,{align:"center",justify:"center",py:4,children:[Object(C.jsx)(k.a,Object(r.a)({"aria-label":"Previous Page","data-testid":y.prevIcon,disabled:i,icon:Object(C.jsx)(O.a,Object(r.a)({},I)),onClick:function(){c(t-1)}},P)),Object(C.jsx)(k.a,Object(r.a)({"aria-label":"Next Page","data-testid":y.nextIcon,disabled:n,icon:Object(C.jsx)(m.a,Object(r.a)({},I)),onClick:s},P))]})})]})},F={optimal:[{media:"(max-width:1024px)",srcSet:"/assets/hive@50.webp"},{media:"(min-width:1024px)",srcSet:"/assets/hive@100.webp"},{media:"(min-width:1024px)",srcSet:"/assets/hive@100.png"}],fallback:"/assets/hive@50.png"},K=function(){var e=Object(g.a)(),t=Object(l.useState)(0),a=Object(c.a)(t,2),p=a[0],O=a[1],m=Object(h.a)({offset:p,limit:20,query:"",language:null,sort:u.a.PublishDateDesc}),x=m.results,v=m.page,S=m.pageLimit;return Object(C.jsx)(d.a,{meta:{title:"Construct Hub",description:"Construct Hub helps developers find open-source construct libraries for use with AWS CDK, CDK8s, CDKTf and other construct-based tools.",suffix:!1},pageName:"home",children:Object(C.jsxs)(n.a,{position:"relative",children:[Object(C.jsx)(j.a,{alt:"",h:"540px",position:"absolute",sources:F.optimal,src:F.fallback,top:"0",w:"100%",zIndex:"hide"}),Object(C.jsxs)(i.a,{align:"stretch",direction:"column",justify:"center",m:"0 auto",maxW:"container.lg",p:[10,15,20],spacing:8,children:[Object(C.jsxs)(i.a,{color:"blue.800","data-testid":y.headings,spacing:4,textAlign:"center",children:[Object(C.jsx)(s.a,{size:"2xl",children:"Find reusable components for your cloud applications"}),Object(C.jsx)(s.a,{as:"h3",size:"md",children:"AWS CDK | CDK for Terraform | CDK For Kubernetes"}),Object(C.jsxs)(s.a,{as:"h4",mb:8,size:"sm",children:["Search from"," ",x.length?Object(C.jsx)(n.a,{as:"span",color:"blue.500",children:x.length}):Object(C.jsx)(o.a,{display:"inline-block",h:3,w:8})," ","construct libraries"]})]}),Object(C.jsx)(b.a,Object(r.a)({},e))]}),Object(C.jsxs)(n.a,{p:4,pb:8,children:[Object(C.jsx)(f.a,{results:v}),Object(C.jsx)(D,{offset:p,pageLimit:S,setOffset:O})]})]})})}}}]);
+//# sourceMappingURL=12.d831689a.chunk.js.map

package/build/static/js/{12.23aa8975.chunk.js.map → 12.d831689a.chunk.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["components/Picture/Picture.tsx","../../../src/image.tsx","../../../src/use-image.ts","views/Home/testIds.ts","views/Home/HomePageControls.tsx","views/Home/Home.tsx"],"names":["Picture","forwardRef","ref","sources","props","as","map","source","idx","media","srcSet","displayName","NativeImage","alt","width","height","Image","crossOrigin","shouldIgnore","loading","fallbackSrc","fallback","status","ignoreFallback","useState","useEffect","setStatus","src","imageRef","useRef","load","useCallback","flush","img","event","onLoad","error","onError","sizes","useSafeLayoutEffect","useImage","shared","objectFit","objectPosition","align","rest","omit","className","testIds","createTestIds","iconBtnProps","borderRadius","borderColor","colorScheme","mx","h","w","variant","iconProps","color","HomePageControls","offset","pageLimit","setOffset","nextDisabled","prevDisabled","getNextPage","alignItems","pt","templateColumns","templateRows","colStart","justifySelf","nextPageBtn","disabled","onClick","rightIcon","ArrowForward","justify","py","prevIcon","icon","ChevronLeft","nextIcon","ChevronRight","optimal","Home","searchAPI","useCatalogSearch","useCatalogResults","limit","query","language","sort","CatalogSearchSort","PublishDateDesc","results","page","Page","meta","title","description","suffix","pageName","position","top","zIndex","direction","m","maxW","p","spacing","headings","textAlign","size","mb","length","display","CatalogSearch","pb","Results"],"mappings":"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","file":"static/js/12.23aa8975.chunk.js","sourcesContent":["import { Box, HTMLChakraProps, forwardRef, Image } from \"@chakra-ui/react\";\n\nexport interface PictureProps extends HTMLChakraProps<\"img\"> {\n  alt: string;\n  src: string;\n  sources?: {\n    media?: string;\n    srcSet: string;\n  }[];\n}\n\nexport const Picture = forwardRef<PictureProps, \"img\">(\n  ({ sources, ...props }, ref) => (\n    <Box as=\"picture\">\n      {sources?.map((source, idx) => (\n        <source key={idx} media={source.media} srcSet={source.srcSet} />\n      ))}\n      <Image ref={ref} {...props} />\n    </Box>\n  )\n);\n\nPicture.displayName = \"Picture\";\n","import {\n  chakra,\n  PropsOf,\n  SystemProps,\n  forwardRef,\n  HTMLChakraProps,\n} from \"@chakra-ui/system\"\nimport { omit, __DEV__ } from \"@chakra-ui/utils\"\nimport * as React from \"react\"\nimport { useImage, UseImageProps } from \"./use-image\"\n\ninterface NativeImageOptions {\n  /**\n   * The native HTML `width` attribute to the passed to the `img`\n   */\n  htmlWidth?: string | number\n  /**\n   * The native HTML `height` attribute to the passed to the `img`\n   */\n  htmlHeight?: string | number\n}\n\ninterface NativeImageProps extends PropsOf<\"img\">, NativeImageOptions {}\n\nconst NativeImage = React.forwardRef(\n  (props: NativeImageProps, ref: React.Ref<any>) => {\n    const { htmlWidth, htmlHeight, alt, ...rest } = props\n    return (\n      <img\n        width={htmlWidth}\n        height={htmlHeight}\n        ref={ref}\n        alt={alt}\n        {...rest}\n      />\n    )\n  },\n)\n\ninterface ImageOptions extends NativeImageOptions {\n  /**\n   * Fallback image `src` to show if image is loading or image fails.\n   *\n   * Note 🚨: We recommend you use a local image\n   */\n  fallbackSrc?: string\n  /**\n   * Fallback element to show if image is loading or image fails.\n   * @type React.ReactElement\n   */\n  fallback?: React.ReactElement\n  /**\n   * Defines loading strategy\n   */\n  loading?: \"eager\" | \"lazy\"\n  /**\n   * How the image to fit within its bounds.\n   * It maps to css `object-fit` property.\n   * @type SystemProps[\"objectFit\"]\n   */\n  fit?: SystemProps[\"objectFit\"]\n  /**\n   * How to align the image within its bounds.\n   * It maps to css `object-position` property.\n   * @type SystemProps[\"objectPosition\"]\n   */\n  align?: SystemProps[\"objectPosition\"]\n  /**\n   * If `true`, opt out of the `fallbackSrc` logic and use as `img`\n   */\n  ignoreFallback?: boolean\n}\n\nexport interface ImageProps\n  extends UseImageProps,\n    Omit<HTMLChakraProps<\"img\">, keyof UseImageProps>,\n    ImageOptions {}\n\n/**\n * React component that renders an image with support\n * for fallbacks\n *\n * @see Docs https://chakra-ui.com/image\n */\nexport const Image = forwardRef<ImageProps, \"img\">((props, ref) => {\n  const {\n    fallbackSrc,\n    fallback,\n    src,\n    srcSet,\n    align,\n    fit,\n    loading,\n    ignoreFallback,\n    crossOrigin,\n    ...rest\n  } = props\n\n  /**\n   * Defer to native `img` tag if `loading` prop is passed\n   * @see https://github.com/chakra-ui/chakra-ui/issues/1027\n   */\n  const shouldIgnore =\n    loading != null ||\n    ignoreFallback ||\n    (fallbackSrc === undefined && fallback === undefined) // if the user doesn't provide any kind of fallback we should ignore it\n\n  const status = useImage({\n    ...props,\n    ignoreFallback: shouldIgnore,\n  })\n\n  const shared = {\n    ref,\n    objectFit: fit,\n    objectPosition: align,\n    ...(shouldIgnore ? rest : omit(rest, [\"onError\", \"onLoad\"])),\n  }\n\n  if (status !== \"loaded\") {\n    /**\n     * If user passed a custom fallback component,\n     * let's render it here.\n     */\n    if (fallback) return fallback\n\n    return (\n      <chakra.img\n        as={NativeImage}\n        className=\"chakra-image__placeholder\"\n        src={fallbackSrc}\n        {...shared}\n      />\n    )\n  }\n\n  return (\n    <chakra.img\n      as={NativeImage}\n      src={src}\n      srcSet={srcSet}\n      crossOrigin={crossOrigin}\n      loading={loading}\n      className=\"chakra-image\"\n      {...shared}\n    />\n  )\n})\n\nexport interface ImgProps extends HTMLChakraProps<\"img\">, NativeImageOptions {}\n\n/**\n * Fallback component for most SSR users who want to use the native `img` with\n * support for chakra props\n */\nexport const Img = forwardRef<ImgProps, \"img\">((props, ref) => (\n  <chakra.img ref={ref} as={NativeImage} className=\"chakra-image\" {...props} />\n))\n\nif (__DEV__) {\n  Image.displayName = \"Image\"\n}\n","import { useSafeLayoutEffect } from \"@chakra-ui/hooks\"\nimport {\n  ImgHTMLAttributes,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\"\n\ntype NativeImageProps = ImgHTMLAttributes<HTMLImageElement>\n\nexport interface UseImageProps {\n  /**\n   * The image `src` attribute\n   */\n  src?: string\n  /**\n   * The image `srcset` attribute\n   */\n  srcSet?: string\n  /**\n   * The image `sizes` attribute\n   */\n  sizes?: string\n  /**\n   * A callback for when the image `src` has been loaded\n   */\n  onLoad?: NativeImageProps[\"onLoad\"]\n  /**\n   * A callback for when there was an error loading the image `src`\n   */\n  onError?: NativeImageProps[\"onError\"]\n  /**\n   * If `true`, opt out of the `fallbackSrc` logic and use as `img`\n   */\n  ignoreFallback?: boolean\n  /**\n   * The key used to set the crossOrigin on the HTMLImageElement into which the image will be loaded.\n   * This tells the browser to request cross-origin access when trying to download the image data.\n   */\n  crossOrigin?: NativeImageProps[\"crossOrigin\"]\n  loading?: NativeImageProps[\"loading\"]\n}\n\ntype Status = \"loading\" | \"failed\" | \"pending\" | \"loaded\"\n\ntype ImageEvent = React.SyntheticEvent<HTMLImageElement, Event>\n\n/**\n * React hook that loads an image in the browser,\n * and let's us know the `status` so we can show image\n * fallback if it is still `pending`\n *\n * @returns the status of the image loading progress\n *\n * @example\n *\n * ```jsx\n * function App(){\n *   const status = useImage({ src: \"image.png\" })\n *   return status === \"loaded\" ? <img src=\"image.png\" /> : <Placeholder />\n * }\n * ```\n */\nexport function useImage(props: UseImageProps) {\n  const {\n    loading,\n    src,\n    srcSet,\n    onLoad,\n    onError,\n    crossOrigin,\n    sizes,\n    ignoreFallback,\n  } = props\n\n  const [status, setStatus] = useState<Status>(\"pending\")\n\n  useEffect(() => {\n    setStatus(src ? \"loading\" : \"pending\")\n  }, [src])\n\n  const imageRef = useRef<HTMLImageElement | null>()\n\n  const load = useCallback(() => {\n    if (!src) return\n\n    flush()\n\n    const img = new Image()\n    img.src = src\n    if (crossOrigin) img.crossOrigin = crossOrigin\n    if (srcSet) img.srcset = srcSet\n    if (sizes) img.sizes = sizes\n    if (loading) img.loading = loading\n\n    img.onload = (event) => {\n      flush()\n      setStatus(\"loaded\")\n      onLoad?.((event as unknown) as ImageEvent)\n    }\n    img.onerror = (error) => {\n      flush()\n      setStatus(\"failed\")\n      onError?.(error as any)\n    }\n\n    imageRef.current = img\n  }, [src, crossOrigin, srcSet, sizes, onLoad, onError, loading])\n\n  const flush = () => {\n    if (imageRef.current) {\n      imageRef.current.onload = null\n      imageRef.current.onerror = null\n      imageRef.current = null\n    }\n  }\n\n  useSafeLayoutEffect(() => {\n    /**\n     * If user opts out of the fallback/placeholder\n     * logic, let's bail out.\n     */\n    if (ignoreFallback) return undefined\n\n    if (status === \"loading\") {\n      load()\n    }\n    return () => {\n      flush()\n    }\n  }, [status, load, ignoreFallback])\n\n  /**\n   * If user opts out of the fallback/placeholder\n   * logic, let's just return 'loaded'\n   */\n  return ignoreFallback ? \"loaded\" : status\n}\n\nexport type UseImageReturn = ReturnType<typeof useImage>\n","import { createTestIds } from \"../../util/createTestIds\";\n\nconst testIds = createTestIds(\"home\", [\n  \"headings\",\n  \"results\",\n  \"nextPageBtn\",\n  \"nextIcon\",\n  \"prevIcon\",\n] as const);\n\nexport default testIds;\n","import {\n  ArrowForwardIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from \"@chakra-ui/icons\";\nimport { Grid, GridItem, Button, Flex, IconButton } from \"@chakra-ui/react\";\nimport type { Dispatch, FunctionComponent, SetStateAction } from \"react\";\nimport testIds from \"./testIds\";\n\nconst iconBtnProps = {\n  borderRadius: \"md\",\n  borderColor: \"blue.500\",\n  colorScheme: \"blue\",\n  mx: 2,\n  h: 10,\n  w: 10,\n  variant: \"outline\",\n};\n\nconst iconProps = {\n  color: \"blue.500\",\n  h: 5,\n  w: 5,\n};\n\nexport interface HomePageControlsProps {\n  offset: number;\n  pageLimit: number;\n  setOffset: Dispatch<SetStateAction<number>>;\n}\n\nexport const HomePageControls: FunctionComponent<HomePageControlsProps> = ({\n  offset,\n  pageLimit,\n  setOffset,\n}) => {\n  const nextDisabled = offset === pageLimit;\n  const prevDisabled = offset === 0;\n\n  const getNextPage = () => {\n    setOffset(offset + 1);\n  };\n\n  const getPrevPage = () => {\n    setOffset(offset - 1);\n  };\n\n  return (\n    <Grid\n      alignItems=\"center\"\n      pt={6}\n      templateColumns=\"repeat(3, 1fr)\"\n      templateRows=\"1fr\"\n    >\n      <GridItem colStart={2} justifySelf=\"center\">\n        <Button\n          colorScheme=\"blue\"\n          data-testid={testIds.nextPageBtn}\n          disabled={nextDisabled}\n          onClick={getNextPage}\n          rightIcon={<ArrowForwardIcon color=\"white\" />}\n        >\n          Next Page\n        </Button>\n      </GridItem>\n      <GridItem colStart={3} justifySelf=\"end\">\n        <Flex align=\"center\" justify=\"center\" py={4}>\n          <IconButton\n            aria-label=\"Previous Page\"\n            data-testid={testIds.prevIcon}\n            disabled={prevDisabled}\n            icon={<ChevronLeftIcon {...iconProps} />}\n            onClick={getPrevPage}\n            {...iconBtnProps}\n          />\n          <IconButton\n            aria-label=\"Next Page\"\n            data-testid={testIds.nextIcon}\n            disabled={nextDisabled}\n            icon={<ChevronRightIcon {...iconProps} />}\n            onClick={getNextPage}\n            {...iconBtnProps}\n          />\n        </Flex>\n      </GridItem>\n    </Grid>\n  );\n};\n","import { Box, Stack, Heading, Skeleton } from \"@chakra-ui/react\";\nimport { FunctionComponent, useState } from \"react\";\nimport { CatalogSearchSort } from \"../../api/catalog-search/constants\";\nimport { CatalogSearch } from \"../../components/CatalogSearch\";\nimport { Page } from \"../../components/Page\";\nimport { Picture } from \"../../components/Picture\";\nimport { Results } from \"../../components/Results\";\nimport { useCatalogResults } from \"../../hooks/useCatalogResults\";\nimport { useCatalogSearch } from \"../../hooks/useCatalogSearch\";\nimport { HomePageControls } from \"./HomePageControls\";\nimport testIds from \"./testIds\";\n\nconst sources = {\n  optimal: [\n    { media: \"(max-width:1024px)\", srcSet: \"/assets/hive@50.webp\" },\n    { media: \"(min-width:1024px)\", srcSet: \"/assets/hive@100.webp\" },\n    { media: \"(min-width:1024px)\", srcSet: \"/assets/hive@100.png\" },\n  ],\n  fallback: \"/assets/hive@50.png\",\n};\n\nexport const Home: FunctionComponent = () => {\n  const searchAPI = useCatalogSearch();\n  const [offset, setOffset] = useState(0);\n\n  const { results, page, pageLimit } = useCatalogResults({\n    offset,\n    limit: 20,\n    query: \"\",\n    language: null,\n    sort: CatalogSearchSort.PublishDateDesc,\n  });\n\n  return (\n    <Page\n      meta={{\n        title: \"Construct Hub\",\n        description:\n          \"Construct Hub helps developers find open-source construct libraries for use with AWS CDK, CDK8s, CDKTf and other construct-based tools.\",\n        suffix: false,\n      }}\n      pageName=\"home\"\n    >\n      <Box position=\"relative\">\n        <Picture\n          alt={\"\"}\n          h=\"540px\"\n          position=\"absolute\"\n          sources={sources.optimal}\n          src={sources.fallback}\n          top=\"0\"\n          w=\"100%\"\n          zIndex=\"hide\"\n        />\n        {/* Hero Section */}\n        <Stack\n          align=\"stretch\"\n          direction=\"column\"\n          justify=\"center\"\n          m=\"0 auto\"\n          maxW=\"container.lg\"\n          p={[10, 15, 20]}\n          spacing={8}\n        >\n          <Stack\n            color=\"blue.800\"\n            data-testid={testIds.headings}\n            spacing={4}\n            textAlign=\"center\"\n          >\n            <Heading size=\"2xl\">\n              Find reusable components for your cloud applications\n            </Heading>\n            <Heading as=\"h3\" size=\"md\">\n              AWS CDK | CDK for Terraform | CDK For Kubernetes\n            </Heading>\n            <Heading as=\"h4\" mb={8} size=\"sm\">\n              Search from{\" \"}\n              {!results.length ? (\n                <Skeleton display=\"inline-block\" h={3} w={8} />\n              ) : (\n                <Box as=\"span\" color=\"blue.500\">\n                  {results.length}\n                </Box>\n              )}{\" \"}\n              construct libraries\n            </Heading>\n          </Stack>\n          <CatalogSearch {...searchAPI} />\n        </Stack>\n\n        {/* TBD: Trending Libraries in favor of catalog results */}\n        <Box p={4} pb={8}>\n          <Results results={page} />\n          <HomePageControls\n            offset={offset}\n            pageLimit={pageLimit}\n            setOffset={setOffset}\n          />\n        </Box>\n      </Box>\n    </Page>\n  );\n};\n"],"sourceRoot":""}
+{"version":3,"sources":["components/Picture/Picture.tsx","../../../src/image.tsx","../../../src/use-image.ts","views/Home/testIds.ts","views/Home/HomePageControls.tsx","views/Home/Home.tsx"],"names":["Picture","forwardRef","ref","sources","props","as","map","source","idx","media","srcSet","displayName","NativeImage","alt","width","height","Image","crossOrigin","shouldIgnore","loading","fallbackSrc","fallback","status","ignoreFallback","useState","useEffect","setStatus","src","imageRef","useRef","load","useCallback","flush","img","event","onLoad","error","onError","sizes","useSafeLayoutEffect","useImage","shared","objectFit","objectPosition","align","rest","omit","className","testIds","createTestIds","iconBtnProps","borderRadius","borderColor","colorScheme","mx","h","w","variant","iconProps","color","HomePageControls","offset","pageLimit","setOffset","nextDisabled","prevDisabled","getNextPage","alignItems","pt","templateColumns","templateRows","colStart","justifySelf","nextPageBtn","disabled","onClick","rightIcon","ArrowForward","justify","py","prevIcon","icon","ChevronLeft","nextIcon","ChevronRight","optimal","Home","searchAPI","useCatalogSearch","useCatalogResults","limit","query","language","sort","CatalogSearchSort","PublishDateDesc","results","page","Page","meta","title","description","suffix","pageName","position","top","zIndex","direction","m","maxW","p","spacing","headings","textAlign","size","mb","length","display","CatalogSearch","pb","Results"],"mappings":"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","file":"static/js/12.d831689a.chunk.js","sourcesContent":["import { Box, HTMLChakraProps, forwardRef, Image } from \"@chakra-ui/react\";\n\nexport interface PictureProps extends HTMLChakraProps<\"img\"> {\n  alt: string;\n  src: string;\n  sources?: {\n    media?: string;\n    srcSet: string;\n  }[];\n}\n\nexport const Picture = forwardRef<PictureProps, \"img\">(\n  ({ sources, ...props }, ref) => (\n    <Box as=\"picture\">\n      {sources?.map((source, idx) => (\n        <source key={idx} media={source.media} srcSet={source.srcSet} />\n      ))}\n      <Image ref={ref} {...props} />\n    </Box>\n  )\n);\n\nPicture.displayName = \"Picture\";\n","import {\n  chakra,\n  PropsOf,\n  SystemProps,\n  forwardRef,\n  HTMLChakraProps,\n} from \"@chakra-ui/system\"\nimport { omit, __DEV__ } from \"@chakra-ui/utils\"\nimport * as React from \"react\"\nimport { useImage, UseImageProps } from \"./use-image\"\n\ninterface NativeImageOptions {\n  /**\n   * The native HTML `width` attribute to the passed to the `img`\n   */\n  htmlWidth?: string | number\n  /**\n   * The native HTML `height` attribute to the passed to the `img`\n   */\n  htmlHeight?: string | number\n}\n\ninterface NativeImageProps extends PropsOf<\"img\">, NativeImageOptions {}\n\nconst NativeImage = React.forwardRef(\n  (props: NativeImageProps, ref: React.Ref<any>) => {\n    const { htmlWidth, htmlHeight, alt, ...rest } = props\n    return (\n      <img\n        width={htmlWidth}\n        height={htmlHeight}\n        ref={ref}\n        alt={alt}\n        {...rest}\n      />\n    )\n  },\n)\n\ninterface ImageOptions extends NativeImageOptions {\n  /**\n   * Fallback image `src` to show if image is loading or image fails.\n   *\n   * Note 🚨: We recommend you use a local image\n   */\n  fallbackSrc?: string\n  /**\n   * Fallback element to show if image is loading or image fails.\n   * @type React.ReactElement\n   */\n  fallback?: React.ReactElement\n  /**\n   * Defines loading strategy\n   */\n  loading?: \"eager\" | \"lazy\"\n  /**\n   * How the image to fit within its bounds.\n   * It maps to css `object-fit` property.\n   * @type SystemProps[\"objectFit\"]\n   */\n  fit?: SystemProps[\"objectFit\"]\n  /**\n   * How to align the image within its bounds.\n   * It maps to css `object-position` property.\n   * @type SystemProps[\"objectPosition\"]\n   */\n  align?: SystemProps[\"objectPosition\"]\n  /**\n   * If `true`, opt out of the `fallbackSrc` logic and use as `img`\n   */\n  ignoreFallback?: boolean\n}\n\nexport interface ImageProps\n  extends UseImageProps,\n    Omit<HTMLChakraProps<\"img\">, keyof UseImageProps>,\n    ImageOptions {}\n\n/**\n * React component that renders an image with support\n * for fallbacks\n *\n * @see Docs https://chakra-ui.com/image\n */\nexport const Image = forwardRef<ImageProps, \"img\">((props, ref) => {\n  const {\n    fallbackSrc,\n    fallback,\n    src,\n    srcSet,\n    align,\n    fit,\n    loading,\n    ignoreFallback,\n    crossOrigin,\n    ...rest\n  } = props\n\n  /**\n   * Defer to native `img` tag if `loading` prop is passed\n   * @see https://github.com/chakra-ui/chakra-ui/issues/1027\n   */\n  const shouldIgnore =\n    loading != null ||\n    ignoreFallback ||\n    (fallbackSrc === undefined && fallback === undefined) // if the user doesn't provide any kind of fallback we should ignore it\n\n  const status = useImage({\n    ...props,\n    ignoreFallback: shouldIgnore,\n  })\n\n  const shared = {\n    ref,\n    objectFit: fit,\n    objectPosition: align,\n    ...(shouldIgnore ? rest : omit(rest, [\"onError\", \"onLoad\"])),\n  }\n\n  if (status !== \"loaded\") {\n    /**\n     * If user passed a custom fallback component,\n     * let's render it here.\n     */\n    if (fallback) return fallback\n\n    return (\n      <chakra.img\n        as={NativeImage}\n        className=\"chakra-image__placeholder\"\n        src={fallbackSrc}\n        {...shared}\n      />\n    )\n  }\n\n  return (\n    <chakra.img\n      as={NativeImage}\n      src={src}\n      srcSet={srcSet}\n      crossOrigin={crossOrigin}\n      loading={loading}\n      className=\"chakra-image\"\n      {...shared}\n    />\n  )\n})\n\nexport interface ImgProps extends HTMLChakraProps<\"img\">, NativeImageOptions {}\n\n/**\n * Fallback component for most SSR users who want to use the native `img` with\n * support for chakra props\n */\nexport const Img = forwardRef<ImgProps, \"img\">((props, ref) => (\n  <chakra.img ref={ref} as={NativeImage} className=\"chakra-image\" {...props} />\n))\n\nif (__DEV__) {\n  Image.displayName = \"Image\"\n}\n","import { useSafeLayoutEffect } from \"@chakra-ui/hooks\"\nimport {\n  ImgHTMLAttributes,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\"\n\ntype NativeImageProps = ImgHTMLAttributes<HTMLImageElement>\n\nexport interface UseImageProps {\n  /**\n   * The image `src` attribute\n   */\n  src?: string\n  /**\n   * The image `srcset` attribute\n   */\n  srcSet?: string\n  /**\n   * The image `sizes` attribute\n   */\n  sizes?: string\n  /**\n   * A callback for when the image `src` has been loaded\n   */\n  onLoad?: NativeImageProps[\"onLoad\"]\n  /**\n   * A callback for when there was an error loading the image `src`\n   */\n  onError?: NativeImageProps[\"onError\"]\n  /**\n   * If `true`, opt out of the `fallbackSrc` logic and use as `img`\n   */\n  ignoreFallback?: boolean\n  /**\n   * The key used to set the crossOrigin on the HTMLImageElement into which the image will be loaded.\n   * This tells the browser to request cross-origin access when trying to download the image data.\n   */\n  crossOrigin?: NativeImageProps[\"crossOrigin\"]\n  loading?: NativeImageProps[\"loading\"]\n}\n\ntype Status = \"loading\" | \"failed\" | \"pending\" | \"loaded\"\n\ntype ImageEvent = React.SyntheticEvent<HTMLImageElement, Event>\n\n/**\n * React hook that loads an image in the browser,\n * and let's us know the `status` so we can show image\n * fallback if it is still `pending`\n *\n * @returns the status of the image loading progress\n *\n * @example\n *\n * ```jsx\n * function App(){\n *   const status = useImage({ src: \"image.png\" })\n *   return status === \"loaded\" ? <img src=\"image.png\" /> : <Placeholder />\n * }\n * ```\n */\nexport function useImage(props: UseImageProps) {\n  const {\n    loading,\n    src,\n    srcSet,\n    onLoad,\n    onError,\n    crossOrigin,\n    sizes,\n    ignoreFallback,\n  } = props\n\n  const [status, setStatus] = useState<Status>(\"pending\")\n\n  useEffect(() => {\n    setStatus(src ? \"loading\" : \"pending\")\n  }, [src])\n\n  const imageRef = useRef<HTMLImageElement | null>()\n\n  const load = useCallback(() => {\n    if (!src) return\n\n    flush()\n\n    const img = new Image()\n    img.src = src\n    if (crossOrigin) img.crossOrigin = crossOrigin\n    if (srcSet) img.srcset = srcSet\n    if (sizes) img.sizes = sizes\n    if (loading) img.loading = loading\n\n    img.onload = (event) => {\n      flush()\n      setStatus(\"loaded\")\n      onLoad?.((event as unknown) as ImageEvent)\n    }\n    img.onerror = (error) => {\n      flush()\n      setStatus(\"failed\")\n      onError?.(error as any)\n    }\n\n    imageRef.current = img\n  }, [src, crossOrigin, srcSet, sizes, onLoad, onError, loading])\n\n  const flush = () => {\n    if (imageRef.current) {\n      imageRef.current.onload = null\n      imageRef.current.onerror = null\n      imageRef.current = null\n    }\n  }\n\n  useSafeLayoutEffect(() => {\n    /**\n     * If user opts out of the fallback/placeholder\n     * logic, let's bail out.\n     */\n    if (ignoreFallback) return undefined\n\n    if (status === \"loading\") {\n      load()\n    }\n    return () => {\n      flush()\n    }\n  }, [status, load, ignoreFallback])\n\n  /**\n   * If user opts out of the fallback/placeholder\n   * logic, let's just return 'loaded'\n   */\n  return ignoreFallback ? \"loaded\" : status\n}\n\nexport type UseImageReturn = ReturnType<typeof useImage>\n","import { createTestIds } from \"../../util/createTestIds\";\n\nconst testIds = createTestIds(\"home\", [\n  \"headings\",\n  \"results\",\n  \"nextPageBtn\",\n  \"nextIcon\",\n  \"prevIcon\",\n] as const);\n\nexport default testIds;\n","import {\n  ArrowForwardIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from \"@chakra-ui/icons\";\nimport { Grid, GridItem, Button, Flex, IconButton } from \"@chakra-ui/react\";\nimport type { Dispatch, FunctionComponent, SetStateAction } from \"react\";\nimport testIds from \"./testIds\";\n\nconst iconBtnProps = {\n  borderRadius: \"md\",\n  borderColor: \"blue.500\",\n  colorScheme: \"blue\",\n  mx: 2,\n  h: 10,\n  w: 10,\n  variant: \"outline\",\n};\n\nconst iconProps = {\n  color: \"blue.500\",\n  h: 5,\n  w: 5,\n};\n\nexport interface HomePageControlsProps {\n  offset: number;\n  pageLimit: number;\n  setOffset: Dispatch<SetStateAction<number>>;\n}\n\nexport const HomePageControls: FunctionComponent<HomePageControlsProps> = ({\n  offset,\n  pageLimit,\n  setOffset,\n}) => {\n  const nextDisabled = offset === pageLimit;\n  const prevDisabled = offset === 0;\n\n  const getNextPage = () => {\n    setOffset(offset + 1);\n  };\n\n  const getPrevPage = () => {\n    setOffset(offset - 1);\n  };\n\n  return (\n    <Grid\n      alignItems=\"center\"\n      pt={6}\n      templateColumns=\"repeat(3, 1fr)\"\n      templateRows=\"1fr\"\n    >\n      <GridItem colStart={2} justifySelf=\"center\">\n        <Button\n          colorScheme=\"blue\"\n          data-testid={testIds.nextPageBtn}\n          disabled={nextDisabled}\n          onClick={getNextPage}\n          rightIcon={<ArrowForwardIcon color=\"white\" />}\n        >\n          Next Page\n        </Button>\n      </GridItem>\n      <GridItem colStart={3} justifySelf=\"end\">\n        <Flex align=\"center\" justify=\"center\" py={4}>\n          <IconButton\n            aria-label=\"Previous Page\"\n            data-testid={testIds.prevIcon}\n            disabled={prevDisabled}\n            icon={<ChevronLeftIcon {...iconProps} />}\n            onClick={getPrevPage}\n            {...iconBtnProps}\n          />\n          <IconButton\n            aria-label=\"Next Page\"\n            data-testid={testIds.nextIcon}\n            disabled={nextDisabled}\n            icon={<ChevronRightIcon {...iconProps} />}\n            onClick={getNextPage}\n            {...iconBtnProps}\n          />\n        </Flex>\n      </GridItem>\n    </Grid>\n  );\n};\n","import { Box, Stack, Heading, Skeleton } from \"@chakra-ui/react\";\nimport { FunctionComponent, useState } from \"react\";\nimport { CatalogSearchSort } from \"../../api/catalog-search/constants\";\nimport { CatalogSearch } from \"../../components/CatalogSearch\";\nimport { Page } from \"../../components/Page\";\nimport { Picture } from \"../../components/Picture\";\nimport { Results } from \"../../components/Results\";\nimport { useCatalogResults } from \"../../hooks/useCatalogResults\";\nimport { useCatalogSearch } from \"../../hooks/useCatalogSearch\";\nimport { HomePageControls } from \"./HomePageControls\";\nimport testIds from \"./testIds\";\n\nconst sources = {\n  optimal: [\n    { media: \"(max-width:1024px)\", srcSet: \"/assets/hive@50.webp\" },\n    { media: \"(min-width:1024px)\", srcSet: \"/assets/hive@100.webp\" },\n    { media: \"(min-width:1024px)\", srcSet: \"/assets/hive@100.png\" },\n  ],\n  fallback: \"/assets/hive@50.png\",\n};\n\nexport const Home: FunctionComponent = () => {\n  const searchAPI = useCatalogSearch();\n  const [offset, setOffset] = useState(0);\n\n  const { results, page, pageLimit } = useCatalogResults({\n    offset,\n    limit: 20,\n    query: \"\",\n    language: null,\n    sort: CatalogSearchSort.PublishDateDesc,\n  });\n\n  return (\n    <Page\n      meta={{\n        title: \"Construct Hub\",\n        description:\n          \"Construct Hub helps developers find open-source construct libraries for use with AWS CDK, CDK8s, CDKTf and other construct-based tools.\",\n        suffix: false,\n      }}\n      pageName=\"home\"\n    >\n      <Box position=\"relative\">\n        <Picture\n          alt={\"\"}\n          h=\"540px\"\n          position=\"absolute\"\n          sources={sources.optimal}\n          src={sources.fallback}\n          top=\"0\"\n          w=\"100%\"\n          zIndex=\"hide\"\n        />\n        {/* Hero Section */}\n        <Stack\n          align=\"stretch\"\n          direction=\"column\"\n          justify=\"center\"\n          m=\"0 auto\"\n          maxW=\"container.lg\"\n          p={[10, 15, 20]}\n          spacing={8}\n        >\n          <Stack\n            color=\"blue.800\"\n            data-testid={testIds.headings}\n            spacing={4}\n            textAlign=\"center\"\n          >\n            <Heading size=\"2xl\">\n              Find reusable components for your cloud applications\n            </Heading>\n            <Heading as=\"h3\" size=\"md\">\n              AWS CDK | CDK for Terraform | CDK For Kubernetes\n            </Heading>\n            <Heading as=\"h4\" mb={8} size=\"sm\">\n              Search from{\" \"}\n              {!results.length ? (\n                <Skeleton display=\"inline-block\" h={3} w={8} />\n              ) : (\n                <Box as=\"span\" color=\"blue.500\">\n                  {results.length}\n                </Box>\n              )}{\" \"}\n              construct libraries\n            </Heading>\n          </Stack>\n          <CatalogSearch {...searchAPI} />\n        </Stack>\n\n        {/* TBD: Trending Libraries in favor of catalog results */}\n        <Box p={4} pb={8}>\n          <Results results={page} />\n          <HomePageControls\n            offset={offset}\n            pageLimit={pageLimit}\n            setOffset={setOffset}\n          />\n        </Box>\n      </Box>\n    </Page>\n  );\n};\n"],"sourceRoot":""}

package/build/static/js/{13.92cdbaff.chunk.js → 13.a9cae057.chunk.js}

@@ -1,2 +1,2 @@
-(this["webpackJsonpconstruct-hub-webapp"]=this["webpackJsonpconstruct-hub-webapp"]||[]).push([[13],{228:function(e,t,n){"use strict";n.d(t,"a",(function(){return s}));var r=n(0),o=n(241),a={home:{event:{name:"Home Load"}},faq:{event:{name:"Frequently Asked Questions Load"}},packageProfile:{event:{name:"Package Profile Load"}},search:{event:{name:"Search Load"}},siteTerms:{event:{name:"Site Terms Load"}},notFound:{page:{pageType:"errorPage"},event:{name:"404 Page Load"}}},c=n(114),i=n(1),s=function(e){var t=e.children,n=e.meta,s=e.pageName,l=Object(c.b)(a[s]);Object(r.useEffect)((function(){l()}),[l]);var d=n.suffix,u=void 0===d||d,h=n.title,b=n.description,p=u?"".concat(h," - Construct Hub"):h;return Object(i.jsxs)(i.Fragment,{children:[Object(i.jsxs)(o.a,{children:[!1,Object(i.jsx)("meta",{content:"width=device-width, initial-scale=1",name:"viewport"}),Object(i.jsx)("meta",{charSet:"utf-8"}),Object(i.jsx)("title",{children:p}),Object(i.jsx)("meta",{content:p,property:"og:title"}),Object(i.jsx)("meta",{content:p,name:"twitter:title"}),Object(i.jsx)("meta",{content:"summary",name:"twitter:card"}),Object(i.jsx)("meta",{content:b,name:"description"}),Object(i.jsx)("meta",{content:b,property:"og:description"}),Object(i.jsx)("meta",{content:b,name:"twitter:description"})]}),t]})}},593:function(e,t,n){"use strict";n.r(t),n.d(t,"FAQ",(function(){return ne})),n.d(t,"default",(function(){return ne}));var r=n(188),o=n(209),a=n(4),c=n(102),i=n(21),s=n(67),l=n(42),d=n(74),u=n(25),h=n(199),b=n(20),p=n(8),j=n(28),m=n(149),f=n(0),g=n(221),O=n(138),y=n(141),x=n(137),v=n(190),w=n(94),C=n(170);function k(){return k=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},k.apply(this,arguments)}function I(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}var D=Object(g.a)(),A=Object(a.a)(D,4),P=A[0],H=(A[1],A[2]),T=A[3];function K(e){var t=e.onChange,n=e.defaultIndex,r=e.index,o=e.allowMultiple,c=e.allowToggle,i=I(e,["onChange","defaultIndex","index","allowMultiple","allowToggle"]);!function(e){var t=e.index||e.defaultIndex,n=!Object(p.l)(t)&&!Object(p.b)(t)&&e.allowMultiple;Object(j.f)({condition:!!n,message:"If 'allowMultiple' is passed, then 'index' or 'defaultIndex' must be an array. You passed: "+typeof t+","})}(e),function(e){Object(j.f)({condition:!(!e.allowMultiple||!e.allowToggle),message:"If 'allowMultiple' is passed, 'allowToggle' will be ignored. Either remove 'allowToggle' or 'allowMultiple' depending on whether you want multiple accordions visible or not"})}(e);var s=H(),l=Object(f.useState)(-1),d=Object(a.a)(l,2),u=d[0],h=d[1];Object(O.a)((function(){h(-1)}));var b=Object(y.b)({value:r,defaultValue:function(){return o?null!=n?n:[]:null!=n?n:-1},onChange:t}),m=Object(a.a)(b,2),g=m[0],x=m[1];return{index:g,setIndex:x,htmlProps:i,getAccordionItemProps:function(e){var t=!1;null!==e&&(t=Object(p.b)(g)?g.includes(e):g===e);return{isOpen:t,onChange:function(t){if(null!==e)if(o&&Object(p.b)(g)){var n=t?Object(w.a)(g,e):Object(w.d)(g,e);x(n)}else t?x(e):c&&x(-1)}}},focusedIndex:u,setFocusedIndex:h,descendants:s}}var S=Object(m.a)({name:"AccordionContext",errorMessage:"useAccordionContext: `context` is undefined. Seems you forgot to wrap the accordion components in `<Accordion />`"}),q=Object(a.a)(S,2),M=q[0],E=q[1];function F(e){var t=e.isDisabled,n=e.isFocusable,r=e.id,o=I(e,["isDisabled","isFocusable","id"]),c=E(),i=c.getAccordionItemProps,s=c.setFocusedIndex,l=Object(f.useRef)(null),d=Object(x.c)(r,"accordion-button","accordion-panel"),u=Object(a.a)(d,2),h=u[0],p=u[1];!function(e){Object(j.f)({condition:!(!e.isFocusable||e.isDisabled),message:"Using only 'isFocusable', this prop is reserved for situations where you pass 'isDisabled' but you still want the element to receive focus (A11y). Either remove it or pass 'isDisabled' as well.\n    "})}(e);var m=T({disabled:t&&!n}),g=m.register,O=m.index,y=m.descendants,w=i(-1===O?null:O),D=w.isOpen,A=w.onChange;!function(e){Object(j.f)({condition:e.isOpen&&!!e.isDisabled,message:"Cannot open a disabled accordion item"})}({isOpen:D,isDisabled:t});var P=Object(f.useCallback)((function(){null==A||A(!D),s(O)}),[O,s,D,A]),H=Object(f.useCallback)((function(e){var t={ArrowDown:function(){var e=y.nextEnabled(O);e&&Object(C.a)(e.node)},ArrowUp:function(){var e=y.prevEnabled(O);e&&Object(C.a)(e.node)},Home:function(){var e=y.firstEnabled();e&&Object(C.a)(e.node)},End:function(){var e=y.lastEnabled();e&&Object(C.a)(e.node)}}[Object(b.m)(e)];t&&(e.preventDefault(),t(e))}),[y,O]),K=Object(f.useCallback)((function(){s(O)}),[s,O]),S=Object(f.useCallback)((function(e,n){return void 0===e&&(e={}),void 0===n&&(n=null),k({},e,{type:"button",ref:Object(v.a)(g,l,n),id:h,disabled:!!t,"aria-expanded":!!D,"aria-controls":p,onClick:Object(j.b)(e.onClick,P),onFocus:Object(j.b)(e.onFocus,K),onKeyDown:Object(j.b)(e.onKeyDown,H)})}),[h,t,D,P,K,H,p,g]),q=Object(f.useCallback)((function(e,t){return void 0===e&&(e={}),void 0===t&&(t=null),k({},e,{ref:t,role:"region",id:p,"aria-labelledby":h,hidden:!D})}),[h,D,p]);return{isOpen:D,isDisabled:t,isFocusable:n,onOpen:function(){null==A||A(!0)},onClose:function(){null==A||A(!1)},getButtonProps:S,getPanelProps:q,htmlProps:o}}function W(){return W=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},W.apply(this,arguments)}function N(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}var _=Object(i.a)((function(e,t){var n=e.children,r=e.reduceMotion,o=N(e,["children","reduceMotion"]),a=Object(s.a)("Accordion",o),c=K(Object(l.b)(o)),i=c.htmlProps,h=c.descendants,p=N(c,["htmlProps","descendants"]),j=f.useMemo((function(){return W({},p,{reduceMotion:!!r})}),[p,r]);return f.createElement(P,{value:h},f.createElement(M,{value:j},f.createElement(d.b,{value:a},f.createElement(u.a.div,W({ref:t},i,{className:Object(b.d)("chakra-accordion",o.className)}),n))))}));p.a&&(_.displayName="Accordion");var z=Object(m.a)({name:"AccordionItemContext",errorMessage:"useAccordionItemContext: `context` is undefined. Seems you forgot to wrap the accordion item parts in `<AccordionItem />` "}),B=Object(a.a)(z,2),J=B[0],L=B[1],Y=Object(i.a)((function(e,t){var n=e.children,r=e.className,o=F(e),a=o.htmlProps,c=N(o,["htmlProps"]),i=W({},Object(d.d)().container,{overflowAnchor:"none"}),s=f.useMemo((function(){return c}),[c]);return f.createElement(J,{value:s},f.createElement(u.a.div,W({ref:t},a,{className:Object(b.d)("chakra-accordion__item",r),__css:i}),Object(j.e)(n,{isExpanded:!!c.isOpen,isDisabled:!!c.isDisabled})))}));p.a&&(Y.displayName="AccordionItem");var G=Object(i.a)((function(e,t){var n=(0,L().getButtonProps)(e,t),r=W({display:"flex",alignItems:"center",width:"100%",outline:0},Object(d.d)().button);return f.createElement(u.a.button,W({},n,{className:Object(b.d)("chakra-accordion__button",e.className),__css:r}))}));p.a&&(G.displayName="AccordionButton");var R=Object(i.a)((function(e,t){var n=E().reduceMotion,r=L(),o=r.getPanelProps,a=r.isOpen,c=o(e,t),i=Object(b.d)("chakra-accordion__panel",e.className),s=Object(d.d)();n||delete c.hidden;var l=f.createElement(u.a.div,W({},c,{__css:s.panel,className:i}));return n?l:f.createElement(h.a,{in:a},l)}));p.a&&(R.displayName="AccordionPanel");var Q=function(e){var t=L(),n=t.isOpen,r=t.isDisabled,o=E().reduceMotion,a=Object(b.d)("chakra-accordion__icon",e.className),i=W({opacity:r?.4:1,transform:n?"rotate(-180deg)":void 0,transition:o?void 0:"transform 0.2s",transformOrigin:"center"},Object(d.d)().icon);return f.createElement(c.a,W({viewBox:"0 0 24 24","aria-hidden":!0,className:a,__css:i},e),f.createElement("path",{fill:"currentColor",d:"M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"}))};p.a&&(Q.displayName="AccordionIcon");var U=n(228),V=n(193),X=n(1),Z=function(e){var t=e.question,n=e.children;return Object(X.jsxs)(Y,{children:[Object(X.jsxs)(G,{children:[Object(X.jsx)(r.a,{flex:"1",py:2,textAlign:"left",children:Object(X.jsx)(o.a,{as:"h3",ml:8,size:"sm",children:t})}),Object(X.jsx)(Q,{})]}),Object(X.jsx)(R,{px:12,py:4,children:Object(X.jsx)(V.a,{color:"gray.800",fontSize:"md",sx:{p:{marginTop:"0",marginBottom:"4"}},children:n})})]})},$=n(55),ee=function(e){var t=e.href,n=e.children;return Object(X.jsx)($.a,{color:"inherit",hasWarning:!1,href:t,textDecoration:"underline",children:n})},te=function(e){var t=e.heading,n=e.children;return Object(X.jsxs)(Y,{children:[Object(X.jsxs)(G,{children:[Object(X.jsx)(r.a,{flex:"1",textAlign:"left",children:Object(X.jsx)(o.a,{as:"h2",ml:4,size:"lg",children:t})}),Object(X.jsx)(Q,{})]}),Object(X.jsx)(R,{p:0,children:Object(X.jsx)(_,{allowMultiple:!0,w:"100%",children:n})})]})},ne=function(){return Object(X.jsx)(U.a,{meta:{title:"FAQ",description:"Frequently Asked Questions"},pageName:"faq",children:Object(X.jsxs)(r.a,{bg:"white",color:"blue.800",h:"100%",w:"100%",children:[Object(X.jsx)(r.a,{bg:"gray.50",py:20,width:"100%",children:Object(X.jsx)(o.a,{as:"h1",mx:"auto",textAlign:"center",children:"Frequently Asked Questions"})}),Object(X.jsxs)(_,{allowMultiple:!0,defaultIndex:[0,1],children:[Object(X.jsxs)(te,{heading:"General",children:[Object(X.jsx)(Z,{question:"What is Construct Hub?",children:Object(X.jsx)("p",{children:"It is a central destination to discover and share cloud application design patterns and reference architectures defined for the AWS CDK, CDK for Kubernetes (CDK8s), CDK for Terraform (CDKtf) and any other construct-based tool."})}),Object(X.jsxs)(Z,{question:"Why should I use Construct Hub?",children:[Object(X.jsx)("p",{children:"Construct Hub is built to serve the community that uses the constructs programming model (CPM) and to allow them find publicly available constructs they can reuse. Before the Construct Hub, developers did not have an easy way to discover construct libraries created by the community since they were published across various package managers and without a central index."}),Object(X.jsx)("p",{children:"The Construct Hub is a central, trusted venue CDK developers can use to discover published constructs to help them build their applications. In the Dev Preview Construct Hub you can discover constructs in TypeScript and Python and read their documentation and improved API reference in the programming language that the package supports."})]}),Object(X.jsxs)(Z,{question:"How can I add my construct to the Construct Hub?",children:[Object(X.jsxs)("p",{children:["In order to add your construct to the Construct Hub, you will need to publish it to the"," ",Object(X.jsx)(ee,{href:"https://www.npmjs.com/",children:"npmjs.com"})," ","registry, use a permissive license (Apache, BSD, MIT), and annotate it with one of the supported keywords (aws-cdk, cdk8s or cdktf)."]}),Object(X.jsxs)("p",{children:["Additionally, since one of the main goals of the Construct Hub is to enable an ecosystem of constructs that can be consumed by all CDK languages, your library ",Object(X.jsx)("strong",{children:"must"})," be compiled with"," ",Object(X.jsx)(ee,{href:"https://aws.github.io/jsii/",children:"JSII"}),", which is a TypeScript-based, which is a TypeScript-based programming language for creating multi-language libraries. The Construct Hub leverages the type information produced by the JSII compiler in order to render the rich multi-language API reference displayed at the Construct Hub."]}),Object(X.jsx)("p",{children:"The Construct Hub monitors all updates to the npm Registry and will list any packages that meet the above requirements within 5-10 minutes. If your package does not appear in the Construct Hub, please file an issue on our GitHub repository."}),Object(X.jsxs)("p",{children:["There\u2019s some great community content about publishing construct libraries. Check out"," ",Object(X.jsx)(ee,{href:"https://dev.to/aws-builders/a-beginner-s-guide-to-create-aws-cdk-construct-library-with-projen-5eh4",children:'"A Beginner\'s Guide to Create AWS CDK Construct Library with projen"'})," ","by ",Object(X.jsx)(ee,{href:"https://hayao-k.dev/",children:"hayao-k"}),"."]}),Object(X.jsxs)("p",{children:["If you already have a library written in TypeScript and you are looking for information on how to migrate to JSII, see the"," ",Object(X.jsx)(ee,{href:"https://aws.github.io/jsii/user-guides/#library-author-guide",children:"JSII library author guide"}),"."]})]}),Object(X.jsx)(Z,{question:"What is a construct?",children:Object(X.jsxs)("p",{children:["The Constructs Programming Model (CPM) introduces the notion of"," ",Object(X.jsx)("strong",{children:"constructs"}),", which represent cloud building blocks that can be used to assemble complete applications of any complexity. AWS, enterprises, start-ups, and individual developers use CDK constructs to share proven architecture patterns as reusable code libraries, so that everyone can benefit from the collective wisdom of the community."]})}),Object(X.jsx)(Z,{question:"Who owns the constructs in the Construct Hub?",children:Object(X.jsx)("p",{children:"The constructs are owned by the publishers of the packages. Constructs are user generated content that are governed by their own license terms which is displayed in the search results and can be accessed directly through the hyperlinked package page."})}),Object(X.jsx)(Z,{question:"Is the content served in Construct Hub meant to be consumed programmatically?",children:Object(X.jsxs)("p",{children:["No. The content displayed in the site is user generated, with some display formatting. We do not advise that you consume constructs from the search results programmatically. Please note that Construct Hub is a search engine intended to surface third party content from a public endpoint and we provide these results for your convenience AS-IS in accordance with our"," ",Object(X.jsx)(ee,{href:"https://constructs.dev/terms",children:"Site Terms"}),"."]})}),Object(X.jsx)(Z,{question:"Which CDK types are available on the Construct Hub?",children:Object(X.jsx)("p",{children:"AWS CDK, CDK for Kubernetes (CDK8s) and CDK for Terraform (CDKtf)."})}),Object(X.jsx)(Z,{question:"What is AWS CDK?",children:Object(X.jsxs)("p",{children:["AWS CDK is an open-source software development framework for defining applications on AWS and reusable abstractions using familiar programming languages and rich object-oriented APIs. AWS CDK apps synthesize intostandard CloudFormation templates which can be deployed to create infrastructure on AWS. For more information, click"," ",Object(X.jsx)(ee,{href:"https://docs.aws.amazon.com/cdk/latest/guide/home.html",children:"here"}),"."]})}),Object(X.jsx)(Z,{question:"What is CDK8s?",children:Object(X.jsxs)("p",{children:["CDK8s is an open-source software development framework for defining Kubernetes applications and reusable abstractions using familiar programming languages and rich object-oriented APIs."," ",Object(X.jsx)("strong",{children:"cdk8s"})," apps synthesize into standard Kubernetes manifests which can be applied to any Kubernetes cluster. For more information, click"," ",Object(X.jsx)(ee,{href:"https://cdk8s.io/",children:"here"}),"."]})}),Object(X.jsx)(Z,{question:"What is CDKtf?",children:Object(X.jsxs)("p",{children:["The community preview of the"," ",Object(X.jsx)(ee,{href:"https://aws.amazon.com/cdk/",children:"Cloud Development Kit"}),"for Terraform allows you to define infrastructure using a familiar programming language such as TypeScript, Python, or Go, while leveraging the hundreds of providers and thousands of module definitions provided by Terraform and the Terraform ecosystem. For more information, click"," ",Object(X.jsx)(ee,{href:"https://learn.hashicorp.com/tutorials/terraform/cdktf",children:"here"}),"."]})}),Object(X.jsx)(Z,{question:"What programming languages are supported in Dev Preview?",children:Object(X.jsx)("p",{children:"The Construct Hub Dev Preview supports Python and TypeScript."})}),Object(X.jsx)(Z,{question:"Is the support for .NET, Java and Go in the roadmap?",children:Object(X.jsx)("p",{children:"Yes."})}),Object(X.jsx)(Z,{question:"Can I view the source code of a construct?",children:Object(X.jsx)("p",{children:"For each package you can click the repository link that the publisher provided with the package. Theoretically this link should redirect your to the package\u2019s repository. However, we noticed that sometimes the code in the repository can be more or less updated than the package\u2019s code. Please take that into account."})}),Object(X.jsx)(Z,{question:"How can I install a package?",children:Object(X.jsx)("p",{children:"Press \u201cInstall\u201d in the package page and you\u2019ll see the installation instructions."})}),Object(X.jsx)(Z,{question:"How can I report a package?",children:Object(X.jsxs)("p",{children:['You can report a package by clicking "Report a package" from the package page. For claims of copyright infringement, read here:'," ",Object(X.jsx)(ee,{href:"https://aws.amazon.com/terms/#notice-and-procedure-for-making-claims-of-copyright-infringement",children:"https://aws.amazon.com/terms/#notice-and-procedure-for-making-claims-of-copyright-infringement"}),"."]})}),Object(X.jsx)(Z,{question:"How can I open a bug or send a PR for a package?",children:Object(X.jsx)("p",{children:"The package is owned by the publisher. To report a bug or send a PR, you should go to the repository link the publisher provided and open a ticket there"})}),Object(X.jsx)(Z,{question:"Why isn\u2019t my package displayed in the Construct Hub?",children:Object(X.jsx)("p",{children:"The Construct Hub displays only publicly available constructs that are JSII compatible and that were published on a public npm registry with an open source license. The package should be published on npm registry with the one of the following Keywords: aws-cdk, cdk8s or cdktf."})}),Object(X.jsx)(Z,{question:"Can I update my package after it has been displayed?",children:Object(X.jsx)("p",{children:"Yes. You should publish a new valid version to the public npm registry. We will detect the new version and display it on the Construct Hub."})}),Object(X.jsx)(Z,{question:"How does the Construct Hub relates to the Construct Catalog?",children:Object(X.jsxs)("p",{children:["The Construct Catalog was built by the CDK community in collaboration with the AWS CDK team. The Construct Hub is the official version for the Construct Catalog."," ",Object(X.jsx)(ee,{href:"https://awscdk.io",children:"https://awscdk.io"})," now redirects to the Construct Hub."]})}),Object(X.jsx)(Z,{question:"How can I participate in the Construct Hub community?",children:Object(X.jsxs)("p",{children:["The Construct Hub is built as a public construct. Please join the"," ",Object(X.jsx)(ee,{href:"https://github.com/cdklabs/construct-hub-webapp",children:"Construct Hub GitHub community"}),". You are also welcome to join the #construct-hub-dev channel in the ",Object(X.jsx)(ee,{href:"https://cdk.dev/",children:"CDK community"})," Slack workspace."]})}),Object(X.jsx)(Z,{question:"Is there a community slack channel for the CDK community?",children:Object(X.jsxs)("p",{children:["Please join the CDK Slack channel (",Object(X.jsx)(ee,{href:"https://cdk.dev/",children:"https://cdk.dev/"}),"). This Slack channel is managed by the CDK community for the CDK community."]})})]}),Object(X.jsxs)(te,{heading:"Getting Started",children:[Object(X.jsx)(Z,{question:"Do I need a user for the Construct Hub?",children:Object(X.jsx)("p",{children:"No. The Construct Hub doesn\u2019t require any signup."})}),Object(X.jsx)(Z,{question:"How do I get started?",children:Object(X.jsx)("p",{children:"Use our home page to discover publicly available packages. You may run a search to find packages you\u2019re interested in and mention your preferred programming language. For each package you will find helpful information such as README and API reference for the supported programming languages. You will also find links and keywords that the publisher provided with the package and installation instructions."})})]})]})]})})}}}]);
-//# sourceMappingURL=13.92cdbaff.chunk.js.map
+(this["webpackJsonpconstruct-hub-webapp"]=this["webpackJsonpconstruct-hub-webapp"]||[]).push([[13],{228:function(e,t,n){"use strict";n.d(t,"a",(function(){return s}));var r=n(0),o=n(241),a={home:{event:{name:"Home Load"}},faq:{event:{name:"Frequently Asked Questions Load"}},packageProfile:{event:{name:"Package Profile Load"}},search:{event:{name:"Search Load"}},siteTerms:{event:{name:"Site Terms Load"}},notFound:{page:{pageType:"errorPage"},event:{name:"404 Page Load"}}},c=n(114),i=n(1),s=function(e){var t=e.children,n=e.meta,s=e.pageName,l=Object(c.b)(a[s]);Object(r.useEffect)((function(){l()}),[l]);var d=n.suffix,u=void 0===d||d,h=n.title,b=n.description,p=u?"".concat(h," - Construct Hub"):h;return Object(i.jsxs)(i.Fragment,{children:[Object(i.jsxs)(o.a,{children:[!1,Object(i.jsx)("meta",{content:"width=device-width, initial-scale=1",name:"viewport"}),Object(i.jsx)("meta",{charSet:"utf-8"}),Object(i.jsx)("title",{children:p}),Object(i.jsx)("meta",{content:p,property:"og:title"}),Object(i.jsx)("meta",{content:p,name:"twitter:title"}),Object(i.jsx)("meta",{content:"summary",name:"twitter:card"}),Object(i.jsx)("meta",{content:b,name:"description"}),Object(i.jsx)("meta",{content:b,property:"og:description"}),Object(i.jsx)("meta",{content:b,name:"twitter:description"})]}),t]})}},594:function(e,t,n){"use strict";n.r(t),n.d(t,"FAQ",(function(){return ne})),n.d(t,"default",(function(){return ne}));var r=n(188),o=n(209),a=n(4),c=n(102),i=n(21),s=n(67),l=n(42),d=n(74),u=n(25),h=n(199),b=n(20),p=n(8),j=n(28),m=n(149),f=n(0),g=n(221),O=n(138),y=n(141),x=n(137),v=n(190),w=n(94),C=n(170);function k(){return k=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},k.apply(this,arguments)}function I(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}var D=Object(g.a)(),A=Object(a.a)(D,4),P=A[0],H=(A[1],A[2]),T=A[3];function K(e){var t=e.onChange,n=e.defaultIndex,r=e.index,o=e.allowMultiple,c=e.allowToggle,i=I(e,["onChange","defaultIndex","index","allowMultiple","allowToggle"]);!function(e){var t=e.index||e.defaultIndex,n=!Object(p.l)(t)&&!Object(p.b)(t)&&e.allowMultiple;Object(j.f)({condition:!!n,message:"If 'allowMultiple' is passed, then 'index' or 'defaultIndex' must be an array. You passed: "+typeof t+","})}(e),function(e){Object(j.f)({condition:!(!e.allowMultiple||!e.allowToggle),message:"If 'allowMultiple' is passed, 'allowToggle' will be ignored. Either remove 'allowToggle' or 'allowMultiple' depending on whether you want multiple accordions visible or not"})}(e);var s=H(),l=Object(f.useState)(-1),d=Object(a.a)(l,2),u=d[0],h=d[1];Object(O.a)((function(){h(-1)}));var b=Object(y.b)({value:r,defaultValue:function(){return o?null!=n?n:[]:null!=n?n:-1},onChange:t}),m=Object(a.a)(b,2),g=m[0],x=m[1];return{index:g,setIndex:x,htmlProps:i,getAccordionItemProps:function(e){var t=!1;null!==e&&(t=Object(p.b)(g)?g.includes(e):g===e);return{isOpen:t,onChange:function(t){if(null!==e)if(o&&Object(p.b)(g)){var n=t?Object(w.a)(g,e):Object(w.d)(g,e);x(n)}else t?x(e):c&&x(-1)}}},focusedIndex:u,setFocusedIndex:h,descendants:s}}var S=Object(m.a)({name:"AccordionContext",errorMessage:"useAccordionContext: `context` is undefined. Seems you forgot to wrap the accordion components in `<Accordion />`"}),q=Object(a.a)(S,2),M=q[0],E=q[1];function F(e){var t=e.isDisabled,n=e.isFocusable,r=e.id,o=I(e,["isDisabled","isFocusable","id"]),c=E(),i=c.getAccordionItemProps,s=c.setFocusedIndex,l=Object(f.useRef)(null),d=Object(x.c)(r,"accordion-button","accordion-panel"),u=Object(a.a)(d,2),h=u[0],p=u[1];!function(e){Object(j.f)({condition:!(!e.isFocusable||e.isDisabled),message:"Using only 'isFocusable', this prop is reserved for situations where you pass 'isDisabled' but you still want the element to receive focus (A11y). Either remove it or pass 'isDisabled' as well.\n    "})}(e);var m=T({disabled:t&&!n}),g=m.register,O=m.index,y=m.descendants,w=i(-1===O?null:O),D=w.isOpen,A=w.onChange;!function(e){Object(j.f)({condition:e.isOpen&&!!e.isDisabled,message:"Cannot open a disabled accordion item"})}({isOpen:D,isDisabled:t});var P=Object(f.useCallback)((function(){null==A||A(!D),s(O)}),[O,s,D,A]),H=Object(f.useCallback)((function(e){var t={ArrowDown:function(){var e=y.nextEnabled(O);e&&Object(C.a)(e.node)},ArrowUp:function(){var e=y.prevEnabled(O);e&&Object(C.a)(e.node)},Home:function(){var e=y.firstEnabled();e&&Object(C.a)(e.node)},End:function(){var e=y.lastEnabled();e&&Object(C.a)(e.node)}}[Object(b.m)(e)];t&&(e.preventDefault(),t(e))}),[y,O]),K=Object(f.useCallback)((function(){s(O)}),[s,O]),S=Object(f.useCallback)((function(e,n){return void 0===e&&(e={}),void 0===n&&(n=null),k({},e,{type:"button",ref:Object(v.a)(g,l,n),id:h,disabled:!!t,"aria-expanded":!!D,"aria-controls":p,onClick:Object(j.b)(e.onClick,P),onFocus:Object(j.b)(e.onFocus,K),onKeyDown:Object(j.b)(e.onKeyDown,H)})}),[h,t,D,P,K,H,p,g]),q=Object(f.useCallback)((function(e,t){return void 0===e&&(e={}),void 0===t&&(t=null),k({},e,{ref:t,role:"region",id:p,"aria-labelledby":h,hidden:!D})}),[h,D,p]);return{isOpen:D,isDisabled:t,isFocusable:n,onOpen:function(){null==A||A(!0)},onClose:function(){null==A||A(!1)},getButtonProps:S,getPanelProps:q,htmlProps:o}}function W(){return W=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},W.apply(this,arguments)}function N(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}var _=Object(i.a)((function(e,t){var n=e.children,r=e.reduceMotion,o=N(e,["children","reduceMotion"]),a=Object(s.a)("Accordion",o),c=K(Object(l.b)(o)),i=c.htmlProps,h=c.descendants,p=N(c,["htmlProps","descendants"]),j=f.useMemo((function(){return W({},p,{reduceMotion:!!r})}),[p,r]);return f.createElement(P,{value:h},f.createElement(M,{value:j},f.createElement(d.b,{value:a},f.createElement(u.a.div,W({ref:t},i,{className:Object(b.d)("chakra-accordion",o.className)}),n))))}));p.a&&(_.displayName="Accordion");var z=Object(m.a)({name:"AccordionItemContext",errorMessage:"useAccordionItemContext: `context` is undefined. Seems you forgot to wrap the accordion item parts in `<AccordionItem />` "}),B=Object(a.a)(z,2),J=B[0],L=B[1],Y=Object(i.a)((function(e,t){var n=e.children,r=e.className,o=F(e),a=o.htmlProps,c=N(o,["htmlProps"]),i=W({},Object(d.d)().container,{overflowAnchor:"none"}),s=f.useMemo((function(){return c}),[c]);return f.createElement(J,{value:s},f.createElement(u.a.div,W({ref:t},a,{className:Object(b.d)("chakra-accordion__item",r),__css:i}),Object(j.e)(n,{isExpanded:!!c.isOpen,isDisabled:!!c.isDisabled})))}));p.a&&(Y.displayName="AccordionItem");var G=Object(i.a)((function(e,t){var n=(0,L().getButtonProps)(e,t),r=W({display:"flex",alignItems:"center",width:"100%",outline:0},Object(d.d)().button);return f.createElement(u.a.button,W({},n,{className:Object(b.d)("chakra-accordion__button",e.className),__css:r}))}));p.a&&(G.displayName="AccordionButton");var R=Object(i.a)((function(e,t){var n=E().reduceMotion,r=L(),o=r.getPanelProps,a=r.isOpen,c=o(e,t),i=Object(b.d)("chakra-accordion__panel",e.className),s=Object(d.d)();n||delete c.hidden;var l=f.createElement(u.a.div,W({},c,{__css:s.panel,className:i}));return n?l:f.createElement(h.a,{in:a},l)}));p.a&&(R.displayName="AccordionPanel");var Q=function(e){var t=L(),n=t.isOpen,r=t.isDisabled,o=E().reduceMotion,a=Object(b.d)("chakra-accordion__icon",e.className),i=W({opacity:r?.4:1,transform:n?"rotate(-180deg)":void 0,transition:o?void 0:"transform 0.2s",transformOrigin:"center"},Object(d.d)().icon);return f.createElement(c.a,W({viewBox:"0 0 24 24","aria-hidden":!0,className:a,__css:i},e),f.createElement("path",{fill:"currentColor",d:"M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"}))};p.a&&(Q.displayName="AccordionIcon");var U=n(228),V=n(193),X=n(1),Z=function(e){var t=e.question,n=e.children;return Object(X.jsxs)(Y,{children:[Object(X.jsxs)(G,{children:[Object(X.jsx)(r.a,{flex:"1",py:2,textAlign:"left",children:Object(X.jsx)(o.a,{as:"h3",ml:8,size:"sm",children:t})}),Object(X.jsx)(Q,{})]}),Object(X.jsx)(R,{px:12,py:4,children:Object(X.jsx)(V.a,{color:"gray.800",fontSize:"md",sx:{p:{marginTop:"0",marginBottom:"4"}},children:n})})]})},$=n(55),ee=function(e){var t=e.href,n=e.children;return Object(X.jsx)($.a,{color:"inherit",hasWarning:!1,href:t,textDecoration:"underline",children:n})},te=function(e){var t=e.heading,n=e.children;return Object(X.jsxs)(Y,{children:[Object(X.jsxs)(G,{children:[Object(X.jsx)(r.a,{flex:"1",textAlign:"left",children:Object(X.jsx)(o.a,{as:"h2",ml:4,size:"lg",children:t})}),Object(X.jsx)(Q,{})]}),Object(X.jsx)(R,{p:0,children:Object(X.jsx)(_,{allowMultiple:!0,w:"100%",children:n})})]})},ne=function(){return Object(X.jsx)(U.a,{meta:{title:"FAQ",description:"Frequently Asked Questions"},pageName:"faq",children:Object(X.jsxs)(r.a,{bg:"white",color:"blue.800",h:"100%",w:"100%",children:[Object(X.jsx)(r.a,{bg:"gray.50",py:20,width:"100%",children:Object(X.jsx)(o.a,{as:"h1",mx:"auto",textAlign:"center",children:"Frequently Asked Questions"})}),Object(X.jsxs)(_,{allowMultiple:!0,defaultIndex:[0,1],children:[Object(X.jsxs)(te,{heading:"General",children:[Object(X.jsx)(Z,{question:"What is Construct Hub?",children:Object(X.jsx)("p",{children:"It is a central destination to discover and share cloud application design patterns and reference architectures defined for the AWS CDK, CDK for Kubernetes (CDK8s), CDK for Terraform (CDKtf) and any other construct-based tool."})}),Object(X.jsxs)(Z,{question:"Why should I use Construct Hub?",children:[Object(X.jsx)("p",{children:"Construct Hub is built to serve the community that uses the constructs programming model (CPM) and to allow them find publicly available constructs they can reuse. Before the Construct Hub, developers did not have an easy way to discover construct libraries created by the community since they were published across various package managers and without a central index."}),Object(X.jsx)("p",{children:"The Construct Hub is a central, trusted venue CDK developers can use to discover published constructs to help them build their applications. In the Dev Preview Construct Hub you can discover constructs in TypeScript and Python and read their documentation and improved API reference in the programming language that the package supports."})]}),Object(X.jsxs)(Z,{question:"How can I add my construct to the Construct Hub?",children:[Object(X.jsxs)("p",{children:["In order to add your construct to the Construct Hub, you will need to publish it to the"," ",Object(X.jsx)(ee,{href:"https://www.npmjs.com/",children:"npmjs.com"})," ","registry, use a permissive license (Apache, BSD, MIT), and annotate it with one of the supported keywords (aws-cdk, cdk8s or cdktf)."]}),Object(X.jsxs)("p",{children:["Additionally, since one of the main goals of the Construct Hub is to enable an ecosystem of constructs that can be consumed by all CDK languages, your library ",Object(X.jsx)("strong",{children:"must"})," be compiled with"," ",Object(X.jsx)(ee,{href:"https://aws.github.io/jsii/",children:"JSII"}),", which is a TypeScript-based, which is a TypeScript-based programming language for creating multi-language libraries. The Construct Hub leverages the type information produced by the JSII compiler in order to render the rich multi-language API reference displayed at the Construct Hub."]}),Object(X.jsx)("p",{children:"The Construct Hub monitors all updates to the npm Registry and will list any packages that meet the above requirements within 5-10 minutes. If your package does not appear in the Construct Hub, please file an issue on our GitHub repository."}),Object(X.jsxs)("p",{children:["There\u2019s some great community content about publishing construct libraries. Check out"," ",Object(X.jsx)(ee,{href:"https://dev.to/aws-builders/a-beginner-s-guide-to-create-aws-cdk-construct-library-with-projen-5eh4",children:'"A Beginner\'s Guide to Create AWS CDK Construct Library with projen"'})," ","by ",Object(X.jsx)(ee,{href:"https://hayao-k.dev/",children:"hayao-k"}),"."]}),Object(X.jsxs)("p",{children:["If you already have a library written in TypeScript and you are looking for information on how to migrate to JSII, see the"," ",Object(X.jsx)(ee,{href:"https://aws.github.io/jsii/user-guides/#library-author-guide",children:"JSII library author guide"}),"."]})]}),Object(X.jsx)(Z,{question:"What is a construct?",children:Object(X.jsxs)("p",{children:["The Constructs Programming Model (CPM) introduces the notion of"," ",Object(X.jsx)("strong",{children:"constructs"}),", which represent cloud building blocks that can be used to assemble complete applications of any complexity. AWS, enterprises, start-ups, and individual developers use CDK constructs to share proven architecture patterns as reusable code libraries, so that everyone can benefit from the collective wisdom of the community."]})}),Object(X.jsx)(Z,{question:"Who owns the constructs in the Construct Hub?",children:Object(X.jsx)("p",{children:"The constructs are owned by the publishers of the packages. Constructs are user generated content that are governed by their own license terms which is displayed in the search results and can be accessed directly through the hyperlinked package page."})}),Object(X.jsx)(Z,{question:"Is the content served in Construct Hub meant to be consumed programmatically?",children:Object(X.jsxs)("p",{children:["No. The content displayed in the site is user generated, with some display formatting. We do not advise that you consume constructs from the search results programmatically. Please note that Construct Hub is a search engine intended to surface third party content from a public endpoint and we provide these results for your convenience AS-IS in accordance with our"," ",Object(X.jsx)(ee,{href:"https://constructs.dev/terms",children:"Site Terms"}),"."]})}),Object(X.jsx)(Z,{question:"Which CDK types are available on the Construct Hub?",children:Object(X.jsx)("p",{children:"AWS CDK, CDK for Kubernetes (CDK8s) and CDK for Terraform (CDKtf)."})}),Object(X.jsx)(Z,{question:"What is AWS CDK?",children:Object(X.jsxs)("p",{children:["AWS CDK is an open-source software development framework for defining applications on AWS and reusable abstractions using familiar programming languages and rich object-oriented APIs. AWS CDK apps synthesize intostandard CloudFormation templates which can be deployed to create infrastructure on AWS. For more information, click"," ",Object(X.jsx)(ee,{href:"https://docs.aws.amazon.com/cdk/latest/guide/home.html",children:"here"}),"."]})}),Object(X.jsx)(Z,{question:"What is CDK8s?",children:Object(X.jsxs)("p",{children:["CDK8s is an open-source software development framework for defining Kubernetes applications and reusable abstractions using familiar programming languages and rich object-oriented APIs."," ",Object(X.jsx)("strong",{children:"cdk8s"})," apps synthesize into standard Kubernetes manifests which can be applied to any Kubernetes cluster. For more information, click"," ",Object(X.jsx)(ee,{href:"https://cdk8s.io/",children:"here"}),"."]})}),Object(X.jsx)(Z,{question:"What is CDKtf?",children:Object(X.jsxs)("p",{children:["The community preview of the"," ",Object(X.jsx)(ee,{href:"https://aws.amazon.com/cdk/",children:"Cloud Development Kit"}),"for Terraform allows you to define infrastructure using a familiar programming language such as TypeScript, Python, or Go, while leveraging the hundreds of providers and thousands of module definitions provided by Terraform and the Terraform ecosystem. For more information, click"," ",Object(X.jsx)(ee,{href:"https://learn.hashicorp.com/tutorials/terraform/cdktf",children:"here"}),"."]})}),Object(X.jsx)(Z,{question:"What programming languages are supported in Dev Preview?",children:Object(X.jsx)("p",{children:"The Construct Hub Dev Preview supports Python and TypeScript."})}),Object(X.jsx)(Z,{question:"Is the support for .NET, Java and Go in the roadmap?",children:Object(X.jsx)("p",{children:"Yes."})}),Object(X.jsx)(Z,{question:"Can I view the source code of a construct?",children:Object(X.jsx)("p",{children:"For each package you can click the repository link that the publisher provided with the package. Theoretically this link should redirect your to the package\u2019s repository. However, we noticed that sometimes the code in the repository can be more or less updated than the package\u2019s code. Please take that into account."})}),Object(X.jsx)(Z,{question:"How can I install a package?",children:Object(X.jsx)("p",{children:"Press \u201cInstall\u201d in the package page and you\u2019ll see the installation instructions."})}),Object(X.jsx)(Z,{question:"How can I report a package?",children:Object(X.jsxs)("p",{children:['You can report a package by clicking "Report a package" from the package page. For claims of copyright infringement, read here:'," ",Object(X.jsx)(ee,{href:"https://aws.amazon.com/terms/#notice-and-procedure-for-making-claims-of-copyright-infringement",children:"https://aws.amazon.com/terms/#notice-and-procedure-for-making-claims-of-copyright-infringement"}),"."]})}),Object(X.jsx)(Z,{question:"How can I open a bug or send a PR for a package?",children:Object(X.jsx)("p",{children:"The package is owned by the publisher. To report a bug or send a PR, you should go to the repository link the publisher provided and open a ticket there"})}),Object(X.jsx)(Z,{question:"Why isn\u2019t my package displayed in the Construct Hub?",children:Object(X.jsx)("p",{children:"The Construct Hub displays only publicly available constructs that are JSII compatible and that were published on a public npm registry with an open source license. The package should be published on npm registry with the one of the following Keywords: aws-cdk, cdk8s or cdktf."})}),Object(X.jsx)(Z,{question:"Can I update my package after it has been displayed?",children:Object(X.jsx)("p",{children:"Yes. You should publish a new valid version to the public npm registry. We will detect the new version and display it on the Construct Hub."})}),Object(X.jsx)(Z,{question:"How does the Construct Hub relates to the Construct Catalog?",children:Object(X.jsxs)("p",{children:["The Construct Catalog was built by the CDK community in collaboration with the AWS CDK team. The Construct Hub is the official version for the Construct Catalog."," ",Object(X.jsx)(ee,{href:"https://awscdk.io",children:"https://awscdk.io"})," now redirects to the Construct Hub."]})}),Object(X.jsx)(Z,{question:"How can I participate in the Construct Hub community?",children:Object(X.jsxs)("p",{children:["The Construct Hub is built as a public construct. Please join the"," ",Object(X.jsx)(ee,{href:"https://github.com/cdklabs/construct-hub-webapp",children:"Construct Hub GitHub community"}),". You are also welcome to join the #construct-hub-dev channel in the ",Object(X.jsx)(ee,{href:"https://cdk.dev/",children:"CDK community"})," Slack workspace."]})}),Object(X.jsx)(Z,{question:"Is there a community slack channel for the CDK community?",children:Object(X.jsxs)("p",{children:["Please join the CDK Slack channel (",Object(X.jsx)(ee,{href:"https://cdk.dev/",children:"https://cdk.dev/"}),"). This Slack channel is managed by the CDK community for the CDK community."]})})]}),Object(X.jsxs)(te,{heading:"Getting Started",children:[Object(X.jsx)(Z,{question:"Do I need a user for the Construct Hub?",children:Object(X.jsx)("p",{children:"No. The Construct Hub doesn\u2019t require any signup."})}),Object(X.jsx)(Z,{question:"How do I get started?",children:Object(X.jsx)("p",{children:"Use our home page to discover publicly available packages. You may run a search to find packages you\u2019re interested in and mention your preferred programming language. For each package you will find helpful information such as README and API reference for the supported programming languages. You will also find links and keywords that the publisher provided with the package and installation instructions."})})]})]})]})})}}}]);
+//# sourceMappingURL=13.a9cae057.chunk.js.map