Style Guide

To maintain consistency and quality across the codebase, please adhere to the following style guidelines.

Code Conventions

File Standards

• Documentation: Always use .mdx for documentation pages.
• Components: Use .astro for components.
• Config: Use .mjs or .ts for configuration files.
• Scripts: Use .ts for utility scripts.

Naming

• Files & Directories: Use kebab-case (e.g., getting-started/, workflow.mdx).
• Components: Use PascalCase (e.g., Card.astro, Sitemap.astro).
• Variables: Use camelCase for variables and functions.
• Constants: Use UPPER_SNAKE_CASE for global constants.

TypeScript Usage

This project uses TypeScript in Strict Mode.

Danger

Avoid using any. Always define proper interfaces or types for your data structures and props.

• Props: Every component should have a defined interface Props.
• Type Imports: Use import type { ... } when importing types.

Import Order

Organize imports in the following groups, separated by a blank line:

1. Framework/Library Imports:

   import { defineCollection } from 'astro:content';
   import { Steps } from '@astrojs/starlight/components';

2. Internal Components/Layouts:

   import CommitteeCard from '../../components/CommitteeCard.astro';

3. Styles/Assets:

   import '../../styles/custom.css';

CSS and Styling

We use Tailwind CSS (v4) for styling.

• Utility First: Use utility classes directly in elements (e.g., flex items-center gap-4).
• No Global CSS: Avoid adding styles to global.css unless they apply to the entire site.
• Responsiveness: Use standard breakpoints (sm:, md:, lg:).