feat: add provider info to the inline classname

closes #129
sergioramos · Oct 16, 2020 · ef01dc3 · ef01dc3
1 parent 8d64890
commit ef01dc3
Show file tree

Hide file tree

Showing 23 changed files with 159 additions and 116 deletions.
diff --git a/index.js b/index.js
@@ -2,6 +2,7 @@ const Got = require('got');
 const h = require('hastscript');
 const Intercept = require('apr-intercept');
 const { getType } = require('mime');
+const { paramCase: ParamCase } = require('param-case');
 const toHtml = require('hast-util-to-html');
 const { format, parse } = require('url');
 const IsUrl = require('is-url');
@@ -14,10 +15,10 @@ const ATTRS = {
   template: {
     'data-oembed-template': true,
   },
-  inline: {
-    class: 'remark-oembed-inline',
+  inline: (provider = '') => ({
+    class: `remark-oembed-inline remark-oembed-${ParamCase(provider)}`,
     'data-oembed': true,
-  },
+  }),
   image: {
     class: 'remark-oembed-photo',
     'data-oembed': true,
@@ -135,7 +136,7 @@ const resolvePreview = ({ isImage, thumbnail, url, emptyUrl }) => {
   return '';
 };
 
-const Oembed = ({ type, source, jsx = false, ...rest }) => {
+const Oembed = ({ type, source, jsx = false, provider_name, ...rest }) => {
   if (type === 'photo' && !source) {
     return StaticPhotoOembed({ jsx, ...rest });
   }
@@ -146,7 +147,7 @@ const Oembed = ({ type, source, jsx = false, ...rest }) => {
 
   const node = h(
     'div',
-    ATTRS.inline,
+    ATTRS.inline(provider_name),
     [anchor, h('template', ATTRS.template, [source])].filter(Boolean),
   );
 
@@ -194,7 +195,8 @@ const processOembed = async (oembed) => {
   }
 
   if (syncWidget && source) {
-    const newNode = h('div', ATTRS.inline, [source]);
+    const { provider_name } = oembed;
+    const newNode = h('div', ATTRS.inline(provider_name), [source]);
     if (!jsx) {
       return newNode;
     }

diff --git a/package.json b/package.json
@@ -30,7 +30,8 @@
     "hast-util-to-html": "^7.1.1",
     "hastscript": "^6.0.0",
     "is-url": "^1.2.4",
-    "mime": "^2.4.6"
+    "mime": "^2.4.6",
+    "param-case": "^3.0.3"
   },
   "devDependencies": {
     "@babel/core": "^7.12.1",

diff --git a/test/outputs/async-img-all.html b/test/outputs/async-img-all.html
@@ -1,5 +1,5 @@
 <p>This is a youtube video:</p>
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-you-tube" data-oembed>
   <a
     href="https://www.youtube.com/watch?v=aoLhACqJCUg"
     class="remark-oembed-anchor"
@@ -25,7 +25,7 @@
   ></template>
 </div>
 <p>This is a photo:</p>
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-flickr" data-oembed>
   <a
     href="https://www.flickr.com/photos/pedrocaetano/27432477888"
     class="remark-oembed-anchor"

diff --git a/test/outputs/async-img-photo-oembed.html b/test/outputs/async-img-photo-oembed.html
@@ -1,5 +1,5 @@
 <p>Hey this is a nice photo:</p>
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-flickr" data-oembed>
   <a
     href="https://www.flickr.com/photos/pedrocaetano/27432477888"
     class="remark-oembed-anchor"

diff --git a/test/outputs/async-img-providers.html b/test/outputs/async-img-providers.html
@@ -1,4 +1,4 @@
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-code-pen" data-oembed>
   <a
     href="https://codepen.io/fossheim/pen/oNjxrZa"
     class="remark-oembed-anchor"
@@ -26,15 +26,15 @@
     ></iframe
   ></template>
 </div>
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-codepoints-net" data-oembed>
   <template data-oembed-template
     ><iframe
       src="https://codepoints.net/U+003D?embed"
       style="width: 640px; height: 640px; border: 1px solid #444"
     ></iframe
   ></template>
 </div>
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-code-sandbox" data-oembed>
   <a
     href="https://codesandbox.io/s/j0y0vpz59"
     class="remark-oembed-anchor"
@@ -64,7 +64,7 @@
     ></iframe
   ></template>
 </div>
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-flickr" data-oembed>
   <a
     href="https://www.flickr.com/photos/pedrocaetano/27432477888"
     class="remark-oembed-anchor"
@@ -99,7 +99,7 @@
 <p>
   https://www.gettyimages.pt/detail/fotografia-de-not%C3%ADcias/monastery-of-batalha-in-portugal-fotografia-de-not%C3%ADcias
 </p>
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-gfycat" data-oembed>
   <template data-oembed-template
     ><div style="position: relative; padding-bottom: calc(75% + 44px)">
       <iframe
@@ -129,7 +129,7 @@
     data-oembed
 /></a>
 <p>https://www.ifixit.com/Device/MacBook_Pro_13%22_Retina_Display_Early_2015</p>
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-i-heart-radio" data-oembed>
   <template data-oembed-template
     ><iframe
       height="300"
@@ -143,7 +143,7 @@
 <p>
   https://www.kickstarter.com/projects/flairespresso/the-neo-delicious-affordable-espresso-at-home?ref=discovery_staff_picks_popular
 </p>
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-meetup" data-oembed>
   <template data-oembed-template
     ><style type="text/css">
       #meetup_oembed .mu_clearfix:after {
@@ -275,7 +275,7 @@ <h3>require('lx')</h3>
     </div>
   </template>
 </div>
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-reddit" data-oembed>
   <template data-oembed-template>
     <blockquote class="reddit-card">
       <a
@@ -294,7 +294,7 @@ <h3>require('lx')</h3>
     ></script>
   </template>
 </div>
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-sapo-videos" data-oembed>
   <template data-oembed-template
     ><iframe
       src="//rd.videos.sapo.pt/playhtml?file=https://rd.videos.sapo.pt/EhJE6LlHZfFz4m8HZ2o5/mov/1&quality=sd"
@@ -308,7 +308,7 @@ <h3>require('lx')</h3>
     ></iframe
   ></template>
 </div>
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-sound-cloud" data-oembed>
   <a
     href="https://soundcloud.com/niceweatherforducks/sets/love-is-you-and-me-under-the"
     class="remark-oembed-anchor"
@@ -332,7 +332,7 @@ <h3>require('lx')</h3>
     ></iframe
   ></template>
 </div>
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-spotify" data-oembed>
   <template data-oembed-template
     ><iframe
       width="300"
@@ -348,7 +348,7 @@ <h3>require('lx')</h3>
 <p></p>
 <p>http://www.twitter.com/ramitos</p>
 <p></p>
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-you-tube" data-oembed>
   <a
     href="https://www.youtube.com/watch?v=aoLhACqJCUg"
     class="remark-oembed-anchor"

diff --git a/test/outputs/async-img-rich-oembed.html b/test/outputs/async-img-rich-oembed.html
@@ -1,5 +1,5 @@
 <p>Hey this is a nice youtube video:</p>
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-you-tube" data-oembed>
   <a
     href="https://www.youtube.com/watch?v=aoLhACqJCUg"
     class="remark-oembed-anchor"

diff --git a/test/outputs/defaults-all.html b/test/outputs/defaults-all.html
@@ -1,5 +1,5 @@
 <p>This is a youtube video:</p>
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-you-tube" data-oembed>
   <a
     href="https://www.youtube.com/watch?v=aoLhACqJCUg"
     class="remark-oembed-anchor"
@@ -25,7 +25,7 @@
   ></template>
 </div>
 <p>This is a photo:</p>
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-flickr" data-oembed>
   <a
     href="https://www.flickr.com/photos/pedrocaetano/27432477888"
     class="remark-oembed-anchor"

diff --git a/test/outputs/defaults-photo-oembed.html b/test/outputs/defaults-photo-oembed.html
@@ -1,5 +1,5 @@
 <p>Hey this is a nice photo:</p>
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-flickr" data-oembed>
   <a
     href="https://www.flickr.com/photos/pedrocaetano/27432477888"
     class="remark-oembed-anchor"

diff --git a/test/outputs/defaults-providers.html b/test/outputs/defaults-providers.html
@@ -1,4 +1,4 @@
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-code-pen" data-oembed>
   <a
     href="https://codepen.io/fossheim/pen/oNjxrZa"
     class="remark-oembed-anchor"
@@ -26,15 +26,15 @@
     ></iframe
   ></template>
 </div>
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-codepoints-net" data-oembed>
   <template data-oembed-template
     ><iframe
       src="https://codepoints.net/U+003D?embed"
       style="width: 640px; height: 640px; border: 1px solid #444"
     ></iframe
   ></template>
 </div>
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-code-sandbox" data-oembed>
   <a
     href="https://codesandbox.io/s/j0y0vpz59"
     class="remark-oembed-anchor"
@@ -64,7 +64,7 @@
     ></iframe
   ></template>
 </div>
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-flickr" data-oembed>
   <a
     href="https://www.flickr.com/photos/pedrocaetano/27432477888"
     class="remark-oembed-anchor"
@@ -99,7 +99,7 @@
 <p>
   https://www.gettyimages.pt/detail/fotografia-de-not%C3%ADcias/monastery-of-batalha-in-portugal-fotografia-de-not%C3%ADcias
 </p>
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-gfycat" data-oembed>
   <template data-oembed-template
     ><div style="position: relative; padding-bottom: calc(75% + 44px)">
       <iframe
@@ -129,7 +129,7 @@
     data-oembed
 /></a>
 <p>https://www.ifixit.com/Device/MacBook_Pro_13%22_Retina_Display_Early_2015</p>
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-i-heart-radio" data-oembed>
   <template data-oembed-template
     ><iframe
       height="300"
@@ -143,7 +143,7 @@
 <p>
   https://www.kickstarter.com/projects/flairespresso/the-neo-delicious-affordable-espresso-at-home?ref=discovery_staff_picks_popular
 </p>
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-meetup" data-oembed>
   <template data-oembed-template
     ><style type="text/css">
       #meetup_oembed .mu_clearfix:after {
@@ -275,7 +275,7 @@ <h3>require('lx')</h3>
     </div>
   </template>
 </div>
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-reddit" data-oembed>
   <template data-oembed-template>
     <blockquote class="reddit-card">
       <a
@@ -294,7 +294,7 @@ <h3>require('lx')</h3>
     ></script>
   </template>
 </div>
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-sapo-videos" data-oembed>
   <template data-oembed-template
     ><iframe
       src="//rd.videos.sapo.pt/playhtml?file=https://rd.videos.sapo.pt/EhJE6LlHZfFz4m8HZ2o5/mov/1&quality=sd"
@@ -308,7 +308,7 @@ <h3>require('lx')</h3>
     ></iframe
   ></template>
 </div>
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-sound-cloud" data-oembed>
   <a
     href="https://soundcloud.com/niceweatherforducks/sets/love-is-you-and-me-under-the"
     class="remark-oembed-anchor"
@@ -332,7 +332,7 @@ <h3>require('lx')</h3>
     ></iframe
   ></template>
 </div>
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-spotify" data-oembed>
   <template data-oembed-template
     ><iframe
       width="300"
@@ -348,7 +348,7 @@ <h3>require('lx')</h3>
 <p></p>
 <p>http://www.twitter.com/ramitos</p>
 <p></p>
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-you-tube" data-oembed>
   <a
     href="https://www.youtube.com/watch?v=aoLhACqJCUg"
     class="remark-oembed-anchor"

diff --git a/test/outputs/defaults-providers.png b/test/outputs/defaults-providers.png
diff --git a/test/outputs/defaults-rich-oembed.html b/test/outputs/defaults-rich-oembed.html
@@ -1,5 +1,5 @@
 <p>Hey this is a nice youtube video:</p>
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-you-tube" data-oembed>
   <a
     href="https://www.youtube.com/watch?v=aoLhACqJCUg"
     class="remark-oembed-anchor"

diff --git a/test/outputs/jsx-all.html b/test/outputs/jsx-all.html
@@ -1,7 +1,7 @@
 <wrapper mdxType="MDXLayout"
   ><p>This is a youtube video:</p>
   <wrapper
-    ><div class="remark-oembed-inline" data-oembed>
+    ><div class="remark-oembed-inline remark-oembed-you-tube" data-oembed>
       <a
         href="https://www.youtube.com/watch?v=aoLhACqJCUg"
         class="remark-oembed-anchor"
@@ -28,7 +28,7 @@
   ></wrapper>
   <p>This is a photo:</p>
   <wrapper
-    ><div class="remark-oembed-inline" data-oembed>
+    ><div class="remark-oembed-inline remark-oembed-flickr" data-oembed>
       <a
         href="https://www.flickr.com/photos/pedrocaetano/27432477888"
         class="remark-oembed-anchor"

diff --git a/test/outputs/jsx-async-img-all.html b/test/outputs/jsx-async-img-all.html
@@ -1,7 +1,7 @@
 <wrapper mdxType="MDXLayout"
   ><p>This is a youtube video:</p>
   <wrapper
-    ><div class="remark-oembed-inline" data-oembed>
+    ><div class="remark-oembed-inline remark-oembed-you-tube" data-oembed>
       <a
         href="https://www.youtube.com/watch?v=aoLhACqJCUg"
         class="remark-oembed-anchor"
@@ -28,7 +28,7 @@
   ></wrapper>
   <p>This is a photo:</p>
   <wrapper
-    ><div class="remark-oembed-inline" data-oembed>
+    ><div class="remark-oembed-inline remark-oembed-flickr" data-oembed>
       <a
         href="https://www.flickr.com/photos/pedrocaetano/27432477888"
         class="remark-oembed-anchor"

diff --git a/test/outputs/jsx-sync-widget-all.html b/test/outputs/jsx-sync-widget-all.html
@@ -1,7 +1,7 @@
 <wrapper mdxType="MDXLayout"
   ><p>This is a youtube video:</p>
   <wrapper
-    ><div class="remark-oembed-inline" data-oembed>
+    ><div class="remark-oembed-inline remark-oembed-you-tube" data-oembed>
       <iframe
         width="480"
         height="270"
@@ -13,7 +13,7 @@
   ></wrapper>
   <p>This is a photo:</p>
   <wrapper
-    ><div class="remark-oembed-inline" data-oembed>
+    ><div class="remark-oembed-inline remark-oembed-flickr" data-oembed>
       <a
         data-flickr-embed="true"
         href="https://www.flickr.com/photos/pedrocaetano/27432477888/"

diff --git a/test/outputs/sync-widget-all.html b/test/outputs/sync-widget-all.html
@@ -1,5 +1,5 @@
 <p>This is a youtube video:</p>
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-you-tube" data-oembed>
   <iframe
     width="480"
     height="270"
@@ -10,7 +10,7 @@
   ></iframe>
 </div>
 <p>This is a photo:</p>
-<div class="remark-oembed-inline" data-oembed>
+<div class="remark-oembed-inline remark-oembed-flickr" data-oembed>
   <a
     data-flickr-embed="true"
     href="https://www.flickr.com/photos/pedrocaetano/27432477888/"

diff --git a/test/outputs/sync-widget-flat-oembed.png b/test/outputs/sync-widget-flat-oembed.png