hds-web 1.36.6 → 1.36.8

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.
Files changed (14) hide show
  1. package/dist/index.css +2 -2
  2. package/dist/index.es.css +2 -2
  3. package/dist/index.es.js +5 -5
  4. package/dist/index.js +3 -3
  5. package/package.json +1 -1
  6. package/src/HDS/components/Cards/Announcement/announcementMd.js +74 -37
  7. package/src/HDS/helpers/AlgoliaSearch/constants.js +19 -101
  8. package/src/HDS/helpers/AlgoliaSearch/search.js +0 -1
  9. package/src/HDS/helpers/AlgoliaSearch/searchfooter.js +2 -8
  10. package/src/HDS/helpers/AlgoliaSearch/searchoverlay.js +8 -13
  11. package/src/HDS/helpers/AlgoliaSearch/searchresults.js +77 -67
  12. package/src/HDS/helpers/AlgoliaSearch/searchwrapper.js +67 -101
  13. package/src/styles/tailwind.css +8 -0
  14. package/src/HDS/helpers/AlgoliaSearch/SearchHit.js +0 -117
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hds-web",
3
- "version": "1.36.6",
3
+ "version": "1.36.8",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/HDS/components/Cards/Announcement/announcementMd.js CHANGED
@@ -1,25 +1,31 @@
1
1
  import React, { useState, useEffect } from "react";
2
2
  import { Typography } from "../../../foundation/Typography";
3
3
  import { HDSColor } from "../../../foundation/ColorPalette";
4
- import { Icon } from '../../../components/common-components/Icon';
4
+ import { Icon } from "../../../components/common-components/Icon";
5
5
 
6
6
  const tagColorVariants = {
7
- blue: 'bg-neutral-0 tb:bg-blue-500 text-blue-500 tb:text-neutral-0',
8
- purple: 'bg-neutral-0 tb:bg-purple-500 text-purple-500 tb:text-neutral-0',
9
- pink: 'bg-neutral-0 tb:bg-pink-500 text-pink-500 tb:text-neutral-0',
10
- amber: 'bg-neutral-0 tb:bg-amber-500 text-amber-500 tb:text-neutral-0',
11
- cyan: 'bg-neutral-0 tb:bg-cyan-500 text-cyan-500 tb:text-neutral-0',
12
- green: 'bg-neutral-0 tb:bg-green-500 text-green-500 tb:text-neutral-0',
13
- }
7
+ blue: "bg-neutral-0 tb:bg-blue-500 text-blue-500 tb:text-neutral-0",
8
+ purple: "bg-neutral-0 tb:bg-purple-500 text-purple-500 tb:text-neutral-0",
9
+ pink: "bg-neutral-0 tb:bg-pink-500 text-pink-500 tb:text-neutral-0",
10
+ amber: "bg-neutral-0 tb:bg-amber-500 text-amber-500 tb:text-neutral-0",
11
+ cyan: "bg-neutral-0 tb:bg-cyan-500 text-cyan-500 tb:text-neutral-0",
12
+ green: "bg-neutral-0 tb:bg-green-500 text-green-500 tb:text-neutral-0",
13
+ };
14
14
 
15
15
  const isBrowser = typeof window !== "undefined";
16
16
 
