polen 0.10.0-next.13 → 0.10.0-next.3

package/src/template/components/CodeBlockEnhancer.tsx

@@ -1,192 +0,0 @@
-import { useEffect } from 'react'
-import { useLocation } from 'react-router'
-import { useTheme } from '../contexts/ThemeContext.tsx'
-
-export const CodeBlockEnhancer = () => {
-  const { appearance } = useTheme()
-  const location = useLocation()
-
-  useEffect(() => {
-    // Add styles for code block enhancements
-    const styleId = 'code-block-enhancer-styles'
-    let styleElement = document.getElementById(styleId) as HTMLStyleElement
-
-    if (!styleElement) {
-      styleElement = document.createElement('style')
-      styleElement.id = styleId
-      document.head.appendChild(styleElement)
-    }
-
-    styleElement.textContent = `
-      /* Enhanced code block styles */
-      pre.shiki {
-        position: relative;
-      }
-      
-      pre.shiki[data-title] {
-        margin-top: 0;
-        border-radius: 0 0 8px 8px !important;
-      }
-      
-      pre.shiki[data-title]::before {
-        content: attr(data-title);
-        display: block;
-        position: absolute;
-        top: -2.5rem;
-        left: -1px;
-        right: -1px;
-        background-color: ${appearance === 'dark' ? '#2a2b3d' : '#f3f4f6'};
-        border: 1px solid var(--gray-4);
-        border-bottom: 1px solid ${appearance === 'dark' ? '#3a3b4d' : '#e5e7eb'};
-        border-radius: 8px 8px 0 0;
-        padding: 0.5rem 1rem;
-        font-size: 0.875rem;
-        font-weight: 500;
-        color: var(--gray-11);
-        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-      }
-      
-      pre.shiki[data-title][data-language]::after {
-        content: attr(data-language);
-        position: absolute;
-        top: -2rem;
-        right: 1rem;
-        font-size: 0.75rem;
-        color: var(--gray-9);
-        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-      }
-      
-      .code-block-copy {
-        position: absolute;
-        top: 0.5rem;
-        right: 0.5rem;
-        padding: 0.25rem 0.5rem;
-        font-size: 0.75rem;
-        cursor: pointer;
-        border: none;
-        border-radius: 4px;
-        transition: all 0.2s;
-        background-color: ${appearance === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(255, 255, 255, 0.8)'};
-        backdrop-filter: blur(4px);
-        color: ${appearance === 'dark' ? '#fff' : '#000'};
-        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-      }
-      
-      pre.shiki[data-title] .code-block-copy {
-        top: -2rem;
-        right: 6rem;
-        background-color: transparent;
-        color: var(--gray-11);
-      }
-      
-      .code-block-copy:hover {
-        background-color: var(--accent-9) !important;
-        color: white !important;
-      }
-      
-      .code-block-copy[data-copied="true"] {
-        background-color: var(--green-9) !important;
-        color: white !important;
-      }
-    `
-
-    return () => {
-      if (styleElement && styleElement.parentNode) {
-        styleElement.parentNode.removeChild(styleElement)
-      }
-    }
-  }, [appearance])
-
-  useEffect(() => {
-    const enhanceCodeBlocks = () => {
-      const codeBlocks = document.querySelectorAll('pre.shiki:not([data-enhanced])')
-
-      codeBlocks.forEach((block) => {
-        const preElement = block as HTMLPreElement
-        preElement.setAttribute('data-enhanced', 'true')
-
-        // Get language from class name
-        const classes = preElement.className.split(' ')
-        const language = classes.find(c => c !== 'shiki' && c !== 'shiki-light' && c !== 'shiki-dark') || 'text'
-
-        // Check for title in first line
-        const codeElement = preElement.querySelector('code')
-        if (!codeElement) return
-
-        const firstLine = codeElement.textContent?.split('\n')[0] || ''
-        let title = ''
-
-        const titleMatch = firstLine.match(/^\/\/\s*title:\s*(.+)$/i)
-        if (titleMatch && titleMatch[1]) {
-          title = titleMatch[1]
-          // Remove title line from display
-          const firstLineElement = codeElement.querySelector('span.line') as HTMLElement
-          if (firstLineElement) {
-            firstLineElement.style.display = 'none'
-          }
-
-          // Set data attributes for CSS
-          preElement.setAttribute('data-title', title)
-          preElement.setAttribute('data-language', language)
-          preElement.style.marginTop = '3rem'
-        }
-
-        // Create copy button
-        const copyButton = document.createElement('button')
-        copyButton.className = 'code-block-copy'
-        copyButton.textContent = 'Copy'
-        copyButton.setAttribute('data-copied', 'false')
-
-        copyButton.onclick = async (e) => {
-          e.preventDefault()
-          e.stopPropagation()
-
-          // Get clean code without the title line
-          const code = codeElement.textContent || ''
-          const cleanCode = title ? code.split('\n').slice(1).join('\n') : code
-
-          try {
-            await navigator.clipboard.writeText(cleanCode)
-            copyButton.textContent = 'Copied!'
-            copyButton.setAttribute('data-copied', 'true')
-            setTimeout(() => {
-              copyButton.textContent = 'Copy'
-              copyButton.setAttribute('data-copied', 'false')
-            }, 2000)
-          } catch (err) {
-            console.error('Failed to copy:', err)
-          }
-        }
-
-        // Append copy button directly to pre element
-        preElement.appendChild(copyButton)
-      })
-    }
-
-    // Small delay to ensure DOM is ready
-    const timeoutId = setTimeout(enhanceCodeBlocks, 100)
-
-    return () => {
-      clearTimeout(timeoutId)
-      // Clean up enhanced code blocks
-      document.querySelectorAll('pre.shiki[data-enhanced]').forEach(block => {
-        block.removeAttribute('data-enhanced')
-        block.removeAttribute('data-title')
-        block.removeAttribute('data-language')
-        const copyButton = block.querySelector('.code-block-copy')
-        if (copyButton) {
-          copyButton.remove()
-        }
-        // Restore hidden title lines
-        const firstLine = block.querySelector('span.line') as HTMLElement
-        if (firstLine && firstLine.style.display === 'none') {
-          firstLine.style.display = ''
-        } // Reset margin
-
-        ;(block as HTMLElement).style.marginTop = ''
-      })
-    }
-  }, [location.pathname]) // Re-run when route changes
-
-  return null
-}

