fix: preserve vinext navigation in Pages demo

packages/app/src/app/(guest)/signin/page.tsx

@@ -4,8 +4,6 @@ import { Box, Flex, Text, VStack } from '@devup-ui/react'
 import { useRouter } from 'next/navigation'
 import { useState } from 'react'
 
-import { DEMO_MODE, demoPageHref } from '@/lib/demo-path'
-
 export default function SignInPage() {
   const router = useRouter()
   const [username, setUsername] = useState('')
@@ -39,12 +37,8 @@ export default function SignInPage() {
       document.cookie = `refresh_token=${data.refresh_token}; path=/; max-age=${60 * 60 * 24 * 7}` // 7 days
 
       // Redirect to dashboard
-      if (DEMO_MODE) {
-        window.location.assign(demoPageHref('/'))
-      } else {
-        router.push('/')
-        router.refresh()
-      }
+      router.push('/')
+      router.refresh()
     } catch (err) {
       setError(err instanceof Error ? err.message : 'An error occurred')
     } finally {

packages/app/src/components/common/AppLink.tsx

@@ -1,28 +1,17 @@
 'use client'
 
+import { css } from '@devup-ui/react'
 import Link from 'next/link'
 import type { ReactNode } from 'react'
 
-import { DEMO_MODE, demoPageHref } from '@/lib/demo-path'
-
 interface AppLinkProps {
   children: ReactNode
   href: string
 }
 
 export function AppLink({ children, href }: AppLinkProps) {
-  const style = { textDecoration: 'none' }
-
-  if (DEMO_MODE) {
-    return (
-      <a href={demoPageHref(href)} style={style}>
-        {children}
-      </a>
-    )
-  }
-
   return (
-    <Link href={href} style={style}>
+    <Link className={css({ textDecoration: 'none' })} href={href}>
       {children}
     </Link>
   )

packages/app/src/components/layout/NavItem.tsx

@@ -4,7 +4,6 @@ import { Box, Flex, Text } from '@devup-ui/react'
 import { usePathname } from 'next/navigation'
 
 import { AppLink } from '@/components/common/AppLink'
-import { normalizeDemoPath } from '@/lib/demo-path'
 
 interface MenuItem {
   id: string
@@ -22,7 +21,7 @@ interface NavItemProps {
  * Requires 'use client' due to usePathname hook.
  */
 export function NavItem({ item }: NavItemProps) {
-  const pathname = normalizeDemoPath(usePathname())
+  const pathname = usePathname()
   const isActive = pathname === item.path
   const hasChildren = item.children && item.children.length > 0
   const isChildActive = item.children?.some((child) => pathname === child.path)

packages/app/src/lib/mock-api.ts

@@ -24,10 +24,6 @@ function id(prefix: string): string {
   return `${prefix}-${sequence}`
 }
 
-function demoUrl(path: string): string {
-  return `${DEMO_BASE_PATH}${path}.html`
-}
-
 function imageData(label: string, start: string, end: string): string {
   const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="960" height="640" viewBox="0 0 960 640"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop stop-color="${start}"/><stop offset="1" stop-color="${end}"/></linearGradient></defs><rect width="960" height="640" rx="48" fill="url(#g)"/><circle cx="760" cy="150" r="110" fill="white" opacity=".16"/><circle cx="170" cy="520" r="180" fill="white" opacity=".1"/><text x="64" y="560" fill="white" font-family="system-ui,sans-serif" font-size="54" font-weight="700">${label}</text></svg>`
   return `data:image/svg+xml,${encodeURIComponent(svg)}`
@@ -499,7 +495,7 @@ function handleSearch(path: string, method: string, url: URL) {
       subject: `${entry.collection}:${entry.id}`,
       title: entry.title,
       updatedAt: entry.updatedAt,
-      url: demoUrl('/content/pages'),
+      url: '/content/pages',
     }))
   const page = pageOf(results, url, 20)
   return json({

packages/app/vite.config.ts

@@ -12,6 +12,20 @@ export default defineConfig({
     DevupUI(),
     devupApi({ serverActions: false }),
     vinext({ react: { compiler: true } }),
+    {
+      name: 'yeollin-demo-base-path',
+      config() {
+        if (!process.env.VITE_YEOLLIN_BASE_PATH) return
+
+        return {
+          define: {
+            'process.env.__NEXT_ROUTER_BASEPATH': JSON.stringify(
+              process.env.VITE_YEOLLIN_BASE_PATH,
+            ),
+          },
+        }
+      },
+    },
   ],
   server: {
     host: '127.0.0.1',

plugins/search/app/(search)/page.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { Box, Flex, Grid, Text, VStack } from '@devup-ui/react'
+import Link from 'next/link'
 import { useEffect, useState } from 'react'
 
 type ContentStatus = 'draft' | 'published'
@@ -491,13 +492,13 @@ export default function SearchPage() {
                       </VStack>
                       <Box
                         _hover={{ bg: '$primaryLight' }}
-                        as="a"
+                        as={Link}
                         border="1px solid $primary"
                         borderRadius="8px"
                         color="$primary"
                         flexShrink={0}
                         fontWeight="600"
-                        href={result.url}
+                        props={{ href: result.url }}
                         px={3}
                         py={2}
                         textDecoration="none"