Relative link to MDX files in docs partials

server/mdx-config-docs.ts

@@ -19,7 +19,6 @@ import remarkVariables from "./remark-variables";
 import remarkMdxDisableExplicitJsx from "remark-mdx-disable-explicit-jsx";
 import remarkCodeSnippet from "./remark-code-snippet";
 import remarkImportFiles from "./remark-import-files";
-import remarkLintDetails from "./remark-lint-details";
 import { getVersion, getVersionRootPath } from "./docs-helpers";
 import { loadConfig } from "./config-docs";
 import { fetchVideoMeta } from "./youtube-meta";

server/mdx-helpers.ts

@@ -13,7 +13,6 @@ import type {
 } from "./types-unist";
 
 import { createEstree } from "./estree-helpers";
-import stringifyObject from "stringify-object";
 
 export const createMdxjsEsmNode = (value: string): EsmNode => {
   return {

server/remark-includes.ts

@@ -11,11 +11,11 @@
 import type { Parent } from "unist";
 import type { Content, Code, Text } from "mdast";
 import type { VFile } from "vfile";
+import type { Node } from "mdast-util-from-markdown/lib";
+import { dirname, join, relative } from "path";
 
 import { existsSync, readFileSync } from "fs";
-import { join } from "path";
 import { visitParents } from "unist-util-visit-parents";
-
 import { fromMarkdown } from "mdast-util-from-markdown";
 
 import { mdxjs } from "micromark-extension-mdxjs";
@@ -66,6 +66,43 @@ const numIncludes = (value: string) => value.match(globalIncludeRegexp).length;
 const isInclude = (node: Code | Text): node is Code | Text =>
   typeof node.value === "string" && includeRegexp.test(node.value);
 
+/**
+ * correct relative paths resolving in partial docs
+ * i.e. start realtive paths from the partial file directory, not from place where it is being inserted
+ * example:
+ * main file: docs/page/1.mdx
+ * partial:   docs/partials/headers/1.mdx
+ *
+ * With this utility path like that
+ * ../image.jpg
+ * in partial will be pointing to
+ * docs/partials/image.jpg
+ * and without:
+ * docs/image.jpg
+ */
+const handlePartialLink = (node: Node, path: string, mdxPath: string) => {
+  if (node.type === "link") {
+    const href = node.url;
+
+    if (typeof href !== "string" || href[0] === "/" || /^http/.test(href)) {
+      return href;
+    }
+    // root where all documentation pages store
+    const absStart = "docs/pages";
+    // find an "abs" (starting with root) directory path of the file in which the partial doc was inserted
+    const absMdxPath = dirname(absStart + mdxPath.split(absStart).pop());
+    const absTargetPath = join(dirname(path), href);
+    // make the reference path relative to the place where the partial doc was inserted
+    node.url = relative(absMdxPath, absTargetPath);
+  }
+
+  if ("children" in node) {
+    node.children?.forEach?.((child) =>
+      handlePartialLink(child, path, mdxPath)
+    );
+  }
+};
+
 export interface RemarkIncludesOptions {
   rootDir?: string | ((vfile: VFile) => string);
   lint?: boolean;
@@ -131,6 +168,8 @@ export default function remarkIncludes({
                     ],
                   });
 
+                  handlePartialLink(tree, path, vfile.path);
+
                   const grandParent = ancestors[ancestors.length - 2] as Parent;
                   const parentIndex = grandParent.children.indexOf(parent);
 

server/remark-links.ts

@@ -84,7 +84,6 @@ export default function remarkLinks(): Transformer {
         const hrefAttribute = node.attributes.find(
           ({ name }) => name === "href"
         );
-
         hrefAttribute.value = updateHref(
           basename,
           hrefAttribute.value as Href