Shazwazza

Articulate 4.3.0 with support for markdown code snippets and syntax highlighting

Thu, 23 Mar 2023 15:10:26 Z

I'm happy to announce that Articulate 4.3.0 is shipped and includes a great new feature that I've been wanting/needing:

The ability to create markdown based posts with support for GitHub style code fences/snippets and syntax highlighting for (almost) any coding language. See #341.

Now I can finally do away with using Live Writer for my blog and having to manually add css classes to the html for syntax highlighting... yes that's what I've been doing ‍♂️

Upgrading

Once you've updated to the 4.3.0 release, you'll probably need to change the Property Editor of the Articulate Markdown Data Type to be Articulate Markdown editor since it's most likely currently configured to the default/basic Umbraco markdown editor.

You'll then need to update your Post.cshtml theme file to include the correct Prism dependencies. For example, here's the update/diff to the VAPOR theme which adds these dependencies. It's just ensuring that the Prism stylesheet is added to the header and the Prism.js dependencies are appended to the Post.cshtml file.

Once that's all done, your set!

Creating markdown posts

If you didn't already know, Articulate has always had a browser based markdown editor to create posts. You can simply go to your Articulate root URL and go to the path: a-new to load the markdown editor. Previously this editor would require you to authenticate at the end of writing your post (if you weren't already authenticated) but now it requires authentication up-front.

Once it's loaded, it's just a text editor and you can use your all the normal markdown syntax. You can even upload or take photos with the editor

Of course you can just use the back office markdown editor to create or update posts too but I find for quickly getting a post written and published it's faster to use the /a-new editor... and it works on mobile.

Using code fences with syntax highlighting

GitHub's documentation shows how this works. The typical code fence is 3x back-ticks above and below your code snippet. If you want to add language specific syntax highlighting you can use 3x back-ticks + the language name/alias. For example, c# would be: ```cs (or c# or csharp) and JavaScript would be ```js. GitHub's implementation is different from what Articulate uses so it may not be a perfect 1:1 result but should be fairly close. Articulate is using a combination of:

Rendered Examples

There are just rendered examples based on the default prism styles. I wrote this blog post with the Articulate markdown editor so you can see the results.

Here's an example of a rendered csharp code fence:

/// <summary>
/// This is an example of the ArticulateComposer
/// </summary>
[RuntimeLevel(MinLevel = RuntimeLevel.Run)]
public class ArticulateComposer : IUserComposer
{
    public void Compose(Composition composition)
    {
        composition.RegisterUnique<ArticulateRoutes>();
        composition.RegisterUnique<ContentUrls>();
        composition.RegisterUnique<ArticulateDataInstaller>();
        composition.RegisterUnique<ArticulateTempFileSystem>(
            x => new ArticulateTempFileSystem("~/App_Data/Temp/Articulate"));

        // TODO: Register remaining services....
    }
}

Here's an example of a rendered js code fence:

(function () {
    'use strict';

    /**
     * An example of the articulateOptionsManagementController
     * @param {any} $scope
     * @param {any} $element
     * @param {any} $timeout
     */
    function articulateOptionsManagementController($scope, $element, $timeout) {

        var vm = this;
        vm.viewState = "list";
        vm.selectedGroup = null;
        
        // TODO: Fill in the rest....
    }

    var articulateOptionsMgmtComponent = {
        templateUrl: '../../App_Plugins/Articulate/BackOffice/PackageOptions/articulatemgmt.html',        
        controllerAs: 'vm',
        controller: articulateOptionsManagementController
    };

    angular.module("umbraco")
        .component('articulateOptionsMgmt', articulateOptionsMgmtComponent);
})();

Here's an example of a rendered ruby code fence:

class Dog  
  def initialize(breed, name)  
    # Instance variables  
    @breed = breed  
    @name = name  
  end  
  
  def bark  
    puts 'Ruff! Ruff!'  
  end  
  
  def display  
    puts "I am of #{@breed} breed and my name is #{@name}"  
  end  
end

Articulate 4.0.0 released for Umbraco version 8

Thu, 23 Mar 2023 15:09:25 Z

It’s finally out in the wild! Articulate 4.0.0 is a pretty huge release so here’s the rundown…

Installation

As a developer, my recommendation is to install packages with Nuget

PM > Install-Package Articulate -Version 4.0.0

