electron-rare.github.io/CLAUDE.md

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

Corporate site for L'électron rare (electronics consulting studio) — an Astro 5 SSR site with a React Three Fiber 3D product viewer as its centerpiece. Production URL: https://www.lelectronrare.fr/

Commands

npm run dev              # Astro dev server (default port 4321)
npm run build            # Production build (SSR, outputs dist/)
npm run build:external   # Build with PUBLIC_SITE_URL for external domain
npm run preview          # Preview production build locally
npm run typecheck        # astro check (TypeScript validation)
npm run storybook        # Component dev on port 6006
npm run lab:dev          # Sub-app (apps/lab-interactif) dev server
npm run tracking:check   # Validate GA4 tracking events
npm run image:budget     # Check image sizes against budget

Docker build & deploy (from /home/electron/electron-rare.github.io/infra/):

docker compose -f docker-compose.site.yml build electron-rare-site
docker compose -f docker-compose.site.yml up -d electron-rare-site

Architecture

Runtime: Astro SSR with @astrojs/node adapter (standalone mode). The built site runs as node dist/server/entry.mjs on port 4321, behind Traefik.

Styling: Tailwind CSS 4 integrated via @tailwindcss/vite plugin — no separate tailwind.config. Uses cva + clsx + tailwind-merge for component variants.

Path alias: @/* maps to src/*.

Site URL & Base Path

The site supports multiple deployment targets (GitHub Pages subpath, custom domain). PUBLIC_SITE_URL env var drives both astro.config.mjs and src/lib/site.ts. All internal links must use withSiteBase() from src/lib/site.ts to work across deployments.

3D Viewer (src/components/BmuViewer.tsx)

The main differentiating feature — a scroll-driven 3D PCB viewer on the /preview/ page:

• Loads 5 GLTF models (BMU, I2C Repeater, MOSFET switches) from public/assets/models3d/
• 16+ named scroll sections, each defining camera position, rotation, focus card, and explode amount
• Scroll progress (0–1) interpolates between section states for smooth transitions
• Uses @react-three/drei Html component for interactive PCB label overlays
• Post-processing: Bloom + Vignette via @react-three/postprocessing
• VideoTexture meshes for PCB bottom views
• Brand color: #5bd1d8 (cyan)

Pages

• index.astro — Landing page with section components (Hero, About, CaseStudies, GraphicSprints, Faq, Contact)
• preview.astro — 3D scroll-driven viewer (1000vh scroll track, fixed overlays, dot navigation)
• api/submit-lead.ts — Server endpoint posting to Frappe CRM
• formation.astro, portfolio.astro, ops.astro — Content pages

CRM Integration

Contact form submits to Frappe CRM via src/pages/api/submit-lead.ts. Requires FRAPPE_URL, FRAPPE_API_KEY, FRAPPE_API_SECRET env vars (set in infra/.env).

CI/CD

Push to main triggers GitHub Actions (.github/workflows/deploy-cloudflare.yml):

1. npm ci + npm run build with PUBLIC_SITE_URL=https://www.lelectronrare.fr/
2. SCP dist/ to Tower server
3. Docker container restart (node:22-alpine running dist/server/entry.mjs)
4. Health check on http://127.0.0.1:4321/

GLB Pipeline

KiCad .kicad_pcb → STEP export → FreeCAD Docker tessellation → GLB with per-component materials and KiCad raytraced textures. Models stored in public/assets/models3d/.