fix: add relative path to component links in static builds (#1062)

* add relative path to component links in static builds

In a static build the links to components now begin with `./` incase
a user has set a handle with a `:` in it.

Having a `:` in your component handle would produce a static url like:
`href="foo:btn.html"`
The browser tries to interpret this as an app link, which gives you a
`Failed to launch 'foo:btn' because the scheme does not have a registered handler`
error message in the browser developer console and stops page navigation.

Having a relative path current folder `./`, so producing
`href="./foo:btn.html"` stops the browser interpreting as an app link.

For server builds, this doesn't apply, the existing paths are used as before.

Why use `:` in a component handle?

Components may naturally have `:` in their name, such as `ratio-box--16:9` 
or a user maybe name spacing components in a multisite Fractal library, 
where components may have the same name but live in different sites:

```
{% include '@foo:btn' with data %} // outputs `btn` from site `foo`, "handle": "foo:btn"
{% include '@bar:btn' with data %} // outputs `btn` from site `bar`, "handle": "bar:btn"
```

* add `relativeToCurrentFolder` option to utils `relUrlPath`

so we can optionally choose to have a relative path from the current
folder or not

* use `relativeToCurrentFolder` option of `relUrlPath` in path helpers

* update tests to test for `relativeToCurrentFolder` usage

* update snapshots for build tests for relative paths from current dir

* add `relativeToCurrentFolder` to fractal config

and revert various path/adapters to previous state,
as they all read `app.web.get('builder.urls')` and so
get the new `builder.urls.relativeToCurrentFolder` option

* don't add `./` to output url of `relUrlPath` if starts with `.`

Tests updated to match

* add utils `returns correct relative path to file with extension` test variations

Co-authored-by: Mike Byrne <mike@area17.com>

Author: 13twelve

examples/handlebars/components/path/__snapshots__/path.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`path converts absolute path to relative for builder 1`] = `
-"some-path.html
+"./some-path.html
 "
 `;
 

examples/nunjucks/components/path/__snapshots__/path.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`path converts absolute path to relative for builder 1`] = `
-"some-path.html
+"./some-path.html
 "
 `;
 

examples/react/components/path/__snapshots__/path.spec.js.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`path converts absolute path to relative for builder 1`] = `"some-path.html"`;
+exports[`path converts absolute path to relative for builder 1`] = `"./some-path.html"`;
 
 exports[`path renders original path for server 1`] = `"/some-path"`;

examples/twig/components/path/__snapshots__/path.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`path converts absolute path to relative for builder 1`] = `
-"some-path.html
+"./some-path.html
 "
 `;
 

packages/core/src/utils.js

@@ -146,14 +146,28 @@ module.exports = {
         fromPath = getStaticPagePath(fromPath).replace(/\\/g, '/');
         toPath = ('/' + _.trim(Path.extname(toPath) ? toPath : getStaticPagePath(toPath), '/')).replace(/\\/g, '/');
 
+        let outputPath;
+
         if (toPath == '/') {
-            return Path.relative(fromPath, toPath).replace(/\\/g, '/');
+            outputPath = Path.relative(fromPath, toPath).replace(/\\/g, '/');
+        } else {
+            outputPath = Path.relative(fromPath, toPath)
+                .replace(/\\/g, '/')
+                .replace(/^\.\.\//, '')
+                .replace('.PLACEHOLDER', ext);
         }
 
-        return Path.relative(fromPath, toPath)
-            .replace(/\\/g, '/')
-            .replace(/^\.\.\//, '')
-            .replace('.PLACEHOLDER', ext);
+        // for static builds, we want urls relative to the current directory
+        // eg: ./btn.html
+        // so that any use of `:` within a handle generates links as `./foo:btn.html`
+        // and not just `foo:btn.html` as browsers may try to interpret the `:`
+        // as an application link, like `<a href="twitter://user?screen_name=clearleft">open</a>``
+        // which would open the twitter app.
+        // links like `foo:btn.html` the browser tries to open an app "foo", fails and emits:
+        // `Failed to launch 'foo:btn' because the scheme does not have a registered handler`
+        // and halts navigation. Adding the `./`, giving it a relative path to the current folder
+        // stops the browser interpreting the link as an app link, behaves as a normal link
+        return opts && opts.relativeToCurrentFolder && !outputPath.startsWith('.') ? `./${outputPath}` : outputPath;
 
         function getStaticPagePath(url) {
             if (url == '/') {

packages/core/test/utils.spec.js

@@ -302,6 +302,50 @@ describe('Utils', () => {
         it('returns correct relative path to file with extension', () => {
             expect(utils.relUrlPath('../to/image.png', '/path/b', opts)).toEqual('../to/image.png');
         });
+
+        // for static builds
+        const opts2 = {
+            ext: '.html',
+            relativeToCurrentFolder: true,
+        };
+        const opts3 = {
+            relativeToCurrentFolder: true,
+        };
+        it('returns correct relative path from current directory for same directory', () => {
+            expect(utils.relUrlPath('/path/to/a', '/path/to/b', opts2)).toEqual('./a.html');
+        });
+
+        it('returns correct relative path from the current directory for parent directory', () => {
+            expect(utils.relUrlPath('/path/to/a', '/path/b', opts2)).toEqual('./to/a.html');
+        });
+
+        it('returns toPath if it is full url even if `relativeToCurrentFolder` is true', () => {
+            expect(utils.relUrlPath('https://fractal.build', '/path/b', opts2)).toEqual('https://fractal.build');
+        });
+
+        it('returns toPath with extension if it is already a relative path from current directory', () => {
+            expect(utils.relUrlPath('./path/to/a', '/path/b', opts2)).toEqual('./path/to/a.html');
+        });
+
+        it('returns toPath without extension if it is already a relative path from current directory', () => {
+            expect(utils.relUrlPath('./path/to/a', '/path/b', opts3)).toEqual('./path/to/a');
+        });
+
+        it('returns correct path to root from current directory', () => {
+            expect(utils.relUrlPath('/', '/path/b', opts3)).toEqual('../..');
+        });
+
+        it('returns correct path to root with extension from current directory', () => {
+            expect(utils.relUrlPath('/', '/path/b', opts2)).toEqual('../index.html');
+        });
+
+        it('returns correct path to file with extension from current directory', () => {
+            expect(utils.relUrlPath('/path/to/image.png', '/path/b', opts2)).toEqual('./to/image.png');
+        });
+
+        it('returns correct relative path to file with extension from current directory', () => {
+            expect(utils.relUrlPath('../to/image.png', '/path/b', opts2)).toEqual('../to/image.png');
+        });
     });
 });
 

packages/fractal/config.js

@@ -116,6 +116,7 @@ module.exports = {
             ext: '.html',
             urls: {
                 ext: '.html',
+                relativeToCurrentFolder: true,
             },
             static: {
                 ignored: [],