hds-web 1.36.3 → 1.36.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.es.js +5 -5
- package/dist/index.js +3 -3
- package/package.json +1 -1
- package/src/HDS/components/Headers/v3Header.js +1 -1
- package/src/HDS/helpers/AlgoliaSearch/SearchHit.js +117 -0
- package/src/HDS/helpers/AlgoliaSearch/constants.js +101 -19
- package/src/HDS/helpers/AlgoliaSearch/search.js +2 -1
- package/src/HDS/helpers/AlgoliaSearch/searchfooter.js +8 -2
- package/src/HDS/helpers/AlgoliaSearch/searchoverlay.js +13 -8
- package/src/HDS/helpers/AlgoliaSearch/searchresults.js +66 -76
- package/src/HDS/helpers/AlgoliaSearch/searchwrapper.js +95 -64
package/package.json
CHANGED
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Highlight, Snippet } from "react-instantsearch-dom";
|
|
3
|
+
import { INDEX_TYPES } from "./constants";
|
|
4
|
+
import { Typography } from "../../foundation/Typography";
|
|
5
|
+
|
|
6
|
+
const baseDomain = "hasura.io";
|
|
7
|
+
|
|
8
|
+
export const SearchHit = ({ hit, indexType }) => {
|
|
9
|
+
if (indexType === "events") {
|
|
10
|
+
return (
|
|
11
|
+
<a href={hit.metaTags?.canonical_url} className="grid h-full">
|
|
12
|
+
<div className="self-start">
|
|
13
|
+
<div className="flex items-start">
|
|
14
|
+
<div className="w-6 h-6 mr-2 min-w-[24px] flex items-center justify-center">
|
|
15
|
+
<div className="w-3 h-3 rounded-full bg-blue-500"></div>
|
|
16
|
+
</div>
|
|
17
|
+
<div>
|
|
18
|
+
<Typography
|
|
19
|
+
textStyle="body1c-bold"
|
|
20
|
+
className="font-bold text-neutral-800 pb-3"
|
|
21
|
+
>
|
|
22
|
+
<Highlight
|
|
23
|
+
attribute="metaTags.meta_title"
|
|
24
|
+
hit={hit}
|
|
25
|
+
tagName="mark"
|
|
26
|
+
/>
|
|
27
|
+
</Typography>
|
|
28
|
+
<Typography
|
|
29
|
+
textStyle="body2"
|
|
30
|
+
className="text-neutral-800 word-break"
|
|
31
|
+
>
|
|
32
|
+
<Snippet
|
|
33
|
+
attribute="metaTags.meta_description"
|
|
34
|
+
hit={hit}
|
|
35
|
+
tagName="mark"
|
|
36
|
+
/>
|
|
37
|
+
</Typography>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
<Typography
|
|
42
|
+
textStyle="body3"
|
|
43
|
+
className="self-end pl-8 pt-3 text-neutral-500"
|
|
44
|
+
>
|
|
45
|
+
<span className="hit-slug word-break">
|
|
46
|
+
{hit.metaTags?.canonical_url.replace(`https://${baseDomain}/`, "/")}
|
|
47
|
+
</span>
|
|
48
|
+
</Typography>
|
|
49
|
+
</a>
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
return (
|
|
54
|
+
<a href={hit.url} className="grid h-full">
|
|
55
|
+
<div className="self-start">
|
|
56
|
+
{/* <Typography textStyle="body3c-medium" className="uppercase text-neutral-500">{indexType}</Typography> */}
|
|
57
|
+
{indexType === INDEX_TYPES.docs ? (
|
|
58
|
+
<div className="flex items-start">
|
|
59
|
+
<div className="w-6 h-6 mr-2 min-w-[24px] flex items-center justify-center">
|
|
60
|
+
<div className="w-3 h-3 rounded-full bg-blue-500"></div>
|
|
61
|
+
</div>
|
|
62
|
+
<div>
|
|
63
|
+
{!!hit.hierarchy && (
|
|
64
|
+
<Typography
|
|
65
|
+
textStyle="body1c-bold"
|
|
66
|
+
className="font-bold flex items-start pb-3"
|
|
67
|
+
>
|
|
68
|
+
{`${
|
|
69
|
+
Object.values(hit.hierarchy)
|
|
70
|
+
.filter((h) => !!h)
|
|
71
|
+
.reverse()[0]
|
|
72
|
+
}`}
|
|
73
|
+
</Typography>
|
|
74
|
+
)}
|
|
75
|
+
<Typography
|
|
76
|
+
textStyle="body2"
|
|
77
|
+
className="text-neutral-800 word-break"
|
|
78
|
+
>
|
|
79
|
+
<Snippet attribute="content" hit={hit} tagName="mark" />
|
|
80
|
+
</Typography>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
) : (
|
|
84
|
+
<div className="flex items-start">
|
|
85
|
+
<div className="w-6 h-6 mr-2 min-w-[24px] flex items-center justify-center">
|
|
86
|
+
<div className="w-3 h-3 rounded-full bg-blue-500"></div>
|
|
87
|
+
</div>
|
|
88
|
+
<div>
|
|
89
|
+
<Typography
|
|
90
|
+
textStyle="body1c-bold"
|
|
91
|
+
className="font-bold text-neutral-800 pb-3"
|
|
92
|
+
>
|
|
93
|
+
<Highlight attribute="title" hit={hit} tagName="mark" />
|
|
94
|
+
</Typography>
|
|
95
|
+
<Typography
|
|
96
|
+
textStyle="body2"
|
|
97
|
+
className="text-neutral-800 word-break"
|
|
98
|
+
>
|
|
99
|
+
<Snippet attribute="excerpt" hit={hit} tagName="mark" />
|
|
100
|
+
</Typography>
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
)}
|
|
104
|
+
</div>
|
|
105
|
+
{hit.url ? (
|
|
106
|
+
<Typography
|
|
107
|
+
textStyle="body3"
|
|
108
|
+
className="self-end pl-8 pt-3 text-neutral-500"
|
|
109
|
+
>
|
|
110
|
+
<span className="hit-slug word-break">
|
|
111
|
+
{hit.url.replace(`https://${baseDomain}/`, "/")}
|
|
112
|
+
</span>
|
|
113
|
+
</Typography>
|
|
114
|
+
) : null}
|
|
115
|
+
</a>
|
|
116
|
+
);
|
|
117
|
+
};
|
|
@@ -4,6 +4,7 @@ export const INDEX_TYPES = Object.freeze({
|
|
|
4
4
|
blog: "blog",
|
|
5
5
|
docs: "docs",
|
|
6
6
|
learn: "learn",
|
|
7
|
+
events: "events",
|
|
7
8
|
// tutorials: "Tutorials",
|
|
8
9
|
// case_studies: "Case studies",
|
|
9
10
|
// events: "Events",
|
|
@@ -11,35 +12,112 @@ export const INDEX_TYPES = Object.freeze({
|
|
|
11
12
|
});
|
|
12
13
|
|
|
13
14
|
export const SEARCH_INDICES = [
|
|
15
|
+
{
|
|
16
|
+
name: `marketing_events`,
|
|
17
|
+
title: `Hasura Events`,
|
|
18
|
+
type: INDEX_TYPES.events,
|
|
19
|
+
},
|
|
14
20
|
{ name: `blog-production`, title: `Hasura Blog`, type: INDEX_TYPES.blog },
|
|
15
|
-
{
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
{
|
|
21
|
+
{
|
|
22
|
+
name: `graphql-docs-prod`,
|
|
23
|
+
title: `Hasura GraphQL Engine Docs`,
|
|
24
|
+
type: INDEX_TYPES.docs,
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
name: `learn-intro-graphql`,
|
|
28
|
+
title: `Learn Intro GraphQL`,
|
|
29
|
+
type: INDEX_TYPES.learn,
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
name: `learn-intro-graphql-zh`,
|
|
33
|
+
title: `Learn Intro GraphQL`,
|
|
34
|
+
type: INDEX_TYPES.learn,
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
name: `learn-elm-graphql`,
|
|
38
|
+
title: `Learn ELM GraphQl`,
|
|
39
|
+
type: INDEX_TYPES.learn,
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
name: `learn-flutter-graphql`,
|
|
43
|
+
title: `Learn Flutter GraphQL`,
|
|
44
|
+
type: INDEX_TYPES.learn,
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
name: `learn-database-mysql`,
|
|
48
|
+
title: `Learn Database MySQL`,
|
|
49
|
+
type: INDEX_TYPES.learn,
|
|
50
|
+
},
|
|
21
51
|
{
|
|
22
52
|
name: `learn-database-postgresql`,
|
|
23
53
|
title: `Learn Database PostgreSQL`,
|
|
24
54
|
type: INDEX_TYPES.learn,
|
|
25
55
|
},
|
|
26
|
-
{
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
{
|
|
32
|
-
|
|
56
|
+
{
|
|
57
|
+
name: `learn-hasura-backend`,
|
|
58
|
+
title: `Learn Hasura Backend`,
|
|
59
|
+
type: INDEX_TYPES.learn,
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
name: `learn-hasura-backend-ja`,
|
|
63
|
+
title: `Learn Hasura Backend`,
|
|
64
|
+
type: INDEX_TYPES.learn,
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
name: `learn-hasura-backend-zh`,
|
|
68
|
+
title: `Learn Hasura Backend`,
|
|
69
|
+
type: INDEX_TYPES.learn,
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
name: `learn-hasura-backend-advanced`,
|
|
73
|
+
title: `Learn Hasura Backend Advanced`,
|
|
74
|
+
type: INDEX_TYPES.learn,
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
name: `learn-hasura-auth-slack`,
|
|
78
|
+
title: `Learn Hasura Auth Slack`,
|
|
79
|
+
type: INDEX_TYPES.learn,
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
name: `learn-react-apollo-hooks`,
|
|
83
|
+
title: `Learn React Apollo Hooks`,
|
|
84
|
+
type: INDEX_TYPES.learn,
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
name: `learn-react-apollo`,
|
|
88
|
+
title: `Learn React Apollo`,
|
|
89
|
+
type: INDEX_TYPES.learn,
|
|
90
|
+
},
|
|
33
91
|
{
|
|
34
92
|
name: `learn-typescript-react-apollo`,
|
|
35
93
|
title: `Learn TypeScript React Apollo`,
|
|
36
94
|
type: INDEX_TYPES.learn,
|
|
37
95
|
},
|
|
38
|
-
{
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
96
|
+
{
|
|
97
|
+
name: `learn-angular-apollo`,
|
|
98
|
+
title: `Learn Angular Apollo`,
|
|
99
|
+
type: INDEX_TYPES.learn,
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
name: `learn-vue-apollo`,
|
|
103
|
+
title: `Learn Vue Apollo`,
|
|
104
|
+
type: INDEX_TYPES.learn,
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
name: `learn-ios-apollo`,
|
|
108
|
+
title: `Learn IOS Apollo`,
|
|
109
|
+
type: INDEX_TYPES.learn,
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
name: `learn-svelte-apollo`,
|
|
113
|
+
title: `Learn Svelte Apollo`,
|
|
114
|
+
type: INDEX_TYPES.learn,
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
name: `learn-android-apollo`,
|
|
118
|
+
title: `Learn Android Apollo`,
|
|
119
|
+
type: INDEX_TYPES.learn,
|
|
120
|
+
},
|
|
43
121
|
{
|
|
44
122
|
name: `learn-react-native-apollo`,
|
|
45
123
|
title: `Learn React Native Apollo`,
|
|
@@ -50,5 +128,9 @@ export const SEARCH_INDICES = [
|
|
|
50
128
|
title: `Learn Reason React Apollo`,
|
|
51
129
|
type: INDEX_TYPES.learn,
|
|
52
130
|
},
|
|
53
|
-
{
|
|
131
|
+
{
|
|
132
|
+
name: `learn-database-mssql`,
|
|
133
|
+
title: `Learn MicrosoftSQL`,
|
|
134
|
+
type: INDEX_TYPES.learn,
|
|
135
|
+
},
|
|
54
136
|
];
|
|
@@ -3,7 +3,8 @@ import { useEffect, useState } from "react";
|
|
|
3
3
|
import SearchOverlay from "./searchoverlay";
|
|
4
4
|
import { Icon } from "../../components/common-components";
|
|
5
5
|
export default function Search(props) {
|
|
6
|
-
const [showSearch, setShowSearch] = useState(false);
|
|
6
|
+
// const [showSearch, setShowSearch] = useState(false);
|
|
7
|
+
const [showSearch, setShowSearch] = useState(true);
|
|
7
8
|
|
|
8
9
|
const handleSearchWithKeyboard = (e) => {
|
|
9
10
|
if (e.key === "/" || e.key === "Escape") {
|
|
@@ -9,11 +9,17 @@ const SearchFooter = () => (
|
|
|
9
9
|
<p>Unable to find what you're looking for?</p>
|
|
10
10
|
<p>
|
|
11
11
|
Reach out to our{" "}
|
|
12
|
-
<a
|
|
12
|
+
<a
|
|
13
|
+
className="text-blue-500 hover:text-blue-700"
|
|
14
|
+
href="https://discord.com/invite/hasura"
|
|
15
|
+
target="_blank"
|
|
16
|
+
rel="noopener noreferrer"
|
|
17
|
+
>
|
|
13
18
|
Discord Community
|
|
14
19
|
</a>{" "}
|
|
15
20
|
or start a{" "}
|
|
16
|
-
<a
|
|
21
|
+
<a
|
|
22
|
+
className="text-blue-500 hover:text-blue-700"
|
|
17
23
|
href="https://github.com/hasura/graphql-engine/discussions"
|
|
18
24
|
target="_blank"
|
|
19
25
|
rel="noopener noreferrer"
|
|
@@ -1,11 +1,9 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import {
|
|
3
|
-
import { Icon } from '../../components/common-components/Icon'
|
|
1
|
+
import React, { useEffect } from "react";
|
|
2
|
+
import { Icon } from "../../components/common-components/Icon";
|
|
4
3
|
import SearchWrapper from "./searchwrapper";
|
|
5
4
|
import { SEARCH_INDICES } from "./constants";
|
|
6
5
|
|
|
7
|
-
export default function SearchOverlay({showSearch, onCloseSearch, ...props}) {
|
|
8
|
-
|
|
6
|
+
export default function SearchOverlay({ showSearch, onCloseSearch, ...props }) {
|
|
9
7
|
useEffect(() => {
|
|
10
8
|
if (showSearch) {
|
|
11
9
|
document.body.style.overflow = "hidden";
|
|
@@ -20,8 +18,15 @@ export default function SearchOverlay({showSearch, onCloseSearch, ...props}) {
|
|
|
20
18
|
|
|
21
19
|
return (
|
|
22
20
|
<div className="fixed left-0 top-0 w-full h-full z-[10000] bg-neutral-100">
|
|
23
|
-
<div
|
|
24
|
-
|
|
21
|
+
<div
|
|
22
|
+
className="absolute top-4 right-4 cursor-pointer z-[11]"
|
|
23
|
+
onClick={onCloseSearch}
|
|
24
|
+
>
|
|
25
|
+
<Icon
|
|
26
|
+
height={"w-8 h-8 stroke-[1.5px]"}
|
|
27
|
+
variant="xclose"
|
|
28
|
+
strokeClass="stroke-neutral-800"
|
|
29
|
+
/>
|
|
25
30
|
</div>
|
|
26
31
|
<div className="py-20 overflow-y-auto h-full w-full bg-neutral-100">
|
|
27
32
|
<div className="px-4">
|
|
@@ -34,4 +39,4 @@ export default function SearchOverlay({showSearch, onCloseSearch, ...props}) {
|
|
|
34
39
|
</div>
|
|
35
40
|
</div>
|
|
36
41
|
);
|
|
37
|
-
}
|
|
42
|
+
}
|
|
@@ -1,44 +1,64 @@
|
|
|
1
1
|
import React, { Fragment } from "react";
|
|
2
|
-
import { connectStateResults,
|
|
2
|
+
import { connectStateResults, Hits, Index } from "react-instantsearch-dom";
|
|
3
3
|
import { INDEX_TYPES } from "./constants";
|
|
4
4
|
import SearchFooter from "./searchfooter";
|
|
5
|
-
import { Typography } from
|
|
6
|
-
import { Icon } from
|
|
7
|
-
|
|
8
|
-
// import SearchFooter from "./SearchFooter";
|
|
9
|
-
|
|
10
|
-
const baseDomain = 'hasura.io';
|
|
11
|
-
|
|
5
|
+
import { Typography } from "../../foundation/Typography";
|
|
6
|
+
import { Icon } from "../../components/common-components/Icon";
|
|
7
|
+
import { SearchHit } from "./SearchHit";
|
|
12
8
|
|
|
13
9
|
const HitsHeader = ({ searchResults, indexTitle, showSeparator, allIndex }) => {
|
|
14
10
|
const hitCount = searchResults && searchResults.nbHits;
|
|
15
11
|
const titleIcon = () => {
|
|
16
|
-
if(indexTitle === "Hasura Blog") {
|
|
12
|
+
if (indexTitle === "Hasura Blog") {
|
|
17
13
|
return (
|
|
18
|
-
<Icon
|
|
19
|
-
|
|
14
|
+
<Icon
|
|
15
|
+
height={"block w-6 mr-3 h-6 stroke-[2px] transition ease-in-out"}
|
|
16
|
+
variant="pentool02"
|
|
17
|
+
strokeClass="stroke-blue-500"
|
|
18
|
+
/>
|
|
19
|
+
);
|
|
20
20
|
}
|
|
21
|
-
if(indexTitle === "Hasura GraphQL Engine Docs") {
|
|
21
|
+
if (indexTitle === "Hasura GraphQL Engine Docs") {
|
|
22
22
|
return (
|
|
23
|
-
<Icon
|
|
24
|
-
|
|
23
|
+
<Icon
|
|
24
|
+
height={"block w-6 mr-3 h-6 stroke-[2px] transition ease-in-out"}
|
|
25
|
+
variant="file02"
|
|
26
|
+
strokeClass="stroke-blue-500"
|
|
27
|
+
/>
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
if (indexTitle === "Hasura Events") {
|
|
32
|
+
return (
|
|
33
|
+
<Icon
|
|
34
|
+
height={"block w-6 mr-3 h-6 stroke-[2px] transition ease-in-out"}
|
|
35
|
+
variant="calendarplus02"
|
|
36
|
+
strokeClass="stroke-blue-500"
|
|
37
|
+
/>
|
|
38
|
+
);
|
|
25
39
|
}
|
|
40
|
+
|
|
26
41
|
return (
|
|
27
|
-
<Icon
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
42
|
+
<Icon
|
|
43
|
+
height={"block w-6 mr-3 h-6 stroke-[2px] transition ease-in-out"}
|
|
44
|
+
variant="graduationhat01"
|
|
45
|
+
strokeClass="stroke-blue-500"
|
|
46
|
+
/>
|
|
47
|
+
);
|
|
48
|
+
};
|
|
49
|
+
|
|
31
50
|
return hitCount > 0 ? (
|
|
32
51
|
<Fragment>
|
|
33
52
|
{showSeparator && <hr className="my-8 border-t-neutral-200" />}
|
|
34
53
|
{/* <div className="HitCount">
|
|
35
54
|
{hitCount} result{hitCount !== 1 ? `s` : ``}
|
|
36
55
|
</div> */}
|
|
37
|
-
<Typography
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
56
|
+
<Typography
|
|
57
|
+
textStyle="sub1"
|
|
58
|
+
className="pb-4 pl-2 flex items-center text-neutral-800 font-normal sticky tb-m:z-0 top-[170px] tb:top-[160px] tb-m:top-[120px] bg-neutral-100"
|
|
59
|
+
>
|
|
60
|
+
{titleIcon()}
|
|
61
|
+
|
|
42
62
|
{indexTitle}
|
|
43
63
|
</Typography>
|
|
44
64
|
</Fragment>
|
|
@@ -47,60 +67,15 @@ const HitsHeader = ({ searchResults, indexTitle, showSeparator, allIndex }) => {
|
|
|
47
67
|
|
|
48
68
|
const CustomHitsHeader = connectStateResults(HitsHeader);
|
|
49
69
|
|
|
50
|
-
const PageHit = ({ hit, indexType }) => (
|
|
51
|
-
<a href={hit.url} className="grid h-full">
|
|
52
|
-
<div className="self-start">
|
|
53
|
-
{/* <Typography textStyle="body3c-medium" className="uppercase text-neutral-500">{indexType}</Typography> */}
|
|
54
|
-
{indexType === INDEX_TYPES.docs ? (
|
|
55
|
-
<div className="flex items-start">
|
|
56
|
-
<div className="w-6 h-6 mr-2 min-w-[24px] flex items-center justify-center">
|
|
57
|
-
<div className="w-3 h-3 rounded-full bg-blue-500"></div>
|
|
58
|
-
</div>
|
|
59
|
-
<div>
|
|
60
|
-
{!!hit.hierarchy && (
|
|
61
|
-
<Typography textStyle="body1c-bold" className="font-bold flex items-start pb-3">
|
|
62
|
-
{`${
|
|
63
|
-
Object.values(hit.hierarchy)
|
|
64
|
-
.filter(h => !!h)
|
|
65
|
-
.reverse()[0]
|
|
66
|
-
}`}</Typography>
|
|
67
|
-
)}
|
|
68
|
-
<Typography textStyle="body2" className="text-neutral-800 word-break">
|
|
69
|
-
<Snippet attribute="content" hit={hit} tagName="mark" />
|
|
70
|
-
</Typography>
|
|
71
|
-
</div>
|
|
72
|
-
</div>
|
|
73
|
-
) : (
|
|
74
|
-
<div className="flex items-start">
|
|
75
|
-
<div className="w-6 h-6 mr-2 min-w-[24px] flex items-center justify-center">
|
|
76
|
-
<div className="w-3 h-3 rounded-full bg-blue-500"></div>
|
|
77
|
-
</div>
|
|
78
|
-
<div>
|
|
79
|
-
<Typography textStyle="body1c-bold" className="font-bold text-neutral-800 pb-3">
|
|
80
|
-
<Highlight attribute="title" hit={hit} tagName="mark" />
|
|
81
|
-
</Typography>
|
|
82
|
-
<Typography textStyle="body2" className="text-neutral-800 word-break">
|
|
83
|
-
<Snippet attribute="excerpt" hit={hit} tagName="mark" />
|
|
84
|
-
</Typography>
|
|
85
|
-
</div>
|
|
86
|
-
</div>
|
|
87
|
-
)}
|
|
88
|
-
</div>
|
|
89
|
-
{hit.url ? (
|
|
90
|
-
<Typography textStyle="body3" className="self-end pl-8 pt-3 text-neutral-500">
|
|
91
|
-
<span className='hit-slug word-break'>{hit.url.replace(`https://${baseDomain}/`, "/")}</span>
|
|
92
|
-
</Typography>
|
|
93
|
-
) : null}
|
|
94
|
-
</a>
|
|
95
|
-
);
|
|
96
|
-
|
|
97
70
|
const HitsByIndexType = ({ indexType }) => {
|
|
98
71
|
if (INDEX_TYPES[indexType] === undefined) return null;
|
|
99
72
|
|
|
100
73
|
return (
|
|
101
74
|
<Hits
|
|
102
75
|
className="Hits"
|
|
103
|
-
hitComponent={hitProps =>
|
|
76
|
+
hitComponent={(hitProps) => (
|
|
77
|
+
<SearchHit {...hitProps} indexType={indexType} />
|
|
78
|
+
)}
|
|
104
79
|
/>
|
|
105
80
|
);
|
|
106
81
|
};
|
|
@@ -112,7 +87,7 @@ const HitsInIndex = ({ index, show }) => (
|
|
|
112
87
|
<CustomHitsHeader
|
|
113
88
|
indexTitle={index.title}
|
|
114
89
|
showSeparator={index.type !== INDEX_TYPES.blog}
|
|
115
|
-
allIndex
|
|
90
|
+
allIndex={index.type}
|
|
116
91
|
/>
|
|
117
92
|
<HitsByIndexType indexType={index.type} />
|
|
118
93
|
</Fragment>
|
|
@@ -120,11 +95,26 @@ const HitsInIndex = ({ index, show }) => (
|
|
|
120
95
|
</Index>
|
|
121
96
|
);
|
|
122
97
|
|
|
123
|
-
const SearchResult = ({
|
|
124
|
-
|
|
98
|
+
const SearchResult = ({
|
|
99
|
+
children,
|
|
100
|
+
indices,
|
|
101
|
+
className,
|
|
102
|
+
id,
|
|
103
|
+
wrapperRef,
|
|
104
|
+
activeIndexTypes,
|
|
105
|
+
}) => (
|
|
106
|
+
<div
|
|
107
|
+
id={id}
|
|
108
|
+
className={`${className} search-results clear-both`}
|
|
109
|
+
ref={wrapperRef}
|
|
110
|
+
>
|
|
125
111
|
{children && children}
|
|
126
|
-
{indices.map(index => (
|
|
127
|
-
<HitsInIndex
|
|
112
|
+
{indices.map((index) => (
|
|
113
|
+
<HitsInIndex
|
|
114
|
+
index={index}
|
|
115
|
+
key={index.name}
|
|
116
|
+
show={activeIndexTypes[index.type]}
|
|
117
|
+
/>
|
|
128
118
|
))}
|
|
129
119
|
<SearchFooter />
|
|
130
120
|
</div>
|