Documentation 13 min read

Content Hub Documentation

content hub

Published: April 22, 2025

1. Getting Started

Logging In

  • Navigate to the application's URL (e.g., http://localhost:3000).
  • You will be presented with a login screen.
  • Enter the email and password associated with your non-admin PocketBase user account.
  • Click "Login".

Interface Overview

The admin interface consists of:

  • Sidebar: Provides primary navigation between the Global Dashboard, Projects list, and project-specific sections (when a project is active). Also includes links to Documentation, Global Log (if enabled), Settings, and Logout. The theme toggle is at the bottom.
  • Top Bar: Displays context-specific navigation (e.g., different entry types within a project), the Global Search bar (if enabled), and a mobile navigation toggle.
  • Main Content Area: Displays the primary content for the selected section (dashboards, tables, forms).
  • Footer: Shows copyright information and the application version.

2. Global Dashboard

Accessed by clicking "Dashboard" in the sidebar or navigating to /.

  • Overview: Displays key metrics across all projects you own:
    • Total Projects
    • Total Documentation & Changelog Entries
    • Published/Draft/Staged Counts (Docs & CL)
    • Total Views (Docs & CL, if enabled)
    • Entry Counts by Type (Docs, Changelogs)
  • Recently Updated Projects: A quick list of your most recently modified projects.
  • Top Viewed Entries: Lists your most viewed Documentation and Changelog entries (if view tracking is enabled).
  • Activity Chart: Visualizes entry creation activity over the last 30 days.
  • Update Notification: If a newer version of the Content Hub is available, a notification will appear.

3. Managing Projects

Viewing Projects

  • Click "Projects" in the sidebar or navigate to /projects.
  • This page lists all projects you own.
  • Search: Use the search bar at the top right to filter projects by name or description.
  • Sorting: Click column headers (Project Name, Last Updated) to sort the list.
  • Actions:
    • Click a project name to go to its Project Dashboard.
    • Click the dashboard icon () to go to the Project Dashboard.
    • Click the settings icon () to edit the project's settings.
    • Click the trash icon () to delete the project (requires confirmation).

Creating a New Project

  1. Go to the Projects list (/projects).
  2. Click the "Create New Project" button.
  3. Enter a Project Name (required).
  4. Optionally, enter a Description.
  5. Click "Create Project". You will be redirected to the new project's Documentation entry list.

Editing Project Settings

  1. Navigate to the specific Project Dashboard (/projects/:projectId).
  2. Click the "Settings" button in the header actions OR click the settings icon () from the main Projects list.
  3. Modify the following settings:
    • Project Name: The display name of the project.
    • Description: An optional description.
    • Enable Public View: Toggles whether the project's content (/view/:id, /roadmap/:projectId, /kb/:projectId) is accessible publicly.
    • Require Password for Public View: (Only effective if Public View is enabled) If checked, visitors need a password to access public pages.
    • Project Access Password: Set or change the password required for public access (only appears if "Require Password" is checked). Leave blank to keep the current password.
    • Enable Public Roadmap: Toggles the visibility of the /roadmap/:projectId page (subject to Public View and Password settings).
    • Enable View Tracking: Toggles whether page views are counted for Docs & Changelogs.
    • Enable View Time Tracking: (Only effective if View Tracking is enabled) Toggles whether approximate time spent on Docs & Changelogs is tracked.
  4. Click "Save Changes".

Deleting a Project

Warning: Deleting a project is irreversible and permanently removes the project and ALL associated content, including entries (active and archived), templates, headers, and footers.

  1. Go to the Projects list (/projects).
  2. Find the project you want to delete.
  3. Click the trash icon ().
  4. A confirmation modal will appear. Read the warning carefully.
  5. Click "Delete Project" to confirm.

4. Project Dashboard

Accessed by clicking a project name or the dashboard icon () from the Projects list, or "Project Overview" from the project's sidebar section.

  • Overview: Displays metrics specific to the current project (similar to the Global Dashboard but scoped). Includes average view time if enabled.
  • Recently Updated: Lists the most recently modified entries within this project.
  • Activity Chart: Visualizes entry creation activity for this project over the last 30 days.
  • Header Actions:
    • View Public Page/Roadmap/KB: Links to the public views (if applicable and enabled).
    • Settings: Navigates to the Project Settings page.
    • Create New Entry: Navigates to the form for creating a new entry in this project.

5. Working with Entries

Entry Types

  • Documentation: Standard articles, guides, or documentation pages. Supports custom headers/footers. Can be shown in the sidebar.
  • Changelog: Entries typically used for release notes or update logs. Supports custom headers/footers. Can be shown in the sidebar.
  • Roadmap: Items representing features or tasks, displayed on a public Kanban-style board. Does not use the Markdown editor directly but has Title, Stage, and Tags. Cannot be shown in the main sidebar.
  • Knowledge Base: Question/Answer pairs displayed in an accordion-style public view. Uses Markdown for the answer. Cannot be shown in the main sidebar.

Viewing Entry Lists

  • Navigate to a project dashboard.
  • Use the Top Bar navigation (Documentation, Changelog, Roadmap, Knowledge Base links) or the Sidebar links under the project name to access the list view for each entry type.
  • Filtering: Use the "Filter by Collection" dropdown (if applicable) to show entries only from a specific collection.
  • Searching: Use the search input to filter entries by Title, Collection, or Tags within the current list.
  • Sorting: Click column headers (Title, Status, Collection, Views, Avg. Time, Updated, Stage) to sort the table.
  • Actions (per entry):
    • (Publish Staged): Appears for published entries with staged changes. Click to open a confirmation modal to publish the changes live.
    • (View Public): Opens the public view page in a new tab (for published Docs/Changelogs).
    • (View Public Roadmap): Opens the public roadmap board in a new tab (for Roadmap items).
    • (Edit): Opens the entry editing page.
    • (Archive): Moves the entry to the archive (requires confirmation).
    • (Delete): Permanently deletes the entry (requires confirmation).

Creating New Entries

  1. Navigate to the desired Project Dashboard or an Entry List page for that project.
  2. Click the "Create New Entry" button (or "Create New Doc Entry", etc.).
  3. Use Template (Optional): Select a pre-defined template from the dropdown to populate the content area. Warning: This will replace any existing content in the editor.
  4. Select the Type (Documentation, Changelog, Roadmap, KB). The form will adjust based on the type.
  5. Enter a Title (required). For KB, this is the Question.
  6. Select the initial Status (Draft or Published).
  7. Enter Collection (Optional): A category name (e.g., "API", "User Guides").
  8. Enter Tags (Optional, for Docs/Changelogs/KB): Comma-separated keywords.
  9. URL (Optional ID): By default, a random ID is generated. You can optionally provide a specific 15-character ID here before creating the entry. Use with caution, must be unique. The prefix shows the base public URL.
  10. Custom Headers/Footers (Optional, for Docs/Changelogs): Select pre-defined headers or footers to apply to this specific entry's public view page.
  11. Roadmap Stage (Required for Roadmap): Select the current stage (Planned, Next Up, etc.).
  12. Show in Project Sidebar? (Docs/Changelogs): Choose whether this entry should appear in the public project sidebar navigation.
  13. Content/Answer (Required, except Roadmap): Use the Markdown editor to write the main content (or Answer for KB). See Using the Markdown Editor.
  14. Click "Create Entry".

Editing Entries

  1. Navigate to the appropriate Entry List for the project.
  2. Find the entry you want to edit and click the pencil icon ().
  3. Modify the fields as needed. Note that some fields (like URL, Collection, Status for published+staged entries) might be read-only depending on the entry's state.
  4. Use the Markdown editor for content changes.
  5. Click "Update Entry" (for drafts) or "Save Staged Changes" (for published entries).

