diff --git a/.pnp.cjs b/.pnp.cjs index e87049f27be6..8d18d9756a0b 100755 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -10486,6 +10486,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { ["react-icons", "virtual:118b26a6cee620b5aa3e7e8d8b8e34cd9e486f75b92701001168da9be550fadd8c9d9b12643c642e2d528c2624fd8fe7e128eec9d715340efac44400432a0e0c#npm:3.11.0"],\ ["react-instantsearch-dom", "virtual:118b26a6cee620b5aa3e7e8d8b8e34cd9e486f75b92701001168da9be550fadd8c9d9b12643c642e2d528c2624fd8fe7e128eec9d715340efac44400432a0e0c#npm:6.6.0"],\ ["react-monaco-editor", "virtual:118b26a6cee620b5aa3e7e8d8b8e34cd9e486f75b92701001168da9be550fadd8c9d9b12643c642e2d528c2624fd8fe7e128eec9d715340efac44400432a0e0c#npm:0.36.0"],\ + ["react-responsive-carousel", "npm:3.2.22"],\ ["react-scroll-into-view-if-needed", "virtual:118b26a6cee620b5aa3e7e8d8b8e34cd9e486f75b92701001168da9be550fadd8c9d9b12643c642e2d528c2624fd8fe7e128eec9d715340efac44400432a0e0c#npm:2.1.7"],\ ["react-select", "virtual:118b26a6cee620b5aa3e7e8d8b8e34cd9e486f75b92701001168da9be550fadd8c9d9b12643c642e2d528c2624fd8fe7e128eec9d715340efac44400432a0e0c#npm:3.1.0"],\ ["react-spinners", "virtual:118b26a6cee620b5aa3e7e8d8b8e34cd9e486f75b92701001168da9be550fadd8c9d9b12643c642e2d528c2624fd8fe7e128eec9d715340efac44400432a0e0c#npm:0.8.3"],\ @@ -33961,6 +33962,16 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { "linkType": "HARD"\ }]\ ]],\ + ["react-easy-swipe", [\ + ["npm:0.0.21", {\ + "packageLocation": "./.yarn/cache/react-easy-swipe-npm-0.0.21-b711aee7dc-225f12a9dd.zip/node_modules/react-easy-swipe/",\ + "packageDependencies": [\ + ["react-easy-swipe", "npm:0.0.21"],\ + ["prop-types", "npm:15.7.2"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["react-error-overlay", [\ ["npm:6.0.9", {\ "packageLocation": "./.yarn/cache/react-error-overlay-npm-6.0.9-96e7e1e53a-695853bc88.zip/node_modules/react-error-overlay/",\ @@ -34190,6 +34201,18 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { "linkType": "HARD"\ }]\ ]],\ + ["react-responsive-carousel", [\ + ["npm:3.2.22", {\ + "packageLocation": "./.yarn/cache/react-responsive-carousel-npm-3.2.22-803c5f85bf-6e6ef7a2c1.zip/node_modules/react-responsive-carousel/",\ + "packageDependencies": [\ + ["react-responsive-carousel", "npm:3.2.22"],\ + ["classnames", "npm:2.2.6"],\ + ["prop-types", "npm:15.7.2"],\ + ["react-easy-swipe", "npm:0.0.21"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["react-scroll-into-view-if-needed", [\ ["npm:2.1.7", {\ "packageLocation": "./.yarn/cache/react-scroll-into-view-if-needed-npm-2.1.7-27d82a1caa-d2f025060b.zip/node_modules/react-scroll-into-view-if-needed/",\ diff --git a/.yarn/cache/react-easy-swipe-npm-0.0.21-b711aee7dc-225f12a9dd.zip b/.yarn/cache/react-easy-swipe-npm-0.0.21-b711aee7dc-225f12a9dd.zip new file mode 100644 index 000000000000..02fa2564a83e Binary files /dev/null and b/.yarn/cache/react-easy-swipe-npm-0.0.21-b711aee7dc-225f12a9dd.zip differ diff --git a/.yarn/cache/react-responsive-carousel-npm-3.2.22-803c5f85bf-6e6ef7a2c1.zip b/.yarn/cache/react-responsive-carousel-npm-3.2.22-803c5f85bf-6e6ef7a2c1.zip new file mode 100644 index 000000000000..225c26ea55aa Binary files /dev/null and b/.yarn/cache/react-responsive-carousel-npm-3.2.22-803c5f85bf-6e6ef7a2c1.zip differ diff --git a/packages/gatsby/package.json b/packages/gatsby/package.json index 1a5a2ef31691..6f9b6e3f6a5a 100644 --- a/packages/gatsby/package.json +++ b/packages/gatsby/package.json @@ -72,6 +72,7 @@ "react-icons": "^3.10.0", "react-instantsearch-dom": "^6.6.0", "react-monaco-editor": "^0.36.0", + "react-responsive-carousel": "^3.2.22", "react-scroll-into-view-if-needed": "^2.1.7", "react-select": "^3.1.0", "react-spinners": "^0.8.3", diff --git a/packages/gatsby/src/components/search/SearchResults.js b/packages/gatsby/src/components/search/SearchResults.js index c315f47b3713..b2740dd513cd 100644 --- a/packages/gatsby/src/components/search/SearchResults.js +++ b/packages/gatsby/src/components/search/SearchResults.js @@ -1,13 +1,28 @@ +import 'react-responsive-carousel/lib/styles/carousel.min.css'; import styled from '@emotion/styled'; import {connectHits, connectStateResults} from 'react-instantsearch-dom'; import {Stats} from 'react-instantsearch-dom'; -import React from 'react'; +import {Carousel} from 'react-responsive-carousel'; +import ReactTooltip from 'react-tooltip'; +import React, {useRef} from 'react'; import {Hit} from '../hit'; import {isEmpty} from '../util'; import {Pagination} from './Pagination'; +const SPONSORS = [{ + name: `Doppler`, + description: `Universal Secrets Platform`, + icon: `https://dashboard.doppler.com/imgs/logo_color.png`, + url: `https://www.doppler.com/?utm_campaign=github_repo&utm_medium=referral&utm_content=yarn&utm_source=github`, +}, { + name: `WorkOS`, + description: `all-in-one solution for enterprise-ready apps`, + icon: `https://assets-global.website-files.com/5ef26797488fe01cc1b89848/61426734f2f4a013c6f2d774_Favicon%2032x32.png`, + url: `https://workos.com/?utm_campaign=github_repo&utm_medium=referral&utm_content=berry&utm_source=github`, +}]; + const Hits = connectHits(({hits, onTagClick, onOwnerClick, searchState}) => hits.map(hit => ( <> - - - - `found ${num.toLocaleString(`en`)} packages in ${time}ms`}}/> - - - Thanks to Doppler, the Universal Secrets Platform, for sponsoring Yarn! - - - - - - - +const Sponsor = ({name, description, icon, url}) => <> + Become a Gold sponsor`}> + Thanks to {`${name} {name}, the {description}, for sponsoring Yarn! + +; + +const ResultsFound = ({pagination, onTagClick, onOwnerClick, searchState}) => { + // We use a ref to have a new selection on each component creation rather than on each rerender + const selectedItem = useRef(Math.trunc(Math.random() * SPONSORS.length)); + + return <> + + + + `found ${num.toLocaleString(`en`)} packages in ${time}ms`}}/> + + + {SPONSORS.map(sponsor => )} + + + + + + + + Search by Algolia - {` - `} - + {` - `} + read how it works - + . - - -; + + + ; +}; const NoPackagesFound = styled.div` padding: 0 15px; diff --git a/yarn.lock b/yarn.lock index 9c8790e8bed7..17aab8faf0c7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5643,6 +5643,7 @@ __metadata: react-icons: ^3.10.0 react-instantsearch-dom: ^6.6.0 react-monaco-editor: ^0.36.0 + react-responsive-carousel: ^3.2.22 react-scroll-into-view-if-needed: ^2.1.7 react-select: ^3.1.0 react-spinners: ^0.8.3 @@ -21708,6 +21709,15 @@ __metadata: languageName: node linkType: hard +"react-easy-swipe@npm:^0.0.21": + version: 0.0.21 + resolution: "react-easy-swipe@npm:0.0.21" + dependencies: + prop-types: ^15.5.8 + checksum: 225f12a9dd410db1c790220867ab1eb58e2ef0a2bdae8541330805fc5b9905e242ab307b019f9aaed76473849a753f363baff03fa8a77e7a1860d7b41dc83ec0 + languageName: node + linkType: hard + "react-error-overlay@npm:^6.0.9": version: 6.0.9 resolution: "react-error-overlay@npm:6.0.9" @@ -21836,6 +21846,17 @@ __metadata: languageName: node linkType: hard +"react-responsive-carousel@npm:^3.2.22": + version: 3.2.22 + resolution: "react-responsive-carousel@npm:3.2.22" + dependencies: + classnames: ^2.2.5 + prop-types: ^15.5.8 + react-easy-swipe: ^0.0.21 + checksum: 6e6ef7a2c140494bb0186af292dd8327ecb8626a3e93fb188923881c760bc996ab84346370066913481d9a4e967555e3c6386046c2aadde69496d1f41ffd5096 + languageName: node + linkType: hard + "react-scroll-into-view-if-needed@npm:^2.1.7": version: 2.1.7 resolution: "react-scroll-into-view-if-needed@npm:2.1.7"