Fat Buddha Designs

Affordable, Creative, Hand-Crafted Websites

Useful Eleventy Snippets

Useful Eleventy Snippets

Author: Will Moody

Published:

Reading Time: (approx) 2 min

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.

Previous Article: Should you employ a website developer or do it yourself?

Next Article: Developing Websites With Eleventy