Would be fun and useful if posting links to http://asciinema.org actually embedded the “video” (for lack of a better word). The docs on embedding are here: Sharing & embedding - asciinema
4 Likes
Hmm, looks like their javascript will break if there are two copies of them on the page, to me…
1 Like
Ah, that’s too bad. Thanks for looking though.
Asciinema project lead here,
You can embed any number of asciicasts on a single web page without a problem.
The only potentially troublesome situation is when you embed the same asciicasts (the same id) multiple times on a page. That’s because at the moment the script looks for a place to insert new div by looking up script tag by DOM id. However, that’s an edge case which in practice doesn’t occur at all - who would want to embed the same thing twice?
I’m happy to help you guys sort it out (including improvements to the embed js on Asciinema’s side if necessary).
4 Likes
On a forum where people can quote previous posts? This sort of thing happens all the time.
5 Likes
Fair enough. Let me find a way to solve that then.
asciinema embed script is now updated with these issues in mind. You can now embed the same asciicast multiple times on the page without problems.
1 Like
Would be lovely if you could show us how we “install” this to our own Discourse installation and/or how people can embed asciinema-casts in their posts 
I don’t know much about Discourse but the general way of embedding is described on this page: Sharing & embedding - asciinema
In short, to embed asciicast with id 123 you insert <script type="text/javascript" src="https://asciinema.org/a/123.js" id="asciicast-123" async></script> in the markup where you want the player to show up. There are extra data-* attributes that can be added to the script tag to customize the player. They’re described on the page mentioned above.
There lies the problem I faced, Discourse removes most script tags automatically so the player won’t show up at all 
(This post includes an asciinema embed yet it doesn’t show up)
Well, the sanitization would look like this:
Discourse.Markdown.whiteListTag('script', 'type', 'text/javascript');
Discourse.Markdown.whiteListTag('script', 'src', /https:\/\/asciinema.org\/a\/\d+.js/);
Discourse.Markdown.whiteListTag('script', 'async');
Then you just need to write Ruby onebox code to generate that script tag.
2 Likes
Thanks, I will try and get an asciinema onebox up and going. Setting up ruby already was a pain though, eh
I’ve tried adding this, be wary that I’m a total newbie to Ruby though. I’d appreciate any comments!
1 Like
Sorry to bring up this old post. I spend last 4-5 hrs trying to embed asciinema within discourse - create plugin with whitelisted tags.
Discourse.Markdown.whiteListTag(‘script’, ‘type’, ‘text/javascript’);
Discourse.Markdown.whiteListTag(‘script’, ‘src’, /https://asciinema.org/a/\d+.js/);
Discourse.Markdown.whiteListTag(‘script’, ‘id’, ‘*’);
Discourse.Markdown.whiteListTag(‘script’, ‘async’);
I misunderstood something here and still unable to resolve this. Any one succeeded in embedding Asciinema ? Thanks for any help or pointers!
No progress in here? That’s a pitty!
Forum users should not be required to post the code to embed the asciicast, but should be required to post the link on a single line which in turn would be expended using onebox to the asciiicast-embed automatically. This is how it works for links to google maps, wikipedia, etc.
https://github.com/discourse/onebox/pull/335
FYI: asciinema also supports oEmbed and posting a link creates currently as well a onebox that offers a previewimage, the description text and links to the asciinema website. The pull request changes the behaviour to embed the interactive asciinema right in the discourse post.
4 Likes
Anyone gave it a try?
https://asciinema.org/a/13mx8ojuwulkye579zqmeszc2
Preview is working, but not the embed.
Code:
https://github.com/discourse/onebox/blob/master/lib/onebox/engine/asciinema_onebox.rb#L11
Looks like the script tag gets stripped.
@sickill, would it be possible to provide next to the asciinema embed using a script tag another, alternative mean using an iframe? This is how e.g. Google Maps are embedded.
The current situation is a broken onebox.
@rriemann What would be needed? Are you talking about a bare (no layout) page with the player that you would open in an iframe? If so, then asciinema.org itself uses one: https://asciinema.org/api/asciicasts/20055 (instead of “/a/” there’s “/api/asciicasts/”). It’s not really a public API atm but I could make it so if bare player page is what you need.
The thing with iframe and asciinema player is the following: every recording has different width/height (columns/rows) and the player doesn’t scale fonts down (because it would be unreadable), so in order for the whole terminal to be visible the iframe has to be resized after the player loads. So, to have the proper size (corresponding to the player inside), the page in iframe sends a message to parent page with exact width/height in pixels so the parent page can resize the iframe. See here: https://github.com/asciinema/asciinema.org/blob/7250aaca1cc739bf53de9c3e804dbe6a431b4ef2/app/views/api/asciicasts/show.html.slim#L11-L16
Let me know if this what could potentially be useful. If not we’ll find another way.