LuminolCraft is the official website of the LuminolMC-affiliated Minecraft server, a modern Single Page Application (SPA) built with Vue 3. The website provides server status monitoring, news, server rules, support information, and more, with multi-language support and responsive design.

• Server Status Monitoring - Real-time display of server online players, version, and more
• News System - Dynamic news list and detail pages with Markdown rendering
• Server Rules - Clear and concise server rules display
• Support Page - Server support and donation information
• Multi-language Support - Built-in Chinese and English internationalization
• Theme Switching - Support for light/dark themes and multiple color schemes
• Responsive Design - Perfect adaptation for desktop and mobile devices
• High Performance - Built with Vite, supports code splitting and lazy loading
• TypeScript - Complete type safety support

• Node.js >= 20.19.0 or >= 22.12.0
• pnpm (recommended) or npm

# Using pnpm (recommended)
pnpm install

# Or using npm
npm install

# Start development server (default port 3000)
pnpm dev

# Or using npm
npm run dev

Visit http://localhost:3000 to view the application.

# Type check and build
pnpm build

# Or using npm
npm run build

The build output will be in the dist/ directory.

pnpm preview

# Or using npm
npm run preview

luminolcraft-vue/
├── public/                 # Static assets
├── src/
│   ├── components/          # Reusable components
│   │   ├── Navbar.vue       # Navigation bar
│   │   ├── Footer.vue       # Footer
│   │   ├── MarkdownRenderer.vue  # Markdown renderer
│   │   ├── ThemeToggle.vue  # Theme toggle
│   │   ├── LanguageSwitcher.vue  # Language switcher
│   │   └── ColorSchemeSwitcher.vue  # Color scheme switcher
│   ├── config/              # Application configuration
│   │   └── app-config.ts    # Configuration file
│   ├── i18n/                # Internationalization
│   │   ├── locales/         # Language files
│   │   │   ├── zh.ts        # Chinese
│   │   │   └── en.ts        # English
│   │   └── index.ts         # i18n configuration
│   ├── router/              # Router configuration
│   │   └── index.ts
│   ├── stores/              # Pinia state management
│   ├── styles/              # Style files
│   │   ├── desktop/         # Desktop styles
│   │   ├── mobile/          # Mobile styles
│   │   ├── fonts.css        # Fonts
│   │   ├── theme-colors.css # Theme colors
│   │   ├── typography.css   # Typography
│   │   └── responsive.css   # Responsive styles
│   ├── utils/               # Utility functions
│   │   └── netlify/         # Netlify Functions
│   ├── views/               # Page components
│   │   ├── Home.vue         # Home page
│   │   ├── News.vue         # News list
│   │   ├── NewsDetail.vue   # News detail
│   │   ├── Monitoring.vue    # Server monitoring
│   │   ├── SimpleRules.vue  # Server rules
│   │   ├── Support.vue      # Support page
│   │   └── NotFound.vue     # 404 page
│   ├── App.vue              # Root component
│   └── main.ts              # Application entry
├── index.html               # HTML template
├── vite.config.ts           # Vite configuration
├── tsconfig.json            # TypeScript configuration
├── package.json             # Project dependencies
└── netlify.toml             # Netlify deployment configuration

Configure the following options in src/config/app-config.ts:

export interface AppConfig {
  showLanguageToggle: boolean;    // Show language toggle button
  navbarFixed: boolean;           // Fixed navigation bar
  showFooterCopyright: boolean;   // Show footer copyright
}

Routes are defined in src/router/index.ts:

# Run unit tests
pnpm test:unit

# Or using npm
npm run test:unit

The project uses ESLint and Prettier for code linting and formatting.

# Run ESLint and auto-fix
pnpm lint

# Or using npm
npm run lint

# Format code
pnpm format

# Or using npm
npm run format

The project is configured for Netlify deployment using netlify.toml:

[build]
  command = "npm run build"
  publish = "dist"

Deployment steps:

1. Push code to GitHub repository
2. Connect repository in Netlify
3. Netlify will automatically detect netlify.toml and execute build commands

The project can be deployed to any platform that supports static site hosting:

• Vercel
• GitHub Pages
• Cloudflare Pages
• AWS S3 + CloudFront

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

• Follow existing code style
• Add TypeScript types for new features
• Update relevant documentation
• Ensure all tests pass
• Run pnpm lint to ensure code compliance

This project is licensed under the GNU Affero General Public License v3.0 - see the LICENSE file for details

• Vue.js - The Progressive JavaScript Framework
• Vite - Next Generation Frontend Tooling
• TypeScript - JavaScript with syntax for types
• Pinia - The Vue Store that you will enjoy using
• Vue Router - The official router for Vue.js
• Vue I18n - Vue I18n plugin
• Chart.js - Simple yet flexible JavaScript charting library
• Marked - A markdown parser and compiler
• Highlight.js - Syntax highlighting for the Web

• QQ Group: Join Now
• GitHub Issues: Submit Issue