> ## Documentation Index
> Fetch the complete documentation index at: https://mint-tsdocs.saulo.engineer/llms.txt
> Use this file to discover all available pages before exploring further.

# Simple Project Examples

> OpenDocs examples for single-language libraries

export const FileTree = ({structure, item, title, level = 0, maxDepth = 10, showIcons = true}) => {
  const getFileIcon = (fileName, hasChildren) => {
    if (hasChildren) {
      return 'folder-open';
    }
    return 'file';
  };
  if (structure !== undefined) {
    return <div data-component="tsdocs-filetree" className="code-block mt-5 mb-8 not-prose rounded-2xl relative group
                   text-gray-950 bg-gray-50 dark:bg-white/5 dark:text-gray-50
                   border border-gray-950/10 dark:border-white/10
                   p-0.5">
        {title && <div className="flex text-gray-400 text-xs rounded-t-[14px] leading-6 font-medium pl-4 pr-2.5 py-1">
            <div className="flex-none flex items-center gap-1.5 text-gray-700 dark:text-gray-300">
              {title}
            </div>
          </div>}
        <div className={`prose prose-sm dark:prose-invert w-0 min-w-full max-w-full py-3.5 px-4 bg-white dark:bg-codeblock overflow-x-auto scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-black/15 hover:scrollbar-thumb-black/20 dark:scrollbar-thumb-white/20 dark:hover:scrollbar-thumb-white/25 rounded-xt`} style={{
      fontFamily: 'ui-monospace, SFMono-Regular, monospace',
      fontSize: '0.875rem'
    }}>
          {structure.map((fileItem, index) => {
      if (!fileItem || !fileItem.name) return null;
      return <FileTree key={index} item={fileItem} level={0} maxDepth={maxDepth} showIcons={showIcons} />;
    })}
        </div>
      </div>;
  }
  if (!item) {
    return null;
  }
  if (level >= maxDepth) {
    return <div style={{
      paddingLeft: `${level * 20}px`,
      paddingTop: '4px',
      paddingBottom: '4px',
      color: '#6b7280',
      fontStyle: 'italic'
    }}>
        {showIcons && <Icon icon="AlertTriangle" />} (max depth reached)
      </div>;
  }
  const hasChildren = item.children != null && item.children.length > 0;
  const indent = level * 20;
  if (hasChildren) {
    return <div style={{
      position: 'relative',
      paddingLeft: `${indent}px`
    }}>
        {}
        {level > 0 && <div style={{
      position: 'absolute',
      left: `${indent - 12}px`,
      top: '20px',
      bottom: '0',
      width: '1px',
      backgroundColor: 'rgba(156, 163, 175, 0.2)',
      borderLeft: '1px solid rgba(156, 163, 175, 0.1)'
    }} />}
        <div style={{
      display: 'flex',
      alignItems: 'center',
      gap: '8px',
      paddingTop: '4px',
      paddingBottom: '4px'
    }}>
          {showIcons && <Icon icon={getFileIcon(item.name, true)} />}
          <span style={{
      fontWeight: 500
    }}>
            {item.name}
          </span>
          {item.description && <span style={{
      fontSize: '0.75rem',
      color: '#94a3b8',
      marginLeft: '8px'
    }}>
              {item.description}
            </span>}
          {item.badge && <Badge color={item.badge.color || 'blue'}>
              {item.badge.text}
            </Badge>}
        </div>
        {}
        {item.children && item.children.map((child, i) => {
      const key = child.name ? `${child.name}-${i}` : `child-${i}`;
      return <FileTree key={key} item={child} level={level + 1} maxDepth={maxDepth} showIcons={showIcons} />;
    })}
      </div>;
  }
  return <div style={{
    position: 'relative',
    paddingLeft: `${indent}px`,
    display: 'flex',
    alignItems: 'center',
    gap: '8px',
    paddingTop: '4px',
    paddingBottom: '4px'
  }}>
      {}
      {level > 0 && <div style={{
    position: 'absolute',
    left: `${indent - 12}px`,
    top: '0',
    bottom: '0',
    width: '1px',
    backgroundColor: 'rgba(156, 163, 175, 0.2)',
    borderLeft: '1px solid rgba(156, 163, 175, 0.1)'
  }} />}
      {showIcons && <Icon icon={getFileIcon(item.name, false)} />}
      <span>
        {item.name}
      </span>
      {item.description && <span style={{
    fontSize: '0.75rem',
    color: '#94a3b8',
    marginLeft: '8px'
  }}>
          {item.description}
        </span>}
      {item.badge && <Badge color={item.badge.color || 'blue'}>
          {item.badge.text}
        </Badge>}
    </div>;
};

