minor work

.prettierignore

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

.prettierrc

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

Dockerfile

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

README.md

@@ -1,129 +1 @@
-# 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.
+# BeamMP-Website

components.json

@@ -1,21 +0,0 @@
-{
-  "$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

@@ -1,74 +0,0 @@
-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',
-    },
-  },
-]

example.env

@@ -0,0 +1,3 @@
+INSTANCES=3
+DEBUG=false
+PORT=3000

frontend/README.md

@@ -0,0 +1,7 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

frontend/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>BeamMP Website Loading..</title>
+    <title>BeamMP</title>
   </head>
   <body>
     <div id="app"></div>

frontend/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "beammp-website-frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@headlessui/vue": "^1.7.16",
+    "@heroicons/vue": "^2.0.18",
+    "@statnett/vue-plotly": "^0.3.2",
+    "axios": "^1.6.2",
+    "plotly.js": "^2.27.1",
+    "plotly.js-dist": "^2.27.1",
+    "plotly.js-dist-min": "^2.27.1",
+    "uuid": "^9.0.1",
+    "vue": "^3.3.8",
+    "vue-router": "^4.2.5"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.5.0",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.3.6",
+    "vite": "^5.0.0"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

frontend/src/App.vue

@@ -0,0 +1,10 @@
+<script setup>
+import Navbar from '@/components/NavBar.vue'
+import Footer from '@/components/Footer.vue'
+</script>
+
+<template>
+  <Navbar />
+  <router-view />
+  <Footer />
+</template>