👓 My New Posting Workflow | grant.codes

One thought on “👓 My New Posting Workflow | grant.codes”

1. 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:

   Reply

To respond to a post on this site using your own website, create your post making sure to include the (target) URL/permalink for my post in your response. Then enter the URL/permalink of your response in the (source) box and click the 'Ping me' button. Your response will appear (possibly after moderation) on my page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Learn More)