Docusaurus Coding Standards Template - JUCSE49-Mavericks/Smart-Class-Routine-Management-System GitHub Wiki

Author : Umma Sumaiya Jahan

---

• Keep a clear and consistent directory structure.

• Organize Markdown files in folders based on the sections they represent, such as docs/, blog/, and src/.

  Example:

  - /docs
    - getting-started.md
    - installation.md
  - /src
    - components/
    - css/
  - /blog
  

• Use clear and meaningful headings:

  • # for page title, ## for sections, ### for subsections.

• Use backticks (`) for inline code and triple backticks ( ) for code blocks.

• Use bullet points (- or *) for unordered lists and numbers (1., 2.) for ordered lists.

• Provide descriptive alt text for images.

  Example:

  # Getting Started
  
  To install Docusaurus, use the following command:
  

  npm install docusaurus

  
  - Easy to use
  - Highly customizable
  

• Use PascalCase for React component names and camelCase for props and functions.

• Break down large components into smaller reusable components.

• Always define prop types using PropTypes or TypeScript interfaces.

  Example:

  const Button = ({ onClick, label }) => {
    return <button onClick={onClick}>{label}</button>;
  };
  
  Button.propTypes = {
    onClick: PropTypes.func.isRequired,
    label: PropTypes.string.isRequired,
  };

• Prefer CSS Modules (Docusaurus supports this by default).

• Use BEM naming convention for CSS classes when not using modules.

• Avoid inline styles unless dynamic.

  Example:

  .navBar__menuItem {
    color: #333;
    padding: 10px;
  }

• Follow ESLint rules for consistent syntax.

• Use arrow functions (const fn = () => {}).

• Use const and let instead of var.

• Always use semicolons and avoid unnecessary whitespace.

  Example:

  const fetchData = async () => {
    try {
      const response = await fetch('/api/data');
      const data = await response.json();
      return data;
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

• Use Docusaurus versioning feature for managing different documentation versions.
• Add clear version labels and descriptions for each version in the versions.json file.

• Follow Git best practices such as feature branching and clear commit messages.

• Use this format for commit messages:

  [Type]: Description of the change
  

  Types:

  • feat: A new feature
  • fix: A bug fix
  • docs: Documentation changes
  • refactor: Code refactoring

  Example:

  feat: Add new FAQ section to documentation
  fix: Correct typo in installation guide
  

• Enforce code formatting and linting rules by adding Prettier and ESLint to the project.

  Example Configuration in .eslintrc.json:

  {
    "extends": [
      "eslint:recommended",
      "plugin:react/recommended",
      "plugin:@typescript-eslint/recommended"
    ],
    "rules": {
      "semi": ["error", "always"],
      "quotes": ["error", "single"]
    }
  }

• Use comments sparingly and only when necessary to explain complex logic.

• Always prefer clear code over excessive comments.

  Example:

  // This component renders a button with a label
  const Button = ({ label }) => <button>{label}</button>;

---