blog uses lex-cli types

README.md

···
-# ATProto Personal Website
+# ATproto Personal Website
 
-A personal website powered by ATProto, featuring real-time streaming, repository browsing, and type generation.
+A personal website built with Astro that uses your ATproto repository as a CMS. Features full type safety, real-time updates, and automatic component routing.
 
 ## Features
 
-### 🚀 Real-time Streaming
-- **Jetstream Test** (`/jetstream-test`): Real-time ATProto streaming with DID filtering
-- Uses the same jetstream endpoint as atptools for low-latency updates
-- Filters by your configured DID for personalized streaming
+- **Type-Safe Content**: Automatic TypeScript type generation from ATproto lexicon schemas
+- **Real-Time Updates**: Live content streaming via ATproto Jetstream
+- **Component Registry**: Type-safe mapping of lexicon types to Astro components
+- **Dynamic Routing**: Automatic component selection based on record types
+- **Blog Support**: Full blog post rendering with markdown support
+- **Gallery Display**: Image galleries with EXIF data and hover effects
+- **Pagination**: Fetch more than 100 records with cursor-based pagination
 
-### 🌐 Repository Browsing
-- **ATProto Browser Test** (`/atproto-browser-test`): Browse any ATProto account's collections and records
-- Discover all collections in a repository
-- View records from specific collections
-- Similar functionality to atptools
+## Quick Start
+
+1. **Configure Environment**:
+   ```bash
+   cp env.example .env
+   # Edit .env with your ATproto handle and DID
+   ```
+
+2. **Install Dependencies**:
+   ```bash
+   npm install
+   ```
+
+3. **Add Lexicon Schemas**:
+   - Place JSON lexicon schemas in `src/lexicons/`
+   - Update `src/lib/config/site.ts` with your lexicon sources
+   - Run `npm run gen:types` to generate TypeScript types
 
-### 📝 Type Generation
-- **Lexicon Generator Test** (`/lexicon-generator-test`): Generate TypeScript types for all lexicons in your repository
-- Automatically discovers all lexicon types from your configured account
-- Generates proper TypeScript interfaces and helper functions
-- Copy to clipboard or download as `.ts` file
+4. **Create Components**:
+   - Create Astro components in `src/components/content/`
+   - Register them in `src/lib/components/registry.ts`
+   - Use `ContentDisplay.astro` for automatic routing
 
-### 🖼️ Image Galleries
-- **Image Galleries** (`/galleries`): View grain.social image galleries and photo collections
+5. **Start Development**:
+   ```bash
+   npm run dev
+   ```
 
-## Configuration
+## Lexicon Integration
 
-The site is configured to use your ATProto account:
+The system provides full type safety for ATproto lexicons:
 
-- **Handle**: `tynanpurdy.com`
-- **DID**: `did:plc:6ayddqghxhciedbaofoxkcbs`
-- **PDS**: `https://bsky.social`
+1. **Schema Files**: JSON lexicon definitions in `src/lexicons/`
+2. **Type Generation**: Automatic TypeScript type generation
+3. **Component Registry**: Type-safe mapping of lexicon types to components
+4. **Content Display**: Dynamic component routing
 
-## Development
+See [LEXICON_INTEGRATION.md](./LEXICON_INTEGRATION.md) for detailed instructions.
 
-```bash
-npm install
-npm run dev
-```
+## Available Scripts
 
-Visit `http://localhost:4324` to see the site.
+- `npm run dev` - Start development server
+- `npm run build` - Build for production
+- `npm run preview` - Preview production build
+- `npm run discover` - Discover collections from your repo
+- `npm run gen:types` - Generate TypeScript types from lexicon schemas
 
 ## Project Structure
 
 ```
 src/
-├── lib/atproto/
-│   ├── atproto-browser.ts    # Repository browsing functionality
-│   ├── jetstream-client.ts   # Real-time streaming client
-│   └── client.ts             # Basic ATProto client
-├── pages/
-│   ├── index.astro           # Homepage with navigation
-│   ├── jetstream-test.astro  # Real-time streaming test
-│   ├── atproto-browser-test.astro  # Repository browsing test
-│   ├── lexicon-generator-test.astro # Type generation test
-│   └── galleries.astro       # Image galleries
-└── components/
-    └── content/              # Content display components
+├── components/content/     # Content display components
+├── lib/
+│   ├── atproto/          # ATproto client and utilities
+│   ├── components/        # Component registry
+│   ├── config/           # Site configuration
+│   ├── generated/        # Generated TypeScript types
+│   ├── services/         # Content services
+│   └── types/           # Type definitions
+├── lexicons/            # Lexicon schema files
+└── pages/              # Astro pages
 ```
 
