Introducing Jack and a New Dark Theme


This website is generated by Jekyll, the static site generator. For compiling assets (mainly Javascript and stylsheet files), I’ve been using Sprockets through  Jekyll Assets gem. Although recently, and after I had updated the gems in Jekyll’s Gemfile, a new update for Jekyll asset was pushed. It appears they decided to change their entire interface. This rendered my whole project unusable and I needed to change every call to Jekyll Assets new interface in order to fix it.

At this point, I wanted to fix the blog so I can add new posts (fingers crossed) and I was learning some new technologies in the Javascript world. I’ve been using Webpack in my Rails apps, Rails 5 in particular. I decided I will use Webpack in my Jekyll project to compile and build all the frontend assets. At first, I looked for some existing Jekyll projects that use Webpack but almost all of them are outdated since the Javascript mantra, it seems, is to move fast and update even faster.

I ended up starting a new Jekyll project and set it up with Webpack. In addition to Babel to transpile ES6 code to ES5, I used PostCSS for the stylesheets. And this is how Jack came out. Jack is a dark Jekyll theme already setup with Webpack, of course. It’s so simple in design that it could be used as a template for new Jekyll projects and tweaked as needed. However simple it is (and how bad I may be in design), its theme is mobile first and responsive, and dark!

This is how it looks:

Jack demo

You can find the source code on GitHub. You can also see a demo through this link

After I finished setting up Jack, I migrated all the new changes to my original blog. The migration was seamless with only a few small issues. Out of love for dark screens and because I always wanted to have a dark website, I also migrated the dark theme and made it toggleable. You can toggle the dark theme on and off using the button in the top navigation bar.

Dark theme toggle button

And this is how it looks when it’s toggled on:

Dark theme toggle btn on

That’s it for now. Thanks for reading!