mirror of
https://github.com/BeamMP/BeamMP-Website.git
synced 2026-02-16 10:40:51 +00:00
130 lines
4.8 KiB
Markdown
130 lines
4.8 KiB
Markdown
# BeamMP Website (Frontend)
|
||
|
||
This repository is home for the BeamMP website, this is a rebuild of the website from the ground up using Vue+Vite. We are also making use of Tailwindcss v4.
|
||
|
||
**Tech Stack**
|
||
- **Framework:** Vue 3 (`vue`, `vue-router`)
|
||
- **Build:** Vite 7 (`vite`, `@vitejs/plugin-vue`)
|
||
- **Styling:** Tailwind CSS 4 + `tailwindcss-animate`, `tailwind-merge`
|
||
- **UI Icons/Utils:** `lucide-vue-next`, `clsx`, `class-variance-authority`
|
||
- **Radix-style Components:** `reka-ui` through `shadcn-vue`
|
||
- **Composable utilities:** `@vueuse/core`
|
||
|
||
**Theming and Colour Guide**
|
||
- BeamMP Orange `#F36D24`
|
||
- BeamMP Blue `#4470B6`
|
||
- BeamMP Green `#1D9749`
|
||
- Gray `#333333`
|
||
- Black `#000000`
|
||
- White `#FFFFFF`
|
||
|
||
## Getting Started
|
||
|
||
Prerequisites:
|
||
- Node.js 22+
|
||
- pnpm, npm, or yarn (examples use npm)
|
||
|
||
Install dependencies and run the dev server:
|
||
|
||
```powershell
|
||
# from this folder (repo root)
|
||
npm install
|
||
npm run dev
|
||
```
|
||
|
||
Build for production and preview locally:
|
||
|
||
```powershell
|
||
npm run build
|
||
npm run preview
|
||
```
|
||
|
||
Vite will print the local dev URL (usually `http://localhost:5173`).
|
||
|
||
## Project Scripts
|
||
- `npm run dev`: Start Vite development server
|
||
- `npm run build`: Production build
|
||
- `npm run preview`: Preview the production build locally
|
||
- `npm run lint`: Lint and auto-fix Vue/JS files with ESLint
|
||
- `npm run format`: Format all source files with Prettier
|
||
|
||
## Directory Overview
|
||
- `src/` – App source (styles, components, pages, routing)
|
||
- `src/components/ui/` – UI components (e.g., `button`, `navigation-menu`)
|
||
- `src/lib/` – Utilities and helpers
|
||
- `routes/` - vue-router routes
|
||
- `views/` - Pages of the website
|
||
- `index.html` – Vite HTML entry
|
||
- `tailwind.config.js` – Tailwind configuration
|
||
- `vite.config.js` – Vite configuration
|
||
- `components.json` – Shadcn-Vue component registry
|
||
|
||
## Styling and UI
|
||
- **Tailwind CSS 4** is set up via `tailwind.config.js` and imported in `src/style.css`.
|
||
- **reka-ui** and shadcn-vue-style patterns are used for accessible, composable UI.
|
||
- **lucide-vue-next** provides icons.
|
||
|
||
## Adding New UI Components (shadcn-vue)
|
||
We’re standardizing on shadcn-vue-compatible components for consistency. Use the CLI to add new components:
|
||
|
||
```powershell
|
||
npx shadcn-vue@latest add <component>
|
||
|
||
# examples
|
||
npx shadcn-vue@latest add button
|
||
npx shadcn-vue@latest add navigation-menu
|
||
```
|
||
|
||
The CLI reads `components.json` and will scaffold files under `src/components/ui/`.
|
||
|
||
## Routing
|
||
Use `vue-router` for navigation. Keep routes co-located with views and prefer lazy-loaded routes for large pages.
|
||
|
||
## Contributing
|
||
We welcome contributions! Here’s how to get started.
|
||
|
||
### 1) Pick an Issue or Open One
|
||
- Browse issues or propose an enhancement/bug. Share context and repro steps.
|
||
|
||
### 2) Create a Branch
|
||
- Use a descriptive branch name:
|
||
- `feature/<short-description>`
|
||
- `fix/<short-description>`
|
||
- `docs/<short-description>`
|
||
|
||
### 3) Dev Environment
|
||
- Install deps with `npm install` and run `npm run dev`.
|
||
- Keep changes scoped and focused; avoid drive-by refactors unless agreed.
|
||
|
||
### 4) Code Style & Patterns
|
||
- **Vue 3 + `<script setup>`** preferred for new components.
|
||
- **Linting**: Run `npm run lint` before committing to catch errors. ESLint is configured for Vue 3 best practices.
|
||
- **Formatting**: Run `npm run format` to auto-format code with Prettier (or use an editor extension).
|
||
- **Type safety**: If/when TypeScript is introduced, prefer explicit props and emits.
|
||
- **Tailwind**: Use utility classes; extract variants with `class-variance-authority` when patterns repeat.
|
||
- **Accessibility**: Prefer accessible primitives (e.g., `reka-ui`) and keyboard support.
|
||
- **File naming**: `PascalCase.vue` for components; avoid one-letter variable names.
|
||
|
||
### 5) Testing & Checks
|
||
- Run the app locally and verify core flows.
|
||
- Ensure components render on both light/dark themes if relevant.
|
||
- If you add dependencies, update this README and relevant configs.
|
||
|
||
### 6) Commit & PR
|
||
- Write clear, imperative commit messages, e.g., `feat: add NavigationMenu component`.
|
||
- Open a PR describing the problem, solution, screenshots if UI changes, and any follow-ups.
|
||
- Link related issues. Keep PRs small; big changes should be split.
|
||
|
||
## Environment & Configuration
|
||
- Tailwind and Vite are preconfigured. If you need globals, add them in `vite.config.js`.
|
||
- For icons, use `lucide-vue-next` and keep icon size consistent via props/classes.
|
||
- If adding new pages, prefer code-splitting with dynamic imports.
|
||
|
||
## FAQ
|
||
- “Why Vite?” Fast dev server, optimized builds, and great Vue tooling.
|
||
- “Can I use Yarn or pnpm?” Yes—adjust commands accordingly.
|
||
- “Design system?” We favor shadcn-vue patterns + Tailwind + reka-ui primitives for consistent UI.
|
||
|
||
## License
|
||
Unless otherwise noted in the root repository, this project follows the BeamMP website’s standard license. If clarifications are needed, open an issue and we will update this section.
|