-
-
Save anonymous/a930a1ad83bb41fb827b to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$ MOJO_USERAGENT_DEBUG=1 perl -Mojo -E 'g("mojolicio.us")' | |
-- Blocking request (http://mojolicio.us) | |
-- Connect (http:mojolicio.us:80) | |
-- Client >>> Server (http://mojolicio.us) | |
GET / HTTP/1.1 | |
Accept-Encoding: gzip | |
Host: mojolicio.us | |
User-Agent: Mojolicious (Perl) | |
Content-Length: 0 | |
Connection: keep-alive | |
-- Client <<< Server (http://mojolicio.us) | |
HTTP/1.1 200 OK | |
Server: Mojolicious (Perl) | |
Content-Type: text/html;charset=UTF-8 | |
Content-Length: 11527 | |
Connection: keep-alive | |
Date: Sat, 17 Jan 2015 16:35:51 GMT | |
<!doctype html><html> | |
<head> | |
<link rel="search" type="application/opensearchdescription+xml" | |
href="/opensearch.xml" title="Mojolicious" /> | |
<title> | |
Mojolicious - Perl real-time web framework | |
</title> | |
<script src="/mojo/prettify/run_prettify.js"></script> | |
<link href="/mojo/prettify/prettify-mojo-light.css" rel="stylesheet" /> | |
<style>/*<![CDATA[*/ | |
a { color: inherit } | |
a:hover { color: #2a2a2a } | |
a img { border: 0 } | |
body { | |
background: url(/mojo/pinstripe-light.png); | |
color: #445555; | |
font: 0.9em 'Helvetica Neue', Helvetica, sans-serif; | |
font-weight: normal; | |
line-height: 1.5em; | |
margin: 0; | |
} | |
code { | |
background-color: rgba(0, 0, 0, 0.04); | |
border-radius: 3px; | |
font: 0.9em Consolas, Menlo, Monaco, Courier, monospace; | |
padding: 0.3em; | |
} | |
pre { | |
background: url(/mojo/stripes.png); | |
border: 1px solid #d1d1d1; | |
border-radius: 3px; | |
box-shadow: 0 1px #fff, inset -1px 1px 4px rgba(0, 0, 0, 0.1); | |
color: #4d4d4c; | |
font: 0.9em Consolas, Menlo, Monaco, Courier, monospace; | |
line-height: 1.5em; | |
padding: 1em; | |
padding-bottom: 1.5em; | |
padding-top: 1.5em; | |
text-align: left; | |
text-shadow: #eee 0 1px 0; | |
white-space: pre-wrap; | |
} | |
#footer { | |
padding-top: 1em; | |
text-align: center; | |
} | |
/*]]>*/</style> | |
<link href="/css/index.css" rel="stylesheet" /> | |
<script>//<![CDATA[ | |
var gaJsHost = | |
(("https:" == document.location.protocol) ? "https://ssl." : "http://www."); | |
document.write(unescape( | |
"%3Cscript src='" | |
+ gaJsHost | |
+ "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E" | |
)); | |
//]]></script><script>//<![CDATA[ | |
try { | |
var pageTracker = _gat._getTracker("UA-7866593-1"); | |
pageTracker._trackPageview(); | |
} catch(err) {} | |
//]]></script> | |
</head> | |
<body><a href="http://kraih.spreadshirt.com"> | |
<img style="position: absolute; top: 0; left: 0; border: 0;" | |
src="/t-shirts.png" | |
alt="T-Shirts"> | |
</a> | |
<a href="https://github.com/kraih/mojo"> | |
<img style="position: absolute; top: 0; right: 0; border: 0;" | |
src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" | |
alt="Fork me on GitHub"> | |
</a> | |
<div id="fun"> | |
<a href="https://metacpan.org/release/Mojolicious"> | |
<img src="/unicorn.png" /> | |
</a> <img id="balloon" src="/balloon.png" /> | |
</div> | |
<script src="/mojo/jquery/jquery.js"></script> | |
<div id="mojobar"> | |
<style scoped="scoped"> | |
#mojobar { | |
b | |
-- Client <<< Server (http://mojolicio.us) | |
ackground-color: #1a1a1a; | |
background: -webkit-linear-gradient(top, #2a2a2a 0%, #000 100%); | |
background: -moz-linear-gradient(top, #2a2a2a 0%, #000 100%); | |
background: linear-gradient(top, #2a2a2a 0%, #000 100%); | |
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6); | |
height: 46px; | |
overflow: hidden; | |
position: absolute; | |
text-align: right; | |
vertical-align: middle; | |
width: 100%; | |
z-index: 1000; | |
} | |
#mojobar-logo { | |
float: left; | |
margin-left: 5em; | |
padding-top: 3px; | |
} | |
#mojobar-links { | |
display:table-cell; | |
float: right; | |
height: 60px; | |
margin-right: 5em; | |
margin-top: 0.8em; | |
} | |
#mojobar-links a { | |
color: #ccc; | |
font: 1em 'Helvetica Neue', Helvetica, sans-serif; | |
font-weight: 300; | |
margin-left: 0.5em; | |
text-decoration: none; | |
transition: all 200ms ease-in-out; | |
} | |
#mojobar-links a:hover { color: #fff } | |
#mojobar-links input { | |
border: 0; | |
border-radius: 10px; | |
display: inline; | |
margin-left: 1em; | |
padding: 3px; | |
} | |
#mojobar-links input:focus { outline: 0 } | |
#mojobar-links form { display: inline } | |
.animated { transition: top 0.2s ease-in-out } | |
</style> | |
<div id="mojobar-logo"> | |
<a href="http://mojolicio.us"> | |
<img alt="Mojolicious logo" src="/mojo/logo-white.png" /> | |
</a> </div> | |
<div id="mojobar-links"> | |
<a href="http://mojolicio.us/perldoc">Documentation</a> | |
<a href="https://github.com/kraih/mojo/wiki">Wiki</a> | |
<a href="https://github.com/kraih/mojo">GitHub</a> | |
<a href="https://metacpan.org/release/Mojolicious/">CPAN</a> | |
<a href="https://groups.google.com/group/mojolicious">MailingList</a> | |
<a href="http://blog.kraih.com">Blog</a> | |
<a href="https://twitter.com/kraih">Twitter</a> | |
<form action="https://www.google.com/cse" target="_blank"> | |
<input name="cx" type="hidden" value="014527573091551588235:pwfplkjpgbi" /> | |
<input name="ie" type="hidden" value="UTF-8" /> | |
<input name="q" placeholder="Search" type="search" /> | |
</form> | |
</div> | |
</div> | |
<script> | |
var mojobar = $('#mojobar'); | |
var mojobarHeight = mojobar.outerHeight(); | |
function fixOffset() { | |
var offset = $(window.location.hash).offset(); | |
if (offset) { | |
$('html, body').animate({scrollTop: offset.top - mojobarHeight}, 1); | |
} | |
} | |
$(window).load(function () { | |
if (window.location.hash) { | |
fixOffset(); | |
} | |
var start = mojobar.offset().top; | |
var fixed; | |
var lastScrollTop = start; | |
$(window).scroll(function () { | |
var st = $(window).scrollTop(); | |
if (!fixed && st > start) { | |
fixed = true; | |
mojobar.css('position', 'fixed').css('top', 0); | |
} else if (fixed && st <= start) { | |
fixed = false; | |
mojobar.removeClass('animated'); | |
mojobar.css('position', 'absolute').css('top', start + 'px'); | |
} | |
else if (fixed && (Math.abs(lastScrollTop - st) > 100)) { | |
if (!mojobar.hasClass('animated')) { | |
mojobar.addClass('animated'); | |
} | |
if (st > lastScrollTop && st > (mojobarHeight + start + 250)) { | |
mojobar.css('top', 0 - (mojobarHeight + 5)); | |
} else if (st + $(window).height() < $(document).height()) { | |
mojobar.css('top', 0); | |
} | |
lastScrollTop = st; | |
} | |
}); | |
}); | |
$(document).ready(function () { | |
$('a[href^="#"]').addClass('mojoscroll'); | |
$(".mojoscroll").click(function(e) { | |
e.preventDefault(); | |
e.stopPropagation(); | |
var hash = "#" + this.href.split("#")[1]; | |
var target = $(hash); | |
var old = target.attr('id'); | |
target.attr('id', ''); | |
location.hash = hash; | |
target.attr('id', old); | |
fixOffset(); | |
}); | |
}); | |
</script> | |
<div id="wrapperlicious"> | |
<div id="introduction"> | |
<h1> | |
A next generation web framework for the Perl programming language. | |
</h1> | |
<p> | |
Back in the early days of the web, many people learned Perl because of a | |
wonderful Perl library called | |
<a href="https://metacpan.org/module/CGI" target="_blank">CGI</a>. It | |
was simple enough to get started | |
-- Client <<< Server (http://mojolicio.us) | |
without knowing much about the language | |
and powerful enough to keep you going, learning by doing was much fun. | |
While most of the techniques used are outdated now, the idea behind it | |
is not. Mojolicious is a new attempt at implementing this idea using | |
state of the art technology. | |
</p> | |
<h2>Features</h2> | |
<ul> | |
<li> | |
An amazing real-time web framework, allowing you to easily grow single | |
file prototypes into well-structured web applications. | |
<blockquote> | |
<p> | |
Powerful out of the box with RESTful routes, plugins, commands, | |
Perl-ish templates, content negotiation, session management, | |
form validation, testing framework, static file server, first | |
class Unicode support and much more for you to discover. | |
</p> | |
</blockquote> | |
</li> | |
<li> | |
Very clean, portable and object-oriented pure-Perl API with no hidden | |
magic and no requirements besides Perl 5.20.0 (versions as old as | |
5.10.1 can be used too, but may require additional CPAN modules to be | |
installed) | |
</li> | |
<li> | |
Full stack HTTP and WebSocket client/server implementation with IPv6, | |
TLS, SNI, IDNA, HTTP/SOCKS5 proxy, Comet (long polling), keep-alive, | |
connection pooling, timeout, cookie, multipart and gzip compression | |
support. | |
</li> | |
<li> | |
Built-in non-blocking I/O web server, supporting multiple event loops | |
as well as optional preforking and hot deployment, perfect for | |
embedding. | |
</li> | |
<li> | |
Automatic CGI and | |
<a href="http://plackperl.org" target="_blank">PSGI</a> detection. | |
</li> | |
<li>JSON and HTML/XML parser with CSS selector support.</li> | |
<li> | |
Fresh code based upon years of experience developing | |
<a href="http://catalystframework.org" target="_blank">Catalyst</a>. | |
</li> | |
</ul> | |
<h2>Installation</h2> | |
<p>All you need is a one-liner, it takes less than a minute.</p> | |
<pre>$ curl -L https://cpanmin.us | perl - -M https://cpan.metacpan.org -n Mojolicious</pre> | |
<p> | |
We recommend the use of a | |
<a href="http://perlbrew.pl" target="_blank">Perlbrew</a> environment. | |
</p> | |
<h2>Getting Started</h2> | |
<p>These three lines are a whole web application.</p> | |
<pre class="prettyprint">use Mojolicious::Lite; | |
get '/' => {text => 'I ♥ Mojolicious!'}; | |
app->start;</pre> | |
<p> | |
To run this example with the built-in development web server just put | |
the code into a file and start it with <code>morbo</code>. | |
</p> | |
<pre>$ morbo hello.pl | |
Server available at http://127.0.0.1:3000. | |
$ curl http://127.0.0.1:3000/ | |
I ♥ Mojolicious!</pre> | |
<h2>Duct tape for the HTML5 web</h2> | |
<p> | |
Use all the latest Perl and HTML features in beautiful single file | |
prototypes like this one, and grow them easily into well-structured | |
applications. | |
</p> | |
<pre class="prettyprint">use Mojolicious::Lite; | |
use 5.20.0; | |
use experimental 'signatures'; | |
# Render template "index.html.ep" from the DATA section | |
get '/' => {template => 'index'}; | |
# WebSocket service used by the template to extract the title from a web site | |
websocket '/title' => sub ($c) { | |
$c->on(message => sub ($c, $msg) { | |
my $title = $c->ua->get($msg)->res->dom->at('title')->text; | |
$c->send($title); | |
}); | |
}; | |
app->start; | |
__DATA__ | |
@@ index.html.ep | |
% my $url = url_for 'title'; | |
<script> | |
var ws = new WebSocket('<%= $url->to_abs %>'); | |
ws.onmessage = function (event) { document.body.innerHTML += event.data }; | |
ws.onopen = function (event) { ws.send('http://mojolicio.us') }; | |
</script></pre> | |
<h1>Want to know more?</h1> | |
<p> | |
Take a look at our excellent | |
<a href="http://mojolicio.us/perldoc">documentation</a>! | |
</p> | |
</div> | |
</div> | |
<div id="footer"> | |
<a href="http://mojolicio.us"> | |
<img alt="Mojolicious logo" src="/mojo/logo-black.png" /> | |
</a></div> | |
-- Client <<< Server (http://mojolicio.us) | |
<script>//<![CDATA[ | |
$(window).on("mousemove", function (e) { | |
var height = $(document).height(); | |
var positionY = -(height - 2 * e.screenY) / height; | |
var width = $(document).width(); | |
var positionX = -(width - 2 * e.screenX) / width; | |
$("#balloon").css({ | |
"right": 10 + positionX + "%", | |
"top" : 220 + (positionY * -25) + "px"} | |
); | |
}); | |
$(window).on("mousemove", function (e) { | |
var width = $(document).width(); | |
var position = -(width - 2 * e.screenX) / width; | |
$("#fun").css({"backgroundPosition": 0 + (position * 3) + "px 0"}); | |
}); | |
//]]></script></body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment