npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@mikestreety/11ty-utils

v1.3.0

Published

Collection of common utlities for use with 11ty

Downloads

6

Readme

A collection of utilities I found myself using on every project. Open to MR/PR/Issues/suggestions

Installation

npm i --save @mikestreety/11ty-utils

In your .eleventy.js, you then add it as a plugin

const utils = require("@mikestreety/11ty-utils");

module.exports = (eleventyConfig) => {
	eleventyConfig.addPlugin(utils);
};

Usage

Below are the utils included within the package. Along with using them in 11ty, you can also include the Javascript file and require the module you need.

For example, if you want to use the dayOridinal filter as a function in a data file, you can do:

const {dayOrdinal} = require('@mikestreety/11ty-utils/filters/date');

//...

dayOrdinal(post.date);

Filters

These are the filters included within the Utils

Slugify

Turn a string into a URL friendly string (or slug). This is particularly useful, especially when building pagination or creating a collection from a JSON feed.

Example output: This is a string becomes this-is-a-string

  • Filter: {{ post.data.title | slugify }}
  • Function: slugify(date)

For use with a Javascript file:

const slugify = require('@mikestreety/11ty-utils/filters/slugify');

Utils

Limit

This is useful if you want to limit the number of posts on your homepage, for example.

Example use:

{% set postslist = collections.blog | limit(6) %}
{%- for entry in postslist -%}
	//
{% endfor %}

Date

If you require the functions in a Javascript file, you can require them, only including the functions you need. For example:

const {iso, utc} = require('@mikestreety/11ty-utils/filters/date');

ISO

Returns an ISO formatted date string , used for things like schema markup

Example output: 2011-10-05T14:48:00.000Z

  • Filter: {{ date | dateISO }}
  • Function: iso(date)

Docs link

ISO Short

Returns an ISO formatted date string without the time - useful for sitemaps

Example output: 2011-10-05

  • Filter: {{ date | dateISOShort }}
  • Function: isoShort(date)

Docs link

UTC

Returns a rfc7231 style UTC date string. For use with RSS

Example output: Tue, 06 Apr 2021 00:00:00 GMT

  • Filter: {{ date | dateUTC }}
  • Function: utc(date)

Docs link

Long Date

A long date formatted with the ordinal and long month name

Example output: 22nd March 2021

  • Filter: {{ date | dateLong }}
  • Function: longDate(date)

Day

The day in number format

Example output: 22 or 6

  • Function: day(date)

Day with Ordinal

The day in number format with the ordinal (nth, rd) appended

Example output: 22nd or 6th

  • Function: dayOrdinal(date)

Month

The month in a numerical format

Example output: 1 or 11

  • Function: month(date)

Month Name

The full name of the month

Example output: March or December

  • Function: monthName(date)

Year

The full year

Example output: 2021 or 1995

  • Function: year(date)

To Do

  • Add truncate
    • add truncateWords which does a number of words
    • truncateChars will do characters (meta desc as default)
  • Add dateShort in a DD/MM/YY format (although, America?)