# Svelte 5 Static Template with shadcn-svelte

A modern, production-ready template for building static websites with Svelte 5, SvelteKit, and shadcn-svelte components, containerized with nginx.

## Features

- ⚡ **Svelte 5** - Latest version with new features
- 🏗️ **SvelteKit** - Full-stack framework with static adapter
- 🎨 **shadcn-svelte** - Beautiful, accessible UI components
- 🎭 **Tailwind CSS 4** - Latest version for styling
- 📝 **TypeScript** - Type safety out of the box
- 🧪 **Testing Suite** - Vitest for unit tests, Playwright for E2E
- 📏 **Code Quality** - ESLint + Prettier configured
- 🔒 **Security** - Semgrep static analysis + Bun audit
- 🤖 **Dependencies** - Renovate for automated updates
- 🐳 **Docker Ready** - Production nginx container
- 🚀 **Static Generation** - Optimized for deployment anywhere

## Quick Start

### Development

```bash
# Install dependencies
bun install

# Install Playwright browsers (for E2E tests)
just install-browsers
# OR: bunx playwright install

# Install system dependencies for Playwright (Linux/WSL)
just install-deps
# OR: sudo bunx playwright install-deps

# Start development server
bun run dev
```

### Production Build

```bash
# Build static site
bun run build

# Preview production build
bun run preview
```

### Docker Deployment

```bash
# Build and run with Docker Compose
docker-compose up --build

# Or build Docker image manually
docker build -t svelte-static-app .
docker run -p 3000:80 svelte-static-app
```

## Project Structure

```
├── src/
│   ├── lib/
│   │   ├── components/ui/    # shadcn-svelte components
│   │   └── utils.ts          # Utility functions
│   ├── routes/               # SvelteKit routes
│   └── app.html             # HTML template
├── static/                   # Static assets
├── tests/                    # Test files
├── Dockerfile               # Multi-stage Docker build
├── nginx.conf              # Nginx configuration
└── docker-compose.yml      # Container orchestration
```

## Scripts

- `bun run dev` - Start development server
- `bun run build` - Build for production
- `bun run preview` - Preview production build
- `bun run test` - Run all tests
- `bun run test:unit` - Run unit tests
- `bun run test:e2e` - Run E2E tests
- `bun run lint` - Lint code
- `bun run format` - Format code

## Adding UI Components

Use the shadcn-svelte CLI to add components:

```bash
# Add a component
bunx shadcn-svelte@latest add [component-name]

# Example: Add a dialog component
bunx shadcn-svelte@latest add dialog
```

## Configuration

### Static Adapter

The static adapter is configured in `svelte.config.js`. Modify settings as needed:

```js
adapter: adapter({
	pages: 'build', // Output directory
	assets: 'build', // Assets directory
	fallback: undefined, // SPA fallback page
	precompress: false, // Enable gzip/brotli
	strict: true // Strict prerendering
});
```

### Nginx

Production nginx configuration in `nginx.conf` includes:

- Gzip compression
- Static asset caching
- Security headers
- SPA routing support

## CI/CD & Deployment

### GitHub Actions / Gitea Actions

Single workflow (`.github/workflows/ci.yml`) that runs:

- **Tests & Linting** - Full CI pipeline with Just commands
- **Security Scanning** - Semgrep static analysis + Bun audit
- **Docker Build** - Pushes to your container registry

**Required Secrets/Variables:**

- `DOCKER_REGISTRY` - Your container registry URL
- `DOCKER_REPOSITORY` - Your repository path
- `DOCKER_USERNAME` / `DOCKER_PASSWORD` - Registry credentials
- `SEMGREP_APP_TOKEN` - Optional for advanced Semgrep features

### Deployment Options

This template generates a static site that can be deployed to:

- **Container Platforms** - Docker with nginx (recommended)
- **Static Hosts** - Netlify, Vercel, any CDN
- **Traditional Hosting** - Any web server

## Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests and linting
5. Submit a pull request

## License

MIT License - see LICENSE file for details