polen 0.10.0-next.15 → 0.10.0-next.16

package/src/template/components/ChangelogLayout.tsx

@@ -0,0 +1,157 @@
+import {
+  CRITICALITY_CONFIG,
+  isCriticalityBreaking,
+  isCriticalityDangerous,
+  isCriticalitySafe,
+} from '#lib/graphql-change/criticality'
+import type { GraphqlChangeset } from '#lib/graphql-changeset/index'
+import { Box, Flex, Text } from '@radix-ui/themes'
+import type React from 'react'
+import { useEffect, useState } from 'react'
+import { renderDate } from './Changelog.js'
+
+interface ChangelogLayoutProps {
+  children: React.ReactNode
+  versions: GraphqlChangeset.ChangeSet[]
+}
+
+interface VersionCounts {
+  breaking: number
+  dangerous: number
+  safe: number
+}
+
+const calculateCounts = (version: GraphqlChangeset.ChangeSet): VersionCounts => {
+  return {
+    breaking: version.changes.filter(isCriticalityBreaking).length,
+    dangerous: version.changes.filter(isCriticalityDangerous).length,
+    safe: version.changes.filter(isCriticalitySafe).length,
+  }
+}
+
+const SidebarEntry: React.FC<{
+  version: GraphqlChangeset.ChangeSet
+  counts: VersionCounts
+  isActive: boolean
+}> = ({ version, counts, isActive }) => {
+  const dateId = version.date.toISOString()
+
+  return (
+    <Box mb='2'>
+      <a
+        href={`#${dateId}`}
+        style={{
+          textDecoration: 'none',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: '0.5rem 0.75rem',
+          borderRadius: '4px',
+          backgroundColor: isActive ? 'var(--gray-a3)' : 'transparent',
+          color: 'inherit',
+          transition: 'background-color 0.2s',
+        }}
+        onClick={(e) => {
+          e.preventDefault()
+          document.getElementById(dateId)?.scrollIntoView({ behavior: 'smooth' })
+        }}
+      >
+        <Text size='2' weight={isActive ? 'medium' : 'regular'}>
+          {renderDate(version.date)}
+        </Text>
+        <Flex gap='2' align='center'>
+          {counts.breaking > 0 && (
+            <Text size='1' weight='medium' style={{ color: CRITICALITY_CONFIG.BREAKING.color }}>
+              {counts.breaking}
+            </Text>
+          )}
+          {counts.dangerous > 0 && (
+            <Text size='1' weight='medium' style={{ color: CRITICALITY_CONFIG.DANGEROUS.color }}>
+              {counts.dangerous}
+            </Text>
+          )}
+          {counts.safe > 0 && (
+            <Text size='1' weight='medium' style={{ color: CRITICALITY_CONFIG.NON_BREAKING.color }}>
+              {counts.safe}
+            </Text>
+          )}
+        </Flex>
+      </a>
+    </Box>
+  )
+}
+
+export const ChangelogLayout: React.FC<ChangelogLayoutProps> = ({ children, versions }) => {
+  const [activeVersion, setActiveVersion] = useState<string | null>(null)
+
+  // Calculate counts for all versions (SSR-safe)
+  const versionsWithCounts = versions.map(version => ({
+    version,
+    counts: calculateCounts(version),
+  }))
+
+  // Set up scroll spy after hydration
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollPosition = window.scrollY + 100 // Offset for header
+
+      // Find the current version based on scroll position
+      let currentVersion: string | null = null
+
+      for (const { version } of versionsWithCounts) {
+        const element = document.getElementById(version.date.toISOString())
+        if (element) {
+          const { top } = element.getBoundingClientRect()
+          if (top <= 100) {
+            currentVersion = version.date.toISOString()
+          }
+        }
+      }
+
+      setActiveVersion(currentVersion)
+    }
+
+    // Initial check
+    handleScroll()
+
+    // Add scroll listener
+    window.addEventListener('scroll', handleScroll, { passive: true })
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [versionsWithCounts])
+
+  return (
+    <Flex gap='6' style={{ position: 'relative' }}>
+      {/* Sidebar */}
+      <Box
+        style={{
+          position: 'sticky',
+          top: '2rem',
+          height: 'fit-content',
+          minWidth: '250px',
+          maxHeight: 'calc(100vh - 4rem)',
+          overflowY: 'auto',
+        }}
+      >
+        <Text size='2' weight='medium' mb='3' style={{ display: 'block' }}>
+          Releases
+        </Text>
+        {versionsWithCounts.map(({ version, counts }) => (
+          <SidebarEntry
+            key={version.date.toISOString()}
+            version={version}
+            counts={counts}
+            isActive={activeVersion === version.date.toISOString()}
+          />
+        ))}
+      </Box>
+
+      {/* Main content */}
+      <Box style={{ flex: 1, minWidth: 0 }}>
+        {children}
+      </Box>
+    </Flex>
+  )
+}

