boltdocs 2.3.0 → 2.4.1

package/src/client/components/primitives/on-this-page.tsx

@@ -12,8 +12,8 @@ import React, {
 import scrollIntoView from 'scroll-into-view-if-needed'
 import { cn } from '../../utils/cn'
 import { useOnChange } from '../../utils/use-on-change'
-import type { ComponentBase, CompoundComponent } from './types'
-import { getItemId } from './helpers/observer'
+import type { ComponentBase } from './types'
+import { getItemId, Observer } from './helpers/observer'
 
 export interface TOCItemType {
   title: ReactNode
@@ -74,120 +74,6 @@ export interface OnThisPageIndicatorProps extends ComponentBase {
 const ItemsContext = createContext<TOCItemInfo[] | null>(null)
 const ScrollContext = createContext<RefObject<HTMLElement | null> | null>(null)
 
-class Observer {
-  items: TOCItemInfo[] = []
-  single = false
-  private observer: IntersectionObserver | null = null
-  onChange?: () => void
-
-  private callback(entries: IntersectionObserverEntry[]) {
-    if (entries.length === 0) return
-
-    let hasActive = false
-    this.items = this.items.map((item) => {
-      const entry = entries.find((entry) => entry.target.id === item.id)
-      let active = entry ? entry.isIntersecting : item.active && !item.fallback
-      if (this.single && hasActive) active = false
-
-      if (item.active !== active) {
-        item = {
-          ...item,
-          t: Date.now(),
-          active,
-          fallback: false,
-        }
-      }
-
-      if (active) hasActive = true
-      return item
-    })
-
-    if (!hasActive && entries[0].rootBounds) {
-      const viewTop = entries[0].rootBounds.top
-      let min = Number.MAX_VALUE
-      let fallbackIdx = -1
-
-      for (let i = 0; i < this.items.length; i++) {
-        const element = document.getElementById(this.items[i].id)
-        if (!element) continue
-
-        const d = Math.abs(viewTop - element.getBoundingClientRect().top)
-        if (d < min) {
-          fallbackIdx = i
-          min = d
-        }
-      }
-
-      if (fallbackIdx !== -1) {
-        this.items[fallbackIdx] = {
-          ...this.items[fallbackIdx],
-          active: true,
-          fallback: true,
-          t: Date.now(),
-        }
-      }
-    }
-
-    this.onChange?.()
-  }
-
-  setItems(newItems: TOCItemType[]) {
-    const observer = this.observer
-    if (observer) {
-      for (const item of this.items) {
-        const element = document.getElementById(item.id)
-        if (!element) continue
-        observer.unobserve(element)
-      }
-    }
-
-    this.items = []
-    for (const item of newItems) {
-      const id = getItemId(item.url)
-      if (!id) continue
-
-      this.items.push({
-        id,
-        active: false,
-        fallback: false,
-        t: 0,
-        original: item,
-      })
-    }
-    this.watchItems()
-
-    // In an SPA, the TOC might update before the MDX content is in the DOM.
-    // We perform a few delayed scans to ensure we catch those elements.
-    if (typeof window !== 'undefined') {
-      setTimeout(() => this.watchItems(), 100)
-      setTimeout(() => this.watchItems(), 500)
-      setTimeout(() => this.watchItems(), 1000)
-    }
-
-    this.onChange?.()
-  }
-
-  watch(options?: IntersectionObserverInit) {
-    if (this.observer) return
-    this.observer = new IntersectionObserver(this.callback.bind(this), options)
-    this.watchItems()
-  }
-
-  private watchItems() {
-    if (!this.observer) return
-    for (const item of this.items) {
-      const element = document.getElementById(item.id)
-      if (!element) continue
-      this.observer.observe(element)
-    }
-  }
-
-  unwatch() {
-    this.observer?.disconnect()
-    this.observer = null
-  }
-}
-
 export function useItems() {
   const ctx = use(ItemsContext)
   if (!ctx)
@@ -197,40 +83,6 @@ export function useItems() {
   return ctx
 }
 
-export function useScrollStatus(ref: RefObject<HTMLElement | null>) {
-  const [status, setStatus] = useState({
-    isOverflowing: false,
-    isAtBottom: false,
-  })
-
-  useEffect(() => {
-    const el = ref.current
-    if (!el) return
-
-    const checkStatus = () => {
-      const isOverflowing = el.scrollHeight > el.clientHeight
-      // We use a 2px threshold for floating point math issues
-      const isAtBottom = el.scrollHeight - el.scrollTop <= el.clientHeight + 2
-      setStatus({ isOverflowing, isAtBottom })
-    }
-
-    checkStatus()
-    el.addEventListener('scroll', checkStatus, { passive: true })
-    window.addEventListener('resize', checkStatus)
-
-    const mutationObserver = new MutationObserver(checkStatus)
-    mutationObserver.observe(el, { childList: true, subtree: true })
-
-    return () => {
-      el.removeEventListener('scroll', checkStatus)
-      window.removeEventListener('resize', checkStatus)
-      mutationObserver.disconnect()
-    }
-  }, [ref])
-
-  return status
-}
-
 export function useActiveAnchor(): string | undefined {
   const items = useItems()
   return useMemo(() => {
@@ -282,9 +134,11 @@ export function AnchorProvider({
   }, [observer, toc])
 
   useEffect(() => {
+    // We use a rootMargin that acts as an activation "line" near the top.
+    // headings are "intersecting" (active=true) when they are BELOW this line.
     observer.watch({
-      rootMargin: '0px',
-      threshold: 0.98,
+      rootMargin: '-100px 0% 0% 0%',
+      threshold: 0,
     })
     observer.onChange = () => setItems([...observer.items])
 
@@ -339,18 +193,10 @@ export const OnThisPageContent = ({
 
   useImperativeHandle(ref, () => internalRef.current!)
 
-  const { isOverflowing, isAtBottom } = useScrollStatus(internalRef)
-
   return (
     <div
       ref={internalRef}
-      className={cn(
-        'relative overflow-y-auto boltdocs-otp-content',
-        isOverflowing &&
-          !isAtBottom &&
-          'mask-[linear-gradient(to_bottom,black_85%,transparent_100%)]',
-        className,
-      )}
+      className={cn('relative overflow-y-auto boltdocs-otp-content', className)}
       {...props}
     >
       {children}

package/src/client/components/primitives/popover.tsx

@@ -24,8 +24,7 @@ export const Popover = ({
       {...props}
       className={RAC.composeRenderProps(className, (className) =>
         cn(
-          'z-50 overflow-auto rounded-xl border border-border-subtle bg-bg-surface/80 shadow-xl backdrop-blur-md outline-none',
-          'entering:animate-in entering:fade-in entering:zoom-in-95 exiting:animate-out exiting:fade-out exiting:zoom-out-95 fill-mode-forwards',
+          'z-50 overflow-auto rounded-xl border border-border-subtle bg-bg-surface/80 shadow-xl backdrop-blur-md outline-none transition-none',
           className,
         ),
       )}

package/src/client/components/ui-base/copy-markdown.tsx

@@ -80,25 +80,19 @@ export function CopyMarkdown({ content, mdxRaw, config }: CopyMarkdownProps) {
             )}
           />
           <Menu className="w-52">
-            <MenuItem
-              onAction={handleCopy}
-              className="flex flex-row items-start gap-2.5 group"
-            >
+            <MenuItem onAction={handleCopy}>
               <Copy
                 size={16}
-                className="w-4 h-4 shrink-0 mt-0.5 transition-transform duration-200 group-hover:-translate-y-0.5 text-text-muted group-hover:text-primary-500"
+                className="size-4 mt-0.5 text-text-muted group-hover:text-primary-500"
               />
               <span className="font-medium text-[0.8125rem]">
                 Copy Markdown
               </span>
             </MenuItem>
-            <MenuItem
-              onAction={handleOpenRaw}
-              className="flex flex-row items-start gap-2.5 group"
-            >
+            <MenuItem onAction={handleOpenRaw}>
               <ExternalLink
                 size={16}
-                className="w-4 h-4 shrink-0 mt-0.5 transition-transform duration-200 group-hover:-translate-y-0.5 text-text-muted group-hover:text-primary-500"
+                className="size-4 mt-0.5 text-text-muted group-hover:text-primary-500"
               />
               <span className="font-medium text-[0.8125rem]">
                 View as Markdown

package/src/client/components/ui-base/index.ts

@@ -10,7 +10,6 @@ export { NotFound } from './not-found'
 export { OnThisPage } from './on-this-page'
 export { PageNav } from './page-nav'
 export { PoweredBy } from './powered-by'
-export { ProgressBar } from './progress-bar'
 export { SearchDialog } from './search-dialog'
 export { Sidebar } from './sidebar'
 export { Tabs } from './tabs'

package/src/client/components/ui-base/navbar.tsx

@@ -26,7 +26,7 @@ export function Navbar() {
   const { routes, allRoutes, currentVersion, currentLocale } = useRoutes()
   const { pathname } = useLocation()
   const themeConfig = config.theme || {}
-
+  const isDocs = pathname.startsWith('/docs')
   const hasTabs = themeConfig?.tabs && themeConfig.tabs.length > 0
 
   return (
@@ -44,12 +44,6 @@ export function Navbar() {
           <NavbarPrimitive.Title>{title}</NavbarPrimitive.Title>
 
           {config.versions && currentVersion && <NavbarVersion />}
-
-          <NavbarPrimitive.Links>
-            {links.map((link) => (
-              <NavbarLinkItem key={link.href} link={link} />
-            ))}
-          </NavbarPrimitive.Links>
         </NavbarPrimitive.NavbarLeft>
         <NavbarPrimitive.NavbarCenter>
           <Suspense
@@ -61,6 +55,13 @@ export function Navbar() {
           </Suspense>
         </NavbarPrimitive.NavbarCenter>
         <NavbarPrimitive.NavbarRight>
+          <NavbarPrimitive.Links>
+            {links.map((link) => (
+              <>
+                <NavbarLinkItem key={link.href} link={link} />
+              </>
+            ))}
+          </NavbarPrimitive.Links>
           {config.i18n && currentLocale && <NavbarI18n />}
           <NavbarPrimitive.Split />
           <ThemeToggle />
@@ -79,7 +80,7 @@ export function Navbar() {
         </NavbarPrimitive.NavbarRight>
       </NavbarPrimitive.Content>
 
-      {pathname !== '/' && hasTabs && themeConfig?.tabs && (
+      {isDocs && hasTabs && themeConfig?.tabs && (
         <div className="w-full border-b border-border-subtle bg-bg-main">
           <Tabs tabs={themeConfig.tabs} routes={allRoutes || routes || []} />
         </div>
@@ -89,7 +90,7 @@ export function Navbar() {
 }
 
 function NavbarLinkItem({ link }: { link: NavbarLinkType }) {
-  const localizedHref = useLocalizedTo(link.href)
+  const localizedHref = useLocalizedTo(link.href || '')
   return <NavbarPrimitive.Link {...(link as any)} href={localizedHref} />
 }
 

package/src/client/hooks/use-navbar.ts

@@ -19,19 +19,50 @@ export function useNavbar() {
 
   // Transform links to the new NavbarLink structure
   const links: NavbarLink[] = rawLinks.map((item: any) => {
-    const href = item.href || item.to || item.link || ''
+    const href = (item.href || item.to || item.link || '') as string
+
+    // Robust active state calculation
+    const getIsActive = (h: string) => {
+      const activePath = location.pathname
+      if (activePath === h) return true
+      if (!h || h === '/') return activePath === '/'
+
+      const cleanPathParts = (p: string) => {
+        const parts = p.split('/').filter(Boolean)
+        let i = 0
+        // Skip locale
+        if (config.i18n?.locales && parts[i] && config.i18n.locales[parts[i]]) {
+          i++
+        }
+        // Skip version
+        if (config.versions?.versions && parts[i]) {
+          if (config.versions.versions.some((v) => v.path === parts[i])) {
+            i++
+          }
+        }
+        return parts.slice(i)
+      }
+
+      const hParts = cleanPathParts(h)
+      const pParts = cleanPathParts(activePath)
+
+      if (hParts.length === 0) return pParts.length === 0
+
+      // Must match at least as many parts as the candidate link
+      if (pParts.length < hParts.length) return false
+
+      // Every part of hParts must match pParts at the same position
+      return hParts.every((part, i) => pParts[i] === part)
+    }
+
     return {
       label: getTranslated(item.label || item.text, currentLocale),
       href,
-      active: location.pathname === href,
+      active: getIsActive(href),
       to:
         href.startsWith('http') || href.startsWith('//')
           ? 'external'
           : undefined,
-      items: item.items?.map((sub: any) => ({
-        label: getTranslated(sub.label || sub.text, currentLocale),
-        href: sub.href || sub.link || sub.to || '',
-      })),
     }
   })
 

package/src/client/index.ts

@@ -21,7 +21,6 @@ export { OnThisPage } from '@components/ui-base/on-this-page'
 export { Head } from '@components/ui-base/head'
 export { Breadcrumbs } from '@components/ui-base/breadcrumbs'
 export { PageNav } from '@components/ui-base/page-nav'
-export { ProgressBar } from '@components/ui-base/progress-bar'
 export { ErrorBoundary } from '@components/ui-base/error-boundary'
 export { CopyMarkdown } from '@components/ui-base/copy-markdown'
 

package/src/client/theme/neutral.css

@@ -66,7 +66,7 @@
   --spacing-navbar: 3.5rem;
   --spacing-sidebar: 16rem;
   --spacing-toc: 14rem;
-  --spacing-content-max: 48rem;
+  --spacing-content-max: 54rem;
 
   @keyframes pulse {
     0%,
@@ -123,9 +123,8 @@
   body {
     margin: 0;
     padding: 0;
-    height: 100%;
+    min-height: 100%;
     overflow-x: hidden;
-    overflow-y: hidden;
   }
 
   body {

package/src/client/types.ts

@@ -74,6 +74,8 @@ export interface CreateBoltdocsAppOptions {
   homePage?: React.ComponentType
   /** Custom external pages mapped by their route path */
   externalPages?: Record<string, React.ComponentType>
+  /** Optional custom layout for external pages */
+  externalLayout?: React.ComponentType<{ children: React.ReactNode }>
   /** Optional custom MDX components provided by plugins */
   components?: Record<string, React.ComponentType>
 }
@@ -167,6 +169,4 @@ export interface NavbarLink {
   active: boolean
   /** Optional icon or string for external link indication */
   to?: string
-  /** Nested items for NavigationMenu */
-  items?: NavbarLink[]
 }

package/src/node/config.ts

@@ -44,13 +44,6 @@ export interface BoltdocsThemeConfig {
     label: string | Record<string, string>
     /** URL path or external link */
     href: string
-    /** Nested items for NavigationMenu */
-    items?: Array<{
-      /** Text to display (can be a string or a map of translations) */
-      label: string | Record<string, string>
-      /** URL path or external link */
-      href: string
-    }>
   }>
   /** Items to display in the sidebar, organized optionally by group URLs */
   sidebar?: Record<string, Array<{ text: string; link: string }>>
@@ -222,8 +215,6 @@ export interface BoltdocsConfig {
   versions?: BoltdocsVersionsConfig
   /** Custom plugins for extending functionality */
   plugins?: BoltdocsPlugin[]
-  /** Map of custom external route paths to component file paths */
-  external?: Record<string, string>
   /** External integrations configuration */
   integrations?: BoltdocsIntegrationsConfig
   /** Configuration for the robots.txt file */
@@ -344,10 +335,6 @@ export async function resolveConfig(
     cleanThemeConfig.navbar = cleanThemeConfig.navbar.map((item: any) => ({
       label: item.label || item.text || '',
       href: item.href || item.link || item.to || '',
-      items: item.items?.map((sub: any) => ({
-        label: sub.label || sub.text || '',
-        href: sub.href || sub.link || sub.to || '',
-      })),
     }))
   }
 
@@ -362,7 +349,6 @@ export async function resolveConfig(
     versions: userConfig.versions,
     siteUrl: userConfig.siteUrl,
     plugins: userConfig.plugins || [],
-    external: userConfig.external,
     integrations: userConfig.integrations,
     robots: userConfig.robots,
     vite: userConfig.vite,

package/src/node/mdx/cache.ts

@@ -3,7 +3,7 @@ import { TransformCache } from '../cache'
 /**
  * Version identifier for the MDX plugin to invalidate cache if logic changes.
  */
-export const MDX_PLUGIN_VERSION = 'v3'
+export const MDX_PLUGIN_VERSION = 'v4'
 
 /**
  * Persistent cache for MDX transformations.

package/src/node/mdx/index.ts

@@ -9,6 +9,7 @@ import type { BoltdocsConfig } from '../config'
 import { mdxCache, MDX_PLUGIN_VERSION } from './cache'
 import { remarkShiki } from './remark-shiki'
 import { rehypeShiki } from './rehype-shiki'
+import { remarkCodeMeta } from './remark-code-meta'
 
 let mdxCacheLoaded = false
 let hits = 0
@@ -38,6 +39,7 @@ export function boltdocsMdxPlugin(
     remarkPlugins: [
       remarkGfm,
       remarkFrontmatter,
+      remarkCodeMeta,
       [remarkShiki, config],
       ...(extraRemarkPlugins as any[]),
     ],

package/src/node/mdx/rehype-shiki.ts

@@ -31,6 +31,11 @@ export function rehypeShiki(config?: BoltdocsConfig) {
         const lang = langMatch ? langMatch.slice(9) : 'text'
         const code = codeNode.children[0]?.value || ''
 
+        // Extract title from meta string (e.g., ```ts title="app.ts")
+        const meta: string = codeNode.data?.meta || codeNode.properties?.metastring || ''
+        const titleMatch = meta.match(/title\s*=\s*"([^"]*)"/)
+        const title = titleMatch ? titleMatch[1] : undefined
+
         const options: any = { lang }
         if (typeof codeTheme === 'object') {
           options.themes = {
@@ -46,6 +51,10 @@ export function rehypeShiki(config?: BoltdocsConfig) {
         // Inject highlighted HTML and mark as highlighted for CodeBlock component
         node.properties.dataHighlighted = 'true'
         node.properties.highlightedHtml = html
+        node.properties['data-lang'] = lang
+        if (title) {
+          node.properties.title = title
+        }
         node.children = []
       }
     })

package/src/node/mdx/remark-code-meta.ts

@@ -0,0 +1,35 @@
+import { visit } from 'unist-util-visit'
+
+/**
+ * Remark plugin that preserves code fence meta strings (e.g., title="file.ts")
+ * and the language identifier by copying them to hProperties so they survive
+ * the remark → rehype conversion and are accessible as props on the `<pre>` element.
+ *
+ * Usage in MDX: ```ts title="app.ts"
+ */
+export function remarkCodeMeta() {
+  return (tree: any) => {
+    visit(tree, 'code', (node: any) => {
+      node.data = node.data || {}
+      node.data.hProperties = node.data.hProperties || {}
+
+      // Always pass the lang through
+      if (node.lang) {
+        node.data.hProperties['data-lang'] = node.lang
+      }
+
+      if (!node.meta) return
+
+      const meta: string = node.meta
+
+      // Extract title="..." from the meta string
+      const titleMatch = meta.match(/title\s*=\s*"([^"]*)"/)
+      if (titleMatch) {
+        node.data.hProperties.title = titleMatch[1]
+      }
+
+      // Preserve the full meta string for other plugins
+      node.data.hProperties.metastring = meta
+    })
+  }
+}

package/src/node/mdx/remark-shiki.ts

@@ -32,7 +32,7 @@ export function remarkShiki(config?: BoltdocsConfig) {
           code = codeAttr.value
         } else if (codeAttr.value?.type === 'mdxJsxAttributeValueExpression') {
           const expr = codeAttr.value.value ?? ''
-          code = expr.match(/^[`'"](.+)[`'"]$/)?.[1] ?? expr
+          code = expr.match(/^[`'"]([\s\S]+)[`'"]$/)?.[1] ?? expr
         }
       }
 

package/src/node/plugin/entry.ts

@@ -24,7 +24,7 @@ export function generateEntryCode(
   const cssPath = path.resolve(process.cwd(), 'index.css')
   const cssImport = fs.existsSync(cssPath) ? "import './index.css';" : ''
 
-  const homeOption = options.homePage ? 'homePage: HomePage,' : ''
+  let homeOption = options.homePage ? 'homePage: HomePage,' : ''
   const pluginComponents =
     config?.plugins?.flatMap((p) => Object.entries(p.components || {})) || []
 
@@ -40,21 +40,28 @@ const ${name} = _comp_${name}.default || _comp_${name}['${name}'] || _comp_${nam
   const componentMap = pluginComponents.map(([name]) => name).join(', ')
 
   const docsDirName = path.basename(options.docsDir || 'docs')
+  const docsDir = path.resolve(process.cwd(), options.docsDir || 'docs')
 
-  const externalEntries = Object.entries(config?.external || {})
-  const externalImports = externalEntries
-    .map(
-      ([_routePath, compPath], i) =>
-        `import _ext_${i} from '${normalizePath(compPath)}';`,
-    )
-    .join('\n')
-  const externalOption =
-    externalEntries.length > 0
-      ? `externalPages: { ${externalEntries
-          .map(([path], i) => `"${path}": _ext_${i}`)
-          .join(', ')} },`
+  // Detect external pages module
+  const externalModulePath = ['tsx', 'ts', 'jsx', 'js']
+    .map((ext) => path.resolve(docsDir, `pages-external/index.${ext}`))
+    .find((p) => fs.existsSync(p))
+
+  const externalModuleImport = externalModulePath
+    ? `import * as _external_module from '${normalizePath(externalModulePath)}';`
+    : ''
+
+  // Prioritize homePage from external module if it exists
+  homeOption = externalModulePath
+    ? 'homePage: _external_module.homePage || HomePage,'
+    : options.homePage
+      ? 'homePage: HomePage,'
       : ''
 
+  const externalOption = externalModulePath
+    ? 'externalPages: _external_module.pages, externalLayout: _external_module.layout,'
+    : ''
+
   return `
 import { createBoltdocsApp as _createApp } from 'boltdocs/client';
 import _routes from 'virtual:boltdocs-routes';
@@ -63,7 +70,7 @@ import _user_mdx_components from 'virtual:boltdocs-mdx-components';
 ${cssImport}
 ${homeImport}
 ${componentImports}
-${externalImports}
+${externalModuleImport}
 
 _createApp({
   target: '#root',

package/src/node/plugin/index.ts

@@ -102,10 +102,10 @@ export function boltdocsPlugin(
                 (locale) =>
                   url.startsWith(`/${locale}/docs`) || url === `/${locale}`,
               )) ||
-            (config.external &&
-              Object.keys(config.external).some((extPath) =>
-                url.startsWith(extPath),
-              ))
+            // Handle any HTML request that isn't a known static file or docs,
+            // as it potentially could be an external page.
+            // (The client-side router will handle 404s if it doesn't match anything)
+            true
 
           // Improved check: If it's a doc route, serve HTML even if it has a dot (e.g. version 1.1)
           // We only skip if it has a known asset extension to prevent serving HTML for images/js/etc.
@@ -140,11 +140,15 @@ export function boltdocsPlugin(
         const mdxCompPaths = mdxCompExtensions.map((ext) =>
           path.resolve(docsDir, `mdx-components.${ext}`),
         )
+        const extPagesPaths = mdxCompExtensions.map((ext) =>
+          path.resolve(docsDir, `pages-external/index.${ext}`),
+        )
 
         server.watcher.add([
           ...configPaths,
           ...mdxCompPaths,
           ...layoutCompPaths,
+          ...extPagesPaths,
         ])
 
         const handleFileEvent = async (
@@ -186,6 +190,19 @@ export function boltdocsPlugin(
               return
             }
 
+            // If any pages-external file changes, invalidate the entry module
+            if (
+              normalized.includes('/pages-external/') ||
+              normalized.includes('\\pages-external\\')
+            ) {
+              const mod = server.moduleGraph.getModuleById(
+                '\0virtual:boltdocs-entry',
+              )
+              if (mod) server.moduleGraph.invalidateModule(mod)
+              server.ws.send({ type: 'full-reload' })
+              return
+            }
+
             if (
               !normalized.startsWith(normalizedDocsDir) ||
               !isDocFile(normalized)
@@ -273,6 +290,7 @@ export function boltdocsPlugin(
             i18n: config?.i18n,
             versions: config?.versions,
             siteUrl: config?.siteUrl,
+            plugins: config?.plugins?.map((p) => ({ name: p.name })),
           }
           return `export default ${JSON.stringify(clientConfig, null, 2)};`
         }

package/src/node/routes/parser.ts

@@ -110,6 +110,9 @@ export function parseDocFile(
   if (locale) {
     finalPath += '/' + locale
   }
+  if (inferredTab) {
+    finalPath += '/' + inferredTab
+  }
   finalPath += cleanRoutePath === '/' ? '' : cleanRoutePath
 
   if (!finalPath || finalPath === '') finalPath = '/'