tynanpurdy.com / at-home
A personal website powered by Astro and ATProto
fork atom
TypeScript 58.8%
Astro 34.9%
JavaScript 5.0%
CSS 0.9%
Other 0.4%
22 2 0

Clone this repository

https://tangled.org/tynanpurdy.com/at-home
git@tangled.org:tynanpurdy.com/at-home

For self-hosted knots, clone URLs may differ based on your setup.

Download tar.gz
README.md

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