polen 0.11.0-next.14 → 0.11.0-next.16

package/src/template/components/home/RecentChanges.tsx

@@ -0,0 +1,152 @@
+import { Badge, Box, Card, Flex, Heading, Section, Text } from '@radix-ui/themes'
+import * as React from 'react'
+import { Link } from 'react-router'
+import { schemasCatalog } from 'virtual:polen/project/schemas'
+
+interface RecentChangesProps {
+  limit?: number
+  showVersions?: boolean
+}
+
+export const RecentChangesSection: React.FC<RecentChangesProps> = ({
+  limit = 5,
+  showVersions = true,
+}) => {
+  // Get recent changes from catalog
+  const getRecentChanges = () => {
+    if (!schemasCatalog) return []
+
+    // For unversioned catalogs, we look at revisions
+    if (schemasCatalog._tag === 'CatalogUnversioned') {
+      const revisions = schemasCatalog.schema.revisions || []
+      const recentRevisions = revisions.slice(0, limit)
+
+      return recentRevisions.map(revision => ({
+        date: revision.date,
+        changes: revision.changes || [],
+        version: null as string | null,
+      }))
+    }
+
+    // For versioned catalogs, we look at entries
+    if (schemasCatalog._tag === 'CatalogVersioned') {
+      const entries = schemasCatalog.entries || []
+      const recentEntries = entries.slice(0, limit)
+
+      return recentEntries.flatMap(entry =>
+        entry.revisions.map(revision => ({
+          date: revision.date,
+          changes: revision.changes || [],
+          version: typeof entry.version === 'object' && 'value' in entry.version
+            ? String(entry.version.value)
+            : typeof entry.version === 'string'
+            ? entry.version
+            : null,
+        }))
+      ).slice(0, limit)
+    }
+
+    return []
+  }
+
+  const recentChanges = getRecentChanges()
+
+  if (recentChanges.length === 0) {
+    return null
+  }
+
+  const getCriticalityColor = (level: string) => {
+    switch (level) {
+      case 'BREAKING':
+        return 'red'
+      case 'DANGEROUS':
+        return 'orange'
+      case 'NON_BREAKING':
+      default:
+        return 'green'
+    }
+  }
+
+  return (
+    <Section size='3'>
+      <Box style={{ maxWidth: '1200px', margin: '0 auto' }}>
+        <Flex justify='between' align='center' mb='4'>
+          <Box>
+            <Heading size='6' mb='2'>
+              Recent Changes
+            </Heading>
+            <Text size='3' color='gray'>
+              Latest updates to the GraphQL schema
+            </Text>
+          </Box>
+
+          <Button variant='soft' asChild>
+            <Link to='/changelog'>View Full Changelog</Link>
+          </Button>
+        </Flex>
+
+        <Flex direction='column' gap='3'>
+          {recentChanges.map((revision, index) => (
+            <Card key={index} size='2'>
+              <Flex justify='between' align='start' mb='3'>
+                <Box>
+                  <Text size='2' color='gray'>
+                    {new Date(revision.date).toLocaleDateString('en-US', {
+                      year: 'numeric',
+                      month: 'long',
+                      day: 'numeric',
+                    })}
+                  </Text>
+                  {showVersions && revision.version && (
+                    <Badge size='1' variant='soft' ml='2'>
+                      v{revision.version}
+                    </Badge>
+                  )}
+                </Box>
+
+                <Text size='1' color='gray'>
+                  {revision.changes.length} change{revision.changes.length !== 1 ? 's' : ''}
+                </Text>
+              </Flex>
+
+              <Flex direction='column' gap='2'>
+                {revision.changes.slice(0, 3).map((change, changeIndex) => (
+                  <Flex key={changeIndex} align='center' gap='2'>
+                    <Badge
+                      size='1'
+                      color={getCriticalityColor(change.criticality?.level || 'NON_BREAKING')}
+                    >
+                      {change._tag.replace(/_/g, ' ').toLowerCase()}
+                    </Badge>
+                    <Text size='2' style={{ flex: 1 }}>
+                      {change.message}
+                    </Text>
+                  </Flex>
+                ))}
+
+                {revision.changes.length > 3 && (
+                  <Text size='1' color='gray' mt='1'>
+                    ...and {revision.changes.length - 3} more changes
+                  </Text>
+                )}
+              </Flex>
+            </Card>
+          ))}
+        </Flex>
+
+        {recentChanges.length >= limit && (
+          <Box mt='4' style={{ textAlign: 'center' }}>
+            <Button variant='ghost' asChild>
+              <Link to='/changelog'>
+                View all changes →
+              </Link>
+            </Button>
+          </Box>
+        )}
+      </Box>
+    </Section>
+  )
+}
+
+// Add missing Button import (Radix Themes doesn't export Button, we'll use a simple link)
+import { Button } from '@radix-ui/themes'

