A personal website powered by Astro and ATProto
tynanpurdy.com
1# ATproto Personal Website
2
3A personal website built with Astro that uses your ATproto repository as a CMS. Features full type safety, real-time updates, and automatic component routing.
4
5## Features
6
7- **Type-Safe Content**: Automatic TypeScript type generation from ATproto lexicon schemas
8- **Real-Time Updates**: Live content streaming via ATproto Jetstream
9- **Component Registry**: Type-safe mapping of lexicon types to Astro components
10- **Dynamic Routing**: Automatic component selection based on record types
11- **Blog Support**: Full blog post rendering with markdown support
12- **Gallery Display**: Image galleries with EXIF data and hover effects
13- **Pagination**: Fetch more than 100 records with cursor-based pagination
14
15## Quick Start
16
171. **Configure Environment**:
18 ```bash
19 cp env.example .env
20 # Edit .env with your ATproto handle and DID
21 ```
22
232. **Install Dependencies**:
24 ```bash
25 npm install
26 ```
27
283. **Add Lexicon Schemas**:
29 - Place JSON lexicon schemas in `src/lexicons/`
30 - Update `src/lib/config/site.ts` with your lexicon sources
31 - Run `npm run gen:types` to generate TypeScript types
32
334. **Create Components**:
34 - Create Astro components in `src/components/content/`
35 - Register them in `src/lib/components/registry.ts`
36 - Use `ContentDisplay.astro` for automatic routing
37
385. **Start Development**:
39 ```bash
40 npm run dev
41 ```
42
43## Lexicon Integration
44
45The system provides full type safety for ATproto lexicons:
46
471. **Schema Files**: JSON lexicon definitions in `src/lexicons/`
482. **Type Generation**: Automatic TypeScript type generation
493. **Component Registry**: Type-safe mapping of lexicon types to components
504. **Content Display**: Dynamic component routing
51
52See [LEXICON_INTEGRATION.md](./LEXICON_INTEGRATION.md) for detailed instructions.
53
54## Available Scripts
55
56- `npm run dev` - Start development server
57- `npm run build` - Build for production
58- `npm run preview` - Preview production build
59- `npm run discover` - Discover collections from your repo
60- `npm run gen:types` - Generate TypeScript types from lexicon schemas
61
62## Project Structure
63
64```
65src/
66├── components/content/ # Content display components
67├── lib/
68│ ├── atproto/ # ATproto client and utilities
69│ ├── components/ # Component registry
70│ ├── config/ # Site configuration
71│ ├── generated/ # Generated TypeScript types
72│ ├── services/ # Content services
73│ └── types/ # Type definitions
74├── lexicons/ # Lexicon schema files
75└── pages/ # Astro pages
76```
77
78## Configuration
79
80The system is configured via environment variables and `src/lib/config/site.ts`:
81
82- `ATPROTO_HANDLE` - Your Bluesky handle
83- `ATPROTO_DID` - Your DID (optional, auto-resolved)
84- `SITE_TITLE` - Site title
85- `SITE_DESCRIPTION` - Site description
86- `SITE_AUTHOR` - Site author
87
88## Adding New Content Types
89
901. Create a lexicon schema in `src/lexicons/`
912. Add it to `lexiconSources` in site config
923. Run `npm run gen:types`
934. Create a component in `src/components/content/`
945. Register it in `src/lib/components/registry.ts`
95
96The system will automatically route records to your components with full type safety.
97
98## Development
99
100- Debug mode shows component routing information
101- Generic fallback for unknown record types
102- Real-time updates via Jetstream
103- Type-safe component registry
104- Automatic type generation from schemas
105
106## License
107
108MIT