Fixed rendereing of docs pages, guides, resource...

packages/website/ts/components/docs/resource/resource.tsx

@@ -16,18 +16,22 @@ export interface IResourceProps {
     title?: string;
     description?: string;
     difficulty?: Difficulty;
+    externalUrl?: string;
     isCommunity?: boolean;
-    url: string;
+    url?: string;
     tags: string[];
 }
 
 export const Resource: React.FC<IHitProps> = ({ hit }) => {
-    const { title, difficulty, description, isCommunity, tags, url } = hit;
+    const { difficulty, description, externalUrl, isCommunity, tags, title, url } = hit;
+    const to = externalUrl ? externalUrl : url;
 
     return (
         <ResourceWrapper>
             <Heading color={colors.brandDark} size="small" marginBottom="8px">
-                <Link to={url}>{title}</Link>
+                <Link shouldOpenInNewTab={externalUrl ? true : false} to={to}>
+                    {title}
+                </Link>
             </Heading>
             <Paragraph size="default" marginBottom="10px">
                 {description}

packages/website/ts/components/docs/search/autocomplete.tsx

@@ -12,7 +12,7 @@ import { AutocompleteWrapper } from 'ts/components/docs/search/autocomplete_wrap
 import { docs } from 'ts/style/docs';
 import { searchIndices } from 'ts/utils/algolia_constants';
 
-interface IHit {
+export interface IHit {
     description: string;
     difficulty?: string;
     externalUrl?: string;

packages/website/ts/components/docs/tools/feature_link.tsx

@@ -11,21 +11,25 @@ import { Heading, Paragraph } from 'ts/components/text';
 import { colors } from 'ts/style/colors';
 
 interface IFeatureLinkProps {
-    title: string;
     description?: string;
-    url: string;
+    externalUrl?: string;
+    title: string;
+    url?: string;
 }
 
-export const FeatureLink: React.FC<IFeatureLinkProps> = props => (
-    <FeatureLinkWrapper to={props.url}>
+export const FeatureLink: React.FC<IFeatureLinkProps> = ({ description, externalUrl, title, url }) => {
+    const to = externalUrl ? externalUrl : url;
+
+    return (
+        <FeatureLinkWrapper to={to}>
             <StyledIcon color={colors.brandLight} name="flexibleIntegration" size={60} />
             <Content>
                 <div>
                     <Heading asElement="h3" size="small" marginBottom="6px">
-                    {props.title}
+                        {title}
                     </Heading>
                     <Paragraph size="default" marginBottom="0">
-                    {props.description}
+                        {description}
                     </Paragraph>
                 </div>
 
@@ -41,7 +45,8 @@ export const FeatureLink: React.FC<IFeatureLinkProps> = props => (
                 </MediaQuery>
             </Content>
         </FeatureLinkWrapper>
-);
+    );
+};
 
 const StyledIcon = styled(Icon)`
     margin-bottom: 12px;

packages/website/ts/pages/docs/page.tsx

@@ -59,7 +59,7 @@ export const DocsPage: React.FC<IDocsPageProps> = props => {
     // For api explorer / core-concepts the url does not include the page, i.e. it's only 'docs/core-concepts'
     const key = page ? page : type;
     // @ts-ignore
-    const { description, keywords, path, subtitle, title, versions } = meta[key];
+    const { description, keywords, path, subtitle, title, versions } = meta[type][key];
     // If the route path includes a version, replace the initial version on path
     const filePath = versions && version ? path.replace(versions[0], version) : path;
 

packages/website/ts/pages/docs/tools.tsx

@@ -13,26 +13,13 @@ import { ContentWrapper } from 'ts/components/docs/layout/content_wrapper';
 import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
 import { Separator } from 'ts/components/docs/shared/separator';
 
+import { IHit } from 'ts/components/docs/search/autocomplete';
+
 import { searchClient, searchIndices } from 'ts/utils/algolia_constants';
 
 interface IHitsProps {
     hits: IHit[];
 }
-interface IHit {
-    description: string;
-    difficulty: string;
-    id: number | string;
-    isCommunity?: boolean;
-    isFeatured?: boolean;
-    objectID: string;
-    tags?: string[];
-    textContent: string;
-    title: string;
-    type?: string;
-    url: string;
-    _highlightResult: any;
-    _snippetResult: any;
-}
 
 export const DocsTools: React.FC = () => {
     return (