package/src/template/components/home/Resources.tsx

@@ -0,0 +1,207 @@
+import { Box, Button, Card, Flex, Grid, Heading, Section, Text } from '@radix-ui/themes'
+import * as React from 'react'
+import { Link } from 'react-router'
+
+interface ResourceLink {
+  title: string
+  description?: string
+  href: string
+  icon?: string
+  external?: boolean
+}
+
+interface ResourcesProps {
+  links?: ResourceLink[]
+  communityLinks?: Array<{
+    platform: string
+    href: string
+    icon?: string
+  }>
+  supportContact?: {
+    email?: string
+    href?: string
+    text?: string
+  }
+}
+
+const defaultLinks: ResourceLink[] = [
+  {
+    title: 'API Reference',
+    description: 'Complete schema documentation',
+    href: '/reference',
+    icon: '📚',
+  },
+  {
+    title: 'Playground',
+    description: 'Interactive GraphQL explorer',
+    href: '/playground',
+    icon: '🎮',
+  },
+  {
+    title: 'Changelog',
+    description: 'Version history and updates',
+    href: '/changelog',
+    icon: '📝',
+  },
+  {
+    title: 'Getting Started',
+    description: 'Quick start guide',
+    href: '/guides/quick-start',
+    icon: '🚀',
+  },
+]
+
+const getCommunityIcon = (platform: string): string => {
+  const icons: Record<string, string> = {
+    github: '🐙',
+    discord: '💬',
+    slack: '💼',
+    twitter: '🐦',
+    x: '🐦',
+    bluesky: '🦋',
+    mastodon: '🐘',
+    stackoverflow: '🤔',
+    reddit: '🤖',
+  }
+  return icons[platform.toLowerCase()] || '🔗'
+}
+
+export const ResourcesSection: React.FC<ResourcesProps> = ({
+  links = defaultLinks,
+  communityLinks = [],
+  supportContact,
+}) => {
+  return (
+    <Section size='3' style={{ background: 'var(--gray-2)' }}>
+      <Box style={{ maxWidth: '1200px', margin: '0 auto' }}>
+        <Box mb='6' style={{ textAlign: 'center' }}>
+          <Heading size='6' mb='2'>
+            Resources & Support
+          </Heading>
+          <Text size='3' color='gray'>
+            Everything you need to work with our API
+          </Text>
+        </Box>
+
+        {/* Main resource links */}
+        <Grid columns={{ initial: '1', sm: '2', md: '4' }} gap='4' mb='6'>
+          {links.map((link, index) => (
+            <Card key={index} size='2' asChild>
+              <Link to={link.href} style={{ textDecoration: 'none', color: 'inherit' }}>
+                <Flex direction='column' gap='2'>
+                  {link.icon && (
+                    <Text size='6' style={{ lineHeight: 1 }}>
+                      {link.icon}
+                    </Text>
+                  )}
+                  <Box>
+                    <Text size='3' weight='medium'>
+                      {link.title}
+                      {link.external && ' ↗'}
+                    </Text>
+                    {link.description && (
+                      <Text size='2' color='gray' mt='1'>
+                        {link.description}
+                      </Text>
+                    )}
+                  </Box>
+                </Flex>
+              </Link>
+            </Card>
+          ))}
+        </Grid>
+
+        {/* Community and support section */}
+        {(communityLinks.length > 0 || supportContact) && (
+          <Card size='3'>
+            <Flex justify='between' align='start' wrap='wrap' gap='4'>
+              {/* Community links */}
+              {communityLinks.length > 0 && (
+                <Box>
+                  <Text size='2' weight='medium' color='gray' mb='3'>
+                    Community
+                  </Text>
+                  <Flex gap='3'>
+                    {communityLinks.map((link, index) => (
+                      <Button
+                        key={index}
+                        size='2'
+                        variant='ghost'
+                        asChild
+                      >
+                        <a
+                          href={link.href}
+                          target='_blank'
+                          rel='noopener noreferrer'
+                          style={{ textDecoration: 'none' }}
+                        >
+                          <Flex align='center' gap='1'>
+                            <Text>{link.icon || getCommunityIcon(link.platform)}</Text>
+                            <Text style={{ textTransform: 'capitalize' }}>
+                              {link.platform}
+                            </Text>
+                          </Flex>
+                        </a>
+                      </Button>
+                    ))}
+                  </Flex>
+                </Box>
+              )}
+
+              {/* Support contact */}
+              {supportContact && (
+                <Box>
+                  <Text size='2' weight='medium' color='gray' mb='3'>
+                    Need Help?
+                  </Text>
+                  <Flex direction='column' gap='2'>
+                    {supportContact.email && (
+                      <Text size='2'>
+                        Email:{' '}
+                        <a
+                          href={`mailto:${supportContact.email}`}
+                          style={{ color: 'var(--accent-9)' }}
+                        >
+                          {supportContact.email}
+                        </a>
+                      </Text>
+                    )}
+                    {supportContact.href && (
+                      <Button size='2' variant='soft' asChild>
+                        <a
+                          href={supportContact.href}
+                          target='_blank'
+                          rel='noopener noreferrer'
+                        >
+                          {supportContact.text || 'Contact Support'}
+                        </a>
+                      </Button>
+                    )}
+                  </Flex>
+                </Box>
+              )}
+
+              {/* API Status (optional placeholder) */}
+              <Box>
+                <Text size='2' weight='medium' color='gray' mb='3'>
+                  API Status
+                </Text>
+                <Flex align='center' gap='2'>
+                  <Box
+                    style={{
+                      width: '8px',
+                      height: '8px',
+                      borderRadius: '50%',
+                      background: 'var(--green-9)',
+                    }}
+                  />
+                  <Text size='2'>All systems operational</Text>
+                </Flex>
+              </Box>
+            </Flex>
+          </Card>
+        )}
+      </Box>
+    </Section>
+  )
+}

