remark-copy-linked-files

Find files which are linked to from markdown and copy them to a destination directory. For the most part, this code is taken directly from gatsby-remark-copy-linked-files 🙏.

installation

yarn add remark-copy-linked-files

usage

Say we have the following markdown:

[path to file](files/sample-file.txt)

<img src="images/sample-image.png" />
<img src="images/sample-image.jpeg" />
<img src="images/sample-image.jpg" />
<a href="files/sample-file.txt">link to file</a>
<a href="http://example.com/">Link to example.com</a>

![some svg image](images/sample-image.svg)
![some gif image](images/sample-image.gif)
![some png image](images/sample-image.png)
![some jpg image](images/sample-image.jpg)
![some jpeg image](images/sample-image.jpeg)
![some absolute image](https://google.com/images/sample-image.gif)

<video controls="controls" autoplay loop>
  <source type="video/mp4" src="videos/sample-video.mp4"/>
  <p>Your browser does not support the video element.</p>
</video>

![sample][1]

[1]: images/sample-image.png

And our script looks as follows:

const destinationDir = __dirname;

remark()
  .use(require('remark-copy-linked-files'), { destinationDir })
  .use(require('remark-html'))
  .process(VFile({ path, contents }));

Now, running it yields:

<p>
  <a href="/sample-file-3324f2167c.txt">path to file</a>
</p>

<img src="/sample-image-1e02a85bee.png" />
<img src="/sample-image-5aa858befc.jpeg" />
<img src="/sample-image-5aa858befc.jpg" />
<a href="/sample-file-3324f2167c.txt">link to file</a>
<a href="http://example.com/">Link to example.com</a>

<p>
  <img src="/sample-image-5e25d61b3f.svg" alt="some svg image" />
  <img src="/sample-image-76faedf4c5.gif" alt="some gif image" />
  <img src="/sample-image-1e02a85bee.png" alt="some png image" />
  <img src="/sample-image-5aa858befc.jpg" alt="some jpg image" />
  <img src="/sample-image-5aa858befc.jpeg" alt="some jpeg image" />
  <img
    src="https://google.com/images/sample-image.gif"
    alt="some absolute image"
  />
</p>

<video controls="controls" autoplay loop>
  <source type="video/mp4" src="/sample-video-d9061d3da8.mp4" />
  <p>Your browser does not support the video element.</p>
</video>

<p>
  <img src="/sample-image-1e02a85bee.png" alt="sample" />
</p>

And writes the following files:

.
├── sample-file-3324f2167c.txt
├── sample-image-1e02a85bee.png
├── sample-image-5aa858befc.jpeg
├── sample-image-5aa858befc.jpg
├── sample-image-5e25d61b3f.svg
├── sample-image-76faedf4c5.gif
└── sample-video-d9061d3da8.mp4

0 directories, 7 files

license

BSD-3-Clause