polen 0.8.0-next.4 → 0.8.0-next.6

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

@@ -1,9 +1,45 @@
-import type { Path } from '@wollybeard/kit'
+import { arrayEquals } from '#lib/kit-temp.js'
+import { type Path } from '@wollybeard/kit'
 
-export type RoutePathSegment = string
+//
+//
+//
+//
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • Path
+//
+//
 
-export interface RoutePath {
-  segments: RoutePathSegment[]
+export type Path = PathSegment[]
+
+export type PathRoot = []
+
+export type PathTop = [PathSegment]
+
+export type PathSub = [PathSegment, PathSegment, ...PathSegment[]]
+
+export type PathSegment = string
+
+export const sep = `/`
+
+export const pathToExpression = (path: Path) => {
+  return sep + path.join(sep)
+}
+
+//
+//
+//
+//
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • Route (Generic)
+//
+//
+
+export interface Route {
+  logical: RouteLogical
+  file: RouteFile
+}
+
+export interface RouteLogical {
+  path: Path
 }
 
 export interface RouteFile {
@@ -13,21 +49,121 @@ export interface RouteFile {
   }
 }
 
-export interface Route {
-  path: RoutePath
-  file: RouteFile
+//
+//
+//
+//
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • Top Level Route
+//
+//
+
+export interface TopLevelRoute extends Route {
+  logical: TopLevelRouteLogical
 }
 
-export const sep = `/`
+export interface TopLevelRouteLogical {
+  path: PathTop
+}
 
-export const routeToString = (route: Route) => {
-  return sep + route.path.segments.join(sep)
+/**
+ * Route is top level meaning exists directly under the root.
+ *
+ * It excludes the root level route.
+ */
+export const routeIsTopLevel = (route: Route): route is TopLevelRoute => {
+  return route.logical.path.length === 1
 }
 
-export const routeIsIndex = (route: Route) => {
+//
+// ━━ Sub Level
+//
+
+//
+//
+//
+//
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • Sub Level Route
+//
+//
+
+export interface RouteSubLevel extends Route {
+  logical: RoutePathSubLevel
+}
+
+export interface RoutePathSubLevel {
+  path: PathSub
+}
+
+/**
+ * Route is not top or root level
+ */
+export const routeIsSubLevel = (route: Route): route is RouteSubLevel => {
+  return route.logical.path.length > 1
+}
+
+//
+// ━━ Root Level
+//
+
+//
+//
+//
+//
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • Root Level Route
+//
+//
+
+/**
+* Route is the singular root route.
+
+* This is the case of index under root.
+*/
+export const routeIsRootLevel = (route: Route): route is TopLevelRoute => {
+  // No need to check for name "index"
+  // Segments is uniquely empty for <root>/index
+  return route.logical.path.length === 0
+}
+
+//
+//
+//
+// ━━━━━━━━━━━━━━ • Route Functions
+//
+//
+
+export const routeIsFromIndexFile = (route: Route): boolean => {
   return route.file.path.relative.name === conventions.index.name
 }
 
+export const routeIsSubOf = (route: Route, potentialAncestorPath: PathSegment[]): boolean => {
+  if (route.logical.path.length <= potentialAncestorPath.length) {
+    return false
+  }
+  return arrayEquals(
+    route.logical.path.slice(0, potentialAncestorPath.length),
+    potentialAncestorPath,
+  )
+}
+
+/**
+ * You are responsible for ensuring given ancestor path is really an ancestor of given route's path.
+ */
+export const makeRelativeUnsafe = (route: Route, assumedAncestorPath: PathSegment[]): Route => {
+  // We assume that we're working with paths where index is elided per our FileRouter system.
+  const newPath = route.logical.path.slice(assumedAncestorPath.length)
+  return {
+    ...route,
+    logical: {
+      ...route.logical,
+      path: newPath,
+    },
+  }
+}
+
+export const routeToPathExpression = (route: Route) => {
+  return pathToExpression(route.logical.path)
+}
+
 const conventions = {
   index: {
     name: `index`,

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

@@ -1,7 +1,7 @@
 import { TinyGlobby } from '#dep/tiny-globby/index.js'
 import { Path, Str } from '@wollybeard/kit'
 import { type Diagnostic, lint } from './linter.js'
-import type { Route, RouteFile, RoutePath } from './route.js'
+import type { Route, RouteFile, RouteLogical } from './route.js'
 
 //
 //
@@ -64,26 +64,26 @@ export const filePathToRoute = (filePathExpression: string, rootDir: string): Ro
       relative: Path.parse(Path.relative(rootDir, filePathExpression)),
     },
   }
-  const path = filePathToRoutePath(file.path.relative)
+  const logical = filePathToRouteLogical(file.path.relative)
 
   return {
-    path,
+    logical,
     file,
   }
 }
 
-export const filePathToRoutePath = (filePath: Path.Parsed): RoutePath => {
-  const dirSegments = Str.split(Str.removeSurrounding(filePath.dir, Path.sep), Path.sep)
+export const filePathToRouteLogical = (filePath: Path.Parsed): RouteLogical => {
+  const dirPath = Str.split(Str.removeSurrounding(filePath.dir, Path.sep), Path.sep)
 
   if (Str.isMatch(filePath.name, conventions.index.name)) {
-    const segments = dirSegments
+    const path = dirPath
     return {
-      segments,
+      path,
     }
   }
 
-  const segments = dirSegments.concat(filePath.name)
+  const path = dirPath.concat(filePath.name)
   return {
-    segments,
+    path,
   }
 }

package/src/lib/kit-temp.ts

@@ -0,0 +1,21 @@
+//
+//
+//
+//
+//
+// Holding Module for Missing @wollybeard/kit Functionality
+//
+// ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
+//
+// Code here is meant to be migrated eventually to @wollybeard/kit.
+//
+//
+//
+
+export const arrayEquals = (a: any[], b: any[]) => {
+  if (a.length !== b.length) return false
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) return false
+  }
+  return true
+}

package/src/project-data.ts

@@ -5,6 +5,7 @@ import type { Schema } from './api/schema/index.js'
 export interface ProjectData {
   schema: null | Schema.Schema
   siteNavigationItems: SiteNavigationItem[]
+  sidebarIndex: SidebarIndex
   faviconPath: string
   paths: Configurator.Config[`paths`][`project`]
   pagesScanResult: FileRouter.ScanResult
@@ -18,5 +19,29 @@ export interface ProjectData {
 
 export interface SiteNavigationItem {
   title: string
-  path: string
+  pathExp: string
+}
+
+export interface SidebarIndex {
+  [pathExpression: string]: Sidebar
+}
+
+export interface Sidebar {
+  items: SidebarItem[]
+}
+
+export type SidebarItem = SidebarNav | SidebarSection
+
+export interface SidebarNav {
+  type: `SidebarItem`
+  title: string
+  pathExp: string
+}
+
+export interface SidebarSection {
+  type: `SidebarSection`
+  title: string
+  pathExp: string
+  isNavToo: boolean
+  navs: SidebarNav[]
 }

package/src/template/components/Sidebar.tsx

@@ -0,0 +1,185 @@
+import { ChevronDownIcon, ChevronRightIcon } from '@radix-ui/react-icons'
+import { Box, Flex, Text } from '@radix-ui/themes'
+import { useState } from 'react'
+import { Link, useLocation } from 'react-router'
+import type { SidebarItem, SidebarNav, SidebarSection } from '../../project-data.js'
+
+interface SidebarProps {
+  items: SidebarItem[]
+}
+
+export const Sidebar = ({ items }: SidebarProps) => {
+  const location = useLocation()
+
+  return (
+    <Box
+      style={{
+        width: `240px`,
+        minWidth: `240px`,
+        flexShrink: 0,
+        borderRight: `1px solid var(--gray-3)`,
+        height: `100%`,
+        paddingRight: `var(--space-4)`,
+      }}
+    >
+      <Flex direction='column' gap='1'>
+        {items.map((item) => (
+          <SidebarItemComponent
+            key={item.pathExp}
+            item={item}
+            currentPathExp={location.pathname}
+          />
+        ))}
+      </Flex>
+    </Box>
+  )
+}
+
+interface SidebarItemComponentProps {
+  item: SidebarItem
+  currentPathExp: string
+  level?: number
+}
+
+const SidebarItemComponent = ({ item, currentPathExp, level = 0 }: SidebarItemComponentProps) => {
+  if (item.type === `SidebarItem`) {
+    return <SidebarNavItem nav={item} currentPathExp={currentPathExp} level={level} />
+  }
+
+  return <SidebarSectionItem section={item} currentPathExp={currentPathExp} level={level} />
+}
+
+interface SidebarNavItemProps {
+  nav: SidebarNav
+  currentPathExp: string
+  level: number
+}
+
+const SidebarNavItem = ({ nav, currentPathExp, level }: SidebarNavItemProps) => {
+  const isActive = currentPathExp === nav.pathExp
+
+  return (
+    <Link
+      to={nav.pathExp}
+      style={{
+        textDecoration: `none`,
+        color: isActive ? `var(--accent-11)` : `var(--gray-12)`,
+        padding: `var(--space-2) var(--space-3)`,
+        paddingLeft: `calc(var(--space-3) + ${(level * 16).toString()}px)`,
+        borderRadius: `var(--radius-2)`,
+        display: `block`,
+        backgroundColor: isActive ? `var(--accent-3)` : `transparent`,
+        transition: `background-color 0.2s ease, color 0.2s ease`,
+      }}
+      onMouseEnter={(e) => {
+        if (!isActive) {
+          e.currentTarget.style.backgroundColor = `var(--gray-2)`
+        }
+      }}
+      onMouseLeave={(e) => {
+        if (!isActive) {
+          e.currentTarget.style.backgroundColor = `transparent`
+        }
+      }}
+    >
+      <Text size='2' weight={isActive ? `medium` : `regular`}>
+        {nav.title}
+      </Text>
+    </Link>
+  )
+}
+
+interface SidebarSectionItemProps {
+  section: SidebarSection
+  currentPathExp: string
+  level: number
+}
+
+const SidebarSectionItem = ({ section, currentPathExp, level }: SidebarSectionItemProps) => {
+  const [isExpanded, setIsExpanded] = useState(true)
+  const isDirectlyActive = currentPathExp === section.pathExp
+  const hasActiveChild = section.navs.some(nav => currentPathExp === nav.pathExp)
+  const isActiveGroup = isDirectlyActive || hasActiveChild
+
+  return (
+    <>
+      <Flex
+        align='center'
+        style={{
+          padding: `var(--space-2) var(--space-3)`,
+          paddingLeft: `calc(var(--space-3) + ${(level * 16).toString()}px)`,
+          borderRadius: `var(--radius-2)`,
+          backgroundColor: isDirectlyActive ? `var(--accent-3)` : hasActiveChild ? `var(--accent-2)` : `transparent`,
+          transition: `background-color 0.2s ease`,
+        }}
+        onMouseEnter={(e) => {
+          if (!isActiveGroup) {
+            e.currentTarget.style.backgroundColor = `var(--gray-2)`
+          }
+        }}
+        onMouseLeave={(e) => {
+          if (!isActiveGroup) {
+            e.currentTarget.style.backgroundColor = `transparent`
+          }
+        }}
+      >
+        <Box
+          onClick={(e) => {
+            e.stopPropagation()
+            console.log(`Chevron clicked!`)
+            setIsExpanded(!isExpanded)
+          }}
+          style={{
+            display: `flex`,
+            alignItems: `center`,
+            cursor: `pointer`,
+            padding: `4px`,
+            marginRight: `4px`,
+            marginLeft: `-4px`,
+          }}
+        >
+          {isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}
+        </Box>
+        {section.isNavToo
+          ? (
+            <Link
+              to={section.pathExp}
+              style={{
+                textDecoration: `none`,
+                color: isDirectlyActive ? `var(--accent-11)` : `var(--gray-12)`,
+                flex: 1,
+              }}
+            >
+              <Text size='2' weight={isDirectlyActive ? `bold` : `medium`}>
+                {section.title}
+              </Text>
+            </Link>
+          )
+          : (
+            <Text
+              size='2'
+              weight={isDirectlyActive ? `bold` : `medium`}
+              style={{
+                flex: 1,
+                color: isDirectlyActive ? `var(--accent-11)` : `var(--gray-12)`,
+              }}
+            >
+              {section.title}
+            </Text>
+          )}
+      </Flex>
+      {isExpanded && (
+        <Flex direction='column' gap='1'>
+          {section.navs.map((nav) => (
+            <SidebarNavItem
+              key={nav.pathExp}
+              nav={nav}
+              currentPathExp={currentPathExp}
+              level={level + 1}
+            />
+          ))}
+        </Flex>
+      )}
+    </>
+  )
+}

package/src/template/routes/root.tsx

@@ -5,10 +5,11 @@ import { Box, Button, Heading, Text } from '@radix-ui/themes'
 import { Flex, Theme } from '@radix-ui/themes'
 import radixStylesUrl from '@radix-ui/themes/styles.css?url'
 import { Link as LinkReactRouter } from 'react-router'
-import { Outlet, ScrollRestoration } from 'react-router'
+import { Outlet, ScrollRestoration, useLocation } from 'react-router'
 import { PROJECT_DATA } from 'virtual:polen/project/data'
 import { templateVariables } from 'virtual:polen/template/variables'
 import { Link } from '../components/Link.jsx'
+import { Sidebar } from '../components/Sidebar.jsx'
 import entryClientUrl from '../entry.client.jsx?url'
 import { changelog } from './changelog.jsx'
 import { index } from './index.jsx'
@@ -55,6 +56,23 @@ export const Component = () => {
 }
 
 const Layout = () => {
+  const location = useLocation()
+
+  // Determine if we should show sidebar based on current path
+  const getCurrentNavPathExp = (): string | null => {
+    // todo: general path manipulation lib because we are duplicating logic here found in FileRouter
+    // todo: kit: try a Str.split that returns [] | string[] so that our predicates can refine on it?
+    const segments = location.pathname.split(`/`).filter(Boolean)
+    if (Arr.isntEmpty(segments)) {
+      return `/${segments[0]}`
+    }
+    return null
+  }
+
+  const currentNavPathExp = getCurrentNavPathExp()
+  const sidebar = currentNavPathExp && PROJECT_DATA.sidebarIndex[currentNavPathExp]
+  const showSidebar = sidebar && sidebar.items.length > 0
+
   return (
     <Theme asChild>
       <Box m='8'>
@@ -80,15 +98,26 @@ const Layout = () => {
           </LinkReactRouter>
           <Flex direction='row' gap='4'>
             {PROJECT_DATA.siteNavigationItems.map((item, key) => (
-              <Link key={key} color='gray' to={item.path}>
+              <Link key={key} color='gray' to={item.pathExp}>
                 {item.title}
               </Link>
             ))}
           </Flex>
         </Flex>
-        <Box>
-          <Outlet />
-        </Box>
+        {showSidebar
+          ? (
+            <Flex gap='8'>
+              <Sidebar items={sidebar.items} />
+              <Box style={{ flex: 1 }}>
+                <Outlet />
+              </Box>
+            </Flex>
+          )
+          : (
+            <Box>
+              <Outlet />
+            </Box>
+          )}
       </Box>
     </Theme>
   )
@@ -165,6 +194,7 @@ children.push(notFoundRoute)
 //
 //
 
+import { Arr } from '@wollybeard/kit'
 import { pages } from 'virtual:polen/project/pages.jsx'
 
 export const root = createRoute({