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).
+## Development Commands
-
+```bash
-## Creating a project
+pnpm install          # Install dependencies
-
+pnpm dev              # Start dev server (default: http://localhost:5173)
-If you're seeing this, you've probably already done this step. Congrats!
+pnpm build            # Build for production
-
+pnpm preview          # Preview production build
-```sh
+pnpm check            # Type-check with svelte-check
-# create a new project in the current directory
+pnpm check:watch      # Type-check in watch mode
-npx sv create
+pnpm format           # Format code with Prettier
-
+pnpm lint             # Lint with ESLint and Prettier
-# create a new project in my-app
-npx sv create my-app
 ```
 
-## Developing
+## Architecture
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+### Routing Structure
-
+```
-```sh
+src/routes/
-npm run dev
+├── +layout.svelte          # Root layout with Nav component
-
+├── +page.svelte           # Blog listing (homepage at /)
-# or start the server and open the app in a new browser tab
+├── +page.ts              # Loads all posts from ./posts/*.md
-npm run dev -- --open
+├── 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
+### MDsveX Configuration
-npm run build
+- 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