Add algolia UI

package.json

@@ -39,18 +39,21 @@
   },
   "dependencies": {
     "@fontsource/source-sans-pro": "^4.2.2",
+    "algoliasearch": "^4.9.0",
     "babel-plugin-styled-components": "^1.12.0",
     "gatsby": "^3.1.2",
     "gatsby-image": "^3.1.0",
     "gatsby-plugin-react-helmet": "^4.1.0",
     "gatsby-plugin-styled-components": "^4.1.0",
     "gatsby-source-filesystem": "^3.1.0",
     "gatsby-transformer-remark": "^3.1.0",
+    "instantsearch.css": "^7.4.5",
     "polished": "^4.1.1",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
+    "react-instantsearch-dom": "^6.10.3",
     "styled-components": "^5.2.1"
   },
   "devDependencies": {

src/components/categoryHero.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'gatsby';
 
 import styled from 'styled-components';
 
@@ -30,6 +31,14 @@ const StyledCategoryCard = styled.div`
   .subtitle {
     text-align: center;
   }
+
+  a {
+    color: #ffffff;
+  }
+
+  a:hover {
+    opacity: 90%;
+  }
 `;
 
 /*
@@ -39,30 +48,38 @@ export default function CategoryHero() {
   return (
     <StyledCategoryHeroContainer>
       <StyledCategoryCard>
-        <h2>Guides</h2>
+        <h2>
+          <Link to="/guides">Guides</Link>
+        </h2>
         <p className="subtitle">
           Guides are comprehensive, conceptually-focused documents providing
           stand-alone introductions to core packages in addition to the
           underlying astronomical concepts.
         </p>
       </StyledCategoryCard>
       <StyledCategoryCard>
-        <h2>Tutorials</h2>
+        <h2>
+          <Link to="/tutorials">Tutorials</Link>
+        </h2>
         <p className="subtitle">
           Tutorials are step-by-step cookbooks for common activities that
           incorporate several packages. They are more specific and less
           conceptual than Guides but more extended than Examples.
         </p>
       </StyledCategoryCard>
       <StyledCategoryCard>
-        <h2>Documentation</h2>
+        <h2>
+          <Link to="/documentation">Documentation</Link>
+        </h2>
         <p className="subtitle">
           Documentation is the complete description of a package with all
           requisite details, including usage, dependencies, and examples.
         </p>
       </StyledCategoryCard>
       <StyledCategoryCard>
-        <h2>Examples</h2>
+        <h2>
+          <Link to="/examples">Examples</Link>
+        </h2>
         <p className="subtitle">
           Examples are stand-alone code snippets that live in the astropy
           documentation that demonstrate a specific functionality within a

src/components/footer.js

@@ -19,16 +19,16 @@ export default function Footer() {
       </p>
       <ul>
         <li>
-          <Link to="/">Guides</Link>
+          <Link to="/guides">Guides</Link>
         </li>
         <li>
-          <Link to="/">Tutorials</Link>
+          <Link to="/tutorials">Tutorials</Link>
         </li>
         <li>
-          <Link to="/">Documentation</Link>
+          <Link to="/documentation">Documentation</Link>
         </li>
         <li>
-          <Link to="/">Examples</Link>
+          <Link to="/examples">Examples</Link>
         </li>
         <li>
           <Link to="/contributing/">Contribute to Learn Astropy</Link>

src/components/instantsearch/currentRefinements.js

@@ -0,0 +1,57 @@
+/*
+ * Customized version of the CurrentRefinements widget that transforms the
+ * titles of attribues.
+ */
+
+import React from 'react';
+import styled from 'styled-components';
+
+import { CurrentRefinements as CurrentRefinementsCore } from 'react-instantsearch-dom';
+
+/**
+ * Custom prefixes for item labels.
+ *
+ * First items in the individual arrays are the prefixes of labels, not
+ * including the ":". The second items are replacement values for those
+ * prefixes.
+ */
+const labelPrefixes = [
+  ['astropy_package_keywords', 'Astropy package'],
+  ['python_package_keywords', 'Python package'],
+  ['task_keywords', 'Task'],
+  ['science_keywords', 'Science'],
+];
+const labelPrefixMap = new Map(labelPrefixes);
+
+/**
+ * Transforms the label attribute of a refinement items to use a customized
+ * label from labelPrefixes.
+ *
+ * This function identifies refinements based on the prefix for the label,
+ * which is the text before the ":".
+ */
+export const itemTransformer = (items) =>
+  items.map((item) => {
+    const labelParts = item.label.split(':', 2);
+    const suggestedPrefix = labelPrefixMap.get(labelParts[0]);
+    if (suggestedPrefix) {
+      item.label = `${suggestedPrefix}: ${labelParts[1]}`;
+    }
+    return item;
+  });
+
+const StyledCurrentRefinements = styled(CurrentRefinementsCore)`
+  margin-top: 0.25rem;
+`;
+
+/**
+ * Custom version of the CurrentRefinements instant search widget
+ * that includes custom styling and label transformations.
+ */
+const CurrentRefinements = () => (
+  <>
+    <StyledCurrentRefinements transformItems={itemTransformer} />
+  </>
+);
+
+export default CurrentRefinements;

src/components/instantsearch/hits.js

@@ -0,0 +1,60 @@
+/**
+ * Extension to the Algolia Hits widget that passes props through to individual
+ * Hit components.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { connectHits } from 'react-instantsearch-dom';
+
+/**
+ * Custom Hits component that passes props to individual Hit components.
+ */
+const Hits = ({ hits, hitComponent, className = '' }) => {
+  const HitComponent = hitComponent;
+
+  return (
+    <ol className={className}>
+      {hits.map((hit) => (
+        <li key={hit.objectID} className="hits-item">
+          <HitComponent hit={hit} />
+        </li>
+      ))}
+    </ol>
+  );
+};
+
+const HitPropTypes = PropTypes.shape({
+  objectID: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    .isRequired,
+});
+
+Hits.propTypes = {
+  hits: PropTypes.arrayOf(HitPropTypes.isRequired).isRequired,
+  hitComponent: PropTypes.func.isRequired,
+  className: PropTypes.string,
+};
+
+/**
+ * The Hits component, connected to Algolia instantsearch.
+ */
+const ConnectedHits = connectHits(Hits);
+
+/**
+ * Styled components wrapper for ConnectedHits.
+ */
+export const StyledHits = styled(ConnectedHits)`
+  display: block;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  .hits-item {
+    width: 100%;
+    margin-bottom: 1rem;
+    padding: 1rem;
+    border: 1px solid #ddd;
+    border-radius: 1rem;
+  }
+`;

src/components/instantsearch/refinementList.js

@@ -0,0 +1,16 @@
+/*
+ * Styled version of the Algolia InstantSearch RefinementList component.
+ *
+ * https://www.algolia.com/doc/api-reference/widgets/refinement-list/react/
+ */
+
+import styled from 'styled-components';
+import { RefinementList as BaseRefinementList } from 'react-instantsearch-dom';
+
+const RefinementList = styled(BaseRefinementList)`
+  .ais-RefinementList-labelText {
+    margin-left: 0.25rem;
+  }
+`;
+
+export default RefinementList;

src/components/layout.js

@@ -8,6 +8,9 @@ import '@fontsource/source-sans-pro/400.css';
 import '@fontsource/source-sans-pro/400-italic.css';
 import '@fontsource/source-sans-pro/700.css';
 
+// Full Algolia instantsearch theme includes its reset
+import 'instantsearch.css/themes/satellite.css';
+
 import GlobalStyles from '../styles/globalStyles';
 import Header from './header';
 import Footer from './footer';

src/components/searchLayout.js

@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+
+import bp from '../styles/breakpoints';
+
+export const SearchLayout = styled.div`
+  grid-template-columns: 16rem 1fr;
+  grid-template-rows: auto 1fr;
+  grid-column-gap: 2rem;
+  grid-row-gap: 2rem;
+  margin-top: 4rem;
+
+  /*
+   * Use grid layout on bigger screens.
+   */
+  @media only screen and (min-width: ${bp.phone}) {
+    display: grid;
+  }
+`;
+
+export const SearchBoxArea = styled.div`
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+`;
+
+export const SearchRefinementsArea = styled.div`
+  grid-column: 1 / 2;
+  grid-row: 1 / 3;
+
+  margin-top: 1rem;
+  @media only screen and (min-width: ${bp.phone}) {
+    margin-top: 0;
+  }
+`;
+
+/* Styled component div around a refinement widget.
+ *
+ * This styling controls spacing and the heading styling
+ */
+export const SearchRefinementsSection = styled.div`
+  margin-bottom: 2rem;
+  h2 {
+    margin-top: 0;
+    font-size: 1.2rem;
+  }
+`;
+
+export const SearchResultsArea = styled.div`
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+`;