478e2818b9
Some checks failed
CI / go (push) Has been cancelled
CI / docker (push) Has been cancelled
CI / lint-go (push) Has been cancelled
CI / lint-docs (push) Has been cancelled
CI / check-paperclip (push) Has been cancelled
Deploy static site / Deploy to GitHub Pages (push) Has been cancelled
Deploy static site / Deploy via Docker to hatch.surf (push) Has been cancelled
Three taglines rotate every 3.5s with a subtle 700ms opacity crossfade between the H1 and the hero sub on the hatch.surf landing page: 1. Inspect any request. Mock any response. (default, in initial HTML) 2. Your HTTP bin, on your machine. 3. Send. Capture. Mock. No signup. Implementation: - site/index.html: <div class='hero-tagline' aria-live=polite> with three <p class='hero-tagline-item'> children stacked; default #1 has is-active class and no aria-hidden (for SEO + no-JS users) - site/style.css: .hero-tagline uses position:relative with fixed height: 1.7em (no CLS during rotation); absolute children crossfade via transition: opacity 700ms var(--ease-out); font: JetBrains Mono weight 500 in var(--text-secondary); clamp(0.85rem, 2.2vw, 1rem) so mobile (375px+) fits the longest tagline on one line - site/main.js: initRotatingTagline() in the existing IIFE; setInterval every 3500ms swaps is-active and aria-hidden between siblings; early-returns if prefers-reduced-motion is set, so the default tagline stays visible without animation - Spacing: H1 mb-sp-6, tagline mb-sp-6, sub mb-sp-8 keeps the existing 24px/24px/32px rhythm unchanged below the headline Note: site/index.html (not the Next.js app under app/ + components/) is what hatch.surf/nginx actually serves. The Next.js work from the earlier failed run was reverted. |
||
|---|---|---|
| .. | ||
| blog | ||
| brand | ||
| .dockerignore | ||
| docker-compose.yml | ||
| Dockerfile | ||
| index.html | ||
| main.js | ||
| README.md | ||
| style.css | ||
Hatch Static Site
This directory contains the static site for hatch.surf.
Structure
site/
├── index.html # Landing page
├── style.css # Global styles
├── blog/
│ ├── index.html # Blog index
│ └── why-we-are-building-hatch/
│ └── index.html # Blog post
└── brand/
├── og/
│ └── default.png # Open Graph image
└── favicon/
├── favicon.ico
└── favicon-*.png # Various sizes
Deployment
The site is deployed via Docker to the hatch.surf server. Static files are baked into the Docker image — no host directory mounting required.
Docker Deployment
The GitHub Actions workflow (deploy-site.yml) automatically:
- Builds a Docker image with static files baked in
- Pushes the image to the server
- Restarts the container
Manual Deployment
# From repo root
./scripts/deploy-site.sh
# Dry run
./scripts/deploy-site.sh --dry-run
DNS Configuration
To point hatch.surf to your server:
- Add A record pointing to your server IP
- Enable HTTPS via Caddy or Let's Encrypt
Architecture
The deployment uses:
- Docker image: nginx:alpine with static files baked in
- No host mounts: Image is self-contained, no
/var/wwwdependency - Caddy: Optional reverse proxy for TLS termination
- Port 3000: Internal port, proxied by Caddy on 80/443
Local Development
To preview the site locally:
cd site
python3 -m http.server 8000
# Open http://localhost:8000
Or with Node.js:
npx serve site
Docker
To run the site in Docker:
cd site
# Build and run with docker compose
docker compose up -d
# Or build and run with docker
docker build -t hatch-homepage .
docker run -d -p 3000:80 hatch-homepage
The site will be available at http://localhost:3000
To stop the container:
docker compose down
# Or
docker stop $(docker ps -q --filter ancestor=hatch-homepage)
SEO Checklist
- H1 = title
- Meta description ≤ 160 chars
- Primary keyword in first 200 words
- OG image set
- Internal link to repo
- Canonical URL set
- Semantic HTML
- Mobile responsive
- Fast loading (static HTML/CSS)
Adding New Posts
- Create a new directory under
blog/ - Create an
index.htmlfile with the post content - Update
blog/index.htmlto include the new post - Follow the same HTML structure as existing posts