Project Overview

Static blog built with SvelteKit, MDsveX, and Tailwind CSS v4. Uses @sveltejs/adapter-static for static site generation.

Development Commands

pnpm install          # Install dependencies
pnpm dev              # Start dev server (default: http://localhost:5173)
pnpm build            # Build for production
pnpm preview          # Preview production build
pnpm check            # Type-check with svelte-check
pnpm check:watch      # Type-check in watch mode
pnpm format           # Format code with Prettier
pnpm lint             # Lint with ESLint and Prettier

Architecture

Routing Structure

src/routes/
├── +layout.svelte          # Root layout with Nav component
├── +page.svelte           # Blog listing (homepage at /)
├── +page.ts              # Loads all posts from ./posts/*.md
├── posts/
│   ├── *.md              # Blog post markdown files (with frontmatter)
│   └── [slug]/
│       ├── +page.svelte  # Individual post renderer
│       └── +page.ts      # Dynamic post loader
├── about/
│   └── +page.md          # About page (markdown)
└── music/
    └── +page.md          # Music page (markdown)

Blog Post Structure

• Posts are markdown files in src/routes/posts/*.md
• Required frontmatter: title, date, excerpt
• Posts accessed at /posts/{slug} where slug is filename without .md
• Blog listing at root / shows all posts sorted by date (newest first)

Navigation

Navigation component at src/lib/components/Nav.svelte with links:

• Blog (/) - default landing page
• About (/about)
• Music (/music)

MDsveX Configuration

• Configured in svelte.config.js to process .md and .svx files
• Extensions: ['.svelte', '.md', '.svx']
• Preprocessors: vitePreprocess() and mdsvex()

Development Guidelines

• Use Svelte 5+ with runes ($props, $state, $derived, etc.)
• TypeScript with strict mode enabled
• Tailwind CSS v4 classes only (no custom CSS unless necessary)
• Use pnpm as package manager
• Self-explanatory code without comments
• Short, concise function and variable names
• Careful state management to avoid infinite loops

Technology Stack

• SvelteKit 2.x with static adapter
• Svelte 5.x (runes-based)
• MDsveX for markdown processing
• Tailwind CSS v4 with @tailwindcss/typography
• TypeScript with strict mode
• ESLint + Prettier for code quality
• Vite for build tooling