Skip to content

Commit b001fc4

Browse files
reakaleekreakaleek
committed
Refactor and fix duplicate breadcrumbs
1 parent 3a62e55 commit b001fc4

File tree

3 files changed

+147
-137
lines changed

3 files changed

+147
-137
lines changed

‎src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/SearchResults.tsx‎

Lines changed: 142 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useSearchTerm } from '../search.store'
2-
import { useSearchQuery } from './useSearchQuery'
2+
import { SearchResultItem, useSearchQuery } from './useSearchQuery'
33
import {
44
useEuiFontSize,
55
EuiHighlight,
@@ -14,7 +14,7 @@ import {
1414
import { css } from '@emotion/react'
1515
import { useDebounce } from '@uidotdev/usehooks'
1616
import * as React from 'react'
17-
import { useEffect, useState } from 'react'
17+
import { useEffect, useMemo, useState } from 'react'
1818

1919
export const SearchResults = () => {
2020
const searchTerm = useSearchTerm()
@@ -28,7 +28,6 @@ export const SearchResults = () => {
2828
pageNumber: activePage + 1,
2929
})
3030
const { euiTheme } = useEuiTheme()
31-
const { fontSize: smallFontsize } = useEuiFontSize('xs')
3231

3332
if (!searchTerm) {
3433
return
@@ -38,16 +37,6 @@ export const SearchResults = () => {
3837
return <div>Error loading search results: {error.message}</div>
3938
}
4039

41-
const highlightSearchTerms = searchTerm.toLowerCase().split(' ')
42-
43-
if (highlightSearchTerms.includes('esql')) {
44-
highlightSearchTerms.push('es|ql')
45-
}
46-
47-
if (highlightSearchTerms.includes('dotnet')) {
48-
highlightSearchTerms.push('.net')
49-
}
50-
5140
return (
5241
<div>
5342
<div
@@ -78,138 +67,18 @@ export const SearchResults = () => {
7867
<>
7968
<ul>
8069
{data.results.map((result) => (
81-
<li key={result.url}>
82-
<div
83-
tabIndex={0}
84-
css={css`
85-
display: flex;
86-
align-items: flex-start;
87-
gap: ${euiTheme.size.s};
88-
padding-inline: ${euiTheme.size.s};
89-
padding-block: ${euiTheme.size.xs};
90-
border-radius: ${euiTheme.border.radius.small};
91-
:hover {
92-
background-color: ${euiTheme.colors.backgroundTransparentSubdued};
93-
`}
94-
>
95-
<EuiIcon
96-
type="document"
97-
color="subdued"
98-
css={css`
99-
margin-top: ${euiTheme.size.xs};
100-
`}
101-
/>
102-
<div
103-
css={css`
104-
width: 100%;
105-
text-align: left;
106-
`}
107-
>
108-
<EuiLink
109-
tabIndex={-1}
110-
href={result.url}
111-
css={css`
112-
.euiMark {
113-
background-color: ${euiTheme
114-
.colors
115-
.backgroundLightWarning};
116-
//background-color: transparent;
117-
//text-decoration: underline dotted;
118-
//color: inherit;
119-
font-weight: inherit;
120-
}
121-
`}
122-
>
123-
<EuiHighlight
124-
search={highlightSearchTerms}
125-
highlightAll={true}
126-
>
127-
{result.title}
128-
</EuiHighlight>
129-
</EuiLink>
130-
<ul
131-
css={css`
132-
margin-top: 2px;
133-
display: flex;
134-
gap: 0 ${euiTheme.size.xs};
135-
flex-wrap: wrap;
136-
list-style: none;
137-
`}
138-
>
139-
{result.parents
140-
.slice(1) // skip /docs
141-
.map((parent) => (
142-
<li
143-
key={
144-
'breadcrumb-' +
145-
parent.url
146-
}
147-
css={css`
148-
&:not(
149-
:last-child
150-
)::after {
151-
content: '/';
152-
margin-left: ${euiTheme
153-
.size.xs};
154-
font-size: ${smallFontsize};
155-
color: ${euiTheme
156-
.colors
157-
.text};
158-
margin-top: -1px;
159-
}
160-
display: inline-flex;
161-
`}
162-
>
163-
<EuiLink
164-
href={parent.url}
165-
color="text"
166-
tabIndex={-1}
167-
>
168-
<EuiText
169-
size="xs"
170-
color="subdued"
171-
css={css`
172-
.euiMark {
173-
background-color: transparent;
174-
text-decoration: underline;
175-
color: inherit;
176-
font-weight: inherit;
177-
}
178-
`}
179-
>
180-
<EuiHighlight
181-
search={
182-
highlightSearchTerms
183-
}
184-
highlightAll={
185-
true
186-
}
187-
>
188-
{
189-
parent.title
190-
}
191-
</EuiHighlight>
192-
</EuiText>
193-
</EuiLink>
194-
</li>
195-
))}
196-
</ul>
197-
</div>
198-
</div>
199-
{/*<EuiIcon type="document" color="subdued" />*/}
200-
{/*<EuiText>{result.title}</EuiText>*/}
201-
</li>
70+
<SearchResultListItem item={result} />
20271
))}
20372
</ul>
20473
<div
20574
css={css`
20675
display: flex;
207-
justify-content: center;
76+
justify-content: flex-end;
20877
`}
20978
>
21079
<EuiPagination
21180
aria-label="Many pages example"
212-
pageCount={Math.min(data.pageCount, 20)}
81+
pageCount={Math.min(data.pageCount, 10)}
21382
activePage={activePage}
21483
onPageClick={(activePage) =>
21584
setActivePage(activePage)
@@ -221,3 +90,140 @@ export const SearchResults = () => {
22190
</div>
22291
)
22392
}
93+
94+
interface SearchResultListItemProps {
95+
item: SearchResultItem
96+
}
97+
98+
function SearchResultListItem({ item: result }: SearchResultListItemProps) {
99+
const { euiTheme } = useEuiTheme()
100+
const searchTerm = useSearchTerm()
101+
const highlightSearchTerms = useMemo(
102+
() => searchTerm.toLowerCase().split(' '),
103+
[searchTerm]
104+
)
105+
106+
if (highlightSearchTerms.includes('esql')) {
107+
highlightSearchTerms.push('es|ql')
108+
}
109+
110+
if (highlightSearchTerms.includes('dotnet')) {
111+
highlightSearchTerms.push('.net')
112+
}
113+
return (
114+
<li key={result.url}>
115+
<div
116+
tabIndex={0}
117+
css={css`
118+
display: flex;
119+
align-items: flex-start;
120+
gap: ${euiTheme.size.s};
121+
padding-inline: ${euiTheme.size.s};
122+
padding-block: ${euiTheme.size.xs};
123+
border-radius: ${euiTheme.border.radius.small};
124+
:hover {
125+
background-color: ${euiTheme.colors.backgroundTransparentSubdued};
126+
`}
127+
>
128+
<EuiIcon
129+
type="document"
130+
color="subdued"
131+
css={css`
132+
margin-top: ${euiTheme.size.xs};
133+
`}
134+
/>
135+
<div
136+
css={css`
137+
width: 100%;
138+
text-align: left;
139+
`}
140+
>
141+
<EuiLink
142+
tabIndex={-1}
143+
href={result.url}
144+
css={css`
145+
.euiMark {
146+
background-color: ${euiTheme.colors
147+
.backgroundLightWarning};
148+
font-weight: inherit;
149+
}
150+
`}
151+
>
152+
<EuiHighlight
153+
search={highlightSearchTerms}
154+
highlightAll={true}
155+
>
156+
{result.title}
157+
</EuiHighlight>
158+
</EuiLink>
159+
<Breadcrumbs
160+
parents={result.parents}
161+
highlightSearchTerms={highlightSearchTerms}
162+
/>
163+
</div>
164+
</div>
165+
</li>
166+
)
167+
}
168+
169+
function Breadcrumbs({
170+
parents,
171+
highlightSearchTerms,
172+
}: {
173+
parents: SearchResultItem['parents']
174+
highlightSearchTerms: string[]
175+
}) {
176+
const { euiTheme } = useEuiTheme()
177+
const { fontSize: smallFontsize } = useEuiFontSize('xs')
178+
return (
179+
<ul
180+
css={css`
181+
margin-top: 2px;
182+
display: flex;
183+
gap: 0 ${euiTheme.size.xs};
184+
flex-wrap: wrap;
185+
list-style: none;
186+
`}
187+
>
188+
{parents
189+
.slice(1) // skip /docs
190+
.map((parent) => (
191+
<li
192+
key={'breadcrumb-' + parent.url}
193+
css={css`
194+
&:not(:last-child)::after {
195+
content: '/';
196+
margin-left: ${euiTheme.size.xs};
197+
font-size: ${smallFontsize};
198+
color: ${euiTheme.colors.text};
199+
margin-top: -1px;
200+
}
201+
display: inline-flex;
202+
`}
203+
>
204+
<EuiLink href={parent.url} color="text" tabIndex={-1}>
205+
<EuiText
206+
size="xs"
207+
color="subdued"
208+
css={css`
209+
.euiMark {
210+
background-color: transparent;
211+
text-decoration: underline;
212+
color: inherit;
213+
font-weight: inherit;
214+
}
215+
`}
216+
>
217+
<EuiHighlight
218+
search={highlightSearchTerms}
219+
highlightAll={true}
220+
>
221+
{parent.title}
222+
</EuiHighlight>
223+
</EuiText>
224+
</EuiLink>
225+
</li>
226+
))}
227+
</ul>
228+
)
229+
}

‎src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/useSearchQuery.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ const SearchResultItem = z.object({
1515
parents: z.array(SearchResultItemParent),
1616
})
1717

18+
export type SearchResultItem = z.infer<typeof SearchResultItem>
19+
1820
const SearchResponse = z.object({
1921
results: z.array(SearchResultItem),
2022
totalResults: z.number(),

‎src/Elastic.Markdown/IO/DocumentationSet.cs‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,9 @@ INavigationItem[] GetParents(INavigationItem current)
7878
{
7979
if (parent is null)
8080
continue;
81-
parents.Add(parent);
81+
if (parents.All(i => i.Url != parent.Url))
82+
parents.Add(parent);
83+
8284
parent = parent.Parent;
8385
} while (parent != null);
8486

0 commit comments

Comments
 (0)