Struggling with urls when transforming from markdown

[Amy-Lynn]

trafficstars

I'm trying to use eleventy for generating documentation pages based on markdown content and I'm running into issues with the urls:

• Relative urls to images: I have links like ![](./../images/my-image.jpg), which breaks when I switch to permalinks because the structure is different
• Relative urls to markdown files: I have links like [my link](./my-link.md), which breaks when converted to HTML

I'd prefer to have the markdown still work (seems nicer from an editing perspective) - creating a bunch of links that aren't correct in the source code but will be correct later feels like a strange paradigm for me.

I feel like I must be missing something - how am I expected to be writing my pages? I've been doing a lot of searching but I'm not really finding anything on how to address this.

Thanks!

[Ryuno-Ki]

Hm, my-link as relative URL works in my instances. What results do you see, Amy-Lynn?

[GerHobbelt]

Running into the same problem here (I guess): when using a dynamic permalink method (along the lines of https://www.11ty.dev/docs/languages/javascript/#permalink-function in a system-wide applied template stored in _data/layout/default.11ty.js in my case) the Markdown files' URLs are changed to permalinks, but the MarkDown is apparently not (re)generated in such a way that these file-path-to-permalink mappings are taken into account: here the render output of each MarkDown file is as if those permalinks are unheard of inside the markdown-it render process.

So:

• each MD file ends up at the designation permalink URI
• all links in the rendered MD file look as if any permalinks to other MD and other types of files (images, etc.) referenced in links in the MD source are unknown, i.e. they are correct only when you run the entire process without a permalink URL format spec.

[TigersWay]

I started in the community repo an issue about finding the right editor just because of that. If you have to work on your permalinks, there is no good way for your images. The only way I found - so far - is to have a global image folder. Typora or mark text, even atom work fine that way... Not yet code!

[nhoizey]

I had the same kind of issues with URL and hierarchy different in source and destination, so I chose not to fight and adopt a simpler 1 to 1 mapping without permalinks.

For example, this Markdown: https://github.com/nhoizey/nicolas-hoizey.com/tree/master/src/articles/2020/01/10/can-we-monitor-user-happiness-on-the-web-with-performance-tools

Generates this pages: https://nicolas-hoizey.com/articles/2020/01/10/can-we-monitor-user-happiness-on-the-web-with-performance-tools/

See how articles/2020/01/10/can-we-monitor-user-happiness-on-the-web-with-performance-tools is common to both.

I use index.md files so that automatic permalinks make it index.html in the same hierarchy.

You can see the source folder also contain images, which are referenced in the Markdown as local files with for example (simplified): ![](speedcurve-user-happiness-monitoring.png)

I'm added image file extensions (and also zip and kmz) to the templateFormats list so that Eleventy copy them in the same folder hierarchy, so local relative URL still work: https://github.com/nhoizey/nicolas-hoizey.com/blob/a4afa6dabc2b1f2d16de51fbb2e3a83a21a4a1cf/.eleventy.js#L187

It should be enough for your issue.

Additionally, I use https://github.com/nhoizey/eleventy-plugin-images-responsiver to transform simple image HTML to responsive.