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

codepen embed add default-tab param (#880)

Browse source 
* codepen embed add default-tab param

* add codepen default-tab documentation in help tab
This commit is contained in:
Nathan Sebhastian 2018-11-08 01:31:20 +07:00 • committed by Ben Halpern
parent 94e55558f1
commit 76f6a8f9df
4 changed files with 41 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
app/liquid_tags/codepen_tag.rb
View file

@ -2,13 +2,14 @@ class CodepenTag < LiquidTagBase
def initialize(tag_name, link, tokens)
super
@link = parse_link(link)
@build_options = parse_options(link)
@height = 600
end
def render(_context)
html = <<-HTML
<iframe height="#{@height}"
src="#{@link}?height=500&default-tab=result&embed-version=2"
src="#{@link}?height=#{@height}&#{@build_options}&embed-version=2"
scrolling="no"
frameborder="no"
allowtransparency="true"
@ -20,10 +21,32 @@ class CodepenTag < LiquidTagBase
private
def valid_option(option)
option.match(/(default-tab\=\w(\,\w)?)/)
end
def parse_options(input)
stripped_link = ActionController::Base.helpers.strip_tags(input)
_, *options = stripped_link.split(" ")
# Validation
validated_options = options.map { |o| valid_option(o) }.reject { |e| e == nil }
raise StandardError, "Invalid Options" unless options.empty? || !validated_options.empty?
option = options.join("&")
if option.blank?
"default-tab=result"
else
option
end
end
def parse_link(link)
stripped_link = ActionController::Base.helpers.strip_tags(link)
raise_error unless valid_link?(stripped_link)
stripped_link.gsub("/pen/", "/embed/")
the_link = stripped_link.split(" ").first
raise_error unless valid_link?(the_link)
the_link.gsub("/pen/", "/embed/")
end
def valid_link?(link)

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

@ -122,6 +122,13 @@
<p>All you need is the full CodePen <code>link</code>, ending in the pen ID code, as follows:</p>
<code>{% codepen https://codepen.io/twhite96/pen/XKqrJX %}</code>
<dl>
<dt><code>default-tab</code></dt>
<dd>
Add default-tab parameter to your CodePen embed tag. Default to <i>result</i><br/>
<code>{% codepen https://codepen.io/twhite96/pen/XKqrJX default-tab=js,result %}</code>
</dd>
<h3><strong>RunKit Embed</strong></h3>
<p>Put executable code within a runkit liquid block, as follows:</p>
<pre>{% runkit<br>// hidden setup JavaScript code goes in this preamble area<br>const hiddenVar = 42<br>%}<br>// visible, reader-editable JavaScript code goes here<br>console.log(hiddenVar)<br>{% endrunkit %} <br></pre>

7
spec/liquid_tags/codepen_tag_spec.rb
View file

@ -3,6 +3,7 @@ require "rails_helper"
RSpec.describe CodepenTag, type: :liquid_template do
describe "#link" do
let(:codepen_link) { "https://codepen.io/twhite96/pen/XKqrJX" }
let(:codepen_link_with_default_tab) { "https://codepen.io/twhite96/pen/XKqrJX default-tab=js,result" }
xss_links = %w(
//evil.com/?codepen.io
@ -34,6 +35,12 @@ RSpec.describe CodepenTag, type: :liquid_template do
end.to raise_error(StandardError)
end
it "accepts codepen link with a default-tab parameter" do
expect do
generate_new_liquid(codepen_link_with_default_tab)
end.not_to raise_error
end
it "rejects XSS attempts" do
xss_links.each do |link|
expect { generate_new_liquid(link) }.to raise_error(StandardError)

2
spec/support/fixtures/approvals/codepen_liquid_tag.approved.html
View file

@ -1,6 +1,6 @@
<!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://codepen.io/twhite96/embed/XKqrJX ?height=500&amp;default-tab=result&amp;embed-version=2" scrolling="no" frameborder="no" allowtransparency="true" style="width: 100%;"> </iframe>
<iframe height="600" src="https://codepen.io/twhite96/embed/XKqrJX?height=600&amp;default-tab=result&amp;embed-version=2" scrolling="no" frameborder="no" allowtransparency="true" style="width: 100%;"> </iframe>
</body>
</html>