Skip to main content

​
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

1

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
2

Fill in Details

Open your new file and update the metadata:
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
  ]
};
3

Add Content Blocks

Write your article using content blocks (detailed below):
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...
]
4

Register your Article

Open config/knowledgebase/index.ts and add:
// 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
];
5

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

​
Content Blocks Reference

​
Paragraph

Regular text with optional bold formatting: 
{
  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: 
// 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: 
{
  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: 
{
  type: "code",
  language: "bash",
  code: `cd /var/minecraft
./start.sh`,
  filename: "terminal"
}

​
Images

Add images with captions: 
{
  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 TinyPNG
    • Target: Under 200KB per image
  5. Alt text: Describe the image for accessibility
Example structure: 
public/
  images/
    kb/
      minecraft-setup-step1.png
      minecraft-setup-step2.png
      fivem-config-example.jpg

​
YouTube Videos

Embed YouTube videos: 
{
  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: 
// 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 IDDisplay NameIconUse For
getting-startedGetting StartedRocketOnboarding, first steps
game-serversGame ServersGamepadGame-specific tutorials
billingBilling & AccountCredit CardPayments, account management
technicalTechnicalCodeAdvanced configurations
securitySecurityShieldSecurity, DDoS, backups
troubleshootingTroubleshootingWrenchFixing issues
Add a category: Edit config/knowledgebase/index.ts: 
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"
  }
];