ADAPT 1101 - Add Algolia search to site #162
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* main: ADAPT 1669 - improve image filename checking (#161)
* Implement and design search overlay. * Implement toggling of search overlay * Add algolia search dependency * Add Gatsby-Plugin-Algolia * Rename query file, add more attributes to algolia index * ADAPT-1205-Hero component mobile/tablet styles and overall tweaks (#110) * Adjust font size and element heights for hero component for different breakpoints * Break everything in hero and start from mobile * sass-lint fixup * Finetune mobile hero * Tablet styles * Restore desktop styles * Add dark overlay on hover/focus for hero CTA box; clean up shadow for other cards * Use Heading component for hero and poster; splash font size fix up for small option * Add image focus option for hero image * Add blue gradient for mobile/tablet on hero image * Finetune for small font option * ADAPT-1185: Sidebar nav treatment for mobile/tablet (#109) Co-authored-by: Sherakama <[email protected]> * ADAPT-1116: Add reusable SbLink component and image crop (object position) to components (#111) Co-authored-by: Shea McKinney <[email protected]> * Update netlify.toml (#115) * Add SR only instruction for Areas to Support page (#114) * ADAPT-1183: Mega menu mobile (#112) * Turn password back on (#116) * ADAPT-1233: Added anchor links plugin to make anchor links reliable. (#118) * ADAPT-1233: Added anchor links plugin to make anchor links reliable. * ADAPT-1233: Alphabetized list. * ADAPT-1347: Refine mega menu (#119) * Always use https (#120) `//` is an anti-pattern when HTTPS is available on the end resource. * Remove Password (#121) * Password on the Giving Site (#122) * ADAPT-1346 Add external link icon and styles for WYSIWYG (#123) * Add style to external links in WYSIWYG * Non-white basic card external link styles * make icon for story image caption link a bit smaller * Add external link style when link is in heading * Works for action link style inside WISYWIG * finetune * ADAPT-1345: Accordion tweaks and fixes (#124) * Allow heading level selection of accordion main heading; font size tweaks; add +/- sign on expand/collapse button as pseudo elements so SR doesn't read it out * Fix the overlapping accordion item title with the icon on the right * Use Heading component for acc item * Set item title back to bold instead of semibold * ADAPT-1321: Preserve utm parameters throughout site. (#125) * ADAPT-1321: Preserve utm parameters throughout site. * Use External Classes Param. * Update src/components/navigation/contentMenu/contentNavItem.js Co-authored-by: Yvonne Tang <[email protected]> * Check for vals, * Update src/components/navigation/contentMenu/contentMenuParentItem.js Co-authored-by: Yvonne Tang <[email protected]> Co-authored-by: Yvonne Tang <[email protected]> * Backing out of WYSIWYG external link icon changes per client's request (#129) * Misc a11y fixes and improvements (#128) * Hidden content in accordion should be actually set to display none to take it out of the DOM to prevent tabbing to links within * Add SR only heading for icon card section * Use reusable components * use reusable components * CTA card images should have empty alt text for screen readers since they are decorative * Poster image also could use empty alt * Applying suggestion by Clare - AMP scan prefers div over section and figure when there is a link wrapped around those elements * Make the AspectRatioImage wrapper change an option so if it's not within a wrapper link in a parent component, it defaults to a figure * Update netlify.toml (#132) * ADAPT-893: Pass Preview API Key into the edit via url. (#131) * ADAPT-893: Pass access key into request URL to protect editor page and API key settings. Co-authored-by: Sherakama <[email protected]> Co-authored-by: Yvonne Tang <[email protected]> * ADAPT-780: Added google tag manager. (#133) * ADAPT-956: Print styles (#127) * ADAPT-1340 More a11y fixes (#130) * add sr only text for external link indicators * Improvement to hamburger aria-label to match visible text * Return focus to hamburger button after escape is pressed * Only handle escape event if there is actually a hamburger button (mobile/tablet) * Add check for if the hamburger menu is open before closing and setting focus with esp * focus management for desktop mega nav * Change mobile header nav external icon to white (a11y contrast) * focus management of sidebar menu on mobile * ADAPT-1368 Make table styles work with new a11y markup adjustments (#135) * Clean up table code * more table * ADAPT-1358 Improve image components (#134) * Improve image optimization - only scale image if original image size is larger than intended size * Don't need no wrapper for hero component image * FullWidthImage component with srcset * fixup * improve fullwidthimage * make imgSizes a variable and not empty only if imgSrcset exist * add a check for small image * Use FullWidthImage for story hero image * only using image width no need for dimensions as an object; doc * fixup * Do not write srcset and sizes if they don't exist * Update src/components/page-types/story/oodStoryFullView.js Co-authored-by: Sherakama <[email protected]> * Update src/components/media/fullWidthImage.js Co-authored-by: Sherakama <[email protected]> * Update src/components/media/fullWidthImage.js Co-authored-by: Sherakama <[email protected]> * use cleaner expression * Add original image in srcset if width is between 800 and <2000 * Doc * use cleaner expression * Some cleanup Co-authored-by: Sherakama <[email protected]> * Add width: 100% for poster figure for Edge browser (due to it being absolute positioned); add width: 100% for hero also for insurance (#138) * Remove useless body overflow-y: scroll so in Windows extra scroll bar doesn't show up in Firefox (#139) * Move "All" filter to the end - client request; reduce spacing below filter buttons (#140) * ADAPT-000 touch ups (#136) * Menu level 1 color fixup * Tighten up spacing for content menu on mobile so the menu is not so long * hover state for close content menu button when menu is expanded * use ref instead of querySelector to select menu button * Remove bit of code so we can preview in full window out of storyblok iframe * Update src/components/navigation/contentMenu/oodContentMenu.js Co-authored-by: Sherakama <[email protected]> * Update src/components/navigation/megaMenu/oodMegaMenu.js Co-authored-by: Sherakama <[email protected]> * slight adjustment to the hover state of the closed section menu Co-authored-by: Sherakama <[email protected]> * ADAPT-000: NPM Updates. (#144) * ADAPT-000: Use updated font import with display: swap for google fonts (#142) * Remove password for scan (#146) * Password it back up (#148) * Add search button in mega menu * Move search overlay component into provider so it works on all pages * Add search button to mobile mega menu * Automatically focus input when opening the search overlay * Adjust capitalization, minor linting issues * Implement first version of SearchResults component * Implement redirecting from overlay to search results page * Fix environment variables not being used * Implement initial hits, pagination and stats for search results page * Try to index seo description in algolia * Style search result list * Start working on search box styles * Add styles for search box (input and button) * Remove unnecessary whitespace * Adjust first page to always be visible in pagination * Update (debounced) URL query params based on search state * Multiple smaller adjustments, style no results message, hide pagination when no results * Add spacing and mobile styles to pagination * Add empty search warning, scroll up on page change * Show loading message when currently loading search results * Correctly use plural form in search stats * Add placeholder to search input * Adjust many search styles including overhauling search overlay * Allow closing search overlay with escape, fix autofocus not working * Index (most) page text content as well (as individual algolia records) * Concatenate text content to reduce number of algolia records * Skip algolia re-indexing when not in netlify build environment * Implement SearchOverlay data coming from CMS * Merge conflict resolution (#159) * ADAPT-1205-Hero component mobile/tablet styles and overall tweaks (#110) * Adjust font size and element heights for hero component for different breakpoints * Break everything in hero and start from mobile * sass-lint fixup * Finetune mobile hero * Tablet styles * Restore desktop styles * Add dark overlay on hover/focus for hero CTA box; clean up shadow for other cards * Use Heading component for hero and poster; splash font size fix up for small option * Add image focus option for hero image * Add blue gradient for mobile/tablet on hero image * Finetune for small font option * ADAPT-1185: Sidebar nav treatment for mobile/tablet (#109) Co-authored-by: Sherakama <[email protected]> * ADAPT-1116: Add reusable SbLink component and image crop (object position) to components (#111) Co-authored-by: Shea McKinney <[email protected]> * Update netlify.toml (#115) * Add SR only instruction for Areas to Support page (#114) * ADAPT-1183: Mega menu mobile (#112) * Turn password back on (#116) * ADAPT-1233: Added anchor links plugin to make anchor links reliable. (#118) * ADAPT-1233: Added anchor links plugin to make anchor links reliable. * ADAPT-1233: Alphabetized list. * ADAPT-1347: Refine mega menu (#119) * Always use https (#120) `//` is an anti-pattern when HTTPS is available on the end resource. * Remove Password (#121) * Password on the Giving Site (#122) * ADAPT-1346 Add external link icon and styles for WYSIWYG (#123) * Add style to external links in WYSIWYG * Non-white basic card external link styles * make icon for story image caption link a bit smaller * Add external link style when link is in heading * Works for action link style inside WISYWIG * finetune * ADAPT-1345: Accordion tweaks and fixes (#124) * Allow heading level selection of accordion main heading; font size tweaks; add +/- sign on expand/collapse button as pseudo elements so SR doesn't read it out * Fix the overlapping accordion item title with the icon on the right * Use Heading component for acc item * Set item title back to bold instead of semibold * ADAPT-1321: Preserve utm parameters throughout site. (#125) * ADAPT-1321: Preserve utm parameters throughout site. * Use External Classes Param. * Update src/components/navigation/contentMenu/contentNavItem.js Co-authored-by: Yvonne Tang <[email protected]> * Check for vals, * Update src/components/navigation/contentMenu/contentMenuParentItem.js Co-authored-by: Yvonne Tang <[email protected]> Co-authored-by: Yvonne Tang <[email protected]> * Backing out of WYSIWYG external link icon changes per client's request (#129) * Misc a11y fixes and improvements (#128) * Hidden content in accordion should be actually set to display none to take it out of the DOM to prevent tabbing to links within * Add SR only heading for icon card section * Use reusable components * use reusable components * CTA card images should have empty alt text for screen readers since they are decorative * Poster image also could use empty alt * Applying suggestion by Clare - AMP scan prefers div over section and figure when there is a link wrapped around those elements * Make the AspectRatioImage wrapper change an option so if it's not within a wrapper link in a parent component, it defaults to a figure * Update netlify.toml (#132) * ADAPT-893: Pass Preview API Key into the edit via url. (#131) * ADAPT-893: Pass access key into request URL to protect editor page and API key settings. Co-authored-by: Sherakama <[email protected]> Co-authored-by: Yvonne Tang <[email protected]> * ADAPT-780: Added google tag manager. (#133) * ADAPT-956: Print styles (#127) * ADAPT-1340 More a11y fixes (#130) * add sr only text for external link indicators * Improvement to hamburger aria-label to match visible text * Return focus to hamburger button after escape is pressed * Only handle escape event if there is actually a hamburger button (mobile/tablet) * Add check for if the hamburger menu is open before closing and setting focus with esp * focus management for desktop mega nav * Change mobile header nav external icon to white (a11y contrast) * focus management of sidebar menu on mobile * ADAPT-1368 Make table styles work with new a11y markup adjustments (#135) * Clean up table code * more table * ADAPT-1358 Improve image components (#134) * Improve image optimization - only scale image if original image size is larger than intended size * Don't need no wrapper for hero component image * FullWidthImage component with srcset * fixup * improve fullwidthimage * make imgSizes a variable and not empty only if imgSrcset exist * add a check for small image * Use FullWidthImage for story hero image * only using image width no need for dimensions as an object; doc * fixup * Do not write srcset and sizes if they don't exist * Update src/components/page-types/story/oodStoryFullView.js Co-authored-by: Sherakama <[email protected]> * Update src/components/media/fullWidthImage.js Co-authored-by: Sherakama <[email protected]> * Update src/components/media/fullWidthImage.js Co-authored-by: Sherakama <[email protected]> * use cleaner expression * Add original image in srcset if width is between 800 and <2000 * Doc * use cleaner expression * Some cleanup Co-authored-by: Sherakama <[email protected]> * Add width: 100% for poster figure for Edge browser (due to it being absolute positioned); add width: 100% for hero also for insurance (#138) * Remove useless body overflow-y: scroll so in Windows extra scroll bar doesn't show up in Firefox (#139) * Move "All" filter to the end - client request; reduce spacing below filter buttons (#140) * ADAPT-000 touch ups (#136) * Menu level 1 color fixup * Tighten up spacing for content menu on mobile so the menu is not so long * hover state for close content menu button when menu is expanded * use ref instead of querySelector to select menu button * Remove bit of code so we can preview in full window out of storyblok iframe * Update src/components/navigation/contentMenu/oodContentMenu.js Co-authored-by: Sherakama <[email protected]> * Update src/components/navigation/megaMenu/oodMegaMenu.js Co-authored-by: Sherakama <[email protected]> * slight adjustment to the hover state of the closed section menu Co-authored-by: Sherakama <[email protected]> * ADAPT-000: NPM Updates. (#144) * ADAPT-000: Use updated font import with display: swap for google fonts (#142) * Remove password for scan (#146) * Password it back up (#148) * ADAPT-649: Added all redirects in netlify config file (#143) * ADAPT-1441: Test redirect masks. (#145) * ADAPT-000: Use different method to import Google fonts (#149) * ADAPT-866: Sitemap.xml review. * Update netlify.toml (#150) * missing redirect (#151) * ADAPT-000: Optimize jpg to 60% quality for performance (#147) Co-authored-by: Shea McKinney <[email protected]> * ADAPT-000: Missing redirect #2 (#152) * ADAPT-000: Missing redirect #2 goto/chembiogift to https://giving.stanford.edu/goto/chembiogift to https://pgnet.stanford.edu/get/page/makeagift?pgnTPC=399&stp=221&olc=18308&cturl=close * Update netlify.toml * Update netlify.toml * ADAPT-000: Add another redirect (#154) * Update netlify.toml (#155) * Adapt 1449 reorganize url redirects (#153) * ADAPT-1449: Added bulk of redirects to redirect file. * ADAPT-1449: Removed unnecessary redirect. * ADAPT-1449: Removed redirects from netlify. * ADAPT-1449: Commented out to remove duplicate redirect. * ADAPT-1449: Added cdn and new redirects. * ADAPT-1449: Removed redirects from netlify.toml. * ADAPT-1449: Corrected redirect. * ADAPT-1449: Fixed redirect mistake. * Update static/_redirects formatting Co-authored-by: Sherakama <[email protected]> Co-authored-by: Katria Lesser <[email protected]> Co-authored-by: Sherakama <[email protected]> Co-authored-by: Yvonne Tang <[email protected]> Co-authored-by: Dena DeBry <[email protected]> Co-authored-by: Katria Lesser <[email protected]> Co-authored-by: Katria Lesser <[email protected]> * fixup! package-lock. * Remove duplicate plugin in gatsby-config * Remove duplicate context provider in gatsby-srr * Revert "Remove duplicate context provider in gatsby-srr" This reverts commit 5005836. * Remove yarn.lock file * Use SbLink instead of directly using gatsby's Link component * Change size variable to reside in own file to avoid duplicate variables * Remove outdated TODO comment * Add multiple inline comments explaining the algolia indexing query and transformer process * Switch close button in search overlay to use a <button> tag * Add info relating to Algolia in the README, update example .env file * Update gatsby-config.js * Move header search button to OodLocalHeader Move related files into /components/search directory * Use <form> tag and add type="submit" to search button * Use h2 and p tags for search hits titles and texts * Use correct scss variable as background-color * Add cursor: pointer to search submit button * Index more contentKeys, also index headline texts * Fix enter key not working in search overlay input * Add "Clear" text to clear input button * Disable body scrolling while search overlay is open * Update aria properties for pagination, use semantic tags * Add screenreader-only label to search submit button * Replace usage of IDs with classes, use config.basePath for navigation * Implement first version of search term suggestions * Fix showing stale suggestions * Change redirects to test Shea's assets CDN (#160) * Change redirects to test Shea's assets CDN * Change asset URL in transformImage * Replace the link masks to the new CDN url in SbLink * Change the link masks in richTextField utility; add semicolon at the end for prettierrc * Update static/_redirects Co-authored-by: Sherakama <[email protected]> Co-authored-by: Sherakama <[email protected]> * Move search-overlay global component into own folder, adjust location accordingly * Implement useFocusTrap custom hook, use in search overlay * Add searchableAttributes in algolia configuration * Use suggestion search in search overlay as well * Search overlay use HTML headings, styles, a11y tweaks * Header search button styles, component name change and a11y tweaks * Use our CenterContainer and FlexCell components * Add hover/focus state for buttons; a11y tweaks for buttons * Delete unused Decanter component CSS imports * Always add vertical scroll bar so there is no content "jump" when search overlay is open * Change overflow = hidden for the html element when search overlay is open so it doesn't scroll (due to the last commit we're adding y scroll bar to html always to avoid the jump) * Make scrollbar appear in overlay without creating double scroll bar; remove content reflow (due to scroll bar appearing and reappearing taking up space on the side) * Gatsby can't access window object when building so use offsetWidth instead of wndow.innerWidth to calculate scrollbar width * cc fix; body width set to 100% because of the fixed properly doesn't have 100% width automatic - making sure it's 100% when search overlay is open * Fix search icon size on mobile; remove border radius on iOS; use decanter 6.2.2 so we get latest colors * trying to fix ios search icon which becomes smaller * search svg tweak * search icon still weird for ios * Forget about svg search icon this is not working out * Fix all search icons * search overlay styles * On mobile, set display none to error message so it doesn't create a big space beneath the search input in the overlay * Prevent 1st level mega nav item from wrapping to 2nd line on low end of XL * Fix descenders getting chopped off issue in search input * Tweak spacing * Use Heading component and spacing tweaks * fix Heading component level props * Spacing tweaks search results * Hide pagination when search result = 0; add utility classes for empty search title * Empty search input in overlay whenever it is closed * spacing tweaks * more padding tweaks * misc styles and responsive * Pagination tweaks * clear search term icon change * Pagination fixup * More pagination tweak * pagination * pagination tweak * should be last pagination tweak * Purposely trigger a fail build * try again to trigger fail build * Reversing the fail test * Update src/components/search/autocomplete.js Co-authored-by: Sherakama <[email protected]> * Update src/utilities/algoliaQueries.js Co-authored-by: Sherakama <[email protected]> Co-authored-by: Johannes Aßmann <[email protected]> Co-authored-by: Artur Gilbert <[email protected]> Co-authored-by: Yannik Wissner <[email protected]> Co-authored-by: Yvonne Tang <[email protected]> Co-authored-by: Dena DeBry <[email protected]> Co-authored-by: Katria Lesser <[email protected]> Co-authored-by: Katria Lesser <[email protected]>
|
@katrialesser Tagging you so you could come back to look at this when you have more time. |
yvonnetangsu
added a commit
that referenced
this pull request
Feb 2, 2021
* main: ADAPT 1101 - Add Algolia search to site (#162) # Conflicts: # src/components/components.js
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
READY FOR REVIEW
Summary
Review By (Date)
Criticality
Review Tasks
Setup tasks and/or behavior to test
Front End Validation
Backend / Functional Validation
Code
Code security
General
Affected Projects or Products
Associated Issues and/or People
@mentionthem here)Resources