diff --git a/bin/import-medium-article.js b/bin/import-medium-article.js new file mode 100755 index 0000000..ce5fd71 --- /dev/null +++ b/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) + }) diff --git a/index.js b/bin/medium-to-own-blog.js similarity index 96% rename from index.js rename to bin/medium-to-own-blog.js index 6e21cb3..222585b 100755 --- a/index.js +++ b/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(` ------------------------- diff --git a/gatsby-template/package-lock.json b/gatsby-template/package-lock.json new file mode 100644 index 0000000..2bba576 --- /dev/null +++ b/gatsby-template/package-lock.json @@ -0,0 +1,5 @@ +{ + "name": "{{ mediumUsername }}-blog", + "version": "0.1.0", + "lockfileVersion": 1 +} diff --git a/gatsby-template/package.json b/gatsby-template/package.json index 54fa906..debbb5d 100644 --- a/gatsby-template/package.json +++ b/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", diff --git a/gatsby-template/src/components/embed.css b/gatsby-template/src/components/embed.css index 56d3901..3e7130f 100644 --- a/gatsby-template/src/components/embed.css +++ b/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; diff --git a/gatsby-template/src/components/embed.js b/gatsby-template/src/components/embed.js index e675c84..178fed4 100644 --- a/gatsby-template/src/components/embed.js +++ b/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,7 +29,7 @@ function Embed({ aspectRatio, src }) { if (src && src.match(/^https:\/\/gist.github.com/)) { return ( -
+