How to handle sidecar files?

I am trying to create an index of my recipes.

All my recipes are currently a mix of plain text files (named *.txt) and Markdown files (named *.md).

I want to create a small jekyll site that generates an index of these recipes as well as a static HTML page for each recipe.

I have a few problems that I haven’t found a solution to:

1: I have a collection of recipe files in a folder. Lets just focus on the .md files for now. Each file has a name like Some-title.md, Some-Other-Title.md, etc. I then want to list these with links. But this means that I want to link like this: <a href="/path/Some-title.html">Some title</a> <a href="/path/Some-Other-Title.html">Some Other Title</a>.

I basically want to convert “-” and “_” with " " as well as to remove the file extension when I present the link text but keep it in the actual href. How do I do this?

2: Another somewhat related issue is regarding what I would call sidecar files. What I mean by this is that each recipe is a single markdown file with the filename being the name of the dish with hyphens or underscores instead of spaces as well as the .md file extension. Now each recipe might have one or more sidecar files that relates to that recipe. A typical example is images. So for the recipe Tiramisu.md, there might be various Tiramisu*.jpg files. For example Tiramisu.jpg or even Tiramisu-01.jpg Tiramisu-02.jpg, …

This means that when I render Tiramisu.md, I need to generate something like this: <img src="Tiramisu.jpg"> for each such sidecar file - if they exist.

How can I accomplish this with Jekyll?

Maybe too obvious… but how about adding it to the front matter?

is this a jekyll collection or are you just using that word?

If you use a collection I think you get the title for free - and it will take the filename and output it with spaces?

I did a recipe site here and that is what it looks like it happening:

Yeah, I could do that. However, there are nearly a thousand files now. So I specifically want to do this programmatically and not by specifying anything in the front matter. I would like to now have to open and edit any files. I think it should be possible to do this programmatically.

It is a jekyll collection as well, although, I just used the word casually without thinking that it was ambiguous. I tried setting this up as a collection, however, it does not have to be a collection if there are better ways of doing it.

This is what I have in my _config.yml:

 20 defaults:                                                                        
 21   - scope:                                                                       
 22       path: "" # an empty string here means all files in the project.            
 23     values:                                                                      
 24       lang: da                                                                   
 25   - scope:                                                                       
 26       path: "_recipes/*.jpg"                                                     
 27     values:                                                                      
 28       image: true                                                                
 29                                                                                  
 30 collections:                                                                     
 31   recipes:                                                                       
 32     output: true                                                                 
 33     permalink: /recipes/:path                                                    
 34   pages:                                                                         
 35     output: true                                                                 
 36     permalink: /:path/index.html                                                 
 37                                       

I will take a look at your link.Thanks.

the more I think about it maybe you get a title for pages as well? I can’t see anything documenting it other than for posts where it is a thing for sure. But it seems to work on the collection on my recipe site - and maybe it would work for just regular pages too. Not sure. Normally when I do plain pages I add a title in front matter.

I used collections so I could use each collection as a category. Makes it easier/more efficient to categorize them.

As for the images, I am not sure there is a purely programmatic way to do it. The static files do have some attributes, and you can check the paths of them to do things, but I am not sure how you would easily match up a recipe with its images without front matter. But this may just be a matter of needing to be creative. For your example of images, I think you could do some liquid to match up stuff the problem would be that the time to generate would likely go way up. One idea is you could use liquid to build a json file of all your image paths, then use JS to do something on each page to check the url and see if the recipe name part matches anything in the json and if so output an img tag. I can see how technically that might be possible but sounds messy.