diff --git a/packages/website/ts/components/docs/resource/resource.tsx b/packages/website/ts/components/docs/resource/resource.tsx index 012bb5619f..291ae03a1a 100644 --- a/packages/website/ts/components/docs/resource/resource.tsx +++ b/packages/website/ts/components/docs/resource/resource.tsx @@ -3,7 +3,6 @@ import styled from 'styled-components'; import { Link } from 'ts/components/documentation/shared/link'; - import { Difficulty, Level } from 'ts/components/docs/resource/level'; import { Tag } from 'ts/components/docs/resource/tag'; import { Heading, Paragraph } from 'ts/components/text'; @@ -40,7 +39,7 @@ export const Resource: React.FC = ({ hit }) => { {label} ))} - + {difficulty && } ); diff --git a/packages/website/ts/components/docs/search/autocomplete.tsx b/packages/website/ts/components/docs/search/autocomplete.tsx index b83f3b9e3c..3ca9e6fb7b 100644 --- a/packages/website/ts/components/docs/search/autocomplete.tsx +++ b/packages/website/ts/components/docs/search/autocomplete.tsx @@ -15,6 +15,7 @@ import { searchIndices } from 'ts/utils/algolia_search'; interface IHit { description: string; difficulty: string; + hash: string; id: number | string; isCommunity?: boolean; isFeatured?: boolean; @@ -25,6 +26,7 @@ interface IHit { title: string; type?: string; url: string; + urlWithHash: string; _highlightResult: any; _snippetResult: any; } @@ -66,17 +68,18 @@ const CustomAutoComplete: React.FC = ({ const onSuggestionsClearRequested = (): void => refine(''); const onSuggestionSelected = (event: React.KeyboardEvent, { suggestion }: any): void => { - const [pathname, fragment] = suggestion.url.split('#'); + const { hash, url, urlWithHash } = suggestion; // If the url contains a hash (fragment identifier) and the user is currently // on the same page, scroll to content. If not, route away to the doc page. - if (fragment && location.pathname === pathname) { - scroller.scrollTo(fragment, { + if (hash && location.pathname === url) { + const id = hash.substring(1); // Get rid of # symbol + scroller.scrollTo(id, { smooth: true, duration: docs.scrollDuration, offset: -docs.headerOffset, }); } else { - history.push(suggestion.url); + history.push(urlWithHash); window.scrollTo(0, 0); } @@ -88,7 +91,7 @@ const CustomAutoComplete: React.FC = ({ const renderSuggestion = (hit: IHit): React.ReactNode => { return ( - + diff --git a/packages/website/ts/components/docs/tools/feature_link.tsx b/packages/website/ts/components/docs/tools/feature_link.tsx index 371fa3ff30..5658a23f92 100644 --- a/packages/website/ts/components/docs/tools/feature_link.tsx +++ b/packages/website/ts/components/docs/tools/feature_link.tsx @@ -5,7 +5,6 @@ import MediaQuery from 'react-responsive'; import { Link } from 'ts/components/documentation/shared/link'; - import { Icon } from 'ts/components/icon'; import { Heading, Paragraph } from 'ts/components/text'; @@ -54,7 +53,6 @@ const StyledIcon = styled(Icon)` `; const FeatureLinkWrapper = styled(Link)` - background-color: ${colors.backgroundLight}; border: 1px solid #dbdfdd; padding: 30px; margin-bottom: 0.56rem; @@ -63,6 +61,13 @@ const FeatureLinkWrapper = styled(Link)` align-items: center; flex-direction: column; + background: ${colors.backgroundLight}; + transition: background 250ms ease-in-out; + + &:hover { + background: ${colors.backgroundLightHover}; + } + @media (min-width: 500px) { flex-direction: row; } diff --git a/packages/website/ts/utils/algolia_helpers.ts b/packages/website/ts/utils/algolia_helpers.ts index 7897f0d4f2..a92c5b6d58 100644 --- a/packages/website/ts/utils/algolia_helpers.ts +++ b/packages/website/ts/utils/algolia_helpers.ts @@ -49,7 +49,7 @@ function addHashToChildren(item: any, start: any): void { for (const child of item.children) { if (child.type === 'text') { child.data = child.data || {}; - child.data.hash = start.data.id; + child.data.hash = `#${start.data.id}`; } addHashToChildren(child, start); } @@ -84,11 +84,12 @@ function getContent(meta: Meta, url: string, formattedTextNodes: FormattedNode[] formattedTextNodes.forEach((node: FormattedNode, index: number) => { const titleSlug = slugify(meta.title, { lower: true }); - const formattedUrl = node.hash ? `${url}#${node.hash}` : url; // If we have the hash, append it to url, if not - use the base url content.push({ ...meta, - url: formattedUrl, + url, + urlWithHash: url + node.hash, + hash: node.hash, textContent: node.textContent, id: titleSlug, objectID: `${titleSlug}_${index}`, @@ -167,6 +168,8 @@ interface Meta { interface Content extends Meta { url: string; + urlWithHash: string; + hash: string; textContent: string; id: string; objectID: string;