fix: fix indentation of search results, refs #58

packages/logos-docusaurus-theme/src/client/theme/SearchBar/SearchResultGroup/SearchResultGroup.module.scss

@@ -17,8 +17,4 @@
     list-style: none;
     margin-top: 1rem;
   }
-
-  ul a[href*='#'] li {
-    padding-left: 56px;
-  }
 }

packages/logos-docusaurus-theme/src/client/theme/SearchBar/SearchResultItem/SearchResultItem.module.scss

@@ -2,16 +2,15 @@
   text-decoration: none !important;
 }
 
+.root.level1 {
+  opacity: 0.1;
+  padding-left: 32px;
+}
+
 .icon {
   width: 16px;
   height: auto;
 
-  &.l1 {
-  }
-
-  &.l2 {
-  }
-
   &.fill {
     &,
     & * {

packages/logos-docusaurus-theme/src/client/theme/SearchBar/SearchResultItem/SearchResultItem.tsx

@@ -9,13 +9,13 @@ import styles from './SearchResultItem.module.scss'
 
 const icons: Record<SearchDocumentType, React.ReactElement> = {
   [SearchDocumentType.Title]: (
-    <DocumentIcon className={clsx(styles.icon, styles.l1, styles.fill)} />
+    <DocumentIcon className={clsx(styles.icon, styles.fill)} />
   ),
   [SearchDocumentType.Heading]: (
-    <BlockIcon className={clsx(styles.icon, styles.l2, styles.fill)} />
+    <BlockIcon className={clsx(styles.icon, styles.fill)} />
   ),
   [SearchDocumentType.Paragraph]: (
-    <BlockIcon className={clsx(styles.icon, styles.l2, styles.fill)} />
+    <BlockIcon className={clsx(styles.icon, styles.fill)} />
   ),
 }
 
@@ -24,11 +24,13 @@ export type SearchResultItemProps = React.HTMLProps<HTMLLIElement> & {
   title: string
   href: string
   content?: string
+  level?: number
   linkProps?: LinkProps
 }
 
 export const SearchResultItem: React.FC<SearchResultItemProps> = ({
   type,
+  level = 0,
   href,
   title,
   content,
@@ -41,7 +43,7 @@ export const SearchResultItem: React.FC<SearchResultItemProps> = ({
   return (
     <Link
       href={href}
-      className={clsx(styles.root, linkClassName)}
+      className={clsx(styles.root, styles[`level${level}`], linkClassName)}
       {...linkProps}
     >
       <SearchResultItemBase

packages/logos-docusaurus-theme/src/client/theme/SearchBar/SearchResults/SearchResults.tsx

@@ -35,6 +35,7 @@ export const SearchResults: React.FC<SearchResultsProps> = ({
                 <SearchResultItem
                   key={itemIndex}
                   type={item.type}
+                  level={item.level}
                   href={item.href}
                   title={item.title}
                   content={item.content}

packages/logos-docusaurus-theme/src/client/theme/SearchBar/types.ts

@@ -46,6 +46,7 @@ export interface MatchMetadata {
 
 export type SearchResultGroupItem = {
   type: SearchResult['type']
+  level: 0 | 1 | 2
   url: string
   hash: string
   href: string

packages/logos-docusaurus-theme/src/client/theme/SearchBar/utils/groupSearchResult.ts

@@ -20,6 +20,7 @@ const convertSearchResult = (
     case SearchDocumentType.Title: {
       return {
         type,
+        level: 0,
         url,
         hash,
         href,
@@ -35,6 +36,7 @@ const convertSearchResult = (
 
       return {
         type,
+        level: 1,
         url,
         hash,
         href,
@@ -50,11 +52,12 @@ const convertSearchResult = (
 
       return {
         type,
+        level: 2,
         url,
         hash,
         href,
         score,
-        title: document.sectionTitle ?? '',
+        title: document.sectionTitle || document.title || '',
         content: highlighted,
         category: p?.breadcrumb?.[1] ?? p?.title ?? '',
       }
@@ -64,8 +67,8 @@ const convertSearchResult = (
 
 export const groupSearchResult = (
   results: SearchResult[],
-): GroupedSearchResult =>
-  Object.entries(
+): GroupedSearchResult => {
+  const grouped = Object.entries(
     groupBy(
       results.map((item) => convertSearchResult(item)),
       'category',
@@ -84,21 +87,38 @@ export const groupSearchResult = (
     .map(([category, items]) => [
       category,
       Object.entries(groupBy(items, 'url'))
-        .map(
-          ([url, items]) =>
-            [
-              url,
-              items.sort((a, b) =>
-                a.type === SearchDocumentType.Title
-                  ? -1
-                  : a.score > b.score
-                  ? -1
-                  : 1,
-              ),
-            ] as [string, SearchResultGroupItem[]],
-        )
+        .map(([url, value]) => {
+          let items: SearchResultGroupItem[] = [...value].sort((a, b) =>
+            a.type === SearchDocumentType.Title
+              ? -1
+              : a.score > b.score
+              ? -1
+              : 1,
+          )
+
+          const hasTitle = items[0]?.type === SearchDocumentType.Title
+
+          items = hasTitle
+            ? items.filter(
+                (item) =>
+                  !(
+                    item.type === SearchDocumentType.Heading && item.hash === ''
+                  ),
+              )
+            : items
+
+          items = items.map((item, index) => ({
+            ...item,
+            level: hasTitle ? (index === 0 ? 0 : 1) : 0,
+          }))
+
+          return [url, items] as [string, SearchResultGroupItem[]]
+        })
         .sort((a, b) =>
           (a[1][0]?.score ?? 0) > (b[1][0]?.score ?? 0) ? -1 : 1,
         )
         .flatMap(([url, items]) => items),
     ])
+
+  return grouped as GroupedSearchResult
+}