Stephen’s Statements A little bit of everything from Stephen Duncan Jr, a Software Developer in Portland, Oregon

Instead of working on the conversion of the blog to Webby, I spent much of the day playing with jQuery and JavaScript. A good portion was mostly wasted time attempting to make the loading of the syntax-highlighting scripts more dynamic. While this ultimately failed, it did get me to re-learn a lot of JavaScript and jQuery.

Rather than put that time completely to waste, I decided to prettify the archives section. Without JavaScript enabled, you get a linked list of links for each month of each year that I’ve published something. Now, with JavaScript, I transform that list of links into drop-downs for each year, where you can select the month within the year, and it will take you to the archive page for that month.

Now, for the code. First, on each blog page (via the template), I load my JavaScript file, and I load jQuery via Google AJAX Libraries API:

1
2
3
4
5
6
7
8
9
<script type="text/javascript" src="/js/main.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load('jquery', '1.3.2');

    google.setOnLoadCallback(function() {
            prettify_archives();
    });
</script>

This runs prettify_archives function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function prettify_archives() {
    var years = [];

    $("#archives > ul > li").each(function() {
        var year = new RegExp(/\s(\d{4})/).exec($(this).text())[1];

        if ($.inArray(year, years) == -1) {
            years.push(year);
        }
    });

    years.reverse();

    var html = ['<h4 style="margin:0;">Archives</h4>'];

    $(years).each(function() {
        html.push('<select style="width: 11em;" ' +
            'onchange="document.location.href=this.options[this.selectedIndex].value;">');
        html.push('<option selected="selected">' + this + '</option>');
        $("#archives > ul > li:contains('" + this + "') > a").each(function() {
            html.push('<option value="' +
                $(this).attr('href')
                + '">'
                + $(this).text()
                + '</option>');
        });

        html.push('</select><br />');
    });

    $('#archives > ul').replaceWith(html.join("\n"));
}

So, I stayed up way too late last night uploading version after version of this website. I updated the version of the syntax-highlighter I used on the one code sample I’ve posted. Nothing special there, but the fall-back when Javascript isn’t enabled is nicer, as it’s a pre-tag, instead of a text-area like before.

I fixed all the pages to have the extension .html instead of .shtml. The .shtml was leftover from when I used to use server-side-includes instead of a combination of Blogger templates & Webby layouts to handle common layout issues. Here’s the content of the .htaccess file I used to make sure old links are given a permanent (301) redirect to the new extension:

1
2
3
RewriteEngine On
RewriteBase /
RewriteRule ^(.*)\.shtml$ /$1.html [R=301,L]

During the process, I noticed that Blogger wasn’t producing an archive index page anymore. So I added archives to the sidebar for each blog. I made my css rules a bit more generic by making sidebar sections a class, instead of duplicating rules for different ids.

All of this took a bit longer than it should because any changes on the Blogger side required republishing the whole site (actually twice, once for the main blog, once for the politics blog). Whereas, for the non-blog content, I could run Webby locally, rsync it to my VirtualBox Ubuntu Server VM, and test it locally. So my next task is to figure out how to turn an export of this blog into Webby source files so that I can manage the whole process locally (and get my blog posts into version control as a bonus).