Implement relative path support for mdx link resolving

Author: kimmobrunfeldt

posts/5.md

@@ -0,0 +1 @@
+Animation where only input is time. Once per year something interesting happens

src/render.tsx

@@ -249,12 +249,13 @@ async function getPostData(
   const { data, content } = await parseMdxFile(mdxFilePath);
   const plain = remark().use(stripMarkdown).processSync(content).toString();
 
+  const postPath = `/posts/${data.slug}/`;
   const renderedMdxSource = await renderMdxToString(content, {
     components: {
       ...COMPONENTS,
     },
     mdxOptions: {
-      remarkPlugins: [resolveLinks],
+      remarkPlugins: [[resolveLinks, { currentPath: postPath }]],
     },
   });
   const charCount = plain.replace(/\s+/, "").length;
@@ -267,7 +268,7 @@ async function getPostData(
     slug: data.slug,
     tags: data.tags,
     description: data.description,
-    path: `/posts/${data.slug}`,
+    path: postPath,
     charCount,
     html: renderedMdxSource.renderedOutput,
   };

src/util/remark-resolve-links.ts

@@ -1,6 +1,10 @@
 import visit from "unist-util-visit";
 
-export function resolveLinks() {
+type Options = {
+  currentPath?: string;
+};
+
+export function resolveLinks(opts: Options = { currentPath: "/" }) {
   return (tree: any) => {
     // Visit all nodes that have .url attribute
     // https://github.com/syntax-tree/mdast
@@ -14,9 +18,10 @@ export function resolveLinks() {
         return;
       }
 
-      if (linkUrl.startsWith("/")) {
-        node.url = `https://kimmo.blog${node.url}`;
-      }
+      node.url = new URL(
+        linkUrl,
+        `https://kimmo.blog${opts.currentPath}`
+      ).toString();
     });
   };
 }