Quoted-Printable

The hAtom specification has changed a bit since I implemented it in Scribbish. It was very much in draft-form at that time, and has now matured to verion 0.1. This morning I updated the typo version of Scribbish in SVN to use the new 0.1 API. I’ll work on the Mephisto version later on tonight. Now you can actually use an hAtom parser, like the Almost Universal Microformats Parser to extract content from a Scribbish-powered blog.

Here’s the parser’s output for QuotedPrintable.

Check out this pretty syntax highlighting! James Wilford was kind enough to contribute it to Scribbish, and I made the colors match TextMate’s All Hallow’s Eve theme.

Here is some random code (from HAML, actually) to show it off:

require File.dirname(__FILE__) + '/engine'

module Haml
  class Template
    def initialize(view)
      @view = view
    end

    def render(template, local_assigns={})
      assigns = @view.assigns.dup

      @view.instance_eval do
        assigns.each do |key,val|
          instance_variable_set "@#{key}", val
        end

        local_assigns.each do |key,val|
          class << self; self; end.send(:define_method, key) { val }
        end
      end

      Haml::Engine.new(template, :scope_object => @view).to_html
    end
  end
end

Syntax highlighting is available in the Scribbish svn repository. Instructions for checking out the code are on the download page.

Okay, so I’ve been busy. Too busy, actually; I haven’t had a lot of time for hacking on my open source projects, including the surprisingly popular Scribbish theme for typo.

In the time since I last posted here on this lowly blog, Scribbish has been added to the main typo distribution as one of the default themes. This makes me happy. But it also means that it’s slightly harder to maintain. Now, instead of just pushing changes whenever I feel like it, I have to make a patch against typo and submit it to the typo trac. This is probably why I’ve put off updating it for so long.

Being part of the default typo distribution means an increase in visibility, however, and the lack of maintenance was making me look bad. There are a lot of blogs running Scribbish (it’s allure, I think, stems from the fact that it’s dead simple), so the internet is now rife slightly borked versions. Fuck. I finally broke down and decided to fix it.

Alas, it has now been updated. Fixes include the flickr sidebar that liked to float right, detail pages that would produce invalid xhtml in the event of zero comments, comments and trackbacks that would display even if they weren’t published, and a few other odds and sods. The patches have been submitted and are patiently awaiting application.

Thanks to everyone who sent me suggestions and patches. Much appreciated.

I’ve also updated the Scribbish subversion repository with the latest patches; I’m not sure how much longer I’m going to maintain this branch. I might use svk to maintain both versions, but then again, I might not. For now, though, I’ll continue to maintain both, and the subversion version (that sounds funny: ‘subversion version’) will be up to date with the latest patches submitted to the typo version. This should make it easier for the folks who are so graciously porting it to other applications (word on the street is that a Mephisto version is in the works).

So, yeah. Scribbish is updated; I’ll post a notification when the patches have been applied. Then you can update typo and all will be right with the world. If you want to live dangerously, you can always delete the themes/scribbish directory from typo and use svn:externals to stay in sync with the development branch.

You can thank topfunky for alerting me to the fact that all my ‘pages’ on this blog were broken, including the link to Scribbish. This was the email I found in my inbox this morning:

People are frothing at the mouth and get a blank page when trying to download Scribbish. Is there a different page people should look for?

It seems that when I upgraded typo and ran the migrations, it reset all the STI type columns for pages to NULL, and just for good measure nullified the ‘name’ column as well.

Luckily my command-line SQL-fu is still intact after a year of ActiveRecord dependence and I was able to repair things in short order.

So, Scribbish is back on-line for your downloading pleasure. Sorry for the downtime.

Kenny Pitt just emailed me to say that he has ported Scribbish to WordPress. He’s based it on version 2.0, so it’s even newer than the copy I’m running here on this blog.

I recently had a little time to kill, so I set out to create the WordPress version myself and ScribbishWP was born. If you’re a WordPress user in search of an awesome theme then check it out, and give a shout out to Packagethief for a great visual design.

So, if you like the look of Scribbish but are a WordPress fan, check out ScribbishWP. Nice job, Kenny.

The Scribbish theme for typo has been updated. You can go ahead and download version 1.1

This update solves the following problems, all of which were graciously reported to me by users:

• Fixed broken links to typo home page (updated to typosphere.org)
• Fixed that in certain browsers, AJAX commenting wasn’t working properly
• Fixed that the config hash was being accessed directly causing errors with the latest version

Download Scribbish

Thanks to everyone who submitted feedback, and let me know if you find anything I may have missed.

Version 0.2 of the Scribbish theme for typo is available for download from its shiny new download page at http://quotedprintable.com/pages/scribbish

Note: Scribbish 0.2 works with the latest version of typo (r759) but not with the latest stable release (2.6.0). To get the latest version of typo using subversion, see http://typo.leetsoft.com/trac/wiki/DownloadCurrent

Update: as many have noticed, Scribbish breaks the live search for versions > 2.5.6. I am working on an updated theme that takes advantage of the newer features but in the meantime you can hack the file layouts/default.rhtml to make Scribbish work with 2.6.0.

Look for the call to observe_field in layouts/default.rhtml and replace it with this:

<%= observe_field "q",
      :frequency => 1,
      :url => { :controller => "live", :action => "search" },
      :loading => "Element.show('loading')",
      :complete => "Element.hide('loading')",
      :update => "results",
      :with => "'q=' + escape($F('q'))" -%>

