From 348aa3df150272d9a571a63af4d46b225c13bc9f Mon Sep 17 00:00:00 2001 From: Rachael Wright-Munn Date: Mon, 5 Oct 2020 11:55:27 -0400 Subject: [PATCH] [deploy] Add twitch liquid tags (#10577) * Add a Liquid Tag specifically for Twitch clips. These will embed Twitch Clips in articles and comments. * Update documentation to incorporate Twitch clip liquid tags. * Include Twitch Clips in video embed logic * Making a small change to rebuild --- app/helpers/articles_helper.rb | 1 + app/liquid_tags/twitch_tag.rb | 37 ++++++++++++++++++++ app/views/articles/_fitvids.html.erb | 4 +-- app/views/liquids/_twitch.html.erb | 6 ++++ app/views/pages/_editor_guide_text.html.erb | 1 + app/views/pages/_editor_liquid_help.html.erb | 1 + app/views/pages/markdown_basics.html.erb | 1 + docs/frontend/liquid-tags.md | 1 + spec/liquid_tags/twitch_tag_spec.rb | 27 ++++++++++++++ 9 files changed, 77 insertions(+), 2 deletions(-) create mode 100644 app/liquid_tags/twitch_tag.rb create mode 100644 app/views/liquids/_twitch.html.erb create mode 100644 spec/liquid_tags/twitch_tag_spec.rb diff --git a/app/helpers/articles_helper.rb b/app/helpers/articles_helper.rb index 95ea06888..dc172c5f8 100644 --- a/app/helpers/articles_helper.rb +++ b/app/helpers/articles_helper.rb @@ -14,6 +14,7 @@ module ArticlesHelper article.processed_html.include?("youtube.com/embed/") || article.processed_html.include?("player.vimeo.com") || + article.processed_html.include?("clips.twitch.tv/embed") || article.comments_blob.include?("youtube") end diff --git a/app/liquid_tags/twitch_tag.rb b/app/liquid_tags/twitch_tag.rb new file mode 100644 index 000000000..1be23df5e --- /dev/null +++ b/app/liquid_tags/twitch_tag.rb @@ -0,0 +1,37 @@ +class TwitchTag < LiquidTagBase + PARTIAL = "liquids/twitch".freeze + + def initialize(_tag_name, slug, _parse_context) + super + @url = parsed_url(SiteConfig.app_domain) + @slug = parsed_slug(slug) + @width = 710 + @height = 399 + end + + def render(_context) + ApplicationController.render( + partial: PARTIAL, + locals: { + url: @url, + slug: @slug, + width: @width, + height: @height + }, + ) + end + + private + + # Strip out port number because it confuses Twitch + def parsed_url(url) + url.split(":")[0] + end + + # prevent param injection + def parsed_slug(slug) + slug.strip.split("&")[0] + end +end + +Liquid::Template.register_tag("twitch", TwitchTag) diff --git a/app/views/articles/_fitvids.html.erb b/app/views/articles/_fitvids.html.erb index 1391d8bc3..f4916b79b 100644 --- a/app/views/articles/_fitvids.html.erb +++ b/app/views/articles/_fitvids.html.erb @@ -1,9 +1,9 @@ diff --git a/app/views/liquids/_twitch.html.erb b/app/views/liquids/_twitch.html.erb new file mode 100644 index 000000000..c490d1156 --- /dev/null +++ b/app/views/liquids/_twitch.html.erb @@ -0,0 +1,6 @@ + diff --git a/app/views/pages/_editor_guide_text.html.erb b/app/views/pages/_editor_guide_text.html.erb index d2b042928..d51d5b616 100644 --- a/app/views/pages/_editor_guide_text.html.erb +++ b/app/views/pages/_editor_guide_text.html.erb @@ -186,6 +186,7 @@

Medium Embed

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

diff --git a/app/views/pages/_editor_liquid_help.html.erb b/app/views/pages/_editor_liquid_help.html.erb index 5271695a1..c87cdcb47 100644 --- a/app/views/pages/_editor_liquid_help.html.erb +++ b/app/views/pages/_editor_liquid_help.html.erb @@ -128,6 +128,7 @@

Medium Embed

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

diff --git a/app/views/pages/markdown_basics.html.erb b/app/views/pages/markdown_basics.html.erb index 21e15e7fc..0fd4a68a4 100644 --- a/app/views/pages/markdown_basics.html.erb +++ b/app/views/pages/markdown_basics.html.erb @@ -58,6 +58,7 @@

All you need is the id from the URL.

{% youtube 9z-Pdfxxdyo %}
{% vimeo 193110695 %}
+ {% twitch ClumsyPrettiestOilLitFam %}

Instagram Embed

All you need is the Instagram post id from the URL.

diff --git a/docs/frontend/liquid-tags.md b/docs/frontend/liquid-tags.md index dbe3891ba..b3694f384 100644 --- a/docs/frontend/liquid-tags.md +++ b/docs/frontend/liquid-tags.md @@ -40,6 +40,7 @@ Here is a bunch of liquid tags supported on Forem: {% github forem/forem %} {% youtube dQw4w9WgXcQ %} {% vimeo 193110695 %} +{% twitch ClumsyPrettiestOilLitFam %} {% slideshare rdOzN9kr1yK5eE %} {% codepen https://codepen.io/twhite96/pen/XKqrJX %} {% stackblitz ball-demo %} diff --git a/spec/liquid_tags/twitch_tag_spec.rb b/spec/liquid_tags/twitch_tag_spec.rb new file mode 100644 index 000000000..23abff33d --- /dev/null +++ b/spec/liquid_tags/twitch_tag_spec.rb @@ -0,0 +1,27 @@ +require "rails_helper" +require "nokogiri" + +RSpec.describe TwitchTag, type: :liquid_tag do + let(:slug) { "CuteSpicyNostrilDoritosChip" } + + def assert_parses(slug, token) + liquid = Liquid::Template.parse("{% twitch #{token} %}").render + expect(liquid).to include "https://clips.twitch.tv/embed?autoplay=false&clip=#{slug}&parent=localhost" + end + + it "accepts twitch clip slug" do + assert_parses slug, slug + end + + it "accepts twitch clip slug with wonky whitespace" do + assert_parses slug, " #{slug} \t" + end + + it "forbids inserting autoplay option" do + assert_parses slug, "#{slug}&autoplay=true" + end + + it "forbids inserting mute option" do + assert_parses slug, "#{slug}&muted=true" + end +end