Convert all Medium blogposts to Markdown

[MichaelDeBoey]

What kind of change does this PR introduce?

I extracted all of @CompuIves' Medium posts into Markdown files (just like @kentcdodds did in his three part tutorial).

The main reason for doing this, was the fact that right now we only see 8 Medium posts + the newly created investor seed post.
This comes from the fact that we fetch all Medium posts from https://medium.com/feed/@CompuIves, which only return the last 10 created items of @CompuIves (including comments, which he has 2 of).

I've looked into alternatives to fetch all Medium posts and found that you can get them all sorted from https://medium.com/@CompuIves/latest?format=json in a (broken) JSON format.
The only problem here is that you don't get the content of the post itself.
These posts were also limited to the latest 10 articles btw.

The only things that I still need to look at are

• Delete our own copy of @kentcdodds' remark-embedder plugin when that's extracted from kentcdodds/kentcdodds.com (see Homepage image doesn't show on Safari when devtools open kentcdodds/kentcdodds.com#172 & typo kentcdodds/kentcdodds.com#227)
• Decide what we want to do with all GitHub gists
  • Embed them? (This will need a change in the remark-embedder plugin)
  • Convert them to code blocks inside the Markdown file? ✅
• Decide what to do with the movie from announcing-codesandbox-2-0
  • Convert it to GIF ✅
  • Embed it
  • Leave it out
• Checkout how we can fix inline links that show the link themself as text (this needs to be solved by the remark-embedder plugin), since that now shows the embed instead of the text or it's a broken link (see Update what-open-source-project-should-i-contribute-to.mdx kentcdodds/kentcdodds.com#194)

  [codesandbox.io/s/vue](https://codesandbox.io/s/vue)
  [https://codesandbox.io/s/vue](https://codesandbox.io/s/vue)

• Revert 40a986f, since the Medium posts are still used on the homepage.
  Will create a separate PR to delete them there and cleanup the config
• Optimize all images using tinypng.com & gifcompressor.com
• Decide what to do with all the image (and sandbox) descriptions
  • Leave them out
  • Show them too ✅
• Fix remark-embedder plugin for Twitter accounts with 2 underscores (_) (see Add Polish translation to "Array reduce vs chaining vs for loop" kentcdodds/kentcdodds.com#191)

  https://twitter.com/brian_d_vaughn/status/901488766581227520

  Edit: needs further investigation from ourselves, since it's not the remark-embedder plugin.
  Edit 2: It seems to be a gatsby-transformer-remark problem (see 🐞[gatsby-transformer-remark] Link with double underscore doesn't work gatsbyjs/gatsby#14715).
  Edit 3: gatsby-transformer-remark's pedantic option should be set to false (see 🐞[gatsby-transformer-remark] Link with double underscore doesn't work gatsbyjs/gatsby#14715 (comment))

Follow-ups

• Change /post/blog-slug to /blog/blog-slug an redirect all old links to the new ones
• Make the blog-section on the homepage work with the new Markdown files instead of only the Medium posts
• Use the remark-embedder plugin in other parts (docs, ...) too (delete the https://codesandbox.io/s/embed/... links)

What is the current behavior?

Having both articles from self-written Markdown files and fetched the last 8 articles from Medium

What is the new behavior?

All articles are "self-written" Markdown files and include all of @CompuIves' articles that are present on his Medium profile.

What steps did you take to test this?

• Run yarn start:home
• Go to localhost:8000/blog and see all articles are present
• Click on each article and see it's present

Checklist

• Documentation N/A
• Testing
• Ready to be merged
• Added myself to contributors table

[MichaelDeBoey]

@CompuIves I can't seem to figure out why the build still fails
Maybe @lbogdan can have a look too? 🤔

[MichaelDeBoey]

@CompuIves Can you help in making the decision in what to do with these 2 things please?

Decide what we want to do with all GitHub gists

• Embed them? (This will need a change in the remark-embedder plugin)
• Convert them to code blocks inside the Markdown file?

Decide what to do with the movie from announcing-codesandbox-2-0

• Convert it to GIF
• Embed it
• Leave it out

[CompuIves]

This is a really good change, great step on moving from Medium. Thanks for doing this!

Decide what we want to do with all GitHub gists

I'd convert them to code blocks.

Decide what to do with the movie from announcing-codesandbox-2-0

At the time I wanted to have a GIF, but it was too large. If we can embed it as a gif now that's only better.

[MichaelDeBoey]

Will have a look how I can get the GIF from the embedded movie + will convert al the GitHub gists to code blocks 🙂

[MichaelDeBoey]

@CompuIves Something else I've been thinking about

Decide what to do with all the image (and sandbox) descriptions

• Leave them out
• Show them too

[lbogdan]

Hey @MichaelDeBoey ,

Can we do anything about the build time increasing with 2 minutes?

[MichaelDeBoey]

@lbogdan Hmmm we need to parse and create every page ourselves so I'm not sure tbh.

Building @kentcdodds' blog also takes a while, so I think this is expected behaviour.

[CompuIves]

This is amazing work @MichaelDeBoey, this is reaaally good. Today our deployment system has been clogged up due to our dependency on Medium. Since there are some important fixes that I want to have deployed I went ahead and made the PR mergeable.

I know that the PR isn't 100% finished yet, but I think it'd be good to merge this version in already so we can get the other important bug fixes live.

I'm sorry to suddenly rush this PR, it's exactly what we need right now and it's very important to me to get our deployment flow back up. Again, thanks a lot for all this work, this is suuper useful!

[MichaelDeBoey]

No problem, I understand the need for merging it now. 🙂