Merge pull request #56 from oramasearch/sourcesRenderFunctions

Sources render functions
oramasearch · Oct 27, 2024 · c229de8 · c229de8
2 parents ec5c121 + 7aa28ea
commit c229de8
Show file tree

Hide file tree

Showing 13 changed files with 169 additions and 92 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -90,5 +90,11 @@
   },
   "[css]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
   }
 }
diff --git a/apps/storybook/stories/public/orama-search-box.stories.tsx b/apps/storybook/stories/public/orama-search-box.stories.tsx
@@ -83,7 +83,11 @@ const Template = ({ preset, chatPlaceholder, searchPlaceholder, colorScheme, dis
       .disableChat=${disableChat}
       .chatPlaceholder=${chatPlaceholder}
       .searchPlaceholder=${searchPlaceholder}
-      .highlight=${preset?.highlight}
+      .highlightTitle=${preset?.highlightTitle}
+      .highlightDescription=${preset?.highlightDescription}
+      .linksTarget=${preset?.linksTarget}
+      .placeholder=${preset?.placeholder}
+      .searchParams=${preset?.searchParams}
     ></orama-search-box></div>`
 }
 
@@ -104,6 +108,11 @@ const TemplateAsEmbed = ({ preset, chatPlaceholder, searchPlaceholder, colorSche
       .disableChat=${disableChat}
       .chatPlaceholder=${chatPlaceholder}
       .searchPlaceholder=${searchPlaceholder}
+      .highlightTitle=${preset?.highlightTitle}
+      .highlightDescription=${preset?.highlightDescription}
+      .linksTarget=${preset?.linksTarget}
+      .placeholder=${preset?.placeholder}
+      .searchParams=${preset?.searchParams}
     ></orama-search-box>
   </div>`
 }

diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts
@@ -144,7 +144,8 @@ export const OramaSearch = /*@__PURE__*/ defineContainer<JSX.OramaSearch>('orama
   'linksTarget',
   'linksRel',
   'disableChat',
-  'highlight'
+  'highlightTitle',
+  'highlightDescription'
 ]);
 
 
@@ -162,7 +163,8 @@ export const OramaSearchBox = /*@__PURE__*/ defineContainer<JSX.OramaSearchBox>(
   'sourcesMap',
   'disableChat',
   'layout',
-  'highlight',
+  'highlightTitle',
+  'highlightDescription',
   'placeholder',
   'chatPlaceholder',
   'searchPlaceholder',
@@ -189,7 +191,8 @@ export const OramaSearchResults = /*@__PURE__*/ defineContainer<JSX.OramaSearchR
   'setChatTerm',
   'loading',
   'error',
-  'highlight',
+  'highlightTitle',
+  'highlightDescription',
   'oramaItemClick'
 ]);
 

diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts
@@ -129,7 +129,8 @@ export namespace Components {
     interface OramaSearch {
         "disableChat"?: boolean;
         "focusInput"?: boolean;
-        "highlight"?: HighlightOptions | false;
+        "highlightDescription"?: HighlightOptions | false;
+        "highlightTitle"?: HighlightOptions | false;
         "linksRel"?: string;
         "linksTarget"?: string;
         "placeholder"?: string;
@@ -142,7 +143,8 @@ export namespace Components {
         "colorScheme"?: ColorScheme;
         "disableChat"?: boolean;
         "facetProperty"?: string;
-        "highlight"?: HighlightOptions | false;
+        "highlightDescription"?: HighlightOptions | false;
+        "highlightTitle"?: HighlightOptions | false;
         "index"?: CloudIndexConfig;
         "layout"?: 'modal' | 'embed';
         "linksRel"?: string;
@@ -164,7 +166,8 @@ export namespace Components {
     }
     interface OramaSearchResults {
         "error": boolean;
-        "highlight"?: HighlightOptions | false;
+        "highlightDescription"?: HighlightOptions | false;
+        "highlightTitle"?: HighlightOptions | false;
         "linksRel"?: string;
         "linksTarget"?: string;
         "loading": boolean;
@@ -587,7 +590,8 @@ declare namespace LocalJSX {
     interface OramaSearch {
         "disableChat"?: boolean;
         "focusInput"?: boolean;
-        "highlight"?: HighlightOptions | false;
+        "highlightDescription"?: HighlightOptions | false;
+        "highlightTitle"?: HighlightOptions | false;
         "linksRel"?: string;
         "linksTarget"?: string;
         "placeholder"?: string;
@@ -600,7 +604,8 @@ declare namespace LocalJSX {
         "colorScheme"?: ColorScheme;
         "disableChat"?: boolean;
         "facetProperty"?: string;
-        "highlight"?: HighlightOptions | false;
+        "highlightDescription"?: HighlightOptions | false;
+        "highlightTitle"?: HighlightOptions | false;
         "index"?: CloudIndexConfig;
         "layout"?: 'modal' | 'embed';
         "linksRel"?: string;
@@ -625,7 +630,8 @@ declare namespace LocalJSX {
     }
     interface OramaSearchResults {
         "error"?: boolean;
-        "highlight"?: HighlightOptions | false;
+        "highlightDescription"?: HighlightOptions | false;
+        "highlightTitle"?: HighlightOptions | false;
         "linksRel"?: string;
         "linksTarget"?: string;
         "loading"?: boolean;

diff --git a/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.scss b/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.scss
@@ -70,13 +70,6 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-
-  // todo: should be based on available space
-  width: 300px;
-
-  @media (--sm-min) {
-    width: pxToRem(480);
-  }
 }
 
 .result-title {
@@ -104,6 +97,13 @@
   padding: 0 var(--spacing-s, $spacing-s);
 }
 
+.textWrapper {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
 ph-files {
   color: var(--icon-color-primary, icon-color('primary'));
 }
diff --git a/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.tsx b/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.tsx
@@ -27,9 +27,24 @@ export class SearchResults {
   @Prop() setChatTerm: (term: string) => void
   @Prop() loading = false
   @Prop() error = false
-  @Prop() highlight?: HighlightOptions | false = false
+  @Prop() highlightTitle?: HighlightOptions | false = false
+  @Prop() highlightDescription?: HighlightOptions | false = false
 
-  private highlighter?: Highlight
+  private highlighterTitle?: Highlight
+  private highlighterDescription?: Highlight
+
+  private getSourceUrl = (path: string) => {
+    if (!path) {
+      return '#'
+    }
+
+    if (this.sourceBaseUrl) {
+      const sourceUrl = new URL(path, this.sourceBaseUrl)
+      return sourceUrl.toString()
+    }
+
+    return path
+  }
 
   handleItemClick = (item: SearchResult) => {
     if (item?.path) {
@@ -46,13 +61,21 @@ export class SearchResults {
     return '#'
   }
 
-  getHighlightedText = (text: string) => {
-    return this.highlighter.highlight(text, this.searchTerm)
+  getHighlightedTitleText = (text: string) => {
+    return this.highlighterTitle.highlight(text, this.searchTerm)
+  }
+
+  getHighlightedDescriptionText = (text: string) => {
+    return this.highlighterDescription.highlight(text, this.searchTerm)
   }
 
   componentDidLoad() {
-    if (this.highlight) {
-      this.highlighter = new Highlight(this.highlight)
+    if (this.highlightTitle) {
+      this.highlighterTitle = new Highlight(this.highlightTitle)
+    }
+
+    if (this.highlightDescription) {
+      this.highlighterDescription = new Highlight(this.highlightDescription)
     }
   }
 
@@ -109,29 +132,31 @@ export class SearchResults {
                   <li class="list-item" key={result.id}>
                     <a
                       focus-on-arrow-nav
-                      href={`${this.sourceBaseUrl}${result.path}`}
+                      href={this.getSourceUrl(result.path)}
                       class="list-item-button"
                       target={this.linksTarget}
                       rel={this.linksRel}
                       id={`search-result-${result.id}`}
                       onClick={() => this.handleItemClick(result)}
                     >
-                      <ph-files size="20px" />
-                      <div>
+                      <div style={{ flexShrink: '0' }}>
+                        <ph-files size="20px" />
+                      </div>
+                      <div class="textWrapper">
                         <orama-text as="h3" styledAs="p" class="result-title collapsed">
-                          {!this.highlight ? (
+                          {!this.highlightTitle ? (
                             <span innerHTML={result.title} />
-                          ) : result.title.length > 60 ? (
-                            <span innerHTML={this.getHighlightedText(result.title).trim(60)} />
+                          ) : result.title.length > 200 ? ( // Trim exists here to prevent to render too much data to the DOM
+                            <span innerHTML={this.getHighlightedTitleText(result.title).trim(200)} />
                           ) : (
-                            <span innerHTML={this.getHighlightedText(result.title).HTML} />
+                            <span innerHTML={this.getHighlightedTitleText(result.title).HTML} />
                           )}
                         </orama-text>
                         <orama-text as="p" styledAs="span" class="result-description collapsed" variant="tertiary">
-                          {!this.highlight ? (
+                          {!this.highlightDescription ? (
                             <span innerHTML={result.description} />
                           ) : (
-                            <span innerHTML={this.getHighlightedText(result.description).trim(60)} />
+                            <span innerHTML={this.getHighlightedDescriptionText(result.description).HTML} />
                           )}
                         </orama-text>
                       </div>

diff --git a/packages/ui-stencil/src/components/internal/orama-search-results/readme.md b/packages/ui-stencil/src/components/internal/orama-search-results/readme.md
@@ -5,18 +5,19 @@
 
 ## Properties
 
-| Property        | Attribute         | Description | Type                          | Default                 |
-| --------------- | ----------------- | ----------- | ----------------------------- | ----------------------- |
-| `error`         | `error`           |             | `boolean`                     | `false`                 |
-| `highlight`     | `highlight`       |             | `HighlightOptions \| boolean` | `false`                 |
-| `linksRel`      | `links-rel`       |             | `string`                      | `'noopener noreferrer'` |
-| `linksTarget`   | `links-target`    |             | `string`                      | `'_blank'`              |
-| `loading`       | `loading`         |             | `boolean`                     | `false`                 |
-| `searchTerm`    | `search-term`     |             | `string`                      | `undefined`             |
-| `sections`      | --                |             | `SearchResultBySection[]`     | `[]`                    |
-| `setChatTerm`   | --                |             | `(term: string) => void`      | `undefined`             |
-| `sourceBaseUrl` | `source-base-url` |             | `string`                      | `undefined`             |
-| `suggestions`   | --                |             | `string[]`                    | `[]`                    |
+| Property               | Attribute               | Description | Type                          | Default                 |
+| ---------------------- | ----------------------- | ----------- | ----------------------------- | ----------------------- |
+| `error`                | `error`                 |             | `boolean`                     | `false`                 |
+| `highlightDescription` | `highlight-description` |             | `HighlightOptions \| boolean` | `false`                 |
+| `highlightTitle`       | `highlight-title`       |             | `HighlightOptions \| boolean` | `false`                 |
+| `linksRel`             | `links-rel`             |             | `string`                      | `'noopener noreferrer'` |
+| `linksTarget`          | `links-target`          |             | `string`                      | `'_blank'`              |
+| `loading`              | `loading`               |             | `boolean`                     | `false`                 |
+| `searchTerm`           | `search-term`           |             | `string`                      | `undefined`             |
+| `sections`             | --                      |             | `SearchResultBySection[]`     | `[]`                    |
+| `setChatTerm`          | --                      |             | `(term: string) => void`      | `undefined`             |
+| `sourceBaseUrl`        | `source-base-url`       |             | `string`                      | `undefined`             |
+| `suggestions`          | --                      |             | `string[]`                    | `[]`                    |
 
 
 ## Events

diff --git a/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx b/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx
@@ -20,7 +20,8 @@ export class OramaSearch {
   @Prop() linksTarget?: string
   @Prop() linksRel?: string
   @Prop() disableChat?: boolean = false
-  @Prop() highlight?: HighlightOptions | false = false
+  @Prop() highlightTitle?: HighlightOptions | false = false
+  @Prop() highlightDescription?: HighlightOptions | false = false
 
   @State() searchValue = ''
   @State() selectedFacet = ''
@@ -93,7 +94,8 @@ export class OramaSearch {
             linksRel={this.linksRel}
             sections={searchState.results}
             searchTerm={this.searchValue}
-            highlight={this.highlight}
+            highlightTitle={this.highlightTitle}
+            highlightDescription={this.highlightDescription}
             loading={searchState.loading}
             error={searchState.error}
           />

diff --git a/packages/ui-stencil/src/components/internal/orama-search/readme.md b/packages/ui-stencil/src/components/internal/orama-search/readme.md
@@ -7,16 +7,17 @@
 
 ## Properties
 
-| Property        | Attribute         | Description | Type                          | Default       |
-| --------------- | ----------------- | ----------- | ----------------------------- | ------------- |
-| `disableChat`   | `disable-chat`    |             | `boolean`                     | `false`       |
-| `focusInput`    | `focus-input`     |             | `boolean`                     | `false`       |
-| `highlight`     | `highlight`       |             | `HighlightOptions \| boolean` | `false`       |
-| `linksRel`      | `links-rel`       |             | `string`                      | `undefined`   |
-| `linksTarget`   | `links-target`    |             | `string`                      | `undefined`   |
-| `placeholder`   | `placeholder`     |             | `string`                      | `'Search...'` |
-| `sourceBaseUrl` | `source-base-url` |             | `string`                      | `undefined`   |
-| `suggestions`   | --                |             | `string[]`                    | `[]`          |
+| Property               | Attribute               | Description | Type                          | Default       |
+| ---------------------- | ----------------------- | ----------- | ----------------------------- | ------------- |
+| `disableChat`          | `disable-chat`          |             | `boolean`                     | `false`       |
+| `focusInput`           | `focus-input`           |             | `boolean`                     | `false`       |
+| `highlightDescription` | `highlight-description` |             | `HighlightOptions \| boolean` | `false`       |
+| `highlightTitle`       | `highlight-title`       |             | `HighlightOptions \| boolean` | `false`       |
+| `linksRel`             | `links-rel`             |             | `string`                      | `undefined`   |
+| `linksTarget`          | `links-target`          |             | `string`                      | `undefined`   |
+| `placeholder`          | `placeholder`           |             | `string`                      | `'Search...'` |
+| `sourceBaseUrl`        | `source-base-url`       |             | `string`                      | `undefined`   |
+| `suggestions`          | --                      |             | `string[]`                    | `[]`          |
 
 
 ## Dependencies

diff --git a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.tsx b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.tsx
@@ -33,7 +33,8 @@ export class SearchBox {
   @Prop() sourcesMap?: SourcesMap
   @Prop() disableChat?: boolean = false
   @Prop() layout?: 'modal' | 'embed' = 'modal'
-  @Prop() highlight?: HighlightOptions | false = false
+  @Prop() highlightTitle?: HighlightOptions | false = false
+  @Prop() highlightDescription?: HighlightOptions | false = false
 
   // TODO: remove it in favor of dictionary
   @Prop() placeholder?: string
@@ -178,19 +179,14 @@ export class SearchBox {
     return (
       <Fragment>
         <orama-search
-          class={`${
-            this.windowWidth > 1024
-              ? 'section-active'
-              : globalContext.currentTask === 'search'
-                ? 'section-active'
-                : 'section-inactive'
-          }`}
+          class={`${this.windowWidth > 1024 ? 'section-active' : globalContext.currentTask === 'search' ? 'section-active' : 'section-inactive'}`}
           placeholder={this?.searchPlaceholder || 'Search...'}
           focusInput={globalContext.currentTask === 'search'}
           sourceBaseUrl={this.sourceBaseUrl}
           linksTarget={this.linksTarget}
           linksRel={this.linksRel}
-          highlight={this.highlight}
+          highlightTitle={this.highlightTitle}
+          highlightDescription={this.highlightDescription}
           disableChat={this.disableChat}
           suggestions={this.suggestions}
         >