If you install from Nuget you will not automatically get the Articulate data structures installed because Nuget can’t talk to your live website/database so once you’ve installed the package and run your site, head over to the “Settings” section and you’ll see an “Articulate” dashboard there, click on the “Articulate Data Installer” tile and you’ll get all the data structures and a demo blog installed.

Alternatively you can install it directly from the Umbraco back office by searching for “Articulate” in the Packages section, or you can download the zip from https://our.umbraco.com/packages/starter-kits/articulate/ and install that in the Umbraco back office. If you install this way all of the data structures will be automatically installed.

Upgrading

I have no official documentation or way of doing this right now . I’ve written up some instructions on the GitHub release here but essentially it’s going to require you to do some investigations and manual updates yourselves. There’s very little schema changes and only small amount of model changes so it shouldn’t be too painful. Good luck!

(note: I have yet to give it a try myself)

Support for Umbraco 8

I think it will come as no surprise that Articulate 4.0.0 is not compatible with any Umbraco v7 version. Articulate 4.0.0 requires a minimum of Umbraco 8.0.2. Moving forward I will only release more Articulate 3.x versions to support v7 based on community pull requests, my future efforts will be solely focused on 4.x and above for Umbraco 8+.

Theme, Features + Bug fixes

There are several nice bug fixes in this release including a few PR sent in by the community – THANK YOU!

As for features, this is really all about updating the Themes. Previously Articulate shipped with 6 themes and all of them had a vast range of different features which I never really liked so I spent some time enhancing all of the ones I wanted to keep and made them look a bit prettier too. I’ve removed my own “Shazwazza” theme since it was way outdated to my own site here, plus I don’t really want other people to have the exact same site as me ;) But since that was the most feature rich theme I had to upgrade other ones. I also removed the old ugly Edictum them… pretty sure nobody used that one anyways.

Here’s the theme breakdown (it’s documented too)

I’ve also updated the default installation data to contain more than one blog post and an author profile so folks can see a better representation of the blog features on install. And I updated the default images and styling so it has a theme (which is Coffee ☕) and is less quirky (no more bloody rabbit or horse face photos )

Here’s the breakdown of what they look like now…

VAPOR

This is the default theme installed, it is a very clean & simple theme. Originally created by Seth Lilly

Material

This is based of of Google's material design lite and is based off their their blog template.

Phantom

Original theme for Ghost can be found here: https://github.com/Bartinger/phantom/. A nice simple responsive theme.

Mini

The original author's site can be found here: http://www.thyu.org/www/ but unfortunately their demo site for the Ghost theme is down. The theme's repository is here https://github.com/thyu/minighost.

Hope you enjoy the updates!

Articulate 3.0.0 has finally arrived

Thu, 23 Mar 2023 15:08:40 Z

It’s taken me forever to get this release out, mostly due to lack of time, but it’s finally here! Huge thanks to many community members who helped with this release, here’s some shout outs – THANKS! (sorry many I don’t know real names)

Features features and more features

There’s a ton of new shiny things in this release. Here’s the milestone on GitHub for full details but I’ll run through some of the good ones here

Nuget

Yay finally! This has been asked for forever and I’ve finally done it. The blocking thing for this for me was that if you installed via Nuget you wouldn’t be able to install all of the demo data correctly. Package Migrations is a concept that would fix this but that hasn’t been integrated into the Umbraco core just yet. So in the meantime I’ve updated the Articulate dashboard to easily allow you to install the demo data. In fact this can be used to upgrade installations too and will put all the schema elements in sync like data types, document types, etc… with the latest release

Blog post feature image

Each blog post document now has a specific feature Image property and all of the default themes have been updated to use this image. Of course if you don’t want or need a feature image per post, you can easily just ignore it in your blog theme but these days every blog post has a feature image. This also give us the ability to have thumbnails for each blog post – which is now also a new feature. It gets even better though, both the Live Writer and the Markdown editor (the one you can use at the /a-new path) both support updating this feature image with the first image found in the post so you don’t have to worry about populating it afterwards – this is a toggle you can turn on/off

Edit Themes in the back office

Yes you can! You can even create them from the back office. There’s a new tree in the settings section that will allow you to duplicate an existing theme and then you can update, add and remove any theme files you want. It uses the great ACE editor that powers the template and script editors to edit the files.

Here’s creating a new theme:

Here’s creating a new theme file:

Date formatted blog post URLs

Normally the URLs in Articulate are formatted just by name,

