ATproto Personal Website#

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#

• 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

Quick Start#

1. Configure Environment:

   cp env.example .env
   # Edit .env with your ATproto handle and DID
   

2. Install Dependencies:

   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

4. Create Components:

   • Create Astro components in src/components/content/
   • Register them in src/lib/components/registry.ts
   • Use ContentDisplay.astro for automatic routing

5. Start Development:

   npm run dev
   

Lexicon Integration#

The system provides full type safety for ATproto lexicons:

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

See LEXICON_INTEGRATION.md for detailed instructions.

Available Scripts#

• 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/
├── 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

Configuration#

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.

Development#

• 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