diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 300189ad..ac332b47 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,96 +1,197 @@ -# Contributing to projectbluefin/website +# Contributing to the Project Bluefin Website -Thanks for helping out! This guide covers everything you need to contribute to the Bluefin marketing website. +Thanks for helping out! This repository contains the source for +[projectbluefin.io](https://projectbluefin.io) — a multi-page +[Vite](https://vitejs.dev/) + [Vue 3](https://vuejs.org/) application. -> For broader project contribution (image builds, architecture, community), see the [full Contributing Guide](https://docs.projectbluefin.io/contributing). +> **Looking to change Bluefin itself?** +> This repo is for the website only. Head to +> [@ublue-os/bluefin](https://github.com/ublue-os/bluefin) or +> [@projectbluefin/common](https://github.com/projectbluefin/common) for the OS +> images. See the +> [architecture diagram](https://docs.projectbluefin.io/contributing#understanding-bluefins-architecture) +> for the full picture. -## Repository overview +--- -This is the **projectbluefin.io** marketing website — a multi-SPA project built with [Vite](https://vitejs.dev/) and [Vue 3](https://vuejs.org/). It contains three sub-apps: +## Prerequisites -| Directory | Purpose | -|-----------|---------| -| `bluespeed/` | Main Bluefin landing page | -| `dakota/` | Dakota variant landing page | -| `knuckle/` | Knuckle bare-metal installer page | -| `public/` | Static assets served as-is | +| Tool | Version | Purpose | +|------|---------|---------| +| [Node.js](https://nodejs.org/) | 24+ (current LTS) | Runtime + build toolchain | +| [npm](https://www.npmjs.com/) | bundled with Node.js | Package manager | +| [just](https://github.com/casey/just) | any | Optional — wraps common npm commands | -## Local development +Install Node.js via your system package manager, [nvm](https://github.com/nvm-sh/nvm), +or the [official installer](https://nodejs.org/en/download/). -### Prerequisites +--- -- [Node.js](https://nodejs.org/) v18 or higher -- [npm](https://www.npmjs.com/) -- Optional: [just](https://github.com/casey/just) for simplified commands - -### Setup +## Local Development ```bash -git clone https://github.com/projectbluefin/website +# 1. Clone the repo +git clone https://github.com/projectbluefin/website.git cd website -npm install -``` -### Dev server +# 2. Install dependencies +npm install -```bash -npm run dev # Start development server (hot reload) -npm run build # Build for production -npm run preview # Preview the production build locally +# 3. Start the dev server (http://localhost:5173) +npm run dev +# or, if you have just installed: +just serve ``` -With `just`: -```bash -just build # Build for production -just serve # Preview the production build locally +The dev server supports hot module replacement — changes to `.vue` files and +locale JSON are reflected instantly without a full page reload. + +### Other useful commands + +| Command | What it does | +|---------|-------------| +| `npm run dev` | Start the local dev server | +| `npm run preview` | Preview a production build locally | +| `npm run lint` | Check for linting / formatting issues | +| `npm run lint:fix` | Auto-fix linting and formatting issues | +| `npm run typecheck` | TypeScript type check (via `vue-tsc`) | +| `just build` / `npm run build` | Build for production (not needed for PRs) | + +--- + +## Repository Structure + +```plaintext +website/ +├── index.html # Main Bluefin site entry point +├── dakota/index.html # Dakota app entry point +├── knuckle/index.html # Knuckle product page entry point +├── bluespeed/index.html # Bluespeed sub-app entry point (noindex) +├── src/ +│ ├── App.vue # Main site root component +│ ├── DakotaApp.vue # Dakota root component +│ ├── KnuckleApp.vue # Knuckle root component +│ ├── main.ts # Main site bootstrap +│ ├── dakota-main.ts # Dakota bootstrap +│ ├── knuckle-main.ts # Knuckle bootstrap +│ ├── components/ # Shared Vue components +│ │ ├── common/ # Site-wide UI primitives +│ │ ├── sections/ # Main-site content sections +│ │ ├── scenes/ # Scene / hero sections +│ │ ├── dakota/ # Dakota-specific components +│ │ └── knuckle/ # Knuckle-specific components +│ ├── composables/ # Reusable Vue composables +│ ├── locales/ # i18n translation files (JSON) +│ ├── assets/ # Static images, fonts, etc. +│ └── style/ # Global CSS +├── public/ # Files copied verbatim to build output +├── scripts/ # Build helper scripts +├── tests/ # Playwright end-to-end tests +├── vite.config.ts # Vite config — defines multi-page inputs +├── eslint.config.js # ESLint config (@antfu/eslint-config) +└── tailwind.config.js # Tailwind CSS config ``` -### Linting and formatting +The site uses Vite's +[multi-page app](https://vitejs.dev/guide/build.html#multi-page-app) mode. +Each subdirectory (`dakota/`, `knuckle/`, `bluespeed/`) is a separate HTML +entry point that mounts its own Vue app root. They share the same `src/` +source tree and all locale data. -The project uses [`@antfu/eslint-config`](https://github.com/antfu/eslint-config) for linting and formatting. Run before submitting a PR: +See [TRANSLATION-GUIDE.md](TRANSLATION-GUIDE.md) for the full i18n workflow. -```bash -npm run lint # Lint -npm run lint:fix # Lint and auto-fix -npm run typecheck # Type-check with vue-tsc -``` +--- + +## Making Changes + +### Main website content + +Text strings that appear on the main site live in `src/locales/en-US.json`. +Visual layout and logic live in the Vue components under `src/components/sections/` +and `src/components/scenes/`. + +### Adding or editing a component + +Components follow the +[Vue 3 `