Implement search UI #25

jonathansick · 2021-08-02T19:35:14Z

This PR implements a search UI with Algolia instantsearch.

This work is built around the concept that content and search results should be shown directly on the homepage rather than in per-category listing pages. To do this I've pared down the UI so we don't have the category cards and large search box on the homepage.

This replaces #22 which was built around the idea of per-category result pages.

A demo of the design is available at https://astropy-search-demo.jsick.dev/

jonathansick · 2021-08-02T19:36:30Z

This should be merged after #24

jonathansick · 2021-09-02T16:30:35Z

@adrn There's still more to do but this is 80% of it, and it might be easier to make smaller improvements in individual PRs after this.

adrn · 2021-09-03T15:10:37Z

Awesome!! I'll take a look over the next few days.

adrn

Only a few minor comments! I didn't review the CSS closely but the styling in your demo site looks good to me :)

adrn · 2021-09-07T15:11:15Z

src/components/footer.js

+            <p>
+              The Learn Astropy website was developed under a grant by the{' '}
+              <a href="http://www.dunlap.utoronto.ca">
+                Universitory of Toronto Dunlap Institute for Astrophysics.


Suggested change

Universitory of Toronto Dunlap Institute for Astrophysics.

University of Toronto Dunlap Institute for Astrophysics.

adrn · 2021-09-07T15:13:03Z

src/components/footer.js

+                <img
+                  className="numfocusStamp__image"
+                  src={numfocusStamp}
+                  alt="A fiscally sponsored project of Numfocus"


Suggested change

alt="A fiscally sponsored project of Numfocus"

alt="A fiscally sponsored project of NumFOCUS"

adrn · 2021-09-07T15:15:54Z

src/searchClient.js

+  'KSDFJKHCO2',
+  'fadf7c74af324735d9e45d68481531ab'


Is it ok for this to be public?

Yeah, they're meant to be on the client-side and are read-only credentials.

eblur · 2021-09-07T15:31:51Z

This looks good to me! I like that each card has a "Guide", "Tutorial", etc attached to it. I'm glad that they are labeled in that way.

One issue I note is that there is probably a lot of metadata still missing in order to properly search and sort. For example, the CCD Data Reduction Guide relies heavily on ccdproc, a package that is being developed to replace IRAF and will be of key interest to many people.

eblur · 2021-09-07T15:37:55Z

I would not require my above note to be fixed to accept the PR. After some discussion, we noticed it is related to astropy-librarian Issue 14

With the move to put the search UI on the homepage and combine results from all content categories, we no longer want the large header with hero search and the content category cards on the homepage. Instead, we want that header to shrink into something more like a thin global nav header that contains the site logo and links.

Add more design tokens for defining a range of sizes and neutral colors, and map those tokens to specific use-cases. Overall, this helps maintains consistency in the design so that sizes and colours are more consistent across the site. In the future we'll want to build out a full grid of neutral and primary colors to use in different situations.

This component works well with the new NavHeader. It presents a full-width background and is meant to encompass the page's title and a lead paragraph or graphic.

This will make space for adding the search UI.

Adds algoliasearch 4.10.3 and thr react-instantsearch-dom ui library version 6.12.1.

This is loaded on the root layout.js for every page from the instantsearch.css package.

This search client includes our Algolia project ID and read-only API key. Both of these are safe and in fact intended to be used client-side. Individual search UIs can import and use this client with the InstantSearch React component.

Breakpoints can't be set through CSS custom properties. Instead, we set them in JS and use string interpolation in styled components to share reusable breakpoint dimensions.

This adds the beginnings of a search UI to the index page. Currently it uses stock UI components from react-instantsearch. The SearchLayout component implements a two-column search layout with refinements on the left.

The ResultCard styles individual results. The StyledHits component and other components in src/components/instantsearch/hits.js serves to connect the custom UI into the instantsearch UI core.

Use flexbox to create a side-by-side grid that adapts if there isn't a thumbnail image. Fix side-by-side card appearance

Refine the listing based on keywords and content type. Note that all these attributes must be configured as "facets" in Algolia.

And gatsby-plugin-styled-components to 4.12.0

@Viewport

