Team blog

Changed syntax highlighting

I've been writing quite a lot of documentation lately, and my previous decision to require an HTML comment in order to get syntax highlighting of Ceylon code started to look like the wrong choice. Since the vast majority of the code blocks on the site are going to be Ceylon source, and since we're (almost?) always going to want that highlighted I've changed the rules:

  • Now all indented code blocks will be assumed to be Ceylon source code that requires syntax highlighting, unless indicated otherwise.
  • If the source code is not Ceylon, you can use a <!-- lang: foo --> comment (having setup the syntax highlighter and gsub transformer to do highlighting for the language foo).
  • If you don't want any highlighting at all use <!-- lang: none -->

Improved syntax highlighting and deep linking

A couple of improvements to the site generation have been added.

Syntax highlighting

We were previously using literal <pre> blocks in markdown pages so that we could set the CSS necessary for the syntax highlighter. The big downside of this was the need to HTML-escape the code within those <pre> blocks. Using an awestruct 'transformer' it's now possible to use the more natural markdown way of including example code (i.e. using indentation), which means you don't have to worry about using HTML entities for <, & etc.

By default <pre> blocks will not be subject to highlighting. To enable highlighting simply preceed the block with an HTML comment hinting at the language being included. For example

    class Foo() {
        void bar() {

        }
    }

It's also easy to have a page with syntax highlighting of multiple languages, by using an appropriate hint.

For those who are interested, the way this works is having a transformer perform a global gsub on the generated output using a suitable regular expression to pick out the code blocks generated by markdown.

Deep linking

Markdown by itself doesn't allow the author to put id attributes or anchors (<a name="...">) in the generated HTML, which is annoying if you want to link to a particular part of the page. You can of course put <a name="..."> elements in yourself, but:

  • It clutters up the nice markdown with HTML.
  • It forces you to ensure the uniqueness of the ids you use.
  • It's tedious.

Using another transformer we now generate id attributes automatically for all <h*> and <p> elements. For headings we use the heading text (suitably munged into an XML NAME). For paragraphs we use the first few words (again suitable normalized, and also worrying about uniqueness). If an element already has an id then it's untouched. If there's a matching id (or name, since they share the same namespace), steps are taken to disambiguate the generated one.

The long and the short of this is that we can now easily and accurately link into the middle of documents. The caveat is that you should be aware that changing the first few words of a paragraph (or the text of a heading) is likely to break any links which point to it. To prevent such broken links you can always use an explicit <a name=""> at the relevant point.

Home page has a news section

The website home page now has an automatically filled news section.

When you want to advertize a news, add a file yyyy-mm-some-text.md to _data/news with the following structure

---
title: 'My exciting news'
date: 29 August, 2011
more_info_url: /my/url/with/more/details
effective_date: 20110829
---
Some exciting news today.

A typical example would be 2011-08-news-section.md

---
title: 'News section is up'
date: 29 August, 2011
more_info_url: /blog/2011-08-29-news-section/
effective_date: 20110829
---
The website news section is now up.

Note

I could have reused blog entries tagged #news but it turns out that the first 50 characters a not often useful. So I've decided to go for the explicit _data/news structure.

URLs for blogs are now sanitized

Author names and tags are now sanitized before creating the URL:

  • use lower cap
  • remove accents
  • replace spaces with dashes

For example Stéphane Épardaud is now pointing to /blog/authors/stephane-epardaud. Same goes for tags like Cliché or Do-It-Yourself.

How to add yourself as team member

Ceylon's website has a team member list.

Adding your bio and photo is simple. create a FirstnameLastname.md file under _data/team.

This file should contain your name, photo and level as metadata and your biography blurb in the content.

---
name: John Doe
photo: /images/team/JohnDoe.jpg
level: 1000   
---
John Doe does not work on Ceylon.

He is however the representative of [...]

John works for ACME Corp.

Photo

Your photo must be square. A file of 200px by 200px would be best. Place your photo under /images/team.

Level

In order to give proper credit I've introduced the notion of level. Le lower you are, the most important you are (like in SPECTRE).

  • level 1: that's founder and fearless leader
  • level 10: that's active team member with heavy involvement ( and me of course ;) )
  • level 100: casual contributors
  • level 1000: retired contributors

Seeing the result

Once you are satisfied, erase the generated site and run the generation rm -fR _site ; awestruct -d. Check it out on the team page.