Rules Page

Create a fully customizable server rules page with categories and individual rules.

○Built-in Page

The rules page is available at /rules and is fully configurable from site.config.ts. The footer already links to it by default.

Enable/Disable

Toggle the rules page on or off:

src/config/site.config.ts

rules: {
  enabled: true,  // Set to false to disable the page
  // ...
}

Basic Configuration

src/config/site.config.ts

rules: {
  enabled: true,
  title: 'Server Rules',
  subtitle: 'Please read and follow these rules to ensure a great experience for everyone.',
  lastUpdated: '2024-12-24',
  categories: [
    // Rule categories go here
  ],
}

Option	Type	Description
enabled	boolean	Show or hide the rules page
title	string	Page heading
subtitle	string	Description shown below the title
lastUpdated	string	Date shown at bottom (YYYY-MM-DD format)
categories	array	Array of rule categories

Adding Rule Categories

Each category groups related rules together with its own icon and color:

categories: [
  {
    id: 'general',           // Unique identifier
    title: 'General Rules',  // Category heading
    icon: Shield,            // Lucide icon
    color: '59 130 246',     // RGB color for accents
    rules: [
      // Individual rules go here
    ],
  },
  {
    id: 'chat',
    title: 'Chat Rules',
    icon: Users,
    color: '34 197 94',
    rules: [...],
  },
]

Adding Individual Rules

Each rule has a title and description:

rules: [
  {
    id: 'g1',
    title: 'Be Respectful',
    description: 'Treat all players and staff with respect. No harassment, bullying, or hate speech.',
  },
  {
    id: 'g2',
    title: 'No Cheating',
    description: 'Using hacks, mods, or exploits that give unfair advantages is strictly prohibited.',
  },
  // Add more rules...
]

Available Icons

Import icons from lucide-react at the top of site.config.ts:

import { 
  Shield,    // Security/protection
  Users,     // Community/social
  Gamepad2,  // Gameplay
  Swords,    // Combat/PvP
  MessageSquare, // Chat
  Ban,       // Punishments
  AlertTriangle, // Warnings
  // ... many more available
} from 'lucide-react'

Complete Example

rules: {
  enabled: true,
  title: 'Server Rules',
  subtitle: 'Follow these rules for the best experience.',
  lastUpdated: '2024-12-24',
  categories: [
    {
      id: 'general',
      title: 'General Rules',
      icon: Shield,
      color: '59 130 246',
      rules: [
        {
          id: 'g1',
          title: 'Be Respectful',
          description: 'Treat everyone with kindness.',
        },
        {
          id: 'g2',
          title: 'No Cheating',
          description: 'Hacks and exploits are banned.',
        },
      ],
    },
    {
      id: 'punishments',
      title: 'Punishments',
      icon: Swords,
      color: '239 68 68',
      rules: [
        {
          id: 'p1',
          title: 'Warnings',
          description: '3 warnings = temporary mute.',
        },
        {
          id: 'p2',
          title: 'Bans',
          description: 'Severe violations = permanent ban.',
        },
      ],
    },
  ],
}

Customization Tips

Use consistent color schemes across categories
Keep rule descriptions concise but clear
Order categories from most to least important
Update the lastUpdated date when making changes
Use meaningful IDs for each rule and category

△Footer Link

The default footer already includes a link to /rules. If you disable the rules page, remember to remove or update the footer link.