Filament Knowledge Base

Filament Knowledge Base is a plugin designed to manage and display product documentation directly within your Filament panels. It allows you to write documentation in Markdown files and automatically registers a dedicated panel where users can browse these files.

Key features include:

• Knowledge base panel: A dedicated panel for hosting all documentation.
• Modal previews: Ability to render Markdown content in customizable modals with an option to navigate to the full documentation page.
• Global search: Built-in search functionality that indexes the title and content of your Markdown files.

The Tables and lists feature in the knowledge base supports the following capabilities:

• Markdown rendering: Full support for rendering markdown content.
• Syntax highlighting: Automatic syntax highlighting for code blocks within lists or tables.
• Modal previews: Ability to preview content within modals.

The relationship between navigation items is determined by the presence of a sibling markdown file named after a directory.

Parent Items

If a directory (e.g., roles/) has a sibling markdown file of the same name (roles.md) that is a regular documentation file, that file becomes a parent item, and the files inside the directory become its children.

Groups

If a directory has a sibling markdown file of the same name that is configured as a group via front matter, it becomes a group in the navigation. A group file contains only front matter.

Example Group Configuration (roles.md):

---
type: group
title: Advanced
icon: heroicon-o-academic-cap
---

The KnowledgeBasePlugin allows you to transform a Filament panel into a dedicated knowledge base. When enabled, the panel automatically renders your markdown files and provides built-in UI components including:

• Sidebar navigation
• Breadcrumbs
• Table of contents

Markdown files are the primary way to populate your knowledge base. They consist of a YAML front matter block for metadata and content for the actual text.

Directory Structure

By default, files are stored in the docs directory. The structure must follow this pattern to support localization and panel separation: docs/{panel-id}/{locale}/{files-or-subdirectories}

Example:

• docs/my-knowledge-base/en/01-getting-started.md (English documentation)
• docs/my-knowledge-base/es/users/01-introduction.md (Spanish documentation in a subfolder)

You can nest files up to three levels deep. The knowledge base navigation will mirror this directory tree structure.

docs/
  <your-panel-id>/
    en/
      01-getting-started.md
      users/
        01-introduction.md

Knowledge Base transforms a Filament panel into a documentation site using Markdown files. It provides a navigable interface including a sidebar, breadcrumbs, a table of contents, and global search.

The system relies on two complementary plugins:

1. KnowledgeBasePlugin: Registered on a dedicated panel to serve as the actual knowledge base site.
2. KnowledgeBaseCompanionPlugin: Registered on your existing application panels to integrate the knowledge base. It adds a help menu to the topbar, documentation previews in modals, and a link to the knowledge base in the sidebar.

The behavior of clicking a help menu item depends on your configuration:

• Default: The user is redirected to the full documentation page within the knowledge base panel.
• With Modal Previews: If modal previews are enabled, the documentation opens in a modal overlay, allowing the user to view the content without leaving their current page.

Fenced code blocks within your knowledge base articles are automatically highlighted using Phiki. This allows you to include syntax-highlighted snippets for various programming languages (e.g., PHP, Bash) directly in your documentation content.

use Guava\
FilamentKnowledgeBase\\Plugins\\KnowledgeBasePlugin;

$panel->plugins([
    KnowledgeBasePlugin::make(),
]);

Each documentation page's metadata is controlled via YAML front matter at the top of the Markdown file. You can define the following keys:

• title: The display title of the page.
• icon: The Heroicon name used for the page (e.g., heroicon-o-rocket-launch).
• order: The numerical position of the page in the navigation sequence.

---
title: Getting started
icon: heroicon-o-rocket-launch
order: 1
---