-## Technologies
+## Configuration
 
-- **Astro**: Web framework
-- **ATProto API**: For repository access and streaming
-- **TypeScript**: For type safety
-- **Tailwind CSS**: For styling
+The system is configured via environment variables and `src/lib/config/site.ts`:
+
+- `ATPROTO_HANDLE` - Your Bluesky handle
+- `ATPROTO_DID` - Your DID (optional, auto-resolved)
+- `SITE_TITLE` - Site title
+- `SITE_DESCRIPTION` - Site description
+- `SITE_AUTHOR` - Site author
+
+## Adding New Content Types
+
+1. Create a lexicon schema in `src/lexicons/`
+2. Add it to `lexiconSources` in site config
+3. Run `npm run gen:types`
+4. Create a component in `src/components/content/`
+5. Register it in `src/lib/components/registry.ts`
+
+The system will automatically route records to your components with full type safety.
 
-## Inspired By
+## Development
 
-This project takes inspiration from [atptools](https://github.com/espeon/atptools) for repository browsing and jetstream streaming approaches.
+- Debug mode shows component routing information
+- Generic fallback for unknown record types
+- Real-time updates via Jetstream
+- Type-safe component registry
+- Automatic type generation from schemas
+
+## License
+
+MIT

package-lock.json

···
         "tailwindcss": "^4.1.11",
         "tsx": "^4.19.2",
         "typescript": "^5.9.2"
+      },
+      "devDependencies": {
+        "@atproto/lex-cli": "^0.9.1"
       }
     },
     "node_modules/@ampproject/remapping": {
···
         "multiformats": "^9.9.0",
         "uint8arrays": "3.0.0",
         "zod": "^3.23.8"
+      }
+    },
+    "node_modules/@atproto/lex-cli": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@atproto/lex-cli/-/lex-cli-0.9.1.tgz",
+      "integrity": "sha512-ftcUZd8rElHeUJq6pTcQkURnTEe7woCF4I1NK3j5GpT/itacEZtcppabjy5o2aUsbktZsALj3ch3xm7ZZ+Zp0w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@atproto/lexicon": "^0.4.12",
+        "@atproto/syntax": "^0.4.0",
+        "chalk": "^4.1.2",
+        "commander": "^9.4.0",
+        "prettier": "^3.2.5",
+        "ts-morph": "^24.0.0",
+        "yesno": "^0.4.0",
+        "zod": "^3.23.8"
+      },
+      "bin": {
+        "lex": "dist/index.js"
+      },
+      "engines": {
+        "node": ">=18.7.0"
+      }
+    },
+    "node_modules/@atproto/lex-cli/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@atproto/lex-cli/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
     "node_modules/@atproto/lexicon": {
···
         "vite": "^5.2.0 || ^6 || ^7"
       }
     },
+    "node_modules/@ts-morph/common": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/@ts-morph/common/-/common-0.25.0.tgz",
+      "integrity": "sha512-kMnZz+vGGHi4GoHnLmMhGNjm44kGtKUXGnOvrKmMwAuvNjM/PgKVGfUnL7IDvK7Jb2QQ82jq3Zmp04Gy+r3Dkg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minimatch": "^9.0.4",
+        "path-browserify": "^1.0.1",
+        "tinyglobby": "^0.2.9"
+      }
+    },
     "node_modules/@types/debug": {
       "version": "4.1.12",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
···
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/base-64": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/base-64/-/base-64-1.0.0.tgz",
···
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
     "node_modules/braces": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
···
         "node": ">=6"
       }
     },