package/src/template/components/home/SocialProof.tsx

@@ -0,0 +1,109 @@
+import { Box, Flex, Heading, Section, Text } from '@radix-ui/themes'
+import * as React from 'react'
+
+interface Logo {
+  name: string
+  src: string
+  href?: string
+}
+
+interface SocialProofProps {
+  title?: string
+  logos: Array<string | Logo>
+}
+
+export const SocialProof: React.FC<SocialProofProps> = ({
+  title = 'Trusted By',
+  logos,
+}) => {
+  if (!logos || logos.length === 0) {
+    return null
+  }
+
+  // Normalize logos to Logo objects
+  const normalizedLogos: Logo[] = logos.map(logo => {
+    if (typeof logo === 'string') {
+      // Auto-generate path from string name
+      const kebabName = logo.toLowerCase().replace(/\s+/g, '-')
+      return {
+        name: logo,
+        src: `/logos/${kebabName}.svg`,
+      }
+    }
+    return logo
+  })
+
+  return (
+    <Section size='3' style={{ background: 'var(--gray-2)' }}>
+      <Box style={{ maxWidth: '1200px', margin: '0 auto', textAlign: 'center' }}>
+        <Heading size='5' mb='5' color='gray'>
+          {title}
+        </Heading>
+
+        <Flex
+          wrap='wrap'
+          justify='center'
+          align='center'
+          gap='6'
+          style={{
+            filter: 'grayscale(100%)',
+            opacity: 0.7,
+          }}
+        >
+          {normalizedLogos.map((logo, index) => {
+            const LogoImage = (
+              <img
+                src={logo.src}
+                alt={logo.name}
+                style={{
+                  height: '40px',
+                  maxWidth: '150px',
+                  objectFit: 'contain',
+                }}
+                onError={(e) => {
+                  // Hide image if it fails to load
+                  ;(e.target as HTMLImageElement).style.display = 'none'
+                }}
+              />
+            )
+
+            if (logo.href) {
+              return (
+                <a
+                  key={index}
+                  href={logo.href}
+                  target='_blank'
+                  rel='noopener noreferrer'
+                  style={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    transition: 'opacity 0.2s',
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.opacity = '1'
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.opacity = '0.7'
+                  }}
+                >
+                  {LogoImage}
+                </a>
+              )
+            }
+
+            return (
+              <Box key={index} style={{ display: 'inline-flex', alignItems: 'center' }}>
+                {LogoImage}
+              </Box>
+            )
+          })}
+        </Flex>
+
+        {/* Optional testimonial or description */}
+        <Text size='2' color='gray' mt='5' style={{ maxWidth: '600px', margin: '24px auto 0' }}>
+          Join thousands of developers building with our GraphQL API
+        </Text>
+      </Box>
+    </Section>
+  )
+}