package/src/template/components/HamburgerMenu.tsx

@@ -1,96 +0,0 @@
-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/MDXComponents.tsx

@@ -1,101 +0,0 @@
-import React from 'react'
-
-interface PreProps {
-  children: React.ReactNode
-  className?: string
-  'data-enhanced'?: string
-}
-
-interface CodeProps {
-  children: string
-  className?: string
-}
-
-/**
- * Custom pre component that intercepts GraphQL code blocks
- */
-const Pre: React.FC<PreProps> = ({ children, className, ...props }) => {
-  // Check if this is a Shiki-enhanced code block
-  const isShiki = props['data-enhanced'] === 'true'
-
-  // Extract the code element
-  const codeElement = React.Children.toArray(children).find(
-    child => React.isValidElement(child) && child.type === 'code',
-  ) as React.ReactElement<CodeProps> | undefined
-
-  if (!codeElement) {
-    return <pre className={className} {...props}>{children}</pre>
-  }
-
-  // Check if it's a GraphQL code block
-  const codeClassName = codeElement.props.className || ''
-  const isGraphQL = codeClassName.includes('language-graphql') || codeClassName.includes('language-gql')
-
-  if (isGraphQL && isShiki) {
-    // Extract the plain text content from the code element
-    const plainText = extractPlainText(codeElement.props.children)
-
-    // For now, just render the Shiki-highlighted code normally
-    // The GraphQLDocument component will be enhanced client-side
-    return (
-      <div data-testid='graphql-document' data-graphql-code={plainText}>
-        <pre className={className} {...props}>{children}</pre>
-      </div>
-    )
-  }
-
-  // For non-GraphQL code blocks, render normally
-  return <pre className={className} {...props}>{children}</pre>
-}
-
-/**
- * Extract plain text from React children (recursive)
- */
-function extractPlainText(children: React.ReactNode): string {
-  if (typeof children === 'string') {
-    return children
-  }
-
-  if (Array.isArray(children)) {
-    return children.map(extractPlainText).join('')
-  }
-
-  if (React.isValidElement(children)) {
-    const props = (children as React.ReactElement<any>).props
-    if (props?.children) {
-      return extractPlainText(props.children)
-    }
-  }
-
-  return ''
-}
-
-/**
- * Simple server-side rendering of React element to HTML string
- */
-function renderToStaticMarkup(element: React.ReactNode): string {
-  // For server-side, we just need to preserve the structure
-  if (typeof element === 'string') return element
-
-  if (React.isValidElement(element)) {
-    const { type, props } = element as React.ReactElement<any>
-    const tagName = typeof type === 'string' ? type : 'div'
-    const attrs = Object.entries(props || {})
-      .filter(([key]) => key !== 'children' && !key.startsWith('__'))
-      .map(([key, value]) => `${key}="${value}"`)
-      .join(' ')
-
-    const children = props?.children ? renderToStaticMarkup(props.children) : ''
-    return `<${tagName}${attrs ? ' ' + attrs : ''}>${children}</${tagName}>`
-  }
-
-  if (Array.isArray(element)) {
-    return element.map(renderToStaticMarkup).join('')
-  }
-
-  return ''
-}
-
-export const mdxComponents = {
-  pre: Pre,
-}

