Knowledgebase

{
  type: "paragraph",
  content: "This is regular text. Use **bold** for emphasis."
}

// 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"
}

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

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

public/
  images/
    kb/
      minecraft-setup-step1.png
      minecraft-setup-step2.png
      fivem-config-example.jpg

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

// 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!"
}

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"
  }
];

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
};

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

categories: {
  enabled: true  // Set to false to hide categories
}

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"
}

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
    }
  ]
}

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
      }
    ]
  }
};

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

// 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}" />

// 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)

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..." },
]

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

// 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
};

// 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]);

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

# 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

// 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;