Documentation

Overview

ShipNow's Document Feature enables you to:

• 📄 Create and manage documentation using Markdown and MDX
• 🌐 Support multiple languages and translations
• 🗂️ Automatically generate navigation structure
• 🔍 Provide full-text search capabilities
• 🎨 Customize styling and theming

Why Use Built-in Documentation?

Having built-in documentation in your application offers several key advantages:

1. SEO Optimization: Enhances keyword presence and improves search engine rankings than subdomains.
2. User Experience: Provides a unified experience matching the main site, reinforcing brand recognition.
3. Product Integration: Seamlessly embed product capabilities into documentation to drive user productivity.

Create a New Page

1. Create an MDX file in the docs directory:

   touch content/docs/getting-started.mdx

2. Add frontmatter metadata:

   ---
   title: Getting Started
   description: Learn how to start using our platform
   ---

3. Write your content using Markdown and MDX:

   ## Quick Start
    
   1. Install the package
   2. Configure settings
   3. Start using features
    
   <Callout>
     Remember to check requirements first!
   </Callout>

File Structure

Documentation is organized in directories:

content/docs/
├── index.mdx          # Landing page
├── features/          # Feature documentation
│   ├── documentation.mdx
│   └── deployment.mdx
└── api/               # API documentation
    └── reference.mdx

Icons

You can use any Tabler icon in your documentation by specifying the icon name in the frontmatter:

---
title: API Reference
icon: Code  # Uses the Code icon from Tabler
---

Markdown Features

Images

You can add images to your documentation:

![Alt Text](image.png)

Code Blocks

You can create syntax-highlighted code blocks:

function hello(name: string) {
  console.log(`Hello ${name}!`);
}

Callouts

Use callouts to highlight important information:

> **Note**: This is an important note

Lists

• Bullet points
• Are supported
• Like this

1. Numbered lists
2. Also work
3. As expected

Check Fumadocs Markdown for more features.

Internationalization

You can create a Markdown file for specific language by adding .{locale} to your file name, like page.zh-TW.mdx.

Example:

content/docs/
├── index.mdx       # English version
├── index.zh-TW.mdx # Traditional Chinese version

1. Add the language to config/locales.ts:

   export const locales = [
     { code: 'en', name: 'English' },
     { code: 'zh-CN', name: '简体中文' },
     { code: 'zh-TW', name: '繁體中文' }, // Add this line
   ] as const;

2. Copy the content to the new file:

   cp content/docs/index.mdx content/docs/index.zh-TW.mdx

3. Ask AI to translate the content:

   Translate the following content to Traditional Chinese:
   
   // The content to translate
   

Search

The documentation includes a powerful search feature. Press ⌘K (Mac) or Ctrl+K (Windows) to focus the search.

Need Help?

If you need assistance with the documentation system:

• Check the Fumadocs documentation
• Join our community Discord
• Open an issue on GitHub