A little housekeeping for jedmund.com
Implemented a three-layer theming architecture to standardize admin component styling and prepare for future dark mode support. **Architecture:** - Layer 1: Base colors ($gray-80, $red-60) in variables.scss - Layer 2: Semantic SCSS variables ($input-bg, $error-bg) in variables.scss - Layer 3: CSS custom properties (--input-bg, --error-bg) in themes.scss **New semantic variables (~30 added):** - Inputs & forms (bg, hover, focus, text, border states) - State messages (error, success, warning with bg/text/border) - Empty states (text, heading colors) - Cards, dropdowns, popovers, modals (bg, border, shadow) **New reusable components:** - EmptyState.svelte - Supports icon and action snippets - ErrorMessage.svelte - Supports dismissible errors **Pages refactored:** - /admin/projects - Uses EmptyState and ErrorMessage (~30 lines removed) - /admin/posts - Uses EmptyState and ErrorMessage with icon (~30 lines removed) **Benefits:** - 60+ lines of duplicate styles removed (just 2 pages) - Future dark mode = remap CSS variables in themes.scss only - Guaranteed visual consistency for errors and empty states - $unit-based spacing system enforced **Remaining work (Phase 2):** - Replace hardcoded colors in ~40 files - Fix hardcoded spacing in ~20 files - Expand EmptyState/ErrorMessage to remaining pages 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> |
||
|---|---|---|
| .storybook | ||
| docs | ||
| prd | ||
| prisma | ||
| scripts | ||
| src | ||
| static | ||
| tests | ||
| .env.example | ||
| .gitignore | ||
| .node-version | ||
| .npmrc | ||
| .prettierignore | ||
| .prettierrc | ||
| CLAUDE.md | ||
| eslint.config.js | ||
| LOCAL_SETUP.md | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| svelte.config.js | ||
| SVG_ANALYSIS_REPORT.md | ||
| test-db.ts | ||
| test-form-loading.js | ||
| tsconfig.json | ||
| vite.config.ts | ||
jedmund.com
Personal portfolio website built with SvelteKit featuring a content management system for showcasing creative work, writing, and personal interests.
Features
- Content management system for organizing and displaying various types of media
- Photo galleries with masonry layout and infinite scrolling
- Blog/journal section for long-form writing
- Music listening history integration via Last.fm API
- Gaming activity tracking from Steam and PlayStation
- Project showcase pages with detailed case studies
- Responsive design with customizable themes
Tech Stack
- SvelteKit with Svelte 5 (Runes mode)
- Redis for caching external API responses
- SCSS for styling
- Integration with Last.fm, Steam, PSN, iTunes, and Giant Bomb APIs
Development
Install dependencies:
npm install
Start development server:
npm run dev
Build for production:
npm run build
Environment Variables
Required environment variables:
LASTFM_API_KEY- Last.fm API key for music dataREDIS_URL- Redis connection URL for caching
Optional environment variables:
DEBUG- Enable debug logging for specific categories (e.g.,DEBUG=musicfor music-related logs)
Commands
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run check- Type check with svelte-checknpm run lint- Check formatting and lintingnpm run format- Auto-format code with prettier
Database Management
Quick Start
Sync remote production database to local development:
# This backs up both databases first, then copies remote to local
npm run db:backup:sync
Prerequisites
-
PostgreSQL client tools must be installed (
pg_dump,psql)# macOS brew install postgresql # Ubuntu/Debian sudo apt-get install postgresql-client -
Set environment variables in
.envor.env.local:# Required for local database operations DATABASE_URL="postgresql://user:password@localhost:5432/dbname" # Required for remote database operations (use one of these) REMOTE_DATABASE_URL="postgresql://user:password@remote-host:5432/dbname" DATABASE_URL_PRODUCTION="postgresql://user:password@remote-host:5432/dbname"
Backup Commands
# Backup local database
npm run db:backup:local
# Backup remote database
npm run db:backup:remote
# Sync remote to local (recommended for daily development)
npm run db:backup:sync
# List all backups
npm run db:backups
Restore Commands
# Restore a backup to local database (interactive)
npm run db:restore
# Restore specific backup to local
npm run db:restore ./backups/backup_file.sql.gz
# Restore to remote (requires typing "RESTORE REMOTE" for safety)
npm run db:restore ./backups/backup_file.sql.gz remote
Common Workflows
Daily Development
Start your day by syncing the production database to local:
npm run db:backup:sync
Before Deploying Schema Changes
Always backup the remote database:
npm run db:backup:remote
Recover from Mistakes
# See available backups
npm run db:backups
# Restore a specific backup
npm run db:restore ./backups/local_20240615_143022.sql.gz
Backup Storage
All backups are stored in ./backups/ with timestamps:
- Local:
local_YYYYMMDD_HHMMSS.sql.gz - Remote:
remote_YYYYMMDD_HHMMSS.sql.gz
Safety Features
- Automatic backups before sync operations
- Confirmation prompts for all destructive operations
- Extra protection for remote restore (requires typing full phrase)
- Compressed storage with gzip
- Timestamped filenames prevent overwrites
- Automatic migrations after local restore