Inline editing on my own website
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.
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.
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.
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.
You can load the editor on you own site and uses the styles of your website
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.
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:
- Image block
- Audio block
- Video block
- Embed block
Blocks can be wide or full aligned (if you have the right css styles)
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.
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.
Looks like the updated backend for my site is up and running! I'm sure there is plenty of stuff that is broken but it's not looking too bad so far.
Just paid money for a font purely for programming. I guess I'm a professional now.
Making my annual (perhaps semi annual) pilgrimage to Dundee. What's happening?
Updated my inline micropub client a little. So now it includes a more subtle button in your browser rather than a floating button to create and edit posts.