taiju/app.pl

## app.pl
#!/usr/bin/env perl
use Mojolicious::Lite;

app->types->type(coffee => 'text/coffeescript; charset=utf-8');

under sub {
  my $self = shift;
  my $is_pjax = $self->param('_pjax') ? 1 : 0;
  $self->layout('default') unless $self->req->is_xhr || $is_pjax;
  1;
};

get '/' => 'index';
get '/:page' => sub {
  my $self = shift;
  $self->render($self->param('page'));
};

app->start;
__DATA__

@@ layouts/default.html.ep
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel="stylesheet/less" type="text/css" href="/app.less?_pjax=true" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.3.0/less-1.3.0.min.js" type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.3.1/coffee-script.min.js" type="text/javascript"></script>
    <script src="/app.coffee?_pjax=true" type="text/coffeescript"></script>
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <header>
      <h1><a href="/">greeting</a></h1>
      <p>pjax is great!!</p>
    </header>
    <nav>
      <ul>
        <li><a href="/">welcome</a></li>
        <li><a href="/goodmorning">goodmorning</a></li>
        <li><a href="/hello">hello</a></li>
        <li><a href="/goodnight">goodnight</a></li>
      </ul>
    </nav>
    <div id="greeting">
      <p><%= content %></p>
    </div>
  </body>
</html>

@@ index.html.ep
% title 'welcome | greeting';
<strong>welcome!!</strong>

@@ goodmorning.html.ep
% title 'goodmorning | greeting';
<strong>goodmorning!!</strong>

@@ hello.html.ep
% title 'hello | greeting';
<strong>hello!!</strong>

@@ goodnight.html.ep
% title 'goodnight | greeting';
<strong>goodnight!!</strong>

@@ app.coffee.ep
$ ->
  $greeting = $('#greeting > p')
  Router = Backbone.Router.extend
    routes:
      '': 'index'
      ':page': 'page'
    index: -> $greeting.fadeOut(50, -> $(@).load('/?_pjax=true').fadeIn(500))
    page: (page) -> $greeting.fadeOut(50, -> $(@).load("/#{page}?_pjax=true").fadeIn(500))

  router = new Router
  Backbone.history.start pushState: true

  $('a').click (e) ->
    router.navigate $(@).attr('href').replace(/^\//, ''), true
    e.preventDefault()

@@ app.less.ep
.middle-contrast {
  color: #fff;
  background-color: #222;
}

.high-contrast {
  background-color: #fff;
  color: #000;
}

body {
  font-size: 16px;
  font-family: 'Helvetica', 'Arial', sans-self;
  margin: 0 auto;
  padding: 5em 20em;
  .middle-contrast;
}

h1 {
  margin: 0;
  font-size: 600%;
  letter-spacing: 0.03em;
  text-shadow: 2px 3px 5px #000, -2px 0px 5px #000;
}

p {
  margin: 2em 0;
}

a {
  text-decoration: none;
  color: #fff;
}

nav {
  padding: 0.5em 0;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  ul {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  li {
    float: left;
    list-style-type: none;
    margin-right: 1em;
    a {
      display: block;
      padding: 0.5em;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

#greeting {
  margin: 3em 0 0;
  padding: 3em;
  text-align: center;
  .high-contrast;
  strong {
    font-size: 300%;
    letter-spacing: -0.08em;
    text-shadow: 1px 0px 3px rgba(0, 0, 0, 0.5),
  }
}
	#!/usr/bin/env perl
	use Mojolicious::Lite;

	app->types->type(coffee => 'text/coffeescript; charset=utf-8');

	under sub {
	my $self = shift;
	my $is_pjax = $self->param('_pjax') ? 1 : 0;
	$self->layout('default') unless $self->req->is_xhr \|\| $is_pjax;
	1;
	};

	get '/' => 'index';
	get '/:page' => sub {
	my $self = shift;
	$self->render($self->param('page'));
	};

	app->start;
	__DATA__

	@@ layouts/default.html.ep
	<!DOCTYPE html>
	<html>
	<head>
	<title><%= title %></title>
	<link rel="stylesheet/less" type="text/css" href="/app.less?_pjax=true" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.3.0/less-1.3.0.min.js" type="text/javascript"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.3.1/coffee-script.min.js" type="text/javascript"></script>
	<script src="/app.coffee?_pjax=true" type="text/coffeescript"></script>
	<!--[if lt IE 9]>
	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	</head>
	<body>
	<header>
	<h1><a href="/">greeting</a></h1>
	<p>pjax is great!!</p>
	</header>
	<nav>
	<ul>
	<li><a href="/">welcome</a></li>
	<li><a href="/goodmorning">goodmorning</a></li>
	<li><a href="/hello">hello</a></li>
	<li><a href="/goodnight">goodnight</a></li>
	</ul>
	</nav>
	<div id="greeting">
	<p><%= content %></p>
	</div>
	</body>
	</html>

	@@ index.html.ep
	% title 'welcome \| greeting';
	<strong>welcome!!</strong>

	@@ goodmorning.html.ep
	% title 'goodmorning \| greeting';
	<strong>goodmorning!!</strong>

	@@ hello.html.ep
	% title 'hello \| greeting';
	<strong>hello!!</strong>

	@@ goodnight.html.ep
	% title 'goodnight \| greeting';
	<strong>goodnight!!</strong>

	@@ app.coffee.ep
	$ ->
	$greeting = $('#greeting > p')
	Router = Backbone.Router.extend
	routes:
	'': 'index'
	':page': 'page'
	index: -> $greeting.fadeOut(50, -> $(@).load('/?_pjax=true').fadeIn(500))
	page: (page) -> $greeting.fadeOut(50, -> $(@).load("/#{page}?_pjax=true").fadeIn(500))

	router = new Router
	Backbone.history.start pushState: true

	$('a').click (e) ->
	router.navigate $(@).attr('href').replace(/^\//, ''), true
	e.preventDefault()

	@@ app.less.ep
	.middle-contrast {
	color: #fff;
	background-color: #222;
	}

	.high-contrast {
	background-color: #fff;
	color: #000;
	}

	body {
	font-size: 16px;
	font-family: 'Helvetica', 'Arial', sans-self;
	margin: 0 auto;
	padding: 5em 20em;
	.middle-contrast;
	}

	h1 {
	margin: 0;
	font-size: 600%;
	letter-spacing: 0.03em;
	text-shadow: 2px 3px 5px #000, -2px 0px 5px #000;
	}

	p {
	margin: 2em 0;
	}

	a {
	text-decoration: none;
	color: #fff;
	}

	nav {
	padding: 0.5em 0;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	ul {
	margin: 0;
	padding: 0;
	overflow: hidden;
	}
	li {
	float: left;
	list-style-type: none;
	margin-right: 1em;
	a {
	display: block;
	padding: 0.5em;
	&:hover {
	text-decoration: underline;
	}
	}
	}
	}

	#greeting {
	margin: 3em 0 0;
	padding: 3em;
	text-align: center;
	.high-contrast;
	strong {
	font-size: 300%;
	letter-spacing: -0.08em;
	text-shadow: 1px 0px 3px rgba(0, 0, 0, 0.5),
	}
	}