MfGames Javascript Themes

Last night, I wasn't really feeling up to writing. Chapter 10 is giving me a bit of difficulty and I haven't muscled through it. Mainly, I'm not sure of the emotional transition during the first scene with a lot of tension. It is one of those scenes where things go wrong in a lot of different ways at the same time and I'm struggling with how the character would struggle through them.

Instead of working on that, I decided to dredge up one of the projects on my to do list for a while. A Javascript template engine for websites. I've wanted to do this for a while because I work with a number of web application: Simple Machines Forum (SMF), DokuWiki, WordPress, Drupal, Mantis BTS. Every few years, I add or remove one as my interests and technology changes.

One of the frustrating things is the appearance of the site. Every single site has a different way of creating themes. Some are fairly simple (SMF) while others require massive changes across the board (Mantis BTS). Most are in-between in complexity. More importantly, it takes 4-5 days to convert a base theme into the application-specific theme.

I had this great idea. Model-View-Controller (MVC). Why have the server do all the skinning for a website theme? Just move all the processing down to the client. Make them work for it and maybe reduce the amount of bandwidth transferred. I started with the XSLT PI (the thing). That worked very badly. As in crashed web browsers.

Dejected, I set it aside for a year or so until I found out I could do XSLT via Javascript and it won't crash the browser. After a few iterations, I just broke it down to do Javascript to do the theme. That way, if someone wanted to use jQuery, Prototype, or XSLT, they could and I didn't have to change the base library.

MfGames Javascript Themes on GitHub

I worked on it after EDM went to sleep and actually managed to get a basic system up and running. It is just a debug theme which puts a colored box around all the H1 through H4 and paragraphs, but it works. The output from the server is fairly plain, one line for jQuery (which could be off the public CDNs) and two for the theme. I'm planning on getting it down to just one for the theme, which then adds in all the additional Javascript calls to add in dependencies, etc. It even writes out stylesheets it needs.

My intent is that the original file will basically be an HTML document with relatively little or no formatting. HTML 5 elements would be helpful since I could use Javascript to format those dynamically and they are symbolic.

Also, since everything is pretty much cachable, it means that a largish Javascript theme file would only be downloaded once for all the pages of the site instead of having all the formatting/skinning in every download.

I did write this in jQuery, but I'm using the jQuery() calls instead of $() so it will integrate with Prototype or anything else that uses $(). I also don't have it include jQuery, just in case someone has a different version they want to work it.

The next steps in rough order:

  1. Reduce the footprint to a single theme file (Easy)
  2. Allow for theme switching using cookies (Hard)
  3. Allow for cookie-base settings for things like font sizes (Moderate)
  4. Create a Javascript theme for (Moderate)
  5. Get it documented (Easy but tedious)
  6. Throw a license on it, probably MIT or the MS- version of MIT (Easy)
  7. Figure out where it breaks (Hard and I need help from others doing that)
  8. Create a Javascript theme for (Moderate)
  9. Create a DokuWiki theme that can use the JS themes (Moderate)
  10. Create a Wordpress theme that can use the JS themes (Hard)
  11. Create a SMF theme that can use the JS themes (Moderate)
  12. Create a Drupal theme that can use the JS themes (Hard)