Add showcase website + GitHub Pages deploy

.github/workflows/pages.yml

@@ -0,0 +1,41 @@
+name: deploy-site
+
+# Publishes the static showcase site in site/ to GitHub Pages.
+# One-time setup: repo Settings → Pages → Build and deployment → Source: GitHub Actions.
+on:
+  push:
+    branches: [main]
+    paths:
+      - "site/**"
+      - ".github/workflows/pages.yml"
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Configure Pages
+        uses: actions/configure-pages@v5
+
+      - name: Upload site artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: site
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -30,3 +30,6 @@ dist/
 # Logs
 *.log
 /tmp/wcm*.log
+
+# Local screenshot previews of the showcase site (rendered on demand, not deployed)
+site/.preview/

README.md

@@ -31,6 +31,13 @@ surviving restarts.
 
 ## What the menu looks like
 
+<p align="center">
+  <img src="docs/menu-popover.png" width="420" alt="The WeChat Multi menu bar popover: three accounts (Main account, Work, Personal) with color-coded status dots, and footer actions to add an account, open Preferences, or quit." />
+</p>
+
+The whole app lives in your menu bar. Left- or right-click the icon for the
+popover above; the older text sketch below shows every action it exposes:
+
 ```
  💬 WC 2                                          ⏰ 9:41
  ┌──────────────────────────────────────┐
@@ -83,6 +90,14 @@ automatically by CI whenever a new release is published. To remove it later,
 `brew uninstall --cask wechat-multi` (add `--zap` to also delete clones and
 their signed-in sessions).
 
+## Website
+
+A showcase site lives in [`site/`](site/) — a dependency-free static page you
+can deploy anywhere. It ships with both a GitHub Pages workflow and Vercel
+config; see [`site/README.md`](site/README.md) for details.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/ashinno/wechat-multi&root-directory=site&project-name=wechat-multi&repository-name=wechat-multi)
+
 ## Features
 
 - 🍎 **Native menu bar app** — no Dock clutter, no Electron, ~190 KB binary

site/README.md

@@ -0,0 +1,57 @@
+# WeChat Multi — showcase site
+
+A single-page, dependency-free static site that showcases the app. No build
+step: it's plain HTML, CSS, and a few lines of JS.
+
+```
+site/
+├── index.html      # the page
+├── styles.css      # design tokens mirror the app's Brand enum + slot palette
+├── app.js          # copy-to-clipboard buttons (progressive enhancement)
+├── vercel.json     # static config for Vercel (clean URLs, cache + security headers)
+└── assets/
+    ├── icon.png    # app icon (copied from docs/icon.png)
+    └── favicon.svg # jade "stack" mark
+```
+
+## Preview locally
+
+```bash
+cd site
+python3 -m http.server 8000
+# open http://localhost:8000
+```
+
+Or just open `site/index.html` directly in a browser.
+
+## Deploy
+
+The site is a plain static folder, so any static host works. Two are wired up:
+
+### Vercel (recommended)
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/ashinno/wechat-multi&root-directory=site&project-name=wechat-multi&repository-name=wechat-multi)
+
+The button above pre-fills the **Root Directory** as `site`, so Vercel serves
+this folder directly — no build step. `vercel.json` adds clean URLs plus cache
+and security headers.
+
+From the CLI instead:
+
+```bash
+cd site
+vercel          # preview deploy
+vercel --prod   # production deploy
+```
+
+> If you import the repo manually in the Vercel dashboard, set **Root
+> Directory → `site`** and framework preset **Other** (no build command).
+
+### GitHub Pages
+
+`.github/workflows/pages.yml` publishes this folder on every push to `main`
+that touches `site/`. One-time setup:
+
+> **Settings → Pages → Build and deployment → Source: GitHub Actions**
+
+Then the site goes live at `https://ashinno.github.io/wechat-multi/`.

site/app.js

@@ -0,0 +1,28 @@
+// Copy-to-clipboard for code blocks. Progressive enhancement only — the page
+// is fully functional (and the commands fully selectable) without JS.
+document.querySelectorAll(".copy").forEach((btn) => {
+  btn.addEventListener("click", async () => {
+    const code = btn.parentElement.querySelector("code");
+    if (!code) return;
+    const text = code.innerText.trim();
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      // Fallback for older browsers / insecure contexts.
+      const range = document.createRange();
+      range.selectNodeContents(code);
+      const sel = window.getSelection();
+      sel.removeAllRanges();
+      sel.addRange(range);
+      try { document.execCommand("copy"); } catch {}
+      sel.removeAllRanges();
+    }
+    const original = btn.textContent;
+    btn.textContent = "Copied!";
+    btn.classList.add("is-copied");
+    setTimeout(() => {
+      btn.textContent = original;
+      btn.classList.remove("is-copied");
+    }, 1600);
+  });
+});