# Simple Project Examples

<Warning>
  **RFC Status**: This section contains proposed examples for the OpenDocs Specification RFC.

  These examples are provided to illustrate how the specification could be implemented.
  [Provide feedback](https://github.com/svallory/mintlify-tsdocs/issues) to help refine these examples.
</Warning>

## Simple TypeScript Library

This example demonstrates the most basic OpenDocs implementation for a single-language TypeScript utility library.

### Project Structure

<FileTree
  structure={[
{
  name: "src/",
  children: [
    { name: "index.ts" },
    { name: "math.ts" },
    { name: "string.ts" }
  ]
},
{ name: "package.json" },
{ name: "tsconfig.json" }
]}
/>

### opendocs.json Configuration

```json theme={null}
{
  "documentationSet": {
    "id": "typescript-utils-docs",
    "name": "TypeScript Utilities Documentation",
    "description": "A collection of utility functions for TypeScript",
    "version": "1.0.0",
    "created": "2024-01-15T10:30:00Z"
  },
  "projects": [
    {
      "id": "main",
      "name": "Main Library",
      "language": "typescript",
      "version": "1.2.3",
      "location": {
        "type": "embedded",
        "format": "json"
      }
    }
  ],
  "navigation": {
    "title": "API Reference",
    "groups": [
      {
        "name": "Core API",
        "projects": ["main"]
      }
    ]
  }
}
```

### Generated Documentation

```json theme={null}
{
  "project": {
    "id": "main",
    "name": "TypeScript Utilities",
    "language": "typescript",
    "items": {
      "format": "json",
      "file": "main-items.json",
      "count": 15
    },
    "metadata": {
      "version": "1.2.3",
      "repository": "https://github.com/example/typescript-utils"
    }
  }
}
```

### Sample DocItems

```json theme={null}
[
  {
    "id": "math#add",
    "name": "add",
    "kind": "function",
    "language": "typescript",
    "docBlock": {
      "description": "Adds two numbers together",
      "tags": {
        "param": [
          {
            "name": "param",
            "content": "The first number",
            "parameters": { "name": "a", "type": "number" }
          },
          {
            "name": "param",
            "content": "The second number",
            "parameters": { "name": "b", "type": "number" }
          }
        ],
        "returns": ["The sum of a and b"]
      }
    },
    "metadata": {
      "signature": {
        "parameters": [
          { "name": "a", "type": "number" },
          { "name": "b", "type": "number" }
        ],
        "returnType": "number"
      }
    }
  },
  {
    "id": "string#capitalize",
    "name": "capitalize",
    "kind": "function",
    "language": "typescript",
    "docBlock": {
      "description": "Capitalizes the first letter of a string",
      "tags": {
        "param": [
          {
            "name": "param",
            "content": "The string to capitalize",
            "parameters": { "name": "str", "type": "string" }
          }
        ],
        "returns": ["The capitalized string"]
      }
    }
  }
]
```

## Key Takeaways

* **Embedded Format**: Simple projects can use `"type": "embedded"` to keep all DocItems in the opendocs.json file
* **Minimal Configuration**: Only requires basic metadata and project information
* **Single Navigation Group**: Groups all API items under one navigation section
* **JSON Format**: Ideal for projects with fewer than 100 documented items

## See Also

* [Monorepo Examples](/opendocs/examples/monorepo) - Multi-language project examples
* [OpenDocs File Organization](/opendocs/opendocs-file-organization) - Learn about file storage options
* [Examples Overview](/opendocs/examples/index) - Back to all examples

***

*This example is part of the OpenDocs Specification RFC. [Provide feedback](https://github.com/svallory/mintlify-tsdocs/issues) to help improve it.*