len0rd/personal-website
1
0
Fork 0
mirror of https://github.com/len0rd/personal-website.git synced 2025-09-08 15:17:51 -04:00
Code Issues 1 Projects 1 Releases Packages Wiki Activity

generate recipe link and hashtag list on startup. filter recipes in list based on active tags. tags in recipes dont link back yet

Browse source
This commit is contained in:
len0rd 2022-06-22 12:27:14 -04:00
parent e8010aa1f2
commit 1e1ba15118
7 changed files with 169 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

55
views/pages/recipe_navigator.ejs
View file

@ -3,7 +3,7 @@
<head>
<%- include('../partials/include' ) %>
<link rel="stylesheet" type="text/css" href="/css/projects.css">
<link rel="stylesheet" type="text/css" href="/css/projects.css">
</head>
<body>
@ -13,15 +13,58 @@
<div class="container mt-5 topMargin">
<h1>Recipes</h1>
<div class="list-group">
<a href="recipes/chocolateChipCookies" class="list-group-item list-group-item-action">Chocolate Chip Cookies</a>
<a href="recipes/pizzaDough" class="list-group-item list-group-item-action">Pizza Dough</a>
<a href="recipes/bananaBread" class="list-group-item list-group-item-action">Banana Bread</a>
<a href="recipes/cinnamonRolls" class="list-group-item list-group-item-action">Cinnamon Rolls</a>
<div class="row mb-2">
<div class="col btn-container">
<%- include('../partials/generated/recipe-tags') %>
</div>
</div>
<div class="row">
<div class="list-group" id="recipe-link-container">
<%- include('../partials/generated/recipe-links') %>
</div>
</div>
</div>
<%- include('../partials/post_html_include') %>
<script>
/// This script is responsible for filtering the recipe list
/// based on enabled/disabled hashtags. I'm certain theres more
/// efficient ways to do this but /shrug
$(".btn-container").on("click", "button", function() {
$(this).toggleClass("btn-light btn-primary");
var tag = $(this).text();
var activeTags = [];
// create a list of currently active tags
$(".btn-container button").filter(function() {
if ($(this).hasClass("btn-primary")){
activeTags.push($(this).text())
}
});
if ($(this).hasClass("btn-primary")) {
// if tag is active, activate its filter
$("#recipe-link-container a:visible").filter(function() {
$(this).toggle($(this).attr("tags").toLowerCase().indexOf(tag) > -1)
});
}
else if ($(this).hasClass("btn-light")) {
// tag has been toggled off. re-add any thing that is hidden but shouldnt be
$("#recipe-link-container a:hidden").filter(function() {
const elemTagList = $(this).attr("tags").toLowerCase();
hasActiveTags = true;
for (const activeTag of activeTags) {
if (elemTagList.indexOf(activeTag) == -1) {
hasActiveTags = false;
break;
}
}
if (hasActiveTags) {
$(this).toggle(true);
}
});
}
});
</script>
</body>
</html>

1
views/partials/include.ejs
View file

@ -6,3 +6,4 @@
<link rel="stylesheet" type="text/css" href="/css/site.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/styles/default.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>