package/src/template/components/navbar/DefaultNavbar.tsx

@@ -1,22 +1,33 @@
 import type { NavbarProps } from '#api/hooks/types'
+import { Swiss } from '#lib/swiss'
 import { Flex } from '@radix-ui/themes'
+import { Array } from 'effect'
 import type React from 'react'
 
 export const DefaultNavbar: React.FC<NavbarProps> = ({ items, Item, Logo, ThemeToggle }) => {
+  const [leftItems, rightItems] = Array.partition(items, item => item.position === 'right')
+
   return (
     <>
-      <Logo />
-      <Flex direction='row' gap='4' style={{ flex: 1 }}>
-        {items
-          .filter(item => item.position !== 'right')
-          .map((item, index) => <Item key={index} item={item} index={index} />)}
-      </Flex>
-      <Flex direction='row' gap='4'>
-        {items
-          .filter(item => item.position === 'right')
-          .map((item, index) => <Item key={index} item={item} index={index} />)}
-      </Flex>
-      <ThemeToggle />
+      {/* Logo */}
+      <Swiss.Item cols={2}>
+        <Logo />
+      </Swiss.Item>
+
+      {/* Center navigation */}
+      <Swiss.Item cols={4}>
+        <Flex direction='row' gap='4' justify='center' align='center'>
+          {leftItems.map((item, index) => <Item key={index} item={item} index={index} />)}
+        </Flex>
+      </Swiss.Item>
+
+      {/* Right actions */}
+      <Swiss.Item cols={6}>
+        <Flex direction='row' gap='4' justify='end' align='center'>
+          {rightItems.map((item, index) => <Item key={index} item={item} index={index} />)}
+          <ThemeToggle />
+        </Flex>
+      </Swiss.Item>
     </>
   )
 }

package/src/template/components/sidebar/Sidebar.tsx

@@ -1,11 +1,24 @@
 import type { Content } from '#api/content/$'
+import type { React } from '#dep/react/index'
 import { Box } from '@radix-ui/themes'
 import type { BoxOwnProps, LayoutProps, MarginProps } from '@radix-ui/themes/props'
 import { SidebarContext } from './SidebarContext.js'
 import { Items } from './SidebarItem.js'
 
