From 0bec8aa9d166274a8dd5d4780e6fab50270205c3 Mon Sep 17 00:00:00 2001 From: ibuzzardo Date: Mon, 2 Mar 2026 12:01:33 +1100 Subject: [PATCH] feat: [Dark Factory] Build a full-stack Next.js 15 dashboard with API routes for real-time VPS monitoring and management including system metrics, PM2 controls, project insights, and API-key authentication. Generated by Dark Factory v4 pipeline job cmm8goydg000erybjb0b0fn1z --- .env.example | 14 ++-- .gitignore | 19 +++-- README.md | 182 ++++++++++++++++----------------------------- next.config.js | 17 +++++ package.json | 56 ++++++++------ tailwind.config.ts | 28 +++---- tsconfig.json | 10 ++- 7 files changed, 157 insertions(+), 169 deletions(-) diff --git a/.env.example b/.env.example index 90863e0..0b9fea7 100644 --- a/.env.example +++ b/.env.example @@ -1,6 +1,10 @@ -# Environment variables for Markdown Preview -# Copy this file to .env.local and fill in your values +# Server Configuration +PORT=4002 -# Example: API keys, database URLs, etc. -# API_KEY=your_api_key_here -# DATABASE_URL=your_database_url_here \ No newline at end of file +# Authentication +# Set this to enable API key authentication +# If not set, auth is disabled (development mode) +API_KEY=changeme-your-secure-api-key-here + +# Optional: Node Environment +NODE_ENV=production \ No newline at end of file diff --git a/.gitignore b/.gitignore index 32360ba..6f3abc2 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,10 @@ # Dependencies node_modules/ -.pnpm-store/ +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* # Next.js .next/ @@ -16,11 +20,8 @@ dist/ .env.production.local # Logs -npm-debug.log* -yarn-debug.log* -yarn-error.log* -pnpm-debug.log* -lerna-debug.log* +logs +*.log # Runtime data pids @@ -35,8 +36,9 @@ coverage/ # nyc test coverage .nyc_output -# ESLint cache -.eslintcache +# Dependency directories +node_modules/ +jspm_packages/ # TypeScript cache *.tsbuildinfo @@ -71,6 +73,7 @@ coverage/ # Nuxt.js build / generate output .nuxt +dist # Storybook build outputs .out diff --git a/README.md b/README.md index e58a5dc..f14037a 100644 --- a/README.md +++ b/README.md @@ -1,42 +1,29 @@ -# Markdown Preview +# VPS Command Center -A live Markdown preview web application built with Next.js 15 App Router. Users can type Markdown in the left panel and see a styled HTML preview update in real-time on the right panel. +A self-hosted web dashboard for monitoring and managing a Linux VPS. Shows real-time system metrics, PM2 processes, deployed projects, and provides management controls. ## Features -- ⚡ **Real-time preview** - Updates as you type with 200ms debouncing -- 🎨 **Dark theme** - Beautiful dark UI with Tailwind CSS -- 📱 **Mobile responsive** - Panels stack vertically on small screens -- 🔒 **Secure** - HTML output is sanitized to prevent XSS attacks -- 📋 **Copy to clipboard** - One-click HTML copying -- 🚀 **Modern stack** - Next.js 15, React 19, TypeScript +- **Real-time System Metrics**: CPU, memory, disk, network usage updated every 3 seconds +- **PM2 Process Manager**: View, start, stop, and restart PM2 processes +- **Project Scanner**: List deployed projects with git info and disk usage +- **API Key Authentication**: Secure access with configurable API key +- **Responsive Design**: Works on desktop, tablet, and mobile devices +- **Dark Theme**: Professional dashboard aesthetic -## Supported Markdown Features +## Requirements -- Headers (H1-H6) -- **Bold** and *italic* text -- ~~Strikethrough~~ -- `Inline code` and code blocks with syntax highlighting -- [Links](https://example.com) and images -- Tables (GitHub Flavored Markdown) -- > Blockquotes -- Ordered and unordered lists -- Task lists with checkboxes -- Horizontal rules +- Node.js 18+ +- PM2 (for process management features) +- Git (for project information) +- Linux/Unix system (for system metrics) -## Getting Started - -### Prerequisites - -- Node.js 18.0.0 or higher -- npm (comes with Node.js) - -### Installation +## Installation 1. Clone the repository: ```bash git clone -cd markdown-preview +cd vps-command-center ``` 2. Install dependencies: @@ -44,118 +31,77 @@ cd markdown-preview npm install ``` -3. Copy environment variables (optional): +3. Configure environment variables: ```bash -cp .env.example .env.local +cp .env.example .env +# Edit .env with your settings ``` -4. Start the development server: +4. Build the application: ```bash -npm run dev +npm run build ``` -5. Open [http://localhost:3000](http://localhost:3000) in your browser. - -## Available Scripts - -- `npm run dev` - Start development server -- `npm run build` - Build for production -- `npm run start` - Start production server -- `npm run lint` - Run ESLint -- `npm run type-check` - Run TypeScript compiler check - -## API Endpoints - -### Health Check -- **GET** `/api/health` - Returns `{ status: "ok" }` - -## Project Structure - -``` -src/ -├── app/ -│ ├── layout.tsx # Root layout with dark theme -│ ├── page.tsx # Main page with MarkdownEditor -│ ├── globals.css # Global styles and prose overrides -│ └── api/ -│ └── health/ -│ └── route.ts # Health check endpoint -├── components/ -│ ├── MarkdownEditor.tsx # Main editor component -│ └── SampleMarkdown.ts # Default markdown content -├── lib/ -│ └── markdown.ts # Markdown processing utilities -└── types.ts # TypeScript type definitions +5. Start the server: +```bash +npm start ``` -## Technology Stack +The dashboard will be available at `http://localhost:4002` -- **Framework**: Next.js 15 with App Router -- **Language**: TypeScript (strict mode) -- **Styling**: Tailwind CSS with @tailwindcss/typography -- **Markdown Processing**: - - unified - - remark-parse - - remark-gfm (GitHub Flavored Markdown) - - remark-rehype - - rehype-stringify - - rehype-sanitize - -## Mobile Responsiveness - -The application is fully responsive and tested at these breakpoints: -- **Mobile**: 320px and up (stacked layout) -- **Tablet**: 768px and up (side-by-side layout) -- **Desktop**: 1280px and up (optimized spacing) +## Environment Variables -## Security +- `PORT` - Server port (default: 4002) +- `API_KEY` - API key for authentication (optional, disables auth if not set) +- `NODE_ENV` - Node environment (development/production) -- All HTML output is sanitized using `rehype-sanitize` -- No dangerous HTML elements or attributes are allowed -- XSS protection through content sanitization +## Development -## Browser Support +Run in development mode: +```bash +npm run dev +``` -- Modern browsers with ES2017+ support -- Clipboard API for copy functionality (with fallback) -- JavaScript required for functionality +## Authentication -## Contributing +If `API_KEY` is set in environment variables: +- All pages require authentication +- Login at `/login` with the API key +- Session stored in secure httpOnly cookie -1. Fork the repository -2. Create a feature branch -3. Make your changes -4. Run tests and linting -5. Submit a pull request +If `API_KEY` is not set: +- Authentication is disabled (development mode) +- All features accessible without login -## License +## Project Structure -MIT License - see LICENSE file for details. +- `/` - Dashboard with system metrics +- `/processes` - PM2 process manager +- `/projects` - Deployed projects overview +- `/login` - Authentication page -## Environment Variables +## API Endpoints -Currently, no environment variables are required for basic functionality. See `.env.example` for future configuration options. +- `GET /api/system` - System metrics +- `GET /api/pm2` - PM2 processes list +- `POST /api/pm2/:id/restart` - Restart process +- `POST /api/pm2/:id/stop` - Stop process +- `POST /api/pm2/:id/start` - Start process +- `GET /api/projects` - Deployed projects +- `POST /api/auth` - Authentication -## Performance +## Deployment -- Debounced input processing (200ms) -- Efficient re-rendering with React hooks -- Optimized bundle size with tree shaking -- Fast development with Next.js Hot Module Replacement +For production deployment: -## Troubleshooting +1. Set `NODE_ENV=production` +2. Configure a strong `API_KEY` +3. Use a process manager like PM2: -### Build Issues -- Ensure Node.js version is 18.0.0 or higher -- Clear node_modules and reinstall: `rm -rf node_modules package-lock.json && npm install` -- Check TypeScript errors: `npm run type-check` +```bash +pm2 start npm --name "vps-center" -- start +``` -### Runtime Issues -- Check browser console for JavaScript errors -- Ensure JavaScript is enabled -- Try hard refresh (Ctrl+F5 or Cmd+Shift+R) +## License -### Clipboard Issues -- Clipboard API requires HTTPS in production -- Fallback method available for older browsers -- Check browser permissions for clipboard access \ No newline at end of file +MIT License \ No newline at end of file diff --git a/next.config.js b/next.config.js index a75e82b..77fa774 100644 --- a/next.config.js +++ b/next.config.js @@ -3,12 +3,29 @@ const nextConfig = { experimental: { appDir: true, }, + output: 'standalone', typescript: { ignoreBuildErrors: false, }, eslint: { ignoreDuringBuilds: false, }, + env: { + PORT: process.env.PORT || '4002', + }, + async headers() { + return [ + { + source: '/api/:path*', + headers: [ + { + key: 'Cache-Control', + value: 'no-store, no-cache, must-revalidate, proxy-revalidate', + }, + ], + }, + ] + }, } module.exports = nextConfig \ No newline at end of file diff --git a/package.json b/package.json index 8674818..06f0c82 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,12 @@ { - "name": "markdown-preview", - "version": "0.1.0", - "private": true, + "name": "vps-command-center", + "version": "1.0.0", + "description": "Self-hosted web dashboard for monitoring and managing a Linux VPS", + "type": "module", "scripts": { - "dev": "next dev", + "dev": "next dev -p 4002", "build": "next build", - "start": "next start", + "start": "next start -p 4002", "lint": "next lint", "type-check": "tsc --noEmit" }, @@ -13,27 +14,36 @@ "next": "^15.0.0", "react": "^19.0.0", "react-dom": "^19.0.0", - "unified": "^11.0.4", - "remark-parse": "^11.0.0", - "remark-gfm": "^4.0.0", - "remark-rehype": "^11.1.0", - "rehype-stringify": "^10.0.0", - "rehype-sanitize": "^6.0.0", - "@tailwindcss/typography": "^0.5.10", - "classnames": "^2.3.2" + "typescript": "^5.0.0", + "tailwindcss": "^3.0.0", + "postcss": "^8.0.0", + "autoprefixer": "^10.0.0", + "systeminformation": "^5.0.0", + "pm2": "^5.0.0", + "simple-git": "^3.0.0", + "lucide-react": "^0.460.0", + "clsx": "^2.0.0", + "zod": "^3.22.0" }, "devDependencies": { - "typescript": "^5.3.3", - "@types/node": "^20.10.5", - "@types/react": "^18.2.45", - "@types/react-dom": "^18.2.18", - "tailwindcss": "^3.4.0", - "postcss": "^8.4.32", - "autoprefixer": "^10.4.16", - "eslint": "^8.56.0", + "@types/node": "^20.0.0", + "@types/react": "^18.0.0", + "@types/react-dom": "^18.0.0", + "eslint": "^8.0.0", "eslint-config-next": "^15.0.0" }, "engines": { - "node": ">=18.0.0" - } + "node": ">=18.0.0", + "npm": ">=8.0.0" + }, + "keywords": [ + "vps", + "dashboard", + "monitoring", + "pm2", + "system-metrics", + "next.js" + ], + "author": "VPS Command Center", + "license": "MIT" } \ No newline at end of file diff --git a/tailwind.config.ts b/tailwind.config.ts index 740d5e3..a23e939 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -6,30 +6,32 @@ const config: Config = { './src/components/**/*.{js,ts,jsx,tsx,mdx}', './src/app/**/*.{js,ts,jsx,tsx,mdx}', ], - darkMode: 'class', theme: { extend: { colors: { - primary: '#2563EB', - secondary: '#1E40AF', - background: '#1F2937', - foreground: '#F9FAFB', - muted: '#6B7280', - accent: '#10B981', - destructive: '#EF4444', + background: '#0B1120', + surface: '#111827', + 'surface-alt': '#1F2937', + border: '#374151', + 'primary-text': '#F9FAFB', + 'secondary-text': '#9CA3AF', + accent: '#3B82F6', + 'accent-hover': '#2563EB', + success: '#22C55E', + warning: '#F59E0B', + error: '#EF4444', }, fontFamily: { - sans: ['Inter', 'system-ui', 'sans-serif'], + sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'], + mono: ['JetBrains Mono', 'Fira Code', 'ui-monospace', 'monospace'], }, borderRadius: { lg: '8px', - md: '6px', + xl: '12px', }, }, }, - plugins: [ - require('@tailwindcss/typography'), - ], + plugins: [], } export default config \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 4f713d1..f521242 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,6 @@ { "compilerOptions": { - "target": "ES2017", + "target": "ES2022", "lib": ["dom", "dom.iterable", "ES6"], "allowJs": true, "skipLibCheck": true, @@ -21,7 +21,13 @@ "baseUrl": ".", "paths": { "@/*": ["./src/*"] - } + }, + "forceConsistentCasingInFileNames": true, + "noImplicitAny": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noUnusedLocals": true, + "noUnusedParameters": true }, "include": [ "next-env.d.ts",