Staging Changes

  • When you edit an entry that is already Published, your changes are staged by default when you save.
  • This means the live public view (/view/:id) remains unchanged.
  • The entry list will show a "Staged" badge next to the "Published" status.
  • To make your staged changes live, go back to the entry list and click the "Publish Staged Changes" button () for that entry and confirm. This overwrites the live content.
  • If you change the status of a published entry back to "Draft", any staged changes are discarded.

Preview Links

  • When editing a Draft entry, a "Share Preview" button appears in the header.
  • Clicking this button allows you to generate a temporary, shareable link to preview the draft.
  • You can optionally require a password for the preview link.
  • The generated link has an expiry time (configurable via environment variable or App Settings).
  • Use these links to get feedback before publishing.

Duplicating Entries

  • When editing any entry, a "Duplicate Entry" button is available in the form actions.
  • Clicking this prompts for confirmation.
  • If confirmed, a new Draft entry is created as a copy of the current state shown in the editor (including any unsaved changes you might have made).
  • The new entry's title will be prefixed with "Copy of ".
  • You will be redirected to the edit page of the newly created duplicate.

Archiving Entries

  • From the Entry List, click the archive icon () for the desired entry.
  • Confirm the action in the modal.
  • The entry is moved from the main list to the corresponding "Archived" list (e.g., Archived Documentation).
  • Archived entries are not publicly visible and are removed from sidebar ordering.

Deleting Entries

Warning: Deleting an entry is permanent and cannot be undone.

  • From the Entry List, click the trash icon () for the desired entry.
  • Confirm the action in the modal (read the warning carefully).
  • The entry is permanently deleted.

Bulk Actions

  • On Entry List pages, use the checkboxes in the first column to select multiple entries. Use the checkbox in the table header to select/deselect all visible entries on the current page.
  • Once one or more entries are selected, the "Bulk Actions" container appears above the table.
  • Click the "Bulk Actions" button to reveal a dropdown menu with available actions:
    • Set Status to Published
    • Set Status to Draft (discards staged changes if applied to published items)
    • Publish Staged Changes (only affects selected published items that have staged changes)
    • Archive Selected
    • Delete Selected (Permanent deletion)
  • Select an action and confirm in the modal. The action will be applied to all selected entries. Partial success/failure messages may appear if some actions fail.

6. Using the Markdown Editor

The editor (EasyMDE) provides a rich text editing experience using Markdown syntax.

Basic Formatting

  • Use the toolbar buttons for common formatting (Bold, Italic, Headings, Lists, Links, Code Blocks, Tables, etc.).
  • Alternatively, use standard Markdown syntax directly in the editor.

Image Uploads

  • Click the image icon in the toolbar or drag-and-drop an image file onto the editor.
  • Supported formats: JPG, PNG, GIF, WEBP.
  • Maximum file size: 10MB (by default).
  • Uploaded images are stored within the PocketBase entry record and served directly. The editor inserts the correct image URL.
  • Theming Images: You can make images specific to light or dark mode by adding #light or #dark to the end of the image URL after it's inserted by the editor (e.g., ![Alt Text](/api/files/.../image.png#dark)). The corresponding image will only display when the user's theme matches.

Diagrams (Mermaid)

  • Embed diagrams using Mermaid syntax within a mermaid code block:
    graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
  • Click the diagram icon () in the toolbar for a template.
  • Supported diagram types depend on the included Mermaid library version (flowchart, sequence, Gantt, class, state, pie, ER, user journey, etc.). Refer to Mermaid documentation for syntax.
  • Diagrams render automatically in the public view and preview pages.

Grammar Check

  • Click the spell check icon () in the toolbar or use Ctrl+Shift+G (or Cmd+Shift+G).
  • This uses the public LanguageTool API to check the editor's content (or selected text) for grammar and style issues.
  • Potential issues are underlined. Hover over them for suggestions.
  • The status bar below the editor provides feedback.
  • Note: Editing the text after a check will clear the highlights.

