[Plugins] for Are.na Canvas :D
For the past month or two I've been heavily using Are.na Canvas. Partly because I've started working on it again. I've been meaning turn the structure for Are.na canvas into a plugin system. The idea being that the core (dragging, panning, loading, mounting, state, transactions) become stable ground to build on top. And then you just write components that build on the context of the channel and individual blocks.
So here's some updates on progress I've made with the plugin system. The way I'm going about it is seeing what are my needs and then figuring out how a plugin could do this. Once I think through that, I can add that to the plugin surface. So right now the plugin surface, or as I call it -> the controller is very messy... but I think over time it will clean itself out. So here goes...
Render Cycle
The first thing to get absorbed into the plugin system was individual block renderers. I started off with... turning all the render blocks into a plugin. I made a repository (an array) for rendererers and whenever a block is being rendered it will check through the renderer repo and find the first one the matches the match statement.
Hooks
Wee wooo
Then I added hooks! added a hook for markdown:link.
if hook returns handled = true, then that can be used as the markdown link. this made the feature where — if there is a link to a block, it becomes a button that you can click and focus the block on canvas — be possible to be turned into a plugin!
How it works:
Preview blocks when there's an are.na block link
Next plugin I added: for when there is a link to an are.na block instead of making it a button, it should get the block and create an inline preview. Specifically added this cause this is how my feed is structured. Only text blocks get published and links to other media blocks get resolved and inlined.
Uses the same markdown:link hook
And then uses a new markdown:after-rendered hook to asynchronously fetch if needed and replace.
This is how it looks....
And then....
I added bunch of fun plugins!
NON DESTRUCTIVE PDF ANNOTATIONS!
Drag and drop for files!!!
jpeg, jpg, png, gif, mp3, mp4, and pdf
Subtitle / transcripts on video
Whenever there is a parseable srt content in the description show them as subtitles and also have the possibility to mount a transcript panel to scroll through and stuff
Video annotations
essentially just timestamps, but can copy text with timestamp when transcript is available
Group list layout
sticky
auto order
size based on first block