grantcodes / postrchild-extension

An inline editor extension for your indieweb website

PostrChild Browser Extension

This is an experimental WebExtension that enables inline micropub publishing on your own website.

What does it do?

This extension allows you to publish and edit posts to your IndieWeb enabled website via micropub

Editing is done inline by looking for micropub classes on your site and loading a medium style editor.

Experimental features

As well as creating and editing posts the extension is also able to automatically synchronize your browser bookmarks with bookmarks on your website if you support micropub queries as discussed here

Installation

Firefox

https://addons.mozilla.org/en-US/firefox/addon/postrchild/

Chrome

https://chrome.google.com/webstore/detail/ecifafdialoohbgngelfbjplgbhiklpm

Build from souce

Clone this repo from https://github.com/grantcodes/postrchild-extension.git then run npm install and npm run build inside the root directory.

That should create a /build folder and a .zip file that you can install in your browser.

Usage

First you will need to go into the options of the extension and provide your domain to login with indieauth and obtain a micropub token.

After that when you browse to your own website you should see a button to add a new post, or if you are viewing a single post, a button to edit that post.

New Post Template

There are a number of options to add a new post template.

My personal favorite is to create a special new post page that you can visit on your site to autoload the editor. You probably want to no-index the page, but it doesn't need to be secure as the editor is only loaded in your browser, other people cannot post to your website. The template should follow the same rules as below but also add the postrchild-template classname to the h-entry and the extension will automatically load the new post editor on your site if you are logged in.

When creating a new inline post for you to edit, the extension tries to grab the first post on the page and use that as a template. But this can lead to some visual formatting issues.

So you have the option to include a "New Post Template" which will be injected and editor fields will be loaded into it.

It should have a container with a h-entry class, with a p-name class element and another element with a class of e-content.

For example I use something like this for my own site:

<article class="h-entry post card">
  <header><h1 class="p-name post__title"></h1></header>
  <div class="e-content"></div>
  <footer class=" post__footer">Being written now by Grant Richmond</footer>
</article>

Alignment

You can align certain items to a wide or full width if your website supports the styles.

You need to style the alignfull and alignwide classes. This should be built into WordPress themes with full gutenberg support.

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.

Mentions

You can @mention IndieWeb people.

postrchild-extension's Issues

Add option to create a new post from anywhere

If the user has a post template or manually enters a new post url there should be a button to open that page in a new tab and load the editor

I would also like to support likes and reposts etc somehow

Make sure mentions are not clickable in the editor

Video & Audio element support

Should be able to drag and drop as well as potentially a button

Instead of making the editor div inside the passed element, replace it and pass id, class and style attributes

Meaning removing the wrapping div - allowing styles to work better in the editor

Make alignment functionality a generic plugin

Also add the option to switch it off - perhaps automatically enabled by detecting the css classes.

Add blank paragraph after blocks so text can still be added there.

Prevent return on plain text editor

Some plain text editor fields shouldn't allow for the user to hit enter. E.g. Titles.

Should probably make a singleLine prop or something similar

@mentions

Should autofill based on the user nickname cache and perhaps fall back to the directory I made

Code block

New block type that generates pre>code html maybe with some special markup to denote the code language.

Support oembeds

Should be doable as a block in the editor

Sidebar text inputs are instantly unfocused

You can only type one letter at a time!

Reply support

Can use similar functionality to the "new post" button, but autofill the current url as the in-reply-to property

Finish improving autosuggestion control

Still a bit buggy...

Rotate portrait images

Dragging and dropping images into the editor can make them show up with the wrong orientation

Make micropub upload a reusable plugin

It's used on multiple blocks and is the same every time so it should be made reusable.

Slash commands

I would really love slash commands for adding blocks like gutenberg / ghost / notion

Automatic new post editor should only load if on authed site

Emoji shorthands

eg :thumbsup:

Add ctrl+enter publish shortcut

Multi level lists

Trying to make a list in a list currently leads to a lot of issues.

Add page actions for new and edit post

These used to exist but I removed them in favour of a full menu, but the menu simply isn't as efficient.

I think I'd like to add the page actions back as a one click alternative.

Close the auth tab automatically

Should close the postrchild tab once auth is completed instead of the alert message

Pasting media

Should be able to copy and paste photos into the editor. Maybe other file types

Don't sync bookmarklets

I think bookmarklets may contain secret keys and stuff so they probably shouldn't by synced.

It will be easy to ignore any bookmark starting with javascript:

Right click send to media endpoint

Would really love the option to right click on any photo (or perhaps other media) in the browser and have an option to automatically push it to my media endpoint.

Enable editor on all sites when in dev mode

Would be nice to be able to test it on other sites while in dev mode

Should probably delay serializing to html or do it via a function

Currently I serialize the editor state to html on every change but it might be a heavy operation to do on every keystroke

Use personal nickname caches to pull mention data, not generic directory

Firefox selection api not working

Seems to not pick up any sort of selection, so hover menu and autocomplete is all broken

Toggle list button should convert paragraphs to list items and vice versa