New BeamMP Website!!

.github/workflows/release.yml

@@ -0,0 +1,31 @@
+name: Build Docker image and push to release
+
+on:
+  push:
+    # Sequence of patterns matched against refs/tags
+    tags:
+    - 'v*' # Push events to matching v*, i.e. v1.0, v20.15.10
+
+jobs:
+  docker:
+    runs-on: ubuntu-latest
+    steps:
+      -
+        name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+      -
+        name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      -
+        name: Login to Docker Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ secrets.REGISTRY_URL }}
+          username: ${{ secrets.REGISTRY_USERNAME }}
+          password: ${{ secrets.REGISTRY_PASSWORD }}
+      -
+        name: Build and push
+        uses: docker/build-push-action@v5
+        with:
+          push: true
+          tags: registry.beammp.com/beammp/website:${{ github.ref_name }}

.github/workflows/staging.yml

@@ -0,0 +1,30 @@
+name: Build Docker image and push to staging
+
+on:
+  push:
+    branches:
+      - "dev"
+
+jobs:
+  docker:
+    runs-on: ubuntu-latest
+    steps:
+      -
+        name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+      -
+        name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      -
+        name: Login to Docker Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ secrets.REGISTRY_URL }}
+          username: ${{ secrets.REGISTRY_USERNAME }}
+          password: ${{ secrets.REGISTRY_PASSWORD }}
+      -
+        name: Build and push
+        uses: docker/build-push-action@v5
+        with:
+          push: true
+          tags: registry.beammp.com/beammp/website:staging

.gitignore

@@ -104,3 +104,28 @@ dist
 .tern-port
 *.exe
 *.zip
