93 lines
2.2 KiB
Markdown
93 lines
2.2 KiB
Markdown
|
# 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
|