Features & Capabilities

EasyGoDocs is built to handle everything from simple tutorial pages to complex, interactive documentation. This guide covers all available features and how to use them.

Core Features

Dual Documentation Systems

Choose between simple MDX files or structured JSON templates based on your needs.

Zero-Config Routing

Drop files in src/docs/ and they’re automatically routed at /mdx/filename.

Hot Module Replacement

Edit and see changes instantly without page refresh during development.

Server-Side Rendering

All documentation is pre-rendered for SEO and performance.

Documentation Approaches

1. MDX Files (Simple & Fast)

The recommended approach for most documentation: Advantages:

✅ Immediate: Just create a file and start writing
✅ Familiar: Standard Markdown syntax
✅ Powerful: Embed React components when needed
✅ Version controlled: Changes tracked in Git

How it works:

# Create file
src/docs/docker-setup.mdx

# Automatically available at
/mdx/docker-setup

The MDX renderer (src/app/(main)/mdx/[slug]/page.tsx:22) handles:

File reading from src/docs/
Heading extraction for TOC
MDX compilation with custom components
Syntax highlighting via code blocks

Example MDX with components:

# Docker Installation

import { Alert } from '@/components/ui/alert'

<Alert variant="warning">
  Requires Ubuntu 20.04 or higher
</Alert>

## Installation Steps

