# Find linked Files in HTML and Include Them in Build Output

`getLinkedFilesFromHtml.js` parses html input to an [abstract syntax tree](https://github.com/syntax-tree/hast) 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](https://weborigami.org/builtins/tree/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-image.html)
* [linked-stylesheet](linked-stylesheet.html)

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


```
${site.ori}
```