115 lines
4.2 KiB
Markdown
115 lines
4.2 KiB
Markdown
# SHIFT Hydrogen — Site Reference
|
||
|
||
## Stack
|
||
- **Astro 4** (static output) + **Tailwind CSS 3**
|
||
- **Cloudflare Pages** — auto-deploys on push to `main`
|
||
- **Cloudflare Pages Functions** — serverless endpoint at `/api/contact`
|
||
- **Web3Forms** — handles email delivery, no backend needed
|
||
- **Cloudflare Turnstile** — bot protection on the contact form
|
||
|
||
## Commands
|
||
```
|
||
pnpm dev # local dev server (Pages Functions don't run here)
|
||
pnpm build # production build → dist/
|
||
pnpm preview # preview built output (no Pages Functions)
|
||
```
|
||
To test the contact form locally you need `wrangler pages dev`.
|
||
|
||
## Project Structure
|
||
```
|
||
src/
|
||
content/ ← all editable copy lives here
|
||
pages/ ← home.md, about.md, apply.md, contact.md
|
||
clusters/ ← one .md per team cluster
|
||
team/ ← one .md per team member
|
||
config.ts ← content collection schemas
|
||
layouts/
|
||
Layout.astro ← shared HTML shell, navbar, footer, fonts
|
||
components/
|
||
Navbar.astro
|
||
Footer.astro
|
||
TeamCard.astro
|
||
ClusterCard.astro
|
||
pages/ ← route files (read content, render HTML)
|
||
index.astro
|
||
about.astro
|
||
apply.astro
|
||
contact.astro
|
||
team.astro
|
||
functions/
|
||
api/
|
||
contact.js ← Pages Function: verifies Turnstile, forwards to Web3Forms
|
||
public/
|
||
images/
|
||
logo.png
|
||
hero-bg.jpg / about-bg.jpg / apply-bg.jpg
|
||
team/ ← firstname-lastname.jpg for each member
|
||
```
|
||
|
||
## Editing Page Copy
|
||
|
||
### Home (`src/content/pages/home.md`)
|
||
All sections are YAML frontmatter — hero headline, mission body, vision body, CTA section. Edit the values directly. No markdown body used on this page.
|
||
|
||
### About & Apply (`src/content/pages/about.md`, `apply.md`)
|
||
Standard frontmatter (`title`, `description`) + markdown body. The body content is currently hardcoded in the `.astro` files — to change it, edit `src/pages/about.astro` and `src/pages/apply.astro` directly.
|
||
|
||
### Contact (`src/content/pages/contact.md`)
|
||
Only the intro blurb is here. The form, social links, and success/error messages live in `src/pages/contact.astro`.
|
||
|
||
### Cluster descriptions (`src/content/clusters/`)
|
||
Frontmatter: `title`, `order`, `tagline`. Body: free markdown, rendered on the Apply page.
|
||
|
||
## Team Management
|
||
|
||
Add/remove a member by creating or deleting their file in `src/content/team/`.
|
||
|
||
**Filename:** `firstname-lastname.md`
|
||
|
||
**Frontmatter:**
|
||
```yaml
|
||
---
|
||
name: Full Name
|
||
role: Their Role
|
||
cluster: Business & Economics # must match a cluster title exactly
|
||
photo: firstname-lastname.jpg # must exist in public/images/team/
|
||
order: 1 # sort order within their cluster
|
||
---
|
||
```
|
||
|
||
Drop their photo into `public/images/team/` at the same time.
|
||
|
||
## Integrations & Keys
|
||
|
||
### Web3Forms
|
||
- Access key: `539526ba-d115-4324-8401-62b2753cfe4b`
|
||
- Set in `functions/api/contact.js` — never needs to be in client HTML
|
||
- Dashboard: https://web3forms.com — 250 submissions/month on free tier
|
||
|
||
### Cloudflare Turnstile
|
||
- Site key (public): `0x4AAAAAADhhdYPafjRTZbrV` — in `src/pages/contact.astro`
|
||
- Secret key (server): `0x4AAAAAADhhdSp6p_510Kj_40PSKs4lXNY` — in `functions/api/contact.js`
|
||
- If you want to move the secret out of source, add `TURNSTILE_SECRET` as an environment variable in the Cloudflare Pages dashboard — the function reads it automatically via `context.env.TURNSTILE_SECRET`.
|
||
|
||
### Contact Form Flow
|
||
1. User completes Turnstile challenge in the browser
|
||
2. Form POSTs to `/api/contact` (Pages Function)
|
||
3. Function verifies token with Cloudflare, then forwards to Web3Forms
|
||
4. Web3Forms sends email to `info@shifthydrogen.nl`
|
||
5. 10-minute cooldown on the submit button after a successful send (stored in `localStorage`)
|
||
|
||
## Design Tokens
|
||
Defined inline in component `<style>` blocks — no separate token file. Key values:
|
||
- **Background:** `#060B09` (near-black green)
|
||
- **Surface:** `#0C1510`, `#0F1C14`
|
||
- **Accent:** `#0CC9A8` (teal)
|
||
- **Text primary:** `#F0FAF5`
|
||
- **Text muted:** `rgba(240,250,245,0.35–0.45)`
|
||
- **Border:** `#162A20`
|
||
- **Font:** Plus Jakarta Sans (Google Fonts) — 300/400/500/600/700/800
|
||
|
||
## Deployment
|
||
Cloudflare Pages builds automatically on every push to `main`.
|
||
- Build command: `pnpm build`
|
||
- Output directory: `dist`
|
||
- Check build status: Cloudflare Pages dashboard → Deployments tab
|