[gatsby-remark-copy-linked-files] Add support for HTML <audio> (#3224)

* bump README
* update examples/using-remark-copy-linked-files
  * restore failing „one line“ video tag example
  * switch (most) deps to latest

examples/using-remark-copy-linked-files/package.json

@@ -5,20 +5,20 @@
   "author": "Florian Kissling <sechskilo@gmail.com>",
   "dependencies": {
     "gatsby": "^1.9.108",
-    "gatsby-link": "^1.6.24",
+    "gatsby-link": "latest",
     "gatsby-plugin-google-analytics": "^1.0.12",
     "gatsby-plugin-offline": "^1.0.10",
     "gatsby-plugin-react-helmet": "^2.0.1",
-    "gatsby-plugin-sharp": "^1.6.20",
-    "gatsby-plugin-typography": "^1.7.10",
-    "gatsby-remark-copy-linked-files": "^1.5.20",
-    "gatsby-remark-images": "^1.5.31",
-    "gatsby-remark-prismjs": "^1.2.9",
-    "gatsby-remark-responsive-iframe": "^1.4.14",
-    "gatsby-remark-smartypants": "^1.4.8",
-    "gatsby-source-filesystem": "^1.5.8",
-    "gatsby-transformer-remark": "^1.7.20",
-    "gatsby-transformer-sharp": "^1.6.13",
+    "gatsby-plugin-sharp": "latest",
+    "gatsby-plugin-typography": "latest",
+    "gatsby-remark-copy-linked-files": "latest",
+    "gatsby-remark-images": "latest",
+    "gatsby-remark-prismjs": "latest",
+    "gatsby-remark-responsive-iframe": "latest",
+    "gatsby-remark-smartypants": "latest",
+    "gatsby-source-filesystem": "latest",
+    "gatsby-transformer-remark": "latest",
+    "gatsby-transformer-sharp": "latest",
     "hast-util-to-html": "^3.1.0",
     "lodash": "^4.15.0",
     "react-helmet": "^5.2.0",

examples/using-remark-copy-linked-files/src/pages/2017-11-13-gatsby-remark-copy-linked-files/index.md

@@ -111,8 +111,16 @@ HTML video tag with `source` and a fallback paragraph,
 However doing the same in just one line of HTML fails--\
 Video, <span class="fail">single line</span>:
 
-<video controls="controls" autoplay="true" loop="true"><source type="video/mp4" src="gatsbygram.mp4"></source><p>Your
-browser does not support the video element.</p></video>
+<video controls="controls" autoplay="true" loop="true"><source type="video/mp4" src="gatsbygram.mp4"></source><p>Your browser does not support the video element.</p></video>
+
+### Embedding Audio
+
+HTML audio tag with `source` and a fallback paragraph (MP3 via [doria.fi](https://www.doria.fi/handle/10024/72376), public domain):
+
+<audio controls="controls">
+  <source type="audio/mp3" src="RAI-GramophoneGC-82979-01-1-001.mp3"></source>
+  <p>Your browser does not support the audio element.</p>
+</audio>
 
 ## gatsby-config.js
 

packages/gatsby-remark-copy-linked-files/README.md

@@ -104,4 +104,5 @@ markdown HTML will be modified to point to it.
 
 * `<img />`
 * `<video />`
+* `<audio />`
 * `<a />`

packages/gatsby-remark-copy-linked-files/src/index.js

@@ -168,6 +168,7 @@ module.exports = (
   // For each HTML Node
   visit(markdownAST, `html`, node => {
     const $ = cheerio.load(node.value)
+
     // Handle Images
     const imageRefs = []
     $(`img`).each(function() {
@@ -196,8 +197,8 @@ module.exports = (
       }
     }
 
-    const videoRefs = []
     // Handle video tags.
+    const videoRefs = []
     $(`video source`).each(function() {
       try {
         if (isRelativeUrl($(this).attr(`src`))) {
@@ -231,6 +232,39 @@ module.exports = (
       }
     }
 
+    // Handle audio tags.
+    const audioRefs = []
+    $(`audio source`).each(function() {
+      try {
+        if (isRelativeUrl($(this).attr(`src`))) {
+          audioRefs.push($(this))
+        }
+      } catch (err) {
+        // Ignore
+      }
+    })
+
+    for (let thisAudio of audioRefs) {
+      try {
+        const ext = thisAudio
+          .attr(`src`)
+          .split(`.`)
+          .pop()
+        if (options.ignoreFileExtensions.includes(ext)) {
+          return
+        }
+
+        const link = { url: thisAudio.attr(`src`) }
+        visitor(link)
+        node.value = node.value.replace(
+          new RegExp(thisAudio.attr(`src`), `g`),
+          link.url
+        )
+      } catch (err) {
+        // Ignore
+      }
+    }
+
     // Handle a tags.
     const aRefs = []
     $(`a`).each(function() {
@@ -253,8 +287,6 @@ module.exports = (
           return
         }
 
-        // The link object will be modified to the new location so we'll
-        // use that data to update our ref
         const link = { url: thisATag.attr(`href`) }
         visitor(link)