Skip to main content

Raymii.org Logo (IEC resistor symbol)logo

Quis custodiet ipsos custodes?
Home | About | All pages | RSS Feed | Gopher

Site updates, new layout for overview pages

Published: 04-05-2018 | Author: Remy van Elst | Text only version of this article


Table of Contents


This site is generated with my self-written open source static site generator named ingsoc (named after 1984). I've updated the overview pages with a new layout so that items are sorted by their publishing date instead of alphabetically. I've also rewritten some internal logic regarding tags and categories. This article shows the difference before and after and includes some old screenshots of raymii.org

If you like this article, consider sponsoring me by trying out a Digital OceanVPS. With this link you'll get $100 credit for 60 days). (referral link)

Semantics

The software suite is named ingsoc, the actual site generator is namednewspeak.py. Read more on it here. Before the generator this was a PHPsite, but who needs a dynamic scripting language if all you do is host non-dynamic content.

ingsoc has the concept of categories. My site is divided into the followingcategories:

If I want I can add any number of categories. When I started twelve years agothe site it seemed that that division into categories was enough. But soon Iwanted to be able to have more options to categorize an article. A tutorialabout a VPN can be on Ubuntu or CentOS or IPSEC or OpenVPN and I wanted to beable to group similar articles. I did not want a million categories since thatwould not fit the target, an article can only have one category.

Tags to the rescue. I built in tags to the generator and created seperate RSSfeeds per tag and an overview page for each tag listing the articles per tag.Like categories, but way more.

Tags are cheap, the current site has 927 tags, v.s. 5 categories.

So why not ditch the categories all together? Well, they are used in the URL andit is good to have one 'main' category for an article to fall under. That is hasmultiple tags, is in my opinion, different. A tutorial is still a tutorial nomatter which OS it applies to.

The front page has a configurable number of items listed with a summary peritem. A year ago I added the 'everything' page, which houses all items sorted bydate. Looking at the statistics, both that page as well as the tag overviewpages are the most visited parts of the site next to the articles. I got somefeedback recently that the sorting was off and the person that emailed methought it was more logical to sort it by date. Which I agreed with

So off to the Python code it was.

Oh if you are wondering, this is how the code output looks during a deploy:

Before and after

Before, tag pages, category pages and the All Items page were three differentmethods in my pyhton code. Different looks and layouts, thus less simple tomaintain or change. Look at what they are now with the pictures below.

Tags

This is the old 'tag' view:

This is the new 'tag' view:

As you can see, the date is added and sorting is on that date now. If I want Ican later on easily add some javascript to make that table sortable ascending ordescending, but that is for a later time.

Categories

This is the old 'category' view:

This is the new 'category' view:

As you might notice, it looks very similar to a tag page. That is because it isa tag page, not a category page. I added the category as a tag to all pages, sothat the layout and code is the same. I removed the category view and made thoseinto redirects. Instead of two code paths, I now have only one.

Everything

This is the old 'everything' page:

This is the new 'everything' page:

Here again, you might notice it looks like a tag page as well. Again, it is. Isneakily add the all tag to all items and filter it out in the HTML. It isused here, and it saves me another code path. This way my python code is moresimple and more easy to maintain. This page before was already sorted on thedate, but it was not visible. It is now to have a better overview of thetimeframe.

Conclusion and old screenshots

By reducing the code paths it is both simpler for me to maintain and change thecode and the layout is the same in all three cases. Plus it was fun to go intomy code and add sorting with DateTime.

If you are wondering how this site has looked before, here are screenshots.

2010, PHP

The frontpage in 2010, when this was still PHP:

A news item:

A tutorial:

An overview page:

The links page, with a dynamic thumbnailer that also did borders and sitescreenshots (in PHP with gd):

2012, PHP

Still PHP, but a new layout. Notice the modern "Metro" look before Microsoft didit.

The frontpage:

An overview page:

An article:

I had a special text-only version of the articles for text based browsers andmobile phones:

2014, static site and themes

In 2014 the static site came around. I had cool dynamic CSS to create both adark and a light theme (like Solarized). The dark theme was removed late 2016.This layout and site is still mostly in use today.

The 'Dark' frontpage:

The regular frontpage:

A dark overview page:

A regular overview page:

A dark article:

A regular article:

Tags: blog, ingsoc, python, raymiiorg, site