docsifyjs / docsify

🃏 A magical documentation site generator.
https://docsify.js.org
MIT License
27.47k stars 5.67k forks source link

Include ‘Page title’ within search results #2475

Open paulhibbitts opened 2 months ago

paulhibbitts commented 2 months ago

Feature request

Problem or desire

When viewing the search results, the key context of which page a search match is found is not included. This often means one or more search result items need to be clicked to view this information to assess the suitability of the displayed match.

Proposal

In addition to relevant Header and match, include the page title (constructed from the first H1 header and if none then the filename of each match) You can see an example of this technique (and the value added by including Page title) on https://docsify-this.net/ by searching for ‘usability’ or ‘slides’ or ‘design’ through the link https://docsify-this.net/?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-multiple-page-course-site/main&homepage=home.md&sidebar=true&loadSidebar=_sidebar.md&name=CPT-363&hide-credits=true&browser-tab-title=CPT-363&search=true#/

Please note due to technical challenges I was not able to display the Page title first, then relevant header (I could only figure out how to display Page title under the existing related Header).

Without development constraints, I would have preferred to use this search result presentation:

Page Title (First H1 or if not Title Case filename, for example 'module-1.md' is transformed into 'Module 1')

Search result closest Header (as is now)

<search result text and nearby text if applicable, with search text highlighted> (as is now)

Implementation

Perhaps as a starting point similar to how Docsify-This.net presents search results, but with the Page title displayed first. As well, instead of a constructed Page title from the page filename perhaps the first H1 should be assumed as Page title (and not duplicated if also the relevant Header above found match). For additional reference, you can view my attempt at hacking the existing Search.js code to include a Page title using the page filename at https://github.com/hibbitts-design/docsify-this/blob/main/docs/assets/vendor/docsify/plugins/preview/search.js