Canvas: Add support for liquid tags

[connecteev]

Liquid Tags were introduced by shopify and have been widely adopted in a lot of editors, CMS's and comment editors online. Liquid tags allow for a really rich publishing and consumption experience.

To that end, it would be really cool if Cnvs was able to do something like this:
https://dev.to/new#liquidtags (make sure you click on the '?' icon on the bottom to see the liquid tags guide, where this is adopted from)

The goal being to be able to allow embeds of any of the following:

Internal:

1. Article/Posts (Ex: here)
2. Comments.(Ex: https://dev.to/rhymes/comment/e07o)
3. Tags
4. Topics
5. Users (ex: https://dev.to/devteam/expanding-the-dev-core-team-5b0g)

External:

(popular ones only listed below)

1. Videos like Youtube
2. Twitter posts
3. Medium posts
4. Slideshare slides
5. Soundcloud audio snippet
6. Spotify song or audio snippet

Internal:

1. Article/Post Embeds (Ex: https://dev.to/devteam/medium-was-never-meant-to-be-a-part-of-the-developer-ecosystem-25a0)

using the full link of the article:

{% link https://www.mydomain.com/kazz/boost-your-productivity-using-markdown-1be %}

using the slug like this:

{% link kazz/boost-your-productivity-using-markdown-1be %}

1. Comment Embeds (example: https://dev.to/rhymes/comment/e07o)

All you need is the ID at the end of a comment URL. To get the comment link, click either the timestamp or the menu button in the top right corner on a comment and then click "Permalink". Here's an example:

{% devcomment 2d1a %}

1. Tag Embeds

All you need is the tag name:

{% tag git %}

1. Topic Embeds

All you need is the topic name:

{% topic ux %}

1. User Embeds: Example here

All you need is the username:

{% user jess %}

External:

(I took the most popular ones that made sense to me):

1. Video Embeds

All you need is the id from the URL.

YouTube: {% youtube dQw4w9WgXcQ %}
Vimeo: {% vimeo 193110695 %}

1. Twitter Embeds

Using the Twitter Liquid tag will allow the tweet to pre-render from the server, providing your reader with a better experience. All you need is the tweet id from the url.

{% twitter 834439977220112384 %}

1. Medium Embeds

Just enter the full URL of the Medium article you are trying to embed.

{% medium https://medium.com/s/story/boba-science-how-can-i-drink-a-bubble-tea-to-ensure-that-i-dont-finish-the-tea-before-the-bobas-7fc5fd0e442d %}

1. SlideShare Embed

All you need is the SlideShare key

{% slideshare rdOzN9kr1yK5eE %}

1. Soundcloud Embed

Just enter the full URL of the Soundcloud track you are trying to embed.

{% soundcloud https://soundcloud.com/user-261265215/dev-to-review-episode-1 %}

1. Spotify Embed

Enter the Spotify URI of the Spotify track / playlist / album / artist / podcast episode you are trying to embed.

      {% spotify spotify:episode:5V4XZWqZQJvbddd31n56mf %}

[austintoddj]

Wow that's some cool stuff! I've never known liquid tags were a thing, or at least named as such. Were you thinking they'd be built into the editor? Definitely worth exploring.

[connecteev]

Yeah, it is cool! I just discovered them myself.
Yes, built-into the editor to link to the internal + external resources mentioned above. Would be great for publishing, and also for UGC posts, which is what I'd like to do (similar to dev.to, which is open source, albeit built on RoR+preact btw)

[eleazarbr]

So for now.. it is not possible to embed a YouTube video in the post, right?

[austintoddj]

That's correct, the editor doesn't support that at this time.

[austintoddj]

As an update @eleazarbr, the next release will add support for embedding various links/media types in the editor. Stay tuned.

[austintoddj]

Closing this to consolidate all editor enhancements under https://github.com/austintoddj/canvas/issues/837