@jmruthers/pace-core 0.5.180 → 0.5.182

package/docs/implementation-guides/public-pages-advanced.md

@@ -1,1038 +0,0 @@
----
-lastUpdated: 2025-10-29T22:43:00+11:00
-version: 0.5.76
-reviewedBy: content-audit
----
-
-# Public Pages System (Advanced)
-
-> **🌐 Public Event Pages** | [← Back to Documentation](../README.md) | [↑ Table of Contents](#table-of-contents)
-
-Complete guide to implementing public pages without authentication, including event logos, caching strategies, and SEO optimization.
-
-## Overview
-
-PACE Core provides a comprehensive public pages system for:
-- **Public Event Pages** - Event information without authentication
-- **Event Logos** - Dynamic logo loading and caching
-- **Public Data Access** - Secure public data retrieval
-- **SEO Optimization** - Search engine friendly pages
-- **Performance Caching** - Optimized data loading
-- **Error Handling** - Graceful degradation for public users
-
-## Architecture
-
-```mermaid
-graph TD
-    A[Public Page Request] --> B[PublicPageLayout]
-    B --> C[PublicPageHeader]
-    C --> D[EventLogo Component]
-    D --> E[usePublicEvent Hook]
-    E --> F[Public Data Cache]
-    F --> G[Supabase Query]
-    G --> H[RLS Policies]
-    H --> I[Public Data]
-    E --> J[usePublicEventLogo Hook]
-    J --> K[Logo Cache]
-    K --> L[Storage Bucket]
-```
-
-## Quick Start
-
-### 1. Basic Public Event Page
-
-```tsx
-import { 
-  PublicPageLayout, 
-  PublicPageHeader, 
-  EventLogo,
-  usePublicEvent 
-} from '@jmruthers/pace-core';
-
-function PublicEventPage({ eventId }: { eventId: string }) {
-  const { 
-    event, 
-    loading, 
-    error, 
-    refetch 
-  } = usePublicEvent(eventId);
-
-  if (loading) return <div>Loading event...</div>;
-  if (error) return <div>Error loading event: {error.message}</div>;
-  if (!event) return <div>Event not found</div>;
-
-  return (
-    <PublicPageLayout>
-      <PublicPageHeader
-        title={event.name}
-        description={event.description}
-        logo={<EventLogo eventId={eventId} size="large" />}
-      />
-      
-      <main className="container mx-auto px-4 py-8">
-        <h1>{event.name}</h1>
-        <p>{event.description}</p>
-        <p>Date: {new Date(event.start_date).toLocaleDateString()}</p>
-        <p>Location: {event.location}</p>
-      </main>
-    </PublicPageLayout>
-  );
-}
-```
-
-### 2. Public Event with Logo
-
-```tsx
-import { 
-  PublicPageLayout, 
-  EventLogo,
-  usePublicEvent,
-  usePublicEventLogo 
-} from '@jmruthers/pace-core';
-
-function EventWithLogo({ eventId }: { eventId: string }) {
-  const { event, loading: eventLoading } = usePublicEvent(eventId);
-  const { 
-    logoUrl, 
-    loading: logoLoading, 
-    error: logoError 
-  } = usePublicEventLogo(eventId, 'large');
-
-  return (
-    <PublicPageLayout>
-      <header className="bg-main-50 py-8">
-        <div className="container mx-auto px-4 text-center">
-          {logoLoading ? (
-            <div className="animate-pulse bg-sec-200 h-32 w-32 mx-auto rounded"></div>
-          ) : logoError ? (
-            <div className="text-sec-500">Logo unavailable</div>
-          ) : (
-            <EventLogo 
-              eventId={eventId} 
-              size="large"
-              className="mx-auto"
-            />
-          )}
-          
-          {event && (
-            <div className="mt-4">
-              <h1 className="text-3xl font-bold text-main-900">
-                {event.name}
-              </h1>
-              <p className="text-main-700 mt-2">
-                {event.description}
-              </p>
-            </div>
-          )}
-        </div>
-      </header>
-    </PublicPageLayout>
-  );
-}
-```
-
-## Components
-
-### PublicPageLayout
-
-A layout component specifically designed for public pages without authentication.
-
-#### Props
-
-```typescript
-interface PublicPageLayoutProps {
-  children: React.ReactNode;
-  className?: string;
-  showHeader?: boolean;
-  showFooter?: boolean;
-  errorBoundary?: boolean;
-}
-```
-
-#### Usage Examples
-
-**Basic Layout:**
-```tsx
-<PublicPageLayout>
-  <h1>Public Event Page</h1>
-  <p>This page is accessible without authentication</p>
-</PublicPageLayout>
-```
-
-**Custom Styling:**
-```tsx
-<PublicPageLayout 
-  className="min-h-screen bg-gradient-to-br from-main-50 to-sec-50"
-  showHeader={true}
-  showFooter={true}
->
-  <div className="container mx-auto px-4 py-8">
-    <h1>Custom Public Page</h1>
-  </div>
-</PublicPageLayout>
-```
-
-**With Error Boundary:**
-```tsx
-<PublicPageLayout errorBoundary={true}>
-  <PublicEventContent eventId={eventId} />
-</PublicPageLayout>
-```
-
-### PublicPageHeader
-
-A header component for public pages with event branding and navigation.
-
-#### Props
-
-```typescript
-interface PublicPageHeaderProps {
-  title: string;
-  description?: string;
-  logo?: React.ReactNode;
-  navigation?: NavigationItem[];
-  className?: string;
-}
-```
-
-#### Usage Examples
-
-**Basic Header:**
-```tsx
-<PublicPageHeader
-  title="Event Name"
-  description="Event description"
-  logo={<EventLogo eventId={eventId} />}
-/>
-```
-
-**With Navigation:**
-```tsx
-<PublicPageHeader
-  title="Event Name"
-  description="Event description"
-  logo={<EventLogo eventId={eventId} />}
-  navigation={[
-    { label: 'Home', href: '/' },
-    { label: 'Schedule', href: '/schedule' },
-    { label: 'Speakers', href: '/speakers' }
-  ]}
-/>
-```
-
-### EventLogo
-
-A component for displaying event logos with automatic loading and caching.
-
-#### Props
-
-```typescript
-interface EventLogoProps {
-  eventId: string;
-  size?: 'small' | 'medium' | 'large' | 'xlarge';
-  variant?: 'default' | 'square' | 'wide';
-  className?: string;
-  fallback?: React.ReactNode;
-  showLoading?: boolean;
-}
-```
-
-#### Usage Examples
-
-**Basic Logo:**
-```tsx
-<EventLogo eventId={eventId} size="medium" />
-```
-
-**Custom Styling:**
-```tsx
-<EventLogo 
-  eventId={eventId} 
-  size="large"
-  variant="square"
-  className="rounded-lg shadow-lg"
-/>
-```
-
-**With Fallback:**
-```tsx
-<EventLogo 
-  eventId={eventId} 
-  size="medium"
-  fallback={
-    <div className="bg-sec-200 text-sec-500 p-4 rounded">
-      No Logo Available
-    </div>
-  }
-/>
-```
-
-## Hooks
-
-### usePublicEvent
-
-Hook for fetching public event data without authentication.
-
-#### Interface
-
-```typescript
-interface UsePublicEventReturn {
-  event: PublicEvent | null;
-  loading: boolean;
-  error: Error | null;
-  refetch: () => Promise<void>;
-  clearCache: () => void;
-}
-
-interface PublicEvent {
-  id: string;
-  name: string;
-  description: string;
-  start_date: string;
-  end_date: string;
-  location: string;
-  status: 'draft' | 'published' | 'cancelled';
-  public_url?: string;
-  logo_url?: string;
-  metadata?: Record<string, any>;
-}
-```
-
-#### Usage Examples
-
-**Basic Event Loading:**
-```tsx
-import { usePublicEvent } from '@jmruthers/pace-core';
-
-function EventPage({ eventId }: { eventId: string }) {
-  const { event, loading, error, refetch } = usePublicEvent(eventId);
-
-  if (loading) return <div>Loading event...</div>;
-  if (error) return <div>Error: {error.message}</div>;
-  if (!event) return <div>Event not found</div>;
-
-  return (
-    <div>
-      <h1>{event.name}</h1>
-      <p>{event.description}</p>
-      <p>Date: {new Date(event.start_date).toLocaleDateString()}</p>
-      <p>Location: {event.location}</p>
-      
-      <Button onClick={refetch}>Refresh Event</Button>
-    </div>
-  );
-}
-```
-
-**With Error Handling:**
-```tsx
-import { usePublicEvent } from '@jmruthers/pace-core';
-
-function EventWithErrorHandling({ eventId }: { eventId: string }) {
-  const { event, loading, error, refetch } = usePublicEvent(eventId);
-
-  const handleRetry = async () => {
-    try {
-      await refetch();
-    } catch (err) {
-      console.error('Failed to refetch event:', err);
-    }
-  };
-
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center min-h-64">
-        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-main-600"></div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="text-center py-8">
-        <h2 className="text-xl font-semibold text-sec-800 mb-2">
-          Unable to load event
-        </h2>
-        <p className="text-sec-600 mb-4">{error.message}</p>
-        <Button onClick={handleRetry}>Try Again</Button>
-      </div>
-    );
-  }
-
-  if (!event) {
-    return (
-      <div className="text-center py-8">
-        <h2 className="text-xl font-semibold text-sec-800">
-          Event not found
-        </h2>
-        <p className="text-sec-600">
-          The event you're looking for doesn't exist or isn't public.
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      <h1>{event.name}</h1>
-      <p>{event.description}</p>
-      {/* Event content */}
-    </div>
-  );
-}
-```
-
-### usePublicEventLogo
-
-Hook for loading and caching event logos.
-
-#### Interface
-
-```typescript
-interface UsePublicEventLogoReturn {
-  logoUrl: string | null;
-  loading: boolean;
-  error: Error | null;
-  refetch: () => Promise<void>;
-  clearCache: () => void;
-}
-
-interface LogoSize {
-  small: 'w-8 h-8';
-  medium: 'w-16 h-16';
-  large: 'w-32 h-32';
-  xlarge: 'w-48 h-48';
-}
-```
-
-#### Usage Examples
-
-> **Storage path formats**
->
-> When configuring `event_logo` for an event, Pace supports multiple formats:
->
-> - A fully qualified `https://` URL will be used directly.
-> - A storage path like `public-files/org-123/logo.png` automatically resolves against the standard buckets configured via `pace-core`.
-> - If your deployment stores logos in a different bucket, prefix the path with the bucket name using `custombucket/org-123/logo.png` (alphanumeric names) or `custom-bucket::org-123/logo.png` (bucket names containing hyphens).
->
-> The double colon form helps when your folders start with numbers (for example `2024/`), ensuring they are not mistaken for bucket names.
-
-**Basic Logo Loading:**
-```tsx
-import { usePublicEventLogo } from '@jmruthers/pace-core';
-
-function EventLogoDisplay({ eventId }: { eventId: string }) {
-  const { logoUrl, loading, error } = usePublicEventLogo(eventId, 'large');
-
-  if (loading) {
-    return <div className="animate-pulse bg-sec-200 w-32 h-32 rounded"></div>;
-  }
-
-  if (error) {
-    return <div className="text-sec-500">Logo unavailable</div>;
-  }
-
-  if (!logoUrl) {
-    return <div className="bg-sec-200 text-sec-500 p-4 rounded">No logo</div>;
-  }
-
-  return (
-    <img 
-      src={logoUrl} 
-      alt="Event logo" 
-      className="w-32 h-32 object-contain"
-    />
-  );
-}
-```
-
-**With Caching Control:**
-```tsx
-import { usePublicEventLogo } from '@jmruthers/pace-core';
-
-function LogoWithCacheControl({ eventId }: { eventId: string }) {
-  const { 
-    logoUrl, 
-    loading, 
-    error, 
-    refetch, 
-    clearCache 
-  } = usePublicEventLogo(eventId, 'medium');
-
-  const handleRefresh = async () => {
-    await refetch();
-  };
-
-  const handleClearCache = () => {
-    clearCache();
-  };
-
-  return (
-    <div className="space-y-4">
-      {loading && <div>Loading logo...</div>}
-      {error && <div>Error: {error.message}</div>}
-      {logoUrl && (
-        <img 
-          src={logoUrl} 
-          alt="Event logo" 
-          className="w-16 h-16 object-contain"
-        />
-      )}
-      
-      <div className="space-x-2">
-        <Button onClick={handleRefresh} size="sm">
-          Refresh Logo
-        </Button>
-        <Button onClick={handleClearCache} size="sm" variant="outline">
-          Clear Cache
-        </Button>
-      </div>
-    </div>
-  );
-}
-```
-
-## Caching Strategies
-
-### Client-Side Caching
-
-```tsx
-import { usePublicEvent, clearPublicEventCache } from '@jmruthers/pace-core';
-
-function CachedEventPage({ eventId }: { eventId: string }) {
-  const { event, loading } = usePublicEvent(eventId);
-
-  // Cache management
-  const handleClearCache = () => {
-    clearPublicEventCache();
-    console.log('Event cache cleared');
-  };
-
-  const handlePreloadEvent = async (newEventId: string) => {
-    // Preload another event
-    const { event: preloadedEvent } = usePublicEvent(newEventId);
-    console.log('Preloaded event:', preloadedEvent);
-  };
-
-  return (
-    <div>
-      <h1>{event?.name}</h1>
-      
-      <div className="space-x-2">
-        <Button onClick={handleClearCache}>
-          Clear Cache
-        </Button>
-        <Button onClick={() => handlePreloadEvent('other-event-id')}>
-          Preload Other Event
-        </Button>
-      </div>
-    </div>
-  );
-}
-```
-
-### Cache Statistics
-
-```tsx
-import { getPublicEventCacheStats, getPublicLogoCacheStats } from '@jmruthers/pace-core';
-
-function CacheStats() {
-  const eventStats = getPublicEventCacheStats();
-  const logoStats = getPublicLogoCacheStats();
-
-  return (
-    <div className="bg-sec-50 p-4 rounded">
-      <h3>Cache Statistics</h3>
-      <div className="grid grid-cols-2 gap-4">
-        <div>
-          <h4>Event Cache</h4>
-          <p>Entries: {eventStats.entryCount}</p>
-          <p>Hit Rate: {eventStats.hitRate}%</p>
-          <p>Memory Usage: {eventStats.memoryUsage} bytes</p>
-        </div>
-        <div>
-          <h4>Logo Cache</h4>
-          <p>Entries: {logoStats.entryCount}</p>
-          <p>Hit Rate: {logoStats.hitRate}%</p>
-          <p>Memory Usage: {logoStats.memoryUsage} bytes</p>
-        </div>
-      </div>
-    </div>
-  );
-}
-```
-
-## SEO Optimization
-
-### Meta Tags and Structured Data
-
-```tsx
-import { usePublicEvent } from '@jmruthers/pace-core';
-
-function SEOEventPage({ eventId }: { eventId: string }) {
-  const { event } = usePublicEvent(eventId);
-
-  // Generate structured data for search engines
-  const structuredData = event ? {
-    "@context": "https://schema.org",
-    "@type": "Event",
-    "name": event.name,
-    "description": event.description,
-    "startDate": event.start_date,
-    "endDate": event.end_date,
-    "location": {
-      "@type": "Place",
-      "name": event.location
-    },
-    "url": event.public_url,
-    "image": event.logo_url
-  } : null;
-
-  return (
-    <>
-      {/* Meta tags */}
-      <head>
-        <title>{event?.name || 'Event'}</title>
-        <meta name="description" content={event?.description} />
-        <meta property="og:title" content={event?.name} />
-        <meta property="og:description" content={event?.description} />
-        <meta property="og:image" content={event?.logo_url} />
-        <meta property="og:type" content="event" />
-        <meta name="twitter:card" content="summary_large_image" />
-        
-        {/* Structured data */}
-        {structuredData && (
-          <script
-            type="application/ld+json"
-            dangerouslySetInnerHTML={{
-              __html: JSON.stringify(structuredData)
-            }}
-          />
-        )}
-      </head>
-
-      <main>
-        <h1>{event?.name}</h1>
-        <p>{event?.description}</p>
-        {/* Event content */}
-      </main>
-    </>
-  );
-}
-```
-
-### Dynamic Routes and SSG
-
-```tsx
-// pages/events/[eventId].tsx
-import { usePublicEvent } from '@jmruthers/pace-core';
-
-export async function getStaticPaths() {
-  // Generate static paths for all public events
-  const { data: events } = await supabase
-    .from('events')
-    .select('id')
-    .eq('status', 'published')
-    .eq('is_public', true);
-
-  const paths = events?.map(event => ({
-    params: { eventId: event.id }
-  })) || [];
-
-  return {
-    paths,
-    fallback: 'blocking'
-  };
-}
-
-export async function getStaticProps({ params }: { params: { eventId: string } }) {
-  // Pre-fetch event data at build time
-  const { data: event } = await supabase
-    .from('events')
-    .select('*')
-    .eq('id', params.eventId)
-    .eq('status', 'published')
-    .eq('is_public', true)
-    .single();
-
-  return {
-    props: {
-      event,
-      eventId: params.eventId
-    },
-    revalidate: 3600 // Revalidate every hour
-  };
-}
-
-function EventPage({ event, eventId }: { event: any; eventId: string }) {
-  const { event: liveEvent, loading } = usePublicEvent(eventId);
-
-  // Use pre-fetched data initially, then live data
-  const displayEvent = liveEvent || event;
-
-  return (
-    <div>
-      <h1>{displayEvent?.name}</h1>
-      <p>{displayEvent?.description}</p>
-      {loading && <div>Updating...</div>}
-    </div>
-  );
-}
-```
-
-## Error Handling
-
-### Graceful Degradation
-
-```tsx
-import { usePublicEvent, usePublicEventLogo } from '@jmruthers/pace-core';
-
-function RobustEventPage({ eventId }: { eventId: string }) {
-  const { 
-    event, 
-    loading: eventLoading, 
-    error: eventError 
-  } = usePublicEvent(eventId);
-  
-  const { 
-    logoUrl, 
-    loading: logoLoading, 
-    error: logoError 
-  } = usePublicEventLogo(eventId, 'large');
-
-  // Graceful degradation for missing data
-  const displayName = event?.name || 'Event';
-  const displayDescription = event?.description || 'Event details coming soon';
-  const displayLogo = logoUrl || '/default-event-logo.png';
-
-  if (eventLoading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-main-600 mx-auto"></div>
-          <p className="mt-4 text-sec-600">Loading event...</p>
-        </div>
-      </div>
-    );
-  }
-
-  if (eventError) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div className="text-center">
-          <h1 className="text-2xl font-bold text-sec-800 mb-2">
-            Unable to load event
-          </h1>
-          <p className="text-sec-600 mb-4">
-            {eventError.message}
-          </p>
-          <Button onClick={() => window.location.reload()}>
-            Try Again
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <PublicPageLayout>
-      <header className="bg-main-50 py-8">
-        <div className="container mx-auto px-4 text-center">
-          {logoLoading ? (
-            <div className="animate-pulse bg-sec-200 h-32 w-32 mx-auto rounded"></div>
-          ) : logoError ? (
-            <div className="bg-sec-200 text-sec-500 h-32 w-32 mx-auto rounded flex items-center justify-center">
-              No Logo
-            </div>
-          ) : (
-            <img 
-              src={displayLogo} 
-              alt={`${displayName} logo`}
-              className="h-32 w-32 mx-auto object-contain"
-            />
-          )}
-          
-          <h1 className="text-3xl font-bold text-main-900 mt-4">
-            {displayName}
-          </h1>
-          <p className="text-main-700 mt-2">
-            {displayDescription}
-          </p>
-        </div>
-      </header>
-      
-      <main className="container mx-auto px-4 py-8">
-        {/* Event content */}
-      </main>
-    </PublicPageLayout>
-  );
-}
-```
-
-## Performance Optimization
-
-### Lazy Loading
-
-```tsx
-import { lazy, Suspense } from 'react';
-import { usePublicEvent } from '@jmruthers/pace-core';
-
-// Lazy load heavy components
-const EventSchedule = lazy(() => import('./EventSchedule'));
-const EventSpeakers = lazy(() => import('./EventSpeakers'));
-
-function OptimizedEventPage({ eventId }: { eventId: string }) {
-  const { event, loading } = usePublicEvent(eventId);
-
-  if (loading) return <div>Loading...</div>;
-  if (!event) return <div>Event not found</div>;
-
-  return (
-    <PublicPageLayout>
-      <header>
-        <h1>{event.name}</h1>
-        <p>{event.description}</p>
-      </header>
-      
-      <main>
-        {/* Critical content loads immediately */}
-        <section>
-          <h2>Event Details</h2>
-          <p>Date: {new Date(event.start_date).toLocaleDateString()}</p>
-          <p>Location: {event.location}</p>
-        </section>
-        
-        {/* Non-critical content loads lazily */}
-        <Suspense fallback={<div>Loading schedule...</div>}>
-          <EventSchedule eventId={eventId} />
-        </Suspense>
-        
-        <Suspense fallback={<div>Loading speakers...</div>}>
-          <EventSpeakers eventId={eventId} />
-        </Suspense>
-      </main>
-    </PublicPageLayout>
-  );
-}
-```
-
-### Image Optimization
-
-```tsx
-import { EventLogo } from '@jmruthers/pace-core';
-
-function OptimizedEventLogo({ eventId }: { eventId: string }) {
-  return (
-    <EventLogo 
-      eventId={eventId}
-      size="large"
-      className="w-full h-auto max-w-md mx-auto"
-      // The component handles:
-      // - WebP format when supported
-      // - Responsive sizing
-      // - Lazy loading
-      // - Error fallbacks
-    />
-  );
-}
-```
-
-## Complete Examples
-
-### Full Event Landing Page
-
-```tsx
-import { 
-  PublicPageLayout, 
-  PublicPageHeader, 
-  EventLogo,
-  usePublicEvent,
-  usePublicEventLogo 
-} from '@jmruthers/pace-core';
-
-function EventLandingPage({ eventId }: { eventId: string }) {
-  const { event, loading: eventLoading, error: eventError } = usePublicEvent(eventId);
-  const { logoUrl, loading: logoLoading } = usePublicEventLogo(eventId, 'xlarge');
-
-  if (eventLoading) {
-    return (
-      <PublicPageLayout>
-        <div className="min-h-screen flex items-center justify-center">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-main-600"></div>
-        </div>
-      </PublicPageLayout>
-    );
-  }
-
-  if (eventError || !event) {
-    return (
-      <PublicPageLayout>
-        <div className="min-h-screen flex items-center justify-center">
-          <div className="text-center">
-            <h1 className="text-2xl font-bold text-sec-800 mb-2">
-              Event Not Found
-            </h1>
-            <p className="text-sec-600">
-              The event you're looking for doesn't exist or isn't public.
-            </p>
-          </div>
-        </div>
-      </PublicPageLayout>
-    );
-  }
-
-  return (
-    <PublicPageLayout>
-      <PublicPageHeader
-        title={event.name}
-        description={event.description}
-        logo={
-          logoLoading ? (
-            <div className="animate-pulse bg-sec-200 h-48 w-48 rounded"></div>
-          ) : (
-            <EventLogo eventId={eventId} size="xlarge" />
-          )
-        }
-        navigation={[
-          { label: 'Home', href: '/' },
-          { label: 'Schedule', href: '#schedule' },
-          { label: 'Speakers', href: '#speakers' },
-          { label: 'Register', href: '#register' }
-        ]}
-      />
-      
-      <main className="container mx-auto px-4 py-8">
-        {/* Hero Section */}
-        <section className="text-center py-16">
-          <h1 className="text-4xl font-bold text-main-900 mb-4">
-            {event.name}
-          </h1>
-          <p className="text-xl text-main-700 mb-8 max-w-3xl mx-auto">
-            {event.description}
-          </p>
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <Button size="lg" className="bg-main-600 text-main-50">
-              Register Now
-            </Button>
-            <Button size="lg" variant="outline">
-              View Schedule
-            </Button>
-          </div>
-        </section>
-
-        {/* Event Details */}
-        <section className="py-16">
-          <div className="grid md:grid-cols-2 gap-8">
-            <div>
-              <h2 className="text-2xl font-bold text-main-900 mb-4">
-                Event Information
-              </h2>
-              <div className="space-y-4">
-                <div>
-                  <h3 className="font-semibold text-main-800">Date</h3>
-                  <p className="text-main-600">
-                    {new Date(event.start_date).toLocaleDateString('en-US', {
-                      weekday: 'long',
-                      year: 'numeric',
-                      month: 'long',
-                      day: 'numeric'
-                    })}
-                  </p>
-                </div>
-                <div>
-                  <h3 className="font-semibold text-main-800">Location</h3>
-                  <p className="text-main-600">{event.location}</p>
-                </div>
-                <div>
-                  <h3 className="font-semibold text-main-800">Status</h3>
-                  <span className={`px-3 py-1 rounded-full text-sm ${
-                    event.status === 'published' 
-                      ? 'bg-main-100 text-main-800' 
-                      : 'bg-sec-100 text-sec-800'
-                  }`}>
-                    {event.status}
-                  </span>
-                </div>
-              </div>
-            </div>
-            
-            <div>
-              <h2 className="text-2xl font-bold text-main-900 mb-4">
-                Event Logo
-              </h2>
-              {logoLoading ? (
-                <div className="animate-pulse bg-sec-200 h-48 w-48 rounded"></div>
-              ) : (
-                <EventLogo 
-                  eventId={eventId} 
-                  size="large"
-                  className="rounded-lg shadow-lg"
-                />
-              )}
-            </div>
-          </div>
-        </section>
-
-        {/* Additional sections */}
-        <section id="schedule" className="py-16">
-          <h2 className="text-2xl font-bold text-main-900 mb-8">Schedule</h2>
-          {/* Schedule content */}
-        </section>
-
-        <section id="speakers" className="py-16">
-          <h2 className="text-2xl font-bold text-main-900 mb-8">Speakers</h2>
-          {/* Speakers content */}
-        </section>
-      </main>
-    </PublicPageLayout>
-  );
-}
-```
-
-## Troubleshooting
-
-### Common Issues
-
-**Issue: Event not loading**
-- Check that event exists and is published
-- Verify `is_public` flag is set to true
-- Check RLS policies allow public access
-
-**Issue: Logo not displaying**
-- Verify logo file exists in storage bucket
-- Check storage bucket policies
-- Ensure logo URL is correct
-
-**Issue: Cache not working**
-- Check browser storage permissions
-- Verify cache configuration
-- Clear browser cache and test
-
-### Debug Mode
-
-```tsx
-import { usePublicEvent, usePublicEventLogo } from '@jmruthers/pace-core';
-
-function DebugPublicPage({ eventId }: { eventId: string }) {
-  const { event, loading, error } = usePublicEvent(eventId);
-  const { logoUrl, loading: logoLoading, error: logoError } = usePublicEventLogo(eventId, 'large');
-
-  console.log('Event data:', { event, loading, error });
-  console.log('Logo data:', { logoUrl, logoLoading, logoError });
-
-  return (
-    <div>
-      <h1>Debug Information</h1>
-      <pre>{JSON.stringify({ event, loading, error }, null, 2)}</pre>
-      <pre>{JSON.stringify({ logoUrl, logoLoading, logoError }, null, 2)}</pre>
-    </div>
-  );
-}
-```
-
-## Next Steps
-
-- **[Public Data Access](../api-reference/hooks.md#public-hooks)** - Public data hooks
-- **[SEO Best Practices](../best-practices/seo.md)** - Search engine optimization
-- **[Performance Optimization](./performance.md)** - Large page optimization
-- **[Caching Strategies](../best-practices/caching.md)** - Advanced caching patterns