Fix images

Author: rstacruz

lib/fix_html.js

@@ -4,15 +4,16 @@ const cheerio = require('cheerio')
 const slugify = require('slugify')
 const resolve = require('path').resolve
 const dirname = require('path').dirname
+const relative = require('path').relative
 
 /**
  * Performs syntax highlighting and stuff.
  */
 
-module.exports = function fixHtml (html, fname, sources) {
+module.exports = function fixHtml (html, fname, sources, files) {
   const $ = cheerio.load(html)
   idify($)
-  fixReferences($, fname, sources)
+  fixReferences($, fname, sources, files)
   return $.html()
 }
 
@@ -27,7 +28,7 @@ function idify ($) {
   })
 }
 
-function fixReferences ($, fname, sources) {
+function fixReferences ($, fname, sources, files) {
   var base = dirname(fname)
 
   $('[href], [src]').each(function () {
@@ -50,11 +51,11 @@ function fixReferences ($, fname, sources) {
       url = url.substr(1) // strip '/'
     }
 
-    if (!sources[url]) {
+    if (!sources[url] && !files[url]) {
       throw new Error(`${fname}: Unknown reference '${origUrl}'`)
     }
 
-    url = sources[url]
+    url = relative('/' + base, '/' + (sources[url] || url))
     $this.attr(attr, url)
   }
 }

lib/index.js

@@ -89,7 +89,7 @@ function renderMarkdown (files, ms, done) {
 
     file._processed = true
     file.markdown = file.contents
-    file.html = fixHtml(html, fname, sources)
+    file.html = fixHtml(html, fname, sources, files)
     file.title = page.title
     file.source = page.source
     file.slug = page.slug

test/index/image_refs_test.js

@@ -0,0 +1,35 @@
+const compile = require('../../index')()
+
+describe('index/image refs:', function () {
+  beforeEach(function (done) {
+    // Mock metalsmith object
+    var ms = {
+      metadata () {
+        return { docs: 'docs' }
+      }
+    }
+
+    this.files = {
+      'docs/README.md': {
+        contents: '* [Readme](/README.md)\n'
+      },
+      'README.md': {
+        contents: '![](docs/images/screenshot.png)\n'
+      },
+      'docs/images/screenshot.png': {
+        contents: '...'
+      }
+    }
+
+    compile(this.files, ms, (err) => {
+      if (err) throw err
+      done()
+    })
+  })
+
+  it('works', function () {
+    expect(this.files['index.html'].contents).toEqual(
+      '<p><img src="docs/images/screenshot.png" alt=""></p>\n'
+    )
+  })
+})