maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add Next Tech Liquid Tag (#4958) [deploy]

Browse source 
* Add liquid tag for Next Tech

* Add liquid tag for Next Tech

* Use project share URL in liquid tag.

* Update docs and specs with share token URL.
This commit is contained in:
Andrew Sverdrup 2019-12-10 12:19:30 -08:00 • committed by Andy Zhao
parent df776b8748
commit 2af033fca9
6 changed files with 84 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
app/liquid_tags/nexttech_tag.rb Normal file
View file

@ -0,0 +1,37 @@
class NextTechTag < LiquidTagBase
PARTIAL = "liquids/nexttech".freeze
def initialize(tag_name, share_url, tokens)
super
@token = parse_share_url(share_url)
end
def render(_context)
ActionController::Base.new.render_to_string(
partial: PARTIAL,
locals: {
token: @token
},
)
end
private
# Returns the share token from the end of the share URL.
def parse_share_url(share_url)
clean_share_url = ActionController::Base.helpers.strip_tags(share_url).delete(" ").gsub(/\?.*/, "")
raise StandardError, "Invalid Next Tech share URL" unless valid_share_url?(clean_share_url)
clean_share_url.split("/").last
end
# Examples of valid share URLs:
# - https://nt.dev/s/123456abcdef
# - http://nt.dev/s/123456abcdef/
# - nt.dev/s/123456abcdef
def valid_share_url?(share_url)
(share_url =~ /^(?:(?:http|https):\/\/)?nt\.dev\/s\/[a-z0-9]{12}\/{0,1}$/)&.zero?
end
end
Liquid::Template.register_tag("nexttech", NextTechTag)

4
app/views/liquids/_nexttech.html.erb Normal file
View file

@ -0,0 +1,4 @@
<iframe
src="https://next.tech/projects/<%= token %>/embed"
style="width:100%; height:calc(350px + 8vw); border:0; border-radius: 4px; overflow:hidden;">
</iframe>

5
app/views/pages/_editor_guide_text.html.erb
View file

@ -262,6 +262,11 @@
<h3><strong>repl.it Embed</strong></h3>
<p>All you need is the URL after the domain name:</p>
<code>{% replit @WigWog/PositiveFineOpensource %}</code>
<h3><strong>Next Tech Embed</strong></h3>
<p>All you need is the share URL for your sandbox. You can get the share URL by clicking
the "Share" button in the top right when the sandbox is open.</p>
<p><img src="https://thepracticaldev.s3.amazonaws.com/i/r449xp8cay3383i139qv.png" /></p>
<code>{% nexttech https://nt.dev/s/6ba1fffbd09e %}</code>
<h3><strong>Instagram Embed</strong></h3>
<p>All you need is the Instagram post <code>id</code> from the URL:</p>
<code>{% instagram BXgGcAUjM39 %}</code>

1
docs/frontend/liquid-tags.md
View file

@ -46,6 +46,7 @@ Here is a bunch of liquid tags supported on DEV:
{% codesandbox ppxnl191zx %}
{% jsfiddle https://jsfiddle.net/link2twenty/v2kx9jcd %}
{% replit @WigWog/PositiveFineOpensource %}
{% nexttech https://nt.dev/s/6ba1fffbd09e %}
{% instagram BXgGcAUjM39 %}
{% speakerdeck 7e9f8c0fa0c949bd8025457181913fd0 %}
{% soundcloud https://soundcloud.com/user-261265215/dev-to-review-episode-1 %}

30
spec/liquid_tags/next_tech_tag_spec.rb Normal file
View file

@ -0,0 +1,30 @@
require "rails_helper"
RSpec.describe NextTechTag, type: :liquid_template do
describe "#link" do
let(:nexttech_link) { "https://nt.dev/s/6ba1fffbd09e" }
def generate_new_liquid(link)
Liquid::Template.register_tag("nexttech", NextTechTag)
Liquid::Template.parse("{% nexttech #{link} %}")
end
it "accepts nexttech link" do
liquid = generate_new_liquid(nexttech_link)
rendered_nexttech_iframe = liquid.render
Approvals.verify(rendered_nexttech_iframe, name: "nexttech_liquid_tag", format: :html)
end
it "accepts nexttech link with a / at the end" do
expect do
generate_new_liquid(nexttech_link + "/")
end.not_to raise_error
end
it "rejects invalid nexttech link" do
expect do
generate_new_liquid("https://nt.dev/s/1234567890z*")
end.to raise_error(StandardError)
end
end
end

7
spec/support/fixtures/approvals/nexttech_liquid_tag.approved.html Normal file
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 src="https://next.tech/projects/6ba1fffbd09e/embed" style="width:100%; height:calc(350px + 8vw); border:0; border-radius: 4px; overflow:hidden;">
</iframe>
</body>
</html>