Home / File/ page-tree.ts — ui Source File

page-tree.ts — ui Source File

Architecture documentation for page-tree.ts, a typescript file in the ui codebase. 1 imports, 0 dependents.

Entity Profile

Dependency Diagram

graph LR
  447b1674_3ebd_165e_d19d_dc75a770805d["page-tree.ts"]
  b5f7acc2_8550_f8f0_0425_a71c6d434acd["source"]
  447b1674_3ebd_165e_d19d_dc75a770805d --> b5f7acc2_8550_f8f0_0425_a71c6d434acd
  style 447b1674_3ebd_165e_d19d_dc75a770805d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import type { source } from "@/lib/source"

export type PageTreeNode = (typeof source.pageTree)["children"][number]
export type PageTreeFolder = Extract<PageTreeNode, { type: "folder" }>
export type PageTreePage = Extract<PageTreeNode, { type: "page" }>

// Recursively find all pages in a folder tree.
export function getAllPagesFromFolder(folder: PageTreeFolder): PageTreePage[] {
  const pages: PageTreePage[] = []

  for (const child of folder.children) {
    if (child.type === "page") {
      pages.push(child)
    } else if (child.type === "folder") {
      pages.push(...getAllPagesFromFolder(child))
    }
  }

  return pages
}

// Get the pages from a folder, handling nested base folders (radix/base).
export function getPagesFromFolder(
  folder: PageTreeFolder,
  currentBase: string
): PageTreePage[] {
  // For the components folder, find the base subfolder.
  if (folder.$id === "components" || folder.name === "Components") {
    for (const child of folder.children) {
      if (child.type === "folder") {
        // Match by $id or by name.
        const isRadix = child.$id === "radix" || child.name === "Radix UI"
        const isBase = child.$id === "base" || child.name === "Base UI"

        if (
          (currentBase === "radix" && isRadix) ||
          (currentBase === "base" && isBase)
        ) {
          return child.children.filter(
            (c): c is PageTreePage => c.type === "page"
          )
        }
      }
    }

    // Fallback: return all pages from nested folders.
    return getAllPagesFromFolder(folder).filter(
      (page) => !page.url.endsWith("/components")
    )
  }

  // For other folders, return direct page children.
  return folder.children.filter(
    (child): child is PageTreePage => child.type === "page"
  )
}

// Get current base (radix or base) from pathname.
export function getCurrentBase(pathname: string): string {
  const baseMatch = pathname.match(/\/docs\/components\/(radix|base)\//)
  return baseMatch ? baseMatch[1] : "radix" // Default to radix.
}

Subdomains

Dependencies

  • source

Frequently Asked Questions

What does page-tree.ts do?
page-tree.ts is a source file in the ui codebase, written in typescript. It belongs to the DocumentationAtlas domain, SearchAPI subdomain.
What functions are defined in page-tree.ts?
page-tree.ts defines 3 function(s): getAllPagesFromFolder, getCurrentBase, getPagesFromFolder.
What does page-tree.ts depend on?
page-tree.ts imports 1 module(s): source.
Where is page-tree.ts in the architecture?
page-tree.ts is located at apps/v4/lib/page-tree.ts (domain: DocumentationAtlas, subdomain: SearchAPI, directory: apps/v4/lib).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free