Dev411 Blog: Category hacks

Notable social bookmarking/networking for Typo

2006-09-02T12:20:00-05:00

Benjamin Gorlick asked for WP-Notable-style social bookmarking/networking links on the #typo IRC channel so I put one together in the form of a single view (template file). WP-Notable, by Cal Evans, displays a row of icons with links to social bookmarking/networking sites under your blog article allowing for easy posting tovarious social bookmarking sites.

All the icons used here are from the WP-Notable plugin and look like the following:

Without further ado, here are the 4 steps (optional 5th step) to get this on your Typo blog:

Step 1: Copy the _article_notable_v4.1.1.rhtml or _article_notable_v4.0.0.rhtml partial include file to your Typo install's app/views/articles/ directory and rename it _article_notable.rhtml.

I've put the code for this all in a single template file to keep the modification in a single place since I have a growing number of mods. There is an array of information for each site. Right now it will create this array each time it is included which may be several times on the homepage. This could be put into the config file or a helper so it gets instantiated only once but I left it in the template since it means updating fewer files and the HTML pages are cached so I don't think it's a big deal. It's also possible to create a notable_link method to generate each link instead of having it created in the template.

Step 2: Install the icons by extracting the png files from typo_notable.tgz into your /images/notable directory. This directory is ferenced in the _article_notable.rhtml file so edit that file if you wish to change the icon locations. The tarball also includes the rhtml file just for completeness.

Step 3: Add the following to index.rhtml file under the "Read more..." article_link line. This file is either in app/views/articles/ or your theme directory.

<%= render :partial=>"article_notable",:locals=>{:article=>article} %>

Step 4: Edit the read.rhtml file and add the following line under the where the article body is rendered. In Typo 4.1.1, place this line under the <%= html(@article) %> line and in Typo 4.0.0, place this line under the <%= @article.full_html %> line. The read.rhtml file is either in app/views/articles/ or your theme directory.

<%= render :partial=>"article_notable",:locals=>{:article=>@article} %>

Step 5: If you want to style the notable icons, there are some CSS classes used typo_notable_line,typo_notable and typo_notable_icon. These are easy to spot in the _article_notable.rhtml file.

So far I've only tested del.icio.us and digg and the links work since that's where I have accounts. Please let me know if any of the links don't work (or work) for you. Enjoy!

Update: Thanks to Benjamin Gorlick for comments to these instructions.

Scriptaculous article slider for Typo themes

2006-07-12T01:48:00-05:00

Several Typo themes have nice DHTML effects and I thought it would be useful to extract some of these for use in other themes. In particular I am interested in adding Modernist's DHTML Scriptaculous ScrollTo article slider to my modded Azure theme. You can see this in action at poocs.net which is currently running Modernist. This article covers the steps necessary to repurpose the DHTML article slider and involves templates, CSS and images. I've shown how Modernist does it and, where applicable, how I prefer to do it. It turns out to be pretty easy.

I've added this feature to my test system, however it's not here yet because I've decided to create a custom Dev411_Azure theme to handle the views (and controller/helper patches) for the growing number of mods I'm using rather than to continue manually hacking files under themes/azure and app. This should be here before long.

The things discussed here are the changes necessary to add the DHTML slider to a theme of your choice. For the files below the path part ... should be along the lines of "themes/#{mytheme}" but can be simply app if you don't mind losing your changes when the admin console is used to change themes.

I'll show where my preferences deviate from Modernist's implementation. My pet peeve is the use of the extra @ta instance varaible since it's unnecessary and the name isn't self-explanatory. I'll use each_with_index with article_index as the index name.

.../views/articles/index.rhtml: in order to know the which article is next, Modernist introduces a counter called @ta in the index.rhtml file. I'll probably name this something more intuitive like @article_index but here's the code from: themes/modernist/views/articles/index.rhtml

