@jmruthers/pace-core 0.5.53 → 0.5.55

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

@@ -0,0 +1,1022 @@
+# 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
+
+**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