From f5977be948c523dd4cc2dfb2852e35693cbc8328 Mon Sep 17 00:00:00 2001 From: Florian Wathling Date: Sat, 9 May 2026 17:10:19 +0200 Subject: [PATCH] Update README for Hellion-Media transfer - Brand schema (Arctic Cyan + Ember Glow) section with token table - Cross-link to Hellion-Forge for plugin work - Allocation rules (cyan for structure, ember for action) - WireGuard convention added to deployment section --- README.md | 84 ++++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 64 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index 19777df..b433263 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,18 @@ -# Web App Template +# Hellion-Media Web App Template -A starting point for new Hellion Online Media web apps on the [Hellion Forge](https://gitea.hellion-forge.cloud/). +A starting point for [Hellion Online Media](https://gitea.hellion-forge.cloud/Hellion-Media) web apps. Mirrors the production stack used for `hellion-media-website`, `hellion-initiative-v3`, and `nova-corp-website`. -Stack: +**Stack:** - **Next.js 16** (App Router, Turbopack) - **React 19** - **TypeScript** strict mode - **Prisma ORM** + **MySQL** -- **NextAuth** (auth.js v5) +- **NextAuth** (Auth.js v5) - **Sass/SCSS** in external files — never inline styles - **FontAwesome** -This mirrors the production stack used for `hellion-media-website`, `hellion-initiative-v3`, and `nova-corporation.de`. +> Plugin & FFXIV/Modding work? See the [Hellion Forge](https://gitea.hellion-forge.cloud/Hellion-Forge) sub-org instead. --- @@ -22,65 +22,109 @@ This mirrors the production stack used for `hellion-media-website`, `hellion-ini 2. Clone locally and replace project name in: - `package.json` → `name` - `README.md` → this section + project description -3. Set up your `.env.local` from `.env.example`. +3. Set up your `.env.local` from `env.example` (rename to `.env.example` after cloning if your editor prefers it). 4. `npm install`, `npx prisma generate`, `npx prisma migrate dev`. 5. `npm run dev` → http://localhost:3000. 6. Implement your app in `src/app/`. --- +## Branding — Arctic Cyan + Ember Glow + +Hellion Online Media's brand schema. Apply via CSS Custom Properties in `globals.scss`, never hardcoded. Source-of-truth: `BRANDING.md` in the [hellion-media-website](https://gitea.hellion-forge.cloud/JonKazama-Hellion/hellion-media-website) repo — this template lists the tokens you'll typically need: + +### Primary — Arctic Cyan (structure, navigation, HUD) + +| Token | Hex | When | +|---|---|---| +| `--brand-color-dark` | `#0097A7` | Hover-states, pressed buttons | +| `--brand-color` | `#00BED2` | HUD-borders, panel-borders, active nav | +| `--brand-color-light` | `#4DD9E8` | Link text, light accents | +| `--brand-color-glow` | `rgba(0, 190, 210, 0.6)` | Glow effects, text-shadows | +| `--brand-color-subtle` | `rgba(0, 190, 210, 0.15)` | Subtle backgrounds | + +### Accent — Ember Orange (CTAs, badges, highlights) + +| Token | Hex | When | +|---|---|---| +| `--accent-color-dark` | `#E85D04` | Hover state for CTAs | +| `--accent-color` | `#F97316` | Primary CTA buttons, feature badges | +| `--accent-color-light` | `#FB923C` | Light accents, text | +| `--accent-color-glow` | `rgba(249, 115, 22, 0.6)` | Button glow | + +### Backgrounds + +| Token | Hex | When | +|---|---|---| +| `--background` | `#070B12` | Body background (very dark, not pure black) | +| `--background-medium` | `#0C1220` | Mid background | +| `--surface` | `#1A2538` | Card / panel surfaces | +| `--surface-elevated` | `rgba(6, 10, 18, 0.75)` | Frosted glass panels | + +### Allocation rules + +- **Cyan** for structure: HUD-borders, navigation, links, focus states, glow effects +- **Ember** for action: CTA-buttons, submit buttons, feature badges, highlights +- **Status colors stay semantic**: `--success` `#5CB85C`, `--danger` `#D9534F`, `--warning` `#F0AD4E` +- **Never** the old `#448f45` green (fully replaced) or admin-OTP red (`#c0392b`) repurposed for cyan +- **Email templates** use raw hex (CSS variables don't work in email clients) + +--- + ## Project structure ``` . ├── .editorconfig -├── env.example Template for .env.local. Rename to .env.example after cloning if you prefer the dot-prefix convention. +├── env.example Template for .env.local — rename if your editor wants the dot ├── .gitea/ │ ├── ISSUE_TEMPLATE/ │ ├── PULL_REQUEST_TEMPLATE.md │ └── workflows/ -│ └── ci.yml Lint + type-check + Prisma validate +│ └── ci.yml Lint + type-check + Prisma validate ├── .gitignore ├── prisma/ -│ └── schema.prisma Skeleton with NextAuth tables +│ └── schema.prisma Skeleton with NextAuth tables ├── src/ │ ├── app/ -│ │ ├── layout.tsx Root layout -│ │ ├── page.tsx Home page +│ │ ├── layout.tsx +│ │ ├── page.tsx │ │ └── api/auth/[...nextauth]/route.ts -│ ├── components/ Reusable UI components +│ ├── components/ Reusable UI components │ ├── lib/ -│ │ ├── prisma.ts Prisma client singleton -│ │ └── auth.ts NextAuth config +│ │ ├── prisma.ts Prisma client singleton +│ │ └── auth.ts NextAuth config │ └── styles/ -│ └── globals.scss Global styles entry +│ └── globals.scss Global styles + brand tokens entry ├── next.config.ts ├── package.json ├── tsconfig.json ├── CODEOWNERS -├── LICENSE MIT -└── README.md This file (replace before shipping) +├── LICENSE MIT +└── README.md This file (replace before shipping) ``` --- -## Conventions (Hellion Online Media) +## Hellion Online Media conventions - **External SCSS files only** — no inline `style={...}`, no `style.css` per component. Co-located `*.module.scss` is fine. - **Database access via DAL layer** — direct Prisma calls only inside `src/lib/dal/*.ts`, never in components or routes. Pattern from `hellion-initiative-v3`. - **No client-side secrets** — all auth/DB access goes through server components or route handlers. -- **PM2 single-process deployment** — production runs on Strato Windows Server with PM2 + IIS reverse proxy. No clustering, no Vercel. +- **PM2 single-process deployment** — production runs on Strato Windows Server with PM2 (NSSM-wrapped) + IIS reverse proxy. No clustering, no Vercel. +- **WireGuard-only DB access** — MySQL on the Strato VPS isn't exposed to the public internet, only reachable via the `hellion` WireGuard tunnel. --- ## Production deployment -This template is opinionated about non-cloud deployment: +Opinionated about non-cloud deployment: - **Server:** Strato Windows Server 2025 - **Process manager:** PM2 (NSSM Windows-service wrapper, single-process mode) - **Reverse proxy:** IIS with TLS termination - **Database:** MySQL on Strato VPS, accessible only via WireGuard +- **CI:** Gitea Actions on this Forge — see `.gitea/workflows/ci.yml` Adjust `next.config.ts` accordingly (no `output: 'standalone'` unless you containerize).