package/src/template/components/layouts/SidebarLayout.tsx

@@ -0,0 +1,68 @@
+import type { Content } from '#api/content/$'
+import { Box, Grid } from '@radix-ui/themes'
+import type React from 'react'
+import { useEffect, useState } from 'react'
+import { useLocation } from 'react-router'
+import { HamburgerMenu } from '../HamburgerMenu.js'
+import { Sidebar } from '../sidebar/Sidebar.js'
+
+interface SidebarLayoutProps {
+  children: React.ReactNode
+  sidebar: Content.Item[]
+}
+
+export const SidebarLayout: React.FC<SidebarLayoutProps> = ({ children, sidebar }) => {
+  const location = useLocation()
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+
+  // Close mobile menu on route change
+  useEffect(() => {
+    setMobileMenuOpen(false)
+  }, [location.pathname])
+
+  const isShowSidebar = sidebar && sidebar.length > 0
+
+  return (
+    <Grid
+      areas={{
+        initial: `'content'`,
+        sm: `'content'`,
+        md: `'sidebar sidebar . content content content content content'`,
+      }}
+      rows='auto'
+      columns={{ initial: `1fr`, sm: `1fr`, md: `repeat(8, 1fr)` }}
+      gapX={{ initial: `0`, sm: `0`, md: `2` }}
+    >
+      {/* Mobile menu - only show when sidebar exists */}
+      {isShowSidebar && (
+        <Box display={{ initial: `block`, md: `none` }} mb='4'>
+          <HamburgerMenu
+            isOpen={mobileMenuOpen}
+            onToggle={() => {
+              setMobileMenuOpen(!mobileMenuOpen)
+            }}
+            onClose={() => {
+              setMobileMenuOpen(false)
+            }}
+            sidebarData={sidebar}
+          />
+        </Box>
+      )}
+
+      {/* Desktop Sidebar */}
+      {isShowSidebar && (
+        <Box
+          display={{ initial: `none`, xs: `none`, sm: `none`, md: `block` }}
+          gridColumn='1 / 3'
+          gridRow='1 / auto'
+        >
+          <Sidebar data={sidebar} />
+        </Box>
+      )}
+
+      <Box gridArea='content / content / auto / 8' className='prose'>
+        {children}
+      </Box>
+    </Grid>
+  )
+}

package/src/template/components/layouts/index.ts

@@ -0,0 +1 @@
+export * from './SidebarLayout.js'

package/src/template/routes/changelog.tsx

@@ -2,6 +2,7 @@ import { createRoute } from '#lib/react-router-aid/react-router-aid'
 import { createLoader, useLoaderData } from '#lib/react-router-loader/react-router-loader'
 import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
 import { Changelog } from '../components/Changelog.js'
