Eleventy File List Plugin

Posted: December 27, 2023 | | Categories: Eleventy, JavaScript, Static Site Generators

In the Joomla version of this site (the previous version of what you're looking at now) I used a downloads plugin which allowed me to view and manage site downloads from the admin panel. As I migrated to Eleventy I didn't migrate any of the existing downloads.

When I presented at All Things Open this year, I added a download for the presentation slides to the site. Yes, I know I could host the file elsewhere, but I decided to host it here. As I sat around this week, with family gone and nothing to do, I decided to create a plugin that allowed me to list the downloads available on the site.

To install the plugin, open a terminal window or command prompt, navigate to an Eleventy project folder, and execute 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.js');

To configure the plugin, you provide a folder location (relative to the Eleventy project's root folder)

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

With that in place, the plugin creates a Eleventy collection called fileList you can access from any page in the site.

The collection exposes an array containing the following file properties:

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

The plugin is available on GitHub at Eleventy Plugin File List and on npm at eleventy-plugin-file-list.

Next Post: Eleventy GitHub Repositories Plugin

Previous Post: Execa Node Process Spawning

Header image: Eleventy Project Home Page.