Changes that fix card links for tools and guides

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<IHitProps> = ({ hit }) => {
                         <Tag key={`tag-${index}`}>{label}</Tag>
                     ))}
                 </Tags>
-                <Level difficulty={difficulty} />
+                {difficulty && <Level difficulty={difficulty} />}
             </Meta>
         </ResourceWrapper>
     );

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<IAutoCompleteProps> = ({
     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<IAutoCompleteProps> = ({
 
     const renderSuggestion = (hit: IHit): React.ReactNode => {
         return (
-            <Link to={hit.url}>
+            <Link to={hit.urlWithHash}>
                 <Highlight attribute="title" hit={hit} nonHighlightedTagName="h6" />
                 <Snippet attribute="textContent" hit={hit} nonHighlightedTagName="p" tagName="span" />
             </Link>

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;
     }

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;