From 2f504abb57380f18b092433f3e0600ffe46928b0 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 1 Jun 2025 23:48:10 -0700 Subject: [PATCH] big update --- PRD-cms-functionality.md | 403 ++++-- PRD-media-library.md | 254 ++-- package-lock.json | 7 + package.json | 1 + .../migration.sql | 8 + .../migration.sql | 2 + .../migration.sql | 2 + .../migration.sql | 5 + .../migration.sql | 6 + .../add_media_usage_tracking/migration.sql | 24 + prisma/schema.prisma | 32 +- prisma/seed.ts | 92 +- src/lib/components/DynamicPostContent.svelte | 395 ++++++ src/lib/components/LabCard.svelte | 148 +- src/lib/components/PhotoGrid.svelte | 71 +- src/lib/components/PhotoItem.svelte | 20 +- src/lib/components/PostContent.svelte | 44 +- src/lib/components/ProjectContent.svelte | 281 ++++ src/lib/components/ProjectItem.svelte | 89 +- src/lib/components/ProjectList.svelte | 1 + .../ProjectPasswordProtection.svelte | 243 ++++ src/lib/components/UniverseAlbumCard.svelte | 220 +++ src/lib/components/UniverseFeed.svelte | 42 + src/lib/components/UniversePostCard.svelte | 244 ++++ src/lib/components/admin/AdminNavBar.svelte | 11 +- .../admin/DeleteConfirmationModal.svelte | 48 +- .../components/admin/MediaDetailsModal.svelte | 254 +++- src/lib/components/admin/MediaSelector.svelte | 87 ++ src/lib/components/admin/PostDropdown.svelte | 83 +- src/lib/components/admin/ProjectForm.svelte | 52 +- .../admin/ProjectMetadataForm.svelte | 37 + src/lib/components/admin/Select.svelte | 162 +++ .../components/admin/SimplePostForm.svelte | 29 +- .../components/admin/UniverseComposer.svelte | 24 +- src/lib/schemas/project.ts | 16 +- src/lib/server/media-usage.ts | 262 ++++ src/lib/types/photos.ts | 1 + src/lib/types/project.ts | 16 +- src/routes/+page.ts | 2 +- src/routes/admin/albums/+page.svelte | 271 ++++ .../admin/albums/[id]/edit/+page.svelte | 1206 +++++++++++++++++ src/routes/admin/albums/new/+page.svelte | 381 ++++++ src/routes/admin/media/+page.svelte | 613 ++++++++- src/routes/admin/media/upload/+page.svelte | 514 +++++++ src/routes/admin/posts/+page.svelte | 602 ++++++-- src/routes/admin/posts/new/+page.svelte | 16 +- src/routes/admin/projects/+page.svelte | 15 +- .../admin/universe/compose/+page.svelte | 2 +- src/routes/api/albums/+server.ts | 66 +- src/routes/api/albums/[id]/+server.ts | 196 +++ src/routes/api/albums/[id]/photos/+server.ts | 164 +++ .../api/albums/by-slug/[slug]/+server.ts | 57 + src/routes/api/media/+server.ts | 6 + src/routes/api/media/[id]/+server.ts | 76 +- src/routes/api/media/[id]/usage/+server.ts | 49 +- .../api/media/backfill-usage/+server.ts | 142 ++ src/routes/api/media/bulk-delete/+server.ts | 239 ++++ src/routes/api/media/upload/+server.ts | 86 ++ src/routes/api/photos/+server.ts | 130 ++ .../photos/[albumSlug]/[photoId]/+server.ts | 80 ++ src/routes/api/photos/[id]/+server.ts | 128 ++ src/routes/api/posts/+server.ts | 59 + src/routes/api/posts/[id]/+server.ts | 55 + .../api/posts/by-slug/[slug]/+server.ts | 53 + src/routes/api/projects/+server.ts | 80 +- src/routes/api/projects/[id]/+server.ts | 67 +- src/routes/api/universe/+server.ts | 145 ++ src/routes/labs/+page.svelte | 48 +- src/routes/labs/+page.ts | 67 +- src/routes/labs/[slug]/+page.svelte | 152 +++ src/routes/labs/[slug]/+page.ts | 34 + src/routes/photos/+page.svelte | 67 +- src/routes/photos/+page.ts | 430 +----- .../photos/[albumSlug]/[photoId]/+page.svelte | 471 +++++++ .../photos/[albumSlug]/[photoId]/+page.ts | 30 + src/routes/photos/[slug]/+page.svelte | 223 +++ src/routes/photos/[slug]/+page.ts | 31 + src/routes/rss/+server.ts | 227 ++++ src/routes/rss/photos/+server.ts | 154 +++ src/routes/rss/universe/+server.ts | 161 +++ src/routes/universe/+page.server.ts | 25 +- src/routes/universe/+page.svelte | 33 +- src/routes/universe/[slug]/+page.server.ts | 33 +- src/routes/universe/[slug]/+page.svelte | 85 +- src/routes/work/[slug]/+page.svelte | 336 +---- src/routes/work/[slug]/+page.ts | 9 +- 86 files changed, 10275 insertions(+), 1557 deletions(-) create mode 100644 prisma/migrations/20250531181345_remove_technologies_field/migration.sql create mode 100644 prisma/migrations/20250531202127_add_media_usage_tracking/migration.sql create mode 100644 prisma/migrations/20250531210030_add_post_attachments/migration.sql create mode 100644 prisma/migrations/20250531213353_add_photography_flags/migration.sql create mode 100644 prisma/migrations/20250601021128_add_project_type_and_password_protection/migration.sql create mode 100644 prisma/migrations/add_media_usage_tracking/migration.sql create mode 100644 src/lib/components/DynamicPostContent.svelte create mode 100644 src/lib/components/ProjectContent.svelte create mode 100644 src/lib/components/ProjectPasswordProtection.svelte create mode 100644 src/lib/components/UniverseAlbumCard.svelte create mode 100644 src/lib/components/UniverseFeed.svelte create mode 100644 src/lib/components/UniversePostCard.svelte create mode 100644 src/lib/components/admin/Select.svelte create mode 100644 src/lib/server/media-usage.ts create mode 100644 src/routes/admin/albums/+page.svelte create mode 100644 src/routes/admin/albums/[id]/edit/+page.svelte create mode 100644 src/routes/admin/albums/new/+page.svelte create mode 100644 src/routes/admin/media/upload/+page.svelte create mode 100644 src/routes/api/albums/[id]/+server.ts create mode 100644 src/routes/api/albums/[id]/photos/+server.ts create mode 100644 src/routes/api/albums/by-slug/[slug]/+server.ts create mode 100644 src/routes/api/media/backfill-usage/+server.ts create mode 100644 src/routes/api/media/bulk-delete/+server.ts create mode 100644 src/routes/api/photos/+server.ts create mode 100644 src/routes/api/photos/[albumSlug]/[photoId]/+server.ts create mode 100644 src/routes/api/photos/[id]/+server.ts create mode 100644 src/routes/api/posts/by-slug/[slug]/+server.ts create mode 100644 src/routes/api/universe/+server.ts create mode 100644 src/routes/labs/[slug]/+page.svelte create mode 100644 src/routes/labs/[slug]/+page.ts create mode 100644 src/routes/photos/[albumSlug]/[photoId]/+page.svelte create mode 100644 src/routes/photos/[albumSlug]/[photoId]/+page.ts create mode 100644 src/routes/photos/[slug]/+page.svelte create mode 100644 src/routes/photos/[slug]/+page.ts create mode 100644 src/routes/rss/+server.ts create mode 100644 src/routes/rss/photos/+server.ts create mode 100644 src/routes/rss/universe/+server.ts 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 @@ + + +
+
+
+ + {getPostTypeLabel(post.postType)} + + +
+ + {#if post.title} +

{post.title}

+ {/if} +
+ + {#if post.linkUrl} +
+ +
+ {/if} + + {#if post.attachments && Array.isArray(post.attachments) && post.attachments.length > 0} +
+

Attachments

+
+ {#each post.attachments as attachment} +
+ {attachment.caption + {#if attachment.caption} +

{attachment.caption}

+ {/if} +
+ {/each} +
+
+ {/if} + + {#if renderedContent} +
+ {@html renderedContent} +
+ {:else if post.excerpt} +
+

{post.excerpt}

+
+ {/if} + + +
+ + \ No newline at end of file diff --git a/src/lib/components/LabCard.svelte b/src/lib/components/LabCard.svelte index bb6392d..d787959 100644 --- a/src/lib/components/LabCard.svelte +++ b/src/lib/components/LabCard.svelte @@ -1,22 +1,64 @@ -
-
-

{project.title}

- {project.year} -
+{#if isClickable} + +
+

{project.title}

+ {project.year} +
-

{project.description}

+

{project.description}

- {#if project.url || project.github} -
- {#if project.url} + {#if project.externalUrl} +
+ + + + + Visit Project + +
+ {/if} + + + {#if project.status === 'password-protected'} +
+ + + + + + Password Protected +
+ {/if} + +{:else} +
+
+

{project.title}

+ {project.year} +
+ +

{project.description}

+ + {#if project.externalUrl} +
Visit Project - {/if} - {#if project.github} - - - - - GitHub - - {/if} -
- {/if} -
+
+ {/if} + + + {#if project.status === 'list-only'} +
+ + + + + View Only +
+ {/if} +
+{/if} + + .status-indicator { + display: flex; + align-items: center; + gap: $unit; + font-size: 0.875rem; + padding: $unit $unit-2x; + border-radius: $unit-2x; + margin-top: $unit-2x; + + &.list-only { + background: rgba(239, 68, 68, 0.1); + color: #dc2626; + } + + &.password-protected { + background: rgba(251, 191, 36, 0.1); + color: #d97706; + } + + svg { + width: 14px; + height: 14px; + flex-shrink: 0; + } + + span { + font-weight: 500; + } + } + \ No newline at end of file diff --git a/src/lib/components/PhotoGrid.svelte b/src/lib/components/PhotoGrid.svelte index 9069060..ade94e8 100644 --- a/src/lib/components/PhotoGrid.svelte +++ b/src/lib/components/PhotoGrid.svelte @@ -1,84 +1,37 @@
{#each photoItems as item} - + {/each}
-{#if lightboxPhoto} - -{/if} - \ No newline at end of file diff --git a/src/lib/components/ProjectItem.svelte b/src/lib/components/ProjectItem.svelte index ecbce0e..e1fb196 100644 --- a/src/lib/components/ProjectItem.svelte +++ b/src/lib/components/ProjectItem.svelte @@ -9,6 +9,7 @@ slug: string description: string highlightColor: string + status?: 'draft' | 'published' | 'list-only' | 'password-protected' index?: number } @@ -19,10 +20,14 @@ slug, description, highlightColor, + status = 'published', index = 0 }: Props = $props() const isEven = $derived(index % 2 === 0) + const isClickable = $derived(status === 'published' || status === 'password-protected') + const isListOnly = $derived(status === 'list-only') + const isPasswordProtected = $derived(status === 'password-protected') // Create highlighted description const highlightedDescription = $derived( @@ -151,21 +156,26 @@ } function handleClick() { - goto(`/work/${slug}`) + if (isClickable) { + goto(`/work/${slug}`) + } }
e.key === 'Enter' && handleClick()} - onmousemove={handleMouseMove} - onmouseenter={handleMouseEnter} - onmouseleave={handleMouseLeave} + onmousemove={isClickable ? handleMouseMove : undefined} + onmouseenter={isClickable ? handleMouseEnter : undefined} + onmouseleave={isClickable ? handleMouseLeave : undefined} style="transform: {transform};" - role="button" - tabindex="0" + role={isClickable ? 'button' : 'article'} + tabindex={isClickable ? 0 : -1} >

{@html highlightedDescription}

+ + {#if isListOnly} +
+ + + + + + Coming Soon +
+ {:else if isPasswordProtected} +
+ + + + + + Password Required +
+ {/if}
@@ -192,15 +222,29 @@ border-radius: $card-corner-radius; transition: transform 0.15s ease-out, - box-shadow 0.15s ease-out; + box-shadow 0.15s ease-out, + opacity 0.15s ease-out; transform-style: preserve-3d; will-change: transform; - cursor: pointer; + cursor: default; - &:hover { - box-shadow: - 0 10px 30px rgba(0, 0, 0, 0.1), - 0 1px 8px rgba(0, 0, 0, 0.06); + &.clickable { + cursor: pointer; + + &:hover { + box-shadow: + 0 10px 30px rgba(0, 0, 0, 0.1), + 0 1px 8px rgba(0, 0, 0, 0.06); + } + } + + &.list-only { + opacity: 0.7; + background: $grey-97; + } + + &.password-protected { + // Keep full interactivity for password-protected items } &.odd { @@ -252,6 +296,27 @@ color: $grey-00; } + .status-indicator { + display: flex; + align-items: center; + gap: $unit-half; + margin-top: $unit; + font-size: 0.875rem; + font-weight: 500; + + &.list-only { + color: $grey-60; + } + + &.password-protected { + color: $blue-50; + } + + svg { + flex-shrink: 0; + } + } + @include breakpoint('phone') { .project-item { flex-direction: column !important; diff --git a/src/lib/components/ProjectList.svelte b/src/lib/components/ProjectList.svelte index a5820f9..41ba627 100644 --- a/src/lib/components/ProjectList.svelte +++ b/src/lib/components/ProjectList.svelte @@ -37,6 +37,7 @@ slug={project.slug} description={project.description || ''} highlightColor={project.highlightColor || '#333'} + status={project.status} {index} /> diff --git a/src/lib/components/ProjectPasswordProtection.svelte b/src/lib/components/ProjectPasswordProtection.svelte new file mode 100644 index 0000000..f8d154d --- /dev/null +++ b/src/lib/components/ProjectPasswordProtection.svelte @@ -0,0 +1,243 @@ + + +{#if isUnlocked} + {@render children?.()} +{:else} + {#snippet passwordHeader()} +
+
+ + + + +
+

This project is password protected

+

Please enter the password to view this project.

+
+ {/snippet} + + {#snippet passwordContent()} +
+
+
+ + +
+ + {#if error} +
{error}
+ {/if} +
+ +
+ {#if projectType === 'labs'} + ← Back to labs + {:else} + ← Back to projects + {/if} +
+
+ {/snippet} + + {@render passwordHeader()} + {@render passwordContent()} +{/if} + + \ No newline at end of file diff --git a/src/lib/components/UniverseAlbumCard.svelte b/src/lib/components/UniverseAlbumCard.svelte new file mode 100644 index 0000000..0ee97bb --- /dev/null +++ b/src/lib/components/UniverseAlbumCard.svelte @@ -0,0 +1,220 @@ + + +
+
+
+
+ Album +
+ +
+ + {#if album.coverPhoto} +
+ {album.coverPhoto.caption +
+ {album.photosCount || 0} photo{(album.photosCount || 0) !== 1 ? 's' : ''} +
+
+ {/if} + +
+

+ {album.title} +

+ + {#if album.location || album.date} +
+ {#if album.date} + 📅 {formatDate(album.date)} + {/if} + {#if album.location} + 📍 {album.location} + {/if} +
+ {/if} + + {#if album.description} +

{album.description}

+ {/if} +
+ +
+ + View album → + + +
+
+
+ + \ No newline at end of file diff --git a/src/lib/components/UniverseFeed.svelte b/src/lib/components/UniverseFeed.svelte new file mode 100644 index 0000000..572b62d --- /dev/null +++ b/src/lib/components/UniverseFeed.svelte @@ -0,0 +1,42 @@ + + +
+ {#if items && items.length > 0} + {#each items as item} + {#if item.type === 'post'} + + {:else if item.type === 'album'} + + {/if} + {/each} + {:else} +
+

No content found in the universe yet.

+
+ {/if} +
+ + \ No newline at end of file diff --git a/src/lib/components/UniversePostCard.svelte b/src/lib/components/UniversePostCard.svelte new file mode 100644 index 0000000..9b47ccf --- /dev/null +++ b/src/lib/components/UniversePostCard.svelte @@ -0,0 +1,244 @@ + + +
+
+
+
+ {getPostTypeLabel(post.postType || 'post')} +
+ +
+ + {#if post.title} +

+ {post.title} +

+ {/if} + + {#if post.linkUrl} + +
+ + {post.linkUrl} + + {#if post.linkDescription} +

{post.linkDescription}

+ {/if} +
+ {/if} + +
+ {#if post.excerpt} +

{post.excerpt}

+ {:else if post.content} +

{getContentExcerpt(post.content)}

+ {/if} +
+ + {#if post.attachments && Array.isArray(post.attachments) && post.attachments.length > 0} +
+
+ 📎 {post.attachments.length} attachment{post.attachments.length > 1 ? 's' : ''} +
+
+ {/if} + +
+ + Read more → + + +
+
+
+ + \ No newline at end of file diff --git a/src/lib/components/admin/AdminNavBar.svelte b/src/lib/components/admin/AdminNavBar.svelte index b2f0b21..646377e 100644 --- a/src/lib/components/admin/AdminNavBar.svelte +++ b/src/lib/components/admin/AdminNavBar.svelte @@ -18,6 +18,7 @@ { text: 'Dashboard', href: '/admin', icon: DashboardIcon }, { text: 'Projects', href: '/admin/projects', icon: WorkIcon }, { text: 'Universe', href: '/admin/posts', icon: UniverseIcon }, + { text: 'Albums', href: '/admin/albums', icon: PhotosIcon }, { text: 'Media', href: '/admin/media', icon: PhotosIcon } ] @@ -29,9 +30,11 @@ ? 1 : currentPath.startsWith('/admin/posts') ? 2 - : currentPath.startsWith('/admin/media') + : currentPath.startsWith('/admin/albums') ? 3 - : -1 + : currentPath.startsWith('/admin/media') + ? 4 + : -1 ) @@ -134,8 +137,8 @@ } .brand-logo { - height: 40px; - width: 40px; + height: 32px; + width: 32px; display: flex; align-items: center; justify-content: center; diff --git a/src/lib/components/admin/DeleteConfirmationModal.svelte b/src/lib/components/admin/DeleteConfirmationModal.svelte index a740b98..6e4c838 100644 --- a/src/lib/components/admin/DeleteConfirmationModal.svelte +++ b/src/lib/components/admin/DeleteConfirmationModal.svelte @@ -1,53 +1,57 @@ -
-
e.stopPropagation()}> -

{title}

-

{message}

-
- - +{#if isOpen} +
+
e.stopPropagation()}> +

{title}

+

{message}

+
+ + +
-
+{/if} \ No newline at end of file diff --git a/src/lib/components/admin/SimplePostForm.svelte b/src/lib/components/admin/SimplePostForm.svelte index eb1790f..5ebbe88 100644 --- a/src/lib/components/admin/SimplePostForm.svelte +++ b/src/lib/components/admin/SimplePostForm.svelte @@ -7,7 +7,7 @@ import Input from './Input.svelte' interface Props { - postType: 'microblog' | 'link' + postType: 'post' postId?: number initialData?: { title?: string @@ -45,21 +45,20 @@ // Check if form has content const hasContent = $derived(() => { - if (postType === 'microblog') { - return textContent().trim().length > 0 - } else if (postType === 'link') { - return linkUrl && linkUrl.trim().length > 0 - } - return false + // For posts, check if either content exists or it's a link with URL + const hasTextContent = textContent().trim().length > 0 + const hasLinkContent = linkUrl && linkUrl.trim().length > 0 + return hasTextContent || hasLinkContent }) async function handleSave(publishStatus: 'draft' | 'published') { - if (postType === 'microblog' && isOverLimit) { + if (isOverLimit) { error = 'Post is too long' return } - if (postType === 'link' && !linkUrl) { + // For link posts, URL is required + if (linkUrl && !linkUrl.trim()) { error = 'Link URL is required' return } @@ -75,15 +74,15 @@ } const payload: any = { - postType, - status: publishStatus + type: 'post', // Use simplified post type + status: publishStatus, + content: content } - if (postType === 'microblog') { - payload.content = content - } else if (postType === 'link') { + // Add link fields if they're provided + if (linkUrl && linkUrl.trim()) { payload.title = title || linkUrl - payload.linkUrl = linkUrl + payload.link_url = linkUrl payload.linkDescription = linkDescription } diff --git a/src/lib/components/admin/UniverseComposer.svelte b/src/lib/components/admin/UniverseComposer.svelte index e2259e1..3ec0eb2 100644 --- a/src/lib/components/admin/UniverseComposer.svelte +++ b/src/lib/components/admin/UniverseComposer.svelte @@ -15,10 +15,10 @@ export let isOpen = false export let initialMode: 'modal' | 'page' = 'modal' - export let initialPostType: 'post' | 'essay' | 'album' = 'post' + export let initialPostType: 'post' | 'essay' = 'post' export let initialContent: JSONContent | undefined = undefined - type PostType = 'post' | 'essay' | 'album' + type PostType = 'post' | 'essay' type ComposerMode = 'modal' | 'page' let postType: PostType = initialPostType @@ -212,24 +212,24 @@ if (postType === 'essay') { postData = { ...postData, - type: 'blog', + type: 'essay', title: essayTitle, slug: essaySlug, excerpt: essayExcerpt, tags: essayTags ? essayTags.split(',').map((tag) => tag.trim()) : [] } - } else if (showLinkFields) { - postData = { - ...postData, - type: 'link', - linkUrl, - linkTitle, - linkDescription - } } else { + // All other content is just a "post" with optional link data and attachments postData = { ...postData, - type: attachedPhotos.length > 0 ? 'photo' : 'microblog' + type: 'post' + } + + // Add link fields if present + if (showLinkFields) { + postData.link_url = linkUrl + postData.linkTitle = linkTitle + postData.linkDescription = linkDescription } } diff --git a/src/lib/schemas/project.ts b/src/lib/schemas/project.ts index 74a99f4..999feb8 100644 --- a/src/lib/schemas/project.ts +++ b/src/lib/schemas/project.ts @@ -19,7 +19,19 @@ export const projectSchema = z.object({ .regex(/^#[0-9A-Fa-f]{6}$/) .optional() .or(z.literal('')), - status: z.enum(['draft', 'published']) -}) + status: z.enum(['draft', 'published', 'list-only', 'password-protected']), + password: z.string().optional() +}).refine( + (data) => { + if (data.status === 'password-protected') { + return data.password && data.password.trim().length > 0 + } + return true + }, + { + message: 'Password is required when status is password-protected', + path: ['password'] + } +) export type ProjectSchema = z.infer diff --git a/src/lib/server/media-usage.ts b/src/lib/server/media-usage.ts new file mode 100644 index 0000000..8dd6536 --- /dev/null +++ b/src/lib/server/media-usage.ts @@ -0,0 +1,262 @@ +import { prisma } from './database.js' + +export interface MediaUsageReference { + mediaId: number + contentType: 'project' | 'post' | 'album' + contentId: number + fieldName: string +} + +export interface MediaUsageDisplay { + contentType: string + contentId: number + contentTitle: string + fieldName: string + fieldDisplayName: string + contentUrl?: string + createdAt: Date +} + +/** + * Track media usage for a piece of content + */ +export async function trackMediaUsage(references: MediaUsageReference[]) { + if (references.length === 0) return + + // Use upsert to handle duplicates gracefully + const operations = references.map(ref => + prisma.mediaUsage.upsert({ + where: { + mediaId_contentType_contentId_fieldName: { + mediaId: ref.mediaId, + contentType: ref.contentType, + contentId: ref.contentId, + fieldName: ref.fieldName + } + }, + update: { + updatedAt: new Date() + }, + create: { + mediaId: ref.mediaId, + contentType: ref.contentType, + contentId: ref.contentId, + fieldName: ref.fieldName + } + }) + ) + + await prisma.$transaction(operations) +} + +/** + * Remove media usage tracking for a piece of content + */ +export async function removeMediaUsage(contentType: string, contentId: number, fieldName?: string) { + await prisma.mediaUsage.deleteMany({ + where: { + contentType, + contentId, + ...(fieldName && { fieldName }) + } + }) +} + +/** + * Update media usage for a piece of content (removes old, adds new) + */ +export async function updateMediaUsage( + contentType: 'project' | 'post' | 'album', + contentId: number, + fieldName: string, + mediaIds: number[] +) { + await prisma.$transaction(async (tx) => { + // Remove existing usage for this field + await tx.mediaUsage.deleteMany({ + where: { + contentType, + contentId, + fieldName + } + }) + + // Add new usage references + if (mediaIds.length > 0) { + await tx.mediaUsage.createMany({ + data: mediaIds.map(mediaId => ({ + mediaId, + contentType, + contentId, + fieldName + })) + }) + } + }) +} + +/** + * Get usage information for a specific media item + */ +export async function getMediaUsage(mediaId: number): Promise { + const usage = await prisma.mediaUsage.findMany({ + where: { mediaId }, + orderBy: { createdAt: 'desc' } + }) + + const results: MediaUsageDisplay[] = [] + + for (const record of usage) { + let contentTitle = 'Unknown' + let contentUrl = undefined + + // Fetch content details based on type + try { + switch (record.contentType) { + case 'project': { + const project = await prisma.project.findUnique({ + where: { id: record.contentId }, + select: { title: true, slug: true } + }) + if (project) { + contentTitle = project.title + contentUrl = `/work/${project.slug}` + } + break + } + case 'post': { + const post = await prisma.post.findUnique({ + where: { id: record.contentId }, + select: { title: true, slug: true, postType: true } + }) + if (post) { + contentTitle = post.title || `${post.postType} post` + contentUrl = `/universe/${post.slug}` + } + break + } + case 'album': { + const album = await prisma.album.findUnique({ + where: { id: record.contentId }, + select: { title: true, slug: true } + }) + if (album) { + contentTitle = album.title + contentUrl = `/photos/${album.slug}` + } + break + } + } + } catch (error) { + console.error(`Error fetching ${record.contentType} ${record.contentId}:`, error) + } + + results.push({ + contentType: record.contentType, + contentId: record.contentId, + contentTitle, + fieldName: record.fieldName, + fieldDisplayName: getFieldDisplayName(record.fieldName), + contentUrl, + createdAt: record.createdAt + }) + } + + return results +} + +/** + * Get friendly field names for display + */ +function getFieldDisplayName(fieldName: string): string { + const displayNames: Record = { + 'featuredImage': 'Featured Image', + 'logoUrl': 'Logo', + 'gallery': 'Gallery', + 'content': 'Content', + 'coverPhotoId': 'Cover Photo', + 'photoId': 'Photo', + 'attachments': 'Attachments' + } + + return displayNames[fieldName] || fieldName +} + +/** + * Extract media IDs from various data structures + */ +export function extractMediaIds(data: any, fieldName: string): number[] { + const value = data[fieldName] + if (!value) return [] + + switch (fieldName) { + case 'gallery': + case 'attachments': + // Gallery/attachments are arrays of media objects with id property + if (Array.isArray(value)) { + return value + .map(item => typeof item === 'object' ? item.id : parseInt(item)) + .filter(id => !isNaN(id)) + } + return [] + + case 'featuredImage': + case 'logoUrl': + // Single media URL - extract ID from URL or assume it's an ID + if (typeof value === 'string') { + // Try to extract ID from URL pattern (e.g., /api/media/123/...) + const match = value.match(/\/api\/media\/(\d+)/) + return match ? [parseInt(match[1])] : [] + } else if (typeof value === 'number') { + return [value] + } + return [] + + case 'content': + // Extract from rich text content (Edra editor) + return extractMediaFromRichText(value) + + default: + return [] + } +} + +/** + * Extract media IDs from rich text content (TipTap/Edra JSON) + */ +function extractMediaFromRichText(content: any): number[] { + if (!content || typeof content !== 'object') return [] + + const mediaIds: number[] = [] + + function traverse(node: any) { + if (!node) return + + // Handle image nodes + if (node.type === 'image' && node.attrs?.src) { + const match = node.attrs.src.match(/\/api\/media\/(\d+)/) + if (match) { + mediaIds.push(parseInt(match[1])) + } + } + + // Handle gallery nodes + if (node.type === 'gallery' && node.attrs?.images) { + for (const image of node.attrs.images) { + if (image.id) { + mediaIds.push(image.id) + } + } + } + + // Recursively traverse child nodes + if (node.content) { + for (const child of node.content) { + traverse(child) + } + } + } + + traverse(content) + return [...new Set(mediaIds)] // Remove duplicates +} \ No newline at end of file diff --git a/src/lib/types/photos.ts b/src/lib/types/photos.ts index 2e03990..fe03a98 100644 --- a/src/lib/types/photos.ts +++ b/src/lib/types/photos.ts @@ -21,6 +21,7 @@ export interface Photo { export interface PhotoAlbum { id: string + slug: string title: string description?: string coverPhoto: Photo diff --git a/src/lib/types/project.ts b/src/lib/types/project.ts index 06cebce..e11df9a 100644 --- a/src/lib/types/project.ts +++ b/src/lib/types/project.ts @@ -1,3 +1,6 @@ +export type ProjectStatus = 'draft' | 'published' | 'list-only' | 'password-protected' +export type ProjectType = 'work' | 'labs' + export interface Project { id: number slug: string @@ -7,7 +10,6 @@ export interface Project { year: number client: string | null role: string | null - technologies: string[] | null featuredImage: string | null logoUrl: string | null gallery: any[] | null @@ -15,8 +17,10 @@ export interface Project { caseStudyContent: any | null backgroundColor: string | null highlightColor: string | null + projectType: ProjectType displayOrder: number - status: string + status: ProjectStatus + password: string | null createdAt?: string updatedAt?: string publishedAt?: string | null @@ -29,14 +33,15 @@ export interface ProjectFormData { year: number client: string role: string - technologies: string + projectType: ProjectType externalUrl: string featuredImage: string | null backgroundColor: string highlightColor: string logoUrl: string gallery: any[] | null - status: 'draft' | 'published' + status: ProjectStatus + password: string caseStudyContent: any } @@ -47,7 +52,7 @@ export const defaultProjectFormData: ProjectFormData = { year: new Date().getFullYear(), client: '', role: '', - technologies: '', + projectType: 'work', externalUrl: '', featuredImage: null, backgroundColor: '', @@ -55,6 +60,7 @@ export const defaultProjectFormData: ProjectFormData = { logoUrl: '', gallery: null, status: 'draft', + password: '', caseStudyContent: { type: 'doc', content: [{ type: 'paragraph' }] diff --git a/src/routes/+page.ts b/src/routes/+page.ts index c3785ca..7332f32 100644 --- a/src/routes/+page.ts +++ b/src/routes/+page.ts @@ -59,7 +59,7 @@ async function fetchRecentPSNGames(fetch: typeof window.fetch): Promise { - const response = await fetch('/api/projects?status=published') + const response = await fetch('/api/projects?projectType=work&includeListOnly=true&includePasswordProtected=true') if (!response.ok) { throw new Error(`Failed to fetch projects: ${response.status}`) } diff --git a/src/routes/admin/albums/+page.svelte b/src/routes/admin/albums/+page.svelte new file mode 100644 index 0000000..32eaaa2 --- /dev/null +++ b/src/routes/admin/albums/+page.svelte @@ -0,0 +1,271 @@ + + + +
+

Albums

+
+ +
+
+ + {#if error} +
{error}
+ {:else} + +
+
+ {albumTypeCounts.all || 0} + Total albums +
+
+ {albumTypeCounts.photography || 0} + Photography albums +
+
+ {albumTypeCounts.regular || 0} + Regular albums +
+
+ + +
+ +
+ + + {#if isLoading} +
+ +
+ {:else} + + {/if} + {/if} + + + \ No newline at end of file diff --git a/src/routes/admin/albums/[id]/edit/+page.svelte b/src/routes/admin/albums/[id]/edit/+page.svelte new file mode 100644 index 0000000..6f6b2d1 --- /dev/null +++ b/src/routes/admin/albums/[id]/edit/+page.svelte @@ -0,0 +1,1206 @@ + + + +
+ {#if !isLoading && album} +
+ +

🖼️ Edit Album

+
+
+ + {#if status === 'draft'} + + {/if} + +
+ {/if} +
+ + {#if isLoading} +
+ +
+ {:else if error && !album} +
+
{error}
+ +
+ {:else if album} +
+ {#if error} +
{error}
+ {/if} + +
+

Album Details

+ + + + + + + +
+ + + +
+
+ +
+

Album Settings

+ + + +
+ +
+ + + + +
+ +
+ +
+ + +
+
+

Photos ({albumPhotos.length})

+
+ + +
+
+ + +
+ + +
+

Album Statistics

+
+
+ {album._count?.photos || 0} + Photos +
+
+ {status === 'published' ? 'Published' : 'Draft'} + Status +
+
+ {new Date(album.createdAt).toLocaleDateString()} + Created +
+
+
+
+ {/if} + + + + isDeleteModalOpen = false} +/> + + + + + + + + \ No newline at end of file diff --git a/src/routes/admin/albums/new/+page.svelte b/src/routes/admin/albums/new/+page.svelte new file mode 100644 index 0000000..efbfd04 --- /dev/null +++ b/src/routes/admin/albums/new/+page.svelte @@ -0,0 +1,381 @@ + + + +
+
+ +

New Album

+
+
+ + + +
+
+ +
+ {#if error} +
{error}
+ {/if} + +
+

Album Details

+ + + + + + + +
+ + + +
+
+ +
+

Album Settings

+ + + +
+ +
+ + + + +
+ +
+ +
+
+ + + \ No newline at end of file diff --git a/src/routes/admin/media/+page.svelte b/src/routes/admin/media/+page.svelte index c46e5bc..8ea2fe3 100644 --- a/src/routes/admin/media/+page.svelte +++ b/src/routes/admin/media/+page.svelte @@ -15,6 +15,7 @@ // Filter states let filterType = $state('all') + let photographyFilter = $state('all') let searchQuery = $state('') let searchTimeout: ReturnType @@ -22,6 +23,11 @@ let selectedMedia = $state(null) let isDetailsModalOpen = $state(false) + // Multiselect states + let selectedMediaIds = $state>(new Set()) + let isMultiSelectMode = $state(false) + let isDeleting = $state(false) + onMount(async () => { await loadMedia() }) @@ -46,6 +52,9 @@ if (filterType !== 'all') { url += `&mimeType=${filterType}` } + if (photographyFilter !== 'all') { + url += `&isPhotography=${photographyFilter}` + } if (searchQuery) { url += `&search=${encodeURIComponent(searchQuery)}` } @@ -116,12 +125,185 @@ media[index] = updatedMedia } } + + // Multiselect functions + function toggleMultiSelectMode() { + isMultiSelectMode = !isMultiSelectMode + if (!isMultiSelectMode) { + selectedMediaIds.clear() + selectedMediaIds = new Set() + } + } + + function toggleMediaSelection(mediaId: number) { + if (selectedMediaIds.has(mediaId)) { + selectedMediaIds.delete(mediaId) + } else { + selectedMediaIds.add(mediaId) + } + selectedMediaIds = new Set(selectedMediaIds) // Trigger reactivity + } + + function selectAllMedia() { + selectedMediaIds = new Set(media.map(m => m.id)) + } + + function clearSelection() { + selectedMediaIds.clear() + selectedMediaIds = new Set() + } + + async function handleBulkDelete() { + if (selectedMediaIds.size === 0) return + + const confirmation = confirm( + `Are you sure you want to delete ${selectedMediaIds.size} media file${selectedMediaIds.size > 1 ? 's' : ''}? This action cannot be undone and will remove these files from any content that references them.` + ) + + if (!confirmation) return + + try { + isDeleting = true + const auth = localStorage.getItem('admin_auth') + if (!auth) return + + const response = await fetch('/api/media/bulk-delete', { + method: 'DELETE', + headers: { + 'Authorization': `Basic ${auth}`, + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + mediaIds: Array.from(selectedMediaIds) + }) + }) + + if (!response.ok) { + throw new Error('Failed to delete media files') + } + + const result = await response.json() + + // Remove deleted media from the list + media = media.filter(m => !selectedMediaIds.has(m.id)) + + // Clear selection and exit multiselect mode + selectedMediaIds.clear() + selectedMediaIds = new Set() + isMultiSelectMode = false + + // Reload to get updated total count + await loadMedia(currentPage) + + } catch (err) { + error = 'Failed to delete media files. Please try again.' + console.error('Failed to delete media:', err) + } finally { + isDeleting = false + } + } + + async function handleBulkMarkPhotography() { + if (selectedMediaIds.size === 0) return + + try { + const auth = localStorage.getItem('admin_auth') + if (!auth) return + + // Update each selected media item + const promises = Array.from(selectedMediaIds).map(async (mediaId) => { + const response = await fetch(`/api/media/${mediaId}`, { + method: 'PUT', + headers: { + 'Authorization': `Basic ${auth}`, + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ isPhotography: true }) + }) + + if (!response.ok) { + throw new Error(`Failed to update media ${mediaId}`) + } + return response.json() + }) + + await Promise.all(promises) + + // Update local media items + media = media.map(item => + selectedMediaIds.has(item.id) + ? { ...item, isPhotography: true } + : item + ) + + // Clear selection + selectedMediaIds.clear() + selectedMediaIds = new Set() + isMultiSelectMode = false + + } catch (err) { + error = 'Failed to mark items as photography. Please try again.' + console.error('Failed to mark as photography:', err) + } + } + + async function handleBulkUnmarkPhotography() { + if (selectedMediaIds.size === 0) return + + try { + const auth = localStorage.getItem('admin_auth') + if (!auth) return + + // Update each selected media item + const promises = Array.from(selectedMediaIds).map(async (mediaId) => { + const response = await fetch(`/api/media/${mediaId}`, { + method: 'PUT', + headers: { + 'Authorization': `Basic ${auth}`, + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ isPhotography: false }) + }) + + if (!response.ok) { + throw new Error(`Failed to update media ${mediaId}`) + } + return response.json() + }) + + await Promise.all(promises) + + // Update local media items + media = media.map(item => + selectedMediaIds.has(item.id) + ? { ...item, isPhotography: false } + : item + ) + + // Clear selection + selectedMediaIds.clear() + selectedMediaIds = new Set() + isMultiSelectMode = false + + } catch (err) { + error = 'Failed to remove photography status. Please try again.' + console.error('Failed to unmark photography:', err) + } + }

Media Library

+
+ {#if isMultiSelectMode} +
+ {selectedMediaIds.size} + Selected +
+ {/if}
@@ -153,6 +341,12 @@ + +
+ {#if isMultiSelectMode && media.length > 0} +
+
+ + +
+
+ {#if selectedMediaIds.size > 0} + + + + {/if} +
+
+ {/if} + {#if isLoading}
Loading media...
{:else if media.length === 0} @@ -180,71 +420,134 @@ {:else if viewMode === 'grid'}
{#each media as item} -
- +
+ {item.filename} +
+ {#if item.isPhotography} + + + + + Photo + + {/if} + {#if item.altText} + + Alt + + {:else} + + No Alt + + {/if} +
+ {formatFileSize(item.size)} +
+ +
{/each} {:else}
{#each media as item} - + {#if item.altText} + + Alt: {item.altText} + + {:else} + No alt text + {/if} +
+
+ {#if !isMultiSelectMode} + + + + {/if} +
+ + {/each} {/if} @@ -467,7 +770,7 @@ .filename { font-size: 0.875rem; color: $grey-20; - white-space: nowrap; + white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @@ -477,19 +780,11 @@ color: $grey-40; } - .alt-text { - font-size: 0.75rem; - color: $grey-30; - font-style: italic; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .no-alt-text { - font-size: 0.75rem; - color: $red-60; - font-style: italic; + .media-indicators { + display: flex; + gap: $unit-half; + flex-wrap: wrap; + margin: $unit-half 0; } } } @@ -556,10 +851,25 @@ flex-direction: column; gap: $unit-half; - .filename { - font-size: 0.925rem; - color: $grey-20; - font-weight: 500; + .filename-row { + display: flex; + align-items: center; + justify-content: space-between; + gap: $unit-2x; + + .filename { + font-size: 0.925rem; + color: $grey-20; + font-weight: 500; + flex: 1; + } + + .media-indicators { + display: flex; + gap: $unit-half; + flex-wrap: wrap; + flex-shrink: 0; + } } .file-meta { @@ -640,4 +950,163 @@ color: $grey-40; } } + + // Multiselect styles + .bulk-actions { + display: flex; + justify-content: space-between; + align-items: center; + padding: $unit-2x $unit-3x; + background: $grey-95; + border-radius: $unit; + margin-bottom: $unit-3x; + gap: $unit-2x; + + .bulk-actions-left, + .bulk-actions-right { + display: flex; + gap: $unit; + } + + .btn-small { + padding: $unit $unit-2x; + font-size: 0.8rem; + } + + .btn-danger { + background-color: $red-60; + color: white; + + &:hover:not(:disabled) { + background-color: $red-50; + } + + &:disabled { + opacity: 0.6; + cursor: not-allowed; + } + } + } + + .media-item-wrapper, + .media-row-wrapper { + position: relative; + + &.multiselect { + .selection-checkbox { + position: absolute; + top: $unit; + left: $unit; + z-index: 10; + + input[type="checkbox"] { + opacity: 0; + position: absolute; + pointer-events: none; + } + + .checkbox-label { + display: block; + width: 20px; + height: 20px; + border: 2px solid white; + border-radius: 4px; + background: rgba(0, 0, 0, 0.5); + cursor: pointer; + position: relative; + transition: all 0.2s ease; + + &::after { + content: ''; + position: absolute; + top: 2px; + left: 6px; + width: 4px; + height: 8px; + border: solid white; + border-width: 0 2px 2px 0; + transform: rotate(45deg); + opacity: 0; + transition: opacity 0.2s ease; + } + } + + input:checked + .checkbox-label { + background: #3b82f6; + border-color: #3b82f6; + + &::after { + opacity: 1; + } + } + } + + .media-item, + .media-row { + &.selected { + background-color: rgba(59, 130, 246, 0.1); + border: 2px solid #3b82f6; + } + } + } + } + + .media-row-wrapper.multiselect { + display: flex; + align-items: center; + gap: $unit-2x; + + .selection-checkbox { + position: static; + top: auto; + left: auto; + z-index: auto; + } + + .media-row { + flex: 1; + } + } + + // Indicator pill styles + .indicator-pill { + display: inline-flex; + align-items: center; + gap: $unit-half; + padding: 2px $unit; + border-radius: 4px; + font-size: 0.625rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.5px; + line-height: 1; + + svg { + width: 10px; + height: 10px; + flex-shrink: 0; + } + + &.photography { + background-color: rgba(139, 92, 246, 0.1); + color: #7c3aed; + border: 1px solid rgba(139, 92, 246, 0.2); + + svg { + fill: #7c3aed; + } + } + + &.alt-text { + background-color: rgba(34, 197, 94, 0.1); + color: #16a34a; + border: 1px solid rgba(34, 197, 94, 0.2); + } + + &.no-alt-text { + background-color: rgba(239, 68, 68, 0.1); + color: #dc2626; + border: 1px solid rgba(239, 68, 68, 0.2); + } + } diff --git a/src/routes/admin/media/upload/+page.svelte b/src/routes/admin/media/upload/+page.svelte new file mode 100644 index 0000000..1e28407 --- /dev/null +++ b/src/routes/admin/media/upload/+page.svelte @@ -0,0 +1,514 @@ + + + +
+

Upload Media

+
+ +
+
+ +
+ +
0} + ondragover={handleDragOver} + ondragleave={handleDragLeave} + ondrop={handleDrop} + > +
+ {#if files.length === 0} +
+ + + + + + + +
+

Drop images here

+

or click to browse and select files

+

Supports JPG, PNG, GIF, WebP, and SVG files

+ {:else} +
+ {files.length} file{files.length !== 1 ? 's' : ''} selected +

Drop more files to add them, or click to browse

+
+ {/if} +
+ + + + +
+ + + {#if files.length > 0} +
+
+

Files to Upload

+
+ + +
+
+ +
+ {#each files as file, index} +
+
+ {#if file.type.startsWith('image/')} + {file.name} + {:else} +
📄
+ {/if} +
+ +
+
{file.name}
+
{formatFileSize(file.size)}
+ + {#if uploadProgress[file.name]} +
+
+
+ {/if} +
+ + {#if !isUploading} + + {/if} +
+ {/each} +
+
+ {/if} + + + {#if successCount > 0 || uploadErrors.length > 0} +
+ {#if successCount > 0} +
+ ✅ Successfully uploaded {successCount} file{successCount !== 1 ? 's' : ''} + {#if successCount === files.length && uploadErrors.length === 0} +
Redirecting to media library... + {/if} +
+ {/if} + + {#if uploadErrors.length > 0} +
+

Upload Errors:

+ {#each uploadErrors as error} +
❌ {error}
+ {/each} +
+ {/if} +
+ {/if} +
+ + + \ No newline at end of file diff --git a/src/routes/admin/posts/+page.svelte b/src/routes/admin/posts/+page.svelte index 2104e6d..ece7cb6 100644 --- a/src/routes/admin/posts/+page.svelte +++ b/src/routes/admin/posts/+page.svelte @@ -2,29 +2,40 @@ import { onMount } from 'svelte' import { goto } from '$app/navigation' import AdminPage from '$lib/components/admin/AdminPage.svelte' - import DataTable from '$lib/components/admin/DataTable.svelte' import PostDropdown from '$lib/components/admin/PostDropdown.svelte' + import LoadingSpinner from '$lib/components/admin/LoadingSpinner.svelte' interface Post { id: number slug: string postType: string title: string | null + content: any // JSON content excerpt: string | null status: string tags: string[] | null + linkUrl: string | null + linkDescription: string | null + featuredImage: string | null publishedAt: string | null createdAt: string updatedAt: string } let posts = $state([]) + let filteredPosts = $state([]) let isLoading = $state(true) let error = $state('') let total = $state(0) let postTypeCounts = $state>({}) + + // Filter state + let selectedFilter = $state('all') const postTypeIcons: Record = { + post: '💭', + essay: '📝', + // Legacy types for backward compatibility blog: '📝', microblog: '💭', link: '🔗', @@ -33,66 +44,16 @@ } const postTypeLabels: Record = { - blog: 'Blog Post', - microblog: 'Microblog', - link: 'Link', - photo: 'Photo', + post: 'Post', + essay: 'Essay', + // Legacy types for backward compatibility + blog: 'Essay', + microblog: 'Post', + link: 'Post', + photo: 'Post', album: 'Album' } - const columns = [ - { - key: 'title', - label: 'Title', - width: '40%', - render: (post: Post) => { - if (post.title) { - return post.title - } - // For posts without titles, show excerpt or type - if (post.excerpt) { - return post.excerpt.substring(0, 50) + '...' - } - return `(${postTypeLabels[post.postType] || post.postType})` - } - }, - { - key: 'postType', - label: 'Type', - width: '15%', - render: (post: Post) => { - const icon = postTypeIcons[post.postType] || '📄' - const label = postTypeLabels[post.postType] || post.postType - return `${icon} ${label}` - } - }, - { - key: 'status', - label: 'Status', - width: '15%', - render: (post: Post) => { - return post.status === 'published' ? '🟢 Published' : '⚪ Draft' - } - }, - { - key: 'publishedAt', - label: 'Published', - width: '15%', - render: (post: Post) => { - if (!post.publishedAt) return '—' - return new Date(post.publishedAt).toLocaleDateString() - } - }, - { - key: 'updatedAt', - label: 'Updated', - width: '15%', - render: (post: Post) => { - return new Date(post.updatedAt).toLocaleDateString() - } - } - ] - onMount(async () => { await loadPosts() }) @@ -121,12 +82,27 @@ posts = data.posts || [] total = data.pagination?.total || posts.length - // Calculate post type counts - const counts: Record = {} + // Calculate post type counts and normalize types + const counts: Record = { + all: posts.length, + post: 0, + essay: 0 + } + posts.forEach((post) => { - counts[post.postType] = (counts[post.postType] || 0) + 1 + // Normalize legacy types to simplified types + if (post.postType === 'blog') { + counts.essay = (counts.essay || 0) + 1 + } else if (['microblog', 'link', 'photo'].includes(post.postType)) { + counts.post = (counts.post || 0) + 1 + } else { + counts[post.postType] = (counts[post.postType] || 0) + 1 + } }) postTypeCounts = counts + + // Apply initial filter + applyFilter() } catch (err) { error = 'Failed to load posts' console.error(err) @@ -135,46 +111,228 @@ } } - function handleRowClick(post: Post) { + function applyFilter() { + if (selectedFilter === 'all') { + filteredPosts = posts + } else if (selectedFilter === 'post') { + filteredPosts = posts.filter(post => + ['post', 'microblog', 'link', 'photo'].includes(post.postType) + ) + } else if (selectedFilter === 'essay') { + filteredPosts = posts.filter(post => + ['essay', 'blog'].includes(post.postType) + ) + } else { + filteredPosts = posts.filter(post => post.postType === selectedFilter) + } + } + + function handleFilterChange() { + applyFilter() + } + + function handlePostClick(post: Post) { goto(`/admin/posts/${post.id}/edit`) } + + function getPostSnippet(post: Post): string { + // Try excerpt first + if (post.excerpt) { + return post.excerpt.length > 150 ? post.excerpt.substring(0, 150) + '...' : post.excerpt + } + + // Try to extract text from content JSON + if (post.content) { + let textContent = '' + + if (typeof post.content === 'object' && post.content.content) { + // BlockNote/TipTap format + function extractText(node: any): string { + if (node.text) return node.text + if (node.content && Array.isArray(node.content)) { + return node.content.map(extractText).join(' ') + } + return '' + } + textContent = extractText(post.content) + } else if (typeof post.content === 'string') { + textContent = post.content + } + + if (textContent) { + return textContent.length > 150 ? textContent.substring(0, 150) + '...' : textContent + } + } + + // Fallback to link description for link posts + if (post.linkDescription) { + return post.linkDescription.length > 150 ? post.linkDescription.substring(0, 150) + '...' : post.linkDescription + } + + // Default fallback + return `${postTypeLabels[post.postType] || post.postType} without content` + } + + function formatDate(dateString: string): string { + const date = new Date(dateString) + const now = new Date() + const diffTime = now.getTime() - date.getTime() + const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24)) + + if (diffDays === 0) { + return 'Today' + } else if (diffDays === 1) { + return 'Yesterday' + } else if (diffDays < 7) { + return `${diffDays} days ago` + } else { + return date.toLocaleDateString('en-US', { + month: 'short', + day: 'numeric', + year: date.getFullYear() !== now.getFullYear() ? 'numeric' : undefined + }) + } + } + + function getDisplayTitle(post: Post): string { + if (post.title) return post.title + + // For posts without titles, create a meaningful display title + if (post.linkUrl) { + try { + const domain = new URL(post.linkUrl).hostname.replace('www.', '') + return `Link to ${domain}` + } catch { + return 'Link post' + } + } + + const snippet = getPostSnippet(post) + if (snippet && snippet !== `${postTypeLabels[post.postType] || post.postType} without content`) { + return snippet.length > 50 ? snippet.substring(0, 50) + '...' : snippet + } + + return `${postTypeLabels[post.postType] || post.postType}` + }
-

Posts

+

Universe

+
{#if error} -
{error}
+
{error}
{:else} +
- {total} + {postTypeCounts.all || 0} Total posts
- {#each Object.entries(postTypeCounts) as [type, count]} -
- {count} - {postTypeLabels[type] || type} -
- {/each} +
+ {postTypeCounts.post || 0} + Posts +
+
+ {postTypeCounts.essay || 0} + Essays +
- + + {#if isLoading} +
+ +
+ {:else if filteredPosts.length === 0} +
+
📝
+

No posts found

+

+ {#if selectedFilter === 'all'} + Create your first post to get started! + {:else} + No {selectedFilter}s found. Try a different filter or create a new {selectedFilter}. + {/if} +

+
+ {:else} +
+ {#each filteredPosts as post} +
handlePostClick(post)}> +
+
+ + {postTypeIcons[post.postType] || '📄'} + {postTypeLabels[post.postType] || post.postType} + + {formatDate(post.updatedAt)} +
+
+ {#if post.status === 'published'} + Published + {:else} + Draft + {/if} +
+
+ +
+

{getDisplayTitle(post)}

+ + {#if post.linkUrl} +
+ + + + + {post.linkUrl} +
+ {/if} + +

{getPostSnippet(post)}

+ + {#if post.tags && post.tags.length > 0} +
+ {#each post.tags.slice(0, 3) as tag} + #{tag} + {/each} + {#if post.tags.length > 3} + +{post.tags.length - 3} more + {/if} +
+ {/if} +
+ +
+
+ Click to edit +
+
+ + + +
+
+
+ {/each} +
+ {/if} {/if} + + .loading-container { + display: flex; + justify-content: center; + align-items: center; + min-height: 300px; + } + + .empty-state { + text-align: center; + padding: $unit-8x $unit-4x; + color: $grey-40; + + .empty-icon { + font-size: 3rem; + margin-bottom: $unit-3x; + } + + h3 { + font-size: 1.25rem; + font-weight: 600; + margin: 0 0 $unit-2x; + color: $grey-20; + } + + p { + margin: 0; + line-height: 1.5; + } + } + + .posts-list { + display: flex; + flex-direction: column; + gap: $unit-3x; + } + + .post-item { + background: white; + border: 1px solid $grey-85; + border-radius: 12px; + padding: $unit-4x; + cursor: pointer; + transition: all 0.2s ease; + display: flex; + flex-direction: column; + gap: $unit-3x; + + &:hover { + border-color: $grey-70; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + transform: translateY(-2px); + } + + &:active { + transform: translateY(0); + } + } + + .post-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: $unit-2x; + } + + .post-meta { + display: flex; + align-items: center; + gap: $unit-2x; + flex: 1; + + @media (max-width: 480px) { + flex-direction: column; + align-items: flex-start; + gap: $unit; + } + } + + .post-type { + display: inline-flex; + align-items: center; + gap: $unit-half; + padding: $unit-half $unit; + background: $grey-95; + border-radius: 6px; + font-size: 0.75rem; + font-weight: 500; + color: $grey-30; + text-transform: uppercase; + letter-spacing: 0.5px; + } + + .post-date { + font-size: 0.875rem; + color: $grey-50; + } + + .post-status { + flex-shrink: 0; + } + + .status-badge { + padding: $unit-half $unit-2x; + border-radius: 50px; + font-size: 0.75rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.5px; + + &.published { + background: rgba(34, 197, 94, 0.1); + color: #16a34a; + border: 1px solid rgba(34, 197, 94, 0.2); + } + + &.draft { + background: rgba(156, 163, 175, 0.1); + color: #6b7280; + border: 1px solid rgba(156, 163, 175, 0.2); + } + } + + .post-content { + display: flex; + flex-direction: column; + gap: $unit-2x; + flex: 1; + } + + .post-title { + font-size: 1.125rem; + font-weight: 600; + margin: 0; + color: $grey-10; + line-height: 1.4; + } + + .post-link { + display: flex; + align-items: center; + gap: $unit; + font-size: 0.875rem; + color: $blue-60; + + svg { + flex-shrink: 0; + } + + .link-url { + word-break: break-all; + } + } + + .post-snippet { + margin: 0; + font-size: 0.925rem; + line-height: 1.5; + color: $grey-30; + } + + .post-tags { + display: flex; + align-items: center; + gap: $unit; + flex-wrap: wrap; + + .tag { + font-size: 0.75rem; + color: $grey-50; + background: $grey-95; + padding: $unit-half $unit; + border-radius: 4px; + } + + .tag-more { + font-size: 0.75rem; + color: $grey-50; + font-style: italic; + } + } + + .post-footer { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: auto; + } + + .post-actions { + .edit-hint { + font-size: 0.75rem; + color: $grey-50; + opacity: 0; + transition: opacity 0.2s ease; + } + } + + .post-item:hover .edit-hint { + opacity: 1; + } + + .post-indicator { + color: $grey-60; + transition: color 0.2s ease; + } + + .post-item:hover .post-indicator { + color: $grey-30; + } + + // Responsive adjustments + @media (max-width: 768px) { + .post-item { + padding: $unit-3x; + } + } + + @media (max-width: 480px) { + .post-item { + padding: $unit-3x $unit-2x; + } + + .post-header { + flex-direction: column; + align-items: stretch; + } + + .post-status { + align-self: flex-start; + } + } + \ No newline at end of file diff --git a/src/routes/admin/posts/new/+page.svelte b/src/routes/admin/posts/new/+page.svelte index 63655c6..a44af1a 100644 --- a/src/routes/admin/posts/new/+page.svelte +++ b/src/routes/admin/posts/new/+page.svelte @@ -3,15 +3,13 @@ import { onMount } from 'svelte' import EssayForm from '$lib/components/admin/EssayForm.svelte' import SimplePostForm from '$lib/components/admin/SimplePostForm.svelte' - import PhotoPostForm from '$lib/components/admin/PhotoPostForm.svelte' - import AlbumForm from '$lib/components/admin/AlbumForm.svelte' - let postType: 'blog' | 'microblog' | 'link' | 'photo' | 'album' = 'blog' + let postType: 'post' | 'essay' = 'post' let mounted = false onMount(() => { const type = $page.url.searchParams.get('type') - if (type && ['blog', 'microblog', 'link', 'photo', 'album'].includes(type)) { + if (type && ['post', 'essay'].includes(type)) { postType = type as typeof postType } mounted = true @@ -19,13 +17,9 @@ {#if mounted} - {#if postType === 'blog'} + {#if postType === 'essay'} - {:else if postType === 'microblog' || postType === 'link'} - - {:else if postType === 'photo'} - - {:else if postType === 'album'} - + {:else} + {/if} {/if} diff --git a/src/routes/admin/projects/+page.svelte b/src/routes/admin/projects/+page.svelte index 4f36e62..ae16dd0 100644 --- a/src/routes/admin/projects/+page.svelte +++ b/src/routes/admin/projects/+page.svelte @@ -176,14 +176,13 @@ {/if} -{#if showDeleteModal && projectToDelete} - -{/if} + diff --git a/src/routes/labs/+page.ts b/src/routes/labs/+page.ts index fbe8dc3..c079497 100644 --- a/src/routes/labs/+page.ts +++ b/src/routes/labs/+page.ts @@ -1,56 +1,21 @@ import type { PageLoad } from './$types' -import type { LabProject } from '$lib/types/labs' -export const load: PageLoad = async () => { - const projects: LabProject[] = [ - { - id: 'granblue-team', - title: 'granblue.team', - 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.', - status: 'active', - technologies: [], - url: 'https://granblue.team', - github: 'https://github.com/jedmund/granblue-team', - year: 2022, - featured: true - }, - { - id: 'subway-board', - title: 'Subway Board', - 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.', - status: 'maintenance', - technologies: [], - github: 'https://github.com/jedmund/subway-board', - year: 2023, - featured: true - }, - { - id: 'siero-discord', - title: 'Siero for Discord', - description: - 'A Discord bot for Granblue Fantasy communities providing character lookups, raid notifications, and server management tools. Serves thousands of users across multiple servers.', - status: 'active', - technologies: [], - github: 'https://github.com/jedmund/siero-bot', - year: 2021, - featured: true - }, - { - id: 'homelab', - title: 'Homelab', - description: - 'Self-hosted infrastructure running on Kubernetes with monitoring, media servers, and development environments. Includes automated deployments and backup strategies.', - status: 'active', - technologies: [], - github: 'https://github.com/jedmund/homelab', - year: 2023, - featured: false +export const load: PageLoad = async ({ fetch }) => { + try { + const response = await fetch('/api/projects?projectType=labs&includeListOnly=true&includePasswordProtected=true') + if (!response.ok) { + throw new Error('Failed to fetch labs projects') + } + + const data = await response.json() + return { + projects: data.projects || [] + } + } catch (error) { + console.error('Error loading labs projects:', error) + return { + projects: [], + error: 'Failed to load projects' } - ] - - return { - projects } } diff --git a/src/routes/labs/[slug]/+page.svelte b/src/routes/labs/[slug]/+page.svelte new file mode 100644 index 0000000..5dd1ab9 --- /dev/null +++ b/src/routes/labs/[slug]/+page.svelte @@ -0,0 +1,152 @@ + + +{#if error} + +
+

Error

+
+
+

{error}

+ ← Back to labs +
+ +{:else if !project} + +
Loading project...
+ +{:else if project.status === 'list-only'} + +
+

Project Not Available

+
+
+

This project is not yet available for viewing. Please check back later.

+ ← Back to labs +
+ +{:else if project.status === 'password-protected'} + + + {#snippet children()} +
+ {#if project.logoUrl} + + {/if} +

{project.title}

+ {#if project.subtitle} +

{project.subtitle}

+ {/if} +
+ + {/snippet} + + +{:else} + +
+ {#if project.logoUrl} + + {/if} +

{project.title}

+ {#if project.subtitle} +

{project.subtitle}

+ {/if} +
+ + +{/if} + + \ No newline at end of file diff --git a/src/routes/labs/[slug]/+page.ts b/src/routes/labs/[slug]/+page.ts new file mode 100644 index 0000000..9ab9255 --- /dev/null +++ b/src/routes/labs/[slug]/+page.ts @@ -0,0 +1,34 @@ +import type { PageLoad } from './$types' +import type { Project } from '$lib/types/project' + +export const load: PageLoad = async ({ params, fetch }) => { + try { + // Find project by slug - we'll fetch all published, list-only, and password-protected projects + const response = await fetch(`/api/projects?projectType=labs&includeListOnly=true&includePasswordProtected=true`) + if (!response.ok) { + throw new Error('Failed to fetch projects') + } + + const data = await response.json() + const project = data.projects.find((p: Project) => p.slug === params.slug) + + if (!project) { + throw new Error('Project not found') + } + + // Handle different project statuses + if (project.status === 'draft') { + throw new Error('Project not found') + } + + return { + project + } + } catch (error) { + console.error('Error loading project:', error) + return { + project: null, + error: error instanceof Error ? error.message : 'Failed to load project' + } + } +} \ No newline at end of file diff --git a/src/routes/photos/+page.svelte b/src/routes/photos/+page.svelte index 3bb254b..ce6f322 100644 --- a/src/routes/photos/+page.svelte +++ b/src/routes/photos/+page.svelte @@ -4,13 +4,72 @@ const { data }: { data: PageData } = $props() - const photoItems = $derived(data.photoItems) + const photoItems = $derived(data.photoItems || []) + const error = $derived(data.error) - +
+ {#if error} +
+
+

Unable to load photos

+

{error}

+
+
+ {:else if photoItems.length === 0} +
+
+

No photos yet

+

Photography albums will appear here once published.

+
+
+ {:else} + + {/if} +
diff --git a/src/routes/photos/+page.ts b/src/routes/photos/+page.ts index e1f7e6d..2d8e0c7 100644 --- a/src/routes/photos/+page.ts +++ b/src/routes/photos/+page.ts @@ -1,413 +1,25 @@ import type { PageLoad } from './$types' -import type { PhotoItem } from '$lib/types/photos' -export const load: PageLoad = async () => { - // Mock data for now - in a real app this would come from an API or CMS - const photoItems: PhotoItem[] = [ - { - id: 'photo-1', - src: 'https://picsum.photos/400/600?random=1', - alt: 'Mountain landscape at sunset', - caption: 'A beautiful landscape captured during golden hour', - width: 400, - height: 600, - exif: { - camera: 'Canon EOS R5', - lens: '24-70mm f/2.8', - focalLength: '35mm', - aperture: 'f/5.6', - shutterSpeed: '1/250s', - iso: '100', - dateTaken: '2024-01-15', - location: 'Yosemite National Park' - } - }, - { - id: 'album-1', - title: 'Tokyo Street Photography', - description: 'A collection of street photography from Tokyo', - coverPhoto: { - id: 'album-1-cover', - src: 'https://picsum.photos/500/400?random=2', - alt: 'Tokyo street scene', - width: 500, - height: 400 - }, - photos: [ - { - id: 'album-1-1', - src: 'https://picsum.photos/500/400?random=2', - alt: 'Tokyo street scene', - caption: 'Busy intersection in Shibuya', - width: 500, - height: 400, - exif: { - camera: 'Fujifilm X-T4', - lens: '23mm f/1.4', - focalLength: '23mm', - aperture: 'f/2.8', - shutterSpeed: '1/60s', - iso: '800', - dateTaken: '2024-02-10' - } - }, - { - id: 'album-1-2', - src: 'https://picsum.photos/600/400?random=25', - alt: 'Tokyo alley', - caption: 'Quiet alley in Shinjuku', - width: 600, - height: 400 - }, - { - id: 'album-1-3', - src: 'https://picsum.photos/500/700?random=26', - alt: 'Neon signs', - caption: 'Colorful neon signs in Harajuku', - width: 500, - height: 700, - exif: { - camera: 'Fujifilm X-T4', - lens: '56mm f/1.2', - focalLength: '56mm', - aperture: 'f/1.8', - shutterSpeed: '1/30s', - iso: '1600', - dateTaken: '2024-02-11' - } - } - ], - createdAt: '2024-02-10' - }, - { - id: 'photo-2', - src: 'https://picsum.photos/300/500?random=4', - alt: 'Modern building', - caption: 'Urban architecture study', - width: 300, - height: 500, - exif: { - camera: 'Sony A7IV', - lens: '85mm f/1.8', - focalLength: '85mm', - aperture: 'f/2.8', - shutterSpeed: '1/125s', - iso: '200', - dateTaken: '2024-01-20' - } - }, - { - id: 'photo-3', - src: 'https://picsum.photos/600/300?random=5', - alt: 'Ocean waves', - caption: 'Minimalist seascape composition', - width: 600, - height: 300 - }, - { - id: 'photo-4', - src: 'https://picsum.photos/400/500?random=6', - alt: 'Forest path', - caption: 'Morning light through the trees', - width: 400, - height: 500, - exif: { - camera: 'Nikon Z6II', - lens: '24-120mm f/4', - focalLength: '50mm', - aperture: 'f/8', - shutterSpeed: '1/60s', - iso: '400', - dateTaken: '2024-03-05', - location: 'Redwood National Park' - } - }, - { - id: 'album-2', - title: 'Portrait Series', - description: 'A collection of environmental portraits', - coverPhoto: { - id: 'album-2-cover', - src: 'https://picsum.photos/400/600?random=7', - alt: 'Portrait of a musician', - width: 400, - height: 600 - }, - photos: [ - { - id: 'album-2-1', - src: 'https://picsum.photos/400/600?random=7', - alt: 'Portrait of a musician', - caption: 'Jazz musician in his studio', - width: 400, - height: 600, - exif: { - camera: 'Canon EOS R6', - lens: '85mm f/1.2', - focalLength: '85mm', - aperture: 'f/1.8', - shutterSpeed: '1/125s', - iso: '640', - dateTaken: '2024-02-20' - } - }, - { - id: 'album-2-2', - src: 'https://picsum.photos/500/650?random=27', - alt: 'Artist in gallery', - caption: 'Painter surrounded by her work', - width: 500, - height: 650 - }, - { - id: 'album-2-3', - src: 'https://picsum.photos/450/600?random=28', - alt: 'Chef in kitchen', - caption: 'Chef preparing for evening service', - width: 450, - height: 600 - } - ], - createdAt: '2024-02-20' - }, - { - id: 'photo-5', - src: 'https://picsum.photos/500/350?random=8', - alt: 'City skyline', - caption: 'Downtown at blue hour', - width: 500, - height: 350, - exif: { - camera: 'Sony A7R V', - lens: '16-35mm f/2.8', - focalLength: '24mm', - aperture: 'f/11', - shutterSpeed: '8s', - iso: '100', - dateTaken: '2024-01-30', - location: 'San Francisco' - } - }, - { - id: 'photo-6', - src: 'https://picsum.photos/350/550?random=9', - alt: 'Vintage motorcycle', - caption: 'Classic bike restoration project', - width: 350, - height: 550 - }, - { - id: 'photo-7', - src: 'https://picsum.photos/450/300?random=10', - alt: 'Coffee and books', - caption: 'Quiet morning ritual', - width: 450, - height: 300, - exif: { - camera: 'Fujifilm X100V', - lens: '23mm f/2', - focalLength: '23mm', - aperture: 'f/2.8', - shutterSpeed: '1/60s', - iso: '320', - dateTaken: '2024-03-01' - } - }, - { - id: 'album-3', - title: 'Nature Macro', - description: 'Close-up studies of natural details', - coverPhoto: { - id: 'album-3-cover', - src: 'https://picsum.photos/400/400?random=11', - alt: 'Dewdrop on leaf', - width: 400, - height: 400 - }, - photos: [ - { - id: 'album-3-1', - src: 'https://picsum.photos/400/400?random=11', - alt: 'Dewdrop on leaf', - caption: 'Morning dew captured with macro lens', - width: 400, - height: 400, - exif: { - camera: 'Canon EOS R5', - lens: '100mm f/2.8 Macro', - focalLength: '100mm', - aperture: 'f/5.6', - shutterSpeed: '1/250s', - iso: '200', - dateTaken: '2024-03-15' - } - }, - { - id: 'album-3-2', - src: 'https://picsum.photos/500/500?random=29', - alt: 'Butterfly wing detail', - caption: 'Intricate patterns on butterfly wing', - width: 500, - height: 500 - }, - { - id: 'album-3-3', - src: 'https://picsum.photos/400/600?random=30', - alt: 'Tree bark texture', - caption: 'Ancient oak bark patterns', - width: 400, - height: 600 - }, - { - id: 'album-3-4', - src: 'https://picsum.photos/350/500?random=31', - alt: 'Flower stamen', - caption: 'Lily stamen in soft light', - width: 350, - height: 500 - } - ], - createdAt: '2024-03-15' - }, - { - id: 'photo-8', - src: 'https://picsum.photos/600/400?random=12', - alt: 'Desert landscape', - caption: 'Vast desert under starry sky', - width: 600, - height: 400, - exif: { - camera: 'Nikon D850', - lens: '14-24mm f/2.8', - focalLength: '14mm', - aperture: 'f/2.8', - shutterSpeed: '25s', - iso: '3200', - dateTaken: '2024-02-25', - location: 'Death Valley' - } - }, - { - id: 'photo-9', - src: 'https://picsum.photos/300/450?random=13', - alt: 'Vintage camera', - caption: "My grandfather's Leica", - width: 300, - height: 450 - }, - { - id: 'photo-10', - src: 'https://picsum.photos/550/350?random=14', - alt: 'Market scene', - caption: 'Colorful spices at local market', - width: 550, - height: 350, - exif: { - camera: 'Fujifilm X-T5', - lens: '18-55mm f/2.8-4', - focalLength: '35mm', - aperture: 'f/4', - shutterSpeed: '1/125s', - iso: '800', - dateTaken: '2024-03-10', - location: 'Marrakech, Morocco' - } - }, - { - id: 'photo-11', - src: 'https://picsum.photos/400/600?random=15', - alt: 'Lighthouse at dawn', - caption: 'Coastal beacon in morning mist', - width: 400, - height: 600, - exif: { - camera: 'Sony A7III', - lens: '70-200mm f/2.8', - focalLength: '135mm', - aperture: 'f/8', - shutterSpeed: '1/200s', - iso: '400', - dateTaken: '2024-02-28', - location: 'Big Sur, California' - } - }, - { - id: 'photo-12', - src: 'https://picsum.photos/500/300?random=16', - alt: 'Train station', - caption: 'Rush hour commuters', - width: 500, - height: 300 - }, - { - id: 'album-4', - title: 'Black & White', - description: 'Monochrome photography collection', - coverPhoto: { - id: 'album-4-cover', - src: 'https://picsum.photos/450/600?random=17', - alt: 'Urban shadows', - width: 450, - height: 600 - }, - photos: [ - { - id: 'album-4-1', - src: 'https://picsum.photos/450/600?random=17', - alt: 'Urban shadows', - caption: 'Dramatic shadows in the financial district', - width: 450, - height: 600, - exif: { - camera: 'Leica M11 Monochrom', - lens: '35mm f/1.4', - focalLength: '35mm', - aperture: 'f/5.6', - shutterSpeed: '1/250s', - iso: '200', - dateTaken: '2024-03-20' - } - }, - { - id: 'album-4-2', - src: 'https://picsum.photos/600/400?random=32', - alt: 'Elderly man reading', - caption: 'Contemplation in the park', - width: 600, - height: 400 - }, - { - id: 'album-4-3', - src: 'https://picsum.photos/400/500?random=33', - alt: 'Rain on window', - caption: 'Storm patterns on glass', - width: 400, - height: 500 - } - ], - createdAt: '2024-03-20' - }, - { - id: 'photo-13', - src: 'https://picsum.photos/350/500?random=18', - alt: 'Street art mural', - caption: 'Vibrant wall art in the Mission District', - width: 350, - height: 500, - exif: { - camera: 'iPhone 15 Pro', - lens: '24mm f/1.8', - focalLength: '24mm', - aperture: 'f/1.8', - shutterSpeed: '1/120s', - iso: '64', - dateTaken: '2024-03-25', - location: 'San Francisco' - } +export const load: PageLoad = async ({ fetch }) => { + try { + const response = await fetch('/api/photos?limit=50') + if (!response.ok) { + throw new Error('Failed to fetch photos') + } + + const data = await response.json() + return { + photoItems: data.photoItems || [], + pagination: data.pagination || null + } + } catch (error) { + console.error('Error loading photos:', error) + + // Fallback to empty array if API fails + return { + photoItems: [], + pagination: null, + error: 'Failed to load photos' } - ] - - return { - photoItems } -} +} \ No newline at end of file diff --git a/src/routes/photos/[albumSlug]/[photoId]/+page.svelte b/src/routes/photos/[albumSlug]/[photoId]/+page.svelte new file mode 100644 index 0000000..d47b62e --- /dev/null +++ b/src/routes/photos/[albumSlug]/[photoId]/+page.svelte @@ -0,0 +1,471 @@ + + + + {#if photo && album} + {photo.title || photo.caption || `Photo ${navigation?.currentIndex}`} - {album.title} + + + + + + + + + + + {#if exif?.dateTaken} + + {/if} + {:else} + Photo Not Found + {/if} + + +{#if error || !photo || !album} +
+
+

Photo Not Found

+

{error || 'The photo you\'re looking for doesn\'t exist.'}

+ ← Back to Photos +
+
+{:else} +
+ +
+ + +
+ {#if navigation.prevPhoto} + + {:else} +
+ + + + Previous +
+ {/if} + + {#if navigation.nextPhoto} + + {:else} +
+ Next + + + +
+ {/if} +
+
+ + +
+
+ {photo.caption +
+
+ + + +
+{/if} + + \ No newline at end of file diff --git a/src/routes/photos/[albumSlug]/[photoId]/+page.ts b/src/routes/photos/[albumSlug]/[photoId]/+page.ts new file mode 100644 index 0000000..24d9f7d --- /dev/null +++ b/src/routes/photos/[albumSlug]/[photoId]/+page.ts @@ -0,0 +1,30 @@ +import type { PageLoad } from './$types' + +export const load: PageLoad = async ({ params, fetch }) => { + try { + const response = await fetch(`/api/photos/${params.albumSlug}/${params.photoId}`) + + if (!response.ok) { + if (response.status === 404) { + throw new Error('Photo not found') + } + throw new Error('Failed to fetch photo') + } + + const data = await response.json() + + return { + photo: data.photo, + album: data.album, + navigation: data.navigation + } + } catch (error) { + console.error('Error loading photo:', error) + return { + photo: null, + album: null, + navigation: null, + error: error instanceof Error ? error.message : 'Failed to load photo' + } + } +} \ No newline at end of file diff --git a/src/routes/photos/[slug]/+page.svelte b/src/routes/photos/[slug]/+page.svelte new file mode 100644 index 0000000..6bb9a2b --- /dev/null +++ b/src/routes/photos/[slug]/+page.svelte @@ -0,0 +1,223 @@ + + + + {#if album} + {album.title} - Photos + + {:else} + Album Not Found - Photos + {/if} + + +{#if error} +
+
+

Album Not Found

+

{error}

+ ← Back to Photos +
+
+{:else if album} +
+ + + + +
+

{album.title}

+ + {#if album.description} +

{album.description}

+ {/if} + +
+ {#if album.date} + 📅 {formatDate(album.date)} + {/if} + {#if album.location} + 📍 {album.location} + {/if} + 📷 {album.photos?.length || 0} photo{(album.photos?.length || 0) !== 1 ? 's' : ''} +
+
+ + + {#if photoItems.length > 0} + + {:else} +
+

This album doesn't contain any photos yet.

+
+ {/if} +
+{/if} + + \ No newline at end of file diff --git a/src/routes/photos/[slug]/+page.ts b/src/routes/photos/[slug]/+page.ts new file mode 100644 index 0000000..ec3b160 --- /dev/null +++ b/src/routes/photos/[slug]/+page.ts @@ -0,0 +1,31 @@ +import type { PageLoad } from './$types' + +export const load: PageLoad = async ({ params, fetch }) => { + try { + // Fetch the specific album using the individual album endpoint which includes photos + const response = await fetch(`/api/albums/by-slug/${params.slug}`) + if (!response.ok) { + if (response.status === 404) { + throw new Error('Album not found') + } + throw new Error('Failed to fetch album') + } + + const album = await response.json() + + // Check if this is a photography album and published + if (!album.isPhotography || album.status !== 'published') { + throw new Error('Album not found') + } + + return { + album + } + } catch (error) { + console.error('Error loading album:', error) + return { + album: null, + error: error instanceof Error ? error.message : 'Failed to load album' + } + } +} \ No newline at end of file diff --git a/src/routes/rss/+server.ts b/src/routes/rss/+server.ts new file mode 100644 index 0000000..e1210a4 --- /dev/null +++ b/src/routes/rss/+server.ts @@ -0,0 +1,227 @@ +import type { RequestHandler } from './$types' +import { prisma } from '$lib/server/database' +import { logger } from '$lib/server/logger' + +// Helper function to escape XML special characters +function escapeXML(str: string): string { + if (!str) return '' + return str + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/"/g, '"') + .replace(/'/g, ''') +} + +// Helper function to convert content to HTML for full content +function convertContentToHTML(content: any): string { + if (!content || !content.blocks) return '' + + return content.blocks + .map((block: any) => { + switch (block.type) { + case 'paragraph': + return `

${escapeXML(block.content || '')}

` + case 'heading': + const level = block.level || 2 + return `${escapeXML(block.content || '')}` + case 'list': + const items = (block.content || []).map((item: any) => `
  • ${escapeXML(item)}
    • `).join('') + return block.listType === 'ordered' ? `
      ${items}
    ` : `
      ${items}
    ` + default: + return `

    ${escapeXML(block.content || '')}

    ` + } + }) + .join('\n') +} + +// Helper function to extract text summary from content +function extractTextSummary(content: any, maxLength: number = 300): string { + if (!content || !content.blocks) return '' + + const text = content.blocks + .filter((block: any) => block.type === 'paragraph' && block.content) + .map((block: any) => block.content) + .join(' ') + + return text.length > maxLength ? text.substring(0, maxLength) + '...' : text +} + +// Helper function to format RFC 822 date +function formatRFC822Date(date: Date): string { + return date.toUTCString() +} + +export const GET: RequestHandler = async (event) => { + try { + // Get published posts from Universe + const posts = await prisma.post.findMany({ + where: { + status: 'published', + publishedAt: { not: null } + }, + orderBy: { publishedAt: 'desc' }, + take: 25 + }) + + // Get published albums that show in universe + const universeAlbums = await prisma.album.findMany({ + where: { + status: 'published', + showInUniverse: true + }, + include: { + photos: { + where: { + status: 'published', + showInPhotos: true + }, + orderBy: { displayOrder: 'asc' }, + take: 1 // Get first photo for cover image + }, + _count: { + select: { photos: true } + } + }, + orderBy: { createdAt: 'desc' }, + take: 15 + }) + + // Get published photography albums + const photoAlbums = await prisma.album.findMany({ + where: { + status: 'published', + isPhotography: true + }, + include: { + photos: { + where: { + status: 'published', + showInPhotos: true + }, + orderBy: { displayOrder: 'asc' }, + take: 1 // Get first photo for cover image + }, + _count: { + select: { + photos: { + where: { + status: 'published', + showInPhotos: true + } + } + } + } + }, + orderBy: { createdAt: 'desc' }, + take: 15 + }) + + // Combine all content types + const items = [ + ...posts.map(post => ({ + type: 'post', + section: 'universe', + id: post.id.toString(), + title: post.title || `${post.postType.charAt(0).toUpperCase() + post.postType.slice(1)} Post`, + description: post.excerpt || extractTextSummary(post.content) || '', + content: convertContentToHTML(post.content), + link: `${event.url.origin}/universe/${post.slug}`, + guid: `${event.url.origin}/universe/${post.slug}`, + pubDate: post.publishedAt || post.createdAt, + updatedDate: post.updatedAt, + postType: post.postType, + linkUrl: post.linkUrl || null + })), + ...universeAlbums.map(album => ({ + type: 'album', + section: 'universe', + id: album.id.toString(), + title: album.title, + description: album.description || `Photo album with ${album._count.photos} photo${album._count.photos !== 1 ? 's' : ''}`, + content: album.description ? `

    ${escapeXML(album.description)}

    ` : '', + link: `${event.url.origin}/photos/${album.slug}`, + guid: `${event.url.origin}/photos/${album.slug}`, + pubDate: album.createdAt, + updatedDate: album.updatedAt, + photoCount: album._count.photos, + coverPhoto: album.photos[0], + location: album.location + })), + ...photoAlbums + .filter(album => !universeAlbums.some(ua => ua.id === album.id)) // Avoid duplicates + .map(album => ({ + type: 'album', + section: 'photos', + id: album.id.toString(), + title: album.title, + description: album.description || `Photography album${album.location ? ` from ${album.location}` : ''} with ${album._count.photos} photo${album._count.photos !== 1 ? 's' : ''}`, + content: album.description ? `

    ${escapeXML(album.description)}

    ` : '', + link: `${event.url.origin}/photos/${album.slug}`, + guid: `${event.url.origin}/photos/${album.slug}`, + pubDate: album.createdAt, + updatedDate: album.updatedAt, + photoCount: album._count.photos, + coverPhoto: album.photos[0], + location: album.location, + date: album.date + })) + ].sort((a, b) => new Date(b.pubDate).getTime() - new Date(a.pubDate).getTime()) + + const now = new Date() + const lastBuildDate = formatRFC822Date(now) + + // Build RSS XML following best practices + const rssXml = ` + + +jedmund.com +Creative work, thoughts, and photography by Justin Edmund +${event.url.origin}/ + +en-us +${lastBuildDate} +noreply@jedmund.com (Justin Edmund) +noreply@jedmund.com (Justin Edmund) +SvelteKit RSS Generator +https://cyber.harvard.edu/rss/rss.html +60 +${items.map(item => ` + +${escapeXML(item.title)} + +${item.content ? `` : ''} +${item.link} +${item.guid} +${formatRFC822Date(new Date(item.pubDate))} +${item.updatedDate ? `${new Date(item.updatedDate).toISOString()}` : ''} +${item.section} +${item.type === 'post' ? item.postType : 'album'} +${item.type === 'post' && item.linkUrl ? `${item.linkUrl}` : ''} +${item.type === 'album' && item.coverPhoto ? ` + + +` : ''} +${item.location ? `${escapeXML(item.location)}` : ''} +noreply@jedmund.com (Justin Edmund) +`).join('')} + +` + + logger.info('Combined RSS feed generated', { itemCount: items.length }) + + return new Response(rssXml, { + headers: { + 'Content-Type': 'application/rss+xml; charset=utf-8', + 'Cache-Control': 'public, max-age=3600, stale-while-revalidate=86400', + 'Last-Modified': lastBuildDate, + 'ETag': `"${Buffer.from(rssXml).toString('base64').slice(0, 16)}"`, + 'X-Content-Type-Options': 'nosniff', + 'Vary': 'Accept-Encoding' + } + }) + } catch (error) { + logger.error('Failed to generate combined RSS feed', error as Error) + return new Response('Failed to generate RSS feed', { status: 500 }) + } +} \ No newline at end of file diff --git a/src/routes/rss/photos/+server.ts b/src/routes/rss/photos/+server.ts new file mode 100644 index 0000000..0ae60d5 --- /dev/null +++ b/src/routes/rss/photos/+server.ts @@ -0,0 +1,154 @@ +import type { RequestHandler } from './$types' +import { prisma } from '$lib/server/database' +import { logger } from '$lib/server/logger' + +// Helper function to escape XML special characters +function escapeXML(str: string): string { + if (!str) return '' + return str + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/"/g, '"') + .replace(/'/g, ''') +} + +// Helper function to format RFC 822 date +function formatRFC822Date(date: Date): string { + return date.toUTCString() +} + +export const GET: RequestHandler = async (event) => { + try { + // Get published photography albums + const albums = await prisma.album.findMany({ + where: { + status: 'published', + isPhotography: true + }, + include: { + photos: { + where: { + status: 'published', + showInPhotos: true + }, + orderBy: { displayOrder: 'asc' }, + take: 1 // Get first photo for cover image + }, + _count: { + select: { + photos: { + where: { + status: 'published', + showInPhotos: true + } + } + } + } + }, + orderBy: { createdAt: 'desc' }, + take: 50 // Limit to most recent 50 albums + }) + + // Get individual published photos not in albums + const standalonePhotos = await prisma.photo.findMany({ + where: { + status: 'published', + showInPhotos: true, + albumId: null + }, + orderBy: { publishedAt: 'desc' }, + take: 25 + }) + + // Combine albums and standalone photos + const items = [ + ...albums.map(album => ({ + type: 'album', + id: album.id.toString(), + title: album.title, + description: album.description || `Photography album${album.location ? ` from ${album.location}` : ''} with ${album._count.photos} photo${album._count.photos !== 1 ? 's' : ''}`, + content: album.description ? `

    ${escapeXML(album.description)}

    ` : '', + link: `${event.url.origin}/photos/${album.slug}`, + pubDate: album.createdAt, + updatedDate: album.updatedAt, + guid: `${event.url.origin}/photos/${album.slug}`, + photoCount: album._count.photos, + coverPhoto: album.photos[0], + location: album.location, + date: album.date + })), + ...standalonePhotos.map(photo => ({ + type: 'photo', + id: photo.id.toString(), + title: photo.title || photo.filename, + description: photo.description || photo.caption || `Photo: ${photo.filename}`, + content: photo.description ? `

    ${escapeXML(photo.description)}

    ` : (photo.caption ? `

    ${escapeXML(photo.caption)}

    ` : ''), + link: `${event.url.origin}/photos/photo/${photo.slug || photo.id}`, + pubDate: photo.publishedAt || photo.createdAt, + updatedDate: photo.updatedAt, + guid: `${event.url.origin}/photos/photo/${photo.slug || photo.id}`, + url: photo.url, + thumbnailUrl: photo.thumbnailUrl + })) + ].sort((a, b) => new Date(b.pubDate).getTime() - new Date(a.pubDate).getTime()) + + const now = new Date() + const lastBuildDate = formatRFC822Date(now) + + // Build RSS XML following best practices + const rssXml = ` + + +Photos - jedmund.com +Photography and visual content from jedmund +${event.url.origin}/photos + +en-us +${lastBuildDate} +noreply@jedmund.com (Justin Edmund) +noreply@jedmund.com (Justin Edmund) +SvelteKit RSS Generator +https://cyber.harvard.edu/rss/rss.html +60 +${items.map(item => ` + +${escapeXML(item.title)} + +${item.content ? `` : ''} +${item.link} +${item.guid} +${formatRFC822Date(new Date(item.pubDate))} +${item.updatedDate ? `${new Date(item.updatedDate).toISOString()}` : ''} +${item.type} +${item.type === 'album' && item.coverPhoto ? ` + + +` : ''} +${item.type === 'photo' ? ` + + +` : ''} +${item.location ? `${escapeXML(item.location)}` : ''} +noreply@jedmund.com (Justin Edmund) +`).join('')} + +` + + logger.info('Photos RSS feed generated', { itemCount: items.length }) + + return new Response(rssXml, { + headers: { + 'Content-Type': 'application/rss+xml; charset=utf-8', + 'Cache-Control': 'public, max-age=3600, stale-while-revalidate=86400', + 'Last-Modified': lastBuildDate, + 'ETag': `"${Buffer.from(rssXml).toString('base64').slice(0, 16)}"`, + 'X-Content-Type-Options': 'nosniff', + 'Vary': 'Accept-Encoding' + } + }) + } catch (error) { + logger.error('Failed to generate Photos RSS feed', error as Error) + return new Response('Failed to generate RSS feed', { status: 500 }) + } +} \ No newline at end of file diff --git a/src/routes/rss/universe/+server.ts b/src/routes/rss/universe/+server.ts new file mode 100644 index 0000000..a483203 --- /dev/null +++ b/src/routes/rss/universe/+server.ts @@ -0,0 +1,161 @@ +import type { RequestHandler } from './$types' +import { prisma } from '$lib/server/database' +import { logger } from '$lib/server/logger' + +// Helper function to escape XML special characters +function escapeXML(str: string): string { + if (!str) return '' + return str + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/"/g, '"') + .replace(/'/g, ''') +} + +// Helper function to convert content to HTML for full content +function convertContentToHTML(content: any): string { + if (!content || !content.blocks) return '' + + return content.blocks + .map((block: any) => { + switch (block.type) { + case 'paragraph': + return `

    ${escapeXML(block.content || '')}

    ` + case 'heading': + const level = block.level || 2 + return `${escapeXML(block.content || '')}` + case 'list': + const items = (block.content || []).map((item: any) => `
  • ${escapeXML(item)}
    • `).join('') + return block.listType === 'ordered' ? `
      ${items}
    ` : `
      ${items}
    ` + default: + return `

    ${escapeXML(block.content || '')}

    ` + } + }) + .join('\n') +} + +// Helper function to extract text summary from content +function extractTextSummary(content: any, maxLength: number = 300): string { + if (!content || !content.blocks) return '' + + const text = content.blocks + .filter((block: any) => block.type === 'paragraph' && block.content) + .map((block: any) => block.content) + .join(' ') + + return text.length > maxLength ? text.substring(0, maxLength) + '...' : text +} + +// Helper function to format RFC 822 date +function formatRFC822Date(date: Date): string { + return date.toUTCString() +} + +export const GET: RequestHandler = async (event) => { + try { + // Get published posts from Universe + const posts = await prisma.post.findMany({ + where: { + status: 'published', + publishedAt: { not: null } + }, + orderBy: { publishedAt: 'desc' }, + take: 50 // Limit to most recent 50 posts + }) + + // Get published albums that show in universe + const albums = await prisma.album.findMany({ + where: { + status: 'published', + showInUniverse: true + }, + include: { + _count: { + select: { photos: true } + } + }, + orderBy: { createdAt: 'desc' }, + take: 25 // Limit to most recent 25 albums + }) + + // Combine and sort by date + const items = [ + ...posts.map(post => ({ + type: 'post', + id: post.id.toString(), + title: post.title || `${post.postType.charAt(0).toUpperCase() + post.postType.slice(1)} Post`, + description: post.excerpt || extractTextSummary(post.content) || '', + content: convertContentToHTML(post.content), + link: `${event.url.origin}/universe/${post.slug}`, + guid: `${event.url.origin}/universe/${post.slug}`, + pubDate: post.publishedAt || post.createdAt, + updatedDate: post.updatedAt, + postType: post.postType, + linkUrl: post.linkUrl || null + })), + ...albums.map(album => ({ + type: 'album', + id: album.id.toString(), + title: album.title, + description: album.description || `Photo album with ${album._count.photos} photo${album._count.photos !== 1 ? 's' : ''}`, + content: album.description ? `

    ${escapeXML(album.description)}

    ` : '', + link: `${event.url.origin}/photos/${album.slug}`, + guid: `${event.url.origin}/photos/${album.slug}`, + pubDate: album.createdAt, + updatedDate: album.updatedAt, + photoCount: album._count.photos + })) + ].sort((a, b) => new Date(b.pubDate).getTime() - new Date(a.pubDate).getTime()) + + const now = new Date() + const lastBuildDate = formatRFC822Date(now) + + // Build RSS XML following best practices + const rssXml = ` + + +Universe - jedmund.com +Posts and photo albums from jedmund's universe +${event.url.origin}/universe + +en-us +${lastBuildDate} +noreply@jedmund.com (Justin Edmund) +noreply@jedmund.com (Justin Edmund) +SvelteKit RSS Generator +https://cyber.harvard.edu/rss/rss.html +60 +${items.map(item => ` + +${escapeXML(item.title)} + +${item.content ? `` : ''} +${item.link} +${item.guid} +${formatRFC822Date(new Date(item.pubDate))} +${item.updatedDate ? `${new Date(item.updatedDate).toISOString()}` : ''} +${item.type === 'post' ? item.postType : 'album'} +${item.type === 'post' && item.linkUrl ? `${item.linkUrl}` : ''} +noreply@jedmund.com (Justin Edmund) +`).join('')} + +` + + logger.info('Universe RSS feed generated', { itemCount: items.length }) + + return new Response(rssXml, { + headers: { + 'Content-Type': 'application/rss+xml; charset=utf-8', + 'Cache-Control': 'public, max-age=3600, stale-while-revalidate=86400', + 'Last-Modified': lastBuildDate, + 'ETag': `"${Buffer.from(rssXml).toString('base64').slice(0, 16)}"`, + 'X-Content-Type-Options': 'nosniff', + 'Vary': 'Accept-Encoding' + } + }) + } catch (error) { + logger.error('Failed to generate Universe RSS feed', error as Error) + return new Response('Failed to generate RSS feed', { status: 500 }) + } +} \ No newline at end of file diff --git a/src/routes/universe/+page.server.ts b/src/routes/universe/+page.server.ts index 648fa20..d2f2695 100644 --- a/src/routes/universe/+page.server.ts +++ b/src/routes/universe/+page.server.ts @@ -1,10 +1,23 @@ -import { getAllPosts } from '$lib/posts' import type { PageServerLoad } from './$types' -export const load: PageServerLoad = async () => { - const posts = await getAllPosts() - - return { - posts +export const load: PageServerLoad = async ({ fetch }) => { + try { + const response = await fetch('/api/universe?limit=20') + if (!response.ok) { + throw new Error('Failed to fetch universe feed') + } + + const data = await response.json() + return { + universeItems: data.items || [], + pagination: data.pagination || null + } + } catch (error) { + console.error('Error loading universe feed:', error) + return { + universeItems: [], + pagination: null, + error: 'Failed to load universe feed' + } } } diff --git a/src/routes/universe/+page.svelte b/src/routes/universe/+page.svelte index 91d9003..4485ce6 100644 --- a/src/routes/universe/+page.svelte +++ b/src/routes/universe/+page.svelte @@ -1,22 +1,27 @@ - Blog - jedmund - + Universe - jedmund + -
    - +
    + {#if data.error} +
    +

    {data.error}

    +
    + {:else} + + {/if}
    diff --git a/src/routes/universe/[slug]/+page.server.ts b/src/routes/universe/[slug]/+page.server.ts index 46de106..3ef2f47 100644 --- a/src/routes/universe/[slug]/+page.server.ts +++ b/src/routes/universe/[slug]/+page.server.ts @@ -1,15 +1,30 @@ -import { getPostBySlug } from '$lib/posts' -import { error } from '@sveltejs/kit' import type { PageServerLoad } from './$types' -export const load: PageServerLoad = async ({ params }) => { - const post = await getPostBySlug(params.slug) +export const load: PageServerLoad = async ({ params, fetch }) => { + try { + // Fetch the specific post by slug from the database + const response = await fetch(`/api/posts/by-slug/${params.slug}`) + + if (!response.ok) { + if (response.status === 404) { + return { + post: null, + error: 'Post not found' + } + } + throw new Error('Failed to fetch post') + } - if (!post) { - throw error(404, 'Post not found') - } + const post = await response.json() - return { - post + return { + post + } + } catch (error) { + console.error('Error loading post:', error) + return { + post: null, + error: 'Failed to load post' + } } } diff --git a/src/routes/universe/[slug]/+page.svelte b/src/routes/universe/[slug]/+page.svelte index df38dac..e0ed2fa 100644 --- a/src/routes/universe/[slug]/+page.svelte +++ b/src/routes/universe/[slug]/+page.svelte @@ -1,18 +1,89 @@ - {pageTitle} - jedmund - + {#if post} + {pageTitle} - jedmund + + + + + + + {#if post.attachments && post.attachments.length > 0} + + {/if} + + + + + {:else} + Post Not Found - jedmund + {/if} - - - +{#if error || !post} + +
    +
    +

    Post Not Found

    +

    {error || 'The post you\'re looking for doesn\'t exist.'}

    + ← Back to Universe +
    +
    +     +{:else} + + + +{/if} + + diff --git a/src/routes/work/[slug]/+page.svelte b/src/routes/work/[slug]/+page.svelte index c1e2cfe..4dc256d 100644 --- a/src/routes/work/[slug]/+page.svelte +++ b/src/routes/work/[slug]/+page.svelte @@ -1,5 +1,7 @@ {#if error} @@ -63,6 +25,35 @@
    Loading project...
     +{:else if project.status === 'list-only'} + +
    +

    Project Not Available

    +
    +
    +

    This project is not yet available for viewing. Please check back later.

    + ← Back to projects +
    +     +{:else if project.status === 'password-protected'} + + + {#snippet children()} +
    + {#if project.logoUrl} + + {/if} +

    {project.title}

    + {#if project.subtitle} +

    {project.subtitle}

    + {/if} +
    + + {/snippet} +     +     {:else}
    @@ -76,81 +67,7 @@

    {project.subtitle}

    {/if}
    - -
    - -
    -
    - {#if project.client} -
    - Client - {project.client} -
    - {/if} - - {#if project.year} -
    - Year - {project.year} -
    - {/if} - - {#if project.role} -
    - Role - {project.role} -
    - {/if} -
    - - {#if project.technologies && project.technologies.length > 0} -
    - {#each project.technologies as tech} - {tech} - {/each} -
    - {/if} - - {#if project.externalUrl} -
    - - Visit Project → - -
    - {/if} -
    - - - {#if project.caseStudyContent && project.caseStudyContent.content && project.caseStudyContent.content.length > 0} -
    -
    - {@html renderBlockNoteContent(project.caseStudyContent)} -
    -
    - {/if} - - - {#if project.gallery && project.gallery.length > 0} -
    -

    Gallery

    -
    - {#each project.gallery as image} - Project gallery image - {/each} -
    -
    - {/if} - - - -
    +     {/if} @@ -177,6 +94,17 @@ padding: $unit-4x; } + .back-link { + color: $grey-40; + text-decoration: none; + font-size: 0.925rem; + transition: color 0.2s ease; + + &:hover { + color: $grey-20; + } + } + /* Project Header */ .project-header { text-align: center; @@ -221,182 +149,4 @@ font-size: 1.125rem; } } - - /* Project Content */ - .project-content { - display: flex; - flex-direction: column; - gap: $unit-4x; - } - - .project-details { - display: flex; - flex-direction: column; - gap: $unit-3x; - padding-bottom: $unit-3x; - border-bottom: 1px solid $grey-90; - } - - .meta-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); - gap: $unit-2x; - - .meta-item { - display: flex; - flex-direction: column; - gap: $unit-half; - } - - .meta-label { - font-size: 0.875rem; - color: $grey-60; - text-transform: uppercase; - letter-spacing: 0.05em; - } - - .meta-value { - font-size: 1rem; - color: $grey-20; - font-weight: 500; - } - } - - .technologies { - display: flex; - gap: $unit; - flex-wrap: wrap; - - .tech-tag { - padding: $unit $unit-2x; - background: $grey-95; - border-radius: 50px; - font-size: 0.875rem; - color: $grey-30; - } - } - - .external-link-wrapper { - text-align: center; - } - - .external-link { - display: inline-block; - padding: $unit-2x $unit-3x; - background: $grey-10; - color: white; - text-decoration: none; - border-radius: 50px; - font-weight: 500; - font-size: 0.925rem; - transition: background-color 0.2s ease; - - &:hover { - background: $grey-20; - } - } - - /* Case Study Section */ - .case-study-section { - // No extra styling needed, content flows naturally - } - - .case-study-content { - :global(h1), - :global(h2), - :global(h3) { - margin: $unit-3x 0 $unit-2x; - color: $grey-10; - font-weight: 600; - - &:first-child { - margin-top: 0; - } - } - - :global(h1) { - font-size: 1.75rem; - } - - :global(h2) { - font-size: 1.375rem; - } - - :global(h3) { - font-size: 1.125rem; - } - - :global(p) { - margin: $unit-2x 0; - font-size: 1.0625rem; - line-height: 1.65; - color: $grey-20; - } - - :global(figure) { - margin: $unit-3x 0; - - :global(img) { - width: 100%; - height: auto; - border-radius: $unit; - } - } - - :global(ul), - :global(ol) { - margin: $unit-2x 0; - padding-left: $unit-3x; - - :global(li) { - margin: $unit 0; - font-size: 1.0625rem; - line-height: 1.65; - color: $grey-20; - } - } - } - - /* Gallery Section */ - .gallery-section { - padding-top: $unit-3x; - border-top: 1px solid $grey-90; - - h2 { - font-size: 1.75rem; - margin: 0 0 $unit-3x; - color: $grey-10; - font-weight: 600; - } - } - - .gallery-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: $unit-2x; - - img { - width: 100%; - height: auto; - border-radius: $unit; - } - } - - /* Navigation */ - .project-nav { - text-align: center; - padding-top: $unit-3x; - border-top: 1px solid $grey-90; - } - - .back-link { - color: $grey-40; - text-decoration: none; - font-size: 0.925rem; - transition: color 0.2s ease; - - &:hover { - color: $grey-20; - } - } diff --git a/src/routes/work/[slug]/+page.ts b/src/routes/work/[slug]/+page.ts index 76b1058..ad65f8f 100644 --- a/src/routes/work/[slug]/+page.ts +++ b/src/routes/work/[slug]/+page.ts @@ -3,8 +3,8 @@ import type { Project } from '$lib/types/project' export const load: PageLoad = async ({ params, fetch }) => { try { - // Find project by slug - const response = await fetch(`/api/projects?status=published`) + // Find project by slug - we'll fetch all published, list-only, and password-protected projects + const response = await fetch(`/api/projects?includeListOnly=true&includePasswordProtected=true`) if (!response.ok) { throw new Error('Failed to fetch projects') } @@ -16,6 +16,11 @@ export const load: PageLoad = async ({ params, fetch }) => { throw new Error('Project not found') } + // Handle different project statuses + if (project.status === 'draft') { + throw new Error('Project not found') + } + return { project }