jedmund-svelte/CLAUDE.md

2.2 KiB

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Development Commands

Start development server:

npm run dev

Build for production:

npm run build

Type checking and linting:

npm run check          # Type check with svelte-check
npm run lint           # Check formatting and linting
npm run format         # Auto-format code with prettier

Preview production build:

npm run preview

Architecture Overview

This is a SvelteKit personal portfolio site for @jedmund that integrates with multiple external APIs to display real-time data about music listening habits and gaming activity.

We are using Svelte 5 in Runes mode, so make sure to only write solutions that will work with that newer syntax.

Make sure to use the CSS variables that are defined across the various files in src/assets/styles. When making new colors or defining new variables, check that it doesn't exist first, then define it.

Key Architecture Components

API Integration Layer (src/routes/api/)

  • Redis caching: Shared Redis client (redis-client.ts) used across API routes for caching external API responses
  • External APIs: Last.fm (music), Steam (games), PSN (PlayStation games), Giant Bomb (game metadata)
  • Data enrichment: Last.fm data is enhanced with iTunes artwork and Giant Bomb metadata

Frontend Structure

  • Component-based: Reusable Svelte components in $lib/components/
  • Page composition: Main page (+page.svelte) composed of multiple Page components with different content sections
  • Data loading: Server-side data fetching in +page.ts with error handling

Styling System

  • SCSS-based: Global variables, fonts, themes automatically imported via Vite config
  • Asset management: SVG icons and illustrations with automatic processing and alias imports

Key Aliases (svelte.config.js)

  • $componentssrc/lib/components
  • $iconssrc/assets/icons
  • $illossrc/assets/illos
  • $stylessrc/styles

Environment Dependencies

  • Requires LASTFM_API_KEY and REDIS_URL environment variables
  • Uses Node.js adapter for deployment