Adding DuckDuckGo search

As my post count increase (since many posts are tagged under the 100DaysToOffload challenge), the archive is getting harder to sift through to find posts of interest. The tags might be helpful but I am usually careless about tagging it properly. Truth is, I don’t know how to tag most of my shitposts 😅️. Enter DuckDuckGo search.

Let a search engine handle the indexing of text. Sweet. But I have not made my site very search engine friendly either. I didn’t have a sitemap. Well, I used to have and removed it for some misguided reasons but I have enabled it once again. Hoping that the sitemap is generated along with this post. I will be submitting the sitemap to search engines after this post is published.

Adding a search box wasn’t difficult but styling it as per the blogs theme was. Who knew WebKit and Gecko engines don’t agree on how to style an input box? So what I have now is a compromise of some sort but it looks great in both kinds of browsers and also the light and dark modes. On w3m terminal browser however, the search box sits in between the navigation and the recent posts but its still usable and everything is readable. If anybody knows any CSS trick to make an element disappear in a terminal browser, please drop me an email or a toot.

DuckDuckGo provides a quick way to implement their search box but we can do better than that. I used this DuckDuckGo search box generator to create a form with various input text to pass along the parameters for formatting the search output. My form looks like this:

<form method="get" id="search" action="https://duckduckgo.com/">
<input type="hidden" name="sites" value="simbly.me"/>
<input type="hidden" name="kt" value="n"/>
<input name="q" placeholder="Search" aria-label="Search on DuckDuckGo"/>
<button type="reset" id="close">✖</button>
</form>

The close button ‘✖’ clears the search input with this handy CSS. No JavaScript!. The form is identified by #search and #close identifies the button.

#search:not(:valid) ~ #close {
  display: none
}

DuckDuckGo actually has a html search page but unfortunately, the search form doesn’t work with the html version. It doesn’t identify the ‘sites’ parameter and searches the whole world wide web instead. A possible workaround is to have the noScript extension installed which will block JavaScript and force DuckDuckGo to open the html version and perform the search correctly on the site passed as parameter.

Currently, the search results for my blog are a bit inconsistent because the search engines have indexed my old write.as blog and most of the links are broken. I hope to rectify that with the sitemap submission soon.

Day 88 - Join Me in #100DaysToOffload