DEV Community

loading...
Cover image for Add tab to search in your Gatsby blog

Add tab to search in your Gatsby blog

jorgearuv profile image Jorge Ruvalcaba Originally published at jorgeruvalcaba.dev on ใƒป2 min read

Tab to search demo gif


You can go to the blog main page of my blog to see the demo

This is a cool trick that I just learned about today that can help the UX of your blog.

Thereโ€™s a cool Chromium browser feature called Tab to Search, which lets you quickly search a site via a Chromium address bar (aka the Omnibox).

Here are the three quick steps to add it to your search-enabled Gatsby blog:

  1. Create a file named opensearch.xml in your static directory (src/static/opensearch.xml) and add the following:
<?xml version="1.0"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
  <ShortName>[Your Blog's Name]</ShortName>
  <Description>[Your Blog's Description]</Description>
  <Url type="text/html" method="get" template="https://[your-url]/blog/?search={searchTerms}"/>
</OpenSearchDescription>
Enter fullscreen mode Exit fullscreen mode

Make sure to add your preferred <ShortName> and <Description> text content. The <Url> template is the URL where the search is taking place. In our case, itโ€™s /blog/?search={searchTerms}, with {searchTerms} being the string the user types into the Omnibox. These tags are required for Chromium to add your site to the list of searchable sites and automatically enable this feature.

  1. Copy the default html.js file to your Gatsby site so we can modify the default HTML Gatsby file.
cp .cache/default-html.js src/html.js
Enter fullscreen mode Exit fullscreen mode
  1. In your newly created src/html.js file, add the following <link> tag:
<link
  type="application/opensearchdescription+xml"
  rel="search"
  href="opensearch.xml"
/>
Enter fullscreen mode Exit fullscreen mode

And that's it! With this change in place, youโ€™ll have this neat feature up and running in your blog ๐Ÿ˜Ž!

Discussion (0)

pic
Editor guide