views/index.erb
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, minimum-scale=1.0'>
<title>TLD Hunt</title>
<link href='./style.css' type='text/css' rel='stylesheet'>
</head>
<body>
<header class='header'>
<div class='logo'></div>
<h1 class='brand'>TLD Hunt</h1>
<small class='baseline'>Search products by their <abbr title='Top-Level Domain'>TLD</abbr>.</small>
</header>
<input class='search-field' id='search-field' placeholder='.com, .io, ...' type='text' autofocus />
<ul class='hits' id='hits'></ul>
<script type='text/template' id='hit-template'>
<li>
<a class='hit' href='{{url}}' target='_blank'>
<h4 class='hit-name hit-truncate'>{{name}}</h4>
<small class='hit-host hit-truncate'>{{hostname}}</small>
</a>
</li>
</script>
<script type='text/template' id='no-hit-template'>
<li class='hit'>No products found.</li>
</script>
<script type='text/template' id='loading-template'>
<li class='hit-loader'>
<div class='spinner'></div>
</li>
</script>
<script type='text/template' id='error-template'>
<li class='hit'>Sorry, it seems that we can't search right now.</li>
</script>
<script type='text/template' id='count-template'>
<li class='hit hit-muted'>Showing {{count}} of {{totalCount}} products.</li>
</script>
<p class='about'>
TLD Hunt is a tiny project by <a href='http://timpetricola.com'>Tim Petricola</a>. Data is coming from <a href='http://www.producthunt.com'>Product Hunt</a>. Source code is available on <a href='https://github.com/TimPetricola/TLD-Hunt'>GitHub</a>.
</p>
<script src='//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js'></script>
<script src='//cdn.jsdelivr.net/algoliasearch/2.6.0/algoliasearch.min.js'></script>
<script src='./script.js'></script>
<% if ENV['GA_ID'] %>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '<%= ENV['GA_ID'] %>']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<% end %>
</body>
</html>