#118 Allow users to embed Medium posts with Liquid Tags by edisonywh · Pull Request #1161 · forem/forem

edisonywh · 2018-11-20T14:01:44Z

What type of PR is this? (check all applicable)

Refactor
Feature
Bug Fix
Documentation Update

Description

Added new liquid tag - "{% medium https://medium.com}"
Added a scraper - MediumArticleRetrievalService which crawls the
given Medium URL for informations needed for the liquid tag

Right now my implementation takes a full link, but we can choose to use handle + article ID. Open to suggestion here.

Related Tickets & Documents

#118

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Added to documentation?

docs.dev.to
readme
no documentation needed

AntonyGarand · 2018-12-30T01:41:05Z

app/labor/markdown_parser.rb

  def whitelisted_image_host?(src)
    # GitHub camo image won't parse but should be safe to host direct
-    src.start_with?("https://camo.githubusercontent.com/")
+    src.start_with?("https://camo.githubusercontent.com/") || src.start_with?("https://cdn-images-1.medium.com")


I doubt medium would like us hotlinking their cdn

Link2Twenty · 2019-01-08T22:45:40Z

ping @Zhao-Andy

edisonywh · 2019-03-14T16:43:28Z

@Zhao-Andy can I get a review on this? (sorry it took so long too)

rhymes · 2019-03-14T16:49:39Z

Great job @edisonywh !

I have an odd question about the UI: shouldn't it be clear that the embed is from medium? Like this they look like regular dev.to posts, I guess I'm used to other embeds that visibly tell you where the content is coming from.

Just a thought.

edisonywh · 2019-03-14T17:00:11Z

@rhymes Ah good point, I just straight out copied from other css haha. Any tips on that? Don't want to break the design guideline

rhymes · 2019-03-14T17:16:30Z

@edisonywh I googled a bit and it seems like they removed support for embeddable medium posts sometime ago and in the terms of service they say:

As for other parts of Medium, you may not copy or adapt any portion of our code or visual design elements (including logos) without express written permission from Medium unless otherwise permitted by law.

So I guess you can't add a medium logo in there :-(

Maybe a sort of subtitle/byline that says "from Medium.com" ?

edisonywh · 2019-03-14T17:24:59Z

So I guess you can't add a medium logo in there :-(

@rhymes I looked at their branding guideline post (posted in 2017), and upon downloading, the README full text is depicted below:

# Medium Logos
This repo contains versions of our logo and wordmark in popular formats. Feel free to
use these anywhere on the web with a few simple guidelines: Do not modify or alter the
Medium logo or use it in a confusing way, including suggesting sponsorship or endorsement
by Medium, or in a way that confuses Medium with another brand.

[For full brand guidelines read this.](https://medium.com/policy/logos-and-brand-guidelines-f1a01a733592)

If you have any questions, email us at yourfriends@medium.com.

Thanks

Looks like I can use the logo afterall? :)

EDIT:

Thoughts?

edisonywh · 2019-03-14T18:03:49Z

app/liquid_tags/medium_tag.rb

+class MediumTag < LiquidTagBase
+  include ApplicationHelper
+  include ActionView::Helpers::TagHelper
+  include InlineSvg::ActionView::Helpers


Added this line for inline_svg to reuse the Medium icon that's already in codebase

Link2Twenty · 2019-03-15T16:22:11Z

Did you know adding ?format=json to the end of the URL will give you a JSON feed?

https://medium.com/refraction-tech-everything/how-netflix-works-the-hugely-simplified-complex-stuff-that-happens-every-time-you-hit-play-3a40c9be254b?format=json

edisonywh · 2019-03-16T14:58:32Z

@Link2Twenty I did not know that! Would that be the preferred way to do this?

rhymes · 2019-03-16T17:35:21Z

I tried to download the JSON format and it contains invalid chars at the beginning, I suppose it's related to CORS and the fact that Medium doesn't advertise the format anywhere.

I'd stick to your version for the time being

edisonywh · 2019-03-17T01:39:53Z

Yeah quick search says it's to prevent JSON hijacking?

https://stackoverflow.com/questions/2669690/why-does-google-prepend-while1-to-their-json-responses

edisonywh · 2019-03-26T07:22:31Z

@Zhao-Andy is there anything else I can do to move this forward? :)

jessleenyc · 2019-03-26T22:33:26Z

@edisonywh I think we'll want to adjust the design a bit more to make sure it really feels differentiated from DEV articles. Let me circle back w/ the team and get back to you.

jessleenyc · 2019-03-28T17:38:14Z

app/liquid_tags/medium_tag.rb

+  end
+end
+
+Liquid::Template.register_tag("medium", MediumTag)


@edisonywh will you remove this line for now? we're going to mess with the design a tiny bit but would like to merge what you have so far into the codebase.

Sure thing! Will ping you again once I've done so

jessleenyc

left a comment above!

- Added new liquid tag - "{% medium https://medium.com}" - Added a scraper - `MediumArticleRetrievalService` which crawls the given Medium URL for informations needed for the liquid tag

