#!/usr/bin/env perl
use lib 'lib';
# These pastebin provides expire
$ENV{TEST_FEDORA} ||= 'TdDtYw1YSaEDqIOqVYlWbw';
$ENV{TEST_PERLBOT} ||= 'xogtbq';
$ENV{TEST_SHADOWCAT} ||= '586840';
helper embedder => sub { state $e = LinkEmbedder->new };
get '/' => 'index';
get '/oembed' => sub {
my $c = shift;
my $url = $c->param('url');
if ($c->stash('restricted') and !grep { $_ eq $url } @{$c->stash('predefined')}) {
return $c->render(json => {error => "LINK_EMBEDDER_RESTRICTED is set."});
}
$c->embedder->serve($c);
};
app->defaults(
restricted => $ENV{LINK_EMBEDDER_RESTRICTED} ? 1 : 0,
predefined => [
"https://perlbot.pl/p/$ENV{TEST_PERLBOT}",
"http://paste.scsys.co.uk/$ENV{TEST_SHADOWCAT}",
"spotify:track:0aBi2bHHOf3ZmVjt3x00wv",
]
);
$ENV{X_REQUEST_BASE} and hook before_dispatch => sub {
my $c = shift;
return unless my $base = $c->req->headers->header('X-Request-Base');
$c->req->url->base(Mojo::URL->new($base));
};
app->start;
__DATA__
@@ index.html.ep
<!DOCTYPE html>
<html>
<head>
<title>oEmbed example server</title>
<style>
.container { max-width: 40rem; margin: 3rem auto; }
a { color: #0078e7; }
ol.predefined { display: none; }
pre.data { color: #999; margin-top: 3rem; padding-top: 1rem; border-top: 1px solid #ddd; }
[name="url"] { width: 100%; }
.le-card {
overflow: hidden;
border: 1px solid #ccc;
border-radius: 5px;
padding: 1rem;
margin: 0;
}
.le-image-card h3,
.le-image-card p,
.le-image-card .le-meta {
margin-left: calc(100px + 1rem);
}
.le-card h3 {
margin-top: 0;
}
.le-card .le-meta,
.le-card .le-meta a {
font-size: 0.9rem;
color: #333;
}
.le-card .le-thumbnail,
.le-card .le-thumbnail-placeholder {
float: left;
}
.le-card .le-thumbnail img,
.le-card .le-thumbnail-placeholder img {
width: 100px;
}
.le-card .le-meta .le-goto-link a:before {
content: "Read more";
}
.le-provider-link ~ .le-goto-link:before,
.le-author-link ~ .le-goto-link:before {
content: "\2013\00a0";
}
.le-goto-link span {
display: none;
}
.le-paste {
background-color: #f8f8f8;
}
.le-paste pre {
max-height: 300px;
overflow: auto;
}
.le-paste .le-meta {
background-color: #dfdfdf;
padding: 0.2em 0.5rem;
}
.le-paste pre {
padding: 0.5rem;
}
.le-paste .le-provider-link:before {
content: "Hosted by ";
}
</style>
</head>
<body>
<div class="container">
<h1>oEmbed / LinkEmbedder example server</h1>
%= form_for '/oembed', class => 'pure-form pure-form-stacked', begin
% if ($restricted) {
<p>
<button type="button" class="pure-button pure-button-primary predefined">Render predefined</button>
</p>
% } else {
<label for="form_url">URL</label>
%= text_field 'url', value => 'https://git.io/aKhMuA', id => 'form_url'
<span class="pure-form-message">Enter any URL, and see how it renders below</span>
<p>
<button type="submit" class="pure-button pure-button-primary">Render URL</button>
<button type="button" class="pure-button pure-button-secondary predefined">Render predefined</button>
</p>
% }
% end
<h2 class="url">&nbsp;</h2>
<div class="html">Enter an URL and hit <i>Render!</i> to see the HTML snippet here.</div>
<pre class="data"></pre>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<script async src="//platform.instagram.com/en_US/embeds.js"></script>
%= javascript begin
var form = document.querySelector("form");
var url = location.href.match(/url=([^\&]+)/);
var predefined = <%== Mojo::JSON::to_json($predefined) %>;
var predefined_index = location.href.match(/\#(\d+)/);
predefined_index = predefined_index ? predefined_index[1] : -1;
function embed(e, url) {
if (e.preventDefault) e.preventDefault();
var req = new XMLHttpRequest();
req.open("GET", form.action + "?url=" + encodeURIComponent(url));
document.querySelector("h2.url").innerHTML = "Fetching " + url + "...";
req.onload = function(e) {
var oembed = JSON.parse(this.responseText);
document.querySelector("h2.url").innerHTML = url;
document.querySelector("div.html").innerHTML = oembed.html;
console.log(oembed.html);
delete oembed.html;
document.querySelector("pre.data").innerHTML = JSON.stringify(oembed, undefined, 2);
if (oembed.provider_name == 'Twitter') twttr.widgets.load();
if (oembed.provider_name == 'Instagram') instgrm.Embeds.process();
};
req.send();
}
form.addEventListener("submit", function(e) { embed(e, form.elements.url.value); });
document.querySelector("button.predefined").addEventListener("click", function(e) {
location.hash = ++predefined_index;
if (!predefined[predefined_index]) predefined_index = 0;
embed(e, predefined[predefined_index]);
});
if (predefined_index >= 0) {
embed({}, predefined[predefined_index]);
}
else if(url) {
embed({}, decodeURIComponent(url[1]));
}
% end
</div>
</body>
</html>