Support albums and images with # or ? (#235)

* Use encodeURIComponent for file URLs
* Use encodeURIComponent on album basename for the url
* Add unit tests for encoding # and ? characters

src/model/album.js

@@ -8,7 +8,6 @@ A single photo/video could exist in multiple albums
 
 const _ = require('lodash')
 const path = require('path')
-const url = require('url')
 const slugify = require('slugify')
 var index = 0
 
@@ -60,7 +59,7 @@ Album.prototype.finalize = function (options, parent) {
       this.basename = parent.basename + '-' + this.basename
     }
     this.path = path.join(albumsOutputFolder, this.basename + '.html')
-    this.url = url.resolve(albumsOutputFolder + '/', this.basename + '.html')
+    this.url = this.getUrl(albumsOutputFolder, this.basename + '.html')
     this.depth = parent.depth + 1
   }
   // path to the optional ZIP file
@@ -111,6 +110,18 @@ Album.prototype.calculateSummary = function () {
   this.summary = _.compact(items).join(', ')
 }
 
+Album.prototype.getUrl = function (albumsOutputFolder, documentPath) {
+  // Encode characters like ?, # and space, however, undo the encoding for slashes.
+  // This is needed to support albums and files with these URI-unfriendly characters.
+  // See https://github.com/thumbsup/thumbsup/issues/234
+  let url = encodeURIComponent(albumsOutputFolder + '/' + documentPath).replace(/%2F/g, '/')
+  // Shorten the url if it starts with './'
+  if (url.startsWith('./')) {
+    url = url.slice(2)
+  }
+  return url
+}
+
 Album.prototype.sort = function (options) {
   const sortAlbumsBy = getItemOrLast(options.sortAlbumsBy, this.depth)
   const sortAlbumsDirection = getItemOrLast(options.sortAlbumsDirection, this.depth)

src/model/file.js

@@ -41,7 +41,10 @@ function mediaType (dbEntry) {
 }
 
 function pathToUrl (filepath) {
-  return encodeURI(filepath.replace('\\', '/'))
+  // Encode characters like ?, #, and space, however, undo the encoding for slashes.
+  // This is needed to support albums and files with these URI-unfriendly characters.
+  // See https://github.com/thumbsup/thumbsup/issues/234
+  return encodeURIComponent(filepath.replace('\\', '/')).replace(/%2F/g, '/')
 }
 
 module.exports = File

test/model/album.spec.js

@@ -90,6 +90,24 @@ describe('Album', function () {
       should(root.albums[0].url).eql('2010.html')
     })
 
+    it('encodes # characters when calculating the URL for the browser', function () {
+      const root = new Album({
+        title: 'home',
+        albums: [new Album({ title: '#2010#' })]
+      })
+      root.finalize({ index: 'index.html' })
+      should(root.albums[0].url).eql('%232010%23.html')
+    })
+
+    it('encodes ? characters when calculating the URL for the browser', function () {
+      const root = new Album({
+        title: 'home',
+        albums: [new Album({ title: '?2010?' })]
+      })
+      root.finalize({ index: 'index.html' })
+      should(root.albums[0].url).eql('%3F2010%3F.html')
+    })
+
     it('calculates the output path with a target folder (slashes match the OS)', function () {
       const root = new Album({
         title: 'home',