Search Space in a different page

Developers
1

I’m putting this under developers because this has to do with a plug-in and not MB itself. Also, this is mostly addressed to @sod :slight_smile:

I love Search Space and I’ve been using it for a year (give or take). As I move things around the blog a bit, the search function would make sense if it’s added to my archive page.

I’m using TinyTheme and I have layouts/partials/microhook-archive-lead.html utilized, which allows me to add custom code and HTML to the otherwise automatic Archive page, which is still generated after the additions I include in that file.

So taking this into account, I’m guessing that if I add Search Space’s code to that microhook file, it should work in theory, but not sure how to approach it. I don’t have the know how to know where to start… Any leads?

I love Search Space and for the functions it provides, I don’t mind paying for this kind of flexibility if it’s more involved - just saying, as I have no idea how much work is required.

Thank @sod and anyone else who might know how to help!

2

Aww, thanks, that makes me happy knowing you enjoy my plug-in. Search Space is not designed to provide the functionality you’re asking for. It’s a good idea, though, so I’ll add it to my someday/maybe list.

That said, the following quickly thrown together, hacky, and totally unsupported code snippet might work if you paste it into the microhook-archive-lead.html file.

{{- $path := "search-space/documents.json" -}}
{{- $documents := resources.Get $path |  resources.ExecuteAsTemplate $path . -}}
{{- $documents_url := printf "%s?version=%s" $documents.Permalink ($documents.Content | md5) -}}

<form id="search-space-form" role="search">
  <p>
    <label for="q">Search posts and replies:</label>
    <input type="search" name="q" id="q" placeholder="micro monday" disabled list="search-space-suggestions" data-documents-url="{{ $documents_url }}" />
    <button disabled>Search</button>
  </p>

  <datalist id="search-space-suggestions"></datalist>
</form>

<p id="search-space-info">&nbsp;</p>

<noscript>
  <p>I'm sorry, but JavaScript is required for searching.</p>
</noscript>

<hr />

<div id="search-space-results">
  {{- $text := $.Site.Params.search_space_default_greeting -}}
  {{- $text | markdownify -}}
</div>

<script src="/search-space/minisearch.js"></script>
<script src="/search-space/application.js" type="module"></script>
3

Thanks for the quick reply…!

I copy pasted the code and placed it in layouts/partials/microhook-archive-lead.html. I got this error:

Theme error: Error building site: failed to render pages: render of “page” failed: execute of template failed: template: _default/list.archivehtml.html:5:4: executing “main” at : error calling partial: “layouts/partials/microhook-archive-lead.html:4:50”: execute of template failed: template: partials/microhook-archive-lead.html:4:50: executing “partials/microhook-archive-lead.html” at : error calling ExecuteAsTemplate: type not supported in Resource transformations

4

Hmm, not the most expressive error message. :thinking: Maybe an error like that would be thrown if the Search Space plug-in was not installed correctly. Could you try uninstalling the plug-in and install it again?

5

Hey! This seems to work well on my test blog!! I’m going to mess with it some more when I get the chance (tweak it to fit the theme a bit better mostly).

Is this code you wrote just for this, or is this more or less copy-paste of the relevant bit to add, without the, ummm… “plugin wrapper”? just wondering.

If this is the official way one should do do it, I’ll add it to my documentations :stuck_out_tongue:

6

Well, I will quote myself from before: “quickly thrown together, hacky, and totally unsupported code snippet”. In other words, it should definitely not be documented anywhere, use at your own risk etc. :wink:

7

Alright, I understand. I will explain it as such then. Thank you so much!!

8

Here’s an interesting problem…

Search Space doesn’t reset the page when you exit the search (click the little x). The search results persist, even if you refresh the page (the URL remains the same, with query included).

When you have a dedicated search page, this can be overlooked; when you’re done with the search, you go to a different page. But with the search included in the archive page, where the search results push down the rest of the archive page, resetting the search is more important.

The obvious solution from a UI perspective to me as a user, is to be able to clear the search with the little “x” that’s included, but if that’s too complicated, I’d expect refreshing the page to reset back the URL to the original one (without the query).

What do you think?

9

Have you also looked at @gregmorris’s Partial Search plugin?

10

Nope I haven’t. I am already working with Search Space, but I will check this one out as well :slight_smile:

11

The short explanation to why I’ve designed the plug-in this way is: because of usability and accessibility. And I think most designers will end up with similar choices. Try, for example, Kagi, DuckDuckGo, and Google and you will see that they work in the same way.

I definitely see your problem, though, and that is because Search Space is not designed to be embedded on the archive page. The hacky code snippet above is just that, a hack. :blush:

You could tweak the search form to take visitors to the dedicated Search Space page when searching. I think that will end up a more natural experience. You can accomplish that by changing this line:

<form id="search-space-form" role="search">

into this:

<form id="search-space-form" role="search" action="/search-space/">

Again, I do like the idea of having a small, embeddable, search form and created an issue for it on GitHub the other day. So there might be an easier way to do this in the future. Thanks for the idea, and for playing around with my plug-in. :smiling_face_with_three_hearts:

12

So this works, but also doesn’t… :sweat_smile:

With action="/search-space/", when I search for “test,” the URL does change from:
https://taonaw.com/archive/?q=test to: https://taonaw.com/search-space/?q=test but I stay in the same page (technically two different pages, but search-space reflects my archive page, so it looks the same)

I made sure popups are off for Safari and tried in Firefox, same result.

Since clicking on the “Archive and search” button in my navigation bar does take me back to original page (https://taonaw.com/archive/), would it be possible to include a simple link somewhere like this: <a href="https://taonaw.com/archive/">Reset</a> this page inside the plugin, for example, another Botton, or even a short line after the results?

I can include this link somewhere else, but since the results and the from is created dynamically from the plug in, I can’t make changes that will affect it in the template; the script creates the results without my link.

If all else fails, I will just include a “reset this page” link toward the next part of my page.

13

Hmm, weird, that’s not something I can replicate on my end. Can you add the action attribute back so I can investigate a bit?

14

Just did… I’m also including a gif here to show you what I mean just in case you can’t replicate it (it seems to force it to 500x500 here, so open the gif in another tab):

search_space

15

Thanks! From what I see, both in my own test and in your GIF above, one ends up on the Search Space page when searching and there’s no residue from the archive page on there. Just the search results.

Also, clearing the search box seems to work like I intend it to work: the search results will stay put. Again, that’s the design pattern I see other search engines implement as well.

A reset link is not something I’m going to add to my plug-in. At least not right now. But, as you’ve already mentioned, you can absolutely add a reset link yourself where you see fit. Maybe next to the search button?

<button>Search</button> <a href="https://taonaw.com/archive/">Reset</a>
16

I was trying to add a search button, but it didn’t “stick,” and now I finally understand why:

I’m manipulating the template I have in layouts/partials/microhook-archive-lead.html for this to work, which affects the /archive page. However, since I had

<form id="search-space-form" role="search" action="/search-space/">

in place, because what we were trying here, the button didn’t “stick” - the search was landing me on the duplicate /search-space page in place of the /archive one, where the changes were made.

For this to work in layouts/partials/microhook-archive-lead.html, I need to have the original code in:

<form id="search-space-form" role="search">

So Now the button sticks, and I can have a reset button.

I understand the thinking behind your design for Search Space, and that this is whole hacking-about. I’m a special case here :sweat_smile: