When I implemented dated URLs for the blog, I mentioned that I had a particular idea that I wanted to implement. This idea is simple enough – an easy, convenient way for a reader to find entries in the archives. The basics of the idea are explained, in Michael’s discussion on his recent redesign. He calls it a “Digging archive system”, for lack of a better term. Think of it as a “lite” version of Apple’s Finder, but for you weblog archives.
Since Michael explained what he was looking, I’ve been thinking about the problem a lot. It’s an incredibly cool/good idea. The trick is implementing it. The page shouldn’t reload as you dig through the archives, which excludes a purely server-side solution. That leaves XMLHttpRequest (ala Livesearch) or preloading all the data on the page when it loads.
As cool as XMLHttpRequest is, I can’t think of an efficient, graceful method of achieving the desired look ‘n’ feel (if anyone wants to show me a way, feel free!). Instead, I’ve been leaning towards a mixture of CSS and DOM to provide a solution
By using nested lists, we can build up a semantic structure of the archives. In my example it is structured by date, but I can also imagine things working for the standard section/category structure of a standard Textpattern site. Consider this (very) basic structure:
ul> elements, otherwise they are left alone. Graceful degredation is good. In the same vein, the idea is to not have to use
onclick="..." attributes in our XHTML, but to use DOM to add the event listeners. Gotta keep the code clean!
I can imagine the system working like this:
- The latest year/month/posts are displayed by default
- Only years/months that have posts are listed.
- When a reader clicks on a month, the relevant posts are displayed and previously displayed posts are hidden
- When a reader clicks on a year, all the previously displayed months are hidden and the relevant months are displayed
- Clicking on a post title takes the reader to the entry.