+
+# Logs
+frontend/logs
+frontend/*.log
+frontend/npm-debug.log*
+frontend/yarn-debug.log*
+frontend/yarn-error.log*
+frontend/pnpm-debug.log*
+frontend/lerna-debug.log*
+
+frontend/node_modules
+frontend/dist
+frontend/dist-ssr
+frontend/*.local
+
+# Editor directories and files
+frontend/.vscode/*
+frontend/!.vscode/extensions.json
+frontend/.idea
+frontend/.DS_Store
+frontend/*.suo
+frontend/*.ntvs*
+frontend/*.njsproj
+frontend/*.sln
+frontend/*.sw?

.prettierignore

@@ -0,0 +1,6 @@
+node_modules
+dist
+*.log
+.DS_Store
+pnpm-lock.yaml
+package-lock.json

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "vueIndentScriptAndStyle": false
+}

.vscode/settings.json

@@ -0,0 +1,27 @@
+{
+  "cSpell.words": [
+    "beammp",
+    "beammpservers",
+    "beamng",
+    "Deutsch",
+    "Español",
+    "Français",
+    "freeroam",
+    "gridlines",
+    "Italiano",
+    "Lucide",
+    "maxplayers",
+    "modlist",
+    "modstotal",
+    "modstotalsize",
+    "Offroad",
+    "playerslist",
+    "reka",
+    "rels",
+    "roleplay",
+    "sdesc",
+    "sname",
+    "vueuse",
+    "Русский"
+  ]
+}

Dockerfile

@@ -1,25 +1,23 @@
-FROM node:18.16.0-alpine3.17
+# Step 1: Build stage
+FROM node:22-alpine3.21 AS build
 
-# Create app directory
 WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+ENV NODE_ENV=development
+RUN npm run build
 
-RUN apk --no-cache add curl
+# Step 2: Serve stage
+FROM nginx:alpine
 
-# Install app dependencies
-# A wildcard is used to ensure both package.json AND package-lock.json are copied
-# where available (npm@5+)
-COPY package*.json /app
+# Copy built files from the previous stage
+COPY --from=build /app/dist /usr/share/nginx/html
 
-# General Install of Deps
-# RUN npm install
-# If you are building your code for production
-RUN npm ci --only=production
+# Add a custom Nginx configuration
+COPY nginx.conf /etc/nginx/conf.d/default.conf
 
-# Bundle app source
-COPY . /app
+# Expose port 80
+EXPOSE 80
 
-EXPOSE 3599
-
-HEALTHCHECK CMD curl --fail http://localhost:3599/ping || exit 1
-
-CMD [ "node", "index.js" ]
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -1 +1,112 @@
-# BeamMP-Website
+# BeamMP Website
+
+This repository is home for the BeamMP website. The website features support for translations too now!
+
+**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
+
+## 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.
+
+
+# Translations
+BeamMP makes an effort to be maintained for multiple languages. 
+The current progress of this sits at: 
+[![gitlocalized ](https://gitlocalize.com/repo/10617/whole_project/badge.svg)](https://gitlocalize.com/repo/10617?utm_source=badge) 
+We use [GitLocalize](https://gitlocalize.com/) for managing this. You can contribute if you wish here: https://gitlocalize.com/repo/10617.
+
+The individual language progress is as follows:
+
+| Language              | Badge                                                                                                                           |
+|-----------------------|---------------------------------------------------------------------------------------------------------------------------------|
+| French                | [![gitlocalized ](https://gitlocalize.com/repo/10617/fr/badge.svg)](https://gitlocalize.com/repo/10617/fr?utm_source=badge) |
+| German                | [![gitlocalized ](https://gitlocalize.com/repo/10617/de/badge.svg)](https://gitlocalize.com/repo/10617/de?utm_source=badge) |
+| Italian               | [![gitlocalized ](https://gitlocalize.com/repo/10617/it/badge.svg)](https://gitlocalize.com/repo/10617/it?utm_source=badge) |
+| Russian               | [![gitlocalized ](https://gitlocalize.com/repo/10617/ru/badge.svg)](https://gitlocalize.com/repo/10617/ru?utm_source=badge) |
+| Spanish               | [![gitlocalized ](https://gitlocalize.com/repo/10617/es/badge.svg)](https://gitlocalize.com/repo/10617/es?utm_source=badge) |

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "new-york",
+  "typescript": false,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/style.css",
+    "baseColor": "gray",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "composables": "@/composables"
+  },
+  "registries": {}
+}

eslint.config.js

@@ -0,0 +1,74 @@
+import pluginVue from 'eslint-plugin-vue'
+import js from '@eslint/js'
+import prettier from 'eslint-plugin-prettier'
+import configPrettier from 'eslint-config-prettier'
+
+export default [
+  // Ignore patterns (replaces .eslintignore)
+  {
+    ignores: ['node_modules', 'dist', '*.log', '.DS_Store'],
+  },
+
+  // Base JavaScript config
+  js.configs.recommended,
+
+  // Vue 3 recommended config
+  ...pluginVue.configs['flat/recommended'],
+
+  // Global configuration
+  {
+    plugins: {
+      prettier,
+    },
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      globals: {
+        // Browser globals
+        window: 'readonly',
+        document: 'readonly',
+        navigator: 'readonly',
+        console: 'readonly',
+        localStorage: 'readonly',
+        fetch: 'readonly',
+        alert: 'readonly',
+        prompt: 'readonly',
+        getComputedStyle: 'readonly',
+        // Node globals
+        process: 'readonly',
+        __dirname: 'readonly',
+        __filename: 'readonly',
+        module: 'readonly',
+        require: 'readonly',
+      },
+    },
+    rules: {
+      // Prettier integration
+      ...configPrettier.rules,
+      'prettier/prettier': 'error',
+
+      // Vue-specific rules
+      'vue/multi-word-component-names': 'off',
+      'vue/no-v-html': 'warn',
+      'vue/require-default-prop': 'off',
+      'vue/require-prop-types': 'warn',
+      'vue/component-name-in-template-casing': ['error', 'PascalCase'],
+      'vue/html-self-closing': [
+        'error',
+        {
+          html: {
+            void: 'always',
+            normal: 'always',
+            component: 'always',
+          },
+        },
+      ],
+
+      // General JavaScript rules
+      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+      'prefer-const': 'error',
+      'no-var': 'error',
+    },
+  },
+]