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
This commit is contained in:
aRtoo 2019-11-05 06:43:52 -08:00 committed by Andy Zhao
parent 2569a0ac3d
commit b421ad908b
5 changed files with 63 additions and 0 deletions

View file

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

View file

@ -0,0 +1,9 @@
<iframe
height="<%= height %>"
src="<%= link %>"
scrolling="no"
frameborder="no"
loading="lazy"
allowtransparency="true"
style="width: 100%;">
</iframe>

View file

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

View file

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

View file

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