diff --git a/PRD-cms-functionality.md b/PRD-cms-functionality.md
index ba8daf4..489739f 100644
--- a/PRD-cms-functionality.md
+++ b/PRD-cms-functionality.md
@@ -47,22 +47,17 @@ CREATE TABLE projects (
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
--- Posts table (for /universe)
+-- Posts table (for /universe) - Simplified to 2 types
CREATE TABLE posts (
id SERIAL PRIMARY KEY,
slug VARCHAR(255) UNIQUE NOT NULL,
- post_type VARCHAR(50) NOT NULL, -- blog, microblog, link, photo, album
- title VARCHAR(255), -- Optional for microblog posts
- content JSONB, -- Edra JSON for blog/microblog, optional for others
- excerpt TEXT,
-
- -- Type-specific fields
- link_url VARCHAR(500), -- For link posts
- link_description TEXT, -- For link posts
- photo_id INTEGER REFERENCES photos(id), -- For photo posts
- album_id INTEGER REFERENCES albums(id), -- For album posts
+ post_type VARCHAR(50) NOT NULL, -- 'post' or 'essay'
+ title VARCHAR(255), -- Required for essays, optional for posts
+ content JSONB, -- Edra JSON content
+ excerpt TEXT, -- For essays
featured_image VARCHAR(500),
+ attachments JSONB, -- Array of media IDs for any attachments
tags JSONB, -- Array of tags
status VARCHAR(50) DEFAULT 'draft',
published_at TIMESTAMP,
@@ -70,7 +65,7 @@ CREATE TABLE posts (
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
--- Albums table
+-- Albums table - Enhanced with photography curation
CREATE TABLE albums (
id SERIAL PRIMARY KEY,
slug VARCHAR(255) UNIQUE NOT NULL,
@@ -79,6 +74,7 @@ CREATE TABLE albums (
date DATE,
location VARCHAR(255),
cover_photo_id INTEGER REFERENCES photos(id),
+ is_photography BOOLEAN DEFAULT false, -- Show in photos experience
status VARCHAR(50) DEFAULT 'draft',
show_in_universe BOOLEAN DEFAULT false,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
@@ -109,17 +105,35 @@ CREATE TABLE photos (
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
--- Media table (general uploads)
+-- Media table (general uploads) - Enhanced with photography curation
CREATE TABLE media (
id SERIAL PRIMARY KEY,
filename VARCHAR(255) NOT NULL,
+ original_name VARCHAR(255), -- Original filename from user
mime_type VARCHAR(100) NOT NULL,
size INTEGER NOT NULL,
url TEXT NOT NULL,
thumbnail_url TEXT,
width INTEGER,
height INTEGER,
- created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+ alt_text TEXT, -- Alt text for accessibility
+ description TEXT, -- Optional description
+ is_photography BOOLEAN DEFAULT false, -- Star for photos experience
+ used_in JSONB DEFAULT '[]', -- Legacy tracking field
+ created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+ updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Media usage tracking table
+CREATE TABLE media_usage (
+ id SERIAL PRIMARY KEY,
+ media_id INTEGER REFERENCES media(id) ON DELETE CASCADE,
+ content_type VARCHAR(50) NOT NULL, -- 'project', 'post', 'album'
+ content_id INTEGER NOT NULL,
+ field_name VARCHAR(100) NOT NULL, -- 'featuredImage', 'logoUrl', 'gallery', 'content', 'attachments'
+ created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+ updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+ UNIQUE(media_id, content_type, content_id, field_name)
);
```
@@ -154,14 +168,23 @@ CREATE TABLE media (
}
```
-#### Media Table Enhancement
+#### Media Usage Tracking System
+
+The system now uses a dedicated `media_usage` table for robust tracking:
```sql
--- Add content associations to media table
-ALTER TABLE media ADD COLUMN used_in JSONB DEFAULT '[]';
--- Example: [{ "type": "post", "id": 1 }, { "type": "project", "id": 3 }]
+-- MediaUsage tracks where each media file is used
+-- Replaces the simple used_in JSONB field with proper relational tracking
+-- Enables complex queries like "show all projects using this media"
+-- Supports bulk operations and reference cleanup
```
+**Benefits:**
+- Accurate usage tracking across all content types
+- Efficient queries for usage information
+- Safe bulk deletion with automatic reference cleanup
+- Detailed tracking by field (featuredImage, gallery, content, etc.)
+
### 3. Content Type Editors
- **Projects**: Form-based editor with:
@@ -221,18 +244,30 @@ const ImageBlock = {
}
```
-### 5. Media Library Component
+### 5. Media Library System
-- **Modal Interface**: Opens from Edra toolbar or form fields
+#### Media Library Component
+
+- **Modal Interface**: Opens from Edra toolbar, form fields, or Browse Library buttons
- **Features**:
- - Grid view of all uploaded media
- - Search by filename
- - Filter by type (image/video)
- - Filter by usage (unused/used)
- - Upload new files
- - Select existing media
+ - Grid and list view modes for uploaded media
+ - Search by filename and filter by type (image/video/audio/pdf)
+ - Usage information showing where each media is used
+ - Alt text editing and accessibility features
+ - Upload new files directly from modal
+ - Single and multi-select functionality
- **Returns**: Media object with ID and URLs
+#### Multiselect & Bulk Operations
+
+- **Selection Interface**: Checkbox-based selection in both grid and list views
+- **Bulk Actions**:
+ - Select All / Clear Selection controls
+ - Bulk delete with confirmation
+ - Progress indicators and loading states
+- **Safe Deletion**: Automatic reference cleanup across all content types
+- **Reference Tracking**: Shows exactly where each media file is used before deletion
+
### 6. Image Processing Pipeline
1. **Upload**: User drops/selects image
@@ -252,45 +287,58 @@ const ImageBlock = {
```typescript
// Projects
-GET / api / projects
-POST / api / projects
-GET / api / projects / [slug]
-PUT / api / projects / [id]
-DELETE / api / projects / [id]
+GET /api/projects
+POST /api/projects
+GET /api/projects/[slug]
+PUT /api/projects/[id]
+DELETE /api/projects/[id]
// Posts
-GET / api / posts
-POST / api / posts
-GET / api / posts / [slug]
-PUT / api / posts / [id]
-DELETE / api / posts / [id]
+GET /api/posts
+POST /api/posts
+GET /api/posts/[slug]
+PUT /api/posts/[id]
+DELETE /api/posts/[id]
// Albums & Photos
-GET / api / albums
-POST / api / albums
-GET / api / albums / [slug]
-PUT / api / albums / [id]
-DELETE / api / albums / [id]
-POST / api / albums / [id] / photos
-DELETE / api / photos / [id]
-PUT / api / photos / [id] / order
+GET /api/albums
+POST /api/albums
+GET /api/albums/[slug]
+PUT /api/albums/[id]
+DELETE /api/albums/[id]
+POST /api/albums/[id]/photos
+DELETE /api/photos/[id]
+PUT /api/photos/[id]/order
-// Media upload
-POST / api / media / upload
-POST / api / media / bulk - upload
-GET / api / media // Browse with filters
-DELETE / api / media / [id] // Delete if unused
-GET / api / media / [id] / usage // Check where media is used
+// Media Management
+POST /api/media/upload // Single file upload
+POST /api/media/bulk-upload // Multiple file upload
+GET /api/media // Browse with filters, pagination
+GET /api/media/[id] // Get single media item
+PUT /api/media/[id] // Update media (alt text, description)
+DELETE /api/media/[id] // Delete single media item
+DELETE /api/media/bulk-delete // Delete multiple media items
+GET /api/media/[id]/usage // Check where media is used
+POST /api/media/backfill-usage // Backfill usage tracking for existing content
```
### 8. Media Management & Cleanup
-#### Orphaned Media Prevention
+#### Advanced Usage Tracking
-- **Reference Tracking**: `used_in` field tracks all content using each media item
-- **On Save**: Update media associations when content is saved
-- **On Delete**: Remove associations when content is deleted
-- **Cleanup Task**: Periodic job to identify truly orphaned media
+- **MediaUsage Table**: Dedicated table for precise tracking of media usage
+- **Automatic Tracking**: All content saves automatically update usage references
+- **Field-Level Tracking**: Tracks specific fields (featuredImage, gallery, content, attachments)
+- **Content Type Support**: Projects, Posts, Albums with full reference tracking
+- **Real-time Usage Display**: Shows exactly where each media file is used
+
+#### Safe Deletion System
+
+- **Usage Validation**: Prevents deletion if media is in use (unless forced)
+- **Reference Cleanup**: Automatically removes deleted media from all content
+- **Bulk Operations**: Multi-select deletion with comprehensive reference cleanup
+- **Rich Text Cleanup**: Removes deleted media from Edra editor content (images, galleries)
+- **Atomic Operations**: All-or-nothing deletion ensures data consistency
#### Edra Integration Details
@@ -322,13 +370,19 @@ const handleImageUpload = async (file) => {
### 9. Admin Interface
- **Route**: `/admin` (completely separate from public routes)
-- **Dashboard**: Overview of all content types
+- **Dashboard**: Overview of all content types with quick stats
- **Content Lists**:
- - Projects with preview thumbnails
- - Posts with publish status
- - Albums with photo counts
-- **Content Editors**: Type-specific editing interfaces
-- **Media Library**: Browse all uploaded files
+ - Projects with preview thumbnails and status indicators
+ - Posts with publish status and type badges
+ - Albums with photo counts and metadata
+- **Content Editors**: Type-specific editing interfaces with rich text support
+- **Media Library**: Comprehensive media management with:
+ - Grid and list view modes
+ - Advanced search and filtering
+ - Usage tracking and reference display
+ - Alt text editing and accessibility features
+ - Bulk operations with multiselect interface
+ - Safe deletion with reference cleanup
### 10. Public Display Integration
@@ -462,60 +516,93 @@ Based on requirements discussion:
4. **Project Templates**: Defer case study layout templates for later phase
5. **Scheduled Publishing**: Not needed initially
6. **RSS Feeds**: Required for all content types (projects, posts, photos)
-7. **Post Types**: Universe will support multiple post types:
- - **Blog Post**: Title + long-form Edra content
- - **Microblog**: No title, short-form Edra content
- - **Link Post**: URL + optional commentary
- - **Photo Post**: Single photo + caption
- - **Album Post**: Reference to photo album
+7. **Post Types**: Simplified to two main types:
+ - **Post**: Simple content with optional attachments (replaces microblog, link, photo posts)
+ - **Essay**: Full editor with title/metadata + optional attachments (replaces blog posts)
+8. **Albums & Photo Curation**: Albums serve dual purposes:
+ - **Regular Albums**: Collections for case studies, UI galleries, design process
+ - **Photography Albums**: Curated collections for photo-centric experience
+ - Both album and media levels have `isPhotography` flags for flexible curation
+9. **Photo Curation Strategy**: Media items can be "starred for photos" regardless of usage context
+ - Same photo can exist in posts AND photo collections
+ - Editorial control over what constitutes "photography" vs "UI screenshots/sketches"
+ - Photography albums can contain mixed content if editorially appropriate
-## Current Status (December 2024)
+## Current Status (June 2024)
### Completed
- ✅ Database setup with Prisma and PostgreSQL
- ✅ Media management system with Cloudinary integration
- ✅ Admin foundation (layout, navigation, auth, forms, data tables)
-- ✅ Edra rich text editor integration for case studies
-- ✅ Edra image uploads configured to use media API
+- ✅ Edra rich text editor integration for case studies and posts
+- ✅ Edra image and gallery extensions with MediaLibraryModal integration
- ✅ Local development mode for media uploads (no Cloudinary usage)
- ✅ Project CRUD system with metadata fields and enhanced schema
- ✅ Project list view in admin with enhanced UI
- ✅ Project forms with branding (logo, colors) and styling
- ✅ Posts CRUD system with all post types (blog, microblog, link, photo, album)
+- ✅ Posts attachments field for multiple image support
- ✅ Posts list view and editor in admin
-- ✅ Complete database schema matching PRD requirements
+- ✅ Complete database schema with MediaUsage tracking table
- ✅ Media API endpoints with upload, bulk upload, and usage tracking
- ✅ Component library for admin interface (buttons, inputs, modals, etc.)
-- ✅ Test page for verifying upload functionality
+- ✅ MediaLibraryModal for browsing and selecting media
+- ✅ Media details modal with alt text editing and usage information
+- ✅ Multiselect interface for bulk media operations
+- ✅ Safe bulk deletion with automatic reference cleanup
+- ✅ UniverseComposer with photo attachment support
+- ✅ Form integration with Browse Library functionality (ImageUploader, GalleryUploader)
+- ✅ Usage tracking backfill system for existing content
+- ✅ **Project Password Protection & Visibility System** (June 2024)
+ - ✅ Four project states: Published, List-only, Password-protected, Draft
+ - ✅ Password protection with session storage
+ - ✅ Visual indicators in project lists
+ - ✅ Admin interface updates with status dropdown
+ - ✅ API filtering for different visibility states
+- ✅ **RSS Feed Best Practices Implementation** (June 2024)
+ - ✅ Updated all RSS feeds with proper XML namespaces
+ - ✅ Full content support via content:encoded
+ - ✅ Enhanced HTTP headers with ETag and caching
+ - ✅ RFC 822 date formatting throughout
### In Progress
-- 🔄 Albums/Photos System - Schema implemented, UI components needed
+- 🔄 Content Simplification & Photo Curation System
### Next Steps
-1. **Media Library System** (Critical dependency for other features)
+1. **Content Model Updates** (Immediate Priority)
- - Media library modal component
- - Integration with existing media APIs
- - Search and filter functionality within media browser
+ - Add `isPhotography` field to Media and Album tables via migration
+ - Simplify post types to just "post" and "essay"
+ - Update post creation UI to use simplified types
+ - Add photography toggle to media details modal
+ - Add photography indicator pills in admin interface
-2. **Albums & Photos Management Interface**
+2. **Albums & Photos Management Interface**
- - Album creation and management UI
+ - Album creation and management UI with photography toggle
- Bulk photo upload interface with progress
- Photo ordering within albums
- Album cover selection
- EXIF data extraction and display
+ - Photography album filtering and management
3. **Enhanced Content Features**
- - Photo/album post selectors using media library
- - Featured image picker for projects
+ - Featured image picker for projects (using MediaLibraryModal)
- Technology tag selector for projects
- Auto-save functionality for all editors
- - Gallery manager for project images
+ - Gallery manager for project images with drag-and-drop
+
+4. **Public Display Integration**
+
+ - Dynamic Work page displaying projects from database
+ - Universe page with mixed content feed (posts + essays)
+ - Photos page with photography albums only
+ - Individual content detail pages
+ - SEO meta tags and OpenGraph integration
## Phased Implementation Plan
@@ -542,10 +629,14 @@ Based on requirements discussion:
- [x] Create media upload endpoint with Cloudinary integration
- [x] Implement image processing pipeline (multiple sizes)
-- [x] Build media library API endpoints
-- [x] Create media association tracking system
+- [x] Build media library API endpoints with pagination and filtering
+- [x] Create advanced MediaUsage tracking system
- [x] Add bulk upload endpoint for photos
-- [x] Create media usage tracking queries
+- [x] Build MediaLibraryModal component with search and selection
+- [x] Implement media details modal with alt text editing
+- [x] Create multiselect interface for bulk operations
+- [x] Add safe bulk deletion with reference cleanup
+- [x] Build usage tracking queries and backfill system
### Phase 3: Admin Foundation
@@ -556,21 +647,22 @@ Based on requirements discussion:
- [x] Build data table component for list views
- [x] Add loading and error states
- [x] Create comprehensive admin UI component library
-- [ ] Create media library modal component
+- [x] Build complete media library system with modals and management
### Phase 4: Posts System (All Types)
- [x] Create Edra Svelte wrapper component
-- [x] Implement custom image block for Edra
+- [x] Implement custom image and gallery blocks for Edra
- [x] Build post type selector UI
- [x] Create blog/microblog post editor
- [x] Build link post form
- [x] Create posts list view in admin
-- [x] Implement post CRUD APIs
+- [x] Implement post CRUD APIs with attachments support
- [x] Post editor page with type-specific fields
-- [x] Complete posts database schema with all post types
+- [x] Complete posts database schema with attachments field
- [x] Posts administration interface
-- [ ] Create photo post selector (needs media library modal)
+- [x] UniverseComposer with photo attachment support
+- [x] Integrate MediaLibraryModal with Edra editor
- [ ] Build album post selector (needs albums system)
- [ ] Add auto-save functionality
@@ -578,40 +670,56 @@ Based on requirements discussion:
- [x] Build project form with all metadata fields
- [x] Enhanced schema with branding fields (logo, colors)
-- [x] Project branding and styling forms
-- [x] Add optional Edra editor for case studies
-- [x] Create project CRUD APIs
+- [x] Project branding and styling forms with ImageUploader and GalleryUploader
+- [x] Add optional Edra editor for case studies with media support
+- [x] Create project CRUD APIs with usage tracking
- [x] Build project list view with enhanced UI
+- [x] Integrate Browse Library functionality in project forms
- [ ] Create technology tag selector
-- [ ] Implement featured image picker (needs media library modal)
- [ ] Build gallery manager with drag-and-drop ordering
- [ ] Add project ordering functionality
-### Phase 6: Photos & Albums System
+### Phase 6: Content Simplification & Photo Curation
+
+- [x] Add `isPhotography` field to Media table (migration)
+- [x] Add `isPhotography` field to Album table (migration)
+- [x] Simplify post types to "post" and "essay" only
+- [x] Update UniverseComposer to use simplified post types
+- [x] Add photography toggle to MediaDetailsModal
+- [x] Add photography indicator pills throughout admin interface
+- [x] Update media and album APIs to handle photography flags
+
+### Phase 7: Photos & Albums System
- [x] Complete database schema for albums and photos
- [x] Photo/album CRUD API endpoints (albums endpoint exists)
-- [ ] Create album management interface
+- [x] Create album management interface with photography toggle
+- [x] **Album Photo Management** (Core functionality complete)
+ - [x] Add photos to albums interface using MediaLibraryModal
+ - [x] Remove photos from albums with confirmation
+ - [x] Photo grid display with hover overlays
+ - [x] Album-photo relationship API endpoints (POST /api/albums/[id]/photos, DELETE /api/photos/[id])
+ - [ ] Photo reordering within albums (drag-and-drop)
+ - [ ] Album cover photo selection
- [ ] Build bulk photo uploader with progress
- [ ] Implement EXIF data extraction for photos
-- [ ] Implement drag-and-drop photo ordering
- [ ] Add individual photo publishing UI
- [ ] Build photo metadata editor
-- [ ] Implement album cover selection
+- [ ] Add photography album filtering and management
- [ ] Add "show in universe" toggle for albums
-### Phase 7: Public Display Updates
+### Phase 8: Public Display Updates
-- [ ] Replace static Work page with dynamic data
-- [ ] Update project detail pages
-- [ ] Build Universe mixed feed component
-- [ ] Create different card types for each post type
-- [ ] Update Photos page with dynamic albums/photos
-- [ ] Implement individual photo pages
-- [ ] Add Universe post detail pages
+- [x] Replace static Work page with dynamic data
+- [x] Update project detail pages
+- [x] Build Universe mixed feed component
+- [x] Create different card types for each post type
+- [x] Update Photos page with dynamic albums/photos
+- [x] Implement individual photo pages
+- [x] Add Universe post detail pages
- [ ] Ensure responsive design throughout
-### Phase 8: RSS Feeds & Final Polish
+### Phase 9: RSS Feeds & Final Polish
- [ ] Implement RSS feed for projects
- [ ] Create RSS feed for Universe posts
@@ -622,7 +730,7 @@ Based on requirements discussion:
- [ ] Add search functionality to admin
- [ ] Performance optimization pass
-### Phase 9: Production Deployment
+### Phase 10: Production Deployment
- [ ] Set up PostgreSQL on Railway
- [ ] Run migrations on production database
@@ -642,6 +750,85 @@ Based on requirements discussion:
- [ ] Analytics integration
- [ ] Backup system
+## Albums & Photos System Implementation
+
+### Design Decisions Made (May 2024)
+
+1. **Simplified Post Types**: Reduced from 5 types (blog, microblog, link, photo, album) to 2 types:
+ - **Post**: Simple content with optional attachments (handles previous microblog, link, photo use cases)
+ - **Essay**: Full editor with title/metadata + attachments (handles previous blog use cases)
+
+2. **Photo Curation Strategy**: Dual-level curation system:
+ - **Media Level**: `isPhotography` boolean - stars individual media for photo experience
+ - **Album Level**: `isPhotography` boolean - marks entire albums for photo experience
+ - **Mixed Content**: Photography albums can contain non-photography media (Option A)
+ - **Default Behavior**: Both flags default to `false` to prevent accidental photo inclusion
+
+3. **Visual Indicators**: Pill-shaped tags to indicate photography status in admin interface
+
+4. **Album Flexibility**: Albums serve multiple purposes:
+ - Regular albums for case studies, UI collections, design process
+ - Photography albums for curated photo experience (Japan Trip, Street Photography)
+ - Same album system, different curation flags
+
+### Implementation Task List
+
+#### Phase 1: Database Updates
+- [x] Create migration to add `isPhotography` field to Media table
+- [x] Create migration to add `isPhotography` field to Album table
+- [x] Update Prisma schema with new fields
+- [x] Test migrations on local database
+
+#### Phase 2: API Updates
+- [x] Update Media API endpoints to handle `isPhotography` flag
+- [x] Update Album API endpoints to handle `isPhotography` flag
+- [x] Update media usage tracking to work with new flags
+- [x] Add filtering capabilities for photography content
+
+#### Phase 3: Admin Interface Updates
+- [x] Add photography toggle to MediaDetailsModal
+- [x] Add photography indicator pills for media items (grid and list views)
+- [x] Add photography indicator pills for albums
+- [x] Update media library filtering to include photography status
+- [x] Add bulk photography operations (mark/unmark multiple items)
+
+#### Phase 4: Post Type Simplification
+- [x] Update UniverseComposer to use only "post" and "essay" types
+- [x] Remove complex post type selector UI
+- [x] Update post creation flows
+- [x] Migrate existing posts to simplified types (if needed)
+- [x] Update post display logic to handle simplified types
+
+#### Phase 5: Album Management System
+- [x] Create album creation/editing interface with photography toggle
+- [x] Build album list view with photography indicators
+- [ ] **Critical Missing Feature: Album Photo Management**
+ - [ ] Add photo management section to album edit page
+ - [ ] Implement "Add Photos from Library" functionality using MediaLibraryModal
+ - [ ] Create photo grid display within album editor
+ - [ ] Add remove photo functionality (individual photos)
+ - [ ] Implement drag-and-drop photo reordering within albums
+ - [ ] Add album cover photo selection interface
+ - [ ] Update album API to handle photo associations
+ - [ ] Create album-photo relationship endpoints
+- [ ] Add bulk photo upload to albums with automatic photography detection
+
+#### Phase 6: Photography Experience
+- [ ] Build photography album filtering in admin
+- [ ] Create photography-focused views and workflows
+- [ ] Add batch operations for photo curation
+- [ ] Implement photography album public display
+- [ ] Add photography vs regular album distinction in frontend
+
+### Success Criteria
+
+- Admin can quickly toggle media items between regular and photography status
+- Albums can be easily marked for photography experience
+- Post creation is simplified to 2 clear choices
+- Photography albums display correctly in public photos section
+- Mixed content albums (photography + other) display all content as intended
+- Pill indicators clearly show photography status throughout admin interface
+
## Success Metrics
- Can create and publish any content type within 2-3 minutes
diff --git a/PRD-media-library.md b/PRD-media-library.md
index 5a930d6..69d9f57 100644
--- a/PRD-media-library.md
+++ b/PRD-media-library.md
@@ -1,5 +1,17 @@
# Product Requirements Document: Media Library Modal System
+## 🎉 **PROJECT STATUS: CORE IMPLEMENTATION COMPLETE!**
+
+We have successfully implemented a comprehensive Media Library system with both direct upload workflows and library browsing capabilities. **All major components are functional and integrated throughout the admin interface.**
+
+### 🏆 Major Achievements
+- **✅ Complete MediaLibraryModal system** with single/multiple selection
+- **✅ Enhanced upload components** (ImageUploader, GalleryUploader) with MediaLibraryModal integration
+- **✅ Full form integration** across projects, posts, albums, and editor
+- **✅ Alt text support** throughout upload and editing workflows
+- **✅ Edra editor integration** with `/image` and `/gallery` slash commands
+- **✅ Media Library management** with clickable editing and metadata support
+
## Overview
Implement a comprehensive Media Library modal system that provides a unified interface for browsing, selecting, and managing media across all admin forms. **The primary workflow is direct upload from computer within forms**, with the Media Library serving as a secondary browsing interface and management tool for previously uploaded content.
@@ -40,23 +52,30 @@ Implement a comprehensive Media Library modal system that provides a unified int
- Complete admin UI component library (Button, Input, etc.)
- Media upload infrastructure with Cloudinary integration
- Pagination and search functionality
+- **✅ Database schema with alt text support** (altText field in Media table)
+- **✅ MediaLibraryModal component** with single/multiple selection modes
+- **✅ ImageUploader and GalleryUploader components** with MediaLibraryModal integration
+- **✅ Enhanced admin form components** with Browse Library functionality
+- **✅ Media details editing** with alt text support in Media Library page
+- **✅ Edra editor integration** with image and gallery support via slash commands
### 🎯 What We Need
-#### High Priority (Direct Upload Focus)
-- **Enhanced upload components** with immediate preview and metadata capture
-- **Alt text input fields** for accessibility compliance
-- **Direct upload integration** in form components (ImagePicker, GalleryManager)
-- **Metadata management** during upload process
+#### High Priority (Remaining Tasks)
+- **Enhanced upload features** with drag & drop zones in all upload components
+- **Bulk alt text editing** in Media Library for existing content
+- **Usage tracking display** showing where media is referenced
+- **Performance optimizations** for large media libraries
-#### Medium Priority (Media Library Browser)
-- Reusable MediaLibraryModal component for browsing existing content
-- Selection state management for previously uploaded files
-- Usage tracking and reference management
+#### Medium Priority (Polish & Advanced Features)
+- **Image optimization options** during upload
+- **Advanced search capabilities** (by alt text, usage, etc.)
+- **Bulk operations** (delete multiple, bulk metadata editing)
-#### Database Updates Required
-- Add `alt_text` field to Media table
-- Add `usage_references` or similar tracking for where media is used
+#### Low Priority (Future Enhancements)
+- **AI-powered alt text suggestions**
+- **Duplicate detection** and management
+- **Advanced analytics** and usage reporting
## Workflow Priorities
@@ -356,114 +375,130 @@ interface GalleryManagerProps {
## Implementation Plan
-### Phase 1: Database Schema Updates (Required First)
-1. **Add Alt Text Support**
- ```sql
- ALTER TABLE media ADD COLUMN alt_text TEXT;
- ALTER TABLE media ADD COLUMN description TEXT;
- ```
+### ✅ Phase 1: Database Schema Updates (COMPLETED)
+1. **✅ Alt Text Support**
+ - Database schema includes `altText` and `description` fields
+ - API endpoints support alt text in upload and update operations
-2. **Add Usage Tracking (Optional)**
- ```sql
- -- Track where media is referenced
- CREATE TABLE media_usage (
- id SERIAL PRIMARY KEY,
- media_id INTEGER REFERENCES media(id),
- content_type VARCHAR(50), -- 'project', 'post', 'album'
- content_id INTEGER,
- field_name VARCHAR(100), -- 'featured_image', 'gallery', etc.
- created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
- );
- ```
+2. **⏳ Usage Tracking (IN PROGRESS)**
+ - Basic usage references working in forms
+ - Need dedicated tracking table for comprehensive usage analytics
-### Phase 2: Direct Upload Components (High Priority)
-1. **ImageUploader Component**
+### ✅ Phase 2: Direct Upload Components (COMPLETED)
+1. **✅ ImageUploader Component**
- Drag-and-drop upload zone with visual feedback
- Immediate upload and preview functionality
- Alt text input integration
- - Replace existing ImagePicker with upload-first approach
+ - MediaLibraryModal integration as secondary option
-2. **GalleryUploader Component**
- - Multiple file drag-and-drop
+2. **✅ GalleryUploader Component**
+ - Multiple file drag-and-drop support
- Individual alt text inputs per image
- - Drag-and-drop reordering
+ - Drag-and-drop reordering functionality
- Remove individual images functionality
+ - MediaLibraryModal integration for existing media selection
-3. **Upload API Enhancement**
- - Accept alt text in upload request
- - Return complete media object with metadata
- - Handle batch uploads with individual alt text
+3. **✅ Upload API Enhancement**
+ - Alt text accepted in upload requests
+ - Complete media object returned with metadata
+ - Batch uploads with individual alt text support
-### Phase 3: Form Integration (High Priority)
-1. **Project Forms Enhancement**
- - Replace logo field with ImageUploader
- - Add featured image with ImageUploader
- - Implement gallery section with GalleryUploader
- - Add secondary "Browse Library" buttons
+### ✅ Phase 3: Form Integration (COMPLETED)
+1. **✅ Project Forms Enhancement**
+ - Logo field enhanced with ImageUploader + Browse Library
+ - Featured image support with ImageUploader
+ - Gallery section implemented with GalleryUploader
+ - Secondary "Browse Library" buttons throughout
-2. **Post Forms Enhancement**
- - Photo post type with GalleryUploader
- - Album creation with GalleryUploader
- - Featured image selection for text posts
+2. **✅ Post Forms Enhancement**
+ - Photo post creation with PhotoPostForm
+ - Album creation with AlbumForm and GalleryUploader
+ - Universe Composer with photo attachments
+ - Enhanced Edra editor with inline image/gallery support
-### Phase 4: Media Library Management (Medium Priority)
-1. **Enhanced Media Library Page**
- - Alt text editing for existing media
- - Usage tracking display (shows where media is used)
- - Bulk alt text editing
- - Search and filter by alt text
+### ✅ Phase 4: Media Library Management (MOSTLY COMPLETED)
+1. **✅ Enhanced Media Library Page**
+ - Alt text editing for existing media via MediaDetailsModal
+ - Clickable media items with edit functionality
+ - Grid and list view toggles
-2. **MediaLibraryModal for Selection**
+2. **✅ MediaLibraryModal for Selection**
- Browse existing media interface
- Single and multiple selection modes
- - Integration as secondary option in forms
+ - Integration throughout all form components
+ - File type filtering (image/video/all)
-### Phase 5: Polish and Advanced Features (Low Priority)
+### 🎯 Phase 5: Remaining Enhancements (CURRENT PRIORITIES)
+
+#### 🔥 High Priority (Next Sprint)
+1. **Enhanced Media Library Features**
+ - **Bulk alt text editing** - Select multiple media items and edit alt text in batch
+ - **Usage tracking display** - Show where each media item is referenced
+ - **Advanced drag & drop zones** - More intuitive upload areas in all components
+
+2. **Performance Optimizations**
+ - **Lazy loading** for large media libraries
+ - **Search optimization** with better indexing
+ - **Thumbnail optimization** for faster loading
+
+#### 🔥 Medium Priority (Future Sprints)
1. **Advanced Upload Features**
- - Image resizing/optimization options
- - Automatic alt text suggestions (AI integration)
- - Bulk upload with CSV metadata import
+ - **Image resizing/optimization** options during upload
+ - **Duplicate detection** to prevent redundant uploads
+ - **Bulk upload improvements** with better progress tracking
-2. **Usage Analytics**
- - Dashboard showing media usage statistics
- - Unused media cleanup tools
- - Duplicate detection and management
+2. **Usage Analytics & Management**
+ - **Usage analytics dashboard** showing media usage statistics
+ - **Unused media cleanup** tools for storage optimization
+ - **Advanced search** by alt text, usage status, date ranges
+
+#### 🔥 Low Priority (Nice-to-Have)
+1. **AI Integration**
+ - **Automatic alt text suggestions** using image recognition
+ - **Smart tagging** for better organization
+ - **Content-aware optimization** suggestions
## Success Criteria
### Functional Requirements
#### Primary Workflow (Direct Upload)
-- [ ] **Drag-and-drop upload works** in all form components
-- [ ] **Click-to-browse file selection** works reliably
-- [ ] **Immediate upload and preview** happens without page navigation
-- [ ] **Alt text input appears** and saves with uploaded media
-- [ ] **Upload progress** is clearly indicated with percentage
-- [ ] **Error handling** provides helpful feedback for failed uploads
-- [ ] **Multiple file upload** works with individual progress tracking
-- [ ] **Gallery reordering** works with drag-and-drop after upload
+- [x] **Drag-and-drop upload works** in all form components
+- [x] **Click-to-browse file selection** works reliably
+- [x] **Immediate upload and preview** happens without page navigation
+- [x] **Alt text input appears** and saves with uploaded media
+- [x] **Upload progress** is clearly indicated with percentage
+- [x] **Error handling** provides helpful feedback for failed uploads
+- [x] **Multiple file upload** works with individual progress tracking
+- [x] **Gallery reordering** works with drag-and-drop after upload
#### Secondary Workflow (Media Library)
-- [ ] **Media Library Modal** opens and closes properly with smooth animations
-- [ ] **Single and multiple selection** modes work correctly
-- [ ] **Search and filtering** return accurate results
-- [ ] **Usage tracking** shows where media is referenced
-- [ ] **Alt text editing** works in Media Library management
-- [ ] **All components are keyboard accessible**
+- [x] **Media Library Modal** opens and closes properly with smooth animations
+- [x] **Single and multiple selection** modes work correctly
+- [x] **Search and filtering** return accurate results
+- [ ] **Usage tracking** shows where media is referenced (IN PROGRESS)
+- [x] **Alt text editing** works in Media Library management
+- [x] **All components are keyboard accessible**
+
+#### Edra Editor Integration
+- [x] **Slash commands** work for image and gallery insertion
+- [x] **MediaLibraryModal integration** in editor placeholders
+- [x] **Gallery management** within rich text editor
+- [x] **Image replacement** functionality in editor
### Performance Requirements
-- [ ] Modal opens in under 200ms
-- [ ] Media grid loads in under 1 second
-- [ ] Search results appear in under 500ms
-- [ ] Upload progress updates in real-time
-- [ ] No memory leaks when opening/closing modal multiple times
+- [x] Modal opens in under 200ms
+- [x] Media grid loads in under 1 second
+- [x] Search results appear in under 500ms
+- [x] Upload progress updates in real-time
+- [x] No memory leaks when opening/closing modal multiple times
### UX Requirements
-- [ ] Interface is intuitive without instruction
-- [ ] Visual feedback is clear for all interactions
-- [ ] Error messages are helpful and actionable
-- [ ] Mobile/tablet interface is fully functional
-- [ ] Loading states prevent user confusion
+- [x] Interface is intuitive without instruction
+- [x] Visual feedback is clear for all interactions
+- [x] Error messages are helpful and actionable
+- [x] Mobile/tablet interface is fully functional
+- [x] Loading states prevent user confusion
## Technical Considerations
@@ -510,25 +545,32 @@ interface GalleryManagerProps {
## Development Checklist
### Core Components
-- [ ] MediaLibraryModal base structure
-- [ ] MediaSelector with grid layout
-- [ ] MediaUploader with drag-and-drop
-- [ ] Search and filter interface
-- [ ] Pagination implementation
+- [x] MediaLibraryModal base structure
+- [x] MediaSelector with grid layout
+- [x] MediaUploader with drag-and-drop
+- [x] Search and filter interface
+- [x] Pagination implementation
### Form Integration
-- [ ] MediaInput generic component
-- [ ] ImagePicker specialized component
-- [ ] GalleryManager with reordering
-- [ ] Integration with existing project forms
-- [ ] Integration with post forms
+- [x] MediaInput generic component (ImageUploader/GalleryUploader)
+- [x] ImagePicker specialized component (ImageUploader)
+- [x] GalleryManager with reordering (GalleryUploader)
+- [x] Integration with existing project forms
+- [x] Integration with post forms
+- [x] Integration with Edra editor
### Polish and Testing
-- [ ] Responsive design implementation
-- [ ] Accessibility testing and fixes
-- [ ] Performance optimization
-- [ ] Error state handling
-- [ ] Cross-browser testing
-- [ ] Mobile device testing
+- [x] Responsive design implementation
+- [x] Accessibility testing and fixes
+- [x] Performance optimization
+- [x] Error state handling
+- [x] Cross-browser testing
+- [x] Mobile device testing
+
+### 🎯 Next Priority Items
+- [ ] **Bulk alt text editing** in Media Library
+- [ ] **Usage tracking display** for media references
+- [ ] **Advanced drag & drop zones** with better visual feedback
+- [ ] **Performance optimizations** for large libraries
This Media Library system will serve as the foundation for all media-related functionality in the CMS, enabling rich content creation across projects, posts, and albums.
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 18490d0..163a2a3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,6 +41,7 @@
"@types/steamapi": "^2.2.5",
"cloudinary": "^2.6.1",
"dotenv": "^16.5.0",
+ "exifr": "^7.1.3",
"giantbombing-api": "^1.0.4",
"gray-matter": "^4.0.3",
"ioredis": "^5.4.1",
@@ -4805,6 +4806,12 @@
"integrity": "sha512-QVtGvYTf9HvQyDjbBCwoDQPP9KMuVB56H8KalrkLsPPCQfngpVmkiIoxJ4FU/SVmlmhnbr/heOmP5VlbCTEJpg==",
"license": "MIT"
},
+ "node_modules/exifr": {
+ "version": "7.1.3",
+ "resolved": "https://registry.npmjs.org/exifr/-/exifr-7.1.3.tgz",
+ "integrity": "sha512-g/aje2noHivrRSLbAUtBPWFbxKdKhgj/xr1vATDdUXPOFYJlQ62Ft0oy+72V6XLIpDJfHs6gXLbBLAolqOXYRw==",
+ "license": "MIT"
+ },
"node_modules/extend": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
diff --git a/package.json b/package.json
index 0a11670..a8bb48a 100644
--- a/package.json
+++ b/package.json
@@ -84,6 +84,7 @@
"@types/steamapi": "^2.2.5",
"cloudinary": "^2.6.1",
"dotenv": "^16.5.0",
+ "exifr": "^7.1.3",
"giantbombing-api": "^1.0.4",
"gray-matter": "^4.0.3",
"ioredis": "^5.4.1",
diff --git a/prisma/migrations/20250531181345_remove_technologies_field/migration.sql b/prisma/migrations/20250531181345_remove_technologies_field/migration.sql
new file mode 100644
index 0000000..5a9e0d9
--- /dev/null
+++ b/prisma/migrations/20250531181345_remove_technologies_field/migration.sql
@@ -0,0 +1,8 @@
+/*
+ Warnings:
+
+ - You are about to drop the column `technologies` on the `Project` table. All the data in this column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "Project" DROP COLUMN "technologies";
\ No newline at end of file
diff --git a/prisma/migrations/20250531202127_add_media_usage_tracking/migration.sql b/prisma/migrations/20250531202127_add_media_usage_tracking/migration.sql
new file mode 100644
index 0000000..ef09f17
--- /dev/null
+++ b/prisma/migrations/20250531202127_add_media_usage_tracking/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Media" ALTER COLUMN "updatedAt" DROP DEFAULT;
diff --git a/prisma/migrations/20250531210030_add_post_attachments/migration.sql b/prisma/migrations/20250531210030_add_post_attachments/migration.sql
new file mode 100644
index 0000000..9ff3a25
--- /dev/null
+++ b/prisma/migrations/20250531210030_add_post_attachments/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Post" ADD COLUMN "attachments" JSONB;
diff --git a/prisma/migrations/20250531213353_add_photography_flags/migration.sql b/prisma/migrations/20250531213353_add_photography_flags/migration.sql
new file mode 100644
index 0000000..fc6810e
--- /dev/null
+++ b/prisma/migrations/20250531213353_add_photography_flags/migration.sql
@@ -0,0 +1,5 @@
+-- AlterTable
+ALTER TABLE "Album" ADD COLUMN "isPhotography" BOOLEAN NOT NULL DEFAULT false;
+
+-- AlterTable
+ALTER TABLE "Media" ADD COLUMN "isPhotography" BOOLEAN NOT NULL DEFAULT false;
diff --git a/prisma/migrations/20250601021128_add_project_type_and_password_protection/migration.sql b/prisma/migrations/20250601021128_add_project_type_and_password_protection/migration.sql
new file mode 100644
index 0000000..1a74b7c
--- /dev/null
+++ b/prisma/migrations/20250601021128_add_project_type_and_password_protection/migration.sql
@@ -0,0 +1,6 @@
+-- AlterTable
+ALTER TABLE "Media" ADD COLUMN "exifData" JSONB;
+
+-- AlterTable
+ALTER TABLE "Project" ADD COLUMN "password" VARCHAR(255),
+ADD COLUMN "projectType" VARCHAR(50) NOT NULL DEFAULT 'work';
diff --git a/prisma/migrations/add_media_usage_tracking/migration.sql b/prisma/migrations/add_media_usage_tracking/migration.sql
new file mode 100644
index 0000000..6cbd7e3
--- /dev/null
+++ b/prisma/migrations/add_media_usage_tracking/migration.sql
@@ -0,0 +1,24 @@
+-- CreateTable
+CREATE TABLE "MediaUsage" (
+ "id" SERIAL NOT NULL,
+ "mediaId" INTEGER NOT NULL,
+ "contentType" VARCHAR(50) NOT NULL,
+ "contentId" INTEGER NOT NULL,
+ "fieldName" VARCHAR(100) NOT NULL,
+ "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ "updatedAt" TIMESTAMP(3) NOT NULL,
+
+ CONSTRAINT "MediaUsage_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "MediaUsage_mediaId_idx" ON "MediaUsage"("mediaId");
+
+-- CreateIndex
+CREATE INDEX "MediaUsage_contentType_contentId_idx" ON "MediaUsage"("contentType", "contentId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "MediaUsage_mediaId_contentType_contentId_fieldName_key" ON "MediaUsage"("mediaId", "contentType", "contentId", "fieldName");
+
+-- AddForeignKey
+ALTER TABLE "MediaUsage" ADD CONSTRAINT "MediaUsage_mediaId_fkey" FOREIGN KEY ("mediaId") REFERENCES "Media"("id") ON DELETE CASCADE ON UPDATE CASCADE;
\ No newline at end of file
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 27b309c..46d1737 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -20,7 +20,6 @@ model Project {
year Int
client String? @db.VarChar(255)
role String? @db.VarChar(255)
- technologies Json? // Array of tech stack
featuredImage String? @db.VarChar(500)
logoUrl String? @db.VarChar(500)
gallery Json? // Array of image URLs
@@ -28,8 +27,10 @@ model Project {
caseStudyContent Json? // BlockNote JSON format
backgroundColor String? @db.VarChar(50) // For project card styling
highlightColor String? @db.VarChar(50) // For project card accent
+ projectType String @default("work") @db.VarChar(50) // "work" or "labs"
displayOrder Int @default(0)
- status String @default("draft") @db.VarChar(50)
+ status String @default("draft") @db.VarChar(50) // "draft", "published", "list-only", "password-protected"
+ password String? @db.VarChar(255) // Required when status is "password-protected"
publishedAt DateTime?
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
@@ -54,6 +55,7 @@ model Post {
albumId Int?
featuredImage String? @db.VarChar(500)
+ attachments Json? // Array of media IDs for photo attachments
tags Json? // Array of tags
status String @default("draft") @db.VarChar(50)
publishedAt DateTime?
@@ -78,6 +80,7 @@ model Album {
date DateTime?
location String? @db.VarChar(255)
coverPhotoId Int?
+ isPhotography Boolean @default(false) // Show in photos experience
status String @default("draft") @db.VarChar(50)
showInUniverse Boolean @default(false)
createdAt DateTime @default(now())
@@ -133,9 +136,32 @@ model Media {
thumbnailUrl String? @db.Text
width Int?
height Int?
+ exifData Json? // EXIF data for photos
altText String? @db.Text // Alt text for accessibility
description String? @db.Text // Optional description
- usedIn Json @default("[]") // Track where media is used
+ isPhotography Boolean @default(false) // Star for photos experience
+ usedIn Json @default("[]") // Track where media is used (legacy)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
+
+ // Relations
+ usage MediaUsage[]
+}
+
+// Media usage tracking table
+model MediaUsage {
+ id Int @id @default(autoincrement())
+ mediaId Int
+ contentType String @db.VarChar(50) // 'project', 'post', 'album'
+ contentId Int
+ fieldName String @db.VarChar(100) // 'featuredImage', 'logoUrl', 'gallery', 'content'
+ createdAt DateTime @default(now())
+ updatedAt DateTime @updatedAt
+
+ // Relations
+ media Media @relation(fields: [mediaId], references: [id], onDelete: Cascade)
+
+ @@unique([mediaId, contentType, contentId, fieldName])
+ @@index([mediaId])
+ @@index([contentType, contentId])
}
\ No newline at end of file
diff --git a/prisma/seed.ts b/prisma/seed.ts
index 1ffb90c..791f5e5 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -24,7 +24,7 @@ async function main() {
year: 2023,
client: 'Personal Project',
role: 'Founder & Designer',
- technologies: ['React Native', 'TypeScript', 'Node.js', 'PostgreSQL'],
+ projectType: 'work',
featuredImage: '/images/projects/maitsu-cover.png',
backgroundColor: '#FFF7EA',
highlightColor: '#F77754',
@@ -43,7 +43,7 @@ async function main() {
year: 2022,
client: 'Slack Technologies',
role: 'Senior Product Designer',
- technologies: ['Design Systems', 'User Research', 'Prototyping', 'Strategy'],
+ projectType: 'work',
featuredImage: '/images/projects/slack-cover.png',
backgroundColor: '#4a154b',
highlightColor: '#611F69',
@@ -62,7 +62,7 @@ async function main() {
year: 2019,
client: 'Figma Inc.',
role: 'Product Designer',
- technologies: ['Product Design', 'Prototyping', 'User Research', 'Design Systems'],
+ projectType: 'work',
featuredImage: '/images/projects/figma-cover.png',
backgroundColor: '#2c2c2c',
highlightColor: '#0ACF83',
@@ -81,7 +81,7 @@ async function main() {
year: 2011,
client: 'Pinterest',
role: 'Product Designer #1',
- technologies: ['Product Design', 'Mobile Design', 'Design Leadership', 'Visual Design'],
+ projectType: 'work',
featuredImage: '/images/projects/pinterest-cover.png',
backgroundColor: '#f7f7f7',
highlightColor: '#CB1F27',
@@ -92,7 +92,82 @@ async function main() {
})
])
- console.log(`✅ Created ${projects.length} projects`)
+ console.log(`✅ Created ${projects.length} work projects`)
+
+ // Create Labs projects
+ const labsProjects = await Promise.all([
+ prisma.project.create({
+ data: {
+ slug: 'granblue-team',
+ title: 'granblue.team',
+ subtitle: 'Comprehensive web app for Granblue Fantasy players',
+ description: 'A comprehensive web application for Granblue Fantasy players to track raids, manage crews, and optimize team compositions. Features real-time raid tracking, character databases, and community tools.',
+ year: 2022,
+ client: 'Personal Project',
+ role: 'Full-Stack Developer',
+ externalUrl: 'https://granblue.team',
+ backgroundColor: '#1a1a2e',
+ highlightColor: '#16213e',
+ projectType: 'labs',
+ displayOrder: 1,
+ status: 'published',
+ publishedAt: new Date()
+ }
+ }),
+ prisma.project.create({
+ data: {
+ slug: 'subway-board',
+ title: 'Subway Board',
+ subtitle: 'Beautiful, minimalist NYC subway dashboard',
+ description: 'A beautiful, minimalist dashboard displaying real-time NYC subway arrival times. Clean interface inspired by the classic subway map design with live MTA data integration.',
+ year: 2023,
+ client: 'Personal Project',
+ role: 'Developer & Designer',
+ backgroundColor: '#0f4c81',
+ highlightColor: '#1e3a5f',
+ projectType: 'labs',
+ displayOrder: 2,
+ status: 'published',
+ publishedAt: new Date()
+ }
+ }),
+ prisma.project.create({
+ data: {
+ slug: 'siero-discord',
+ title: 'Siero for Discord',
+ subtitle: 'Discord bot for Granblue Fantasy communities',
+ description: 'A Discord bot for Granblue Fantasy communities providing character lookups, raid notifications, and server management tools. Serves thousands of users across multiple servers.',
+ year: 2021,
+ client: 'Personal Project',
+ role: 'Bot Developer',
+ backgroundColor: '#5865f2',
+ highlightColor: '#4752c4',
+ projectType: 'labs',
+ displayOrder: 3,
+ status: 'published',
+ publishedAt: new Date()
+ }
+ }),
+ prisma.project.create({
+ data: {
+ slug: 'homelab',
+ title: 'Homelab',
+ subtitle: 'Self-hosted infrastructure on Kubernetes',
+ description: 'Self-hosted infrastructure running on Kubernetes with monitoring, media servers, and development environments. Includes automated deployments and backup strategies.',
+ year: 2023,
+ client: 'Personal Project',
+ role: 'DevOps Engineer',
+ backgroundColor: '#ff6b35',
+ highlightColor: '#e55a2b',
+ projectType: 'labs',
+ displayOrder: 4,
+ status: 'published',
+ publishedAt: new Date()
+ }
+ })
+ ])
+
+ console.log(`✅ Created ${labsProjects.length} labs projects`)
// Create test posts
const posts = await Promise.all([
@@ -157,6 +232,7 @@ async function main() {
date: new Date('2024-03-15'),
location: 'Tokyo, Japan',
status: 'published',
+ isPhotography: true,
showInUniverse: true
}
})
@@ -172,6 +248,8 @@ async function main() {
height: 1080,
caption: 'Tokyo Tower at sunset',
displayOrder: 1,
+ status: 'published',
+ showInPhotos: true,
exifData: {
camera: 'Sony A7III',
lens: '24-70mm f/2.8',
@@ -190,7 +268,9 @@ async function main() {
width: 1920,
height: 1080,
caption: 'The famous Shibuya crossing',
- displayOrder: 2
+ displayOrder: 2,
+ status: 'published',
+ showInPhotos: true
}
})
])
diff --git a/src/lib/components/DynamicPostContent.svelte b/src/lib/components/DynamicPostContent.svelte
new file mode 100644
index 0000000..9c1d90f
--- /dev/null
+++ b/src/lib/components/DynamicPostContent.svelte
@@ -0,0 +1,395 @@
+
+
+
+
+
+ {#if attachment.caption}
+
+ {/if}
+