```bash
sudo apt update
sudo apt install docker.io

Verify installation:

docker --version

Component imports: Use the @/ alias to import from src/. All components must be React Server Components or explicitly marked "use client".

2. JSON + TSX Templates (Advanced)

For complex, structured documentation with custom layouts: Advantages:

✅ Structured: Defined schema for content blocks
✅ Reusable: Same JSON can power multiple views
✅ Interactive: Programmatic navigation and TOC
✅ Metadata: Built-in support for authors, contributors

How it works:

// src/db/my-doc.json
{
  "id": "my-doc",
  "title": "My Documentation",
  "description": "A comprehensive guide",
  "sidebar": [
    {
      "title": "Getting Started",
      "href": "#getting-started",
      "children": [
        { "title": "Installation", "href": "#installation" },
        { "title": "Configuration", "href": "#configuration" }
      ]
    }
  ],
  "toc": [
    { "id": "getting-started", "title": "Getting Started", "level": 1 },
    { "id": "installation", "title": "Installation", "level": 2 }
  ],
  "content": [
    {
      "type": "heading",
      "id": "getting-started",
      "level": 1,
      "text": "Getting Started"
    },
    {
      "type": "paragraph",
      "text": "This guide will walk you through the basics."
    },
    {
      "type": "code",
      "language": "bash",
      "code": "npm install my-package"
    }
  ],
  "credits": {
    "author": "Jane Doe",
    "contributors": ["John Smith", "Alice Johnson"]
  }
}

Build-time indexing: Run pnpm run generate-db-index to create src/db/export-json/db-index.ts:1:

// AUTO-GENERATED FILE. DO NOT EDIT.
import doc0 from "../react.json";
import doc1 from "../my-doc.json";

export const dbFiles = [
  doc0,
  doc1,
];

This allows static imports in serverless environments (Vercel, Netlify) where dynamic file reading isn’t available. Rendering: The JSON renderer (src/components/documentation/documentation-component.tsx:207) provides:

Collapsible sidebar with nested navigation
Sticky table of contents with scroll tracking
Mobile-responsive drawer
Author credits footer

Build requirement: JSON docs require running generate-db-index before deployment. This is automatic in pnpm build.

Automatic Table of Contents

Both MDX and JSON systems generate TOC automatically: MDX: Extracted from Markdown headings via extractHeadings() (src/lib/mdx-headings.ts:1)

// Parses MDX and returns:
[
  { id: 'introduction', text: 'Introduction', depth: 1 },
  { id: 'features', text: 'Features', depth: 2 }
]

JSON: Explicitly defined in the toc array:

"toc": [
  { "id": "section-1", "title": "Section 1", "level": 1 },
  { "id": "subsection", "title": "Subsection", "level": 2 }
]

The JSON template includes a collapsible sidebar with nested items:

// src/components/documentation/documentation-component.tsx:50
const SidebarNav = ({ items }) => {
  const [openItems, setOpenItems] = useState<string[]>([]);
  
  const toggleItem = (title: string) => {
    setOpenItems(prev => 
      prev.includes(title) 
        ? prev.filter(item => item !== title)
        : [...prev, title]
    );
  };
  // ...
}

Features:

Nested navigation up to 3 levels
Expand/collapse with chevron icons
Smooth scrolling to sections
Active state tracking

Mobile Responsiveness

Desktop (≥1024px):

Fixed sidebar (left)
Content (center)
TOC (right, ≥1280px only)

Mobile (<1024px):

Hamburger menu button
Slide-out drawer for sidebar
Full-width content
TOC accessible via scroll

// src/components/documentation/documentation-component.tsx:214
<Sheet open={sidebarOpen} onOpenChange={setSidebarOpen}>
  <SheetTrigger asChild>
    <Button variant="ghost" size="icon" className="lg:hidden">
      <Menu className="h-5 w-5" />
    </Button>
  </SheetTrigger>
  {/* ... */}
</Sheet>

Syntax Highlighting

Code blocks use prism-react-renderer for beautiful, performant highlighting:

// src/components/ui/code-block.tsx:1
import { Highlight, themes } from 'prism-react-renderer';

export const CodeBlock = ({ children, language, className }) => (
  <Highlight
    theme={themes.vsDark}
    code={children}
    language={language || 'text'}
  >
    {({ style, tokens, getLineProps, getTokenProps }) => (
      <pre style={style}>
        {tokens.map((line, i) => (
          <div key={i} {...getLineProps({ line })}>
            {line.map((token, key) => (
              <span key={key} {...getTokenProps({ token })} />
            ))}
          </div>
        ))}
      </pre>
    )}
  </Highlight>
);

Supported languages: JavaScript, TypeScript, Python, Bash, JSON, YAML, SQL, Rust, Go, and 100+ more. Usage in MDX:

```typescript
function greet(name: string): string {
  return `Hello, ${name}!`;
}
```

Usage in JSON:

{
  "type": "code",
  "language": "typescript",
  "code": "function greet(name: string): string {\n  return `Hello, ${name}!`;\n}"
}

Theme customization: Change the theme in code-block.tsx by importing a different theme from prism-react-renderer/themes.

Dark Mode Support

EasyGoDocs uses Tailwind’s dark mode with class-based switching:

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  // ...
}

Styles automatically adapt:

<div className="bg-white dark:bg-slate-900 text-black dark:text-white">
  Content
</div>

Syntax highlighting themes are also dark mode aware.

Component Library

EasyGoDocs includes Radix UI components styled with Tailwind:

Button

import { Button } from '@/components/ui/button'

<Button variant="default">Primary</Button>
<Button variant="outline">Secondary</Button>
<Button variant="ghost">Tertiary</Button>

Dialog/Sheet

import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'

<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent side="left">
    Content here
  </SheetContent>
</Sheet>

Scroll Area

import { ScrollArea } from '@/components/ui/scroll-area'

<ScrollArea className="h-96">
  Long content...
</ScrollArea>

Code Block

import { CodeBlock } from '@/components/ui/code-block'

<CodeBlock language="javascript">
  {`const x = 10;`}
</CodeBlock>

Animation & Interactions

Framer Motion powers smooth animations:

import { motion } from 'framer-motion'

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.5 }}
>
  Animated content
</motion.div>

Built-in animations:

Sidebar expand/collapse
Mobile drawer slide
Scroll-triggered TOC highlights
Button hover states

EasyGoDocs provides multiple ways to find content:

Table of Contents (TOC): Auto-generated navigation on the right sidebar (desktop)
Sidebar Navigation: Hierarchical documentation structure on the left
Browser Find: Use Ctrl+F / Cmd+F for quick text search within pages
Direct URLs: Clean, predictable URL structure (/library/install-docker-ubuntu)

Use the TOC for quick navigation within long pages, and the sidebar to browse between documentation sections.

Build & Deployment

Development

pnpm dev

Turbopack bundler for instant HMR
Runs on http://localhost:3000
Auto-reloads on file changes

Production Build

pnpm build

Build process:

Generate DB index: generate-db-index.cjs scans src/db/
Generate MDX routes: generate-mdx-routes.cjs scans src/docs/
Next.js build: Static generation of all pages
Output: .next/ directory ready for deployment

Deployment Platforms

Vercel (Recommended):

vercel deploy

Zero-config deployment
Automatic HTTPS
Global CDN
Preview deployments for PRs

Netlify:

# netlify.toml
[build]
  command = "pnpm build"
  publish = ".next"

Docker:

FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install -g pnpm && pnpm install
COPY . .
RUN pnpm build
CMD ["pnpm", "start"]

Serverless compatibility: Build scripts ensure JSON docs work in serverless by creating static imports.

Performance Optimizations

Static Generation

All documentation pages are pre-rendered at build time:

// src/app/(main)/mdx/[slug]/page.tsx:11
export async function generateStaticParams() {
  const docsDirectory = path.join(process.cwd(), 'src/docs');
  const filenames = fs.readdirSync(docsDirectory);
  
  return filenames
    .filter(filename => filename.endsWith('.mdx'))
    .map(filename => ({
      slug: filename.replace(/\.mdx$/, ''),
    }));
}

Benefits:

Instant page loads
SEO-friendly
No server-side rendering overhead

Code Splitting

Next.js automatically splits code by route:

Shared UI components → _app bundle
Page-specific code → route bundles
Dynamic imports → lazy-loaded chunks

Image Optimization

import Image from 'next/image'

<Image 
  src="/docs/screenshot.png" 
  alt="Screenshot" 
  width={800} 
  height={600}
  placeholder="blur"
/>

Next.js Image features:

Automatic WebP conversion
Responsive srcsets
Lazy loading
Blur placeholders

Customization

Styling

Tailwind configuration in tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#your-color',
          // ...
        }
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      }
    }
  }
}

Custom Components

Create reusable MDX components:

// src/components/mdx/Callout.tsx
export const Callout = ({ type, children }) => (
  <div className={`callout callout-${type}`}>
    {children}
  </div>
);

Use in MDX:

import { Callout } from '@/components/mdx/Callout'

<Callout type="info">
  This is an informational callout.
</Callout>

Layout Customization

Edit src/app/(main)/layout.tsx to modify the global layout:

export default function MainLayout({ children }) {
  return (
    <div className="min-h-screen">
      <header>{/* Your header */}</header>
      <main>{children}</main>
      <footer>{/* Your footer */}</footer>
    </div>
  );
}

Contributing Features

Want to add a feature to EasyGoDocs?

Check Existing Issues

Search GitHub Issues to avoid duplicates.

Create a Proposal

Open an issue with:

Feature description
Use cases
Implementation ideas

Get Assigned

Wait for maintainer approval and assignment (required for GSSoC points).

Implement & Test

Follow code style guidelines
Test on desktop and mobile
Add documentation

Submit PR

Include:

Clear description
Screenshots/videos
Testing notes

GSSoC contributors: Feature additions typically earn 10 points (Level 3).

Roadmap

Upcoming features:

Have a feature request?

We’d love to hear your ideas! Open an issue on GitHub.

Request a Feature →

Get Started

Core Concepts

Guides

Contributing

​Features & Capabilities

​Core Features

Dual Documentation Systems

Zero-Config Routing

Hot Module Replacement

Server-Side Rendering

​Documentation Approaches

​1. MDX Files (Simple & Fast)

​2. JSON + TSX Templates (Advanced)

​Navigation & Layout

​Automatic Table of Contents

​Sidebar Navigation (JSON only)

​Mobile Responsiveness

​Syntax Highlighting

​Dark Mode Support

​Component Library

​Button

​Dialog/Sheet

​Scroll Area

​Code Block

​Animation & Interactions

​Search & Navigation

​Build & Deployment

​Development

​Production Build

​Deployment Platforms

​Performance Optimizations

​Static Generation

​Code Splitting

​Image Optimization

​Customization

​Styling

​Custom Components

​Layout Customization

​Contributing Features

​Roadmap

Build docs developers (and LLMs) love

Features & Capabilities

Core Features

Documentation Approaches

1. MDX Files (Simple & Fast)

2. JSON + TSX Templates (Advanced)

Navigation & Layout

Automatic Table of Contents

Sidebar Navigation (JSON only)

Mobile Responsiveness

Syntax Highlighting

Dark Mode Support

Component Library

Button

Dialog/Sheet

Scroll Area

Code Block

Animation & Interactions

Search & Navigation

Build & Deployment

Development

Production Build

Deployment Platforms

Performance Optimizations

Static Generation

Code Splitting

Image Optimization

Customization

Styling

Custom Components

Layout Customization

Contributing Features

Roadmap