+// Template layer extension: Allow React elements in title
+interface TemplateItemLink extends Omit<Content.ItemLink, 'title'> {
+  title: string | React.ReactNode
+}
+
+interface TemplateItemSection extends Omit<Content.ItemSection, 'title' | 'links'> {
+  title: string | React.ReactNode
+  links: TemplateItemLink[]
+}
+
+type TemplateItem = TemplateItemLink | TemplateItemSection
+
 interface Props extends LayoutProps, MarginProps, BoxOwnProps {
-  data: Content.Item[]
+  data: TemplateItem[]
   basePath?: string
   style?: React.CSSProperties
   topContent?: React.ReactNode
@@ -13,7 +26,7 @@ interface Props extends LayoutProps, MarginProps, BoxOwnProps {
 
 export const Sidebar = ({ data, basePath, topContent, ...props }: Props) => {
   return (
-    <SidebarContext.Provider value={{ basePath }}>
+    <SidebarContext.Provider value={basePath !== undefined ? { basePath } : {}}>
       <Box
         data-testid='sidebar'
         role='Sidebar'

package/src/template/components/sidebar/SidebarItem.tsx

@@ -8,7 +8,19 @@ import { useLocation } from 'react-router'
 import { getPathActiveReport, Link } from '../Link.js'
 import { SidebarContext } from './SidebarContext.js'
 
-export const Items: React.FC<{ items: Content.Item[] }> = ({ items }) => {
+// Template layer extension: Allow React elements in title
+interface TemplateItemLink extends Omit<Content.ItemLink, 'title'> {
+  title: string | React.ReactNode
+}
+
+interface TemplateItemSection extends Omit<Content.ItemSection, 'title' | 'links'> {
+  title: string | React.ReactNode
+  links: TemplateItemLink[]
+}
+
+type TemplateItem = TemplateItemLink | TemplateItemSection
+
+export const Items: React.FC<{ items: TemplateItem[] }> = ({ items }) => {
   return (
     <Flex direction='column' gap='2px'>
       {items.map((item, index) => (
@@ -29,7 +41,7 @@ export const Items: React.FC<{ items: Content.Item[] }> = ({ items }) => {
 //
 //
 
-export const Item: React.FC<{ item: Content.Item }> = ({ item }) => {
+export const Item: React.FC<{ item: TemplateItem }> = ({ item }) => {
   if (item.type === `ItemLink`) {
     return <SBLink link={item} />
   }
@@ -50,7 +62,7 @@ export const Item: React.FC<{ item: Content.Item }> = ({ item }) => {
 //
 
 const SBLink: React.FC<{
-  link: Content.ItemLink | Content.ItemSection
+  link: TemplateItemLink | TemplateItemSection
 }> = ({ link }) => {
   const location = useLocation()
   const { basePath } = useContext(SidebarContext)
@@ -86,7 +98,7 @@ const SBLink: React.FC<{
 //
 
 const Section: React.FC<{
-  section: Content.ItemSection
+  section: TemplateItemSection
 }> = ({ section }) => {
   return (
     <Box mt='8'>
@@ -109,7 +121,7 @@ const Section: React.FC<{
 //
 
 const LinkedSection: React.FC<{
-  section: Content.ItemSection
+  section: TemplateItemSection
 }> = ({ section }) => {
   return (
     <Box>
@@ -138,7 +150,7 @@ const LinkedSection: React.FC<{
   )
 }
 
-const SectionLink: React.FC<{ link: Content.ItemLink }> = ({ link }) => {
+const SectionLink: React.FC<{ link: TemplateItemLink }> = ({ link }) => {
   const location = useLocation()
   const { basePath } = useContext(SidebarContext)
   const href = Api.Schema.Routing.joinSegmentsAndPaths(basePath, link.pathExp)

package/src/template/components/swiss/SwissHeading.tsx

@@ -0,0 +1,44 @@
+import { Heading } from '@radix-ui/themes'
+import * as React from 'react'
+
+/**
+ * Swiss Heading Component
+ *
+ * A sharp, impactful heading component that splits words for vertical stacking.
+ * Features extreme typography contrast and tight tracking.
+ */
+export const SwissHeading: React.FC<React.ComponentProps<typeof Heading>> = ({
+  children,
+  ...props
+}) => {
+  // Split words for stacked display
+  const words = typeof children === 'string'
+    ? children.split(' ')
+    : React.Children.toArray(children)
+
+  return (
+    <Heading
+      {...props}
+      weight='bold'
+      style={{
+        fontSize: 'clamp(2.5rem, 7vw, 5.5rem)',
+        lineHeight: 1.1,
+        letterSpacing: '-0.02em',
+        fontWeight: 900,
+        ...props.style,
+      }}
+    >
+      {words.map((word, i) => (
+        <span
+          key={i}
+          style={{
+            display: 'block',
+            marginBottom: i < words.length - 1 ? '0.05em' : 0,
+          }}
+        >
+          {word}
+        </span>
+      ))}
+    </Heading>
+  )
+}

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

@@ -0,0 +1 @@
+export { SwissHeading } from './SwissHeading.js'