> ## Documentation Index
> Fetch the complete documentation index at: https://docs.yuvrajverma.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Knowledgebase

> Learn how to create, manage, and optimize knowledge base articles for your hosting website. 

<Callout icon="link-horizontal" color="#2fbe1f">**Article Files:** `content/docs/*.mdx`</Callout>

<Info>
  **Category Icons?** Learn how to configure icons for categories and content blocks in the [Icons Guide](../help/icons).
</Info>

## What is Knowledge Base?

The Knowledge Base is a self-service help center where customers can find answers to common questions without contacting support. It includes:

* **Searchable articles** - Full-text search functionality
* **Category organization** - Group articles by topic
* **Rich content blocks** - Text, images, code, videos, alerts
* **SEO optimized** - Each article has its own URL and meta tags
* **Mobile responsive** - Perfect on all devices

**Benefits:**

* Reduce support tickets by 60-80%
* 24/7 help for customers
* Improve SEO with quality content
* Build customer trust and confidence

## **Creating Article**

<Steps>
  <Step title="Copy the Template">
    Navigate to `config/knowledgebase/articles/` and copy the template:

    ```
    cp _TEMPLATE.ts my-first-article.ts
    ```

    **Naming convention:**

    * Use lowercase
    * Use hyphens, not spaces
    * Be descriptive
    * Examples: `setup-minecraft-server.ts`, `how-to-upload-world.ts`
  </Step>

  <Step title="Fill in Details">
    Open your new file and update the metadata:

    ```typescript theme={null}
    import { KnowledgebaseArticle } from "../types";

    export const article: KnowledgebaseArticle = {
      // URL slug (no spaces, lowercase)
      slug: "setup-minecraft-server",
      
      // Article title
      title: "How to Setup a Minecraft Server",
      
      // Brief description (for SEO & search results)
      description: "Step-by-step guide to setting up your Minecraft server in under 5 minutes",
      
      // Category (see categories below)
      category: "game-servers",
      
      // Author name
      author: "Latch Team",
      
      // Publication date (YYYY-MM-DD)
      date: "2026-02-01",
      
      // Reading time in minutes
      readTime: 5,
      
      // Search tags (lowercase)
      tags: ["minecraft", "setup", "beginner", "tutorial"],
      
      // Content blocks (see next step)
      content: [
        // Add your content here
      ]
    };
    ```
  </Step>

  <Step title="Add Content Blocks">
    Write your article using content blocks (detailed below):

    ```typescript theme={null}
    content: [
      {
        type: "heading",
        level: 1,
        content: "How to Setup a Minecraft Server"
      },
      {
        type: "paragraph",
        content: "This guide will walk you through setting up your Minecraft server."
      },
      {
        type: "alert",
        variant: "info",
        content: "This takes about 5 minutes to complete."
      },
      // Add more blocks...
    ]
    ```
  </Step>

  <Step title="Register your Article">
    Open `config/knowledgebase/index.ts` and add:

    ```typescript theme={null}
    // At the top with other imports
    import { article as setupMinecraft } from "./articles/setup-minecraft-server";

    // In the articles array
    export const articles: KnowledgebaseArticle[] = [
      gettingStarted,
      setupMinecraft,  // Add your article here
      // ... other articles
    ];
    ```
  </Step>

  <Step title="Test your article">
    Visit your development site:

    ```
    http://localhost:3000/knowledgebase/setup-minecraft-server
    ```

    Check:

    * Article displays correctly
    * Images load
    * Code blocks have copy buttons
    * Search finds your article
    * Category filter works
  </Step>
</Steps>

## Content Blocks Reference

### Paragraph

Regular text with optional **bold** formatting:

```typescript theme={null}
{
  type: "paragraph",
  content: "This is regular text. Use **bold** for emphasis."
}
```

**Markdown support in paragraphs:**

* `**bold**` → **bold**
* Plain text (no italic support yet)

### **Headings**

Create section headers:

