Potentially unintended text in search on docs

[morganarnel]

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have validated any HTML to avoid common problems
• [X] I have read the contributing guidelines

Describe the issue

Go to the docs page at: https://getbootstrap.com/docs/5.2/customize/overview/ Press / to open the Algolia search, when searching for Modal what are presumably supposed to be results are displayed as a heading.

Reduced test cases

NA

What operating system(s) are you seeing the problem on?

Windows, macOS, Android, iOS, Linux

What browser(s) are you seeing the problem on?

Chrome, Firefox, Microsoft Edge

What version of Bootstrap are you using?

NA

[julien-deramond]

Apparently, all the <h1>s in the Modal page are gathered and appear in the results as a title in violet.

[WinterSilence]

customize widget

[mdo]

@patrickhlauke We may want to revisit the h1 move in modal headers. Or at least see if there's a fix for this with Algolia.

[patrickhlauke]

so is there no way to get the silly algolia thing to exclude certain types of headings with a particular .modal-title class? would hate to have to compromise correct structure/markup just for this...

[julien-deramond]

I'm not confortable about compromising the correct structure. We could create an issue in their repo so they use only the first h1 of the page for this part 🤷

[WinterSilence]

in search.js:

...
transformItems(items) {
  return items.map(item => {
    item._highlightResult.hierarchy.lvl0.value = '' // Added
    const liveUrl = 'https://getbootstrap.com/'
    ...
  })
}
...

[julien-deramond]

Hum. If we do it, we'll lose some information in the results (violet titles).

Before:

With the proposed patch:

[WinterSilence]

@julien-deramond it's rude solution just for example

I explode default configs and find solution in config.js:

  ...
  actions: [
    {
      recordExtractor: ({ helpers }) => {
        return helpers.docsearch({
          recordProps: {
            lvl1: ['header h1', 'article h1', 'main h1', 'h1', 'head > title'],
            content: ['article p, article li', 'main p, main li', 'p, li'],
            lvl0: {
              selectors: '',
              defaultValue: 'Documentation',
            },
            lvl2: ['article h2', 'main h2', 'h2'],
            lvl3: ['article h3', 'main h3', 'h3'],
            lvl4: ['article h4', 'main h4', 'h4'],
            lvl5: ['article h5', 'main h5', 'h5'],
            lvl6: ['article h6', 'main h6', 'h6'],
          },
        });
      },
    },
  ],
  ...

[julien-deramond]

Yes this syntax could provide a solution:

recordExtractor: ({ $, helpers }) => {
  // Removing DOM elements we don't want to crawl
  $(".modal-title").remove();

  return helpers.docsearch({
    // ...
  });
},

[bastienmoulia]

Same with ti (would like to find titles) :