Minimal-mistakes: search via jquery

[inetbiz]

• [x] This is a feature request.

---

Environment informations

N/A

Expected behavior

Output search results on a search page using jquery

[mmistakes]

This is something you can add with a plugin or the addition of a simple script and .json file.

See this issue as others have it working with the theme.

https://github.com/mmistakes/minimal-mistakes/issues/588

[nickgarlis]

I've got it working for my site. @mmistakes do you want me to pr ?

Here is what it looks like:

[ohadschn]

+1 from me, built-in search would be great. The other threads suggest using those plugins can be a hassle.

[igoratencompass]

+1 from me too it's really a PITA setting it up

[ohadschn]

One important note to make is that jekyll-lunr-js-search says "UNSUPPORTED" in its GH page, and the new kid on the block looks to be https://github.com/christian-fei/Simple-Jekyll-Search.

[mmistakes]

Any solution I add will likely still be a pain to setup as it require a search page to be created. Similar to the category/tag implementation.

One of my other themes has search built in and it's fairly fragile and not something I enjoy supporting which is why I've left it out of this theme.

[mmistakes]

Simple Jekyll Search is hardly new. I've used it in a few projects and it has the same flaw as most. The json you need to build to act as a search index is easy to break with malformed data.

[ohadschn]

How about just a UI placeholder for the search box then?

Getting the search script/engine running properly could probably be done without too many issues, but what really worries me is where and how to place the search box (and have it behave properly relative to all the other UI elements in different resolutions, on mobile, etc).

[mmistakes]

That worries me to as I don't have a good place to put it without completely gutting the masthead/navbar 😐

[ohadschn]

Could it perhaps be treated exactly like a navigation item (just like e.g. "About" and "Sample posts" in your demo site)?

[mmistakes]

That's probably how I'd handle it. Cue PRs and issues asking for it to be placed first/last in the list, always be visible, and various other custom placements 😂

[ohadschn]

Haha those pesky users :)

I really think it would add a lot of value even without all those features. I can handle the great responsibility of putting it first in navigation.yml, and if the screen is small enough that it gets inside the hamburger, so be it...

[mmistakes]

You might be able to, but the vast majority of users in academia using my theme as a simple way to spit out Markdown docs usually can't. Jekyll in general is a steep learning curve just because of all the baggage you need to be familiar with (Markdown, setting up a Ruby environment, HTML/CSS best practices, etc.)

For something I put out there for free expectations need to be kept in check. Bootstrap or a premium Wordpress theme this project is not.

[ohadschn]

Clearly understood. What if you just throw it in in the most basic way as an optional element in navigation.yml? It won't be there by default so people who aren't quick to override theme defaults and edit yml files won't have anything to complain about...

[igoratencompass]

How about the bottom of the left column?

[ohadschn]

@igoratencompass too hidden/remote IMHO. People are used to have the search box at the top (e.g. Google, or even the popular WP themes). Also, that's where the author pane is, seems out of place to be adjacent to the search box...

[igoratencompass]

@ohadschn it will always be visible to the users though even if they scroll down

[ohadschn]

@igoratencompass good point. Perhaps putting it above the author div could be a good idea too.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity.

If this is a bug and you can still reproduce this error on the master branch, please reply with any additional information you have about it in order to keep the issue open.

If this is a feature request, please consider whether it can be accomplished in another way. If it cannot, please elaborate on why it is core to this project and why you feel more than 80% of users would find this beneficial.

This issue will automatically be closed in 7 days if no further activity occurs. Thank you for all your contributions.

[ohadschn]

@mmistakes what do you want to do about this one? As I stated above IMHO this could be downgraded to a simple UI placeholder (as discussed above) where one would configure one's own search on one's own.

[mmistakes]

@ohadschn I don't think there's a way to do this without introducing even more complexity and configuration to the theme. Any sort of UI widget I built will have to be customized to fit whatever search method you go with.

And at that point it will defeat the purpose of me including it in the theme because there will be those who don't want to override an _include or _layout.

