From b421ad908b125c8a031b596ea3ad79ad76ccb4cf Mon Sep 17 00:00:00 2001
From: aRtoo <raphaelg2012@gmail.com>
Date: Tue, 5 Nov 2019 06:43:52 -0800
Subject: [PATCH] Add JSitor liquid tag (#4657) [deploy]

* Request change
- Added specific error message
- changed jsitor to JSitor
- changed JSITOR_URL constant to URL_REGEXP
- added space between URL_REGEXP and initialize method

* created jsitor liquid tag
- created a jsitor_tag.rb for jsitor liquid core
- created partial (_jsitor.html.erb) for jsitor liquid tag

* created test for jsitor liquid tag
- created spec for jsitor liquid tag
- generated jsitor_liquid_tag.approved.html

* added suggestion change
- removed regex
- change the full link to embeddable id
- removed dead code(methods) due to change logic
- removed checking of link since embeddable id will be parse as string
- removed parts of the test
- change the guide explanation

* Added lazy loading on iframe
---
 app/liquid_tags/jsitor_tag.rb                 | 26 +++++++++++++++++++
 app/views/liquids/_jsitor.html.erb            |  9 +++++++
 app/views/pages/_editor_guide_text.html.erb   |  3 +++
 spec/liquid_tags/jsitor_tag_spec.rb           | 18 +++++++++++++
 .../approvals/jsitor_liquid_tag.approved.html |  7 +++++
 5 files changed, 63 insertions(+)
 create mode 100644 app/liquid_tags/jsitor_tag.rb
 create mode 100644 app/views/liquids/_jsitor.html.erb
 create mode 100644 spec/liquid_tags/jsitor_tag_spec.rb
 create mode 100644 spec/support/fixtures/approvals/jsitor_liquid_tag.approved.html

diff --git a/app/liquid_tags/jsitor_tag.rb b/app/liquid_tags/jsitor_tag.rb
new file mode 100644
index 000000000..40850d1eb
--- /dev/null
+++ b/app/liquid_tags/jsitor_tag.rb
@@ -0,0 +1,26 @@
+class JsitorTag < LiquidTagBase
+  PARTIAL = "liquids/jsitor".freeze
+
+  def initialize(tag_name, link_id, token)
+    super
+    @link = jsitor_link(link_id.strip)
+  end
+
+  def render(_context)
+    ActionController::Base.new.render_to_string(
+      partial: PARTIAL,
+      locals: {
+        link: @link,
+        height: 600
+      },
+    )
+  end
+
+  private
+
+  def jsitor_link(id)
+    "https://jsitor.com/embed/#{id}"
+  end
+end
+
+Liquid::Template.register_tag("jsitor", JsitorTag)
diff --git a/app/views/liquids/_jsitor.html.erb b/app/views/liquids/_jsitor.html.erb
new file mode 100644
index 000000000..b4b1f50bb
--- /dev/null
+++ b/app/views/liquids/_jsitor.html.erb
@@ -0,0 +1,9 @@
+<iframe
+  height="<%= height %>"
+  src="<%= link %>"
+  scrolling="no"
+  frameborder="no"
+  loading="lazy"
+  allowtransparency="true"
+  style="width: 100%;">
+</iframe>
diff --git a/app/views/pages/_editor_guide_text.html.erb b/app/views/pages/_editor_guide_text.html.erb
index d277f7fd7..7adb3abb9 100644
--- a/app/views/pages/_editor_guide_text.html.erb
+++ b/app/views/pages/_editor_guide_text.html.erb
@@ -328,6 +328,9 @@
         <h3><strong>Asciinema Embed</strong></h3>
         <p>All you need is the Asciinema id:</p>
         <code>{% asciinema 239367 %}</code>
+        <h3><strong>JSitor Liquid Tag</strong></h3>
+        <p>Copy JSitor embeddable link id. It is the last path of the link. ex: https://jsitor.com/embed/1QgJVmCam </p>
+        <code>{% jsitor 1QgJVmCam %}</code>
         <h3><strong>Parsing Liquid Tags as a Code Example</strong></h3>
         <p>To parse Liquid tags as code, simply wrap it with a single backtick or triple backticks.</p>
         <p><code>`{% mytag %}{{ site.SOMETHING }}{% endmytag %}`</code></p>
diff --git a/spec/liquid_tags/jsitor_tag_spec.rb b/spec/liquid_tags/jsitor_tag_spec.rb
new file mode 100644
index 000000000..b8e061dbf
--- /dev/null
+++ b/spec/liquid_tags/jsitor_tag_spec.rb
@@ -0,0 +1,18 @@
+require "rails_helper"
+
+RSpec.describe JsitorTag, type: :liquid_template do
+  describe "#link" do
+    let(:jsitor_embed_id) { "1QgJVmCam" }
+
+    def create_jsitor_liquid_tag(link)
+      Liquid::Template.register_tag("jsitor", JsitorTag)
+      Liquid::Template.parse("{% jsitor #{link} %}")
+    end
+
+    it "renders jsitor liquid tag" do
+      liquid = create_jsitor_liquid_tag(jsitor_embed_id)
+      render_jsitor_iframe = liquid.render
+      Approvals.verify(render_jsitor_iframe, name: "jsitor_liquid_tag", format: :html)
+    end
+  end
+end
diff --git a/spec/support/fixtures/approvals/jsitor_liquid_tag.approved.html b/spec/support/fixtures/approvals/jsitor_liquid_tag.approved.html
new file mode 100644
index 000000000..08ca29c2d
--- /dev/null
+++ b/spec/support/fixtures/approvals/jsitor_liquid_tag.approved.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <body>
+    <iframe height="600" src="https://jsitor.com/embed/1QgJVmCam" scrolling="no" frameborder="no" loading="lazy" allowtransparency="true" style="width: 100%;">
+</iframe>
+  </body>
+</html>