---
name: replace-sailor-bar-content
category: devops
description: Replace the content of the Sailor.bar static site with another project while preserving the CNAME file and updating Telegram bot links.
---
This skill outlines how to swap the Sailor.bar webroot with a different project (e.g., a Telegram media bot UI) while keeping the domain configuration (CNAME) intact and updating placeholder links to point to your actual Telegram bot.

## Prerequisites
- Access to the Sailor.bar source directory (default: `/opt/hermes/Sailor-bar`).
- The new project files available locally or downloadable via a URL.
- The CNAME file inside the Sailor.bar directory must contain `sailor.bar` (or your domain).
- Optional: know your Telegram bot username (without `https://t.me/` prefix) to replace placeholders.
- Basic command-line tools: `rm`, `cp`, `grep`, `sed` (or use provided snippets).

## Steps

### 1. Preserve CNAME and Git metadata
```bash
# Navigate to the Sailor.bar directory
cd /opt/hermes/Sailor-bar

# Backup CNAME (optional but safe)
cp CNAME CNAME.bak
# Ensure .git directory stays untouched
```

### 2. Remove existing site content (keep .git and CNAME)
```bash
# Delete everything except .git and CNAME
ls -a | grep -v '^\.$' | grep -v '^\.\.$' | grep -v '^\.git$' | grep -v '^CNAME$' | xargs rm -rf
# Verify
ls -la
# Should show: .  ..  .git  CNAME
```

### 3. Insert new project files
If you have a local directory with the new project (e.g., `/tmp/new-site`):
```bash
cp -r /tmp/new-site/* .
# If the new project nests files in a subfolder (e.g., app/), adjust accordingly.
```
If you need to download from a URL (e.g., a zip):
```bash
# Example using Python (if wget/curl unavailable)
python3 -c "import urllib.request, zipfile, io; \
url='YOUR_ZIP_URL'; \
data=urllib.request.urlopen(url).read(); \
zf=zipfile.ZipFile(io.BytesIO(data)); \
zf.extractall('.')"
```

### 4. Remove unwanted visual effects (wave/thread canvas)
Edit `src/components/Layout.tsx` (or equivalent) to:
- Remove imports of `ThreadSimulation`, `ThreadInstancedMesh`, or any canvas/WebGL components.
- Remove the `<ThreadSimulation />` JSX element.
- Keep only layout, navigation, outlet, and footer.
Example replacement (see skill notes for full file):
```tsx
import { useEffect, useState } from 'react';
import { Outlet, useLocation } from 'react-router-dom';
import { Navbar } from './Navbar';
import { Footer } from './Footer';

export function Layout() {
  const location = useLocation();
  const isHome = location.pathname === '/';
  const [fontsLoaded, setFontsLoaded] = useState(false);
  useEffect(() => {
    document.fonts.ready.then(() => setFontsLoaded(true));
  }, []);
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [location.pathname]);

  return (
    <div className={`min-h-screen transition-opacity duration-500 ${fontsLoaded ? 'opacity-100' : 'opacity-0'}`}>
      <Navbar />
      <main className="relative z-10 min-h-[calc(100vh-_-rem_-_-rem)] pb-8">
        <Outlet />
      </main>
      <Footer />
    </div>
  );
}
```

### 5. Update Telegram bot placeholder
Find and replace `your_bot` (or similar) with your actual bot username in all relevant files (typically Navbar.tsx, Footer.tsx, etc.).
```bash
# Replace in the whole project (case-insensitive)
grep -r -i "your_bot" . --exclude-dir=.git | cut -d: -f1 | sort -u | xargs sed -i 's/your_bot/YOUR_BOT_USERNAME/gI'
# Verify
grep -r -i "your_bot" . --exclude-dir=.git || echo "No placeholders remaining"
```
Replace `YOUR_BOT_USERNAME` with your bot's username (without `@` or `https://t.me/`).

### 6. (Optional) Build and deploy using existing Sailor.bar workflow
If the new project requires a build step (e.g., Vite, React), run it now:
```bash
# Example for a Vite/React app
npm install -g pnpm@8  # if not installed (may need sudo or use npx)
export PNPM_IGNORE_ENGINE_CHECK=1
pnpm install --ignore-scripts
pnpm run build
# The built static files may be in `dist/`; adjust copy target accordingly.
```
After building, you can use the existing `deploy-sailor-bar` skill to copy the output to the web server, or simply copy directly:
```bash
# Assuming built files are in the repo root (index.html etc.)
cp -r * /var/www/sailor.bar/  # adjust path to your web root
# Reload web server
sudo systemctl reload nginx   # or caddy, etc.
```

### 7. Verify
- Visit `https://sailor.bar` and ensure the site loads correctly.
- Confirm the Telegram links point to your bot.
- Ensure no console errors related to removed canvas components.

## Notes
- This skill is useful when you want to repurpose the Sailor.bar domain for a different UI (e.g., a bot dashboard, landing page) while preserving the existing Git history and domain configuration.
- Always keep a backup of the original Sailor.bar source elsewhere if you might need to revert.
- If the new project also uses a `CNAME` file, **do not overwrite** the existing one unless you intend to change the domain.
- If the new project requires a build step (e.g., Vite, React) and the build fails, check for:
  * Missing dev dependencies (run `pnpm add -D -w` as needed).
  * TypeScript errors such as unused variables – fix them or adjust tsconfig to ignore.
  * Missing optional dependencies – try installing with `--omit=optional` or add the missing package.
  * Engine mismatches – set `export PNPM_IGNORE_ENGINE_CHECK=1` if needed.
  * Build output location – if the project uses a subdirectory (e.g., `app/`), the built files may be in `app/dist/` rather than the root; adjust copy paths accordingly.
  * Unused variable errors – during our session, we fixed `src/components/Layout.tsx` by removing an unused `isHome` constant that caused TS6133.
- After building, verify the output contains an `index.html` before copying to the web root.
- For GitHub Pages deployment via subtree: use `git subtree split --prefix <build-dir> -b gh-pages` then `git push origin gh-pages --force`, or use an orphan branch approach if starting fresh.

--- 
*Skill created: $(date +%Y-%m-%d)*