feat: add TopNavEnd layout export

Author: jxom

.changeset/curly-schools-film.md

@@ -0,0 +1,5 @@
+---
+"vocs": patch
+---
+
+Added `TopNavEnd` layout export to `layout.tsx`.

playgrounds/custom-layout/docs/layout.tsx

@@ -1,3 +1,7 @@
 export default function Layout({ children }: { children: React.ReactNode }) {
   return <div className="custom_fullwidth">{children}</div>
 }
+
+export function TopNavEnd() {
+  return <div>TopNavEnd</div>
+}

src/app/components/DesktopTopNav.tsx

@@ -1,3 +1,4 @@
+import { TopNavEnd } from 'virtual:consumer-components'
 import clsx from 'clsx'
 import { useLocation } from 'react-router'
 
@@ -88,6 +89,7 @@ function Navigation() {
             )
           return null
         })}
+        <TopNavEnd />
       </NavigationMenu.List>
     </NavigationMenu.Root>
   )

src/app/components/MobileTopNav.tsx

@@ -1,3 +1,4 @@
+import { TopNavEnd } from 'virtual:consumer-components'
 import * as Accordion from '@radix-ui/react-accordion'
 import { assignInlineVars } from '@vanilla-extract/dynamic'
 import clsx from 'clsx'
@@ -89,6 +90,7 @@ function Navigation({ items }: { items: Config.ParsedTopNavItem[] }) {
             </NavigationMenu.Item>
           )
         })}
+        <TopNavEnd />
       </NavigationMenu.List>
     </NavigationMenu.Root>
   )
@@ -183,6 +185,7 @@ function CompactNavigation({ items }: { items: Config.ParsedTopNavItem[] }) {
                 </Accordion.Item>
               )
             })}
+            <TopNavEnd />
           </Accordion.Root>
           <div className={styles.topNavPopoverFooter}>
             <Socials />

src/app/vite-env.d.ts

@@ -15,6 +15,7 @@ declare module 'virtual:routes' {
 declare module 'virtual:consumer-components' {
   export const Layout: import('react').ElementType
   export const Footer: import('react').ElementType
+  export const TopNavEnd: import('react').ElementType
 }
 
 declare module 'virtual:searchIndex' {

src/vite/plugins/virtual-consumer-components.ts

@@ -1,4 +1,4 @@
-import { existsSync } from 'node:fs'
+import { existsSync, readFileSync } from 'node:fs'
 import { resolve } from 'node:path'
 import type { PluginOption } from 'vite'
 
@@ -22,12 +22,15 @@ export function virtualConsumerComponents(): PluginOption {
       return `
         ${exportComponent(resolve(rootDir, 'layout.tsx'), 'Layout')}
         ${exportComponent(resolve(rootDir, 'footer.tsx'), 'Footer')}
+        ${exportComponent(resolve(rootDir, 'layout.tsx'), 'TopNavEnd', { named: true })}
       `
     },
   }
 }
 
-function exportComponent(path: string, name: string) {
-  if (existsSync(path)) return `export { default as ${name} } from "${path}";`
+function exportComponent(path: string, name: string, { named = false }: { named?: boolean } = {}) {
+  const exists =
+    existsSync(path) && new RegExp(`export(.*)${name}`).test(readFileSync(path, 'utf-8'))
+  if (exists) return `export { ${!named ? `default as ${name}` : name} } from "${path}";`
   return `export const ${name} = ({ children }) => children;`
 }