Contributing to Documentation

The OSSM documentation is built with Mintlify, a modern documentation platform that makes it easy to create beautiful, interactive docs.

Documentation Platform

This documentation uses Mintlify for rendering and deployment. For detailed information about available components, formatting options, and best practices, visit the official Mintlify documentation:

Local Development Setup

To preview documentation changes locally before submitting a pull request:

cd Documentation

pnpm i

pnpm mint

http://localhost:3333

Local Preview

Once you have the local server running, you'll see the full documentation site with navigation, search, and all Mintlify features:

The preview includes the complete navigation sidebar, showing all sections including the new "Contributing" section under the Software tab.

Writing Documentation

MDX Format

All documentation pages use MDX (Markdown + JSX), which allows you to combine standard Markdown with React components for rich, interactive content.

Example MDX structure:

---
title: "Page Title"
description: "Brief description for SEO and previews"
---

# Main Heading

Regular Markdown content works here.

<Info>
You can use Mintlify components like this.
</Info>

## Another Section

More content here...

Image Guidelines

Images should be co-located with the documentation that uses them:

ossm/Software/communication/
├── ble.mdx
├── gpio.mdx
└── _images/
    ├── ble-diagram.png
    └── gpio-pinout.jpg

React Snippets

For interactive examples and demonstrations, you can embed React components using the snippet system.

Snippet Location

All React snippets are stored in:

Documentation/snippets/ossm/

Snippet Requirements

// ✅ Good - Pure React
import { useState } from 'react';

export const Counter = () => {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
};

// ❌ Bad - External dependencies
import { useQuery } from 'react-query';
import axios from 'axios';

export const StyledComponent = () => {
  return (
    <div className="p-4 bg-gray-100 rounded-lg shadow-md">
      <h2 className="text-xl font-bold text-gray-800">Hello</h2>
      <p className="mt-2 text-gray-600">Styled with Tailwind</p>
    </div>
  );
};

// ✅ Good - Single export
export const MyComponent = () => {
  return <div>Content</div>;
};

// ❌ Bad - Multiple exports
export const ComponentA = () => <div>A</div>;
export const ComponentB = () => <div>B</div>;

Example Snippet

Here's a complete example showing the proper structure:

import { useState } from 'react';

export const ExampleSnippet = () => {
  const [isActive, setIsActive] = useState(false);

  return (
    <div className="p-6 bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl">
      <h3 className="text-2xl font-bold text-gray-800 mb-4">
        Interactive Example
      </h3>
      <button
        onClick={() => setIsActive(!isActive)}
        className={`px-4 py-2 rounded-lg font-medium transition-colors ${
          isActive
            ? 'bg-green-500 text-white'
            : 'bg-gray-200 text-gray-700'
        }`}
      >
        {isActive ? 'Active' : 'Inactive'}
      </button>
      {isActive && (
        <p className="mt-4 text-gray-600">
          The component is now active!
        </p>
      )}
    </div>
  );
};

<ExampleSnippet />

Development Tools

Next Steps