+import { ChangelogLayout } from '../components/ChangelogLayout.js'
 
 const loader = createLoader(() => {
   return {
@@ -16,7 +17,11 @@ const Component = () => {
     return <div>No data to show. There is no schema is.</div>
   }
 
-  return <Changelog schema={data.schema} />
+  return (
+    <ChangelogLayout versions={data.schema.versions}>
+      <Changelog schema={data.schema} />
+    </ChangelogLayout>
+  )
 }
 
 export const changelog = createRoute({

package/src/template/routes/reference.tsx

@@ -1,8 +1,11 @@
+import type { Content } from '#api/content/$'
+import { GrafaidOld } from '#lib/grafaid-old/index'
 import { createRoute } from '#lib/react-router-aid/react-router-aid'
 import { createLoader, useLoaderData } from '#lib/react-router-loader/react-router-loader'
 import { Box } from '@radix-ui/themes'
 import { Outlet } from 'react-router'
 import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
+import { SidebarLayout } from '../components/layouts/index.js'
 import { MissingSchema } from '../components/MissingSchema.js'
 import { reference$type } from './reference.$type.js'
 
@@ -20,10 +23,30 @@ const Component = () => {
     return <MissingSchema />
   }
 
+  // Build reference sidebar from schema types
+  const kindMap = GrafaidOld.getKindMap(data.schema)
+
+  const sidebarItems: Content.Item[] = []
+  const kindEntries = Object.entries(kindMap.list).filter(([_, types]) => types.length > 0)
+
+  for (const [title, types] of kindEntries) {
+    sidebarItems.push({
+      type: `ItemSection` as const,
+      title,
+      pathExp: `reference-${title.toLowerCase()}`,
+      isLinkToo: false,
+      links: types.map(type => ({
+        type: `ItemLink` as const,
+        title: type.name,
+        pathExp: `reference/${type.name}`,
+      })),
+    })
+  }
+
   return (
-    <Box className='prose'>
+    <SidebarLayout sidebar={sidebarItems}>
       <Outlet />
-    </Box>
+    </SidebarLayout>
   )
 }
 

package/src/template/routes/root.tsx

@@ -1,25 +1,18 @@
-import type { Content } from '#api/content/$'
 import type { ReactRouter } from '#dep/react-router/index'
-import { GrafaidOld } from '#lib/grafaid-old/index'
 import { createRoute } from '#lib/react-router-aid/react-router-aid'
-import { Box, Grid } from '@radix-ui/themes'
+import { Box } from '@radix-ui/themes'
 import { Flex, Theme } from '@radix-ui/themes'
-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 { Outlet, ScrollRestoration } from 'react-router'
 import logoSrc from 'virtual:polen/project/assets/logo.svg'
 import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
-import projectPagesCatalog from 'virtual:polen/project/data/pages-catalog.jsonsuper'
 import { routes } from 'virtual:polen/project/routes.jsx'
 import { templateVariables } from 'virtual:polen/template/variables'
 import { GraphQLSchemaProvider } from '../../lib/graphql-document/schema-context.js'
 import { CodeBlockEnhancer } from '../components/CodeBlockEnhancer.js'
-import { HamburgerMenu } from '../components/HamburgerMenu.js'
 import { Link } from '../components/Link.js'
 import { Logo } from '../components/Logo.js'
 import { NotFound } from '../components/NotFound.js'
-import { Sidebar } from '../components/sidebar/Sidebar.js'
 import { ThemeToggle } from '../components/ThemeToggle.js'
 import { ThemeProvider, useTheme } from '../contexts/ThemeContext.js'
 import { changelog } from './changelog.js'
@@ -48,64 +41,10 @@ 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 => {
-    // 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 isReferencePage = currentNavPathExp === `/reference`
-
-  const sidebar = (() => {
-    if (isReferencePage && PROJECT_DATA.schema) {
-      // Build reference sidebar from schema types
-      const schema = PROJECT_DATA.schema.versions[0].after
-      const kindMap = GrafaidOld.getKindMap(schema)
-
-      const sidebarItems: Content.Item[] = []
-      const kindEntries = Object.entries(kindMap.list).filter(([_, types]) => types.length > 0)
-
-      for (const [title, types] of kindEntries) {
-        sidebarItems.push({
-          type: `ItemSection` as const,
-          title,
-          pathExp: `reference-${title.toLowerCase()}`,
-          isLinkToo: false,
-          links: types.map(type => ({
-            type: `ItemLink` as const,
-            title: type.name,
-            pathExp: `reference/${type.name}`,
-          })),
-        })
-      }
-
-      return { items: sidebarItems }
-    } else {
-      // Use regular page sidebar
-      return currentNavPathExp ? projectPagesCatalog.sidebarIndex[currentNavPathExp] || null : null
-    }
-  })()
-
-  const isShowSidebar = sidebar && sidebar.items.length > 0
 
   const header = (
     <Flex
-      gridArea={`header`}
       align='center'
       gap={{ initial: `4`, md: `8` }}
       pb='4'
@@ -114,20 +53,6 @@ const Layout = () => {
         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` }}
@@ -149,40 +74,17 @@ const Layout = () => {
 
   return (
     <Theme asChild appearance={appearance}>
-      <Grid
+      <Box
         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={{ 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` }}
       >
         {header}
-
-        {/* Desktop Sidebar */}
-        {isShowSidebar && (
-          <Box
-            display={{ initial: `none`, xs: `none`, sm: `none`, md: `block` }}
-            gridColumn='1 / 3'
-            gridRow='2 / auto'
-          >
-            <Sidebar data={sidebar.items} />
-          </Box>
-        )}
-
-        <Box gridArea='content / content / auto / 8' className='prose'>
-          <Outlet />
-        </Box>
-      </Grid>
+        <Outlet />
+      </Box>
     </Theme>
   )
 }