Documentation Guide

This project is a documentation site built using Next.js and Markdoc. It provides a template for creating documentation with features like global search, table of contents, and responsive design.

Creating Documentation Pages

1. File Location

Create new documentation pages in src/app/docs/[slug]/page.md

Example: src/app/docs/my-new-guide/page.md

2. Frontmatter

Each page must start with YAML frontmatter:

---
title: My New Guide
nextjs:
  metadata:
    title: My New Guide
    description: Brief description of the page content
---

3. Content

Write content using standard Markdown. The site supports:

• Standard Markdown syntax (headings, lists, links, code blocks, etc.)
• Custom Markdoc tags (see below)
• Automatic table of contents generation from H2/H3 headings

4. Update Navigation

Add the new page to src/lib/navigation.ts:

{
  title: 'Section Name',
  links: [
    // ... existing links
    { title: 'My New Guide', href: '/docs/my-new-guide' },
  ],
},

Typography

Visit this link to checkout typography.

Links

This is how you can add a link to text.

Quick Links

Callouts

Code

This is how you can show code examples and snippets

// cache-advance.config.js
export default {
  strategy: 'predictive',
  engine: {
    cpus: 12,
    backups: ['./storage/cache.wtf'],
  },
}

Figures

Search

The site includes automatic search indexing powered by FlexSearch:

• Searches are indexed automatically from documentation content
• Available via ⌘K shortcut or search input
• Configuration in src/markdoc/search.mjs
• Indexes headings and content sections

Lists

You can use both unordered and ordered lists to organize information.

Unordered Lists

• Unordered item 1
• Unordered item 2
  • Nested unordered item 2.1
  • Nested unordered item 2.2
• Unordered item 3

Ordered Lists

1. Ordered item 1
2. Ordered item 2
   1. Nested ordered item 2.1
   2. Nested ordered item 2.2
3. Ordered item 3

Tables