This adds support for twitter moments, and lets the plugin options co…

…ntrol more about the layout (#11)

* Allow setting various oEmbed options via plugin options

* Add support for twitter moments as well

* Add tests for moments and plugin options

README.md

@@ -1,6 +1,6 @@
 # gatsby-remark-twitter
 
-Embed Tweet cards in Gatsby markdown.
+Embed Tweet and Moment cards in Gatsby markdown.
 
 ## Install
 
@@ -44,6 +44,25 @@ plugins: [
 ];
 ```
 
+These other options are also available, to control how the widget is
+rendered:
+
+- **hideThread** Default `true`.  Set to `false` to also show the
+  tweet that a tweet is in reply to.  (This is enabled by default
+  because typically you'd just embed both tweets, and it gets really
+  noisy when embedding entire twitter threads in a post.)
+- **hideMedia** Default `false`.  Set to `true` to hide media that is
+  included in a tweet.  For example, if a tweet has a photo or a video
+  embedded, this means that the user has to click through to view it.
+- **align** Set to `'left'`, `'right'` or `'center'` to make the
+  embedded tweet float left, right, or be center-aligned.  (The
+  default is left-aligned, but not floated.)
+- **theme** Set to `'dark'` to use the dark theme.
+- **linkColor** Set to a valid RGB value to specify link colors.
+- **widgetType** Set to `'video'` to return a Twitter Video embed for
+  the given Tweet.
+
+
 ## Usage
 
 ```markdown
@@ -62,6 +81,10 @@ https://twitter.com/wesbos/status/1068597847237541888
 
 https://twitter.com/dan_abramov/status/1068884262273933312
 
+Or a moment
+
+https://twitter.com/i/moments/944326645493612545
+
 ```
 
 > __NOTE:__ Make sure to copy the Tweet link instead of the embed code.

index.js

@@ -3,20 +3,36 @@
 const visit = require('unist-util-visit');
 const fetch = require('node-fetch');
 
-const getBloquequote = async (url) => {
-  const apiUrl = `https://publish.twitter.com/oembed?url=${url}`;
+const getBloquequote = async (url, opt) => {
+  const apiUrl = `https://publish.twitter.com/oembed?url=${
+    url
+  }&hide_thread=${
+    opt.hideThread !== false ? '1' : '0'
+  }&align=${
+    opt.align || ''
+  }&hide_media=${
+    opt.hideMedia ? '1' : '0'
+  }&theme=${
+    opt.theme || ''
+  }&link_color=${
+    opt.linkColor || ''
+  }&widget_type=${
+    opt.widgetType || ''
+  }&omit_script=true&dnt=true&limit=20&chrome=nofooter`
 
   const response = await fetch(apiUrl);
   return await response.json();
 };
 
-const twitterRegexp = /https:\/\/twitter\.com\/([A-Za-z0-9-_]*\/status\/[A-Za-z0-9-_?=]*)/gi;
+const momentRegexp = /https:\/\/twitter.com\/i\/moments\/[0-9]+/i;
+const tweetRegexp = /https:\/\/twitter\.com\/[A-Za-z0-9-_]*\/status\/[0-9]+/i;
 
 // only do the embedding for a single twitter url on its own paragraph.
 const isTwitterLink = node => {
   return node.children.length === 1 &&
     node.children[0].type === 'link' &&
-    node.children[0].url.match(twitterRegexp) &&
+    (tweetRegexp.test(node.children[0].url) ||
+     momentRegexp.test(node.children[0].url)) &&
     node.children[0].children.length === 1 &&
     node.children[0].children[0].type === 'text' &&
     node.children[0].children[0].value === node.children[0].url;
@@ -39,7 +55,7 @@ module.exports = async ({ markdownAST }, pluginOptions) => {
     const tweetLink = nt[1];
     debug(`\nembeding tweet: ${tweetLink}\n`);
     try {
-      const embedData = await getBloquequote(tweetLink);
+      const embedData = await getBloquequote(tweetLink, pluginOptions);
       node.type = 'html';
       node.value = embedData.html;
       node.children = null;

tap-snapshots/test-basic.js-TAP.test.js

@@ -11,7 +11,7 @@ exports[`test/basic.js TAP basic conversion > should convert twitter link 1`] =
    [ { type: 'html',
        children: null,
        value:
-        '<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Sorry, everyone. I&#39;m giving up pro bono argument services.' } ] }
+        '<blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">Sorry, everyone. I&#39;m giving up pro bono argument services.' } ] }
 `
 
 exports[`test/basic.js TAP dont convert if nested > should not convert twitter inline link 1`] = `
@@ -45,5 +45,14 @@ exports[`test/basic.js TAP failed conversion > should get expected logs 1`] = `
 [ [ '\\nfound tweetLink', 'https://twitter.com/izs/status/13425' ],
   [ '\\nembeding tweet: https://twitter.com/izs/status/13425\\n' ],
   [ '\\nfailed to get blockquote for https://twitter.com/izs/status/13425\\n',
-    'ERROR MESSAGE: invalid json response body at https://publish.twitter.com/oembed?url=https://twitter.com/izs/status/13425 reason: Unexpected token < in JSON at position 0' ] ]
+    'ERROR MESSAGE: invalid json response body at https://publish.twitter.com/oembed?url=https://twitter.com/izs/status/13425&hide_thread=1&align=&hide_media=0&theme=&link_color=&widget_type=&omit_script=true&dnt=true&limit=20&chrome=nofooter reason: Unexpected token < in JSON at position 0' ] ]
+`
+
+exports[`test/basic.js TAP plugin options, and a moment > an optioned up moment 1`] = `
+{ type: 'root',
+  children:
+   [ { type: 'html',
+       children: null,
+       value:
+        '<a class="twitter-moment" href="https://twitter.com/i/moments/944326645493612545?ref_src=twsrc%5Etfw">The True Meaning of Christmas</a>\\n<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>\\n' } ] }
 `

test/basic.js

@@ -1,7 +1,7 @@
 const t = require('tap')
 const twitter = require('../')
 
-const bqStr = `<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Sorry, everyone. I&#39;m giving up pro bono argument services.`
+const bqStr = `<blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">Sorry, everyone. I&#39;m giving up pro bono argument services.`
 
 const cleanTweet = (ast) => {
   if (ast.children[0].value.indexOf(bqStr) === 0) {
@@ -117,3 +117,39 @@ t.test('failed conversion', async t => {
   t.matchSnapshot(markdownAST, 'should handle failure nicely')
   t.matchSnapshot(clean(logs), 'should get expected logs')
 })
+
+t.test('plugin options, and a moment', async t => {
+
+  const markdownAST = {
+    type: 'root',
+    children: [
+      {
+        "type": "paragraph",
+        "children": [
+          {
+            "type": "link",
+            "title": null,
+            "url": "https://twitter.com/i/moments/944326645493612545",
+            "children": [
+              {
+                "type": "text",
+                "value": "https://twitter.com/i/moments/944326645493612545"
+              }
+            ],
+          }
+        ]
+      }
+    ]
+  }
+
+  await twitter({ markdownAST }, {
+    hideThread: false,
+    align: 'left',
+    hideMedia: true,
+    theme: 'dark',
+    linkColor: '#ff0000',
+    widgetType: 'video'
+  })
+
+  t.matchSnapshot(markdownAST, 'an optioned up moment')
+})