Contributing to the Documentation

Contributions to the documentation are welcome! This guide explains how to contribute to the ecosystem.Ai documentation by writing and formatting new documentation. Our website is built with Nextra 3 and our docs use the .mdx format (augmented markdown).

When to Write a Doc vs. a Blog Post

Creating New Documents

To create a new document:

• Use the .mdx file extension (see MDX documentation for more info).
• Name files using lowercase letters and underscores (e.g., documentation_guidelines.mdx).
• Place new documents in the relevant folder/sub-folder under ./docs.
• Add the document to the table of contents in the _meta.ts file of the folder where your document is located. If you don’t add it, it will be alphabetically sorted after the ordered docs.

Markdown Formatting Guidelines

• Use headings and subheadings with #, ##, and ###.
  • Use # for the document title (only one main title per document is allowed).
  • Use ## for main sections.
  • Use ### for sub-sections within a section.
• Use ** to make text bold and highlight important information (do not use in place of a heading).
• Use URL paths to link to other documents (e.g., /docs/documentation points the current doc).
• You can use HTML, TS, and JS to add additional features to a document.
• Ensure any HTML has closing tags (e.g., <img src="" /> or <a href="link"></a>).
• Do not use HTML comments; instead, use Markdown comments only if the text is actually hidden.

Docs Resources

Document Metadata

Add metadata to the header of your document using the following format:

Note: The ogImage field is optional and can be omitted altogether. It is used to specify the image that will be displayed when sharing your document on social media platforms.

---
title: Document Title
description: This description will be used in social cards and search engine results.
ogImage: /images/docs/<category>/image.png (optional)
---

Assets

Whenever possible, upload assets (e.g., images) to GitHub instead of storing them in the /public folder. This helps keep your repository organized and makes it easier to manage your assets.

Images

Note In the followng example:

• I provided screenshots for both lihgt and dark mode.
• I used Image from 'next/image' wich gave me 4x improvement on the image file size for better performances.

see the following example in action here: User Guides

import Image from 'next/image'
 
<div style={{padding: "20px", display: "flex", justifyContent: "center", alignItems: "center", flexDirection: "column"}}>
  <div className="image-light-theme">
    <Image src="https://github.com/ecosystemai/developer/assets/32828263/cf0f3231-287a-407f-bd4d-3d5bad94e893" alt="ipad-light" width={1024} height={512} style={{borderRadius: "5px"}} />
  </div>
 
  <div className="image-dark-theme">
    <Image src="https://github.com/ecosystemai/developer/assets/32828263/a03ee02d-5099-4220-95b0-bfa2d3b00b4d" alt="ipad-dark" width={1024} height={512} style={{borderRadius: "5px"}} />
  </div>
</div>

How to Upload Images and Videos on GitHub

Test the Docs