48 lines
1.4 KiB
Markdown
48 lines
1.4 KiB
Markdown
# 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}
|
|
```
|