Modernist:
```
<% @ta=0 %>
<% for article in @articles -%>
  <%= render_partial "article", article %>
  <% @ta+=1 %>
<% end -%>
```
My preference:
```
<% @articles.each_with_index do |article,article_index| -%>
  <%= render :partial => "article",
             :object  => article,
             :locals  => { :article_index => article_index }
  %>
<% end -%>
```
- use each_with_index instead of creating an extra counter since the index is already available
- use render instead of render_partial just because the former was indicated as preferred on the #typo channel
- use self-explanatory variable names: article_index instead of ta
- I would actually prefer to send the article object to the render method as a local variable since that's what it seems to be and I don't see a reason to treat it differently.
```
:locals => {
    :article => article
    :article_index => article_index
}
```
  instead of as :object but I can't be sure that will always work since article is also the name of the template and there's some magic there.
.../views/articles/_article.rhtml: there are two pertinent changes in this file: (a) the Scriptaculous ScrollTo controls and (b) adding a DOM id to the article header that can be navigated to.
- ScrollTo controls: In the Modernist theme, the Scriptaculous controls are embedded directly in _article.rhtml as follows. Another option is to put it in a separate _article_flip.rhtml template include but I'm not sure if this will be automatically copied in by Typo's theme admin manager. In any event, the following should be added to the top of _article.rhtml either directly or as an include. Notice the innerHTML of the links below is a space. The links will be rendered as graphics once the CSS is enabled.
  
  Modernist:
```
<div class="flip">
<a href="#header" onclick="new Effect.ScrollTo('header'); 
  return false" class="flip-top"
  title="Scroll to the top"> </a>
<% if @ta < (@articles.size-1) %>
<a href="#post-<%= @ta+1 %>"
  onclick="new Effect.ScrollTo('post-<%= @ta+1 %>');
  return false" class="flip-next"
  title="Scroll to the next post"> </a>
<% end %>
<a href="#menu" onclick="new Effect.ScrollTo('menu');
  return false" class="flip-menu"
  title="Scroll to the menu"> </a>
</div>
```
  The Modernist theme places the menu at the bottom of the page so having a control go to menu makes sense. For a more traditional theme like Azure, I added a <div id="bottom"> around <p id="pagination" to indicate the bottom and changed the last link above accordingly.
  
  My preference:
  - Change the @ta references to article_index as above
- article anchor: The next change is to add a DOM id with the article index to each article's title:
  
  Modernist:
```
<h3 id="post-<%= @ta %>">
  <%= article_link article.title, article %>
  <%= author_link(article) %>
```
  My preference:
```
<h3 id="post-<%= article_index %>">
```

CSS: Copy the CSS definitions that begin with .flip to one of your CSS files:

.flip {
        float: left;
        position: absolute;
        opacity: 0.9;
        margin: 0 0 0 -65px;
}

.flip a {
        display: block;
        width: 25px;
        height: 16px;
        padding: 4px;
        background-position: center center;
        background-repeat: no-repeat;
}

.flip-menu { background-image:
  url('/images/theme/flip-bottom-0.gif'); }
.flip-next { background-image:
  url('/images/theme/flip-down-0.gif'); }
.flip-top { background-image:
  url('/images/theme/flip-top-0.gif'); }
.flip-comments { background-image:
  url('/images/theme/flip-comments-0.gif'); }
.flip-post { background-image:
  url('/images/theme/flip-post-0.gif'); }
.flip-menu:hover { background-image:
  url('/images/theme/flip-bottom-1.gif'); }
.flip-next:hover { background-image:
  url('/images/theme/flip-down-1.gif'); }
.flip-top:hover { background-image:
  url('/images/theme/flip-top-1.gif'); }
.flip-comments:hover { background-image:
  url('/images/theme/flip-comments-1.gif'); }
.flip-post:hover { background-image:
  url('/images/theme/flip-post-1.gif'); }

control images: the last step is to copy the control images to the right location. These are the flip-post-[01].gif images referenced in the CSS. Copy these to the correct directory.

That's it, you should be able to get up and running.

