96 lines
5.6 KiB
Markdown
96 lines
5.6 KiB
Markdown
# Arising Media — Web Design SOPs
|
|
|
|
Standard operating procedures for building, migrating, and deploying websites
|
|
the Arising Media way. Reference `stack-selector.json` FIRST to pick the correct
|
|
stack before touching any other SOP.
|
|
|
|
## Stack selector (read this first)
|
|
|
|
`stack-selector.json` — machine-readable + human-readable decision guide.
|
|
Covers all three stacks, approved colors, section types, DB guidance, hot-copy commands.
|
|
|
|
## Two primary stacks (2026-05-21 standard)
|
|
|
|
### Stack A — PHP Router + SQLite (50+ page sites)
|
|
**Reference: `arisingmedia.us`** — 10,000+ pages, single router, SQLite content DB.
|
|
Edit one template → all pages in that class update instantly. No find-and-replace.
|
|
Architecture diagram: `arisingmedia.us/.planning/RENDER_ARCHITECTURE.html`
|
|
Build standard: `arisingmedia.us/.planning/WEBSITE_BUILD_STANDARD.md`
|
|
SOP: `15-php-router-sqlite-standard.md`
|
|
|
|
### Stack B — Static HTML (fewer than 50 pages)
|
|
**Reference: `lahrcarpetcleaning.com`** — universal Docker + cPanel deployment.
|
|
Every page is an HTML file on disk. Simple, portable, no server-side requirements.
|
|
SOP: `01-project-structure.md`, `03-build-pipeline.md`, `08-deployment-docker.md`
|
|
|
|
### Stack C — PHP App (file processing, auth, payments)
|
|
**Reference: `quickconvert.us`**
|
|
SOP: `14-php-app-stack.md`
|
|
|
|
## Index
|
|
|
|
1. [00-stack-philosophy.md](00-stack-philosophy.md) — Why static HTML + vanilla JS + Python tooling, what we never use
|
|
2. [01-project-structure.md](01-project-structure.md) — Folder layout: flat HTML (Docker) vs directory-style (cPanel). Lahr reference structure.
|
|
3. [02-wordpress-to-html-migration.md](02-wordpress-to-html-migration.md) — The migration playbook
|
|
4. [03-build-pipeline.md](03-build-pipeline.md) — JSON data + HTML template + Python build script
|
|
5. [04-content-rules.md](04-content-rules.md) — Writing standards (no em-dashes, no fake metrics)
|
|
6. [05-mobile-responsive.md](05-mobile-responsive.md) — Breakpoints, mobile nav, viewport testing
|
|
7. [06-seo-meta.md](06-seo-meta.md) — Title, meta, canonical, keywords, schema, og:, robots.txt, sitemap. Includes lahr examples.
|
|
8. [07-form-handling.md](07-form-handling.md) — Resend API + Python stdlib service pattern
|
|
9. [08-deployment-docker.md](08-deployment-docker.md) — Universal deployment: Docker+nginx (Path A) AND cPanel+Apache (Path B). Universal project checklist.
|
|
10. [09-domain-email-dns.md](09-domain-email-dns.md) — Resend domain verification, SPF/DKIM/DMARC
|
|
11. [10-testing-verification.md](10-testing-verification.md) — Playwright checks before declaring done
|
|
12. [11-healthcare-regulated-credentials.md](11-healthcare-regulated-credentials.md) — Licensure copy compliance for healthcare clients (MHC-LP, LMHC, supervision disclosure)
|
|
13. [12-image-assets.md](12-image-assets.md) — WebP requirement, sizing targets, local generation (FLUX.1 Schnell), convert-to-webp.py
|
|
14. [13-reference-site-visual-audit.md](13-reference-site-visual-audit.md) — Playwright Firefox scroll-capture + frame-strip + pin-transition annotation. Output skeleton + schema mapping for any client-cited reference URL.
|
|
15. [14-php-app-stack.md](14-php-app-stack.md) — When to use PHP + Docker instead of static HTML. Server-side processing, encryption, auth patterns.
|
|
|
|
## Image generation workflow
|
|
|
|
See [local-image-generation/](local-image-generation/) for the full local pipeline:
|
|
- [01-comfyui-setup.md](local-image-generation/01-comfyui-setup.md) — ComfyUI install, venv, GPU notes
|
|
- [02-flux-images.md](local-image-generation/02-flux-images.md) — FLUX.1 Schnell image pipeline
|
|
- [03-wan-video.md](local-image-generation/03-wan-video.md) — Wan 2.2 image-to-video pipeline
|
|
- [04-prompt-guide.md](local-image-generation/04-prompt-guide.md) — Lens, angle, depth-of-field prompt patterns
|
|
- [05-quality-levers.md](local-image-generation/05-quality-levers.md) — Prompt, steps, model size: decision matrix for fixing output quality
|
|
|
|
Default stack (free, no API cost): FLUX.1 Schnell GGUF (images) + Wan 2.2 GGUF (video) via ComfyUI
|
|
All output: `.webp` only — see `12-image-assets.md`
|
|
|
|
Cloud APIs (Google Veo, Imagen 4, Gemini video): only when client has explicit paid media budget.
|
|
Local generation is the default for all Arising Media client projects.
|
|
|
|
## Universal project file checklist
|
|
|
|
Every project must include ALL of these before first commit:
|
|
|
|
```
|
|
Dockerfile Docker/VPS — nginx web container
|
|
docker-compose.yml Docker/VPS — service orchestration
|
|
nginx.conf Docker/VPS — routing, security headers, gzip
|
|
.htaccess cPanel/Apache — clean URLs, deny sensitive files
|
|
.cpanel.yml cPanel Git — copy files to webroot on deploy
|
|
.dockerignore keeps secrets and tools out of Docker image
|
|
.gitignore keeps .env and secrets out of git
|
|
robots.txt both paths
|
|
sitemap.xml both paths
|
|
llms.txt both paths — AI crawler documentation (see 06-seo-meta.md)
|
|
404.html both paths
|
|
500.html both paths
|
|
```
|
|
|
|
## Reference projects
|
|
|
|
- `lahrcarpetcleaning.com` — **primary reference**: universal deployment, directory-style URLs, WebP images, cPanel Git, mobile nav, FLUX image generation
|
|
- `floorithardwoodfloors.com` — first WP-to-static migration with Docker stack
|
|
- `backforge.nl` — simpler static site, no form API
|
|
|
|
## When to deviate
|
|
|
|
These SOPs are the default. Deviate only when:
|
|
- The client explicitly requires a different stack (CMS-managed editing, e-commerce with Shopify/Woo, etc.)
|
|
- A required feature literally cannot be done with this stack
|
|
|
|
Document the deviation in the project's own `README.md` so future maintainers
|
|
know what is and is not standard.
|