17
17
  export default function AnnouncementMd(props) {
18
18
  const [isBannerActive, toggleBanner] = useState(true);
19
- const bgClass = props.bgColorClass ? HDSColor(props.bgColorClass) : 'bg-neutral-0';
20
- const linkTextClass = props.linkTextColorClass ? HDSColor(props.linkTextColorClass) : 'text-neutral-600';
21
- const tagClass = props.tagColor ? props.tagColor : 'purple';
22
- const iconBgClass = props.iconBgColor ? HDSColor(props.iconBgColor) : 'bg-blue-200'
19
+ const bgClass = props.bgColorClass
20
+ ? HDSColor(props.bgColorClass)
21
+ : "bg-neutral-0";
22
+ const linkTextClass = props.linkTextColorClass
23
+ ? HDSColor(props.linkTextColorClass)
24
+ : "text-neutral-600";
25
+ const tagClass = props.tagColor ? props.tagColor : "purple";
26
+ const iconBgClass = props.iconBgColor
27
+ ? HDSColor(props.iconBgColor)
28
+ : "bg-blue-200";
23
29
 
24
30
  const [isConsentForm, setIsConsentForm] = useState(false);
25
31
  const onCloseBanner = () => {
@@ -49,40 +55,71 @@ export default function AnnouncementMd(props) {
49
55
  if (isBannerActive && !isConsentForm) {
50
56
  return (
51
57
  <div className="py-6">
52
- <div className={`${bgClass} flex justify-between relative rounded-2xl tb:rounded-full shadow p-4 tb:justify-center tb:items-center`}>
58
+ <div
59
+ className={`${bgClass} flex justify-between relative rounded-2xl tb:rounded-full shadow p-3 tb:justify-center tb:items-center`}
60
+ >
53
61
  <div className="tb:items-center flex tb:justify-center">
54
- {
55
- props.brandImg && (
56
- <div className="tb:pb-0 tb:pl-14 pr-2">
57
- <img className="mt-[2px] tb:mt-0 min-h-[20px] min-w-[20px] max-w-[20px] max-h-[20px] tb:min-h-[32px] tb:min-w-[32px] tb:max-w-[32px] tb:max-h-[32px]" src={props.brandImg} alt={props.brandImgAlt} />
58
- </div>
59
- )
60
- }
61
- {
62
- props.iconBgColor && (
63
- <div className={`${iconBgClass} mt-[2px] tb:mt-0 ml-0 mb-1 tb:mb-0 tb:ml-14 mr-2 w-5 h-5 tb:w-8 tb:h-8 min-w-[20px] tb:min-w-[32px] rounded-full flex items-center justify-center`}>
64
- <Icon height={'block w-4 h-4 tb:w-5 tb:h-5 stroke-[2px] transition ease-in-out'} variant={props.iconVariant} strokeClass='stroke-neutral-1000' />
65
- </div>
66
- )
67
- }
68
- {
69
- props.tagText && (
70
- <Typography textStyle="body2-medium" className={`inline-flex py-1 px-0 tb:px-3 ml-0 tb:ml-14 tb-m:ml-6 rounded-full mr-4 min-w-fit ${tagColorVariants[tagClass]}`}>{props.tagText}</Typography>
71
- )
72
- }
62
+ {props.brandImg && (
63
+ <div className="tb:pb-0 tb:pl-14 pr-2">
64
+ <img
65
+ className="mt-[2px] tb:mt-0 min-h-[20px] min-w-[20px] max-w-[20px] max-h-[20px] tb:min-h-[32px] tb:min-w-[32px] tb:max-w-[32px] tb:max-h-[32px]"
66
+ src={props.brandImg}
67
+ alt={props.brandImgAlt}
68
+ />
69
+ </div>
70
+ )}
71
+ {props.iconBgColor && (
72
+ <div
73
+ className={`${iconBgClass} mt-[2px] tb:mt-0 ml-0 mb-1 tb:mb-0 tb:ml-14 mr-2 w-5 h-5 tb:w-8 tb:h-8 min-w-[20px] tb:min-w-[32px] rounded-full flex items-center justify-center`}
74
+ >
75
+ <Icon
76
+ height={
77
+ "block w-4 h-4 tb:w-5 tb:h-5 stroke-[2px] transition ease-in-out"
78
+ }
79
+ variant={props.iconVariant}
80
+ strokeClass="stroke-neutral-1000"
81
+ />
82
+ </div>
83
+ )}
84
+ {props.tagText && (
85
+ <Typography
86
+ textStyle="body2-medium"
87
+ className={`inline-flex py-1 px-0 tb:px-3 ml-0 tb:ml-14 tb-m:ml-6 rounded-full mr-4 min-w-fit ${tagColorVariants[tagClass]}`}
88
+ >
89
+ {props.tagText}
90
+ </Typography>
91
+ )}
73
92
  <a href={props.linkUrl} className="block pb-0">
74
- <Typography textStyle="body2-medium" className={`${linkTextClass} group flex items-center [&>div]:inline-block`}>
93
+ <Typography
94
+ textStyle="body2-medium"
95
+ className={`${linkTextClass} group flex items-center [&>div]:inline-block`}
96
+ >
75
97
  {props.linkText}
76
- <Icon height={' hds-hidden tb:block w-6 h-6 stroke-[2px] ml-3 transition ease-in-out group-hover:translate-x-[5px]'} variant='arrownarrowright' strokeClass='stroke-blue-500' />
98
+ <Icon
99
+ height={
100
+ " hds-hidden tb:block w-6 h-6 stroke-[2px] ml-3 transition ease-in-out group-hover:translate-x-[5px]"
101
+ }
102
+ variant="arrownarrowright"
103
+ strokeClass="stroke-blue-500"
104
+ />
77
105
  </Typography>
78
106
  </a>
79
107
  </div>
80
- <div className="static mt-[2px] tb:mt-0 ml-3 tb:ml-0 tb:absolute top-1/2 tb:-translate-y-1/2 tb:left-6 cursor-pointer w-5 h-5 min-w-[20px] tb:w-8 tb:min-w-[32px] tb:h-8 rounded-full bg-neutral-100 flex items-center justify-center" onClick={()=>onCloseBanner()}>
81
- <Icon height={'block w-4 h-4 tb:w-6 tb:h-6 stroke-[2px] transition ease-in-out'} variant='xclose' strokeClass='stroke-neutral-800' />
108
+ <div
109
+ className="static mt-[2px] tb:mt-0 ml-3 tb:ml-0 tb:absolute top-1/2 tb:-translate-y-1/2 tb:left-3 cursor-pointer w-5 h-5 min-w-[20px] tb:w-8 tb:min-w-[32px] tb:h-8 rounded-full bg-neutral-100 flex items-center justify-center"
110
+ onClick={() => onCloseBanner()}
111
+ >
112
+ <Icon
113
+ height={
114
+ "block w-4 h-4 tb:w-6 tb:h-6 stroke-[2px] transition ease-in-out"
115
+ }
116
+ variant="xclose"
117
+ strokeClass="stroke-neutral-800"
118
+ />
82
119
  </div>
83
120
  </div>
84
121
  </div>
85
- )
122
+ );
86
123
  }
87
124
  return null;
88
125
  }
package/src/HDS/helpers/AlgoliaSearch/constants.js CHANGED
@@ -1,6 +1,5 @@
1
1
  export const INDEX_TYPES = Object.freeze({
2
2
  All: "All",
3
- events: "events",
4
3
  //Website: "website",
5
4
  blog: "blog",
6
5
  docs: "docs",
@@ -12,112 +11,35 @@ export const INDEX_TYPES = Object.freeze({
12
11
  });
13
12
 
14
13
  export const SEARCH_INDICES = [
15
- {
16
- name: `marketing_events`,
17
- title: `Hasura Events`,
18
- type: INDEX_TYPES.events,
19
- },
20
14
  { name: `blog-production`, title: `Hasura Blog`, type: INDEX_TYPES.blog },
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
- },
15
+ { name: `graphql-docs-prod`, title: `Hasura GraphQL Engine Docs`, type: INDEX_TYPES.docs },
16
+ { name: `learn-intro-graphql`, title: `Learn Intro GraphQL`, type: INDEX_TYPES.learn },
17
+ { name: `learn-intro-graphql-zh`, title: `Learn Intro GraphQL`, type: INDEX_TYPES.learn },
18
+ { name: `learn-elm-graphql`, title: `Learn ELM GraphQl`, type: INDEX_TYPES.learn },
19
+ { name: `learn-flutter-graphql`, title: `Learn Flutter GraphQL`, type: INDEX_TYPES.learn },
20
+ { name: `learn-database-mysql`, title: `Learn Database MySQL`, type: INDEX_TYPES.learn },
51
21
  {
52
22
  name: `learn-database-postgresql`,
53
23
  title: `Learn Database PostgreSQL`,
54
24
  type: INDEX_TYPES.learn,
55
25
  },
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
- },
26
+ { name: `learn-hasura-backend`, title: `Learn Hasura Backend`, type: INDEX_TYPES.learn },
27
+ { name: `learn-hasura-backend-ja`, title: `Learn Hasura Backend`, type: INDEX_TYPES.learn },
28
+ { name: `learn-hasura-backend-zh`, title: `Learn Hasura Backend`, type: INDEX_TYPES.learn },
29
+ { name: `learn-hasura-backend-advanced`, title: `Learn Hasura Backend Advanced`, type: INDEX_TYPES.learn },
30
+ { name: `learn-hasura-auth-slack`, title: `Learn Hasura Auth Slack`, type: INDEX_TYPES.learn },
31
+ { name: `learn-react-apollo-hooks`, title: `Learn React Apollo Hooks`, type: INDEX_TYPES.learn },
32
+ { name: `learn-react-apollo`, title: `Learn React Apollo`, type: INDEX_TYPES.learn },
91
33
  {
92
34
  name: `learn-typescript-react-apollo`,
93
35
  title: `Learn TypeScript React Apollo`,
94
36
  type: INDEX_TYPES.learn,
95
37
  },
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
- },
38
+ { name: `learn-angular-apollo`, title: `Learn Angular Apollo`, type: INDEX_TYPES.learn },
39
+ { name: `learn-vue-apollo`, title: `Learn Vue Apollo`, type: INDEX_TYPES.learn },
40
+ { name: `learn-ios-apollo`, title: `Learn IOS Apollo`, type: INDEX_TYPES.learn },
41
+ { name: `learn-svelte-apollo`, title: `Learn Svelte Apollo`, type: INDEX_TYPES.learn },
42
+ { name: `learn-android-apollo`, title: `Learn Android Apollo`, type: INDEX_TYPES.learn },
121
43
  {
122
44
  name: `learn-react-native-apollo`,
123
45
  title: `Learn React Native Apollo`,
@@ -128,9 +50,5 @@ export const SEARCH_INDICES = [
128
50
  title: `Learn Reason React Apollo`,
129
51
  type: INDEX_TYPES.learn,
130
52
  },
131
- {
132
- name: `learn-database-mssql`,
133
- title: `Learn MicrosoftSQL`,
134
- type: INDEX_TYPES.learn,
135
- },
53
+ { name: `learn-database-mssql`, title: `Learn MicrosoftSQL`, type: INDEX_TYPES.learn },
136
54
  ];
package/src/HDS/helpers/AlgoliaSearch/search.js CHANGED
@@ -4,7 +4,6 @@ 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);
8
7
 
