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

metalsmith-blog-lists

v1.3.0

Published

A Metalsmith plugin to add blog lists to metadata.

Downloads

8

Readme

Metalsmith Blog Lists

A metalsmith plugin to provide various blog lists

metalsmith: plugin npm: version license: ISC

This plugin requires all blogposts to be located in blog/ of the content directory.

Features

The plugin adds the following lists to the metadata to enable various blog widgets on any page.

  • All Blogs
  • Recent Blogs
  • Featured Blogs
  • Annualized Blogs List

The following data is available for each blogpost:

  • Title
  • Date
  • Author
  • Path
  • Image

The lists may be used to show all blog posts by a particular author.

All Blog Posts

The plugin provides array allSortedBlogPosts, sorted by date. It can be used when the whole list of blog posts is not available, for example, when using pagination, NOT all blog posts are available on a paginated page.

Latest Blogs

The plugin provides array latestBlogPosts. The number of blog posts listed is determined by option latestQuantity.

Featured Blogs

The plugin provides array featuredBlogPosts. Blog posts can specify, in their Frontmatter, that the post be listed and in what position of the list.

Annualized Blogs List

The plugin provides an associative array annualizedBlogPosts. All blog posts are listed by their creation year.

Installation

NPM:

npm install metalsmith-blog-lists

Yarn:

yarn add metalsmith-blog-lists

Usage

For blogs intended to be featured, add the following fields to their frontmatter:

---
featuredBlogpost: true
featuredBlogpostOrder: <integer>
---

Pass metalsmith-blog-lists to metalsmith.use :

const blogLists = require('metalsmith-blog-lists')

metalsmith.use(blogLists({  
  latestQuantity: 4,
  featuredQuantity: 2,
  featuredPostOrder: "desc",
  fileExtension: ".md.njk",
  blogDirectoryName: "blog"
}))

Examples

Using a Nunjucks template

Display an annualized blog archive

{% for theYear in annualizedBlogPosts %}
  {{theYear.year}}
  <ul>
  {% for post in theYear.posts %}
    <li>
      <a href="/{{post.path}}">{{post.title}}</a>
      <p>{{post.date}}</p>
      <p>{{post.author}}</p>
    </li>
  {% endfor %}
  </ul>
{% endfor %}

Display a featured blog list

<ul>
  {% for post in featuredBlogPosts %}
  <li>
    <a href="/{{post.path}}">{{post.title}}</a>
    <p>{{post.date | blogDate}}
    <p>{{post.author}}</p>
  </li>
  {% endfor%}
</ul>

Options

You can pass options to metalsmith-blog-lists with the Javascript API or CLI. The options are:

  • latestQuantity: optional. The number of blogposts to display. The default is 3.
  • featuredQuantity: optional. The number of featured blogposts to display. The default is 3.
  • featuredPostOrder: optional. The order in which featured blogposts are displayed. The default is "desc".
  • fileExtension: optional. The blogpost file extension. The default is .md.
  • blogDirectoryName: optional. The blogpost directory must be in the Metalsmith source directory.The default is blog

Debug

To enable debug logs, set the DEBUG environment variable to metalsmith-blog-lists:

DEBUG=metalsmith-blog-lists

CLI usage

To use this plugin with the Metalsmith CLI, add metalsmith-blog-lists to the plugins key in your metalsmith.json file:

{
  "plugins": [
    {
      "@metalsmith/metalsmith-blog-lists": {
        "latestQuantity": 4,
        "featuredQuantity": 2,
        "featuredPostOrder": "desc",
        "fileExtension": ".md.njk",
        "blogDirectoryName": "blog"
      }
    }
  ]
}

Author

[email protected]

License

ISC