Jekyll Tiles Theme

I have been using Jekyll for a while now and I really like it. I really appreciate that you can do just about anything you want with it.

I have been wanting to create a theme for it that fits my need of being able to have an active blog, but also having all my content easily accessible. And, if I go back and edit something it will still be pretty easy to find. This theme was born.

I like the idea of a cascading tile theme that would dump out all the content right on the main page, or if it’s over a certain amount (more than your usual blog) it would fill in dynamically as you scroll down.

Theme Screenshot

Roadmap / TODO:

  • Dynamic Scrolling - I want to get it so that it only loads 50 or so stories on the front page and then as you scroll down more populate in. This is totally doable and I just need to sort out the best way to do so. For now I have all my content dumping directly to the front page but this wont scale for very large sites.
  • Search Content - I need to get searching working again.. Previously I had been using googles site search bar and I might just implement that again on the left nav. Not sure, still pondering the way to do that. Again tough to do dynamic things on a static site but I’m confident I can come up with something =)
  • Static/Pinned Tiles - I want to be able to say “This post is always in the top right tile spot” or something to that nature. This will allow people to have advertisements or in mycase I want to put my latest youtube video there. This is difficult due to the dynamic nature that tiles are injected into the cascading array. We will first have to identify the top left / top right spots and place a tile there.. but what if the tile is wider than 1? What if there are more than one tiles marked with “topright” as the spot? etc.. So that’ll be fun.
  • Publish the theme - Once I have the above done I want to create a github repo of this theme so that others can use it. I’ll have to figure out how to pair down everything to just be the theme itself without any of my content, but rather with example content on how to use it.
  • Device Compatibility - While this theme works across all devices (by design) it does soo on smaller devices (phones, tablets) poorly. The main nav is an article block just like any other, but that becomes unwieldy when you’re down to only two or even one block. I need to ponder a good way to make it go away or be less intrusive on smaller devices. Phones are BAD right now.
  • Custom Index based on popularity - I’d like to give you a way to measure popularity of posts and allow you to sort the index by popularity. This will require some kind of metrics injection back into the posts themselves. Likely on a periodic basis.
  • Force 1x1 blocks - I think there needs to be a way to force the index pages to 1x1 through a button click on the page. Maybe an icon to allow for 1x1 or waterfall (whatever we are calling the default layout)
  • Kramdown MD Image Include - The way I have to inject images is unwieldy at best. I’d like to create an include that I can call to include images that will handling linking, fancybox, title, alt, classes, scaled or not, etc.. Right now it’s kinda painful and it seems like something that could be DRY’d up a bit and made better.
  • Fancybox images need icon - The clickable imbedded images (like the one above) need to have some kind of overlay icon bottom left or something that indicates you can click this image to enlarge it.
  • AD Blocks - Some sites will want the ability to have ads on index pages randomly injected above the fold and/or anywhere. This will require the ability to know where “above the fold” is, as well as a completely different post type that doesn’t actually output any content and is rather a link at the tile level. This will take some considering.

Testing:

  • Tag/Category Announcement - When you go to a specific tag or category index, it doesn’t display that anywhere. There needs to be a notification somewhere on the site that you are viewing X thing.. I’ll ponder the best way to do this.
    • This is technically done but not sure I like the implementation. Going to ponder it.

Comments