Adding Document
Adding New Documentation Pages
Section titled “Adding New Documentation Pages”This guide will walk you through the process of adding new documentation pages to your Dockit site, organizing them properly, and ensuring they appear in the navigation.
File Structure
Section titled “File Structure”All documentation files are located in the src/content/docs/ directory. The structure looks like this:
Creating a New Page
Section titled “Creating a New Page”Step 1: Create the File
Section titled “Step 1: Create the File”Create a new .md or .mdx file in the appropriate directory:
For Markdown (.md):
For MDX (.mdx) - with React components:
Step 2: Add Frontmatter
Section titled “Step 2: Add Frontmatter”Every documentation page must start with YAML frontmatter:
Required Frontmatter Fields
Section titled “Required Frontmatter Fields”Field
Type
Description
title
string
Page title (appears in browser tab and navigation)
description
string
Page description for SEO and previews
Optional Frontmatter Fields
Section titled “Optional Frontmatter Fields”Field
Type
Description
sidebar.order
number
Custom ordering in sidebar
sidebar.label
string
Custom label in sidebar (defaults to title)
sidebar.hidden
boolean
Hide page from sidebar navigation
editUrl
boolean/string
Enable/disable edit link or set custom URL
lastUpdated
boolean
Show last updated date
prev
boolean/object
Configure previous page link
next
boolean/object
Configure next page link
hero
object
Add hero section (for splash pages)
banner
object
Add banner message
draft
boolean
Mark as draft (won’t build in production)
Adding to Navigation
Section titled “Adding to Navigation”Method 1: Automatic Generation
Section titled “Method 1: Automatic Generation”For directories with multiple pages, use autogenerate in src/config/config.json:
Method 2: Manual Configuration
Section titled “Method 2: Manual Configuration”For specific pages or custom organization:
Method 3: Mixed Approach
Section titled “Method 3: Mixed Approach”Combine autogenerate with manual items:
Content Examples
Section titled “Content Examples”Basic Markdown Page
Section titled “Basic Markdown Page”Next Steps
Section titled “Next Steps”Creating New Sections
Section titled “Creating New Sections”Step 1: Create Directory Structure
Section titled “Step 1: Create Directory Structure”Step 2: Add Pages
Section titled “Step 2: Add Pages”Step 3: Update Navigation
Section titled “Step 3: Update Navigation”Add to src/config/config.json:
Best Practices
Section titled “Best Practices”File Naming
Section titled “File Naming”-
Use kebab-case for file names:
my-guide.md -
Be descriptive but concise
-
Match the URL structure you want
Content Organization
Section titled “Content Organization”-
Logical Grouping: Group related content in directories
-
Progressive Disclosure: Start with basics, advance to complex topics
-
Cross-References: Link related pages together
-
Consistent Structure: Use similar headings and organization
Writing Guidelines
Section titled “Writing Guidelines”-
Clear Titles: Make titles descriptive and searchable
-
Good Descriptions: Write compelling descriptions for SEO
-
Proper Headers: Use h1 for page title, h2 for main sections
-
Code Examples: Provide working, copy-paste-ready examples
-
Visual Elements: Use components, tables, and callouts for clarity
SEO and Accessibility
Section titled “SEO and Accessibility”-
Write descriptive
titleanddescriptionfrontmatter -
Use proper heading hierarchy (h1 → h2 → h3)
-
Add alt text to images
-
Use semantic HTML elements
-
Test with screen readers
Troubleshooting
Section titled “Troubleshooting”Page Not Appearing in Navigation
Section titled “Page Not Appearing in Navigation”-
Check file is in correct directory
-
Verify frontmatter syntax
-
Ensure page is added to
config.jsonsidebar -
Restart development server
Build Errors
Section titled “Build Errors”-
Validate YAML frontmatter syntax
-
Check for missing imports in MDX files
-
Ensure all referenced files exist
-
Review component syntax
Navigation Order Issues
Section titled “Navigation Order Issues”-
Use
sidebar.orderin frontmatter for custom ordering -
Check alphabetical sorting in autogenerated sections
-
Verify manual ordering in config.json
Advanced Features
Section titled “Advanced Features”Custom Page Layouts
Section titled “Custom Page Layouts”Use the template frontmatter field:
Page-Specific Styling
Section titled “Page-Specific Styling”Add custom CSS classes:
Conditional Content
Section titled “Conditional Content”Use MDX to show content conditionally:
Next Steps
Section titled “Next Steps”Still Reading Docs? Start Doing!
Unlock the full potential of Feedigy's power to streamline and automate your content marketing efforts!