Automatic passthrough copy for files referenced in HTML output files

[zachleat]

Use the existing HTML transformer architecture and wire it up to passthrough file copy to move any references to assets on the local file system to the output folder automatically.

For example:

• <img src="my-image.png" alt=""> in template.html copies to _site/template/my-image.png
• <img src="my-image.png" alt=""> in subdir/template.html copies to _site/subdir/template/my-image.png
• <img src="deeper/my-image.png" alt=""> in subdir/template.html copies to _site/subdir/template/deeper/my-image.png

These output references would be relative to the template’s outputPath/permalink. This would apply to any URLs processed by https://github.com/11ty/eleventy-posthtml-urls.

Related:

• @11ty/import fetchAsset method: https://github.com/11ty/eleventy-import/blob/806ec4c67dd5782e9406d35c211ab1ad50ff26b6/src/Fetcher.js#L148-L213
• Co-locating images together with a blog post in a folder #2428
• Pass through copy of asset directory #1540
• Rewriting Asset Links to Absolute Paths #379

[kleinfreund]

People might intentionally put currently invalid references in their source files (e.g. {{ to_be_replaced_external_to_eleventy }}/path/path/file.webp) to fill in with a separate build pipeline, so I would if this could cause any conflicts with such systems? (And to be clear, I made this up just now; I don't have a concrete example)

[zachleat]

Ah, to be clear this would be an opt-in feature via a configuration API flag for now to avoid conflicts with existing projects. The HTML transformer runs as a postprocessing step currently! It’s used by the Base plugin, the InputPath to URL plugin, the Image transform, among others.

[pepelsbey]

Yes please! Currently, I’m working around it with the following passthrough config:

config.addPassthroughCopy('src/articles/**/*.!(md|yml)')

And just to clarify: will it work if the resource is referenced in Markdown?

[zachleat]

@pepelsbey yes, absolutely!

[jeremenichelli]

I wonder what would happen if I have some references in my HTML that I do want but also have some assets that I do some sort of processing on the side, or generated from other npm scripts.

I think this could benefit some obvious parts (like favicons for example), but mess up others. I wonder how I could signal inline if I want to opt-out, because if the user needs to exclude paths, then I don't see the benefit from just configuring the passthroughs you want 🤔

[iamdtms]

What if someone stores image assets in _site/assets/media folder by default? Is it okay? Or it would be rewritten by automatic passthrough copy? Is it a real use case?

[eaton]

People might intentionally put currently invalid references in their source files (e.g. {{ to_be_replaced_external_to_eleventy }}/path/path/file.webp) to fill in with a separate build pipeline, so I would if this could cause any conflicts with such systems? (And to be clear, I made this up just now; I don't have a concrete example)

Glad to hear this scenario will be accounted for — that's exactly how I structure things with quite a bit of my content; I actually use a dummy protocol on the URLs, replacing it with one value on dev but pointing it to an S3 bucket once it's deployed.

[zachleat]

PR for the AutoCopy plugin (with a few preliminary docs) is here: #3573

Feedback welcome!

[zachleat]

#3573 is shipping with the Html Relative feature for Passthrough File Copy in v3.0.1-alpha.1