```typescript theme={null}
// H1 - Main title (use once)
{
  type: "heading",
  level: 1,
  content: "Main Article Title"
}

// H2 - Major sections
{
  type: "heading",
  level: 2,
  content: "Section Title"
}

// H3 - Subsections
{
  type: "heading",
  level: 3,
  content: "Subsection Title"
}

// H4 - Minor sections
{
  type: "heading",
  level: 4,
  content: "Minor Section"
}
```

**Best practices:**

* Use H1 only once (main title)
* Use H2 for major sections
* Maintain hierarchy (don't skip levels)

### **Code Blocks**

Syntax-highlighted code with copy button:

```typescript theme={null}
{
  type: "code",
  language: "bash",
  code: `npm install
npm run dev`,
  filename: "terminal"  // Optional
}
```

**Supported languages:**

* `bash` - Terminal commands
* `javascript` / `js` - JavaScript
* `typescript` / `ts` - TypeScript
* `python` - Python
* `java` - Java
* `json` - JSON
* `yaml` - YAML
* `properties` - Config files
* `css` - CSS
* `html` - HTML
* `sql` - SQL

Examples:

<CodeGroup>
  ```javascript Bash theme={null}
  {
    type: "code",
    language: "bash",
    code: `cd /var/minecraft
  ./start.sh`,
    filename: "terminal"
  }
  ```

  ```javascript Javascript theme={null}
  {
    type: "code",
    language: "javascript",
    code: `const config = {
    port: 3000,
    host: 'localhost'
  };`,
    filename: "config.js"
  }
  ```
</CodeGroup>

### Images

Add images with captions:

```typescript theme={null}
{
  type: "image",
  src: "/images/kb/control-panel.png",
  alt: "Game control panel interface",
  caption: "The main control panel dashboard"  // Optional
}
```

**Image best practices:**

1. **File location:** Save in `public/images/kb/`
2. **Naming:** Use descriptive names: `minecraft-setup-step1.png`
3. **Format:** PNG or JPG
4. **Size:**
   * Maximum width: 1200px
   * Compress with [**<u>TinyPNG</u>**](https://tinypng.com/)
   * Target: Under 200KB per image
5. **Alt text:** Describe the image for accessibility

**Example structure:**

```typescript theme={null}
public/
  images/
    kb/
      minecraft-setup-step1.png
      minecraft-setup-step2.png
      fivem-config-example.jpg
```

### YouTube Videos

Embed YouTube videos:

```typescript theme={null}
{
  type: "youtube",
  videoId: "dQw4w9WgXcQ",
  caption: "How to setup your Minecraft server (5:32)"
}
```

**How to get Video ID:**

* From URL: `https://www.youtube.com/watch?v=dQw4w9WgXcQ`
* Video ID is: `dQw4w9WgXcQ`

### Alert Box

Highlight important information:

```typescript theme={null}
// Info (Blue) - General information
{
  type: "alert",
  variant: "info",
  content: "Tip: This will save you time!"
}

// Success (Green) - Positive outcomes
{
  type: "alert",
  variant: "success",
  content: "Great! You've completed this step."
}

// Warning (Orange) - Caution
{
  type: "alert",
  variant: "warning",
  content: "Make sure to backup your world first!"
}

// Error (Red) - Critical warnings
{
  type: "alert",
  variant: "error",
  content: "STOP! Do not proceed without backing up!"
}
```

## Categories

Organize articles by category:

| **Category ID**   | **Display Name**  | **Icon**    | **Use For**                  |
| :---------------- | :---------------- | :---------- | :--------------------------- |
| `getting-started` | Getting Started   | Rocket      | Onboarding, first steps      |
| `game-servers`    | Game Servers      | Gamepad     | Game-specific tutorials      |
| `billing`         | Billing & Account | Credit Card | Payments, account management |
| `technical`       | Technical         | Code        | Advanced configurations      |
| `security`        | Security          | Shield      | Security, DDoS, backups      |
| `troubleshooting` | Troubleshooting   | Wrench      | Fixing issues                |

**Add a category:**

Edit `config/knowledgebase/index.ts`:

```typescript theme={null}
export const categories: KnowledgebaseCategory[] = [
  {
    id: "getting-started",
    name: "Getting Started",
    icon: "rocket",
    description: "New to hosting? Start here!"
  },
  // Add your custom category
  {
    id: "custom-category",
    name: "Custom Category",
    icon: "grid",
    description: "Description of your category"
  }
];
```

## Page Configuration

Customize the knowledge base landing page appearance and content.

<Callout icon="file-code" color="#a855f7">
  **Config File:** `config/pages/knowledgebase.ts`
</Callout>

### Hero Section

Configure the main header area with search:

```typescript theme={null}
export const knowledgebasePageConfig = {
  hero: {
    title: "How Can We",
    highlight: "Help You",  // Displayed in brand color
    subtitle: "Search our knowledge base for guides, tutorials, and solutions to common questions.",
    backgroundImage: "/assets/kb-hero-bg.jpg",
    searchPlaceholder: "Search for articles..."
  },
  // ... other config
};
```

**Options:**

| Field               | Type   | Description                      | Example                        |
| ------------------- | ------ | -------------------------------- | ------------------------------ |
| `title`             | string | Main title text                  | "How Can We"                   |
| `highlight`         | string | Highlighted text (brand colored) | "Help You"                     |
| `subtitle`          | string | Description below title          | "Search our knowledge base..." |
| `backgroundImage`   | string | Hero background image path       | "/assets/kb-hero-bg.jpg"       |
| `searchPlaceholder` | string | Search input placeholder         | "Search for articles..."       |

**Visual Example:**

The hero displays as: **"How Can We [Help You](#)?"** where "Help You" is in your brand color.

### Popular Articles

Showcase top articles on the main page:

```typescript theme={null}
popularArticles: {
  enabled: true,
  title: "Popular Articles",
  subtitle: "Most viewed articles this month",
  count: 3  // Number of articles to display
}
```

**Options:**

| Field      | Type    | Description                | Default            |
| ---------- | ------- | -------------------------- | ------------------ |
| `enabled`  | boolean | Show/hide popular section  | `true`             |
| `title`    | string  | Section heading            | "Popular Articles" |
| `subtitle` | string  | Section description        | "Most viewed..."   |
| `count`    | number  | Number of articles to show | `3`                |

<Info>Popular articles are taken from the first N articles in your `articles` array. Manually reorder articles in `config/knowledgebase/index.ts` to control which appear.</Info>

### Categories Section

Control category filter buttons:

```typescript theme={null}
categories: {
  enabled: true  // Set to false to hide categories
}
```

**Options:**

| Field     | Type    | Description                |
| --------- | ------- | -------------------------- |
| `enabled` | boolean | Show/hide category filters |

<Warning>When categories are disabled, users can only browse all articles or use search. Consider keeping this enabled for better UX.</Warning>

### Articles Section

Configure article listings and empty states:

```typescript theme={null}
articles: {
  titleAllArticles: "All Articles",
  titleSearchResults: "Search Results",
  showingResultsText: "Showing {count} results for",
  noArticlesTitle: "No articles found",
  noArticlesDescription: "We couldn't find any articles matching your search.",
  noArticlesCategoryDescription: "No articles in this category yet. Check back soon!",
  viewAllButton: "View All Articles"
}
```

**Options:**

| Field                           | Type   | Description                     |
| ------------------------------- | ------ | ------------------------------- |
| `titleAllArticles`              | string | Title when viewing all articles |
| `titleSearchResults`            | string | Title when searching            |
| `showingResultsText`            | string | Search results count text       |
| `noArticlesTitle`               | string | Empty state heading             |
| `noArticlesDescription`         | string | Empty state for search          |
| `noArticlesCategoryDescription` | string | Empty state for categories      |
| `viewAllButton`                 | string | Button text to clear filters    |

### Help CTA Section

Bottom call-to-action for support:

```typescript theme={null}
helpCta: {
  enabled: true,
  title: "Still need help?",
  description: "Can't find what you're looking for? Our support team is here to help.",
  buttons: [
    {
      text: "Contact Support",
      href: "/contact",
      primary: true  // Uses brand color
    },
    {
      text: "Join Discord",
      href: "https://discord.gg/latch",
      primary: false  // Secondary style
    }
  ]
}
```

**Options:**

| Field         | Type    | Description             |
| ------------- | ------- | ----------------------- |
| `enabled`     | boolean | Show/hide help CTA      |
| `title`       | string  | CTA heading             |
| `description` | string  | CTA description         |
| `buttons`     | array   | Array of button objects |

**Button Object:**

| Field     | Type    | Description                                 |
| --------- | ------- | ------------------------------------------- |
| `text`    | string  | Button label                                |
| `href`    | string  | Link URL                                    |
| `primary` | boolean | `true` = brand colored, `false` = secondary |

<Note>Primary buttons use your brand color. Non-primary buttons have a secondary gray style. External links (Discord, etc.) automatically open in new tabs.</Note>

### Complete Configuration Example

```typescript theme={null}
export const knowledgebasePageConfig = {
  hero: {
    title: "How Can We",
    highlight: "Help You",
    subtitle: "Search our knowledge base for guides, tutorials, and solutions to common questions.",
    backgroundImage: "/assets/kb-hero-bg.jpg",
    searchPlaceholder: "Search for articles..."
  },
  popularArticles: {
    enabled: true,
    title: "Popular Articles",
    subtitle: "Most viewed articles this month",
    count: 3
  },
  articles: {
    titleAllArticles: "All Articles",
    titleSearchResults: "Search Results",
    showingResultsText: "Showing {count} results for",
    noArticlesTitle: "No articles found",
    noArticlesDescription: "We couldn't find any articles matching your search.",
    noArticlesCategoryDescription: "No articles in this category yet. Check back soon!",
    viewAllButton: "View All Articles"
  },
  categories: {
    enabled: true
  },
  helpCta: {
    enabled: true,
    title: "Still need help?",
    description: "Can't find what you're looking for? Our support team is here to help.",
    buttons: [
      {
        text: "Contact Support",
        href: "/contact",
        primary: true
      },
      {
        text: "Join Discord",
        href: "https://discord.gg/latch",
        primary: false
      }
    ]
  }
};
```

## Styling & Theming

The knowledge base automatically uses your brand color from `config/branding.ts`.

### Automatic Brand Color Integration

All interactive elements automatically adapt to your brand color:

* Search bar focus state
* Category filter buttons (when selected)
* Popular article cards borders and backgrounds
* Call-to-action buttons (primary)
* Article category badges
* Link hover states

**Example:**

```typescript theme={null}
// config/branding.ts
export const brandConfig = {
  name: "YourHost",
  color: "#a855f7"  // Purple - this applies everywhere
};
```

<Check>No additional styling configuration needed! Change your brand color once and the entire knowledge base updates automatically.</Check>

### Content Block Styling

All content blocks have consistent spacing:

| Block Type  | Vertical Spacing          | Padding          |
| ----------- | ------------------------- | ---------------- |
| Paragraphs  | `24px` bottom margin      | None             |
| Headings    | `32px` top, `16px` bottom | None             |
| Lists       | `24px` bottom margin      | None             |
| Code Blocks | `24px` top & bottom       | `16px` all sides |
| Images      | `24px` top & bottom       | None             |
| YouTube     | `24px` top & bottom       | None             |
| Alerts      | `24px` top & bottom       | `20px` all sides |

### Responsive Design

The knowledge base is fully responsive:

**Mobile (\< 640px):**

* Single column article grid
* Horizontal scrolling categories
* Reduced text sizes
* Touch-optimized buttons

**Tablet (640px - 1024px):**

* 2-column article grid
* All features visible
* Medium text sizes

**Desktop (> 1024px):**

* 3-column article grid
* Full feature set
* Large text sizes

## SEO Optimization

### Per-Article SEO

Each article automatically generates:

```typescript theme={null}
// Automatically generated from article metadata
<title>{article.title} | Your Brand Knowledge Base</title>
<meta name="description" content="{article.description}" />
<meta name="keywords" content="{article.tags.join(', ')}" />
<meta property="og:title" content="{article.title}" />
<meta property="og:description" content="{article.description}" />
<meta property="og:type" content="article" />
<meta property="article:author" content="{article.author}" />
<meta property="article:published_time" content="{article.date}" />
```

### Best SEO Practices

1. **Title Optimization:**
   * Keep under 60 characters
   * Include target keyword
   * Be descriptive and unique
   * Example: "How to Setup Minecraft Server in 5 Minutes"

2. **Description Optimization:**
   * 120-160 characters
   * Include main keyword
   * Compelling summary
   * Example: "Step-by-step guide to setting up your Minecraft server with automatic backups and DDoS protection in under 5 minutes."

3. **Tag Strategy:**
   * 3-7 tags per article
   * Mix of specific and general
   * Use lowercase
   * Example: `["minecraft", "setup", "beginner", "tutorial", "java-edition"]`

4. **Content Structure:**
   * Use proper heading hierarchy (H1 → H2 → H3)
   * Include alt text for all images
   * Add captions to images and videos
   * Break up long paragraphs

5. **Internal Linking:**
   * Link to related articles in content
   * Use descriptive anchor text
   * Example: "Learn about [server backups](/knowledgebase/automatic-backups)"

## Search Functionality

### How Search Works

The built-in search indexes:

* Article titles (highest weight)
* Article descriptions (medium weight)
* Article tags (medium weight)
* Category names (low weight)

**Search features:**

* Real-time results as you type
* Case-insensitive matching
* Partial word matching
* Can combine with category filters

### Search Algorithm

```typescript theme={null}
// Priority order:
1. Title exact match (100 points)
2. Title partial match (75 points)
3. Description match (50 points)
4. Tag match (40 points)
5. Category match (25 points)
```

Articles are ranked by total points and displayed in order.

## Best Practices

### Article Writing

<AccordionGroup>
  <Accordion title="Use Clear, Action-Oriented Titles">
    **Good:**

    * "How to Setup a Minecraft Server"
    * "Fixing Connection Timeout Errors"
    * "Understanding Server Resource Usage"

    **Bad:**

    * "Minecraft"
    * "Problems"
    * "Resources"
  </Accordion>

  <Accordion title="Start with Context">
    Begin every article with:

    1. What the article covers
    2. Who it's for (beginner/advanced)
    3. Estimated time to complete
    4. Any prerequisites

    ```typescript theme={null}
    {
      type: "paragraph",
      content: "This guide will show you how to install plugins on your Minecraft server. Perfect for server admins with basic experience. Takes about 10 minutes."
    },
    {
      type: "alert",
      variant: "info",
      content: "Prerequisites: You need FTP access and a running Minecraft server."
    }
    ```
  </Accordion>

  <Accordion title="Use Visual Aids">
    * Add screenshots for complex steps
    * Use alert boxes to highlight warnings
    * Include code blocks with examples
    * Embed tutorial videos when available

    **Rule of thumb:** One image or code block per 200-300 words.
  </Accordion>

  <Accordion title="Test Your Instructions">
    Before publishing:

    1. Follow your own instructions
    2. Have a beginner test them
    3. Note any confusing steps
    4. Add clarifications

    Common issues:

    * Assuming knowledge (explain acronyms)
    * Skipping "obvious" steps
    * Not mentioning where to find things
    * Missing error handling instructions
  </Accordion>

  <Accordion title="Keep Content Updated">
    * Add "Last updated" in article metadata
    * Review articles quarterly
    * Update screenshots when UI changes
    * Archive outdated articles (don't delete)

    ```typescript theme={null}
    // Add to article metadata
    lastUpdated: "2026-02-06",  // Optional field
    ```
  </Accordion>
</AccordionGroup>

### Content Organization

**Article Structure Template:**

```typescript theme={null}
content: [
  // 1. Introduction
  { type: "heading", level: 1, content: "Main Title" },
  { type: "paragraph", content: "Brief overview..." },
  { type: "alert", variant: "info", content: "Who this is for..." },
  
  // 2. Prerequisites (if any)
  { type: "heading", level: 2, content: "Before You Start" },
  { type: "list", items: ["Requirement 1", "Requirement 2"] },
  
  // 3. Main Content
  { type: "heading", level: 2, content: "Step 1: First Action" },
  { type: "paragraph", content: "Explanation..." },
  { type: "image", src: "...", alt: "..." },
  
  { type: "heading", level: 2, content: "Step 2: Second Action" },
  { type: "paragraph", content: "Explanation..." },
  { type: "code", language: "bash", code: "..." },
  
  // 4. Troubleshooting
  { type: "heading", level: 2, content: "Common Issues" },
  { type: "heading", level: 3, content: "Problem: Error X" },
  { type: "paragraph", content: "Solution..." },
  
  // 5. Next Steps
  { type: "heading", level: 2, content: "What's Next?" },
  { type: "paragraph", content: "Links to related articles..." },
]
```

### Performance Tips

1. **Optimize Images:**
   * Use WebP format when possible
   * Compress before uploading (target under 200KB)
   * Use appropriate dimensions (max 1200px width)
   * Lazy loading is automatic

2. **Limit Article Count:**
   * Start with 10-15 quality articles
   * Add more based on actual customer questions
   * Don't create articles "just because"

3. **Code Block Length:**
   * Keep under 50 lines
   * For longer code, link to external repo
   * Use comments to explain complex parts

4. **Video Embedding:**
   * YouTube embeds are lightweight
   * Prefer embedding over hosting
   * Keep videos under 10 minutes
   * Add timestamps in caption

## Troubleshooting

<AccordionGroup>
  <Accordion title="Article Not Appearing">
    **Check:**

    1. Article is exported correctly: `export const article = {...}`
    2. Article is imported in `index.ts`
    3. Article is added to `articles` array
    4. File has `.ts` extension
    5. No TypeScript errors (`npm run build`)

    ```bash theme={null}
    # Test the build
    npm run build

    # Check for your article slug
    # Should show: /knowledgebase/your-article-slug
    ```
  </Accordion>

  <Accordion title="Images Not Loading">
    **Solutions:**

    1. Verify image path starts with `/`
    2. Check file exists in `public/` folder
    3. Image names are case-sensitive
    4. Try clearing Next.js cache:

    ```bash theme={null}
    rm -rf .next
    npm run dev
    ```
  </Accordion>

  <Accordion title="Search Not Finding Article">
    **Reasons:**

    1. Article title/description too different from search term
    2. Missing relevant tags
    3. Category filter active

    **Fix:** Add more descriptive tags and improve title/description.
  </Accordion>

  <Accordion title="Code Block Not Highlighting">
    **Check:**

    1. Language is supported (see Content Blocks section)
    2. Language name is lowercase
    3. Code is properly escaped in TypeScript string

    ```typescript theme={null}
    // Good
    code: `const x = 1;`

    // Bad - will break
    code: "const x = `template`;"  // Quotes inside string
    ```
  </Accordion>

  <Accordion title="Styling Looks Wrong">
    **Common causes:**

    1. Brand color not set in `config/branding.ts`
    2. CSS cache issue - hard refresh (Ctrl+Shift+R)
    3. Custom CSS conflicting

    **Solution:**

    ```bash theme={null}
    # Clear Next.js cache
    rm -rf .next
    npm run dev
    ```
  </Accordion>
</AccordionGroup>

## Advanced Features

### Custom List Block with Links

While lists support **bold** text, you can also include article links:

```typescript theme={null}
{
  type: "list",
  items: [
    "First complete the **[server setup guide](/knowledgebase/setup-guide)**",
    "Then configure **[automatic backups](/knowledgebase/backups)**",
    "Finally, enable **[DDoS protection](/knowledgebase/ddos)**"
  ]
}
```

### Multi-Language Support

<Warning>Multi-language support is not built-in. Consider these approaches:</Warning>

**Option 1: Separate Article Files**

```typescript theme={null}
// articles/how-to-setup-en.ts
export const article = {
  slug: "how-to-setup",
  title: "How to Setup",
  // English content
};

// articles/how-to-setup-es.ts
export const article = {
  slug: "como-configurar",
  title: "Cómo Configurar",
  // Spanish content
};
```

**Option 2: Use External Service**

* Integrate with i18n library
* Use Crowdin/Lokalise for translations
* Requires custom code modifications

### Analytics Integration

Track knowledge base usage:

```typescript theme={null}
// Add to ArticleClient.tsx
useEffect(() => {
  // Google Analytics
  gtag('event', 'article_view', {
    article_slug: article.slug,
    article_category: article.category
  });
  
  // Or your analytics tool
  analytics.track('Article Viewed', {
    slug: article.slug,
    title: article.title
  });
}, [article]);
```

### Custom Content Blocks

Want a custom block type? Extend the system:

<Steps>
  <Step title="Add to Type Definition">
    Edit `config/knowledgebase/types.ts`:

    ```typescript theme={null}
    export type ContentBlock = 
      | ParagraphBlock
      | HeadingBlock
      // ... existing types
      | CustomBlock;  // Add your type

    interface CustomBlock {
      type: "custom";
      // Your custom properties
      data: string;
    }
    ```
  </Step>

  <Step title="Create Renderer Component">
    Edit `components/knowledgebase/ContentRenderer.tsx`:

    ```typescript theme={null}
    function BlockRenderer({ block }: { block: ContentBlock }) {
      switch (block.type) {
        // ... existing cases
        case "custom":
          return <CustomBlock data={block.data} />;
      }
    }

    function CustomBlock({ data }: { data: string }) {
      return (
        <div className="my-6">
          {/* Your custom rendering */}
        </div>
      );
    }
    ```
  </Step>

  <Step title="Use in Articles">
    ```typescript theme={null}
    content: [
      {
        type: "custom",
        data: "Your custom data"
      }
    ]
    ```
  </Step>
</Steps>

## Quick Reference

### File Locations

```
Latch/
├── app/
│   └── knowledgebase/
│       ├── page.tsx                    # Main listing page
│       └── [slug]/
│           ├── page.tsx                # Article page wrapper
│           └── ArticleClient.tsx       # Article display logic
├── components/
│   └── knowledgebase/
│       └── ContentRenderer.tsx         # Content block rendering
├── config/
│   ├── knowledgebase/
│   │   ├── index.ts                    # Articles & categories export
│   │   ├── types.ts                    # TypeScript types
│   │   └── articles/
│   │       ├── _TEMPLATE.ts            # Article template
│   │       └── *.ts                    # Your articles
│   └── pages/
│       └── knowledgebase.ts            # Page configuration
└── public/
    └── images/
        └── kb/                          # Knowledge base images
```

### Common Commands

```bash theme={null}
# Create new article from template
cp config/knowledgebase/articles/_TEMPLATE.ts config/knowledgebase/articles/my-article.ts

# Build and check for errors
npm run build

# Start development server
npm run dev

# Clear cache if styling issues
rm -rf .next && npm run dev
```

### TypeScript Types

```typescript theme={null}
// Article structure
interface KnowledgebaseArticle {
  slug: string;
  title: string;
  description: string;
  category: string;
  author: string;
  date: string;
  readTime: number;
  tags: string[];
  content: ContentBlock[];
}

// Category structure
interface KnowledgebaseCategory {
  id: string;
  name: string;
  icon: string;
  description: string;
}

// Content blocks (union type)
type ContentBlock = 
  | ParagraphBlock 
  | HeadingBlock 
  | ListBlock 
  | CodeBlock 
  | ImageBlock 
  | YouTubeBlock 
  | AlertBlock;
```

***

<Card title="Need Help?" icon="question" href="../help/faq">
  Check out the FAQ or join our Discord community for support!
</Card>