9
8
  const handleSearchWithKeyboard = (e) => {
10
9
  if (e.key === "/" || e.key === "Escape") {
package/src/HDS/helpers/AlgoliaSearch/searchfooter.js CHANGED
@@ -9,17 +9,11 @@ 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
13
- className="text-blue-500 hover:text-blue-700"
14
- href="https://discord.com/invite/hasura"
15
- target="_blank"
16
- rel="noopener noreferrer"
17
- >
12
+ <a className="text-blue-500 hover:text-blue-700" href="https://discord.com/invite/hasura" target="_blank" rel="noopener noreferrer">
18
13
  Discord Community
19
14
  </a>{" "}
20
15
  or start a{" "}
21
- <a
22
- className="text-blue-500 hover:text-blue-700"
16
+ <a className="text-blue-500 hover:text-blue-700"
23
17
  href="https://github.com/hasura/graphql-engine/discussions"
24
18
  target="_blank"
25
19
  rel="noopener noreferrer"
package/src/HDS/helpers/AlgoliaSearch/searchoverlay.js CHANGED
@@ -1,9 +1,11 @@
1
- import React, { useEffect } from "react";
2
- import { Icon } from "../../components/common-components/Icon";
1
+ import React from "react";
2
+ import { useEffect, useState } from "react";
3
+ import { Icon } from '../../components/common-components/Icon'
3
4
  import SearchWrapper from "./searchwrapper";
4
5
  import { SEARCH_INDICES } from "./constants";
5
6
 
6
- export default function SearchOverlay({ showSearch, onCloseSearch, ...props }) {
7
+ export default function SearchOverlay({showSearch, onCloseSearch, ...props}) {
8
+
7
9
  useEffect(() => {
8
10
  if (showSearch) {
9
11
  document.body.style.overflow = "hidden";
@@ -18,15 +20,8 @@ export default function SearchOverlay({ showSearch, onCloseSearch, ...props }) {
18
20
 
19
21
  return (
20
22
  <div className="fixed left-0 top-0 w-full h-full z-[10000] bg-neutral-100">
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
- />
23
+ <div className="absolute top-4 right-4 cursor-pointer z-[11]" onClick={onCloseSearch}>
24
+ <Icon height={'w-8 h-8 stroke-[1.5px]'} variant="xclose" strokeClass="stroke-neutral-800" />
30
25
  </div>
31
26
  <div className="py-20 overflow-y-auto h-full w-full bg-neutral-100">
32
27
  <div className="px-4">
@@ -39,4 +34,4 @@ export default function SearchOverlay({ showSearch, onCloseSearch, ...props }) {
39
34
  </div>
40
35
  </div>
41
36
  );
42
- }
37
+ }
package/src/HDS/helpers/AlgoliaSearch/searchresults.js CHANGED
@@ -1,64 +1,44 @@
1
1
  import React, { Fragment } from "react";
2
- import { connectStateResults, Hits, Index } from "react-instantsearch-dom";
2
+ import { connectStateResults, Highlight, Hits, Index, Snippet } from "react-instantsearch-dom";
3
3
  import { INDEX_TYPES } from "./constants";
4
4
  import SearchFooter from "./searchfooter";
5
- import { Typography } from "../../foundation/Typography";
6
- import { Icon } from "../../components/common-components/Icon";
7
- import { SearchHit } from "./SearchHit";
5
+ import { Typography } from '../../foundation/Typography'
6
+ import { Icon } from '../../components/common-components/Icon';
7
+
8
+ // import SearchFooter from "./SearchFooter";
9
+
10
+ const baseDomain = 'hasura.io';
11
+
8
12
 
9
13
  const HitsHeader = ({ searchResults, indexTitle, showSeparator, allIndex }) => {
10
14
  const hitCount = searchResults && searchResults.nbHits;
11
15
  const titleIcon = () => {
12
- if (indexTitle === "Hasura Blog") {
16
+ if(indexTitle === "Hasura Blog") {
13
17
  return (
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
- );
18
+ <Icon height={'block w-6 mr-3 h-6 stroke-[2px] transition ease-in-out'} variant="pentool02" strokeClass='stroke-blue-500' />
19
+ )
20
20
  }
21
- if (indexTitle === "Hasura GraphQL Engine Docs") {
21
+ if(indexTitle === "Hasura GraphQL Engine Docs") {
22
22
  return (
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
- );
23
+ <Icon height={'block w-6 mr-3 h-6 stroke-[2px] transition ease-in-out'} variant="file02" strokeClass='stroke-blue-500' />
24
+ )
39
25
  }
40
-
41
26
  return (
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
-
27
+ <Icon height={'block w-6 mr-3 h-6 stroke-[2px] transition ease-in-out'} variant="graduationhat01" strokeClass='stroke-blue-500' />
28
+ )
29
+ }
30
+
50
31
  return hitCount > 0 ? (
51
32
  <Fragment>
52
33
  {showSeparator && <hr className="my-8 border-t-neutral-200" />}
53
34
  {/* <div className="HitCount">
54
35
  {hitCount} result{hitCount !== 1 ? `s` : ``}
55
36
  </div> */}
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
-
37
+ <Typography textStyle="sub1" 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">
38
+ {
39
+ titleIcon()
40
+ }
41
+
62
42
  {indexTitle}
63
43
  </Typography>
64
44
  </Fragment>
@@ -67,15 +47,60 @@ const HitsHeader = ({ searchResults, indexTitle, showSeparator, allIndex }) => {
67
47
 
68
48
  const CustomHitsHeader = connectStateResults(HitsHeader);
69
49
 
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
+
70
97
  const HitsByIndexType = ({ indexType }) => {
71
98
  if (INDEX_TYPES[indexType] === undefined) return null;
72
99
 
73
100
  return (
74
101
  <Hits
75
102
  className="Hits"
76
- hitComponent={(hitProps) => (
77
- <SearchHit {...hitProps} indexType={indexType} />
78
- )}
103
+ hitComponent={hitProps => <PageHit {...hitProps} indexType={indexType} />}
79
104
  />
80
105
  );
81
106
  };
@@ -86,8 +111,8 @@ const HitsInIndex = ({ index, show }) => (
86
111
  <Fragment>
87
112
  <CustomHitsHeader
88
113
  indexTitle={index.title}
89
- showSeparator={index.type !== INDEX_TYPES.events}
90
- allIndex={index.type}
114
+ showSeparator={index.type !== INDEX_TYPES.blog}
115
+ allIndex = {index.type}
91
116
  />
92
117
  <HitsByIndexType indexType={index.type} />
93
118
  </Fragment>
@@ -95,26 +120,11 @@ const HitsInIndex = ({ index, show }) => (
95
120
  </Index>
96
121
  );
97
122
 
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
- >
123
+ const SearchResult = ({ children, indices, className, id, wrapperRef, activeIndexTypes }) => (
124
+ <div id={id} className={`${className} search-results clear-both`} ref={wrapperRef}>
111
125
  {children && children}
112
- {indices.map((index) => (
113
- <HitsInIndex
114
- index={index}
115
- key={index.name}
116
- show={activeIndexTypes[index.type]}
117
- />
126
+ {indices.map(index => (
127
+ <HitsInIndex index={index} key={index.name} show={activeIndexTypes[index.type]} />
118
128
  ))}
119
129
  <SearchFooter />
120
130
  </div>