# Rich Text TOC — kis code ka kya kaam hai



Project **3 alag cheezen** hai. Mix mat karo.



---



## 1. Subdomain (website / legal pages) — `site/`



**Yeh Webflow app code NAHI hai.** Sirf public website jo reviewers aur users browser me kholte hain.



| Upload karo (subdomain root par) | Kaam |

|----------------------------------|------|

| `site/index.html` | Homepage (product + short workflow) |

| `site/guide.html` | **Full user guide** (7 steps — kuch miss na ho) |

| `site/privacy.html` | Privacy policy (OAuth / data — honest wording) |

| `site/terms.html` | Terms |

| `site/support.html` | Support + quick checklist |

| `site/styles.css` | Styling |

| `site/rich-text-toc.png` | Logo + favicon |



**Kahan host:** apna subdomain (cPanel, Netlify, Vercel static, Cloudflare Pages, etc.)



**Production URLs (example):**



| Dashboard field | URL |

|-----------------|-----|

| Homepage | `https://toc.myprograming.com/` |

| Privacy | `https://toc.myprograming.com/privacy.html` |

| Terms | `https://toc.myprograming.com/terms.html` |

| Support | `https://toc.myprograming.com/support.html` |

| User guide (review notes me link do) | `https://toc.myprograming.com/guide.html` |



**GitHub par upload mat karo** Marketplace submit ke liye — Webflow ko apna domain chahiye.



Detail: [site/README.md](./site/README.md)



**Marketing sach:** user ko page par **empty TOC Div + Element ID** add karna padta hai; script **Site settings me paste nahi** — **Apply to site** se Custom Code API.



---



## 2. Webflow App (Designer me jo panel khulta hai)



**Yeh asli app hai** — Designer iframe me chalti hai.



| Folder / file | Kaam |

|---------------|------|

| `src/` | React UI (Authorize → Connect → Configure → Apply to site) |

| `extension.html` | Extension entry |

| `public/` | Build output (`npm run build` ke baad) |

| `webflow.json` | Webflow manifest |

| `bundle.zip` | `npm run bundle` — **Webflow Dashboard me upload** |



**App flow (Designer):**



1. **Authorize app** (OAuth — is site ko grant karo)

2. **Connect to Designer** → Connected

3. IDs + H1–H4 configure karo

4. Page par **empty TOC Div** (Element ID match)

5. **Rich Text** select → **Apply to site**

6. **Publish**



**Local test (API + extension dono):**



```bash

npm run dev

```



- API: `http://localhost:3001`

- Extension: `http://localhost:1337` (`webflow extension serve`)



Sirf extension (API alag chal rahi ho):



```bash

npm run start

```



Designer → **Launch development App** / Development URL: `http://localhost:1337`



**Publish app:** App version manager → `bundle.zip` upload (`npm run bundle` pehle)



**Subdomain par `src/` ya `public/` upload mat karo** — woh Designer ke liye hai, website ke liye nahi.



---



## 3. API server (Authorize + Apply to site) — `server/`



OAuth aur Custom Code API ke liye backend.



| Folder | Kaam |

|--------|------|

| `server/src/` | Express API (default port 3001) |

| `.env` (project root) | `WEBFLOW_CLIENT_ID`, `WEBFLOW_CLIENT_SECRET`, `VITE_API_BASE_URL`, etc. |



**Local:**



```bash

npm run server:dev

```



ya `npm run dev` (API + extension ek saath)



**Production:** alag host (e.g. `api.aapkadomain.com`) — Node deploy + production `.env`



Extension rebuild ke liye root `.env`:



```env

VITE_API_BASE_URL=https://api.aapkadomain.com

VITE_APP_BASE_URL=https://toc.aapkadomain.com

```



Phir `npm run bundle` dubara.



**Privacy note (live policy ke saath match):** OAuth tokens server par store hote hain jab tak revoke / nayi authorize na ho; **Disconnect** sirf browser session clear karta hai — Webflow workspace se app revoke bhi kar sakte ho.



---



## Ek nazar me



```

site/           → subdomain (7 files upload)

src/ + public/  → Webflow Designer app → bundle.zip

server/         → API (OAuth, Custom Code apply)

```



## Jo subdomain par NAHI jaata



- `src/`, `server/`, `node_modules/`

- `public/index.js` (extension bundle — website nahi)

- `bundle.zip`

- `docs/` (purana — canonical docs `site/` me)

- Root duplicate HTML (canonical `site/` me)



---



## Marketplace submit



Checklist file: [MARKETPLACE_SUBMISSION.md](./MARKETPLACE_SUBMISSION.md)



Guidelines: https://developers.webflow.com/apps/docs/marketplace-guidelines



**Version notes me galat mat likhna:** “OAuth tokens not retained beyond session” — privacy policy ab server storage + revoke explain karti hai.



---



## Tumhari checklist



1. [ ] `site/` ki **7 files** subdomain par upload (`guide.html` + logo included)

2. [ ] Webflow Dashboard URLs = subdomain (Homepage, Privacy, Terms, Support)

3. [ ] Review notes me **guide.html** link

4. [ ] `npm run bundle` → `bundle.zip` → App version manager upload

5. [ ] `server/` production deploy + `.env` + redirect URI match

6. [ ] `VITE_*` production URLs → dubara `bundle`

7. [ ] Demo video: Authorize → Connect → TOC Div → Apply → Publish

8. [ ] Marketplace resubmit