Website UI

Added tags and categories based accordion in blogs

Released: Categorized Archived Blogs

Nicer UI to browse 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:

TECH
javascript website jekyll

Dialogue & Discussion