This folder
Everything needed to view this guide is bundled here. You can open index.html directly in a browser, host the folder on any static server, or zip and share it with editors.
Contents
site-guide/
├── index.html ← open this file (site-guide.nglhrc.com)
├── styles/guide.css ← brand colours & layout
├── fonts/ ← Plain + Fraunces (bundled)
├── images/
│ ├── logo-colour.png
│ ├── logo-white.png
│ ├── favicon.svg
│ └── screenshots/
│ ├── studio-structure-hero-deck.png
│ ├── studio-faqs-list.png
│ ├── studio-team-editor.png
│ └── studio-news-empty.png
└── README.txt
Brand colours
The guide uses the same palette as the NGLHRC website.
Quick start
Three steps for any content change. Bookmark the Studio link and you are ready.
- Log in to Sanity Studio Open content.nglhrc.com and sign in with your Sanity account.
- Find the content in the left sidebar Use the three-column Studio layout — content types on the left, page or collection list in the middle, editor on the right.
- Edit, then click Publish Saving a draft does not update the live website. Always press Publish when you are done.
Good to know
If Sanity content is missing or deleted, the website falls back to built-in default copy so pages never go blank. Publishing your CMS content replaces those defaults.
Open the Studio
The content editor is a separate app from the public website.
Studio URL
Sign in with your Sanity account. The Studio uses a three-column layout: Content types on the left, Page content (or collection items) in the middle, and the editor on the right.
Developers can also run it locally at http://localhost:3333 with npm run studio:dev from the project folder.
Publish changes
Drafts are invisible to visitors. Publishing pushes content to the live site within a few seconds.
Add new content
- Open the collection (e.g. Team) in Content
- Click the + button above the list
- Fill in fields → Publish
Edit existing content
- Click the document in the list
- Change any field → Publish
Remove content
- Open the document
- Menu (⋯) → Delete
- Or unpublish to hide it
Add, edit & remove
The same pattern applies to every collection (Team, FAQs, Program cards, Gallery, etc.).
Collections vs page settings
Collections (Team, FAQs, News…) — many documents. Use Create new to add, open a row to edit, delete to remove.
Page settings (About page, Programs page…) — one document each, already created. Open it directly from the sidebar — there is only one to edit.
Team members
Staff appear on the homepage. Advisory board members appear on /advisory-board.
- Add a staff member Studio → Team → click the + button above the member list. Set Group to Staff. Fill name, role, pronouns, bio, and upload a photo. Set Sort order to control position in the grid. Publish.
- Edit a member Team → click their name → change fields → Publish.
- Remove a member Open their document → ⋯ menu → Delete. The site reverts to the built-in fallback list if no other CMS team exists.
Programs
Programs content is split between page settings and individual program cards.
Programs page settings
Page content → Programs page — hero image, intro paragraph, and the sliding photo marquee at the bottom of /programs.
Program flip cards
Program cards collection — each card on /programs (Movement Building, Legal Aid, Because Womxn, etc.).
-
Create a card
Program cards → Create. Set a stable Key (e.g.
legal-aid), title, blurb, back summary, and upload a front illustration (required for the card to appear). - Mark one as featured Toggle Featured on one card for the large hero-style card layout.
- Reorder cards Use Sort order — lower numbers appear first.
Homepage vs programs page
The programs marquee on the homepage (/#programs) uses separate built-in content, not these CMS program cards. Ask a developer if you need that section updated.
Page content
Singleton pages — open directly from Page content in the sidebar.
| Document | What you can edit |
|---|---|
| Homepage — Our story | Portrait carousel images, caption, rotation speed, headline, body paragraphs, CTA label |
| Homepage — Hero deck | Dimension card titles, tags, blurbs, back summaries, colours, link URLs |
| About page | Hero image, decade photo, mission photo, impact stats, community needs bullets |
| Contact page | Hero photo, office phone cards, visit panel sidebar image |
| Donate modal | Left panel image, eyebrow text, tagline |
| Safety Alerts page | Rights guide, safety tips, safe areas, emergency contacts (full page body) |
| Liberated page — Mural | Mural caption and six region tile labels (Movement, Law, Presence, etc.) |
| Site settings | Top bar urgent alert, form notification email routes, default contact email |
About page narrative
Long-form story paragraphs and the timeline on /about are still in code. CMS covers photos, stats, and community needs — contact a developer for narrative copy changes.
News, gallery & more
Step-by-step for each major collection.
FAQs
FAQs in Content → click + to add. Set question, answer, category (General / Repeal 162 / Legal aid), and sort order. Appears on /faq and the first four on the homepage.
News articles
News & media in Content → click + to create. Required: title, slug, published date, category, cover image. Live at /news/your-slug.
Note: The main /news listing still shows the year archive of external links. Individual CMS articles work at their slug URL. Full article body rendering is coming soon.
Safety alerts (News promos)
Safety alerts → Create. Title, summary, published date. Keep Active on. Latest three appear on the News page.
Gallery albums
Gallery albums → Create. Title, slug, cover image, photos array. Toggle Featured in gallery hero for homepage-style hero rotation on /gallery.
Gallery videos
Gallery videos → Create. Paste a YouTube URL, add title and description. Publish.
Knowledge Hub (publications)
Knowledge Hub → Create. Title, slug, category, excerpt, cover image. Upload a PDF or paste an external download link.
Images & files
How to add and replace images across the site.
- Upload in Studio (recommended) Click any image field → drag a file or browse. Sanity hosts the file on its CDN automatically.
-
Legacy path (temporary)
Some fields still accept a Legacy path like
/assets/images/team/photo.pngfor images already on the server. Replace with an upload when you can. - Photo cropping (team) Team members have Photo vertical focus / height / offset fields to fine-tune how portraits crop in the grid.
-
Object position
Many image fields include an object position value (e.g.
center 38%) to control which part of the image is visible in cards.
Image tips
Use WebP or JPEG for photos. Aim for under 500 KB where possible. Illustrations for program cards work best as WebP with transparent or simple backgrounds.
Not in the CMS
These areas still require a developer. Ask the tech team rather than searching Studio.
| Content | Why |
|---|---|
Code Our Wins page (/our-wins) |
Full timeline is hardcoded; Legal wins schema exists but is not wired yet |
| Code Homepage programs marquee | Separate from CMS program cards on /programs |
| Code About page long narrative & timeline | Only photos/stats/needs are CMS-editable |
| Code Navigation, footer links | Defined in code |
Code News year archive on /news |
External press links by year |
| Code Donation checkout (Paystack) | Keys and enablement via environment variables — see Paystack review |
| Code Program default illustrations & colours | Used when a CMS card has no illustration uploaded |
Production & staging
The public site and developer workflow use two deployment tracks. Content editors work in one Sanity Studio — changes appear on both environments once published. This handbook lives at site-guide.nglhrc.com.
| Environment | Website | Git branch | Purpose |
|---|---|---|---|
| Production | nglhrc.com | main |
Live public website. Only merge tested work here. |
| Staging | Staging preview URL (from hosting provider) | staging |
Review developer changes before production. Auto-deploys from the staging branch. |
| Content Studio | content.nglhrc.com | — | CMS for editors. Same dataset for both environments. |
| Site guide | site-guide.nglhrc.com | — | Editor handbook for the upgraded website (this document). Also at /site-guide/ on nglhrc.com. |
Workflow for developers
Open pull requests against staging first. After review on the staging site, merge staging → main to release to nglhrc.com. Need the staging URL or deploy access? Email support@seersmith.com.
For content editors
Publishing in Sanity updates content on both production and staging (they share the same CMS dataset). Code changes (layout, new features) only appear on staging until merged to main. Bookmark site-guide.nglhrc.com for editing help.
Paystack review
For developers or Paystack administrators auditing donations and book orders. No secret keys belong in this guide or in the website codebase.
Security rule
Only the public key (pk_test_* or pk_live_*) is loaded in the browser. The secret key (sk_*) lives on the server only (nglhrc-web-server) and must never be committed to git or pasted into chat.
What Paystack powers
- Donate modal — preset amounts in KES, custom amount, card / mobile money via Paystack Inline
- Hatimaye book orders — fixed price checkout (KES 3,500)
When Paystack is off, both flows fall back to manual options (contact page, M-Changa paybill).
Environment variables (names only)
Set these in your hosting dashboard or local .env — never commit real values.
| Variable | Where | Safe in browser? | Description |
|---|---|---|---|
VITE_PAYSTACK_PUBLIC_KEY |
nghlrc-web | Yes (public) | Paystack public key. Use pk_test_* on staging/local; pk_live_* on production only. |
VITE_PAYSTACK_ENABLED |
nghlrc-web | Yes | Optional override: true or false to force checkout on/off before the scheduled go-live date. |
PAYSTACK_SECRET_KEY |
nglhrc-web-server | Never | Server-only secret for webhook signature verification. Not used by the donate UI. |
Go-live gate
Checkout is automatically enabled from 31 August 2026 (EAT) unless VITE_PAYSTACK_ENABLED overrides it. Logic: src/config/paystackFeature.ts.
Donation limits & presets (code defaults)
- Currency: KES
- Preset amounts: KES 500, 1,000, 2,500, 5,000, 10,000, 25,000
- Minimum: KES 100 · Maximum: KES 5,000,000
- Source:
src/config/paystack.ts
How to verify without exposing keys
-
Check the key prefix in hosting env
Staging should use
pk_test_…. Production should usepk_live_…. Never putsk_keys in the frontend env. - Confirm checkout UI on staging On the staging site, open Donate or Hatimaye — you should see “Secured by Paystack” and the inline popup. If you see manual M-Changa / contact copy instead, Paystack is gated off or the public key is missing.
- Run a test transaction Use Paystack test mode on staging with test cards from the Paystack test payments docs. Confirm the charge appears in the Paystack dashboard under Test Transactions.
- Audit the Paystack dashboard Log in at dashboard.paystack.com. Review API keys (Settings → API Keys & Webhooks), allowed domains, and transaction logs. Rotate keys there if compromised — then update hosting env vars only.
-
Webhook endpoint (server)
Production server exposes
POST /api/webhooks/paystack(stub until secret is configured). Webhook URL and signing secret are set in Paystack dashboard, not in this repo.
Review checklist for Paystack admins
- ☐ Production uses
pk_live_*; staging/local usepk_test_* - ☐ No
sk_*orpk_*values in git history or this documentation - ☐
https://nglhrc.com(and staging URL) allowed in Paystack dashboard if required - ☐ Test donation completes on staging; live donation tested once before announcing
- ☐ Webhook URL pointed at production API when ready; signature verification enabled
- ☐ Go-live date or
VITE_PAYSTACK_ENABLEDmatches launch plan
Questions?
Support contact: support@seersmith.com. Reference files: nghlrc-web/.env.example, nglhrc-web-server/.env.example, src/lib/paystack/.
Troubleshooting
Common issues and fixes.
Changes not showing on the website
- Did you click Publish? Drafts are not live.
- Hard-refresh the browser: Cmd+Shift+R (Mac) or Ctrl+Shift+R (Windows).
- CDN may take a few seconds — wait and refresh again.
Website shows “403 Forbidden” or blank CMS content
The website domain may not be in Sanity’s CORS allowlist. A developer must add your URL in Sanity API settings (e.g. https://nglhrc.com and your staging URL).
New Studio sections missing
Schema updates require redeploying Studio: npm run studio:deploy. Then hard-refresh Studio.
Program card not appearing
Every program card must have a front illustration uploaded. Check that the document is published and sort order is set.
Deleted content reappeared
The site falls back to built-in defaults when CMS content is empty. This is intentional — publish new CMS content to replace defaults.
For developers
Technical reference for seeding, deploying, and local development.
Studio commands
npm run studio:dev # local → http://localhost:3333
npm run studio:build # production build
npm run studio:deploy # deploy to content.nglhrc.com
Seed all content from fallbacks
Requires SANITY_API_TOKEN (Editor) in .env:
npm run seed:all
Individual seeds: seed:pages, seed:team, seed:faqs, seed:publications, seed:gallery-videos, upload:team-photos
Project details
- Production site: nglhrc.com (
mainbranch) - Staging site:
stagingbranch — ask support@seersmith.com for URL - Sanity project:
y3i6nrx5 - Dataset:
production - Frontend queries:
src/lib/sanity/ - Fallback data:
src/content/*Fallback.ts - Full technical README:
sanity/README.md
Contact
Who to reach for help beyond everyday content editing.
| Need | Contact |
|---|---|
| Content editing (Sanity) | Use this guide + content.nglhrc.com |
| Website bugs, staging access, deployments, Paystack | support@seersmith.com |
| General NGLHRC enquiries | nglhrc.com/contact |