How to recreate Github topic tags in Jekyll
31 January 2019 ยท

I am not going to lie, I take my design inspiration from everywhere. If I find an element I like, I will try and replicate it. This is where the Github tags come in, I use Github a lot mainly for my front end stuff and trickles of Python.

Github has a neat way of styling and showing off the repository and its topics as seen here

github topic tags


So I sent out to make the tags of my posts and projects just like those. After a bit of tinkering around with the inspector tool, I found the styling I needed which was the easy bit.

The hardest bit for me was to break out the tags from the YAML front matter tags: [dotfiles, macos, shell, bash]. Into separate elements, to do this I had to use some Liquid code to be able to loop through the list of tags and then break out each one separately.


I started with an if statement that ran if post.tags was greater than 0 if tags were present it would then run the for loop that sat inside the if block.



The for loop allowed me to cycle through each tag and create them as separate elements, the classes text-lower text-monospace are bootstrap classes to help me with text formatting. The rest of the styling was pretty straight foward as you can see from the following styles:

.project-tags, .post-tags {
    font-size: 0.875rem;
    color: #0366d6;
    background-color: #f1f8ff;
    border-radius: 3px;
    display: inline-block;
    margin: 0 .5em .5em 0;
    padding: .3em .9em;
    white-space: nowrap;
}