A Contact Sheet for your Website

I’m in the throes of a major redesign of the site of my comic book, Académie des Chasseurs de Primes. Like any of those redesign, it involves a lot of CSS whack-a-mole. Fine-tuning one page throws a second one slightly off another, and fixing that second one causes unforseen effects on a third one. And so on, and so bloody forth.

Generally, to discover those oopsies, I have to navigate the whole site. Bah, humbug. Wouldn’t it be much efficient to have a single document showing all of the site’s page? Something like a contact sheet for the website, if you will. Well, let’s see how hard that would be.

Step 1. Generate a sitemap

If we want to look at all our pages, we must have a listing of them. One of the sane ways of doing that is to have a sitemap for the website. Fortunately, as the ACP website uses Dancer, all I have to do is to add Dancer::Plugin::SiteMap to the application and, hop, self-generated sitemap. As a pleasant side-effect, I also have a sitemap to feed Google. Sweet.

Step 2. Read the links of the sitemap

In the code snippet, I actually went a step further and used Test::WWW::Mechanize. As I’m going to crawl the site, why not formulate the script as a test suite to that we can get our contact sheet and a health report on the whole thing? There’s no point in simply being awesome if we can be mega-awesome, right?

Step 5. Put the contact sheet together

Since I’m working on my Template::Caribou, I’m using it to generate the contact sheet. As Caribou is a work in progress, the following will not work out-of-the-box for you, but just for giggles, here’s what the template looks like: