Beauty of Mathematical Curiousity

As I mentioned before, I like control. The next victim was the archive links. The most obvious way to do it in classic blogger is:

<ul>
  <BloggerArchives>
    <li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
  </BloggerArchives>
</ul>

My problem with this is simple - I can only get links to the archive pages - I can't actually have a complicated expandable list like the archive widget allows. So since my archives are set to monthly, all this gives me is a list of months. I could find no way to include the actual links in, or to add numbers indicating how many posts were in each archive. All I could do was use some basic javascript to reorder them. Ick.

My next attempt was with the <BloggerPreviousItems> tag.

<ul>
  <BloggerPreviousItems>
    <li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$><a></li>
  </BloggerPreviousItems>
</ul>

Sadly, it seems to me that the best use for this is some kind of "previous post" button. It really does not work for an archive section, as the contents of the list will depend on the page. From the main page, it works fine, but once you click on a single post, you can only see posts previous to that most. Moreover, there is no corresponding "NextItems" tag.

My next course of action was to revisit the javascript for the labels. That odd bit at the end was nagging at me. Surely I could learn something from <script type="text/javascript" src="http://www.blogger.com/feeds/USERID/blogs/BLOGID?alt=json-in-script&callback=listLabels" ></script>. Some googling and I discovered blogger feeds, which is what that link is. I discovered this, which is a great introduction to blog feeds, and provides some javascript which lets you investigate the layout of the feed, so that you know some very useful things:

• a) how to get the blog feed into a javascript object
• b) how to get that object into a javascript function
• c) where to find the useful components of that object ( guessing at a javascript object is tough, so avoiding it is worthwhile, to say the least.)

Knowing this, I was suddenly armed with the ability to make my own archive section, customized to my exact desires (with a bit of work, anyway).

With some trial and error, I constructed my personal archive (it's very basic, right now - in fact it fills the role of "proof of concept" better than being a final product). First, the javascript "archive" function:

function archive(json) {

  var posts = json.feed.entry;  // get the posts
  var sorted = new Array();

  for( var i=0; i < posts.length; i++) { // for each post
    if( sorted.length == 0 ) { 
      sorted[0] = posts[i]; 
    }
    else {
      for( var j=0; j < sorted.length; j++) { // compare to each post that has already been sorted
        // compare by date
        var sorteddate = datenumber(sorted[j].updated['$t'] );
        var postdate = datenumber( posts[i].updated['$t'] );

        if( sorteddate > postdate ) {
          var tmp = new Array();
          for( var k=0; k < j; k++ ) { tmp[tmp.length] = sorted[k]; }
          tmp[tmp.length] = posts[i]; //postdate;
          for( var k=j; k < sorted.length; k++) { tmp[tmp.length] = sorted[k]; }
          sorted = tmp;
          break;
        }

        if( j == sorted.length - 1) {
          sorted[sorted.length] = postdate;
        }
      } // end loop through sorted
    } // end else (if sorted not empty )
  } // end loop through posts

  document.write('<ul>');
  for( var i=0; i < sorted.length; i++) {
    document.write('<li><a href="'+sorted[i].link[4].href+'">'+sorted[i].title['$t']+'</a></li>');
  }

  document.write('</ul>');
}

Notice two things: the "datenumber" function and the "document.write". The "datenumber" function I wrote because I didn't know how to directly compare the dates provided by the feed. Rather than looking it up, I hacked together a function which would compare the dates as numbers.

function datenumber(date){
  var year = date.substring(0,4);
  var month = date.substring(5,7);
  var day = date.substring(8,10);
  return parseInt(year+month+day);
}

This function is pretty simple - it just grabs the substrings of the date for the year month and day, then makes a string such as 20090302 (march 2nd, 2009). Then this string is parsed into an integer, so since 20090301 is clearly a smaller number (march 1st, 2009), it will compare as smaller than the 2nd. As it is written, the order is in the order the posts were published (march 1st appears before march 2nd in the list). It's a simple change to swap the posts to show in reverse order.

The "document.write" part is even simpler - it just writes the text directly into the document (from where the function is called from). It's a lazy shortcut for finding the correct div and changing the tree of the document with "appendChild". One critical result is that the call to this function MUST be placed where the list is intended to appear, where the label list function can be called from anywhere in the document.

Finally, to actually include the archive list, the following must be placed where the archive is intended to appear:

<script src="http://BLOGURL/feeds/posts/default?alt=json-in-script&callback=archive"></script>

Notice also that this script call uses the URL of the blog, rather than the blog id. And callback is set to call the archive function. Now, with a little more work sorting and grouping the posts in the archive function, we could have a very complex archive link list. Note also, that the posts are only sorted by date, not time. This means that two posts in the same day will appear in the order they are in the feed (the order they were posted, I believe). A better date comparison would be needed for more fine-tuned sorting.

Labels: blog, classic blogger, feeds, html, javascript,

Comments