Documentation Management Guide

This guide explains how to add, update, and organize documentation pages.

File Structure

All documentation files are stored in:

src/content/docs/

Each documentation page is a .mdx file with frontmatter.

Adding a New Page

Step 1: Create the MDX File

Create a new .mdx file in src/content/docs/:

Example: src/content/docs/my-new-page.mdx

---
title: My New Page
description: A brief description of what this page covers
---

# My New Page

Your content here...

Step 2: Add to Sidebar Navigation

Edit src/app/product/documentation/components/DocsSidebar.tsx:

Find the sections array and add your page to the appropriate section:

const sections: DocSection[] = [
  {
    title: "Getting Started",
    items: [
      docs.find((d) => d.slug === "introduction")!,
      docs.find((d) => d.slug === "getting-started")!,
      docs.find((d) => d.slug === "my-new-page")!, // Add your new page here
    ].filter(Boolean),
  },
  // ... other sections
];

Step 3: Access Your Page

Your page will be available at:

/product/documentation/my-new-page

Creating New Sections

To create a new collapsible section in the sidebar:

1. Add a new section object to the sections array:

{
  title: "Your New Section",
  items: [
    docs.find((d) => d.slug === "page-1")!,
    docs.find((d) => d.slug === "page-2")!,
  ].filter(Boolean),
}

Frontmatter Requirements

Every MDX file must start with frontmatter:

---
title: Page Title
description: Brief description (optional but recommended)
---

• title: Required - appears in sidebar and page header
• description: Optional - appears in search results and page header

Adding Content

Headings

Use markdown headings to create sections:

# Main Heading (H1)
## Section Heading (H2)
### Subsection (H3)

Important: Headings automatically appear in:

• The right sidebar table of contents
• Search results (searchable by heading text)

Images

Place images in public/ folder and reference them:

![Alt text](/image-name.png)

Videos

Embed videos using iframe:

<iframe 
  src="https://www.youtube.com/embed/VIDEO_ID" 
  width="560" 
  height="315"
  allowfullscreen
></iframe>

Code Blocks

\`\`\`typescript
// Your code here
\`\`\`

Links

[Link text](/product/documentation/other-page)

Page Organization

Current Structure

The sidebar is organized into collapsible sections:

1. Getting Started

   • Introduction
   • Getting Started

2. Journaling

   • Journaling

Adding Pages to Existing Sections

Simply add the page slug to the section's items array:

{
  title: "Getting Started",
  items: [
    docs.find((d) => d.slug === "introduction")!,
    docs.find((d) => d.slug === "getting-started")!,
    docs.find((d) => d.slug === "your-new-page")!, // Add here
  ].filter(Boolean),
}

Search Functionality

The search automatically includes:

• Page titles and descriptions
• All headings (H1, H2, H3) from all pages

No additional configuration needed - headings are automatically extracted and made searchable.

Best Practices

1. Use descriptive titles: Make page titles clear and specific
2. Add descriptions: Help users understand what each page covers
3. Organize with headings: Use H2 and H3 to create clear sections
4. Link between pages: Use internal links to connect related content
5. Keep files focused: One topic per page is easier to maintain

File Naming Convention

• Use lowercase with hyphens: my-page-name.mdx
• The filename becomes the URL slug: /product/documentation/my-page-name
• Keep names short and descriptive

Example: Complete New Page

Here's a complete example of adding a new page:

1. Create file: src/content/docs/advanced-features.mdx

---
title: Advanced Features
description: Learn about advanced TradeVision features and customization options
---

# Advanced Features

## Custom Dashboards

Create personalized dashboards...

## API Integration

Connect TradeVision with other tools...

## Automation

Set up automated workflows...

2. Add to sidebar: Edit DocsSidebar.tsx:

{
  title: "Features",
  items: [
    docs.find((d) => d.slug === "advanced-features")!,
  ].filter(Boolean),
}

3. Access: Navigate to /product/documentation/advanced-features

Updating Existing Pages

Simply edit the .mdx file:

• Changes appear automatically
• Headings are automatically indexed for search
• Table of contents updates automatically

Troubleshooting

• Page not showing in sidebar? Check that the slug is added to a section's items array
• Search not finding content? Ensure headings use proper markdown syntax (## Heading)
• Images not loading? Verify the path starts with / and the file is in public/