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

eleventy-plugin-file-list

v0.0.5

Published

Creates an Eleventy collection containing a list of files in a particular folder

Downloads

6

Readme

Eleventy Plugin File List

An Eleventy Plugin that creates a collection containing metadata from a list of all files in a specified folder.

https://www.npmjs.com/package/eleventy-plugin-file-list

Usage

Create a folder in your Eleventy project and populate it with the files you want to serve using this plugin.

Install the plugin by opening a terminal window or command prompt, navigating to an Eleventy project folder, and executing the following command:

npm install eleventy-plugin-file-list

Next, in your Eleventy project's eleventy.config.js file, import the plugin as shown below:

const fileList = require('eleventy-plugin-file-list');

Then, inside the module.exports section, load the plugin:

eleventyConfig.addPlugin(fileList, { targetFolder: 'files' });

If you don't specify a target folder, the plugin assumes files.

eleventyConfig.addPlugin(fileList);

To have the plugin process the target folder recursively, enable doRecurse when you load the plugin:

eleventyConfig.addPlugin(fileList, { targetFolder: 'files', doRecurse: true });

The plugin supports a debug mode which sends additional information to the console during the build process. To enable debug mode, load the plugin with debugMode set to true:

eleventyConfig.addPlugin(fileList, { targetFolder: 'files', debugMode: true });

The plugin uses the following default values for omitted configuration options:

  • targetFolder: 'files'
  • debugMode: false
  • doRecurse: false

Ensure you pass through the contents of the folder:

eleventyConfig.addPassthroughCopy('files/');

Here's a complete sample eleventy.config.js file:

const fileList = require('eleventy-plugin-file-list.js');

module.exports = eleventyConfig => {

  const debugMode = false;
  const doRecurse = false;
  eleventyConfig.addPlugin(fileList, { targetFolder: 'files', debugMode, doRecurse });

  eleventyConfig.addPassthroughCopy('src/assets/');
  eleventyConfig.addPassthroughCopy('files/');

  return {
    dir: {
      input: 'src',
      output: '_site',
      includes: '_includes',
      layouts: '_layouts',
      data: '_data'
    }
  }
};

Rendering File Metadata

The data collection created by the plugin is called fileList and it contains the following file properties:

  • name
  • extension
  • path
  • fileSize: File size in bytes
  • created: Create date
  • modified: Modified date

Here's a sample table created from the plugin's output:

This page displays a table listing metadata for all files in the `files` folder.

{% if collections.fileList.length > 0 %}
  <p>Number of files: {{ collections.fileList.length }}</p>
  <table>
  <tr>
    <th>Name</th>
    <th>Extension</th>
    <th>Path</th>
  </tr>
  {% for file in collections.fileList %}  
    <tr>
      <td><a href="{{ file.path }}" target="_blank">{{ file.name }}</a></td>
      <td>{{ file.extension }}</td>
      <td>{{ file.path }}</td>
    </tr>
  {% endfor %}
</table>  
{% else %}
  <p>No file data to display</p>
{% endif %}

Demonstration

This repository contains a demo Eleventy site that demonstrations the plugin's capabilities. To run the demo, clone this repository to your local development system, then execute the following steps:

  1. Create a folder in the cloned project folder called files.
  2. Copy some files into the newly created folder
  3. Open terminal window and navigate to the project folder
  4. execute npm install
  5. execute npm start

At this point, Eleventy will build the project and display a link you can click to view the sample page (http://localhost:8080 as shown in the text below):

D:\dev\11ty\eleventy-plugin-file-list>npm start

> [email protected] start
> tsc && eleventy --serve

[Eleventy-Plugin-File-List] Building file list from the projects's "files" folder
[Eleventy-Plugin-File-List] Duration: 0.516ms
[Eleventy-Plugin-File-List] Completed building file list, found 4 files
[11ty] Writing _site/index.html from ./src/index.liquid
[11ty] Copied 7 files / Wrote 1 file in 0.24 seconds (v2.0.1)
[11ty] Watching…
[11ty] Server at http://localhost:8080/

Sample App Page


If this code helps you, please consider buying me a coffee.