Access to underlying filename

[metalsmith]

Access to underlying filename

[kowitz]

Yeah, I was using metalsmith-filenames, but it seems that the layout module overwrites the filename attribute. I didn't want to use metalsmith-in-place because we have dozens of markdown bio files and I want to keep application logic out of those files.

I did figure it out though! My solution was to create my own plugin that takes the file's name (minus the extension) and writes it to an attribute called slug. In case anyone is in this situation, here's what I did:

First, I created a plugin at /metalsmith/slugs.js

var path = require('path');
module.exports = function() {
  return function(files, metalsmith, callback) {
    Object.keys(files).forEach(function(filename){
      files[filename].slug = path.parse(filename).name;
    });
    callback();
  };
};

Then, I included it in the CLI object. I'm using metalsmith-grunt, so this is part of my Gruntfile.js:

plugins: {
    '../../../metalsmith/slugs.js': {},
    // ... other plugins
}

@ismay, Thanks for all the help with this. I appreciate the encouragement.
Cheers,
— Braden

[ismay]

Hmm, I see. Just so I have some context, what's the problem you're trying to solve? There might be an easier way.

[kowitz]

Sure!

I'm working on a team page for a website. I'm trying to render a folder of personal bios written in markdown format into html pages on the final site. So, for example, there's a file called team/braden-kowitz.md that needs to be rendered by the layout layouts/layout-bio.html.

In that layout file, I use frontmatter from the markdown file to pull in info about the person, for example {{name}} and {{title}}. I also want to include a photo of the person, which shares the same slug from the filename. So if the file is braden-kowitz.md, I'd like to point to an image file like /img/team/braden-kowitz.jpg.

So I need access to the filename in order to link to the profile image correctly. Does that makes sense?

Thanks for the help!

• Braden

[ismay]

So I need access to the filename in order to link to the profile image correctly. Does that makes sense?

Ok I see, that makes sense. I think the easiest thing to do is use metalsmith-collections. I use it myself here and then loop through the generated collection here. I think that should work similar to what you're trying to do, if I'm not mistaken.

It'll probably be easier to do it that way. I am using metalsmith-in-place though (which is pretty similar), so you'll might have to adapt some things if you want to keep using layouts.

Hope that helps!

[kowitz]

I'm not sure that metalsmith-collections will help actually. I don't need to render an index page listing the team members. I just need each markdown filename to be accessible while the layout is rendering.

For example, I have a jane-smith.md file that looks something like this:

--- 
name: Jane Smith
title: President
---
Jane Smith started her career as a javascript developer.
Now she's president of ACME Corp.

When this markdown file is run through the layout, I'd like to have access to the name jane-smith.md, but it seems to be overwritten by the name of the layout file. I'm not sure what the proper behavior is here, but it seems like a bug. Shouldn't {{filename}} match to the file being rendered, not the layout?

Thanks for the help here! The rest of my experience with Metalsmith has been amazing. This is just the one little hiccup that I'm trying to figure out still.

Cheers,
— Braden

[ismay]

I'm not sure that metalsmith-collections will help actually. I don't need to render an index page listing the team members. I just need each markdown filename to be accessible while the layout is rendering.

Yeah ok, so you just want the filename of the markdown file that's currently being rendered into a template. And I assume that you're using metalsmith-filenames?

Metalsmith filenames makes the filename of each file available as a variable on the object associated with that file. What you're running into is a limitation of metalsmith-layouts, which only processes variables in the layout, and not from the contents being passed to the layout (the markdown file). Hence, the filename isn't available.

You could use metalsmith-in-place, and apply templates by extending them, but I don't think you'd be able to use markdown. If I were you I'd switch to metalsmith-in-place, and use it without the markdown plugin. That way you'll be able to do what you're trying to do here.

There are probably other ways as well, but they'll be a lot more cumbersome and difficult to implement. Hope that helps. If not, an example repo might help illustrate what you're trying to do. Let me know if you have any questions!

[ismay]

@kowitz No problem. happy to help! Thanks for posting the solution 👍