Find linked Files in HTML and Include Them in Build Output

getLinkedFilesFromHtml.js parses html input to an abstract syntax tree and extracts the href/src attributes from link and img nodes.

We now have a list of slash-separated paths as strings.

[
  'css/style.css',
  'about/bird.webp',
  'about/monkey.webp'
]

But Origami doesn't work with paths, it works with trees. So to get Origami to copy the files' contents for us, we need a nested tree that Origami can traverse.

{
  images: {
    'bird.webp': (binary image data),
    'monkey.webp': (binary image data),
  },
  css: {
    'style.css': 'body { font-family: ...}'
  }
}

So pathsToObjs.js creates such an object from the slash-separated paths.

The resulting object can be applied as a mask to the tree of all files in the source directory. The result is a tree with only the files which the html files link to. We include the contents of this tree in the final top-level tree.

Demo

This file and the following two linked pages all reference css/style.css. The two pages also each reference an image from the image/ directory.

• linked-image
• linked-stylesheet

Here's the full site.ori defining the files to copy to the output.

${site.ori}