edisonywh · 2019-03-29T15:21:13Z

@jessleenyc updated and removed the register tag line. Feel free to ping me if there's anything else I can do to help!

jessleenyc

lgtm!

we'll make some minor tweaks and then make it available soon!

* master: (83 commits) Update gitdocs (forem#2500) Condense 'ask me anything' to 'ama' (forem#2428) [ci skip] Add user_signed_in? to cache key for styles (forem#2498) Added troubleshooting for byebug without readline issue (forem#2481) Fix some frontend linting issues (forem#2495) [ci skip] Fix <br/> in footer. (forem#2491) Remove extra param and add message for prefill (forem#2487) Make Cards Change Dynamically and add Reader/Follower Charts (forem#2488) Temporarily comment out random (forem#2486) Add nav buttons to pwa desktop (forem#2484) Feature/filtered charts (forem#2482) Add caching for historical data (forem#2476) There are installation sections for other OSes now. (forem#2480) Add inbox guidelines to users (forem#2473) Release Open Inbox (forem#2468) Convert underscores in article slugs properly (forem#2472) Update framework defaults to match those in Rails 5.1 (forem#2309) Enable random order for specs (forem#2466) [ci skip] forem#118 Allow users to embed Medium posts with Liquid Tags (forem#1161) Allow API to return top articles (forem#2469) ... # Conflicts: # Envfile # app/models/user.rb # db/schema.rb

edisonywh mentioned this pull request Nov 20, 2018

Create liquid tag for medium.com articles #118

Closed

AntonyGarand reviewed Dec 30, 2018

View reviewed changes

edisonywh force-pushed the feature/medium-liquid-tag branch from 9866a68 to e720bea Compare March 14, 2019 16:30

edisonywh changed the title ~~[WIP] #118 Allow users to embed Medium posts with Liquid Tags~~ #118 Allow users to embed Medium posts with Liquid Tags Mar 14, 2019

Zhao-Andy self-requested a review March 14, 2019 16:45

edisonywh commented Mar 14, 2019

View reviewed changes

jessleenyc reviewed Mar 28, 2019

View reviewed changes

pr-triage bot added the PR: unreviewed bot applied label for PR's with no review label Mar 28, 2019

jessleenyc reviewed Mar 28, 2019

View reviewed changes

edisonywh added 2 commits March 29, 2019 23:19

Add ability to embed Medium URL as liquid tag

45b4a4b

- Added new liquid tag - "{% medium https://medium.com}" - Added a scraper - `MediumArticleRetrievalService` which crawls the given Medium URL for informations needed for the liquid tag

Add Medium logo in rendered liquid tag

a833f82

edisonywh force-pushed the feature/medium-liquid-tag branch from b860536 to a833f82 Compare March 29, 2019 15:20

jessleenyc approved these changes Mar 29, 2019

View reviewed changes

pr-triage bot added PR: reviewed-approved bot applied label for PR's where reviewer approves changes and removed PR: unreviewed bot applied label for PR's with no review labels Mar 29, 2019

benhalpern merged commit 3d12535 into forem:master Apr 17, 2019

pr-triage bot removed the PR: reviewed-approved bot applied label for PR's where reviewer approves changes label Apr 17, 2019

pr-triage bot added the PR: merged bot applied label for PR's that are merged label Apr 17, 2019

edisonywh deleted the feature/medium-liquid-tag branch April 17, 2019 14:57

mariocsee mentioned this pull request May 14, 2019

Register Medium Liquid Tag #2829

Closed

2 tasks

Conversation

edisonywh commented Nov 20, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What type of PR is this? (check all applicable)

Description

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Added to documentation?

Uh oh!

AntonyGarand Dec 30, 2018

Choose a reason for hiding this comment

Uh oh!

Link2Twenty commented Jan 8, 2019

Uh oh!

edisonywh commented Mar 14, 2019

Uh oh!

rhymes commented Mar 14, 2019

Uh oh!

edisonywh commented Mar 14, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rhymes commented Mar 14, 2019

Uh oh!

edisonywh commented Mar 14, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

edisonywh Mar 14, 2019

Choose a reason for hiding this comment

Uh oh!

Link2Twenty commented Mar 15, 2019

Uh oh!

edisonywh commented Mar 16, 2019

Uh oh!

rhymes commented Mar 16, 2019

Uh oh!

edisonywh commented Mar 17, 2019

Uh oh!

edisonywh commented Mar 26, 2019

Uh oh!

jessleenyc commented Mar 26, 2019

Uh oh!

jessleenyc Mar 28, 2019

Choose a reason for hiding this comment

Uh oh!

edisonywh Mar 29, 2019

Choose a reason for hiding this comment

Uh oh!

jessleenyc left a comment

Choose a reason for hiding this comment

Uh oh!

edisonywh commented Mar 29, 2019

Uh oh!

jessleenyc left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

edisonywh commented Nov 20, 2018 •

edited

Loading

edisonywh commented Mar 14, 2019 •

edited

Loading

edisonywh commented Mar 14, 2019 •

edited

Loading