[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

@@ -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
 

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)

app/views/articles/_fitvids.html.erb

@@ -1,9 +1,9 @@
 <script async>
   if(document.querySelectorAll('.fluidvids').length == 0) {
-    window.Fluidvids=function(a,b){"use strict";var c,d,e=b.head||b.head,f=".fluidvids-elem{position:absolute;top:0px;left:0px;width:100%;height:100%;border:none;}.fluidvids{width:100%;position:relative;}",g=function(a){return c=new RegExp("^(https?:)?//(?:"+d.join("|")+").*$","i"),c.test(a)},h=function(a){var c=b.createElement("div"),d=a.parentNode,e=100*(parseInt(a.height?a.height:a.offsetHeight,10)/parseInt(a.width?a.width:a.offsetWidth,10));d.insertBefore(c,a),a.className+=" fluidvids-elem",c.className+=" fluidvids",c.style.paddingTop=e+"%",c.appendChild(a)},i=function(){var a=b.createElement("div");a.innerHTML="<p>x</p><style>"+f+"</style>",e.appendChild(a.childNodes[1])},j=function(a){var c=a||{},e=c.selector||"iframe";d=c.players||["www.youtube.com","player.vimeo.com"];for(var f=b.querySelectorAll(e),j=0;j<f.length;j++){var k=f[j];g(k.src)&&h(k)}i()};return{init:j}}(window,document);
+    window.Fluidvids=function(a,b){"use strict";var c,d,e=b.head||b.head,f=".fluidvids-elem{position:absolute;top:0px;left:0px;width:100%;height:100%;border:none;}.fluidvids{width:100%;position:relative;}",g=function(a){return c=new RegExp("^(https?:)?//(?:"+d.join("|")+").*$","i"),c.test(a)},h=function(a){var c=b.createElement("div"),d=a.parentNode,e=100*(parseInt(a.height?a.height:a.offsetHeight,10)/parseInt(a.width?a.width:a.offsetWidth,10));d.insertBefore(c,a),a.className+=" fluidvids-elem",c.className+=" fluidvids",c.style.paddingTop=e+"%",c.appendChild(a)},i=function(){var a=b.createElement("div");a.innerHTML="<p>x</p><style>"+f+"</style>",e.appendChild(a.childNodes[1])},j=function(a){var c=a||{},e=c.selector||"iframe";d=c.players||["www.youtube.com","player.vimeo.com","clips.twitch.tv"];for(var f=b.querySelectorAll(e),j=0;j<f.length;j++){var k=f[j];g(k.src)&&h(k)}i()};return{init:j}}(window,document);
     Fluidvids.init({
       selector: ['iframe', 'object'], // runs querySelectorAll()
-      players: ['www.youtube.com', 'player.vimeo.com'] // players to support
+      players: ['www.youtube.com', 'player.vimeo.com', 'clips.twitch.tv'] // players to support
     });
   }
 </script>

app/views/liquids/_twitch.html.erb

@@ -0,0 +1,6 @@
+<iframe
+    src="https://clips.twitch.tv/embed?autoplay=false&clip=<%= slug %>&parent=<%= url %>"
+    height="<%= height %>"
+    width="<%= width %>"
+    allowfullscreen="true">
+</iframe>

app/views/pages/_editor_guide_text.html.erb

@@ -186,6 +186,7 @@
       <ul>
         <li><strong>YouTube:</strong> <code>{% youtube dQw4w9WgXcQ %}</code></li>
         <li><strong>Vimeo:</strong> <code>{% vimeo 193110695 %}</code></li>
+        <li><strong>Twitch:</strong> <code>{% twitch ClumsyPrettiestOilLitFam %}</code></li>
       </ul>
       <h3><strong>Medium Embed</strong></h3>
       <p>Just enter the full URL of the Medium article you are trying to embed.</p>

app/views/pages/_editor_liquid_help.html.erb

@@ -128,6 +128,7 @@
     <ul>
       <li><strong>YouTube:</strong> <code>{% youtube dQw4w9WgXcQ %}</code></li>
       <li><strong>Vimeo:</strong> <code>{% vimeo 193110695 %}</code></li>
+      <li><strong>Twitch:</strong> <code>{% twitch ClumsyPrettiestOilLitFam %}</code></li>
     </ul>
     <h3>Medium Embed</h3>
     <p>Just enter the full URL of the Medium article you are trying to embed.</p>

app/views/pages/markdown_basics.html.erb

@@ -58,6 +58,7 @@
     <p>All you need is the <code>id</code> from the URL.</p>
     <code>{% youtube 9z-Pdfxxdyo %}</code><br />
     <code>{% vimeo 193110695 %}</code><br />
+    <code>{% twitch ClumsyPrettiestOilLitFam %}</code><br />
 
     <h3><strong>Instagram Embed</strong></h3>
     <p>All you need is the Instagram post <code>id</code> from the URL.</p>

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 %}

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