Categorized Archived Blogs

I have finally managed to dedicate some time to complete a long thought feature in my website’s archived blogs page. Previously, it used to list all the blogs like below even though I had appropriate tags/categories on each blog:

Old archived blogs UI

Tag/Category in Blog

New archived blogs UI

With such a cluttered UI, even though I have a category and tag displayed on each blog, I wasn’t using that to categorize the blogs in any way whatsoever. Now, I wanted to change that.

Goals

In short, following was the scope of my changes in jekyll/liquid:

• Loop over all blog posts/categories/tags

• Save Categories in a set

• Save lowercase Tags in a set

• Sort Set

• Implement accordion

Since the website source is closed, I would refer to the original source by @Phlow in the feeling-responsive Jekyll Theme. For the scope of this blog, we would suggest changes to archive.html which deals with showing the list of all blogs in the form of a list and also gives a sample of accordion.

Flow

1. Loop over all blog posts/categories/tags:

   We have all blog posts avalable in site.posts, each of which has a categories (which is an array not a string). So, I used map. Similarly, we can loop over any object or nest the loops.

   {% assign postsCategories = "," | split: ',' %}
   {% assign all_categories = site.posts | map: "categories" %}
   {% for category in all_categories %}
        ...
        ...
   {% endfor %}
   {% assign postsTags = "," | split: ',' %}
   {% for post in site.posts %}
    {% for tag in post.tags %}
        ...
        ...
    {% endfor %}
   {% endfor %}

2. Save Categories/Tags in a set:

   We dont have a native support of a set in Liquid/Jekyll, so I simulated one using an unless array contains check before adding to array.

   {% unless postsCategories contains category %}
    {% assign postsCategories = postsCategories | push: category %}
   {% endunless %}

3. Save lowercase Tags in a set:

   Converting tags to lowercase was downright simple, just needed to add a downcase function.

   {% assign l_tag = tag | downcase %}
   {% unless postsTags contains l_tag %}
    {% assign postsTags = postsTags | push: l_tag %}
   {% endunless %}

4. Sort Set:

   Sorting the set was rather easy. Upon a quick search, I learnt that there’s a Jekyll function that does it!

   {% assign postsCategories = postsCategories | sort %}
   {% assign postsTags = postsTags | sort %}

5. Implement accordion:

   I already had an accordion sample to work with, thanks to Phlow. So, I just modified the existing Liquid script to support the change.

   <dl class="accordion" data-accordion="">
   {% assign counter = 1 %}
   {% for curr_tag in postsTags limit:1000 %}
   <dd class="accordion-navigation">
    <a href="#panel_tags_{{ counter }}"><strong>{{ curr_tag | upcase }}</strong></a>
    {% for post in site.posts limit:1000 %}
        {% assign l_tag = post.tags | join: ',' | downcase | split: ',' %}
        {% if (l_tag contains curr_tag) %}
           <div id="panel_tags_{{ counter }}" class="content">
                ...
                ...
           </div>
        {% endif %}
    {% endfor %}
    {% assign counter=counter | plus:1 %}
    
   {% endfor %}
   </dl>

</dl></xmp></pre>

I felt it was straightforward to implement but I struggled because there was no tools available to do a breakpoint attach. It would have really accelerated my development work. Without appropriate toolset, I only relied on print a variable and refresh everytime like below:

{{ some_variable_name }}
{% comment %}
To print on the chrome website as above
OR
To print on console use debug as below
{% endcomment %}
{{ some_variable_name | debug }}

For my demo, the source is live on my website vishwarajanand.com, quick sneak peek is below: