polen 0.10.0-next.5 → 0.10.0-next.7

package/src/api/vite/plugins/pages.ts

@@ -1,5 +1,6 @@
 import type { Config } from '#api/config/index'
 import { Content } from '#api/content/$'
+import { createNavbar } from '#api/content/navbar'
 import type { NavbarDataRegistry } from '#api/vite/data/navbar'
 import { polenVirtual } from '#api/vite/vi'
 import type { Vite } from '#dep/vite/index'
@@ -9,7 +10,6 @@ import { debugPolen } from '#singletons/debug'
 import { superjson } from '#singletons/superjson'
 import mdx from '@mdx-js/rollup'
 import rehypeShiki from '@shikijs/rehype'
-import { Tree } from '@wollybeard/kit'
 import { Arr, Cache, Path, Str } from '@wollybeard/kit'
 import remarkFrontmatter from 'remark-frontmatter'
 import remarkGfm from 'remark-gfm'
@@ -26,14 +26,10 @@ export interface Options {
 }
 
 export interface ProjectDataPages {
-  sidebarIndex: SidebarIndex
+  sidebarIndex: Content.SidebarIndex
   pages: Content.Page[]
 }
 
-export interface SidebarIndex {
-  [pathExpression: string]: Content.Sidebar
-}
-
 /**
  * Pages plugin with tree support
  */
