# Static Assets Directory

This directory contains custom static assets for the webterm application.

## How to Add Files

Simply place your files in this directory:

```bash
# Example: Add a background image
cp my-background.png static/bg.png

# Example: Add a custom CSS file
cp my-styles.css static/custom.css

# Example: Add a logo
cp logo.svg static/logo.svg
```

## How to Access Files

Files in this directory are served at **TWO** different URL paths:

### Option 1: `/assets/*` Route (Recommended)

Files are automatically served from this directory at `/assets/*`:

```
static/bg.png         → http://localhost:8082/assets/bg.png
static/logo.svg       → http://localhost:8082/assets/logo.svg
static/custom.css     → http://localhost:8082/assets/custom.css
```

**Use in CSS/HTML:**
```css
body {
    background-image: url('/assets/bg.png');
}
```

```html
<link rel="stylesheet" href="/assets/custom.css" />
<img src="/assets/logo.svg" alt="Logo" />
```

### Option 2: `/static/*` Route (Manual Copy Required)

If you prefer to use `/static/*` URLs, copy the file to `node_modules/`:

```bash
cp static/bg.png node_modules/
```

Then access it at:
```css
background-image: url('/static/bg.png');
```

**⚠️ Warning:** Files in `node_modules/` may be removed when you run `npm install` or `npm ci`.

## Recommendation

**Use `/assets/*` for your custom assets** because:
- ✅ No need to copy files manually
- ✅ Won't be lost when running npm commands
- ✅ Clear separation between your assets and npm packages
- ✅ Better organization and maintainability

Reserve `/static/*` for npm packages (xterm.js, addons, etc.).

## Current Files

- `terminado-addon.js` - Custom xterm.js addon for Terminado protocol
- `bg.png` - Background image (1.3 MB)

## Server Configuration

The server is configured in `src/server.rs`:

```rust
App::new()
    .service(actix_files::Files::new("/assets", "./static"))  // This directory
    .service(actix_files::Files::new("/static", "./node_modules"))  // npm packages
```

## More Information

See `STATIC_ASSETS.md` in the project root for comprehensive documentation on:
- Adding different types of assets (images, fonts, CSS, JS)
- Path reference guide
- Best practices
- Troubleshooting
- Performance optimization