Overhaul current Pagefind UI search results design

[MoshiMoshiMochi]

Please confirm that you have searched existing issues in the repo

Yes, I have searched the existing issues

Any related issues?

#205, #2870

What is the area that this feature belongs to?

No response

Is your feature request related to a problem? Please describe.

Pagefind Default UI lacks structure on how they present their search results.

Current implementation of pagefind.

Algolia's styling on CS2103 website

From the 2 images above, I believe that Algolia's styling is notably more structured in how it represents the search results and subresults, notably on how they group the search results and subresults

Describe the solution you'd like

We should take inspiration from Algolia's design in how we structure our search results.

A simple example of which could be

----------------------------------
**Section A**
> Result 1
    > Sub Result 1
        Concise Excerpt 
    > Sub Result 2
        Concise Excerpt
> Result 2
    > Sub Result 1
        Concise Excerpt 
-----------------------------------
**Section Header B**
> Result 1
    > Sub Result 1
        Concise Excerpt 
    > Sub Result 2
        Concise Excerpt
----------------------------------
.. .other sections if applicable

Using our documentation as an example, using a search for skills as an example

We can format the results

-----------------------------------
**Developer Guide**
> Skills
    > List of Skills
        The following skills ...
    > Adding New Skills
        ... adding a new skill ...
> AI Use
    > Using External Resources
        ...
    > Using Skills
       ...
...
-----------------------------------
... other sections if applicable

We can look towards extracting the URLs of the results & sub results to help us with this formatting. This can be done by loading a result if which each result must be loaded individually.

Pagefind's documentation on loading a result

To load the data for a result, await the data function:

const pagefind = await import("/pagefind/pagefind.js");
const search = await pagefind.search("static");
const oneResult = await search.results[0].data();

Which will return an object with the following structure:

{
  /* ... other result keys ... */
  "url": "/url-of-the-page/",
  "excerpt": "A small snippet of the <mark>static</mark> content, with the search term(s) highlighted in &lt;mark&gt; elements.",
  "meta": {
    "title": "The title from the first h1 element on the page",
    "image": "/weka.png"
  },
  "sub_results": [
    {
        /* ... other sub_result keys ... */
        "title": "The title from the first h1 element on the page",
        "url": "/url-of-the-page/",
        "excerpt": "A small snippet of the <mark>static</mark> content, with the search term(s) highlighted in &lt;mark&gt; elements",
    },
    {
        /* ... other sub_result keys ... */
        "title": "Inner text of some heading",
        "url": "/url-of-the-page/#id-of-the-h2",
        "excerpt": "A snippet of the <mark>static</mark> content, scoped between this anchor and the next one",
    }
  ]
}

Note that excerpt will have HTML entities encoded before adding <mark> elements, so is safe to use as innerHTML. The content and meta keys are raw and unprocessed, so will need to be escaped by the user if necessary.

Pagefind returns all matching results from the search call. To load a “page” of results, you can run something like the following, to slice the first five result objects and load their data:

const pagefind = await import("/pagefind/pagefind.js");
const search = await pagefind.search("static");
const fiveResults = await Promise.all(search.results.slice(0, 5).map(r => r.data()));

More information on how to access the specific search results information can be found here

Additionally, we could look to take advantage of filters, allowing our users to sort for which sections they would like to be displayed. Here is an example of it in use within pagefind's documentation.

Describe alternatives you've considered

No response

Additional context

You can read more about how to the default excerpt length is controlled here: Pagefind UI configuration options
You can read more about loading a result & its subresults here: Loading a Result
You can read more about retrieving & calculating custom subresults here: Showing multiple results per page