@@ -204,57 +200,15 @@ export const Pages = ({
             const navbarPages = navbarData.get('pages')
             navbarPages.length = 0 // Clear existing
 
-            // Process first-level children as navigation items
-            if (scanResult.tree.root) {
-              for (const child of scanResult.tree.root.children) {
-                // Now we have Page objects in the tree
-                const page = child.value
-                const pathExp = FileRouter.routeToPathExpression(page.route)
-
-                // Skip hidden pages and index files at root level
-                if (page.metadata.hidden || page.route.logical.path.slice(-1)[0] === 'index') {
-                  continue
-                }
-
-                // Only include top-level pages (files directly in pages directory)
-                if (page.route.logical.path.length === 1) {
-                  const title = Str.titlizeSlug(page.route.logical.path[0]!)
-                  navbarPages.push({
-                    // IMPORTANT: Always ensure paths start with '/' for React Router compatibility.
-                    pathExp: pathExp.startsWith('/') ? pathExp : '/' + pathExp,
-                    title,
-                  })
-                }
-              }
-            }
+            const navbarItems = createNavbar(scanResult.list)
+            navbarPages.push(...navbarItems)
           }
 
           //
           // ━━ Build Sidebar
           //
 
-          const sidebarIndex: SidebarIndex = {}
-
-          // Build sidebar for each top-level directory using the page tree
-          if (scanResult.tree.root) {
-            Tree.visit(scanResult.tree, (node) => {
-              if (!node.value) return
-              const page = node.value as any
-              // Only process top-level directories (pages with logical path length > 1 indicate nested structure)
-              if (page.route.logical.path.length === 1 && node.children.length > 0) {
-                const topLevelDir = page.route.logical.path[0]!
-                const pathExp = `/${topLevelDir}`
-
-                // Create a subtree for this directory
-                const subtree = Tree.Tree(Tree.Node(page, node.children)) as Tree.Tree<any>
-
-                // Build sidebar using the new page tree builder
-                const sidebar = Content.buildFromPageTree(subtree, [topLevelDir])
-                debug(`Built sidebar for ${pathExp}:`, sidebar)
-                sidebarIndex[pathExp] = sidebar
-              }
-            })
-          }
+          const sidebarIndex = Content.buildSidebarIndex(scanResult)
 
           //
           // ━━ Put It All together

package/src/lib/file-router/scan.ts

@@ -87,7 +87,13 @@ export const filePathToRoute = (filePathExpression: string, rootDir: string): Ro
 }
 
 export const filePathToRouteLogical = (filePath: Path.Parsed): RouteLogical => {
-  const dirPath = Str.split(Str.removeSurrounding(filePath.dir, Path.sep), Path.sep)
+  const dirSegments = Str.split(Str.removeSurrounding(filePath.dir, Path.sep), Path.sep)
+
+  // Parse numbered prefixes from directory segments
+  const dirPath = dirSegments.map(segment => {
+    const prefixMatch = Str.match(segment, conventions.numberedPrefix.pattern)
+    return prefixMatch?.groups.name ?? segment
+  })
 
   // Parse numbered prefix from filename
   const prefixMatch = Str.match(filePath.name, conventions.numberedPrefix.pattern)

package/src/sandbox.ts

@@ -1 +1,20 @@
-// Sandbox file for temporary testing
+import { filePathToRouteLogical } from '#lib/file-router/scan'
+import { Path } from '@wollybeard/kit'
+
+// Test parsing of numbered directory
+const testPath1 = Path.parse('a/10_b/index.md')
+const logical1 = filePathToRouteLogical(testPath1)
+console.log('Path 1:', testPath1)
+console.log('Logical 1:', logical1)
+
+// Test parsing of numbered file
+const testPath2 = Path.parse('a/10_b/g.md')
+const logical2 = filePathToRouteLogical(testPath2)
+console.log('\nPath 2:', testPath2)
+console.log('Logical 2:', logical2)
+
+// Test directory structure
+const testPath3 = Path.parse('a/30_d/index.md')
+const logical3 = filePathToRouteLogical(testPath3)
+console.log('\nPath 3:', testPath3)
+console.log('Logical 3:', logical3)

package/src/template/components/HamburgerMenu.tsx

@@ -0,0 +1,96 @@
+import type { Content } from '#api/content/$'
+import { Cross2Icon, HamburgerMenuIcon } from '@radix-ui/react-icons'
+import { Box, Flex, IconButton, Text } from '@radix-ui/themes'
+import { useEffect } from 'react'
+import { Sidebar } from '../components/sidebar/Sidebar.tsx'
+
+export interface HamburgerMenuProps {
+  isOpen: boolean
+  onToggle: () => void
+  onClose: () => void
+  sidebarData: Content.Item[]
+}
+
+export const HamburgerMenu: React.FC<HamburgerMenuProps> = ({
+  isOpen,
+  onToggle,
+  onClose,
+  sidebarData,
+}) => {
+  // Prevent body scroll when mobile menu is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = ''
+    }
+
+    // Cleanup
+    return () => {
+      document.body.style.overflow = ''
+    }
+  }, [isOpen])
+
+  return (
+    <>
+      {/* Mobile menu button - show on mobile/tablet, hide on desktop */}
+      <Box display={{ initial: 'block', xs: 'block', sm: 'block', md: 'none', lg: 'none', xl: 'none' }}>
+        <IconButton
+          size='2'
+          variant='ghost'
+          onClick={onToggle}
+          aria-label='Toggle navigation menu'
+        >
+          {isOpen ? <Cross2Icon width='18' height='18' /> : <HamburgerMenuIcon width='18' height='18' />}
+        </IconButton>
+      </Box>
+
+      {/* Mobile Sidebar Drawer */}
+      {isOpen && (
+        <>
+          {/* Backdrop */}
+          <Box
+            position='fixed'
+            inset='0'
+            style={{
+              backgroundColor: 'var(--black-a9)',
+              zIndex: 50,
+            }}
+            onClick={onClose}
+            display={{ initial: 'block', xs: 'block', sm: 'block', md: 'none', lg: 'none', xl: 'none' }}
+          />
+
+          {/* Drawer */}
+          <Box
+            position='fixed'
+            top='0'
+            left='0'
+            bottom='0'
+            width='280px'
+            style={{
+              backgroundColor: 'var(--color-background)',
+              boxShadow: 'var(--shadow-6)',
+              zIndex: 100,
+              overflowY: 'auto',
+            }}
+            p='4'
+            display={{ initial: 'block', xs: 'block', sm: 'block', md: 'none', lg: 'none', xl: 'none' }}
+          >
+            <Flex justify='between' align='center' mb='4'>
+              <Text size='5' weight='bold'>Navigation</Text>
+              <IconButton
+                size='2'
+                variant='ghost'
+                onClick={onClose}
+                aria-label='Close navigation menu'
+              >
+                <Cross2Icon width='18' height='18' />
+              </IconButton>
+            </Flex>
+            <Sidebar data={sidebarData} />
+          </Box>
+        </>
+      )}
+    </>
+  )
+}