for example: https://shazwazza.com/post/how-to-set-rewrite-method-on-queries-lazily-in-lucene/

but it’s been requested to format URLs with date parts such as: /blog/2014/10/17/my-article/

That can now be achieved with a simple configuration option on your Articulate root node:

Author pages

Each post now has a link to it’s author and if the theme allows it there’s an author listing page just like the categories/tags listing pages that show all posts by Author. Each author can also have their own bio page which is also just part of a theme.

There’s tons more so please have a look at the release notes for full details.

Articulate 1.0.5 released

Thu, 23 Mar 2023 15:08:15 Z

Good news!

Today Articulate 1.0.5 has been released which has quite a few issues fixed, here’s the gist:

#49 - Doesn't work with Umbraco 7.2
#18 - HasProperty on a partial view throws an error when ListModel is the current Model
#30 - Pager url issues in category pages when blog is not root
#32 - Rss feed url for tag/category breaks when the tag/category contains a hyphen
#39 - Update shazwazza theme to reflect shazwazza.com (feature)
#48 - Category/Tag list in Vapor and Shazwazza themes order posts ascending instead of descending
#41 - Articulate Pager and Search Results
#12 - Articulate MetaWeblog route and Contour
#42 - Package restore doesn't work
#38 - Routes need to be rebuilt when articulate root node url names are changed or when articulate root nodes are added
#37 - UrlHelperExtensions methods for categories/tags/search do not respect the configured values for these url names
#34 - Surface Controllers on Pages Using VirtualRouteHandler Don't Fire
#36 - Multiple articulate roots without domains assigned causes YSOD with routing

The GitHub release page is up and has the details and the package available for download: https://github.com/Shazwazza/Articulate/releases/tag/v1.0.5.1

The Our release page is also up with the package available for download: http://our.umbraco.org/projects/starter-kits/articulate

More good news

I’m sure you are already aware of this but if not it’s worth mentioning that Umbraco 7.2 has been released!! If you haven’t seen the details, it’s a huge and exciting release, full details are on the Umbraco blog

And Articulate 1.0.5 is compatible with Umbraco 7.2, happy days! :)

Articulate 1.0.4 released

Thu, 23 Mar 2023 15:08:15 Z

I’ve finally got around to releasing Articulate 1.0.4 today. Want to say a big thanks to all those who submitted pull requests, you guys rock! There’s a few nice fixes in this release but most importantly it fixes the issues with multi-tenancy when domains are assigned in Umbraco.

Here’s the release notes on GitHub with links to each issue fixed:

https://github.com/Shandem/Articulate/releases/tag/1.0.4

You can download the Umbraco package from there or from Our here:

http://our.umbraco.org/projects/starter-kits/articulate

Unfortunately I haven’t got around to getting this on Nuget yet – That’s because it has it’s own challenges since I’d like to perform a full Umbraco data install via Nuget… coming soon I hope :)

Enjoy!

This blog now powered by Articulate

Thu, 23 Mar 2023 15:08:14 Z

I’ve recently decided to build a new open source blog engine powered by Umbraco called Articulate. There’s a few reasons why i wanted to do this:

Since my full time job is an Umbraco core developer, I spend most of my time building Umbraco and get very little time for using Umbraco. I wanted to change this dilemma and really use Umbraco and utilize many of the features we’ve been creating and try to push some of it’s boundaries. For me this is a perfect way to find inspiration for new Umbraco features and enhancements.
I’ve wanted to move my blog away from BlogEngine.Net to Umbraco for quite some time (dogfooding) but I really needed to have every feature that I use in BlogEngine.Net available
I wanted to make the blog experience as simple as possible in Umbraco
I wanted to be able to write blog posts directly from my mobile phone easily using the web

I’ve got some documentation written and I’ll keep updating this over time but hopefully there’s enough there to get you started. Since Articulate is open source and hosted on GitHub, any community contributions are hugely welcomed :) Whether that’s core code additions, fixes, documentation, etc… any contribution is a big help.

Articulate templates are based on themes and I think it would be super awesome if people started creating their own themes and releasing them as their own packages or including them in the Articulate core for release. Creating themes is really easy and in fact a few of the themes included with Articulate are open source MIT licensed themes migrated over from the Ghost blogging platform (which is also very easy to do).

The first version of Articulate is out and can be downloaded either from the Umbraco package repository or from GitHub. There are a few minor bugs in this release that have been reported and fixed and I’ll have a newer version out this week.