Implement package search bar on docs website

.yarn/virtual/@haroenv-react-sparklines-virtual-bcabc2fb5fd29428a937910ef48d9c69535702d8279d250a59f63cf7636ddd6e

@@ -0,0 +1 @@
+../cache/@haroenv-react-sparklines-npm-1.7.1-2755f1bba42e3b2def2b21a20d2f86d6d8443d4e55e1b805fe32027b39de0bef.zip

.yarn/virtual/algoliasearch-helper-virtual-6e1e02b2d08219d44191bd455829602785f629449e63d05fd4edd143243c4896

@@ -0,0 +1 @@
+../cache/algoliasearch-helper-npm-2.28.0-566720862a1cad91766897d6543e4e691118cc8ca310ce3a1b9d327fa2dcbe80.zip

.yarn/virtual/algoliasearch-helper-virtual-7076ffec70e41617527832bb4dec55485923470ea03bee9a3e850e55749b12e3

@@ -0,0 +1 @@
+../cache/algoliasearch-helper-npm-2.28.0-566720862a1cad91766897d6543e4e691118cc8ca310ce3a1b9d327fa2dcbe80.zip

.yarn/virtual/react-instantsearch-core-virtual-0dd67199452e1f41beb511051c5c512707ecf8681760f58a2544fe0992883509

@@ -0,0 +1 @@
+../cache/react-instantsearch-core-npm-5.7.0-e6199098846a7a757aafd310e02d090e47c7d7babef72fab8eee60b15540c137.zip

.yarn/virtual/react-instantsearch-dom-virtual-5d3f23b35c6d1b766d84703cb585328ecfe509325ab358df0d19cb932f94088a

@@ -0,0 +1 @@
+../cache/react-instantsearch-dom-npm-5.7.0-774cb2cf555b178d89cc8d8194923167af0b9a792e2972556f67c37d6b62689c.zip

.yarn/virtual/react-transition-group-virtual-b73173f616346ba489d3878ea726cbdc3f9ddd2d35528eb3ba709eb6a046ee04

@@ -0,0 +1 @@
+../cache/react-transition-group-npm-1.2.1-7236c988d92d3ea6690e69cca3ae263061533faaa28471aaf3d98cb9aa39d3b2.zip

packages/gatsby/package.json

@@ -5,8 +5,11 @@
     "@emotion/core": "^10.0.7",
     "@emotion/styled": "^10.0.7",
     "@emotion/styled-base": "^10.0.7",
+    "@haroenv/react-sparklines": "^1.7.1",
     "@reach/router": "npm:^1.1.1",
     "algoliasearch": "^3.32.1",
+    "bytes": "^3.1.0",
+    "date-fns": "^2.0.0-beta.2",
     "es6-promise": "^4.2.6",
     "gatsby": "^2.13.6",
     "gatsby-image": "^2.0.31",
@@ -25,17 +28,26 @@
     "gatsby-source-filesystem": "^2.0.23",
     "gatsby-transformer-remark": "^2.3.2",
     "gatsby-transformer-sharp": "^2.1.15",
+    "highlight.js": "^9.15.8",
+    "marked": "^0.6.3",
     "minimatch": "^3.0.4",
     "pify": "^4.0.1",
     "prismjs": "^1.16.0",
     "prop-types": "^15.7.2",
+    "qs": "^6.7.0",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "react-helmet": "^5.2.0",
     "react-icons": "^3.7.0",
+    "react-instantsearch-dom": "^5.7.0",
+    "react-transition-group": "^1.2.1",
+    "regenerator-runtime": "^0.13.3",
     "remark-html": "^9.0.0",
     "remark-parse": "^6.0.3",