package/src/template/components/NotFound.tsx

@@ -0,0 +1,28 @@
+import { Box, Button, Flex, Heading, Text } from '@radix-ui/themes'
+import { Link as LinkReactRouter } from 'react-router'
+
+export const NotFound: React.FC = () => {
+  return (
+    <Flex direction='column' align='center' gap='6' style={{ textAlign: `center`, paddingTop: `4rem` }}>
+      <Heading size='9' style={{ color: `var(--gray-12)` }}>404</Heading>
+      <Box>
+        <Heading size='5' mb='2'>Page Not Found</Heading>
+        <Text size='3' color='gray'>
+          The page you're looking for doesn't exist or has been moved.
+        </Text>
+      </Box>
+      <Flex gap='3'>
+        <LinkReactRouter to='/'>
+          <Button variant='soft' size='3'>
+            Go Home
+          </Button>
+        </LinkReactRouter>
+        <LinkReactRouter to='/reference'>
+          <Button variant='outline' size='3'>
+            View API Reference
+          </Button>
+        </LinkReactRouter>
+      </Flex>
+    </Flex>
+  )
+}

package/src/template/components/ThemeToggle.tsx

@@ -0,0 +1,21 @@
+import type { React } from '#dep/react/index'
+import { MoonIcon, SunIcon } from '@radix-ui/react-icons'
+import { IconButton } from '@radix-ui/themes'
+import { useTheme } from '../contexts/ThemeContext.tsx'
+
+export const ThemeToggle: React.FC = () => {
+  const { appearance, toggleTheme } = useTheme()
+
+  return (
+    <IconButton
+      size='2'
+      variant='ghost'
+      color='gray'
+      onClick={toggleTheme}
+      aria-label={`Switch to ${appearance === 'light' ? 'dark' : 'light'} theme`}
+      style={{ cursor: 'pointer' }}
+    >
+      {appearance === 'light' ? <MoonIcon width='18' height='18' /> : <SunIcon width='18' height='18' />}
+    </IconButton>
+  )
+}

package/src/template/contexts/ThemeContext.tsx

@@ -0,0 +1,60 @@
+import type { React } from '#dep/react/index'
+import { createContext, useContext, useEffect, useState } from 'react'
+
+type ThemeAppearance = 'light' | 'dark'
+
+interface ThemeContextValue {
+  appearance: ThemeAppearance
+  toggleTheme: () => void
+}
+
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined)
+
+const THEME_STORAGE_KEY = 'polen-theme-preference'
+
+export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [appearance, setAppearance] = useState<ThemeAppearance>(() => {
+    // Check if we're in the browser
+    if (typeof window === 'undefined') {
+      return 'light'
+    }
+
+    // Check localStorage first
+    const stored = localStorage.getItem(THEME_STORAGE_KEY)
+    if (stored === 'light' || stored === 'dark') {
+      return stored
+    }
+
+    // Check system preference
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return 'dark'
+    }
+
+    return 'light'
+  })
+
+  useEffect(() => {
+    // Persist to localStorage
+    if (typeof window !== 'undefined') {
+      localStorage.setItem(THEME_STORAGE_KEY, appearance)
+    }
+  }, [appearance])
+
+  const toggleTheme = () => {
+    setAppearance(prev => prev === 'light' ? 'dark' : 'light')
+  }
+
+  return (
+    <ThemeContext.Provider value={{ appearance, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext)
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider')
+  }
+  return context
+}