It turns out that styled-components dropped support for the @Viewport selector that was still in our boilerplate (now using a meta tag for this anyways). But that was preventing many global styles on the :root and html element from being parsed in the static site build. Also moved the <GlobalStyles> outside the <StyledLayout> tag in the Layout component because I think this is more correct (I haven't tested whether this also contributed to the problem, in isolation, though).

This is required for free/community/open source usage of Algolia.

Eventually we may want to associate different icons or tags with different content types; but for now this works great.

Show the page title if the hit is within the guide; otherwise the guide's title is show with a link to the homepage. Also, when showing the page title, also include the title of the guide itself to privide context.

This component implements the feature where "priority" resources are shown preferentially when a user doesn't enter a search term; but when a search term is entered the sort automatically switches to "relevance" to provide the best search match. Behind the scenes, the PrioritySort component is switching between two different Algolia indices. The relevance-based index is the default; the priority index is a "replica" index that has a different sort order to leverage the priority field in our Algolia records.

This creates the link column style of footer navigation.

This lets us add a background, much like the page cover and header.

jonathansick · 2021-09-14T15:00:29Z

@eblur That's a really good point about the keyword metadata for guides. We'll need to either establish a metadata file to go along with a guide to provide that or start extracting Python package usage from code samples as discussed in astropy/learn-astropy-librarian#14 (which has some up-front challenges, but would be a nice system to have in the long run. Either way, the front-end wouldn't need to change to make that possible, so it's something I'll need to add to https://github.com/astropy/learn-astropy-librarian. I do think a metadata header standard or metadata file would be good for guides, and I've created a second ticket for that: astropy/learn-astropy-librarian#17

jonathansick mentioned this pull request Aug 2, 2021

Add algolia UI #22

Closed

jonathansick force-pushed the add-search branch from 90e3797 to 3fe4cef Compare August 4, 2021 15:20

jonathansick marked this pull request as ready for review September 2, 2021 16:29

jonathansick requested a review from adrn September 2, 2021 16:29

adrn reviewed Sep 7, 2021

View reviewed changes

jonathansick added 20 commits September 14, 2021 10:28

Create a PageCover component

2369f59

This component works well with the new NavHeader. It presents a full-width background and is meant to encompass the page's title and a lead paragraph or graphic.

Delete existing copy from the homepage

9dc49d5

This will make space for adding the search UI.

Install algoliasearch

b1ec7f6

Adds algoliasearch 4.10.3 and thr react-instantsearch-dom ui library version 6.12.1.

Load Algolia instantsearch base CSS

4ce054c

This is loaded on the root layout.js for every page from the instantsearch.css package.

Add a searchClient

fd71424

This search client includes our Algolia project ID and read-only API key. Both of these are safe and in fact intended to be used client-side. Individual search UIs can import and use this client with the InstantSearch React component.

Add breakpoints module

9d2f881

Breakpoints can't be set through CSS custom properties. Instead, we set them in JS and use string interpolation in styled components to share reusable breakpoint dimensions.

Add search to the index page

a3c6864

This adds the beginnings of a search UI to the index page. Currently it uses stock UI components from react-instantsearch. The SearchLayout component implements a two-column search layout with refinements on the left.

Add style results with the ResultCard component

d2e2d71

The ResultCard styles individual results. The StyledHits component and other components in src/components/instantsearch/hits.js serves to connect the custom UI into the instantsearch UI core.

Fix name of index

1e70297

Lay out thumbnail and content in result card

4f6b065

Use flexbox to create a side-by-side grid that adapts if there isn't a thumbnail image. Fix side-by-side card appearance

Add facet-based search refinements to UI

aa6d617

Refine the listing based on keywords and content type. Note that all these attributes must be configured as "facets" in Algolia.

Switch to root_url and title

bf52723

Update styled-components to 5.3.1

a0a63e6

And gatsby-plugin-styled-components to 4.12.0

Add the Algolia Powered By widget

6f5705f

This is required for free/community/open source usage of Algolia.

Tag results by their content types

5f73ab5

Eventually we may want to associate different icons or tags with different content types; but for now this works great.

Show page title for guides

4d81fa9

Show the page title if the hit is within the guide; otherwise the guide's title is show with a link to the homepage. Also, when showing the page title, also include the title of the guide itself to privide context.

Make the thumnail image a click target too

7642c66

jonathansick added 7 commits September 14, 2021 10:28

Include Learn Astropy logo in header

8694c3d

Add header nav for internal pages and Astropy

8d45893

Style links in the footer

1047ed6

This creates the link column style of footer navigation.

Full-width container for the footer

2547fcf

This lets us add a background, much like the page cover and header.

Add code of conduct and sponsorships to footer

fab52dd

Make header links white with orange on hover

444c0d0

jonathansick force-pushed the add-search branch from 59f6a39 to 444c0d0 Compare September 14, 2021 14:29

jonathansick merged commit b9f9aba into astropy:main Sep 14, 2021

jonathansick deleted the add-search branch September 14, 2021 15:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement search UI #25

Implement search UI #25

jonathansick commented Aug 2, 2021 •

edited

Loading

jonathansick commented Aug 2, 2021

jonathansick commented Sep 2, 2021

adrn commented Sep 3, 2021

adrn left a comment

adrn Sep 7, 2021

adrn Sep 7, 2021

adrn Sep 7, 2021

jonathansick Sep 14, 2021

eblur commented Sep 7, 2021

eblur commented Sep 7, 2021

jonathansick commented Sep 14, 2021

	Universitory of Toronto Dunlap Institute for Astrophysics.
	University of Toronto Dunlap Institute for Astrophysics.

	alt="A fiscally sponsored project of Numfocus"
	alt="A fiscally sponsored project of NumFOCUS"

Implement search UI #25

Implement search UI #25

Conversation

jonathansick commented Aug 2, 2021 • edited Loading

jonathansick commented Aug 2, 2021

jonathansick commented Sep 2, 2021

adrn commented Sep 3, 2021

adrn left a comment

Choose a reason for hiding this comment

adrn Sep 7, 2021

Choose a reason for hiding this comment

adrn Sep 7, 2021

Choose a reason for hiding this comment

adrn Sep 7, 2021

Choose a reason for hiding this comment

jonathansick Sep 14, 2021

Choose a reason for hiding this comment

eblur commented Sep 7, 2021

eblur commented Sep 7, 2021

jonathansick commented Sep 14, 2021

jonathansick commented Aug 2, 2021 •

edited

Loading