-    "unified": "^7.1.0"
+    "unescape-html": "^1.1.0",
+    "unfetch": "^4.1.0",
+    "unified": "^7.1.0",
+    "xss": "^1.0.6"
   },
   "scripts": {
     "build:doc": "rm -rf .cache public && gatsby build --prefix-paths \"$@\" && rsync -rtuc --delete public/ ../../docs/",

packages/gatsby/src/components/config.js

@@ -0,0 +1,10 @@
+export const algolia = {
+  appId: 'OFCNCOG2CU',
+  apiKey: 'f54e21fa3a2a0160595bb058179bfb1e',
+  indexName: 'npm-search',
+};
+
+export const docsearch = {
+  apiKey: '3949f721e5d8ca1de8928152ff745b28',
+  indexName: 'yarnpkg',
+};

packages/gatsby/src/components/details/Activity.js

@@ -0,0 +1,47 @@
+import React                          from 'react';
+import { Sparklines, SparklinesLine } from '@haroenv/react-sparklines';
+
+import { Di }                         from './';
+
+const Activity = ({
+  graphData,
+  graphLink,
+  lastCommit,
+  commitsLastThreeMonths,
+}) => {
+  if (!graphData && !graphLink && !lastCommit && !commitsLastThreeMonths) {
+    return null;
+  }
+
+  return (
+    <article>
+      <h1>Activity</h1>
+
+      {graphData && (
+        <a href={graphLink} target="_blank" rel="noopener noreferrer">
+          <Sparklines data={graphData} width={100} height={15}>
+            <SparklinesLine color="#2C8EBB" />
+          </Sparklines>
+        </a>
+      )}
+      <dl>
+        {commitsLastThreeMonths >= 0 && (
+          <Di
+            icon="commits"
+            title="Commits last 3 months"
+            description={commitsLastThreeMonths}
+          />
+        )}
+        {lastCommit && (
+          <Di
+            icon="commits-last"
+            title="Last commit"
+            description={lastCommit}
+          />
+        )}
+      </dl>
+    </article>
+  );
+};
+
+export default Activity;

packages/gatsby/src/components/details/Aside.js

@@ -0,0 +1,82 @@
+import React                                      from 'react';
+import styled                                     from '@emotion/styled';
+
+import Install                                    from './Install';
+import Cdn                                        from './Cdn';
+import Links                                      from './Links';
+import Activity                                   from './Activity';
+import Popularity                                 from './Popularity';
+import Usage                                      from './Usage';
+import Versions                                   from './Versions';
+import Contributors                               from './Contributors';
+import Tags                                       from './Tags';
+import { packageJSONLink, isKnownRepositoryHost } from '../util';
+import GithubActivity                             from './GithubActivity';
+
+const AsideContainer = styled.aside`
+  border-left: 1px solid #cbcbcb;
+  float: left;
+  width: 33.3333333333%;
+  padding: 0 15px;
+`;
+
+const DetailsLinks = styled.article`
+  margin-bottom: 2em;
+`;
+
+const Aside = ({
+  name,
+  homepage,
+  repository,
+  contributors,
+  activity,
+  downloads,
+  humanDownloads,
+  stargazers,
+  dependents,
+  humanDependents,
+  dependencies,
+  tags,
+  versions,
+  version,
+  devDependencies,
+  bundlesize,
+  onOpenFileBrowser,
+  jsDelivrHits,
+}) => (
+  <AsideContainer>
+    <DetailsLinks>
+      <Links name={name} homepage={homepage} repository={repository} />
+    </DetailsLinks>
+    <Install name={name} onOpenFileBrowser={onOpenFileBrowser} />
+    <Cdn name={name} version={version} />
+    <Popularity
+      repository={repository}
+      downloads={downloads}
+      humanDownloads={humanDownloads}
+      stargazers={stargazers}
+      dependents={dependents}
+      humanDependents={humanDependents}
+      name={name}
+      jsDelivrHits={jsDelivrHits}
+    />
+    {repository &&
+      isKnownRepositoryHost(repository.host) &&
+      (repository.host === 'github.com' ? (
+        <GithubActivity data={activity} repository={repository} />
+      ) : (
+        <Activity {...activity} repository={repository} />
+      ))}
+    <Usage
+      dependencies={dependencies}
+      devDependencies={devDependencies}
+      bundlesize={bundlesize}
+      {...packageJSONLink(name)}
+    />
+    <Tags tags={tags} name={name} />
+    <Versions versions={versions} />
+    <Contributors contributors={contributors} />
+  </AsideContainer>
+);
+
+export default Aside;

packages/gatsby/src/components/details/Cdn.js

@@ -0,0 +1,90 @@
+import React  from 'react';
+import styled from '@emotion/styled';
+
+import { Di } from './';
+
+const CdnBox = styled.article`
+  h1 {
+    color: #5a5a5a;
+    margin-top: 0;
+    margin-bottom: .5rem;
+    font-weight: 600;
+    font-size: 1.2em;
+    line-height: 1.1;
+  }
+`;
+
+const JsDelivr = ({ name, version }) => (
+  <Di
+    title="jsDelivr"
+    description={
+      <a
+        href={`https://cdn.jsdelivr.net/npm/${name}@${version}/`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        cdn.jsdelivr.net/npm/{name}/
+      </a>
+    }
+  />
+);
+
+const Unpkg = ({ name, version }) => (
+  <Di
+    title="unpkg"
+    description={
+      <a
+        href={`https://unpkg.com/${name}@${version}/`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        unpkg.com/{name}/
+      </a>
+    }
+  />
+);
+
+const BundleRun = ({ name, version }) => (
+  <Di
+    title="bundle.run"
+    description={
+      <a
+        href={`https://bundle.run/${name}@${version}`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        bundle.run/{name}
+      </a>
+    }
+  />
+);
+
+const Cdn = ({ name, version }) => {
+  const cdns = {
+    jsdelivr: JsDelivr,
+    unpkg: Unpkg,
+    bundlerun: BundleRun
+  };
+
+  const order = Object.keys(cdns).sort(() => Math.random() - 0.5);
+
+  const items = order.map(key => {
+    const Component = cdns[key];
+    return (
+      <Component
+        key={key}
+        name={name}
+        version={version}
+      />
+    );
+  });
+
+  return (
+    <CdnBox>
+      <h1>CDNs</h1>
+      <dl>{items}</dl>
+    </CdnBox>
+  );
+};
+
+export default Cdn;

packages/gatsby/src/components/details/Contributors.js

@@ -0,0 +1,18 @@
+import React   from 'react';
+
+import {Owner} from '../hit';
+
+const Contributors = ({ contributors }) => (
+  <article>
+    <h1>Contributors</h1>
+    <ul>
+      {contributors.map(contributor => (
+        <li key={contributor.name}>
+          <Owner {...contributor} />
+        </li>
+      ))}
+    </ul>
+  </article>
+);
+
+export default Contributors;