docs: update container image URL in README

The previous implementation did not work when the link prefix
went back deeper than the current folder allows
e.g. ../../.. when running from /app

Which is expected to work regardless because the link prefix
is assumed to exist relative to the final deployment

Fixes #351

README.md

@@ -62,7 +62,7 @@ And optionally:
 - [dcraw](https://www.cybercom.net/~dcoffin/dcraw/) to process RAW photos: `brew install dcraw`
 - [ImageMagick](https://imagemagick.org/) for HEIC support (needs to be compiled with `--with-heic`)
 
-You can run thumbsup as a Docker container ([thumbsupgallery/thumbsup](https://hub.docker.com/r/thumbsupgallery/thumbsup/)) which pre-packages all the dependencies above. Read the [thumbsup on Docker](https://thumbsup.github.io/docs/2-installation/docker/) documentation for more detail.
+You can run thumbsup as a Docker container ([ghcr.io/thumbsup/thumbsup](https://github.com/thumbsup/thumbsup/pkgs/container/thumbsup)) which pre-packages all the dependencies above. Read the [thumbsup on Docker](https://thumbsup.github.io/docs/2-installation/docker/) documentation for more detail.
 
 ```bash
 docker run -v `pwd`:/work thumbsupgallery/thumbsup [...]

src/website/theme-base/helpers/relative.js

@@ -6,7 +6,8 @@ module.exports = (target, options) => {
     return target
   }
   const albumPath = options.data.root.album.path
-  const relative = path.relative(path.dirname(albumPath), target)
+  const backToGalleryRoot = path.relative(path.dirname(albumPath), '.')
+  const relative = path.join(backToGalleryRoot, target)
   const url = relative.replace(/\\/g, '/')
   // Escape single/double quotes
   return url.replace(/'/g, '%27').replace(/"/g, '%22')

test/themes/helpers/relative.spec.js

@@ -1,59 +1,105 @@
-const date = require('../../../src/website/theme-base/helpers/relative')
+const relative = require('../../../src/website/theme-base/helpers/relative')
 const handlebars = require('handlebars')
 const should = require('should/as-function')
 
 describe('Handlebars helpers: relative', () => {
-  handlebars.registerHelper('relative', date)
+  handlebars.registerHelper('relative', relative)
 
-  it('returns a path in the same folder', () => {
-    const template = handlebars.compile('<link rel="stylesheet" href="{{relative \'public/theme.css\'}}" />')
-    const res = template({
-      album: {
-        path: 'index.html'
-      }
+  describe('theme assets', () => {
+    it('returns a path in the same folder', () => {
+      const template = handlebars.compile('<link rel="stylesheet" href="{{relative \'public/theme.css\'}}" />')
+      const res = template({
+        album: {
+          path: 'index.html'
+        }
+      })
+      should(res).eql('<link rel="stylesheet" href="public/theme.css" />')
     })
-    should(res).eql('<link rel="stylesheet" href="public/theme.css" />')
-  })
 
-  it('returns a relative path for albums in nested folders', () => {
-    const template = handlebars.compile('<link rel="stylesheet" href="{{relative \'public/theme.css\'}}" />')
-    const res = template({
-      album: {
-        path: 'albums/holidays.html'
-      }
+    it('returns a relative path for albums in nested folders', () => {
+      const template = handlebars.compile('<link rel="stylesheet" href="{{relative \'public/theme.css\'}}" />')
+      const res = template({
+        album: {
+          path: 'albums/holidays.html'
+        }
+      })
+      should(res).eql('<link rel="stylesheet" href="../public/theme.css" />')
     })
-    should(res).eql('<link rel="stylesheet" href="../public/theme.css" />')
   })
 
-  it('does not do anything if the path is an absolute URL', () => {
-    // This can happen when using --link-prefix
-    const url = 'http://example.com/photo.jpg'
-    const template = handlebars.compile(`<img src="{{relative '${url}'}}" />`)
-    const res = template({})
-    should(res).eql(`<img src="${url}" />`)
-  })
+  describe('images and videos', () => {
+    it('returns a path from the root album', () => {
+      const template = handlebars.compile('<img src="{{relative \'media/thumbs/img.jpg\'}}" />')
+      const res = template({
+        album: {
+          path: 'index.html'
+        }
+      })
+      should(res).eql('<img src="media/thumbs/img.jpg" />')
+    })
 
-  // TODO: this should not be needed anymore because all URLs are already escaped
-  it('escapes single quotes so they can be used in CSS background-image', () => {
-    const template = handlebars.compile("background-image('{{relative url}}')")
-    const res = template({
-      url: "l'histoire.jpg",
-      album: {
-        path: 'index.html'
-      }
+    it('returns a path from a nested album', () => {
+      const template = handlebars.compile('<img src="{{relative \'media/thumbs/img.jpg\'}}" />')
+      const res = template({
+        album: {
+          path: 'albums/holidays.html'
+        }
+      })
+      should(res).eql('<img src="../media/thumbs/img.jpg" />')
+    })
+
+    it('can use a relative link from the root album', () => {
+      const template = handlebars.compile('<link rel="stylesheet" href="{{relative \'../../photos/img.jpg\'}}" />')
+      const res = template({
+        album: {
+          path: 'index.html'
+        }
+      })
+      should(res).eql('<link rel="stylesheet" href="../../photos/img.jpg" />')
+    })
+
+    it('can use relative link from a nested album', () => {
+      const template = handlebars.compile('<link rel="stylesheet" href="{{relative \'../../photos/img.jpg\'}}" />')
+      const res = template({
+        album: {
+          path: 'albums/holidays.html'
+        }
+      })
+      should(res).eql('<link rel="stylesheet" href="../../../photos/img.jpg" />')
+    })
+
+    it('does not do anything if the path is an absolute URL', () => {
+      // This can happen when using --link-prefix
+      const url = 'http://example.com/photo.jpg'
+      const template = handlebars.compile(`<img src="{{relative '${url}'}}" />`)
+      const res = template({})
+      should(res).eql(`<img src="${url}" />`)
     })
-    should(res).eql("background-image('l%27histoire.jpg')")
   })
 
-  // TODO: this should not be needed anymore because all URLs are already escaped
-  it('escapes double quotes so they can be used in <img> tags', () => {
-    const template = handlebars.compile('<img src="{{relative url}}" />')
-    const res = template({
-      url: 'l"histoire.jpg',
-      album: {
-        path: 'index.html'
-      }
+  describe('escaping', () => {
+    // TODO: this should not be needed anymore because all URLs are already escaped
+    it('escapes single quotes so they can be used in CSS background-image', () => {
+      const template = handlebars.compile("background-image('{{relative url}}')")
+      const res = template({
+        url: "l'histoire.jpg",
+        album: {
+          path: 'index.html'
+        }
+      })
+      should(res).eql("background-image('l%27histoire.jpg')")
+    })
+
+    // TODO: this should not be needed anymore because all URLs are already escaped
+    it('escapes double quotes so they can be used in <img> tags', () => {
+      const template = handlebars.compile('<img src="{{relative url}}" />')
+      const res = template({
+        url: 'l"histoire.jpg',
+        album: {
+          path: 'index.html'
+        }
+      })
+      should(res).eql('<img src="l%22histoire.jpg" />')
     })
-    should(res).eql('<img src="l%22histoire.jpg" />')
   })
 })