75 lines
3 KiB
Plaintext
75 lines
3 KiB
Plaintext
---
|
|
bodyClass: c-home
|
|
---
|
|
|
|
{% extends 'layouts/base.njk' %}
|
|
|
|
{% block content %}
|
|
<section>
|
|
<div class="l-container">
|
|
<h1>{{title}}{% if authorInTitle %} <span class="c-home__title-author">{{ site.author }}</span>{% endif %}</h1>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<div class="l-container">
|
|
{% set homeSearch = true %}
|
|
{% include "components/search.njk" %}
|
|
|
|
<a x-data="getRandomRecipe()" x-init="initRandomRecipe()" x-bind:href="url" class="c-search__random-link">🔀 {{ randomRecipe }}</a>
|
|
</div>
|
|
</section>
|
|
|
|
{% if collections["Favourite ⭐"] %}
|
|
<section class="u-bgc-grey-100">
|
|
<div class="l-container">
|
|
<h2>{{ favouriteRecipes }}</h2>
|
|
<div class="c-card__wrapper">
|
|
{% set favouriteRecipes = collections["Favourite ⭐"] | limit(4) %}
|
|
{% for recipe in favouriteRecipes %}
|
|
<a class="c-card" href="{{ recipe.url }}">
|
|
{% recipeimage recipe.data.image, "c-card__image", recipe.data.title, "(min-width: 1150px) 25vw, (min-width: 850px) 33vw, (min-width: 550px) 50vw, 100vw" %}
|
|
<div class="c-card__info">
|
|
<div>
|
|
{% for tag in recipe.data.tags %}
|
|
<abbr class="c-card__tag-abbr" title="{{ tag | noEmoji }}">{{ tag | onlyEmoji }}</abbr>
|
|
{% endfor %}
|
|
</div>
|
|
{% if recipe.data.time %}
|
|
<div class="card__time">
|
|
{% include 'icons/time.svg' %}
|
|
{{ recipe.data.time }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="c-card__title-wrapper">
|
|
<h3 class="c-card__title">{{ recipe.data.title }}</h3>
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endif %}
|
|
|
|
<script>
|
|
function getRandomRecipe() {
|
|
return {
|
|
url: '',
|
|
initRandomRecipe() {
|
|
const random = (recipes) => recipes[Math.floor(Math.random() * recipes.length)];
|
|
|
|
if (sessionStorage.getItem('searchResults')) {
|
|
this.url = random(JSON.parse(sessionStorage.getItem('searchResults'))).url;
|
|
} else {
|
|
fetch('/search.json').then(res => res.json()).then(res => {
|
|
sessionStorage.setItem('searchResults', JSON.stringify(res));
|
|
this.url = random(res).url;
|
|
});
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %} |