+    "node_modules/code-block-writer": {
+      "version": "13.0.3",
+      "resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-13.0.3.tgz",
+      "integrity": "sha512-Oofo0pq3IKnsFtuHqSF7TqBfr71aeyZDVJ0HpmqB7FBM2qEigL0iPONSCZSO9pE9dZTAxANe5XHG9Uy0YMv8cg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/color": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
···
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/commander": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
+      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || >=14"
       }
     },
     "node_modules/common-ancestor-path": {
···
         "radix3": "^1.1.2",
         "ufo": "^1.6.1",
         "uncrypto": "^0.1.3"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
       }
     },
     "node_modules/hast-util-from-html": {
···
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/minipass": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
···
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
       "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
···
         "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.1.11",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.11.tgz",
···
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/ts-morph": {
+      "version": "24.0.0",
+      "resolved": "https://registry.npmjs.org/ts-morph/-/ts-morph-24.0.0.tgz",
+      "integrity": "sha512-2OAOg/Ob5yx9Et7ZX4CvTCc0UFoZHwLEJ+dpDPSUi5TgwwlTlX47w+iFRrEwzUZwYACjq83cgjS/Da50Ga37uw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@ts-morph/common": "~0.25.0",
+        "code-block-writer": "^13.0.3"
       }
     },
     "node_modules/tsconfck": {
···
       "engines": {
         "node": ">=8"
       }
+    },
+    "node_modules/yesno": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/yesno/-/yesno-0.4.0.tgz",
+      "integrity": "sha512-tdBxmHvbXPBKYIg81bMCB7bVeDmHkRzk5rVJyYYXurwKkHq/MCd8rz4HSJUP7hW0H2NlXiq8IFiWvYKEHhlotA==",
+      "dev": true,
+      "license": "BSD"
     },
     "node_modules/yocto-queue": {
       "version": "1.2.1",

package.json

···
     "dev": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
-    "astro": "astro"
+    "astro": "astro",
+    "discover": "tsx scripts/discover-collections.ts",
+    "gen:types": "tsx scripts/generate-types.ts"
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
···
     "tailwindcss": "^4.1.11",
     "tsx": "^4.19.2",
     "typescript": "^5.9.2"
+  },
+  "devDependencies": {
+    "@atproto/lex-cli": "^0.9.1"
   }
 }

src/components/content/GrainImageGallery.astro

···
 ---
 import type { GrainImageGallery } from '../../lib/types/atproto';
