Enable embedding with image links

app/assets/javascripts/application.js

@@ -18,10 +18,5 @@ $(function() {
 
   $('input[data-behavior=focus]:first').focus().select();
 
-  $('#embed-link').click(function(e) {
-    e.preventDefault();
-    $('.embed-box').slideDown('fast');
-  });
-
   $('[data-toggle="popover"]').popover({ html: true });
 });

app/assets/stylesheets/asciicasts.sass

@@ -79,24 +79,6 @@
       float: right
       margin-right: 10px
 
-  .embed-box
-    display: none
-    padding: 15px
-    background-color: #f7f7f7
-    border-bottom-left-radius: 3px
-    border-bottom-right-radius: 3px
-    border-left: 1px solid #ddd
-    border-right: 1px solid #ddd
-    border-bottom: 1px solid #ddd
-
-    input
-      width: 100%
-      border: 1px solid #ddd
-      font-family: monospace
-      font-size: 12px
-      margin-bottom: 5px
-      padding: 4px
-
   section.description
     padding: 0
     border-bottom: 1px solid #eee
@@ -110,3 +92,18 @@
 
       h2
         font-size: 20px
+
+  .embed-modal
+    max-width: 900px
+    width: initial
+
+    h2:first-child
+      margin-top: 0
+
+    input[type="text"]
+      width: 100%
+      border: 1px solid #ddd
+      font-family: Menlo, Monaco, Consolas, "Bitstream Vera Sans Mono", monospace
+      font-size: 12px
+      margin-bottom: 5px
+      padding: 6px

app/assets/stylesheets/base.sass

@@ -7,6 +7,12 @@ body
   background-color: $background-color
   padding-top: 42px
 
+  &.modal-open
+    margin-right: 0
+
+    .navbar-fixed-top
+      margin-right: 0
+
   .btn
     font-size: 15px
 

app/presenters/asciicast_page_presenter.rb

@@ -55,6 +55,18 @@ class AsciicastPagePresenter
     %(<script type="text/javascript" src="#{src}" id="#{id}" async></script>)
   end
 
+  def embed_html_link(routes)
+    img_src = routes.asciicast_url(asciicast, format: :png)
+    url = routes.asciicast_url(asciicast)
+    %(<a href="#{url}"><img src="#{img_src}"/></a>)
+  end
+
+  def embed_markdown_link(routes)
+    img_src = routes.asciicast_url(asciicast, format: :png)
+    url = routes.asciicast_url(asciicast)
+    "[![alt](#{img_src})](#{url})"
+  end
+
   def show_admin_dropdown?
     [show_edit_link?,
      show_delete_link?,

app/views/asciicasts/show.html.slim

@@ -61,15 +61,7 @@
             li
               span.glyphicon.glyphicon-link
               ' 
-              a href="#" id="embed-link" Embed
-
-  .container
-    .row
-      .col-md-6.col-md-offset-6
-        .embed-box.text-right
-          input[type="text" class="embed-script" value=page.embed_script(self) data-behavior="auto-select" readonly]
-          br
-          | See the #{link_to 'embedding docs', docs_path(:embedding)} for more options.
+              a href="#" id="embed-link" data-toggle="modal" data-target="#embed-modal" Embed
 
   - if page.show_description?
     section.odd.description
@@ -82,3 +74,28 @@
         .other-asciicasts
           h2 More by #{page.author_link}
           = render 'previews', asciicasts: page.other_asciicasts_by_author, per_row: 3
+
+  .modal.fade id="embed-modal" tabindex="-1" role="dialog"
+    .modal-dialog.embed-modal
+      .modal-content
+        .modal-header
+          button type="button" class="close" data-dismiss="modal"
+            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(self) 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
+            span HTML:
+            br
+            input[type="text" value=page.embed_html_link(self) data-behavior="auto-select" readonly]
+          p
+            span Markdown:
+            br
+            input[type="text" value=page.embed_markdown_link(self) data-behavior="auto-select" readonly]