Moving Day - Blogger to Typo

2006-07-02T21:37:00-05:00

I've been experimenting with Typo at the new Dev411 blog primarily to get around the serious performance problems I (and many others) have experienced on Blogger. I know they are working on this and I hope they get it under control soon, however I didn't want to wait for something that may or may not happen so I've moved everything over to http://www.dev411.com/blog/. Typo has some nice features include categories/tags and Live Search which shows you search results as you type. Of course, I may switch back to Blogger (or to another engine) at some point but I'm hoping I won't have to change again.

I'm running 2.6.0 which is the current stable version according to the website though many people are running code directly from the SVN trunk. I'll probably wait for 4.0 before upgrading which I've heard should be coming out soon. In the mean time I've made some changes from the default configuration:

added table of contents to pages with multiple articles (index, category/tag, archives and search) described previously.
renamed categories to tags. The trunk supports both categories and tags but 2.6.0 only has categories. I simply renamed categories to tags by editing routes.rb and content.rhtml for the category plugin. When 4.0 comes out, I'll use the separate categories and tags and the tag uris will stay the same.
moved categories/tags from bottom of each post to top by editing articles_helper.rb and templates.
removed articles from uri by editing routes.rb.
added number of comments to Live Search AJAX results by editing views/live/search.rhtml.
added blog name to HTML title for individual article pages by editing articles_controller.rb.
added Blog Roll sidebar which is just a copy of the static sidebar plugin. It would be nice if you could use the same static plugin multiple times but copy/rename is easy enough.

Features I'd like to add:

Navigation breadcrumbs
More specific HTML page titles
The anchor slider from the Modernist theme
A logarithmic tag cloud; the trunk version is linear
Ability to categorize tags similar to del.icio.us tag bundles; this is supposed to be doable now with acts_as_taggable
A tag list that also has links to tags you use at del.icio.us and possibly other places

Adding a TOC to Typo

2006-06-26T16:37:00-05:00

I've been using MediaWiki for a while and wanted its ability to auto-generate Table of contents for pages with multiple articles such as the homepage and the category pages. Typo is a Ruby on Rails app so you'll need to be somewhat familiar with it to make enhancments. I have this running on Typo 4.1.1, 4.0.0 r1188 and 2.6.0.

I came up with the following but it's still in the early stages:

Add name attribute to article links: We want to add the HTML name attribute to the article links so we can anchor to them. To do this, edit the app/helpers/application_helper.rb file and modify the appropriate method shown below with the changes in highlighted.

For Typo 4.1.1:

def link_to_permalink(item, title, anchor=nil, name=nil)
  anchor = "##{anchor}" if anchor
  name   = " name=\"#{name}\"" if name
  "<a href=\"#{item.permalink_url}#{anchor}\"#{name}>#{title}</a>"
end

For Typo 4.0.0:

def item_link(title, item, anchor=nil)
  if item.is_a?(Article) && anchor != 'comments'
  && anchor != 'trackbacks'
    link_to title, item.location(anchor), :name => item.id
  else
    link_to title, item.location(anchor)
  end
end

For Typo 2.6.0:

def article_link(title, article, anchor=nil)
  link_to title, article_url(article,true,anchor),
    :name => article.id
end

For Typo 4.1.1, you will also need to edit the app/views/articles/index.rhtml file and make the following modification:

<%= link_to_permalink article,article.title,nil,article.id %>

Add TOC template: I decided to create a separate template to handle the TOC. I used the following file name:

app/views/articles/_articles_toc.rhtml

