Foam: Links do not work properly for the Eleventy and Netlify template

[battermann]

The links that are created when publishing to Netlify using this template: https://github.com/juanfrank77/foam-eleventy-template by @juanfrank77 do not work properly.

E.g. on this page: https://vigilant-wilson-ff4faf.netlify.app/bubbles/inbox/ when you click on todo (https://vigilant-wilson-ff4faf.netlify.app/bubbles/inbox/todo).

[jevakallio]

@juanfrank77 the issue appears to be that Netlify redirects to urls with trailing slashes, so a link becomes interpreted as a file in that "directory", rather than a sibling file:
https://docs.netlify.com/routing/redirects/redirect-options/#trailing-slash

You can see that if you navigate to a URL without trailing slash:
https://vigilant-wilson-ff4faf.netlify.app/bubbles/inbox

It redirects you to a url with one:
https://vigilant-wilson-ff4faf.netlify.app/bubbles/inbox/

Whereas on GitHub pages this isn't happening:
https://foambubble.github.io/foam/recipes

[juanfrank77]

Hi!
That's actually part of the link generation of Foam links because it generates links based on the current folder.
So in the example the "todo" is generated based on the "bubbles" folder instead of the root directory.

I've found a way to do redirects with Netlify (e.g. for the 404 page) but in general to have it to work, the links in the bottom of the MD documents should be generated in respect to the root folder instead of the folder the documents is in.

[jevakallio]

That's actually part of the link generation of Foam links because it generates links based on the current folder.
So in the example the "todo" is generated based on the "bubbles" folder instead of the root directory.

There's a subtle semantic difference between how Foam (and GitHub pages) does it, and how Netlify does it.

In GitHub pages, you can have a link from /inbox to [[todo]], and the browser will navigate to /todo, because the path /inbox is considered a document, and the relative link points to a sibling file.

In Netlify, the same link from /inbox to [[todo]], will navigate to /inbox/todo, because the path /inbox/ with a trailing slash is considered a directory, so the relative link points to a file within it.

We currently have a couple of WIP PR's related to this:

• Implementation: Generate paths with file extension: https://github.com/foambubble/foam/pull/133
• Proposal: Link Definition and Disambiguation: https://github.com/foambubble/foam/pull/122

Neither of these proposals yet addresses the relative vs absolute path issue, and it's not quite as clear cut as to say "should be generated in respect to the root folder", since that comes with its own issues:

• If the website is hosted in a directory other than domain root, all links will break. This is true even for foam-template-eleventy, since the website is hosted in a directory called /bubbles.

@juanfrank77 how did you get the links to work in your template for yourself? It seems to me that the way Foam generates the links right now, it cannot work on Netlify at all?

Edit: Ah, just checked your template and turns out that linking from one document to another doesn't work even in the template example repo. You can see this by clicking "todo" from this page: https://vigilant-wilson-ff4faf.netlify.app/bubbles/inbox/

I think there probably a way to convert relative links to absolute ones in the Eleventy pipeline. Would you be interested in pursuing that?

[juanfrank77]

Hey @jevakallio
I actually made it work with the use of Netlify redirects but that's not a dependable solution large scale so it's not part of the tempate.

I thought it was part of the way links are generated and honestly I just found out about Eleventy doing research for this issue, so definitely have to dig more into their docs and see if I found something about the links there. Probably can do that this weekend.

[battermann]

Hey @jevakallio
I actually made it work with the use of Netlify redirects but that's not a dependable solution large scale so it's not part of the tempate.

@juanfrank77 How did you work around the issue in detail? It could be a good temporary solution for my problem as well.

[juanfrank77]

@battermann The easier way to do this is to use redirects in a Netlify config file netlify.toml in which you specify the initial URL, the redirected URL and any other desired options according to the docs

You can use a splat (*) in the rule to match anything that follows it.
So, for example, to fix the issue of going to the todo page from the inbox one. One could write a redirect like this

[[redirects]]
  from = "/bubbles/inbox/*"
  to = "/bubbles/:splat"
  status = 301
  force = true

You could also use placeholders instead (like "/bubbles/:slug")

Alternatively, you could have all the .md files on the root directory to avoid the /bubbles folder but then there would be some required changes to be made in the .eleventy.js file for the compilation to be done properly. (like changing the path of the output folder)

[LukeStorry]

It could be possible to fix by adding a HTML <base> tag to the default layout.

[juanfrank77]

Hey @LukeStorry
Would you mind opening a PR on the template?
I'd really appreciate it, have been really busy last week so I haven't able to look much into this.

[LukeStorry]

@juanfrank77 I couldn't get that template working at all, it doesn't use the scss or any 11ty templating.

I am in the progress of making my own site work nicely with 11th+foam, then I'll split out a template that works, and depending how different it is, put in PR

[zomars]

I'm also having this issue, I'm using the same eleventy template (I've made a PR also with some improvements) but I'm not using Netlify at all so the redirect solution doesn't work for me.

[zomars]

@LukeStorry I've solved the scss issue in my PR.

[juanfrank77]

@battermann @jevakallio
Hey guys, update on this.
Thanks to the great work of @zomars the link navigation on the template works as expected now without the need for Netlify redirects so folks can opt to use another hosting service (Vercel for instance) or any other that supports static sites. 🙌

[jevakallio]

Amazing! Thank you @zomars for this!