Community website for the Web Dev & Design Discord server. Built with Astro, React islands, Tailwind CSS, and Zod-validated content collections.
- Astro — static site shell and routing
- React — interactive islands (search, mobile nav)
- Tailwind CSS — styling
- Zod — schema validation
- Vitest — unit and component tests
- Cloudflare Pages — deployment target
Requires Node.js 24+.
pnpm install
cp .env.example .env
pnpm dev| Command | Description |
|---|---|
pnpm dev | Start dev server |
pnpm build | Production build |
pnpm preview | Preview production build |
pnpm test | Run tests in watch mode |
pnpm test:run | Run tests once (CI) |
pnpm lint | Lint with ESLint |
The Open Graph image at /og-image.png is generated at build time from public/og-image.svg and public/logo.png via a static file endpoint (src/pages/og-image.png.ts).
| Variable | Description |
|---|---|
PUBLIC_SITE_URL | Canonical site URL for meta tags |
PUBLIC_DISCORD_INVITE_URL | Discord invite link for CTAs |
/— Home with Discord join CTA/learning— Curated resources with search and filter/code-of-conduct— Community guidelines
This project includes a wrangler.toml for Cloudflare Pages.
| Setting | Value |
|---|---|
| Build command | pnpm build |
| Output directory | dist |
| Node version | 24 |
Set PUBLIC_SITE_URL and PUBLIC_DISCORD_INVITE_URL in Cloudflare Pages environment variables.
For local preview with Wrangler:
pnpm build
pnpm dlx wrangler pages dev dist