69 lines
2.4 KiB
Markdown
69 lines
2.4 KiB
Markdown
## Project Overview
|
|
Static blog built with SvelteKit, MDsveX, and Tailwind CSS v4. Uses `@sveltejs/adapter-static` for static site generation.
|
|
|
|
## 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
|
|
```
|
|
|
|
## 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
|