From d5768daedfa0d1520664ff68a2de30ce06226277 Mon Sep 17 00:00:00 2001 From: Mark van Aalst Date: Mon, 5 Jun 2023 13:39:50 +0200 Subject: [PATCH 1/5] add color by result type --- .../sitecore-search/Search.styles.css | 20 +++++ .../sitecore-search/SearchResults.tsx | 77 ++++++++++--------- apps/devportal/src/styles/global.css | 1 + packages/ui/common/text-util.ts | 8 ++ 4 files changed, 71 insertions(+), 35 deletions(-) create mode 100644 apps/devportal/src/components/integrations/sitecore-search/Search.styles.css diff --git a/apps/devportal/src/components/integrations/sitecore-search/Search.styles.css b/apps/devportal/src/components/integrations/sitecore-search/Search.styles.css new file mode 100644 index 000000000..de30d3bb1 --- /dev/null +++ b/apps/devportal/src/components/integrations/sitecore-search/Search.styles.css @@ -0,0 +1,20 @@ +/* + Search results page +*/ + +.result-type-base { + @apply text-white; +} + +.result-type-article { + @apply bg-primary-500 dark:bg-primary-900 result-type-base; +} +.result-type-forum { + @apply result-type-base bg-teal-500 dark:bg-teal-500; +} +.result-type-repository { + @apply result-type-base bg-gray-500; +} +.result-type-video { + @apply result-type-base bg-red-500; +} diff --git a/apps/devportal/src/components/integrations/sitecore-search/SearchResults.tsx b/apps/devportal/src/components/integrations/sitecore-search/SearchResults.tsx index 34ace0b09..66cca096e 100644 --- a/apps/devportal/src/components/integrations/sitecore-search/SearchResults.tsx +++ b/apps/devportal/src/components/integrations/sitecore-search/SearchResults.tsx @@ -2,7 +2,7 @@ import { trackEntityPageViewEvent, useSearchResults, widget, WidgetDataType } fr import { WidgetComponentProps } from '@sitecore-search/react/types'; import Image from 'next/image'; import { ComponentType } from 'react'; -import { truncateString } from 'ui/common/text-util'; +import { toClass, truncateString } from 'ui/common/text-util'; import Loader from './Loader'; import QuerySummary from './QuerySummary'; import SearchFacets from './SearchFacets'; @@ -24,12 +24,15 @@ export const SearchResults = (props: SearchResultsType) => { context: { page = currentPage, itemsPerPage = initialArticlesPerPage, sortType = defaultSortType }, queryResult: { isLoading, data: { sort: { choices: sortChoices = [] } = {}, total_item: totalItems = 0, content: articles = [], facet: facets = [] } = {} }, } = useSearchResults((query) => { - query.getRequest().setSearchQueryHighlight({ - fields: ['description'], - fragment_size: 100, - pre_tag: '', - post_tag: '', - }).setSources(indexSources); + query + .getRequest() + .setSearchQueryHighlight({ + fields: ['description'], + fragment_size: 100, + pre_tag: '', + post_tag: '', + }) + .setSources(indexSources); return { itemsPerPage: initialArticlesPerPage, @@ -48,7 +51,7 @@ export const SearchResults = (props: SearchResultsType) => { )} {!isLoading && (
- {articles.length > 0 && + {articles.length > 0 && ( <>
@@ -63,45 +66,49 @@ export const SearchResults = (props: SearchResultsType) => {
+ {result.url} + + + ))} onPageNumberChange({ page: v })} page={page} pageSize={itemsPerPage} totalItems={totalItems} /> - } - {articles.length === 0 && -

Your search terms did not return any results, please use the input above to try again.

- } + )} + {articles.length === 0 &&

Your search terms did not return any results, please use the input above to try again.

} - )} + )} ); }; diff --git a/apps/devportal/src/styles/global.css b/apps/devportal/src/styles/global.css index 164505d0b..46525d8c5 100644 --- a/apps/devportal/src/styles/global.css +++ b/apps/devportal/src/styles/global.css @@ -2,3 +2,4 @@ @import 'ui/styles/global.css'; @import '../components/changelog/Changelog.styles.css'; +@import '../components/integrations/sitecore-search/Search.styles.css'; diff --git a/packages/ui/common/text-util.ts b/packages/ui/common/text-util.ts index 45c0ff501..fb8cc147f 100644 --- a/packages/ui/common/text-util.ts +++ b/packages/ui/common/text-util.ts @@ -17,3 +17,11 @@ export function truncateString(str: string, maxLength: number, appendMoreIndiati return returnValue; } + +export function toClass(text: string): string { + return text + .toLowerCase() + .replace(/[^\w\s-.]/g, '') // remove non-alphanumeric characters except the period + .replace(/[\s_-]+/g, '-') // replace spaces, underscores, or hyphens with a single hyphen + .trim(); +} From d7891565273dc65c3a7eda341202cb9060776f05 Mon Sep 17 00:00:00 2001 From: Mark van Aalst Date: Mon, 5 Jun 2023 13:52:29 +0200 Subject: [PATCH 2/5] preview styling changed loader --- .../sitecore-search/PreviewSearchInput.tsx | 74 ++++++++++--------- .../sitecore-search/SearchResults.tsx | 4 +- 2 files changed, 40 insertions(+), 38 deletions(-) diff --git a/apps/devportal/src/components/integrations/sitecore-search/PreviewSearchInput.tsx b/apps/devportal/src/components/integrations/sitecore-search/PreviewSearchInput.tsx index 28a79a554..3a847e147 100644 --- a/apps/devportal/src/components/integrations/sitecore-search/PreviewSearchInput.tsx +++ b/apps/devportal/src/components/integrations/sitecore-search/PreviewSearchInput.tsx @@ -6,7 +6,7 @@ import type { PreviewSearchActionProps } from '@sitecore-search/widgets'; import Image from 'next/image'; import { useRouter } from 'next/router'; import { SyntheticEvent, useCallback, useState } from 'react'; -import Loader from './Loader'; +import { Loading } from 'ui/components/common/Loading'; type ArticleModel = { id: string; @@ -20,13 +20,13 @@ type ArticleModel = { site_name: string; highlight: { description: string; - } + }; }; -const Articles = ({ loading = false, articles, onItemClick, suggestionsReturned }: { loading?: boolean; articles: Array; onItemClick: PreviewSearchActionProps['onItemClick']; suggestionsReturned?: boolean}) => ( - +const Articles = ({ loading = false, articles, onItemClick, suggestionsReturned }: { loading?: boolean; articles: Array; onItemClick: PreviewSearchActionProps['onItemClick']; suggestionsReturned?: boolean }) => ( + - + {!loading && @@ -41,7 +41,7 @@ const Articles = ({ loading = false, articles, onItemClick, suggestionsReturned window.open(article.url, '_blank'); }} > - +
{article.name}
@@ -54,8 +54,8 @@ const Articles = ({ loading = false, articles, onItemClick, suggestionsReturned {!article.image_url && {article.index_name}}
)} - {article.type != 'Video' && article?.highlight?.description &&

} - {article.type != 'Video' && !article.highlight && article.description &&

{truncateString(article.description, 300, true)}

} + {article.type != 'Video' && article?.highlight?.description &&

} + {article.type != 'Video' && !article.highlight && article.description &&

{truncateString(article.description, 100, true)}

}
@@ -78,6 +78,7 @@ const Group = ({ activeItem, onActiveItem, onItemClick, + onGroupTitleClick, }: { groupTitle: string; groupId: string; @@ -86,19 +87,21 @@ const Group = ({ activeItem: string; onActiveItem: (arg: string) => void; onItemClick: (payload: ActionPropPayload) => void; + onGroupTitleClick: (arg: string) => void; }) => { return ( -
+

{groupTitle}

{articles.map(({ text }) => ( { const target = e.target as HTMLLinkElement; target.focus(); }} onFocus={() => onActiveItem(getGroupId(groupId, text))} + onClick={() => onGroupTitleClick(text)} > {text} @@ -116,32 +119,24 @@ const getGroupId = (name: string, value: string) => `${name}@${value}`; const PreviewSearchInput = ({ defaultProductsPerPage = 6 }) => { const router = useRouter(); const indexSources = process.env.NEXT_PUBLIC_SEARCH_SOURCES?.split(',') || []; - const { q } = router.query + const { q } = router.query; const { context: { keyphrase = q || '' }, actions: { onItemClick, onKeyphraseChange }, - queryResult: { - isFetching, - isLoading, - data: { - content: articles = [], - suggestion: { - name_suggester: articleSuggestions = [], - } = {}, - } = {}, - }, + queryResult: { isFetching, isLoading, data: { content: articles = [], suggestion: { name_suggester: articleSuggestions = [] } = {} } = {} }, } = usePreviewSearch((query) => { - query.getRequest().setSearchQueryHighlight({ - fields: ['description'], - fragment_size: 100, - pre_tag: '', - post_tag: '', - }).setSources(indexSources); - + query + .getRequest() + .setSearchQueryHighlight({ + fields: ['description'], + fragment_size: 100, + pre_tag: '', + post_tag: '', + }) + .setSources(indexSources); + return { - suggestionsList: [ - { suggestion: 'name_suggester', max: 10 }, - ], + suggestionsList: [{ suggestion: 'name_suggester', max: 10 }], itemsPerPage: defaultProductsPerPage, }; }); @@ -172,6 +167,11 @@ const PreviewSearchInput = ({ defaultProductsPerPage = 6 }) => { router.push('/search?q=' + encodeURIComponent(target.value)).then(() => router.reload()); }; + function onGroupTitleClick(arg: string): void { + setValue(''); + router.push('/search?q=' + encodeURIComponent(arg)).then(() => router.reload()); + } + return ( @@ -208,15 +208,17 @@ const PreviewSearchInput = ({ defaultProductsPerPage = 6 }) => {
- + - + {!loading && ( - - {articleSuggestions.length > 0 && } - + + {articleSuggestions.length > 0 && ( + + )} + 0} /> diff --git a/apps/devportal/src/components/integrations/sitecore-search/SearchResults.tsx b/apps/devportal/src/components/integrations/sitecore-search/SearchResults.tsx index 66cca096e..568120524 100644 --- a/apps/devportal/src/components/integrations/sitecore-search/SearchResults.tsx +++ b/apps/devportal/src/components/integrations/sitecore-search/SearchResults.tsx @@ -3,7 +3,7 @@ import { WidgetComponentProps } from '@sitecore-search/react/types'; import Image from 'next/image'; import { ComponentType } from 'react'; import { toClass, truncateString } from 'ui/common/text-util'; -import Loader from './Loader'; +import { Loading } from 'ui/components/common/Loading'; import QuerySummary from './QuerySummary'; import SearchFacets from './SearchFacets'; import SearchPagination from './SearchPagination'; @@ -46,7 +46,7 @@ export const SearchResults = (props: SearchResultsType) => { <> {isLoading && (
- +
)} {!isLoading && ( From 051d776a080f0d36a04e2cbd2f65f57c4df9ec4d Mon Sep 17 00:00:00 2001 From: Mark van Aalst Date: Mon, 5 Jun 2023 14:39:04 +0200 Subject: [PATCH 3/5] add color by result --- .../integrations/sitecore-search/PreviewSearchInput.tsx | 4 ++-- .../components/integrations/sitecore-search/Search.styles.css | 3 +++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/apps/devportal/src/components/integrations/sitecore-search/PreviewSearchInput.tsx b/apps/devportal/src/components/integrations/sitecore-search/PreviewSearchInput.tsx index 3a847e147..e348bc44e 100644 --- a/apps/devportal/src/components/integrations/sitecore-search/PreviewSearchInput.tsx +++ b/apps/devportal/src/components/integrations/sitecore-search/PreviewSearchInput.tsx @@ -1,5 +1,5 @@ import { GetProductLogo } from '@/../../packages/ui/common/assets'; -import { truncateString } from '@/../../packages/ui/common/text-util'; +import { toClass, truncateString } from '@/../../packages/ui/common/text-util'; import { ActionPropPayload, ItemIndexActionPayload, PreviewSearchSuggestionQuery, SearchResponseSuggestion, WidgetAction, WidgetDataType, usePreviewSearch, widget } from '@sitecore-search/react'; import { ArticleCard, NavMenu, Presence } from '@sitecore-search/ui'; import type { PreviewSearchActionProps } from '@sitecore-search/widgets'; @@ -45,7 +45,7 @@ const Articles = ({ loading = false, articles, onItemClick, suggestionsReturned
{article.name}
- {article.type && {article.type}} + {article.type && {article.type}} {article.index_name && {article.site_name}}
{article.type == 'Video' && ( diff --git a/apps/devportal/src/components/integrations/sitecore-search/Search.styles.css b/apps/devportal/src/components/integrations/sitecore-search/Search.styles.css index de30d3bb1..2173a2f81 100644 --- a/apps/devportal/src/components/integrations/sitecore-search/Search.styles.css +++ b/apps/devportal/src/components/integrations/sitecore-search/Search.styles.css @@ -18,3 +18,6 @@ .result-type-video { @apply result-type-base bg-red-500; } +.result-type-changelog { + @apply result-type-base bg-orange-500; +} From 46f89c71b11e1e237665e150bbdc172a2761e7f1 Mon Sep 17 00:00:00 2001 From: Mark van Aalst Date: Mon, 5 Jun 2023 16:08:02 +0200 Subject: [PATCH 4/5] remove article preview for mobile --- .../sitecore-search/PreviewSearchInput.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/apps/devportal/src/components/integrations/sitecore-search/PreviewSearchInput.tsx b/apps/devportal/src/components/integrations/sitecore-search/PreviewSearchInput.tsx index e348bc44e..e7e83b329 100644 --- a/apps/devportal/src/components/integrations/sitecore-search/PreviewSearchInput.tsx +++ b/apps/devportal/src/components/integrations/sitecore-search/PreviewSearchInput.tsx @@ -24,11 +24,11 @@ type ArticleModel = { }; const Articles = ({ loading = false, articles, onItemClick, suggestionsReturned }: { loading?: boolean; articles: Array; onItemClick: PreviewSearchActionProps['onItemClick']; suggestionsReturned?: boolean }) => ( - +