add desc, inline to mmm-embed

3 files changed, 41 insertions, 2 deletions

diff --git a/mmm/mmmfs/conversion.moon b/mmm/mmmfs/conversion.moon
index dc301eb..f6ca8c0 100644
--- a/mmm/mmmfs/conversion.moon
+++ b/mmm/mmmfs/conversion.moon
@@ -59,9 +59,12 @@ converts = {
 
           link_to path, text, fileder
 
-        html = html\gsub '<mmm%-embed%s+(.-)></mmm%-embed>', (attrs) ->
+        html = html\gsub '<mmm%-embed%s+(.-)>(.-)</mmm%-embed>', (attrs, desc) ->
           path, facet = '', ''
           opts = {}
+          if #desc != 0
+            opts.desc = desc
+
           while attrs and attrs != ''
             key, val, _attrs = attrs\match '^(%w+)="([^"]-)"%s*(.*)'
             if not key
@@ -74,6 +77,7 @@ converts = {
               when 'path' then path = val
               when 'facet' then facet = val
               when 'nolink' then opts.nolink = true
+              when 'inline' then opts.inline = true
               else warn "unkown attribute '#{key}=\"#{val}\"' in <mmm-embed>"
 
           embed path, facet, fileder, opts
@@ -91,8 +95,10 @@ converts = {
             path = js_fix element\getAttribute 'path'
             facet = js_fix element\getAttribute 'facet'
             nolink = js_fix element\getAttribute 'nolink'
+            inline = js_fix element\getAttribute 'inline'
+            desc = js_fix element.innerText
 
-            element\replaceWith embed path or '', facet or '', fileder, { :nolink }
+            element\replaceWith embed path or '', facet or '', fileder, { :nolink, :inline, :desc }
 
           embeds = \getElementsByTagName 'mmm-link'
           embeds = [embeds[i] for i=0, embeds.length - 1]
@@ -159,6 +165,7 @@ converts = {
         height: 315
         frameborder: 0
         allowfullscreen: true
+        frameBorder: 0
         src: "//www.youtube.com/embed/#{id}"
       }
   },
diff --git a/mmm/mmmfs/util.moon b/mmm/mmmfs/util.moon
index 68a970a..5c25ed3 100644
--- a/mmm/mmmfs/util.moon
+++ b/mmm/mmmfs/util.moon
@@ -50,6 +50,17 @@ merge = (orig={}, extra) ->
             padding: '1em',
           }
 
+    klass = 'embed'
+    klass ..= ' desc' if opts.desc
+    klass ..= ' inline' if opts.inline
+
+    node = div {
+      class: klass
+      node
+      if opts.desc
+        div opts.desc, class: 'description'
+    }
+
     return node if opts.nolink
     link_to fileder, node, nil, opts.attr
 
diff --git a/scss/_content.scss b/scss/_content.scss
index 0bfc1e8..543d6be 100644
--- a/scss/_content.scss
+++ b/scss/_content.scss
@@ -18,6 +18,27 @@
     }
   }
 
+  .embed {
+    width: inherit;
+    height: inherit;
+
+    .description {
+      text-align: center;
+    }
+
+    &.inline {
+      display: inline-block;
+    }
+
+    &.desc {
+      display: inline-block;
+      background: var(--gray-dark);
+      color: var(--gray-bright);
+      padding: 0.5em;
+      margin: 0.2em;
+    }
+  }
+
   pre > code {
     @include left-border;
     border-color: $gray-dark;