Content management is a real pain in the arse. Back in the good ol' days, it was relatively easy to manage a web page - especially when you had access to a shell account at your university. Despite having access the raw files for your web page, managing html through such fantastic editors as pico (and later nano), or the venerable vi was time consuming, and not maintainable over the long term. It was difficult to apply a site-wide style change (there were in the days before CSS was the new hotness), and you were beholden on server side parsing to include various shared document components. Amazingly, my early efforts at design are still accessible, even though I can't update anything on there.
Needing a more permanent solution to a content management system after I left uni, I started hacking together a photo, music and text information organisation system. I'd decided to base the entire backend on some XML, which could be either generated from a database-backed server application, or just read from the filesystem as static pages. A bit of perl-monkeying took the XML and converted it to the HTML which was spat out to the browser. After spending several weeks writing the XML-HTML converter and creating a CSS-styled presentation layer, I gave up before even getting to something that could manage the actual content. It was at this point of time that I realised that I probably wouldn't have CGI access on my web-host, and that all of my XML converting stuff would be close to useless. Luckily, I stumbled accross XSLT - which was used to replace the entire XML-HTML translation layer, and is still in use now.
With my XML to HTML conversion layer and CSS styling complete (collectively my
presentation layer), I needed a text and photo management layer. The music
functionality was ditched when I picked up my Powerbook, and started to use the
iTunes/mt-daapd combo for listening to and organising music. The photo management
layer used iPhoto to look after the photographs, and BetterHTMLExport to export
the photos to an XML page. By exporting the photo galleries as XML (in my custom
format), I could simply upload the exports from iPhoto and it would
I decided to go with Blogger as the text content management system, as it had enough functionality, and it was now owned by Google, who I figured weren't in the business of screwing me over. It was a simple matter of converting an XML template to include the tags from Blogger, which it would proceed to fill in. You can see the template which I use in Blogger below. The Blogger specific tags are in blue.
Things to do
- Make the base XML for all pages more compliant with an applicable standard.
- Use XMLHttpRequest to get pages from remote servers to allow text to be hosted elsewhere.
- Add RSS feeds.
- Integrate a comments system.
- Ditch XSLT layer and directly style the XML.
<?xml version="1.0"?> <?xml-stylesheet type="text/xml" href="/xsl/pages.xsl"?> <?xslt-base mode="http://"?> <page name="<$BlogPageTitle$>"> <div style="border: solid red 10px;"> <p>This page is an XML page. Your best bet to actually see this page in all it's dynamic glory is to use a mozilla-based browser to view it. You can get a Mozilla-based browser from <a href="http://mozilla.org">here</a>.</p> <p>Sorry to Safari users - I wish Safari had proper XSLT support. I've tried to make this page look a tiny bit better, but for now you are better off using Camino to view this</p> <p>Internet Explorer users should stop using Internet Explorer.</p> </div> <style type="text/css"> @import url(/css/no_xslt.css); </style> <navitems> <div class="nav_entry nav_history"><div class="nav_entry_header">Previously</div> <div class="nav_entry_body"> <BloggerPreviousItems> <a href="<$BlogItemPermalinkURL$>" title="<$BlogPreviousItemTitle$>"> <$BlogPreviousItemTitle$> </a><br /> </BloggerPreviousItems> </div> </div> <div class="nav_entry nav_history"><div class="nav_entry_header">Archives</div> <div class="nav_entry_body"> <BloggerArchives> <a href="<$BlogArchiveURL$>" title="Archives <$BlogArchiveName$>" ><$BlogArchiveName$></a><br/> </BloggerArchives> </div> </div> </navitems> <Blogger> <item title="<$BlogItemTitle$>" date="<$BlogItemDateTime$>"> <$BlogItemBody$> <div class="item_footer"> (<$BlogItemDateTime$>) hirenj - <a class="permalink" href="<$BlogItemPermaLinkURL$>">Permalink</a> </div> </item> </Blogger> </page>
<?xml version="1.0"?> <?xml-stylesheet type="text/xml" href="/xsl/pages.xsl"?> <?xslt-base mode="http://"?> <page title="[title]" nonavigation="1" nobanner="1" > <item title="[imageTitle]"> <titlelinks> <a href="[previousImagePageName]">Prev</a> <a href="[nextImagePageName]">Next</a> </titlelinks> <img src="../Images/[imageFileName]" width="[imageWidth]" height="[imageHeight]" border="0" alt="image" /> <p class="image_comment">[imageComment]</p> </item> </page>
<?xml version="1.0"?> <?xml-stylesheet type="text/xml" href="/xsl/photos.xsl"?> <?xslt-base mode="http://"?> <page title="[albumName]" pagenumber="[currentIndexPageNumber]" totalpages="[totalIndexPages]" > [each idxcellrowseach indexRows indexTable] [each idxcellcolseach indexColumn indexRows] <photo> <image> <thumb>Thumbs/[indexColumn.thumbFileName]</thumb> <zoom>Pages/[indexColumn.imagePageName]</zoom> </image> <date>[indexColumn.imageDate]</date> <title>[indexColumn.imageTitle]</title> <caption>[indexColumn.imageComment]</caption> </photo> [endeach idxcellcolseach] [endeach idxcellrowseach] </page>