polen 0.11.0-next.15 → 0.11.0-next.17

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

@@ -0,0 +1,132 @@
+import { Box, Card, Heading, Section, Tabs, Text } from '@radix-ui/themes'
+import { highlight } from 'codehike/code'
+import * as React from 'react'
+import { CodeBlock } from '../CodeBlock.js'
+
+interface Props {
+  examples?: Array<{
+    label: string
+    language: string
+    code: string
+  }>
+}
+
+const defaultExamples = [
+  {
+    label: 'JavaScript',
+    language: 'javascript',
+    code: `// Install the GraphQL client
+npm install graphql-request
+
+// Make your first query
+import { request } from 'graphql-request'
+
+const query = \`
+  query GetData {
+    # Your query here
+  }
+\`
+
+const data = await request('/graphql', query)
+console.log(data)`,
+  },
+  {
+    label: 'cURL',
+    language: 'bash',
+    code: `# Make a GraphQL request with cURL
+curl -X POST \\
+  -H "Content-Type: application/json" \\
+  -d '{"query": "{ __typename }"}' \\
+  https://api.example.com/graphql`,
+  },
+  {
+    label: 'Python',
+    language: 'python',
+    code: `# Install the GraphQL client
+# pip install gql[requests]
+
+from gql import gql, Client
+from gql.transport.requests import RequestsHTTPTransport
+
+transport = RequestsHTTPTransport(url="https://api.example.com/graphql")
+client = Client(transport=transport)
+
+query = gql("""
+  query GetData {
+    # Your query here
+  }
+""")
+
+result = client.execute(query)
+print(result)`,
+  },
+]
+
+export const QuickStartSection: React.FC<Props> = ({ examples = defaultExamples }) => {
+  // Pre-highlight code blocks during render
+  const [highlightedExamples, setHighlightedExamples] = React.useState<
+    Array<{
+      label: string
+      codeblock: any
+    }>
+  >([])
+
+  React.useEffect(() => {
+    const highlightExamples = async () => {
+      const highlighted = await Promise.all(
+        examples.map(async (example) => ({
+          label: example.label,
+          codeblock: await highlight(
+            { value: example.code, lang: example.language, meta: '' },
+            { theme: 'github-light' },
+          ),
+        })),
+      )
+      setHighlightedExamples(highlighted)
+    }
+    highlightExamples()
+  }, [examples])
+
+  if (highlightedExamples.length === 0) {
+    return (
+      <Section size='3' pb='8'>
+        <Box style={{ textAlign: 'center' }}>
+          <Text color='gray'>Loading examples...</Text>
+        </Box>
+      </Section>
+    )
+  }
+
+  return (
+    <Section size='3' pb='8'>
+      <Box style={{ maxWidth: '900px', margin: '0 auto' }}>
+        <Heading size='7' mb='2' style={{ textAlign: 'center' }}>
+          Quick Start
+        </Heading>
+        <Text size='3' color='gray' mb='6' style={{ textAlign: 'center', display: 'block' }}>
+          Get up and running in minutes
+        </Text>
+
+        <Card size='3'>
+          <Tabs.Root defaultValue={highlightedExamples[0]?.label || 'javascript'}>
+            <Tabs.List>
+              {highlightedExamples.map((example) => (
+                <Tabs.Trigger key={example.label} value={example.label}>
+                  {example.label}
+                </Tabs.Trigger>
+              ))}
+            </Tabs.List>
+
+            <Box pt='4'>
+              {highlightedExamples.map((example) => (
+                <Tabs.Content key={example.label} value={example.label}>
+                  <CodeBlock codeblock={example.codeblock} />
+                </Tabs.Content>
+              ))}
+            </Box>
+          </Tabs.Root>
+        </Card>
+      </Box>
+    </Section>
+  )
+}

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

@@ -0,0 +1,154 @@
+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'
+
+import { Catalog } from '#lib/catalog'
+
+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 = Catalog.Versioned.getAll(schemasCatalog)
+      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