hds-web 1.36.4 → 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/helpers/AlgoliaSearch/SearchHit.js +117 -0
- package/src/HDS/helpers/AlgoliaSearch/search.js +2 -1
- package/src/HDS/helpers/AlgoliaSearch/searchoverlay.js +13 -8
- package/src/HDS/helpers/AlgoliaSearch/searchresults.js +3 -77
- package/src/HDS/helpers/AlgoliaSearch/searchwrapper.js +1 -0
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
|
+
};
|
|
@@ -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") {
|
|
@@ -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
|
);
|
|
@@ -151,6 +151,7 @@ export default function SearchWrapper({ indices, ...props }) {
|
|
|
151
151
|
ALGOLIA_APP_ID = props.ALGOLIA_APP_ID;
|
|
152
152
|
ALGOLIA_SEARCH_KEY = props.ALGOLIA_SEARCH_KEY;
|
|
153
153
|
}
|
|
154
|
+
|
|
154
155
|
const algoliaClient = algoliasearch(ALGOLIA_APP_ID, ALGOLIA_SEARCH_KEY);
|
|
155
156
|
|
|
156
157
|
const searchClient = {
|