site-ui/src/layouts/resources.hbs (66 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}}
</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>
<h2>{{page.description}}</h2>
</div>
</div>
<section id="resources-main" class="arrow py-xlarge">
<div class="inner">
<p class="py-large text-center">Find Cassandra tutorials, how-tos and other technical content by searching with keywords, as well as skill level (beginner, intermediate, advanced). If you have content to add, <a href="https://github.com/apache/cassandra-website/blob/trunk/README.md">submit a pull request here.</a></p>
<input type="text" class="search mx-auto flex flex-horz-center" placeholder="Search Cassandra Resources" id="search-field">
<div id="all-tiles" class="grid-list list py-large">
{{{page.contents}}}
</div>
</div>
</section>
{{> footer}}
</div>
</body>
<script>
jQuery(function(){
var cards = $('#all-tiles').find('.card');
var searchString = '';
$("#search-field").keyup(function() {
cards.removeClass('hidden');
var val = $(this).val();
val = val.toLowerCase();
searchString = val;
filterCards(searchString)
});
var filterCards = function(searchString){
cards.each(function(){
var el = $(this);
var classes = el.attr('class');
var resTags = el.find('.res-tags');
var tagStrings = resTags.find('p').text();
tagStrings = tagStrings.toLowerCase();
var title = el.find('.discrete').text();
title = title.toLowerCase();
if(!title.includes(searchString) && !tagStrings.includes(searchString)){
el.addClass('hidden');
}
});
}
$(document)
.on('click','.card',function(){
var link = $(this).find('a').attr('href');
window.open(link);
});
});
</script>
</html>