Add support for Google Custom Search Engine

[user414]

This is an extension to issue #1416 to implement
Google Custom Search Engine as a search provider.

[user414]

Thanks to the great structure of your theme and the relative ease of the google custom search we did an implementation that we are going to deploy and thought to share it upstream. Please let me know if you would like to see any modification for the merge. Thanks again for the great theme.

[mmistakes]

Thanks @user414. I had a quick look over the PR and don't see any issues prior to me testing it.

Do you happen to have a working example of it pushed somewhere to see how everything looks on a deployed site?

[user414]

@mmistakes Unfortunately not yet.

[mmistakes]

OK. I did a quick test and things look mostly good.

Under the "Look and Feel" section of CSE, if you use the default Overlay layout things appear broken. Search results overlay has z-index issues, masthead and footer appear above it and cut into the results.

Full Width and Results Only layouts both look pretty good.

Not sure if it's worth worrying about the "Overlay" layout and just make mention in the config documentation to use Full width or Results only layouts.

[user414]

@mmistakes Ok good idea. I'm not sure how well Full Width would work since that is meant for a search box/search result combo box provided by Google and we use the result only model. We tried with using the Google provide search box but it just did not fit as well with the rest of the theme.

As far as the comments did you mean adding it to the _config.yml, or in the proper documentation somewhere in doc like 05-configuration.md, or both?

As a side note while there was some instruction on how to restyle the results, as we thought the regular green/blue might be to big of a clash with the gray theme, we thought that when using the google minimalist look and feel theme in the CSE options it matches pretty well the color scheme and saw no need to import all the google style class inside.

[mmistakes]

I meant in the documentation...I can take care of that.

Full width works fine as does "results only". To my eye they look identical. I didn't try all of the look and feel layouts, but the one that definitely looks broken is "overlay".

I'm fine with leaving the styling alone as it seems all of that can be configured in CSE's look and feel section. This is my first experience using CSE on a site so not really sure what people expect from it. That was part of the reason I was dragging my feet adding the feature.

Adding something I don't use personally causes a clash when I start getting support requests about it.

[user414]

Adding something I don't use personally causes a clash when I start getting support requests about it.

I can definitely understand that, feel free to leave it as a PR if you think it's going to create support headache down the line. Anyway, it's fairly easy if someone just want to copy paste they can just hard code their engine id and put everything in search_form.html to minimize the update maintenance.

As a side note re-looking at the code I forgot to either namespace the javascript or change it to a less generic function name like googleCustomSearchExecute() instead of executeQuery() which could collide down the road with something else.