Reddit Liquid Tag

[tiagomsmagalhaes]

Describe the solution you'd like
It would be nice to have a liquid tag to integrate reddit submissions

Describe alternatives you've considered
I haven't researched intensively but found that Reddit has an embedding mechanism (oEmbed ?)

Additional context
A maybe useful GH wiki page about Reddit embedding.

[benhalpern]

This makes sense. I think we'd do it via the API and embed via plain old backend HTML. This is our preference when it's not rich content like CodePen, etc.

[Link2Twenty]

If you take any post and put .json at the end of it you see the post details in json form.

https://www.reddit.com/r/aww/comments/ag3s4b/ive_waited_28_years_to_finally_havr_my_first_pet/

becomes

https://www.reddit.com/r/aww/comments/ag3s4b/ive_waited_28_years_to_finally_havr_my_first_pet.json

the first item in the array is the original post the second is replies.
If we dig down like this json[0].data.children[0].data we get to the data we want

{"approved_at_utc": null, "subreddit": "aww", "selftext": "", "user_reports": [], "saved": false, "mod_reason_title": null, "gilded": 0, "clicked": false, "title": "I've waited 28 years to finally havr my first pet. Everyone, meet Mycroft.", "link_flair_richtext": [], "subreddit_name_prefixed": "r/aww", "hidden": false, "pwls": 6, "link_flair_css_class": null, "downs": 0, "thumbnail_height": 140, "parent_whitelist_status": "all_ads", "hide_score": false, "name": "t3_ag3s4b", "quarantine": false, "link_flair_text_color": "dark", "upvote_ratio": 0.91, "author_flair_background_color": null, "subreddit_type": "public", "ups": 49102, "domain": "i.redd.it", "media_embed": {}, "thumbnail_width": 140, "author_flair_template_id": null, "is_original_content": false, "author_fullname": "t2_2xdvhq4k", "secure_media": null, "is_reddit_media_domain": true, "is_meta": false, "category": null, "secure_media_embed": {}, "link_flair_text": null, "can_mod_post": false, "score": 49102, "approved_by": null, "thumbnail": "https://b.thumbs.redditmedia.com/iE2-RIbThs-9_TaeZb8eFsCge_mn1MHd6uirdou8H3o.jpg", "edited": false, "author_flair_css_class": null, "author_flair_richtext": [], "gildings": {"gid_1": 1, "gid_2": 0, "gid_3": 0}, "post_hint": "image", "content_categories": null, "is_self": false, "mod_note": null, "created": 1547549225.0, "link_flair_type": "text", "wls": 6, "banned_by": null, "author_flair_type": "text", "contest_mode": false, "selftext_html": null, "likes": null, "suggested_sort": null, "banned_at_utc": null, "view_count": null, "archived": false, "no_follow": false, "is_crosspostable": true, "pinned": false, "over_18": false, "preview": {"images": [{"source": {"url": "https://preview.redd.it/jpqodmc83ia21.jpg?auto=webp&s=be5aaa2231741075f4c9814cd97315403c49f20f", "width": 1216, "height": 1366}, "resolutions": [{"url": "https://preview.redd.it/jpqodmc83ia21.jpg?width=108&crop=smart&auto=webp&s=2468032bc01444220b17b44f2c69864883e7fe19", "width": 108, "height": 121}, {"url": "https://preview.redd.it/jpqodmc83ia21.jpg?width=216&crop=smart&auto=webp&s=ef888c4e14a746c512b654d23d108446b6aeadfb", "width": 216, "height": 242}, {"url": "https://preview.redd.it/jpqodmc83ia21.jpg?width=320&crop=smart&auto=webp&s=e616b86c0139bae20237cf1b9459707807bbd924", "width": 320, "height": 359}, {"url": "https://preview.redd.it/jpqodmc83ia21.jpg?width=640&crop=smart&auto=webp&s=c16fa378756d6aefbb5eb07b012d32568e7d7ca3", "width": 640, "height": 718}, {"url": "https://preview.redd.it/jpqodmc83ia21.jpg?width=960&crop=smart&auto=webp&s=61f886dff4344974facbc59d88f3954e69dcbfc3", "width": 960, "height": 1078}, {"url": "https://preview.redd.it/jpqodmc83ia21.jpg?width=1080&crop=smart&auto=webp&s=1993e63d94647fdf6ac356138b011a64d8330efe", "width": 1080, "height": 1213}], "variants": {}, "id": "-HJWcJLcCd44F2d2PHyXxEwdQk71pmOd_P3mRjy_QD4"}], "enabled": true}, "media": null, "media_only": false, "link_flair_template_id": null, "can_gild": true, "spoiler": false, "locked": false, "author_flair_text": null, "visited": false, "num_reports": null, "distinguished": null, "subreddit_id": "t5_2qh1o", "mod_reason_by": null, "removal_reason": null, "link_flair_background_color": "", "id": "ag3s4b", "is_robot_indexable": true, "report_reasons": null, "author": "Miaogua007", "num_crossposts": 4, "num_comments": 691, "send_replies": true, "author_patreon_flair": false, "author_flair_text_color": null, "permalink": "/r/aww/comments/ag3s4b/ive_waited_28_years_to_finally_havr_my_first_pet/", "whitelist_status": "all_ads", "stickied": false, "url": "https://i.redd.it/jpqodmc83ia21.jpg", "subreddit_subscribers": 19147177, "created_utc": 1547520425.0, "mod_reports": [], "is_video": false}

