Initial commit: Socktop WebTerm with k3s deployment
- Multi-architecture Docker image (ARM64 + AMD64) - Kubernetes manifests for 3-replica deployment - Traefik ingress configuration - NGINX Proxy Manager integration - ConfigMap-based configuration - Automated build and deployment scripts - Session monitoring tools
This commit is contained in:
@@ -0,0 +1,93 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user