Saving (Ctrl+S)

  • While editing an entry, template, header, or footer, press Ctrl+S (or Cmd+S on Mac) to trigger the form submission (Save/Update).

7. Managing Reusable Content

Templates (Per-Project)

  • Access via Project Dashboard > Templates link OR /projects/:projectId/templates.
  • Create, edit, or delete Markdown templates specific to the current project.
  • Templates can be selected when creating a new entry to pre-fill the content editor.

Headers & Footers (Per-Project, Per-Type)

  • Access via Top Bar navigation when viewing Documentation or Changelog lists within a project.
  • Create, edit, or delete reusable HTML headers and footers.
  • These can be assigned to individual Documentation or Changelog entries via the edit screen.
  • They appear above (Header) or below (Footer) the main entry content on the public view page.
  • Caution: Content is treated as raw HTML. Ensure it is valid and safe.

8. Organizing Content

Sidebar Order (Per-Project)

  • Access via Project Dashboard > Sidebar Order link OR /projects/:projectId/sidebar-order.
  • Only entries (Docs/Changelogs) marked "Show in Project Sidebar?" appear here.
  • Drag and drop list items to change their order.
  • Click "Save Order" to apply the changes to the public project sidebar.

Collections

  • An optional text field available when creating/editing entries (except Roadmap).
  • Use it to group related entries (e.g., "API Guides", "Version 2 Updates").
  • Entry lists can be filtered by collection using the dropdown menu.

Tags

  • An optional comma-separated text field available when creating/editing Docs, Changelogs, and KB entries.
  • Use it for keywords or specific topics (e.g., "billing", "integration", "bugfix").
  • Tags are displayed on public view pages and can be used for searching.

9. Utility Features

Global Search

  • Available in the top bar if enabled in System Settings.
  • Enter a search term and press Enter or click the search icon.
  • Searches across the Title, Collection, and Tags of all entries (all types) you have access to across all your projects.
  • Results are displayed on a dedicated search results page with pagination.

Global Audit Log

  • Access via Sidebar > Global Log (if enabled in System Settings).
  • Displays a chronological list of actions performed in the system (logins, creates, updates, deletes, etc.).
  • Shows timestamp, user (if applicable), action type, target (collection/record ID), details (if any), and IP address.
  • Export CSV: Download all logs as a CSV file.
  • Clear All Logs: Permanently delete all audit log entries (requires confirmation).

System Settings

  • Access via Sidebar > Settings.
  • Configure application-wide settings:
    • Enable Global Search Bar: Show/hide the top search bar.
    • Enable Audit Logging: Turn audit logging on/off globally.
    • Default: Enable View Tracking: Default setting for new projects.
    • Default: Enable Time Tracking: Default setting for new projects.
  • Click "Save Settings" to apply changes. Note: Some settings might require an application restart to take full effect, although most UI-related ones update immediately.

Theme Switching

  • Click the sun/moon toggle button in the sidebar footer.
  • Switches the admin interface between Light and Dark modes.
  • Your preference is saved locally and sent to the server for persistence across sessions/devices.

10. Public Views

The application automatically generates public-facing pages for your content:

  • /view/:entryId: Displays a single published Documentation or Changelog entry. Includes custom headers/footers if assigned. Sidebar shows other entries from the same project marked for sidebar display. Access depends on Project's Public View and Password settings.
  • /roadmap/:projectId: Displays a Kanban-style board for the project's published Roadmap items. Access depends on Project's Public View, Password, and Roadmap Enabled settings.
  • /kb/:projectId: Displays a searchable accordion view for the project's published Knowledge Base entries. Access depends on Project's Public View and Password settings.
  • /preview/:token: Displays a draft entry using a temporary, secure token. May require a password if set during generation.