Which should contain everything we need.

[rhymes]

@Link2Twenty I did a couple of experiments:

In that example there's a picture of the pet, which is a separate attribute, is there a documented logic on where such picture should be put? As a human I can see the pet's image is the body of the post, but with a quick glance I can't find that info in the JSON.

In this case for example - https://www.reddit.com/r/IAmA/comments/afvl2w/im_scott_from_scotts_cheap_flights_my_profession.json - the post has a body which is contained in selftext - but what if you have both a body and images?

I also tried to see if Reddit's own embedding system was an option. Under posts you can find a "share -> embed" which brings you to a page like this https://embed.redditmedia.com/widgets/embed?url=https://www.reddit.com/r/IAmA/comments/afvl2w/im_scott_from_scotts_cheap_flights_my_profession/ - unfortunately it requires to embed a JS so it's not an option.

So the solution, be it API or JSON, requires a little bit of "figuring out" what's the logic since direct embedding can't be easily set up.

Also, the body is in markdown and can be quite long which means that it needs to be processed even just for being shortened for the liquid tag preview

[Link2Twenty]

I can see the pet's image is the body of the post
it's the URL, not the preview URL
"url": "https://i.redd.it/jpqodmc83ia21.jpg"

but what if you have both a body and images
You can't, the post can only be an image, a link or contain body text the platform doesn't let you mix and match.

it needs to be processed even just for being shortened for the liquid tag preview
I may be incorrect, but I think liquid tags in this manner only get the data once?

[Link2Twenty]

So the information I think we'd need from the JSON can be found like so.

All the following have the base json[0].data.children[0].data
For image post
author: Miaogua007
subreddit_name_prefixed: r/aww
created_utc: 1547549225.0
over_18: false
title: I've waited 28 years to finally havr my first pet. Everyone, meet Mycroft.
post_hint: image
permalink: /r/aww/comments/ag3s4b/ive_waited_28_years_to_finally_havr_my_first_pet/
url: https://i.redd.it/jpqodmc83ia21.jpg

For text/self post
author: scottkeyes
subreddit_name_prefixed: r/IAmA
created_utc: 1547470871
over_18: false
title: I'm Scott from Scott's Cheap Flights. My profession is finding cheap flights. Here to answer travel questions and help you find flights for the next 8 hours. AMA
post_hint: self
permalink: /r/IAmA/comments/afvl2w/im_scott_from_scotts_cheap_flights_my_profession/
selftext: I may have the world's best (...)

I'm not sure what other post_hints are valid.
The over_18 attribute indicates NSFW, perhaps we should block them or just show the title?

[cesc1989]

Hi @jessleenyc 👋

This issue looks very interesting and I'd like to tackle it. Could you provide or guide me how to start with liquid tags in devto?

I've read https://docs.dev.to/frontend/liquid-tags/ and took a look to some existing Liquid tags however I'd like to have a whole picture of the process of creating one.