New Year, New Search

It's amazing to think how much you don't think about when it comes to your own blog. Once started, writing feels to be the priority. What do you write about? What do you explore? But once you get into the habit of writing, you get bitten by an altogether different bug. The tinkering kind. It infects you with questions of how – How will my blog look? How will my blog deal with archiving tags & categories? The urge might feel dormant at times, but that's only temporary. Once bitten, you cannot fight it.

I approached adding Search to my blog that way. At first I thought I was fine. A kludged together application did the trick. It called the Write.as API, grabbed all my posts, and...well that was the problem. It didn't grab all my posts. I capped the number of posts it retrieved to a couple pages worth. At the time I created it, that number made sense. My programming skills at the time, however, had little foresight to anticipate that I'd write more. I had not the patience to figure out how to edit the code in my cloud provider. Another approach would be needed but I didn't know what.

Enter a topic on the Write.as forum.

In many ways a forum can bring about the same happenstance that you find on Twitter. The quality of it feels different though. Even the serendipity has a context that cannot be replicated on social media. Anyways, someone brought up the idea of putting a DuckDuckGo search bar in your Write.as blog. Just add the iframe and you were golden. I replied to the topic mentioning that this was a step in the right direction.

But after responding to the topic, staircase wit got the best of me. I recalled how Micro.blog similarly incorporated DuckDuckGo in their search bar. They, however, had custom HTML and CSS that I preferred over DDG's default. This could certainly be added to a Write.as blog. So I did what anybody should do with staircase wit – channel it into something useful that can be easily shared.

This is how I recreated the DDG search bar for my blog.

First, I grabbed the HTML for the Micro.blog search form and made some changes to fit my blog, notably changing the search url to my blog's url and changing the font color of the results to fit my blog's colors.


<form method="get" id="search" action="https://duckduckgo.com/">
    <input type="hidden" name="sites" value="https://blog.cjeller.site/">
    <input type="hidden" name="k8" value="#444444">
    <input type="hidden" name="k9" value="#2988bc">
    <input type="hidden" name="kt" value="h">
    <input class="field" type="text" name="q" maxlength="255" placeholder="To search, type and hit Enter…">
    <input type="submit" value="Search" style="display: none;">
  </form>

Once I got this in an optimal place, I went into the Custom JavaScript of my blog and added a function that added it in the footer of each page. The only bother in this step is putting the above HTML on a single line. It doesn't render that way below, but it's what you'll need to do, lest the code editor gets fussy with you about errors.


var topP = document.createElement("p");
topP.innerHTML = '<hr><center><form method="get" id="search" action="https://duckduckgo.com/"><input type="hidden" name="sites" value="https://blog.cjeller.site/"><input type="hidden" name="k8" value="#444444"><input type="hidden" name="k9" value="#2988bc"><input type="hidden" name="kt" value="h"><input class="field" type="text" name="q" maxlength="255" placeholder="To search, type and hit Enter…"><input type="submit" value="Search" style="display: none;"></form></center>';
var cont = document.getElementById("wrapper");
if (cont !== null) {
    // Add to blog index and tag pages
    cont.appendChild(topP);
} else {
    // Add to individual blog post page
    cont = document.getElementById("post-body");
    cont.insertAdjacentHTML("afterend", topP.outerHTML);
}

Finally, I took the styling from the Micro.blog form and added it to my Custom CSS. This completed the look.


#search .field {
    width: 270px;
    height: 34px;
    font-size: 13px;
    font-weight: 400;
    padding-left: 12px;
    border: 2px solid #eee;
    margin-top: 20px;
    border-radius: 17px;
}

The great part about this solution is that, while the default's just fine, there's plenty of wiggle room to customize the HTML and CSS. It just takes a little tinkering to create something that will suit your preference.

And that's honestly what I want to do more of with my own blog. It's great to make those eccentric, personal solutions that nobody else can access, but I want to do more of the things that anyone can take and tinker with easily. If there's something I learned while being here, interesting things happen when you contribute to the blogging commons.