package/src/template/components/NotFound.tsx

@@ -1,28 +0,0 @@
-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/TestComponent.tsx

@@ -1,6 +0,0 @@
-import React from 'react'
-
-export const TestComponent: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  console.log('TestComponent rendered!')
-  return <div style={{ border: '2px solid red', padding: '10px' }}>TEST: {children}</div>
-}

package/src/template/components/ThemeToggle.tsx

@@ -1,21 +0,0 @@
-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/components/content/$$.ts

@@ -1,2 +0,0 @@
-export { Callout, Tabs } from '@radix-ui/themes'
-export { GraphQLDocumentWithSchema } from './GraphQLDocumentWithSchema.tsx'

package/src/template/components/content/GraphQLDocumentWithSchema.tsx

@@ -1,18 +0,0 @@
-import type { GraphQLSchema } from 'graphql'
-import React from 'react'
-import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
-import { GraphQLDocument } from '../../../lib/graphql-document/components/GraphQLDocument.tsx'
-import type { GraphQLDocumentProps } from '../../../lib/graphql-document/components/GraphQLDocument.tsx'
-
-/**
- * Wrapper component that provides schema from virtual module directly to GraphQLDocument
- * This bypasses the context issue with MDX components
- */
-export const GraphQLDocumentWithSchema: React.FC<Omit<GraphQLDocumentProps, 'schema'>> = (props) => {
-  const schema = PROJECT_DATA.schema?.versions[0]?.after
-  console.log('Template wrapper - schema:', schema ? 'EXISTS' : 'UNDEFINED')
-  console.log('Template wrapper - props:', props)
-  console.log('Template wrapper - PROJECT_DATA.schema:', PROJECT_DATA.schema)
-
-  return <GraphQLDocument {...props} schema={schema} />
-}

package/src/template/components/content/GraphQLDocumentWrapper.tsx

@@ -1,82 +0,0 @@
-import React from 'react'
-import { useNavigate } from 'react-router'
-import { GraphQLDocument } from '../../../lib/graphql-document/components/GraphQLDocument.tsx'
-import type { GraphQLDocumentProps } from '../../../lib/graphql-document/components/GraphQLDocument.tsx'
-import { highlightCode } from '../../../lib/shiki/shiki.ts'
-
-/**
- * Client-side wrapper that hydrates GraphQL documents with schema
- */
-export const GraphQLDocumentWithSchema: React.FC<Omit<GraphQLDocumentProps, 'schema'>> = (props) => {
-  try {
-    const [schema, setSchema] = React.useState<any>(null)
-    const [isClient, setIsClient] = React.useState(false)
-    const [highlightedHtml, setHighlightedHtml] = React.useState<string | null>(null)
-
-    React.useEffect(() => {
-      setIsClient(true)
-
-      // Highlight the code
-      if (typeof props.children === 'string') {
-        highlightCode({
-          code: props.children,
-          lang: 'graphql',
-          theme: 'light', // You can make this dynamic based on theme
-        }).then(html => {
-          setHighlightedHtml(html)
-        }).catch(err => {
-          console.error('Failed to highlight code:', err)
-        })
-      }
-
-      // Access virtual module only on client side
-      if (typeof window !== 'undefined') {
-        import('virtual:polen/project/data.jsonsuper').then(PROJECT_DATA => {
-          const s = PROJECT_DATA.default?.schema?.versions?.[0]?.after
-          if (s) {
-            setSchema(s)
-          }
-        }).catch(err => {
-          console.error('Failed to load schema:', err)
-        })
-      }
-    }, [props.children])
-
-    // During SSR, render a simple code block
-    if (!isClient) {
-      return (
-        <div data-testid='graphql-document' className='graphql-document graphql-document-static'>
-          <pre className='shiki shiki-themes github-light tokyo-night'>
-            <code className="language-graphql">{props.children}</code>
-          </pre>
-        </div>
-      )
-    }
-
-    // During client render, use the full component
-    // Pass a custom navigate function that doesn't require router
-    const handleNavigate = (url: string) => {
-      if (typeof window !== 'undefined') {
-        window.location.href = url
-      }
-    }
-
-    return (
-      <div data-testid='graphql-document'>
-        <GraphQLDocument
-          {...props}
-          schema={schema}
-          highlightedHtml={highlightedHtml || undefined}
-          options={{
-            ...props.options,
-            onNavigate: handleNavigate,
-            debug: false, // Disable debug mode for shipping
-          }}
-        />
-      </div>
-    )
-  } catch (err) {
-    console.error('GraphQLDocumentWithSchema error:', err)
-    return <div>Error rendering GraphQL document</div>
-  }
-}

package/src/template/contexts/ThemeContext.tsx

@@ -1,60 +0,0 @@
-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
-}