MDX: Support custom root content directory paths

.changeset/lovely-chicken-retire.md

@@ -0,0 +1,5 @@
+---
+'next-docs-mdx': patch
+---
+
+Fully support custom root content directory paths

apps/docs/utils/source.ts

@@ -18,7 +18,6 @@ const frontmatterSchema = defaultValidators.frontmatter.extend({
 
 const resolved = resolveFiles({
   map,
-  root: 'docs',
   validate: {
     frontmatter: frontmatterSchema
   }
@@ -28,10 +27,10 @@ export const { getPage, getPageUrl } = createPageUtils(resolved, '/docs', [])
 
 const builder = getPageTreeBuilder(resolved, { getUrl: getPageUrl })
 
-const uiTree = builder.build({ root: 'docs/ui' })
-const mdxTree = builder.build({ root: 'docs/mdx' })
+const uiTree = builder.build({ root: 'ui' })
+const mdxTree = builder.build({ root: 'mdx' })
 const headlessTree = builder.build({
-  root: 'docs/headless'
+  root: 'headless'
 })
 
 export function getTree(mode: 'ui' | 'headless' | 'mdx' | string): PageTree {

examples/experimental-mdx/content/docs/index.mdx

@@ -3,8 +3,6 @@ title: Hello World
 description: Your first document
 ---
 
-import Banner from '../../../../apps/docs/public/banner.png'
-
 Hey there!
 
 ## Heading
@@ -17,8 +15,6 @@ Hey there!
   />
 </Cards>
 
-<Image alt="Banner" src={Banner} />
-
 ### Heading
 
 #### Heading

examples/experimental-mdx/content/index.mdx

@@ -0,0 +1,20 @@
+---
+title: Hello World
+description: Your first document
+---
+
+Hey there!
+
+## Heading
+
+<Cards>
+  <Card title="Learn more about Next.js" href="https://nextjs.org/docs" />
+  <Card
+    title="Learn more about Next Docs"
+    href="https://next-docs-zeta.vercel.app"
+  />
+</Cards>
+
+### Heading
+
+#### Heading

packages/next-docs-mdx/src/config.ts

@@ -38,14 +38,14 @@ type NextDocsMDXOptions = {
   /**
    * Where the root `_map.ts` should be, relative to cwd
    *
-   * @defualt './_map.ts`
+   * @default './_map.ts`
    */
   rootMapPath?: string
 
   /**
    * Where the content directory should be, relative to cwd
    *
-   * @defualt './content`
+   * @default './content/docs`
    */
   rootContentPath?: string
 }
@@ -57,7 +57,7 @@ const createNextDocs =
     mdxOptions = {},
     cwd = process.cwd(),
     rootMapPath = './_map.ts',
-    rootContentPath = './content'
+    rootContentPath = './content/docs'
   }: NextDocsMDXOptions = {}) =>
   (nextConfig: NextConfig = {}) => {
     const exports = ['structuredData', 'toc', ...dataExports]

packages/next-docs-mdx/src/loader.ts

@@ -18,7 +18,7 @@ export default function loader(
   const { cwd, rootContentPath } = this.getOptions()
 
   this.cacheable(true)
-  this.addContextDependency(path.resolve('./content'))
+  this.addContextDependency(path.resolve(cwd, rootContentPath))
 
   callback(null, buildMap({ cwd, rootContentPath }))
 }
@@ -31,7 +31,7 @@ function buildMap({ cwd, rootContentPath }: LoaderOptions): string {
   const entries = files.map(file => {
     const importPath = path.join(rootContentPath, file)
 
-    return `${JSON.stringify(importPath)}: await import(${JSON.stringify(
+    return `${JSON.stringify(file)}: await import(${JSON.stringify(
       importPath
     )})`
   })

packages/next-docs-mdx/src/map.ts

@@ -17,8 +17,8 @@ type UtilsOptions<Langs extends string[] | undefined> = {
   baseUrl: string
 
   /**
-   * Where to scan nodes
-   * @default 'docs'
+   * Where to scan nodes (For building page tree)
+   * @default ''
    */
   root: string
 
@@ -39,7 +39,7 @@ function fromMap<Langs extends string[] | undefined = undefined>(
   map: Record<string, unknown>,
   {
     baseUrl = '/docs',
-    root = 'docs',
+    root = '',
     getUrl,
     resolveIcon,
     languages,
@@ -48,7 +48,6 @@ function fromMap<Langs extends string[] | undefined = undefined>(
 ): Langs extends string[] ? I18nUtils : Utils {
   const resolved = resolveFiles({
     map,
-    root,
     validate
   })
 

packages/next-docs-mdx/src/page-utils.ts

@@ -43,7 +43,7 @@ export function createPageUtils(
       return i18nMap.get(locale)!
     },
     getPageUrl(slugs = [], locale) {
-      return slugsToUrl([baseUrl, locale, ...slugs])
+      return joinPaths(baseUrl, ...slugs, locale ?? null)
     },
     getPage(slugs, locale) {
       return getPage(pages, slugs, locale)
@@ -51,8 +51,21 @@ export function createPageUtils(
   }
 }
 
-function slugsToUrl(slugs: (string | undefined)[] = []): string {
-  return slugs.filter(Boolean).join('/')
+/**
+ * @example
+ * ```
+ * ['a','b','c'] // '/a/b/c'
+ * ['/a'] // '/a'
+ * ```
+ */
+function joinPaths(...paths: (string | null)[]): string {
+  const relative = paths
+    // filter slashes & empty
+    .filter(path => path != null && path.length !== 0 && path !== '/')
+    .join('/')
+
+  if (relative.startsWith('/')) return relative
+  return '/' + relative
 }
 
 function getPage(

packages/next-docs-mdx/src/types.ts

@@ -3,6 +3,9 @@ import type { StructuredData } from 'next-docs-zeta/mdx-plugins'
 import type { TableOfContents } from 'next-docs-zeta/server'
 import type * as Default from './validate/schema'
 
+/**
+ * The file info, relative to root content directory
+ */
 export type FileInfo = {
   locale?: string
 
@@ -27,7 +30,7 @@ export type FileInfo = {
   name: string
 
   /**
-   * Original path, should be relative to cwd
+   * Original path
    */
   path: string
 
@@ -37,7 +40,7 @@ export type FileInfo = {
   flattenedPath: string
 
   /**
-   * Unique ID for each file, based on path
+   * Unique ID for each file, based on `path`
    */
   id: string
 }