It’s the last line that should make it compatible with the typo trunk, but will break compatibility with 2.5.6 :\ That’s what I get for not leaving it in a partial. Ugh, it looks ugly in a view.

/Jeff

Scribbish is a theme for typo. Its layout standardizes on a simple xhtml structure and styles are separated into individual files which are included in the correct order, making it easier to control the cascade and to figure out ‘what-goes-where’. Use it as-is, or copy it to make new themes.

Scribbish has its own page now

Start by copying Scribbish

The easiest way to make a typo theme is to copy an existing one and go to town, right? Well, Scribbish is a good theme to copy. It starts you off with a standard xhtml structure (valid, of course), stylesheets, and a css framework to keep them organized. With this in place, all you have to do is dive in and start designing.

The XHTML structure

The structure used by Scribbish is basic yet flexible enough that it shouldn’t require modification. I mean, that’s really the whole idea here—if you always use the same xhtml structure, you only ever need to modify the css to make new themes. Yes, this is very much a CSS Zen Garden approach. The code follows.

<html>
  ...
  <div id="container">
    <div id="header"></div>
    <div id="page">
      <div id="content"></div>
      <div id="sidebar"></div>
    </div>
    <div id="footer"></div>
  </div>
  ...
</html>

A CSS framework

The structure is complemented by a simple css framework: each main element (#header, #content, #sidebar, #footer) has a corresponding css file. Additionally, page layout is handled by the file layout.css, and everything is assembled by application.css, the only file you need to include in your html. The key benefit to this approach is common to any framework (even Rails): everything has a place.

The css included with Scribbish is light and terse. There are no unnecessary or redundant rules, just a set of sensible defaults. Print styles are also handled elegantly, without the need for a seperate, print.css file.

Anatomy of a theme

So, where does everything go? Here is the breakdown (courtesy of the unix program, Tree).

$ tree typo/themes/scribbish

typo/themes/scribbish/
|-- about.markdown
|-- images
|-- javascript
|-- layouts
|   `-- default.rhtml    #=> The xhtml structure
|-- preview.png
`-- stylesheets
    |-- application.css  #=> Imports files / orchestrates framework
    |-- layout.css       #=> Handles layout (dimensions/position)
    |-- header.css       #=> Rules for div#header
    |-- content.css      #=> Rules for div#content
    |-- sidebar.css      #=> Rules for div#sidbar
    |-- footer.css       #=> Rules for div#footer
    `-- local.css        #=> Imported last; overrides other rules

Application.css is the one to pay attention to here. Using the css import rule, it includes all the other stylesheets and arranges them in the correct order. It also defines global rules, such as the default font properties, default states for hyperlinks, and rules for different media types, such as print. Since this file does all the work, it’s the only that’s included by layouts/default.rhtml.

Layout.css is where you handle your dimensions, widths, heights and floats for any element. So, if you wanted to move, say, the sidebar to the right of the content, you’d do it here. To make things easier you can use the helper elements, div#container and div#page, to manipulate the entire document and the content+sidebar elements respectively. In the end, you’ll find that a pixel perfect layout is much easier to achieve when you’re only looking at a few rules in a single file that doesn’t even scroll in your editor.

Customizable live-search (aka, the Spinner)

One of the things about the default Azure layout is that it uses a Rails ‘partial’ to render the live-search spinner. (For the uninformed, the spinner is an animated GIF that indicates progress during the AJAX-enabled live-search). Unfortunately, using a partial means the live-search isn’t theme-able. Scribbish solves this by placing the contents of the live-search partial inside layout.rhtml (where it can be modified), and makes it easier to customize the spinner by controlling it via css.

Room for improvement

The principal drawback to using several css files is display speed. Specifically, display speed in the Rails development environment. Because the development environment doesn’t implement caching, and because typo uses Rails to process theme urls (adding the overhead of logging), it takes a few seconds longer to load up each page. Fortunately, stylesheets are cached by Rails and everything is quite snappy in the production environment.

Download and installation

Version 0.1 (November 6, 2005)

• Scribbish-0.1.tar.gz
• Scribbish-0.1.zip

Installation is as easy as unpacking Scribbish in the themes directory at the root of your typo application. This should leave you with a directory named ‘Scribbish’ on the same level as the default ‘Azure’ theme. If you’re using unix,

$ cd themes    
$ curl -O http://quotedprintable.com/files/scribbish-0.1.tar.gz
$ tar xzf scribbish-0.1.tar.gz

That’s all there is to it. The Scribbish theme will now show up in the typo back-end under the ‘Themes’ tab. All you have to do is activate it.

Feedback

Feedback is welcome and appreciated. I haven’t tested in as many browsers as I’d like to (no Windows machines in the house). If you find bugs, oddities, or have questions, please email me at packagethief[at]gmail.com.

This blog is running the young and as yet unspoiled typo blogging package. Just when it seems like the default theme, Azure, is poised to become the new Kubrick, Typo is having a theme contest to catalyze an explosion of new, unique, and free designs. This is unquestionably a Good Thing.

This theme is called Scribbish. Installing it is easy. Assuming you’re in your typo directory,

$ cd themes
$ curl -O http://smg.textdriven.com/scribbish.tar.gz
$ tar zxvf scribbish.tar.gz
$ rm scribbish.tar.gz

You should now be able to select “Scribbish” under the “Themes” tab in the typo backend.

So far I’ve tested it in Safari 2.01 and Firefox Beta 1.5 on OS X, and Firefox 1.0.7 on Ubuntu 5.10 Breezy Badger. Does it work in Internet Explorer on Windows? If so, consider it submitted.