site-ui/src/layouts/blog-landing.hbs (62 lines of code) (raw):
<!DOCTYPE html>
<html lang="en">
<head>
{{> head-first}}
<title>Apache Cassandra{{#with site.title}} | {{this}}{{/with}}</title>
{{#with (canonical-url)}}
<link rel="canonical" href="{{this}}">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400&family=Red+Hat+Display:ital,wght@0,400;0,500;0,700;1,400;1,500&display=swap" rel="stylesheet">
{{/with}}
{{> head-last}}
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.0.2/list.min.js"></script>
</head>
<body class="{{page.layout}}">
<div class="container mx-auto relative">
{{> header }}
<div class="hero hero--home grad">
<div class="eye"></div>
<div id="home-content" class="text-center flex flex-center flex-column relative z2 ma-xlarge">
<h1>{{ page.title }}</h1>
</div>
</div>
<section id="blog-main" class="arrow py-xlarge">
<div class="inner">
<input type="text" class="search mx-auto flex flex-horz-center" placeholder="Search Blog Posts" id="search-field">
<p class="py-large text-center">Have something to share with the community? Let us know on the <a href="{{{ site.url }}}/_/community.html#discussions">mailing list!</a></p>
<div id="all-tiles" class="grid-list list pb-large">
{{{page.contents}}}
</div>
</div>
</section>
{{> footer}}
</div>
</body>
<script>
jQuery(function(){
var cards = $('#all-tiles').find('.card');
var searchString = '';
$(document)
.on('click','.card',function(){
var link = $(this).find('a').attr('href');
window.location = link ;
});
$( "#search-field" ).keyup(function() {
$('.card').removeClass('hidden');
var val = $(this).val();
val = val.toLowerCase();
searchString = val;
filterCards(searchString)
});
var filterCards = function(searchString){
cards.each(function(){
var el = $(this);
var title = el.find('.discrete').text();
title = title.toLowerCase();
if(!title.includes(searchString)){
el.addClass('hidden');
}
});
}
});
</script>
</html>