An experimental image gallery system for Are.na blocks, built with SolidJS and SolidStart. Demonstrates interaction patterns for navigating collections of visual content through swipe gestures, keyboard navigation, and responsive design.

Trestle is primarily an Are.na block renderer designed for creating writing-focused blogs with navigable galleries from visual collections.

• Block Navigation: Navigate through Are.na blocks with swipe gestures on mobile and keyboard shortcuts on desktop
• Are.na Integration: Direct integration with Are.na's API for fetching and displaying blocks
• Responsive Interface: Optimized experience across all device types
• Keyboard Controls: Arrow key navigation with escape to close
• Touch Gestures: Swipe-based navigation for mobile devices
• MDX Support: Embed blocks directly in markdown content
• TypeScript: Complete type safety throughout the application
• Modern Architecture: Built with SolidJS, SolidStart, and Vite

• Node.js 22.x or later
• Are.na account with Personal Access Token

1. Clone the repository:

   git clone https://github.com/jakeisnt/trestle.git
   cd trestle

2. Install dependencies:

   bun install

3. Configure environment variables:

   cp .env.example .env

   Add your Are.na Personal Access Token to .env:

   ARENA_PAT=your_arena_token_here

4. Start the development server:

   bun dev

5. Access the application at http://localhost:3000

Embed Are.na blocks in your MDX content:

<ArenaBlock blockId={39352077} />

<ArenaBlock blockId={39352077} width={400} height={300} canConnect={true} />

• Mobile: Swipe left/right to navigate between blocks, swipe down to close
• Desktop: Use arrow keys to navigate, Escape to close
• Click: Click any block to open the full gallery view

src/
├── components/          # Reusable UI components
│   ├── ArenaBlock/     # Core block rendering components
│   ├── icons/          # SVG icon components
│   └── ...
├── lib/                # Utility functions and hooks
│   ├── arena.ts        # Are.na API integration
│   └── hooks.ts        # Custom React hooks
├── routes/             # File-based routing
│   ├── block/          # Block detail pages
│   └── *.mdx          # MDX content pages
└── styles.scss         # Global styles

• bun dev - Start development server
• bun build - Build for production
• bun start - Start production server
• bun lint - Format code with Biome

The project uses SCSS modules for component styling. Customize the appearance by modifying the relevant .module.scss files:

• ArenaBlock.module.scss - Block component styles
• block.module.scss - Block detail page styles
• styles.scss - Global styles

The application uses a clean, minimal design with:

• Dark background (#1a1a1a)
• White text and accents
• Smooth transitions and animations
• Responsive breakpoints

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

• Follow the existing code style (enforced by Biome)
• Add TypeScript types for new features
• Test on both mobile and desktop
• Update documentation for new features

This project is licensed under the MIT License - see the LICENSE file for details.

• Are.na for the amazing platform
• SolidJS for the reactive framework
• SolidStart for the full-stack framework
• Vinxi for the build system

• Are.na: are.na
• Author: Jake Chvatal
• Company: Uln.Industries