package/src/template/routes/root.tsx

@@ -1,10 +1,10 @@
-import { assetUrl } from '#api/utils/asset-url/index'
 import type { ReactRouter } from '#dep/react-router/index'
 import { createRoute } from '#lib/react-router-aid/react-router-aid'
-import { Box, Button, Grid, Heading, Text } from '@radix-ui/themes'
+import { Box, Grid } from '@radix-ui/themes'
 import { Flex, Theme } from '@radix-ui/themes'
 import radixStylesUrl from '@radix-ui/themes/styles.css?url'
 import { Arr } from '@wollybeard/kit'
+import { useEffect, useState } from 'react'
 import { Link as LinkReactRouter } from 'react-router'
 import { Outlet, ScrollRestoration, useLocation } from 'react-router'
 import logoSrc from 'virtual:polen/project/assets/logo.svg'
@@ -13,13 +13,17 @@ import projectDataNavbar from 'virtual:polen/project/data/navbar.jsonsuper'
 import projectDataPages from 'virtual:polen/project/data/pages.jsonsuper'
 import { pages } from 'virtual:polen/project/pages.jsx'
 import { templateVariables } from 'virtual:polen/template/variables'
-import { Link } from '../components/Link.jsx'
-import { Logo } from '../components/Logo.jsx'
-import { Sidebar } from '../components/sidebar/Sidebar.jsx'
+import { HamburgerMenu } from '../components/HamburgerMenu.tsx'
+import { Link } from '../components/Link.tsx'
+import { Logo } from '../components/Logo.tsx'
+import { NotFound } from '../components/NotFound.tsx'
+import { Sidebar } from '../components/sidebar/Sidebar.tsx'
+import { ThemeToggle } from '../components/ThemeToggle.tsx'
+import { ThemeProvider, useTheme } from '../contexts/ThemeContext.tsx'
 import entryClientUrl from '../entry.client.jsx?url'
-import { changelog } from './changelog.jsx'
-import { index } from './index.jsx'
-import { reference } from './reference.jsx'
+import { changelog } from './changelog.tsx'
+import { index } from './index.tsx'
+import { reference } from './reference.tsx'
 
 // todo: not needed anymore because not using hono dev vite plugin right?
 const reactRefreshPreamble = `
@@ -45,7 +49,9 @@ export const Component = () => {
         {/* <meta name='theme-color' content='#000000' /> */}
       </head>
       <body style={{ margin: 0 }}>
-        <Layout />
+        <ThemeProvider>
+          <Layout />
+        </ThemeProvider>
         <ScrollRestoration />
         {import.meta.env.DEV && <script type='module' src={entryClientUrl}></script>}
       </body>
@@ -55,6 +61,13 @@ export const Component = () => {
 
 const Layout = () => {
   const location = useLocation()
+  const { appearance } = useTheme()
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+
+  // Close mobile menu on route change
+  useEffect(() => {
+    setMobileMenuOpen(false)
+  }, [location.pathname])
 
   // Determine if we should show sidebar based on current path
   const getCurrentNavPathExp = (): string | null => {
@@ -75,42 +88,75 @@ const Layout = () => {
     <Flex
       gridArea={'header'}
       align='center'
-      gap='8'
+      gap={{ initial: '4', md: '8' }}
       pb='4'
-      mb='8'
+      mb={{ initial: '4', md: '8' }}
       style={{
         borderBottom: `1px solid var(--gray-3)`,
       }}
     >
+      {/* Mobile menu - only show when sidebar exists */}
+      {isShowSidebar && (
+        <HamburgerMenu
+          isOpen={mobileMenuOpen}
+          onToggle={() => setMobileMenuOpen(!mobileMenuOpen)}
+          onClose={() => setMobileMenuOpen(false)}
+          sidebarData={sidebar.items}
+        />
+      )}
+
       <LinkReactRouter
         to='/'
         style={{ color: `inherit`, textDecoration: `none` }}
       >
-        <Logo src={logoSrc} title={templateVariables.title} height={30} showTitle={true} />
+        <Box display={{ initial: 'block', md: 'block' }}>
+          <Logo src={logoSrc} title={templateVariables.title} height={30} showTitle={true} />
+        </Box>
       </LinkReactRouter>
-      <Flex direction='row' gap='4'>
+      <Flex direction='row' gap='4' style={{ flex: 1 }}>
         {projectDataNavbar.map((item, key) => (
           <Link key={key} color='gray' to={item.pathExp}>
             {item.title}
           </Link>
         ))}
       </Flex>
+      <ThemeToggle />
     </Flex>
   )
 
   return (
-    <Theme asChild>
+    <Theme asChild appearance={appearance}>
       <Grid
-        width={{ initial: 'var(--container-4)' }}
-        areas="'header header header header header header header header' 'sidebar sidebar . content content content content content'"
+        width={{ initial: '100%', sm: '100%', md: 'var(--container-4)' }}
+        maxWidth='100vw'
+        areas={{
+          initial: "'header' 'content'",
+          sm: "'header' 'content'",
+          md:
+            "'header header header header header header header header' 'sidebar sidebar . content content content content content'",
+        }}
         rows='min-content auto'
-        columns='repeat(8, 1fr)'
-        gapX='2'
-        my='8'
+        columns={{ initial: '1fr', sm: '1fr', md: 'repeat(8, 1fr)' }}
+        gapX={{ initial: '0', sm: '0', md: '2' }}
+        my={{ initial: '0', sm: '0', md: '8' }}
         mx='auto'
+        px={{ initial: '4', sm: '4', md: '0' }}
+        py={{ initial: '4', sm: '4', md: '0' }}
       >
         <style>
           {`
