So I have been working away on some new features on my site for quite a while now and it looks like everything is about ready.

Honestly I don't particularly enjoy writing long-form content, so it is kind of strange that I have really enjoyed working on this new functionality.

The Inspiration

I was rather inspired by the new block editor in WordPress (a.k.a. Gutenberg), there has been a lot of talk about it - with many varying opinions. But what I think can be almost universally agreed on is that an editor that is a bit more flexible than just a single rich text box leads to much more engaging content.

So with that in mind I set about first updating my own site to support long form articles in a much richer manner.

The Articles

Setting up an article view for my site was fairly straightforward. I wanted it to be about as simple as you could get.

So this view you are looking at is pretty close to the default post view with a few changes:

• No topography background (cool, but distracting when reading)
• Hidden navigation (minimalism ftw)
• The content is centered and a bit wider than normal.

After that I knew I wanted to support at least wide and full aligned content - much like WordPress, so I borrowed their .alignfull and .alignwide class names and added support for them on this view.

The Editor

Now here is the real challenge! I wanted a feature rich editor to run on the frontend of my site, and it turned out I was able to make an editor that has the potential to work for anyone with an indieweb site thanks to microformats.

The editor looks for the microformats .p-name and .e-content classes, and injects itself into those elements.

Core Features

Inline editing

You can load the editor on you own site and uses the styles of your website

Markdown Shortcuts

If you start a paragraph with ### and a space it will turn that block into a h3, if you start with a > you get a blockquote, etc.

Blocks

The editor has a fairly loose idea of blocks. They can be added using a / in a empty paragraph or some are automatically made when you drop a file into the editor. At the moment I have kept them fairly simple:

1. Image block
2. Audio block
3. Video block
4. Embed block

Alignment

Blocks can be wide or full aligned (if you have the right css styles)

Mentions

You can @mention IndieWeb people. Currently it is only people from the IndieWeb Directory, but in the future I'd like to make it work with users personal nickname caches.

Other Micropub Properties

I've enabled a decent set of other micropub properties in the sidebar.

The Future

Although the PostrChild extension is fairly usable right now, I think it is a long way from complete, I've had a bunch of ideas I'd like to at least look into:

• Using nickname caches for mentions
• Potentially more block types - a code snippet and raw html block would probably be useful
• Auto saving posts as drafts
• Maybe a UI to list posts or drafts via micropub queries
• Ability to create a new post / reply from anywhere, without first needing to visit your site
• Improve user on-boarding
• Fix some UX issues, like scrolling the cursor into view when at the bottom of the page and always having a blank paragraph available to type in.