Skip to content
This repository was archived by the owner on Apr 8, 2025. It is now read-only.

Use an inline html template for search results and search result customization #117

Open
agjohnson opened this issue Aug 9, 2022 · 6 comments
Open

Use an inline html template for search results and search result customization #117

agjohnson opened this issue Aug 9, 2022 · 6 comments
Labels
Improvement Minor improvement to code Needed: design decision A core team decision is required

Comments

@agjohnson
Copy link

In #116 Underscore was removed, and the pattern was shifted to native DOM manipulation.

One potential pattern to consider for future releases could be to use an HTML template inline in the output, as a Sphinx template. Effectively:

<html>
  <head>
    <script type="text/html" id="search-template">
      <div class="search__header">
        {{ _("Search results") }}
      <div class="outer__html">
        <div class="header">
          ...
        </div>
        ...
      </div>
    </script>
  </head>
</html>

This gives a template that can be targeted by our search JS, and manipulation of the template would happen with some data binding logic, or a more simple DOM search and replace.

The benefit here is that it is customizable at the Sphinx theme/template level, and can incorporate localization during the Sphinx build. Currently the search window will always be English. Localization is also possible in the JS now, but would have to be an additional step to be hooked into during building.
@agjohnson agjohnson added Improvement Minor improvement to code Needed: design decision A core team decision is required labels Aug 9, 2022
@stsewd
Copy link
Member

stsewd commented Aug 9, 2022

This may interfere with the goal of making this a standalone js lib #67.

But I'd be +1 on trying to create a small helper, we have a lot of nesting and could be confusing in the code... but I'd also love to simplify that #118.

@agjohnson
Copy link
Author

It shouldn't, this pattern would be usable as a standalone library as well. It would be a good way to provide more general support for templating the results, though not the only way to accomplish this.

@stsewd
Copy link
Member

stsewd commented Aug 9, 2022

@agjohnson but we won't be able to use the sphinx's template engine or do you mean something like a string template?

@agjohnson
Copy link
Author

Not a string template, but an isolated virtual DOM. That is, the default template might be an HTML file loaded through Webpack, and the customized template would be through a <script type="text/html"> block. Our manipulation of the template wouldn't be string operations though, but would be DOM operations. With a virtual DOM, it's even possible to do lightweight data binding and templating with something like Rivets.js.

In the case of Sphinx, but without playing with this, I can't say how we both expose this as a template and inject it in <head>. But hopefully the answer isn't a large hack.

@stsewd
Copy link
Member

stsewd commented Mar 6, 2023

The other day I found out that HTML has the template tag https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template, so we can use that instead of a script tag.

@agjohnson
Copy link
Author

Yup both work for this, the two options are rather comparable.

@stsewd stsewd mentioned this issue Mar 23, 2023
Merged
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Improvement Minor improvement to code Needed: design decision A core team decision is required
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@agjohnson @stsewd