change readme

README.md

@@ -1,38 +1,68 @@
-# sv
+## Project Overview
+Static blog built with SvelteKit, MDsveX, and Tailwind CSS v4. Uses `@sveltejs/adapter-static` for static site generation.
 
-Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```sh
-# create a new project in the current directory
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
+## Development Commands
+```bash
+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
 ```
 
-## Developing
+## Architecture
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```sh
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+### 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)
 ```
 
-## Building
+### 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)
 
-To create a production version of your app:
+### Navigation
+Navigation component at `src/lib/components/Nav.svelte` with links:
+- Blog (/) - default landing page
+- About (/about)
+- Music (/music)
 
-```sh
-npm run build
-```
+### MDsveX Configuration
+- Configured in `svelte.config.js` to process `.md` and `.svx` files
+- Extensions: `['.svelte', '.md', '.svx']`
+- Preprocessors: `vitePreprocess()` and `mdsvex()`
 
-You can preview the production build with `npm run preview`.
+## 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
 
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+## 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