Grant Richmond (grant.codes)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 ra...
This is awesome Grant!
May have been a nice addition to add some links to the browser extensions (or maybe I missed them?) and make it more explicit that they’re publicly available. Can’t wait to try this out!
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 InspirationI 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 ArticlesSetting 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 EditorNow 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 FeaturesInline editingYou can load the editor on you own site and uses the styles of your websiteMarkdown ShortcutsIf 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.BlocksThe 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
AlignmentBlocks can be wide or full aligned (if you have the right css styles)MentionsYou 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 PropertiesI’ve enabled a decent set of other micropub properties in the sidebar.The FutureAlthough 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.
Syndicated copies: