From d6ddcf029dd9aa64621230a545e0968236862a9d Mon Sep 17 00:00:00 2001 From: Marcin Kulik Date: Tue, 31 Mar 2015 14:36:03 +0000 Subject: [PATCH] Update "Embedding" docs --- app/views/asciicasts/show.html.slim | 15 ++++--- app/views/docs/embedding.html.md | 67 +++++++++++++++++++++++------ 2 files changed, 62 insertions(+), 20 deletions(-) diff --git a/app/views/asciicasts/show.html.slim b/app/views/asciicasts/show.html.slim index 8049295..d2f9bb3 100644 --- a/app/views/asciicasts/show.html.slim +++ b/app/views/asciicasts/show.html.slim @@ -85,12 +85,6 @@ span × h4.modal-title id="myModalLabel" Embed this asciicast .modal-body - h2 Player - p Paste this script tag where you want the player to be displayed on your page: - p - input[type="text" value=page.embed_script data-behavior="auto-select" readonly] - p See the #{link_to 'embedding docs', docs_path(:embedding)} for additional options. - h2 Image link p Use snippets below to display a screenshot linking to this asciicast. Useful in places where scripts are not allowed (e.g. in a project's README file). p @@ -101,3 +95,12 @@ span Markdown: br input[type="text" value=page.embed_markdown_link data-behavior="auto-select" readonly] + + h2 Player + + p If you're embedding on your own page or on a site which permits script tags, + you can use the full player widget: + p + input[type="text" value=page.embed_script data-behavior="auto-select" readonly] + p Paste the above script tag where you want the player to be displayed on your page. + p See the #{link_to 'embedding docs', docs_path(:embedding)} for additional options. diff --git a/app/views/docs/embedding.html.md b/app/views/docs/embedding.html.md index 719f6a9..72dc795 100644 --- a/app/views/docs/embedding.html.md +++ b/app/views/docs/embedding.html.md @@ -1,13 +1,40 @@ <% content_for(:title, 'Embedding') %> -# Embedding the player +# Embedding -The asciicasts can easily be embedded on any HTML page. If you want -to put the recording in your blog post, in your project's documentation or -in your conference talk slides you can do it by copy-pasting the embed -script. +An asciicast can be easily embedded on any HTML page. If you want to put a +recording in a blog post, project's documentation or in a conference talk +slides, you can do it by copy-pasting one of the the embed scripts. In +addition, you can share it on your favorite social network thanks to +oEmbed/Open Graph/Twitter Card support. -You can find the embed script on the asciicast's page. It looks like this: +## Image link + +Embedding as an image link is useful in places where scripts are not allowed, +e.g. in a project's README file. + +You can get the embed snippets for a specific asciicast by clicking on "Embed" +link on asciicast page. + +See the example below for asciicast 14. + +HTML: + + + +Markdown: + + [![asciicast](https://asciinema.org/a/14.png)](https://asciinema.org/a/14) + +To start the playback automatically after opening linked asciicast page append +`?autoplay=1` to asciicast URL: + + + +## Player + +If you're embedding on your own page or on a site which permits script tags, +you can use the full player widget: @@ -18,17 +45,20 @@ at the following markup:

This is some other text.

-The player will show up as a `div` element with a class "asciicast" between -the two paragraphs. +The player is displayed between the two paragraphs, as a `div` element with +"asciicast" class. -## Customizing the player +You can get the player widget script for a specific asciicast by clicking on +"Embed" link on asciicast page. + +### Customizing the player The embed script supports several customization options. An option can be applied by adding it as a data-option-name="option-value" attribute to the script tag. -### speed +#### speed The `speed` option alters the playback speed. The default speed is 1 which means it plays at the unaltered, original speed. @@ -38,7 +68,7 @@ following script: -### size +#### size The `size` option alters the size of the terminal font. There are 3 available sizes: @@ -51,7 +81,7 @@ For example, to make the font big use the following script: -### theme +#### theme The `theme` option allows overriding a theme used for the terminal. It defaults to a theme set by the asciicast author (or to "tango" if not set @@ -65,7 +95,7 @@ For example, to use Solarized Dark theme use the following script: -### autoplay +#### autoplay The `autoplay` option allows for automatic playback start when the player loads. Accepted values: @@ -77,7 +107,7 @@ For example, to make the asciicast auto play use the following script: -### loop +#### loop The `loop` option allows for looping the playback. This option is usually combined with `autoplay` option. Accepted values: @@ -88,3 +118,12 @@ combined with `autoplay` option. Accepted values: For example, to make the asciicast play infinitely use the following script: + +## oEmbed / Open Graph / Twitter Card + +asciinema supports [oEmbed](http://oembed.com/), [Open Graph](http://ogp.me/) +and [Twitter Card](https://dev.twitter.com/cards/overview) protocols. When you +share an asciicast on Facebook, Twitter, Slack, Google+ or any other site which +supports one of these protocols, the asciicast will be presented in a rich +form (usually with a title, author, description and a thumbnail image), linking +to your recording on asciinema.org.