B Corridor: website + news CMS

Website for the B Corridor, a Waterford biodiversity corridor project. It's a fast static site (HTML/CSS/JS) with a small Git-based CMS so the team can publish News posts using an email + password login — no database, no server to run.

Hosted free on Cloudflare Pages, deployed automatically from this GitHub repo.

Pages

index.html          home page
blog.html           News listing (category filter + pagination + sidebar)
article.html        hand-built sample article (design reference)
news/<slug>.html    one page per post — GENERATED by build.js, do not edit

How the CMS works

admin/                the editor — email/password login + post form
                      (rich text, image upload, carousel, video embed)
functions/api/        Cloudflare Pages Functions: login, logout, list, save, upload
lib/cms.js            shared auth (Web Crypto) + GitHub helpers
content/news.json     all posts (source of truth; not published)
build.js              turns news.json into news/<slug>.html and refreshes the
                      News grid (blog.html) + homepage cards (index.html) → dist/
tools/hash-password.js   make a password hash when adding an editor

Flow: an editor saves in /admin → a Cloudflare function commits the post to content/news.json in this repo → Cloudflare rebuilds (node build.js) → the live site updates in about a minute.

Setup / deploy instructions: see SETUP.md.

Front-end

styles.css          all site styles (brand tokens in :root at the top)
blog.css            News listing styles
article.css         article-page styles (also used by generated pages)
script.js           nav, hero video, mobile menu, species fact, quote rotator,
                    Leaflet map, polaroid carousel, article carousel/video,
                    news category filter + pagination
assets/             images, icons, fonts, hero video + poster
display-heading/    self-hosted display font
vendor/leaflet/     Leaflet 1.9.4, self-hosted
site.webmanifest    install/pin metadata for phones

Hosting

Deployed on Cloudflare Pages (free), connected to this GitHub repo:

• Build command: node build.js
• Build output directory: dist
• Serverless code lives in functions/ (auto-detected by Pages)

This repo is public. That's fine — no secrets live in it: the GitHub token, session secret and editor password hashes are all stored as Cloudflare environment variables, never in the code (.env is git-ignored). Note that, with a public repo, draft posts in content/news.json are publicly readable, so don't put anything sensitive in a draft.

Before going live

1. Domain — absolute URLs in index.html/blog.html heads (og:url, og:image, canonical) are set to https://bcorridor.com/. Update if the final domain differs.
2. Stadia Maps key — restrict the map tile key in script.js to your domain.
3. Instagram link — the footer Instagram link is still a # placeholder (Facebook + email are set).
4. Donate button — links to #donate; point it at your iDonate page when ready.

Local preview (static only)

node build.js                       # generates dist/
python3 -m http.server -d dist 8080 # preview at http://localhost:8080

The public site previews fine this way. The /admin login/save only works on the deployed Cloudflare site (it needs the functions).

Credits

Website by Alessio Coci.