fix parsing gist embed with a caption

bin/import-medium-article.js

@@ -0,0 +1,70 @@
+#!/usr/bin/env node
+
+const path = require('path')
+const inquirer = require('inquirer')
+const ora = require('ora')
+const {
+  getMarkdownFromOnlinePost,
+} = require('../lib/import-article-from-medium')
+
+// eslint-disable-next-line no-console
+console.log(`    -------------------------
+
+Hello there!
+
+Let's import one of your Medium article here.
+`)
+
+let spinner
+
+inquirer
+  .prompt([
+    {
+      name: 'canonicalLink',
+      message: 'URL of the Medium article',
+    },
+  ])
+  .then(({ canonicalLink }) => {
+    canonicalLink = canonicalLink.trim()
+    if (!canonicalLink) {
+      throw new Error(`
+We do need the URL to import the article...`)
+    }
+    spinner = ora('Parsing Medium article').start()
+
+    return getMarkdownFromOnlinePost(
+      path.join(process.cwd(), './content'),
+      canonicalLink
+    )
+  })
+  .then(slug => {
+    if (!slug) {
+      throw new Error(
+        'Looks like the URL points to a draft or a response to an article. We cannot import that.'
+      )
+    }
+    // eslint-disable-next-line no-console
+    console.log(`
+    -------------------------
+
+Your article is ready to go! 🙌
+
+You can find it here: ${path.join(process.cwd(), './content', slug)}
+
+Happy blogging!
+...
+
+
+`)
+  })
+  .then(() => process.exit(0))
+  .catch(err => {
+    if (spinner) {
+      spinner.fail()
+    }
+    // eslint-disable-next-line no-console
+    console.log()
+    // eslint-disable-next-line no-console
+    console.error(err)
+    process.exit(1)
+  })

index.js → bin/medium-to-own-blog.js

@@ -5,10 +5,10 @@ const inquirer = require('inquirer')
 const ora = require('ora')
 const JSZip = require('jszip')
 const fs = require('fs-extra')
-const { getProfile } = require('./get-profile')
-const { getMarkdownFromPost } = require('./generate-md')
-const { addGatsbyFiles } = require('./add-gatsby-files')
-const { exec, withOutputPath } = require('./utils')
+const { getProfile } = require('../lib/get-profile')
+const { getMarkdownFromPost } = require('../lib/generate-md')
+const { addGatsbyFiles } = require('../lib/add-gatsby-files')
+const { exec, withOutputPath } = require('../lib/utils')
 
 // eslint-disable-next-line no-console
 console.log(`    -------------------------

gatsby-template/package.json

@@ -64,7 +64,8 @@
     "lh": "lighthousebot",
     "start": "npm run dev",
     "serve": "gatsby serve",
-    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
+    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\"",
+    "import-medium-article": "npx --package=medium-to-own-blog import-medium-article"
   },
   "prettier": {
     "proseWrap": "never",

gatsby-template/src/components/embed.css

@@ -1,13 +1,13 @@
-.embed {
+.embed-container-sizing {
   position: relative;
 }
 
-.embed img {
+.embed-container-sizing img {
   display: block;
   height: auto;
   width: 100%;
 }
-.embed iframe {
+.embed-container-sizing iframe {
   height: 100%;
   left: 0;
   position: absolute;

gatsby-template/src/components/embed.js

@@ -3,7 +3,7 @@ import React, { useRef, useEffect } from 'react'
 
 import './embed.css'
 
-function Embed({ aspectRatio, src }) {
+function Embed({ aspectRatio, src, caption }) {
   const iframeRef = useRef(null)
 
   useEffect(() => {
@@ -29,28 +29,32 @@ function Embed({ aspectRatio, src }) {
 
   if (src && src.match(/^https:\/\/gist.github.com/)) {
     return (
-      <div className="embed-auto-height">
+      <div className="embed">
         <iframe
           id={src.replace('https://gist.github.com/', '')}
           ref={iframeRef}
           width="100%"
           allowFullScreen
           frameBorder={0}
         />
+        {caption ? <figcaption>{caption}</figcaption> : null}
       </div>
     )
   }
 
   return (
     <div className="embed">
-      <img
-        aria-hidden
-        alt="image to preserve aspect ratio of the iframe"
-        src={`data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 ${(
-          100 * aspectRatio
-        ).toFixed(2)}'%3E%3C/svg%3E`}
-      />
-      <iframe src={src} allowFullScreen frameBorder={0} />
+      <div className="embed-container-sizing">
+        <img
+          aria-hidden
+          alt="image to preserve aspect ratio of the iframe"
+          src={`data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 ${(
+            100 * aspectRatio
+          ).toFixed(2)}'%3E%3C/svg%3E`}
+        />
+        <iframe src={src} allowFullScreen frameBorder={0} />
+      </div>
+      {caption ? <figcaption>{caption}</figcaption> : null}
     </div>
   )
 }