Show me some examples of Jekyll themes` that and I might re-consider:

• [ ] Have a search input in the masthead/header/nav bar etc.
• [ ] Allow for different search plugins/backends (Lunr.js plugin, Algolia, Jekyll simple search, Google Custom Search Engine, custom .json template, etc.)

Most themes I've seen who have search baked-in, either use one prescribed method (not ideal), or just link to a search.md page where they dump in their own search form that hooks into whatever plugin or .json method they're using.

[ohadschn]

What about just a Google site search box and be done with it? It's global and simple enough...

[mmistakes]

I have a feeling a Google site search box is the least desired option from the bunch... your site needs to be indexed well with the Googs, Google haters will piss on it, etc.

I'd lean towards a simple search using a .json template to build the index. But my experience rolling that into a theme isn't great and I end up fielding a lot of "my search is broken" issues because it's extremely easy to break and inject invalid JSON depending on your content.

[ohadschn]

What site today isn't indexed well with Google??? And I think Google haters are a very small minority (heck, I work for Microsoft and I just suggested it, but a Bing box would be cool too 😉).

Like you said before, this theme is for the average/common user. Presumably that user just wants a search box that works with no extra effort. More advanced users can fork / customize and deal with the JSON search issues (which I'm sure get much worse when you get to a certain size that the client simply can't handle).

[mmistakes]

You'd be surprised how many aren't indexed or indexed well. I get emails, tweets, GH issues all the time from those who've added a Google site search box and get no results thinking something is broken.

The issue is almost always Jekyll powered blog, hosted on GitHub Pages or with a new domain name. New sites aren't always crawled right away even if you setup Google Search Console and explaining the finer points around that and SEO is another area I don't really want dip into :wink:

[ohadschn]

haha I hear you!
IMHO you could just add some notice to the docs for enabling the search box, something like: "note it may take a few days for Google to index your site properly. To force a crawl, go to WebMaster tools".

[nickgarlis]

Hi guys,
I'm thinking of pull requesting my search implementation on the theme. I've been working on it locally and there are a few things to consider. @mmistakes should I send you a link to a gh-pages repository with it first ? You might want to change/add
a few things. I am thinking of adding an on/off switch in config.yml and maybe an option for a directory to search in ? Should I also make the output similar to archive-single.html ?

[mmistakes]

@nickgarlis I'm still not convinced I want to bake this into the theme. But if you have a demo and source of it publicly somewhere for me to look at I will. If I think it's something easily incorporated into the theme then a PR would be the next step.

If not, then at the least there's a working example for others to follow.

[nickgarlis]

I have a demo of it on an old fork of the theme . However, my source code is still kinda messy and not really what I have in mind for the theme... I'll have another one in the next couple of days.

[mmistakes]

@nickgarlis Looks to be on the right track. Your solution is what I was thinking... put the search form on a page versus trying to stuff it in the header.

I think if you abstract the search page into a new layout eg. _layouts/search.html that should cover the UI portion of the request. If a user wants search they create a new page search.md, give it layout: search, and/or place a link to it in their header... and call it a day.

[nickgarlis]

@mmistakes Yeah I don't think it would be a good idea to put it in the header since the results are live.
Alright, I will make a few adjustments in the code and then pull request with a demo.

[ohadschn]

IMHO having a separate dedicated search page is cool, but doesn't really replace a search bar that is just always there. I don't think I an come up with a single site that has a search page but no search bar...

[mmistakes]

@ohadschn Search bar will be an exclusive feature in the $90 MM Premium upgrade :wink:

[nickgarlis]

@mmistakes After making a few adjustments I finally pushed my source code into a new repository. Here is a demo . This searches in every collection.

[mmistakes]

@nickgarlis Good job, can't think of anything you missed. One small suggestion would be to flip the order of the search input and {{ content }} in the search.html. Just in case someone wanted to add some text to that page, might make sense for it to appear before the form.

{{ content }}

<input placeholder="Search..." type="search" id="search" class="search-input">
<div id="results"></div>

Other than that if you want to fire it off as a PR I'll work on merging it in and adding some documentation around it.