Useful Eleventy Snippets
Tags that this post has been filed under.
These are some of the Eleventy snippets that I have found useful when developing websites.
Hiding before and after a date
These first two snippets which I have added to the same code block enable the hiding of events that have past and the hiding of posts that you only want to release after a certain date. But these can both be applied to any collection.
.eleventy.js
const hidePastItems = (post) => {
let now = new Date().getTime();
if (now > post.date.getTime()) return false;
return true;
}
const hideFutureItems = (post) => {
let now = new Date().getTime();
if (now < post.date.getTime()) return false;
return true;
}
module.exports = function (config) {
// Returns a collection of blogposts, hiding them until after a certain date
config.addCollection("releasedPosts", function (collectionApi) {
return collectionApi.getFilteredByGlob('./src/content/posts/*.md').reverse().filter(hideFutureItems)
});
// Returns a collection of events, hiding those past a certain date, usually the date of the event
config.addCollection("events", function (collectionApi) {
return collectionApi.getFilteredByGlob('./src/content/events/*.md').filter(hidePastItems)
});
}
Navigation Element
This is my current navigation.njk partial used in conjunction with a navigation.json file in my _data directory.
navigation.njk
{% set currentUrl = page.url %}
{% if navigation.firstnav %}
<section class="navigation">
<div class="nav-container">
<nav aria-label="Primary Navigation">
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
{% for item in navigation.firstnav %}
{% set externalAttribute = '' %}
{% set currentAttribute = '' %}
{% if item.external %}
{% set externalAttribute = ' rel="external"' %}
{% endif %}
{% if page.url == item.url %}
{% set currentAttribute = ' aria-current="page"' %}
{% endif %}
<li><a aria-label="{{ item.text }}" href="{{ item.url }}" {{ externalAttribute | safe }} {{ currentAttribute | safe }}>{{ item.text }}</a></li>
{% endfor %}
</ul>
</nav>
</div>
</section>
{% endif %}
navigation.json
{
"firstnav": [
{
"text": "Home",
"url": "/",
"external": false
},
{
"text": "About",
"url": "/about/",
"external": false
},
{
"text": "Products",
"url": "/products/",
"external": false
},
{
"text": "Commissions",
"url": "/commissions/",
"external": false
},
{
"text": "Events",
"url": "/events/",
"external": false
},
{
"text": "Contact Us",
"url": "/contact-us/",
"external": false
}
],
"secondnav": [
{
"text": "Policies",
"url": "/policies/",
"external": false
},
{
"text": "Sitemap",
"url": "/sitemap/",
"external": false
},
{
"text": "Terms Of Use",
"url": "/terms-of-use/",
"external": false
}
]
}
You can style the [aria-current="page"] element for a current page link. This also means I can use the 'secondnav' for another navigation element say in the footer using the same navigation.njk but swapping out the 'firstnav' for 'secondnav'.
As I find/develop useful snippets they will be added here, I hope these may be of some use to you.