+          /* Responsive container fixes */
+          @media (max-width: 768px) {
+            body {
+              overflow-x: hidden;
+            }
+          }
+          
+          /* Ensure proper centering on all screen sizes */
+          .rt-Grid {
+            box-sizing: border-box;
+          }
+
           /* Shiki code blocks */
           pre.shiki {
             margin: 1rem 0;
@@ -144,15 +190,18 @@ const Layout = () => {
         `}
         </style>
         {header}
+
+        {/* Desktop Sidebar */}
         {isShowSidebar && (
-          <Sidebar
+          <Box
+            display={{ initial: 'none', xs: 'none', sm: 'none', md: 'block' }}
             gridColumn='1 / 3'
             gridRow='2 / auto'
-            data={sidebar.items}
-            // ml='-100px'
-            // style={{ transform: 'translate(calc(-100% - var(--space-8)))' }}
-          />
+          >
+            <Sidebar data={sidebar.items} />
+          </Box>
         )}
+
         <Box gridArea='content / content / auto / 8'>
           <Outlet />
         </Box>
@@ -189,36 +238,10 @@ if (PROJECT_DATA.schema) {
 //
 //
 
-const NotFoundComponent = () => {
-  return (
-    <Flex direction='column' align='center' gap='6' style={{ textAlign: `center`, paddingTop: `4rem` }}>
-      <Heading size='9' style={{ color: `var(--gray-12)` }}>404</Heading>
-      <Box>
-        <Heading size='5' mb='2'>Page Not Found</Heading>
-        <Text size='3' color='gray'>
-          The page you're looking for doesn't exist or has been moved.
-        </Text>
-      </Box>
-      <Flex gap='3'>
-        <LinkReactRouter to='/'>
-          <Button variant='soft' size='3'>
-            Go Home
-          </Button>
-        </LinkReactRouter>
-        <LinkReactRouter to='/reference'>
-          <Button variant='outline' size='3'>
-            View API Reference
-          </Button>
-        </LinkReactRouter>
-      </Flex>
-    </Flex>
-  )
-}
-
 const notFoundRoute = createRoute({
   id: `*_not_found`,
   path: `*`,
-  Component: NotFoundComponent,
+  Component: NotFound,
   handle: {
     statusCode: 404,
   },