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

Configuration

This plugin takes the following configuration options:

destinationDir

Path to the directory where the files should be copied. This option is mandatory.

sourceDir

Path to the directory where the files should be copied from. Use this if the MDX file you are loading is not the one calling this plugin.

Default is the current working directory.

staticPath

Prefix to use in the src attribute. Set this if the files are copied in a location that is is not hosted under /.

Default is /.

license

BSD-3-Clause