which consists of the following (I didn't use link_to because the uri is only the article.id):
```
<div id="articles_toc"><p>Table of Contents</p>
  <ul>
  <% for article in @articles -%>
    <li>
      <a href="#<%= article.id %>">
        <%= article.title %>
      </a>
    </li>
  <% end -%>
  </ul>
</div>
```
Call the TOC template: To call the TOC template from index.rhtml, add the following at the top of app/views/articles/index.rhtml
```
<%= render_partial "articles_toc" %>
```
Style with CSS: You'll probably want to style the TOC using CSS. Since the TOC feature is a hack it may be easier to put it in a supplementary CSS file so it won't get overwritten when you switch themes.
TODO - Admin Console: To make this a full-fledged enhancement, there should be a toggle in the admin console to turn the TOC on and off. Right now this also shows the list for the index and category pages even when there's just one article on the page. It may be worthwhile to configure a mininum number of articles before the TOC is displayed.

I'll run this on this blog for now since I like having a quick way to see the list of articles on the page.

UPDATE 1: I added the number of comments to the existing TOC here. You can get the number of comments by using article.comments.length.

UPDATE 2: I also looked at turning this into a sidebar plugin by using the bundled 2.6.0 plugins as examples. It seems that the sidebars are components and have their own context so they may not be able to access @articles in the action context. I'll either have to query articles a second time, which I'm loathe to do, or write it in JS and then do a JS sidebar rendering. It would be nice if the sidebar shared or could access the primary context.

UPDATE 2.1: After looking at layouts/default.rhtml I think it may be possible to pass @articles to the sidebar by adding it to:

<%= render_component(:controller=>'sidebars/sidebar'

default.rhtml gets @content_for_layout, not @articles, so some testing is needed.

UPDATE 3: I was running the Lucid theme here before but I had problems with anchors in that articles and sidebar content above the selected anchor wouldn't render when an anchor was selected. I've switched back to Azure for now.

Python - First Impressions from Hacking PlanetPlanet

2006-06-13T21:52:00-05:00

Over the weekend I got to use Python for the first time to add channel categories to Planet which can be seen in action at Planet MVC. My first impressions of Python is that the resulting code looks very clean. The syntax was also easy to pick up primarily due to the excellent docs site and because it reminded me of JavaScript.

The first problem I ran into was using the regex object's re.match which definately does not follow the Python philosophy of "There should be one -- and preferably only one -- obvious way to do it" because there's more than one way and re.match is not obvious because it works different than other languages. Python's re.match automatically starts from the begining of the string unlike regex engines for other languages (grep|sed|awk|perl|ruby). This results in the following behavior:

# matches - pattern is at start of string
m = re.match('b', 'bc')

# does not match - pattern is not at start of string
m = re.match('b', 'abc')

# matches - add the .* to match any leading characters
# but .* isn't needed after '.*b' to match 'c'
m = re.match('.*b', 'abc')

# matches - second .* matches 'c' but isn't needed
m = re.match('.*b.*', 'abc')

I was sticking to re.match because I needed the MatchObject to capture groups but it didn't DWIW. After posting to a forum, I learned that I should use re.search instead which will match anywhere in the string. re.search also returns a MatchObject but I didn't expect this at first because search != match. I get the impression re.match and MatchObject were created first and re.search was added later. Perhaps the MatchObject should be called something generic, like ResultObject, in the docs. I'm sort of curious but when is re.match desired over re.search? It seems like re.match is useful only in a limited number of situations and then it's always easy to implement it with re.search.

The open issue for me is Python's dependency on indenting. Lately I've been using tabs exclusively for indentation because I like to see the tickmarks may editors show for tabs. This lets me quickly know what level I'm at. This python-list thread was titled Tab Wars and argued in favor of spaces over tabs. Planet is indented with spaces and that's what I used for my hacking. Given my preference for tabs, the more time I spend with Python the more likely I'll switch to tabs. Do I need to convert the entire script to tabs or can I mix tabs with spaces? What do people with a preference for tabs do with Python code that uses spaces?

I've been thinking about releasing my enhanced version of PlanetPlanet which allows one planet site to run multiple planets but now I'm thinking I want to do more enhancements to make it even more user friendly. Let me know how Planet MVC is working for you or if I can add any additional blogs. I've already found it pretty useful to find out about things I otherwise wouldn't have.

Here are some notes on getting Planet running.