docs: fix local link to infer slug from front matter (#8353)

www/packages/remark-rehype-plugins/src/utils/fix-link.ts

@@ -1,4 +1,5 @@
 import path from "path"
+import { getFileSlugSyncUtil } from "./get-file-slug.js"
 
 export type FixLinkOptions = {
   currentPageFilePath: string
@@ -11,17 +12,22 @@ export function fixLinkUtil({
   linkedPath,
   appsPath: basePath,
 }: FixLinkOptions) {
-  // get absolute path of the URL
-  const linkedFilePath = path
-    .resolve(currentPageFilePath, linkedPath)
-    .replace(basePath, "")
+  let fullLinkedFilePath = path.resolve(currentPageFilePath, linkedPath)
   // persist hash in new URL
-  const hash = linkedFilePath.includes("#")
-    ? linkedFilePath.substring(linkedFilePath.indexOf("#"))
+  const hash = fullLinkedFilePath.includes("#")
+    ? fullLinkedFilePath.substring(fullLinkedFilePath.indexOf("#"))
     : ""
+  fullLinkedFilePath = fullLinkedFilePath.replace(hash, "")
+  // get absolute path of the URL
+  const linkedFilePath = fullLinkedFilePath.replace(basePath, "")
+  const linkedFileSlug = getFileSlugSyncUtil(fullLinkedFilePath)
 
-  return `${linkedFilePath.substring(
-    0,
-    linkedFilePath.indexOf(`/${path.basename(linkedFilePath)}`)
-  )}${hash}`
+  const newLink =
+    linkedFileSlug ||
+    linkedFilePath.substring(
+      0,
+      linkedFilePath.indexOf(`/${path.basename(linkedFilePath)}`)
+    )
+
+  return `${newLink}${hash}`
 }

www/packages/remark-rehype-plugins/src/utils/get-file-slug.ts

@@ -1,4 +1,7 @@
 import { getFrontMatterUtil } from "./get-front-matter.js"
+import { matter } from "vfile-matter"
+import { readSync } from "to-vfile"
+import { FrontMatter } from "../types/index.js"
 
 export async function getFileSlugUtil(
   filePath: string
@@ -10,3 +13,11 @@ export async function getFileSlugUtil(
     return fileFrontmatter.slug
   }
 }
+
+export function getFileSlugSyncUtil(filePath: string): string | undefined {
+  const content = readSync(filePath)
+
+  matter(content)
+
+  return ((content.data.matter as FrontMatter).slug as string) || undefined
+}