Putting an "about me" blurb at the bottom of each post

By the time you read this, each of the posts in this blog (and the recipe blog) will come with an "about me" blurb at the bottom of the page, in no particular order, Scott Hanselman has one:

As does Troy Hunt:

Surely that means that if I add one I'll be in good company? Either way, it feels like it's not an awful thing to do with my blog posts for a couple of reasons:

1. It'll add a nice separation between the blog post and the comment entry / display area
2. It'll make it more obvious who the posts are written by. I know, my name's at the top of the site, in the address bar, kinda hard to miss. All that said, it's good to make it obvious so someone flitting from page to page, tab to tab - you never know when someone remembering your name will come in handy

There were a couple of key considerations for "v1" of this banner blurb:

1. I need to be able to differentiate between what is displayed for technical blog posts and for recipe/cooking posts - what I've done when it comes to using Azure, or developing large scale payment processing solutions is going to be of very little interest to someone who's looking at a recipe, for the most part
2. I want to deploy this quickly, i.e. less than an hour of time to get it right. This means that it's not going to be a piece of Orchard code nirvana, I've still not got my head round how Orchard works enough to do this "properly" - of that I'm certain!
3. It doesn't have to be perfect, a heavily style="blah" encrusted piece of markup that I can tweak later will do the job, for now

Doing the quick and dirty

I'm using the PJS.Bootstrap theme (along with my custom theme that derives from it), so the first place I wanted to look was at the views that come with that to see if there's one that's responsible for rendering a blog post. So it's off to ~/Themes/PJS.Bootstrap/Views to look for a view that's responsible for rendering a BlogPost content item. Of course, I could have used the Shape Tracing module to work out what file was being used, but where's the fun in that! ;-)

Rather than edit this file, in-situ, I copied it into the same folder in my theme. As my theme derives from PJS.Bootstrap, and is the one that's applied to my site this means that everything just works (or certainly seems to!) with a minimum of fuss, allowing me to then tweak the view for Blog Posts. Without further ado, here's the code for the PJS.Bootstrap blog post view:

@using Orchard.Tags.ViewModels;

@{
    Layout.Title = Model.ContentItem.TitlePart.Title;

    var blogPost = Model.ContentItem;
}

<article id="[email protected]">
    <h1>@blogPost.TitlePart.Title</h1>
    <div class="metadata" style="margin-bottom: 10px;">
        <time class="clearfix" datetime="@blogPost.CommonPart.CreatedUtc.ToLocalTime().ToString("yyyy-MM-dd")">@blogPost.CommonPart.CreatedUtc.ToLocalTime().ToString("dddd, MMMM d, yyyy")</time>
        @if (Model.Tags.Items.Count > 0 && ((IEnumerable<ShowTagViewModel>)Model.Tags.Items[0].Tags).Any()) {
            @Display(Model.Tags)
        }
    </div>
    @Display(Model.Summary)
</article>
<hr />
@Display(Model.Footer)

By virtue of the wonders of Orchard, and how it composes output, there's actually not a massive amount of markup here, which means that it's pretty easy to decide where I'm going to add in the markup for my "about me" banner. Right between the end of the article and the horizontal rule. I'm not going to go into the ins and outs of the markup here as that's (a) entirely down to what you want to put, (b) theme dependent and (c) a very ugly mess right now, quite happily satisfying point 3 of my "Key Considerations". I'm satisfying point 2 by hacking this in quickly, without any regard to the "right" Orchard way of doing things, and also by working against the live instance of my site (tut tut!), using one page as a guinea-pig by enclosing the markup for the block in:

@if (@blogPost.TitlePart.Title == "Onion & Chilli Relish")
{
    // My about me markup goes here!
}

I'm commiting several sins here, working directly against production being the worst of them, but I refer you back to point 2!

Having decided where to drop my "about me" banner in, the deed is done and now all blog posts have this between the content and the comments section:

One thing I haven't done is worked out what I want to write at the bottom of recipe blog entries, so I'm going to set about making this only display for posts in this blog for now. I'll need the same/similar code - if I'm shoe-horning this in - when it comes to adding the banner to recipes anyway. Again, quick and dirty solution incoming,.. I swapped out the check for the title of the blog post, that I was using to restrict which post the banner showed up on for a check against the title of the blog the current post is associated with:

@if (blogPost.BlogPostPart.BlogPart.Name == "blog")
{
    // My about me markup goes here!
}

There's a lot wrong with this implementation, about the only thing that's right is the fact that it seems to work, but it has given me the desired outcome. It's also given me a fantastic example of technical debt, which I'm promising myself I'll pay down before it bites me.

Now aren't they famous last words!