hds-web 1.36.4 → 1.36.6
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/helpers/AlgoliaSearch/SearchHit.js +117 -0
- package/src/HDS/helpers/AlgoliaSearch/constants.js +1 -1
- package/src/HDS/helpers/AlgoliaSearch/search.js +1 -0
- package/src/HDS/helpers/AlgoliaSearch/searchoverlay.js +13 -8
- package/src/HDS/helpers/AlgoliaSearch/searchresults.js +4 -78
- package/src/HDS/helpers/AlgoliaSearch/searchwrapper.js +9 -5
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
|
+
};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
export const INDEX_TYPES = Object.freeze({
|
|
2
2
|
All: "All",
|
|
3
|
+
events: "events",
|
|
3
4
|
//Website: "website",
|
|
4
5
|
blog: "blog",
|
|
5
6
|
docs: "docs",
|
|
6
7
|
learn: "learn",
|
|
7
|
-
events: "events",
|
|
8
8
|
// tutorials: "Tutorials",
|
|
9
9
|
// case_studies: "Case studies",
|
|
10
10
|
// events: "Events",
|
|
@@ -4,6 +4,7 @@ import SearchOverlay from "./searchoverlay";
|
|
|
4
4
|
import { Icon } from "../../components/common-components";
|
|
5
5
|
export default function Search(props) {
|
|
6
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") {
|
|
@@ -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,19 +1,10 @@
|
|
|
1
1
|
import React, { Fragment } from "react";
|
|
2
|
-
import {
|
|
3
|
-
connectStateResults,
|
|
4
|
-
Highlight,
|
|
5
|
-
Hits,
|
|
6
|
-
Index,
|
|
7
|
-
Snippet,
|
|
8
|
-
} from "react-instantsearch-dom";
|
|
2
|
+
import { connectStateResults, Hits, Index } from "react-instantsearch-dom";
|
|
9
3
|
import { INDEX_TYPES } from "./constants";
|
|
10
4
|
import SearchFooter from "./searchfooter";
|
|
11
5
|
import { Typography } from "../../foundation/Typography";
|
|
12
6
|
import { Icon } from "../../components/common-components/Icon";
|
|
13
|
-
|
|
14
|
-
// import SearchFooter from "./SearchFooter";
|
|
15
|
-
|
|
16
|
-
const baseDomain = "hasura.io";
|
|
7
|
+
import { SearchHit } from "./SearchHit";
|
|
17
8
|
|
|
18
9
|
const HitsHeader = ({ searchResults, indexTitle, showSeparator, allIndex }) => {
|
|
19
10
|
const hitCount = searchResults && searchResults.nbHits;
|
|
@@ -76,71 +67,6 @@ const HitsHeader = ({ searchResults, indexTitle, showSeparator, allIndex }) => {
|
|
|
76
67
|
|
|
77
68
|
const CustomHitsHeader = connectStateResults(HitsHeader);
|
|
78
69
|
|
|
79
|
-
const PageHit = ({ hit, indexType }) => (
|
|
80
|
-
<a href={hit.url} className="grid h-full">
|
|
81
|
-
<div className="self-start">
|
|
82
|
-
{/* <Typography textStyle="body3c-medium" className="uppercase text-neutral-500">{indexType}</Typography> */}
|
|
83
|
-
{indexType === INDEX_TYPES.docs ? (
|
|
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
|
-
{!!hit.hierarchy && (
|
|
90
|
-
<Typography
|
|
91
|
-
textStyle="body1c-bold"
|
|
92
|
-
className="font-bold flex items-start pb-3"
|
|
93
|
-
>
|
|
94
|
-
{`${
|
|
95
|
-
Object.values(hit.hierarchy)
|
|
96
|
-
.filter((h) => !!h)
|
|
97
|
-
.reverse()[0]
|
|
98
|
-
}`}
|
|
99
|
-
</Typography>
|
|
100
|
-
)}
|
|
101
|
-
<Typography
|
|
102
|
-
textStyle="body2"
|
|
103
|
-
className="text-neutral-800 word-break"
|
|
104
|
-
>
|
|
105
|
-
<Snippet attribute="content" hit={hit} tagName="mark" />
|
|
106
|
-
</Typography>
|
|
107
|
-
</div>
|
|
108
|
-
</div>
|
|
109
|
-
) : (
|
|
110
|
-
<div className="flex items-start">
|
|
111
|
-
<div className="w-6 h-6 mr-2 min-w-[24px] flex items-center justify-center">
|
|
112
|
-
<div className="w-3 h-3 rounded-full bg-blue-500"></div>
|
|
113
|
-
</div>
|
|
114
|
-
<div>
|
|
115
|
-
<Typography
|
|
116
|
-
textStyle="body1c-bold"
|
|
117
|
-
className="font-bold text-neutral-800 pb-3"
|
|
118
|
-
>
|
|
119
|
-
<Highlight attribute="title" hit={hit} tagName="mark" />
|
|
120
|
-
</Typography>
|
|
121
|
-
<Typography
|
|
122
|
-
textStyle="body2"
|
|
123
|
-
className="text-neutral-800 word-break"
|
|
124
|
-
>
|
|
125
|
-
<Snippet attribute="excerpt" hit={hit} tagName="mark" />
|
|
126
|
-
</Typography>
|
|
127
|
-
</div>
|
|
128
|
-
</div>
|
|
129
|
-
)}
|
|
130
|
-
</div>
|
|
131
|
-
{hit.url ? (
|
|
132
|
-
<Typography
|
|
133
|
-
textStyle="body3"
|
|
134
|
-
className="self-end pl-8 pt-3 text-neutral-500"
|
|
135
|
-
>
|
|
136
|
-
<span className="hit-slug word-break">
|
|
137
|
-
{hit.url.replace(`https://${baseDomain}/`, "/")}
|
|
138
|
-
</span>
|
|
139
|
-
</Typography>
|
|
140
|
-
) : null}
|
|
141
|
-
</a>
|
|
142
|
-
);
|
|
143
|
-
|
|
144
70
|
const HitsByIndexType = ({ indexType }) => {
|
|
145
71
|
if (INDEX_TYPES[indexType] === undefined) return null;
|
|
146
72
|
|
|
@@ -148,7 +74,7 @@ const HitsByIndexType = ({ indexType }) => {
|
|
|
148
74
|
<Hits
|
|
149
75
|
className="Hits"
|
|
150
76
|
hitComponent={(hitProps) => (
|
|
151
|
-
<
|
|
77
|
+
<SearchHit {...hitProps} indexType={indexType} />
|
|
152
78
|
)}
|
|
153
79
|
/>
|
|
154
80
|
);
|
|
@@ -160,7 +86,7 @@ const HitsInIndex = ({ index, show }) => (
|
|
|
160
86
|
<Fragment>
|
|
161
87
|
<CustomHitsHeader
|
|
162
88
|
indexTitle={index.title}
|
|
163
|
-
showSeparator={index.type !== INDEX_TYPES.
|
|
89
|
+
showSeparator={index.type !== INDEX_TYPES.events}
|
|
164
90
|
allIndex={index.type}
|
|
165
91
|
/>
|
|
166
92
|
<HitsByIndexType indexType={index.type} />
|
|
@@ -145,12 +145,16 @@ const IndexTypeFilter = ({ activeIndexTypes, setActiveIndexTypes }) => {
|
|
|
145
145
|
);
|
|
146
146
|
};
|
|
147
147
|
|
|
148
|
+
let ALGOLIA_APP_ID = `WCBB1VVLRC`;
|
|
149
|
+
let ALGOLIA_SEARCH_KEY = `baf43aa3921858bc144d0fe5ce85b526`;
|
|
150
|
+
|
|
148
151
|
export default function SearchWrapper({ indices, ...props }) {
|
|
149
|
-
let ALGOLIA_APP_ID, ALGOLIA_SEARCH_KEY;
|
|
150
|
-
if (props.ALGOLIA_APP_ID && props.ALGOLIA_SEARCH_KEY) {
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
}
|
|
152
|
+
// let ALGOLIA_APP_ID, ALGOLIA_SEARCH_KEY;
|
|
153
|
+
// if (props.ALGOLIA_APP_ID && props.ALGOLIA_SEARCH_KEY) {
|
|
154
|
+
// ALGOLIA_APP_ID = props.ALGOLIA_APP_ID;
|
|
155
|
+
// ALGOLIA_SEARCH_KEY = props.ALGOLIA_SEARCH_KEY;
|
|
156
|
+
// }
|
|
157
|
+
|
|
154
158
|
const algoliaClient = algoliasearch(ALGOLIA_APP_ID, ALGOLIA_SEARCH_KEY);
|
|
155
159
|
|
|
156
160
|
const searchClient = {
|