+import type { SocialGrainGallery } from '../../lib/generated/social-grain-gallery';
 
 interface Props {
   gallery: GrainImageGallery;

src/components/content/WhitewindBlogPost.astro

···
 ---
-import type { WhitewindBlogPost } from '../../lib/types/atproto';
-import { marked } from 'marked';
+import type { ComWhtwndBlogEntryRecord } from '../../lib/generated/com-whtwnd-blog-entry';
 
 interface Props {
-  post: WhitewindBlogPost;
+  record: ComWhtwndBlogEntryRecord;
   showTags?: boolean;
   showTimestamp?: boolean;
 }
 
-const { post, showTags = true, showTimestamp = true } = Astro.props;
+const { record, showTags = true, showTimestamp = true } = Astro.props;
 
 const formatDate = (dateString: string) => {
   return new Date(dateString).toLocaleDateString('en-US', {
···
   });
 };
 
-// Prefer explicit publishedAt; fall back to createdAt or indexedAt if present
-const publishedRaw = (post as any).publishedAt || (post as any).createdAt || (post as any).indexedAt || null;
-const publishedSafe = publishedRaw && !isNaN(new Date(publishedRaw).getTime()) ? publishedRaw : null;
+const published = record.createdAt;
+const isValidDate = published ? !isNaN(new Date(published).getTime()) : false;
 ---
 
 <article class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-6">
   <header class="mb-4">
     <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
-      {post.title}
+      {record.title}
     </h2>
     
-    {showTimestamp && publishedSafe && (
+    {showTimestamp && isValidDate && (
       <div class="text-sm text-gray-500 dark:text-gray-400 mb-3">
-        Published on {formatDate(publishedSafe)}
+        Published on {formatDate(published!)}
       </div>
     )}
     
-    {showTags && post.tags && post.tags.length > 0 && (
+    {showTags && record.tags && record.tags.length > 0 && (
       <div class="flex flex-wrap gap-2 mb-4">
-        {post.tags.map((tag) => (
+        {record.tags.map((tag) => (
           <span class="px-2 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">
             #{tag}
           </span>
···
     )}
   </header>
   
-  <div class="prose prose-white dark:prose-invert max-w-none">
-    <Fragment set:html={await marked(post.content || '')} />
+  <div class="prose prose-gray dark:prose-invert max-w-none">
+    <div class="text-gray-700 dark:text-gray-300 leading-relaxed">
+      {record.content}
+    </div>
   </div>
 </article> 

src/lib/components/registry.ts

···
-import type { ContentComponent } from '../types/atproto';
+import type { GeneratedLexiconUnion, GeneratedLexiconTypeMap } from '../generated/lexicon-types';
 
-// Component registry for type-safe content rendering
-class ComponentRegistry {
-  private components = new Map<string, ContentComponent>();
+// Type-safe component registry
+export interface ComponentRegistryEntry<T = any> {
+  component: string;
+  props?: T;
+}
 
-  // Register a component for a specific content type
-  register(type: string, component: any, props?: Record<string, any>): void {
-    this.components.set(type, {
-      type,
-      component,
-      props,
-    });
-  }
+export type ComponentRegistry = {
+  [K in keyof GeneratedLexiconTypeMap]?: ComponentRegistryEntry;
+} & {
+  [key: string]: ComponentRegistryEntry; // Fallback for unknown types
+};
 
-  // Get a component for a specific content type
-  get(type: string): ContentComponent | undefined {
-    return this.components.get(type);
-  }
-
-  // Check if a component exists for a content type
-  has(type: string): boolean {
-    return this.components.has(type);
-  }
-
-  // Get all registered component types
-  getRegisteredTypes(): string[] {
-    return Array.from(this.components.keys());
-  }
+// Default registry - add your components here
+export const registry: ComponentRegistry = {
+  'ComWhtwndBlogEntry': {
+    component: 'WhitewindBlogPost',
+    props: {}
+  },
+  // Add more mappings as you create components
+  // 'ComExampleRecord': {
+  //   component: 'ExampleComponent',
+  //   props: {}
+  // }
+};
 
-  // Clear all registered components
-  clear(): void {
-    this.components.clear();
-  }
+// Type-safe component lookup
+export function getComponentInfo<T extends keyof GeneratedLexiconTypeMap>(
+  $type: T
+): ComponentRegistryEntry | null {
+  return registry[$type] || null;
 }
 
-// Global component registry instance
-export const componentRegistry = new ComponentRegistry();
-
-// Type-safe component registration helper
-export function registerComponent(
-  type: string,
-  component: any,
-  props?: Record<string, any>
+// Helper to register a new component
+export function registerComponent<T extends keyof GeneratedLexiconTypeMap>(
+  $type: T,
+  component: string,
+  props?: any
 ): void {
-  componentRegistry.register(type, component, props);
+  registry[$type] = { component, props };
 }
 
-// Type-safe component retrieval helper
-export function getComponent(type: string): ContentComponent | undefined {
-  return componentRegistry.get(type);
-}
-
-// Check if content type has a registered component
-export function hasComponent(type: string): boolean {
-  return componentRegistry.has(type);
+// Auto-assignment for unknown types (fallback)
+export function autoAssignComponent($type: string): ComponentRegistryEntry {
+  // Convert NSID to component name
+  const parts = $type.split('.');
+  const componentName = parts[parts.length - 1]
+    .split('-')
+    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+    .join('');
+  
+  return {
+    component: componentName,
+    props: {}
+  };
 } 

src/lib/config/site.ts

···
   content: {
     defaultFeedLimit: number;
     cacheTTL: number; // in milliseconds
+    collections: string[];
+    maxRecords: number;
   };
+  lexiconSources: Record<string, string>; // NSID -> local schema file path
 }
 
 // Default configuration with static handle
···
   content: {
     defaultFeedLimit: 20,
     cacheTTL: 5 * 60 * 1000, // 5 minutes
+    collections: ['app.bsky.feed.post', 'com.whtwnd.blog.entry'],
+    maxRecords: 500,
+  },
+  lexiconSources: {
+    'com.whtwnd.blog.entry': './src/lexicons/com.whtwnd.blog.entry.json',
+    // Add more NSIDs -> schema file mappings here
   },
 };
 
···
     content: {
       defaultFeedLimit: parseInt(process.env.CONTENT_DEFAULT_FEED_LIMIT || '20'),
       cacheTTL: parseInt(process.env.CONTENT_CACHE_TTL || '300000'),
+      collections: defaultConfig.content.collections, // Keep default collections
+      maxRecords: parseInt(process.env.CONTENT_MAX_RECORDS || '500'),
     },
+    lexiconSources: defaultConfig.lexiconSources, // Keep default lexicon sources
   };
 } 

src/pages/index.astro

···
 const config = loadConfig();
 ---
 
-<Layout title="Home Page">
+<Layout title="Home">
   <div class="container mx-auto px-4 py-8">
-    <header class="text-center mb-12">
+    <header class="mb-8">
       <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
-        Welcome to {config.site.title || 'Tynanverse'}
+        Welcome to {config.site.title}
       </h1>
-      <p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
-        {config.site.description || 'A personal website powered by ATproto, made by Tynan'}
+      <p class="text-xl text-gray-600 dark:text-gray-300 mb-6">
+        {config.site.description}
       </p>
+      <nav class="flex space-x-4">
+        <a href="/" class="text-blue-600 dark:text-blue-400 hover:underline">Home</a>
+        <a href="/blog" class="text-blue-600 dark:text-blue-400 hover:underline">Blog</a>
+        <a href="/galleries" class="text-blue-600 dark:text-blue-400 hover:underline">Galleries</a>
+      </nav>
     </header>
 
-    <main class="max-w-4xl mx-auto space-y-12">
-      <!-- My Posts Feed -->
-      {config.atproto.handle && config.atproto.handle !== 'your-handle-here' ? (
-        <>
-          <section>
-            <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">
-              My Posts
-            </h2>
-            <ContentFeed 
-              limit={10}
-              showAuthor={false}
-              showTimestamp={true}
-              live={true}
-            />
-          </section>
-          
-
-          
-          <section>
-            <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">
-              Explore More
-            </h2>
-            <div class="grid md:grid-cols-2 gap-6">
-              <a href="/galleries" class="block p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow">
-                <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
-                  Image Galleries
-                </h3>
-                <p class="text-gray-600 dark:text-gray-400">
-                  View my grain.social image galleries and photo collections.
-                </p>
-              </a>
-            </div>
-          </section>
-        </>
-      ) : (
-        <section>
-          <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">
-            Configuration Required
-          </h2>
-          <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-6">
-            <p class="text-yellow-800 dark:text-yellow-200 mb-4">
-              To display your posts, please configure your Bluesky handle in the environment variables.
-            </p>
-            <div class="text-sm text-yellow-700 dark:text-yellow-300">
-              <p class="mb-2">Create a <code class="bg-yellow-100 dark:bg-yellow-800 px-1 rounded">.env</code> file with:</p>
-              <pre class="bg-yellow-100 dark:bg-yellow-800 p-3 rounded text-xs overflow-x-auto">
-ATPROTO_HANDLE=your-handle.bsky.social
-SITE_TITLE=Your Site Title
-SITE_AUTHOR=Your Name</pre>
-            </div>
-          </div>
-        </section>
-      )}
+    <main>
+      <section class="mb-8">
+        <h2 class="text-2xl font-semibold text-gray-900 dark:text-white mb-4">
+          Latest Posts
+        </h2>
+        <ContentFeed
+          limit={10}
+          showAuthor={false}
+          showTimestamp={true}
+          live={true}
+        />
+      </section>
     </main>
   </div>
 </Layout>