Documentation 18 min read

Content Hub Documentation

Published: April 21, 2025 Last Updated: April 29, 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 File Management, 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 view tracking is 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 using ApexCharts.
  • Update Notification: If a newer version of the Content Hub is available (checked via GitHub commit messages), 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 with pagination.
  • 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. Default settings (like view tracking) are applied based on System Settings.

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. Passwords are securely hashed.
    • 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.
    • Use Full Width Content: Toggles whether the public view pages for this project use a full-width layout by default.
  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, footers, preview links, and view tracking data.

  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. The deletion process happens in the background and may take a moment for projects with many entries.

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:
    • Total Entries (Docs, CL, KB)
    • Total Views (Docs & CL, if enabled)
    • Average View Time (Docs & CL, if enabled)
    • Helpful/Not Helpful Feedback Counts
  • 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.
  • Feedback Chart: A donut chart showing the distribution of "Helpful" vs. "Not Helpful" votes for entries in this project.
  • Header Actions:
    • View Public Page/Roadmap/KB: Links to the public views (if applicable and enabled). The "View Public Page" link goes to the first entry in the sidebar order.
    • 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. Tracks views, time, and feedback.
  • Changelog: Entries typically used for release notes or update logs. Supports custom headers/footers. Can be shown in the sidebar. Tracks views, time, and feedback.
  • 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. Does not track views/time/feedback.
  • Knowledge Base: Question/Answer pairs displayed in an accordion-style public view. Uses Markdown for the answer. Cannot be shown in the main sidebar. Does not track views/time/feedback.
  • Sidebar Header: A special entry type used only for creating section headers within the public project sidebar. Managed via the "Sidebar Order" page. Not publicly viewable on its own.

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, Helpful Yes/No) to sort the table.
  • Pagination: Use the controls below the table to navigate through pages of entries.
  • Actions (per entry):
    • (Publish Staged): Appears for published entries with staged changes. Click to open a confirmation modal to publish the changes live.
    • (View Diff): Appears for published entries with staged changes. Opens a page showing the differences between the published and staged content.
    • (Preview Staged): Appears for published entries with staged changes. Opens the staged version in a preview mode (similar to public view but marked as preview).
    • (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). Sidebar Headers cannot be archived and will be deleted instead.
    • (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, not for Roadmap/KB): A category name (e.g., "API", "User Guides"). Used for filtering.
  8. Enter Tags (Optional, not for Roadmap): Comma-separated keywords. Used for filtering and display.
  9. URL (Optional ID): By default, a random ID is generated. You can optionally provide a specific 15-character alphanumeric ID here before creating the entry. Use with caution, must be unique across all entries. The prefix shows the base public URL. Check availability using the button.
  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). Use Ctrl+S / Cmd+S as a shortcut.

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.
  • Actions for Staged Entries:
    • (Publish Staged): Makes the staged changes live, overwriting the previous published version.
    • (View Diff): Shows a side-by-side comparison of the published and staged Markdown content.
    • (Preview Staged): Opens a preview of how the staged version will look on the public page.
  • If you change the status of a published entry back to "Draft", any staged changes are discarded.

Preview Links

  • When editing a Draft entry or a Published entry with Staged Changes, a "Share Preview" button appears in the header actions.
  • Clicking this button allows you to generate a temporary, shareable link to preview the current state (draft or staged version).
  • 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. Preview links are automatically cleaned up when the entry is deleted or archived, or when they expire.

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. View tracking data is preserved but not actively collected.
  • Note: Sidebar Headers cannot be archived; attempting to archive them will result in deletion.

Viewing Archived Entries

  • Navigate to the main list for a specific entry type (e.g., Documentation).
  • Click the "View Archived" button usually found near the "Create New" button.
  • This page lists archived entries of that type for the current project.
  • Actions:
    • (Unarchive): Moves the entry back to the main list as a Draft (requires confirmation).
    • (Delete Permanently): Permanently deletes the archived entry (requires confirmation).

Deleting Entries

Warning: Deleting an entry (from the main list or the archived list) is permanent and cannot be undone. Associated view tracking data is also cleared.

  • From the Entry List or Archived 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 (e.g., trying to archive an already archived item implicitly via selection).

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 on the public view page.

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 ("Checking...", "X issues found", "No issues found", "Error").
  • Note: Editing the text after a check will clear the highlights.

Previous/Next Buttons Block

  • Click the nav buttons icon () in the toolbar.
  • This inserts a special code block:
    prev: [Previous Text](/previous-url)
next: [Next Text](/next-url)
  • Edit the text and URLs within the block.
  • On the public view page, this block will be rendered as styled "Previous" and "Next" navigation buttons at the bottom of the content.

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

Downloading Markdown

  • Click the download icon () in the toolbar.
  • This will download the current content of the editor as a .md file. The filename is based on the entry's title.

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 (e.g., "Doc Headers", "CL Footers").
  • Create, edit, or delete reusable HTML headers and footers. These are specific to either Documentation or Changelog entries within the current project.
  • Features:
    • Content: Use the editor (in HTML mode) to add your header/footer content.
    • Apply Full Width: Check this if the header/footer content should span the full page width, ignoring the standard content container width.
    • Is Sticky (Headers Only): Check this to make the header stick to the top of the viewport when scrolling.
    • Custom CSS: Add CSS rules specific to this header/footer. These rules will be injected into the page.
    • Custom JS: Add JavaScript code specific to this header/footer. This code will be executed when the page loads.
  • Headers/Footers 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, CSS, and JS are injected directly. Ensure they are valid and safe. Malicious code could affect users viewing the public pages.

8. Organizing Content

Sidebar Order (Per-Project)

  • Access via Project Dashboard > Sidebar Order link OR /projects/:projectId/sidebar-order.
  • Lists entries (Docs/Changelogs) marked "Show in Project Sidebar?" and any created "Sidebar Headers".
  • Reordering: Drag and drop list items using the handle () to change their order in the public sidebar.
  • Adding Headers: Click "Add Sidebar Header", enter a title, and confirm. The header appears at the bottom of the list; drag it to the desired position.
  • Editing Headers: Click the pencil icon () next to a header to change its title.
  • Deleting Headers: Click the trash icon () next to a header to remove it (requires confirmation).
  • Click "Save Order" to apply the changes to the public project sidebar.

Collections

  • An optional text field available when creating/editing entries (except Roadmap/KB/Sidebar Header).
  • 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, excluding Sidebar Headers) 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, settings changes, etc.).
  • Shows timestamp, user (if applicable), action type, target (collection/record ID), details (click to view JSON), and IP address.
  • Refresh: Reloads the log data.
  • Export CSV: Download all logs as a CSV file.
  • Clear All Logs: Permanently delete all audit log entries (requires confirmation).

File Management

  • Access via Sidebar > Files.
  • Lists all files uploaded via the Markdown editor across all your projects.
  • Shows filename, associated entry title, project name, and upload date.
  • Size Calculation (Optional): If enabled in System Settings, displays file sizes and total usage. Note: This can be slow if you have many files, as it requires checking each file's size.
  • Actions:
    • Click filename to view/download the file.
    • Click entry title to go to the entry's edit page.
    • Click project name to go to the project dashboard.
    • Click trash icon () to delete the file from its entry (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.
    • Default: Enable Full Width Content: Default setting for new projects.
    • Enable File Size Calculation: Toggle size calculation on the Files page.
    • Bot User Agents: Define user agent strings (one per line, case-insensitive) to exclude from view tracking.
  • Click "Save Settings" to apply changes. Changes take effect immediately or upon the next relevant action (e.g., new project creation).

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. Public pages also respect this preference if the user has visited the admin area.

10. Public Views

The application automatically generates public-facing pages for your content, respecting project visibility and password settings.

  • /view/:entryId: Displays a single published Documentation or Changelog entry.
    • Includes custom headers/footers if assigned.
    • Sidebar shows other entries and headers from the same project based on the "Sidebar Order" configuration.
    • Includes Table of Contents generated from H2/H3/H4 headings.
    • Code blocks have copy buttons.
    • Headings are clickable links for easy sharing.
    • Includes "Was this helpful?" feedback buttons (if view tracking is enabled for the project).
  • /roadmap/:projectId: Displays a Kanban-style board for the project's published Roadmap items, grouped by stage.
  • /kb/:projectId: Displays a searchable accordion view for the project's published Knowledge Base entries. Users can filter by tags or search questions.
  • /preview/:token: Displays a draft or staged entry using a temporary, secure token. Looks identical to the public view but is marked as a preview and doesn't track views/feedback. May require a password if set during generation.

11. Technical Notes

  • Authentication: Relies on PocketBase's user authentication. Ensure your PocketBase instance is properly secured.
  • Authorization: Access control is primarily based on the owner field in projects, entries, templates, etc. Users can only manage content they own within projects they own. Public access is controlled by project settings.
  • Database: Uses PocketBase for main data and SQLite files (db/sessions.db, db/view_tracking.db) for session storage and view tracking. Back up your PocketBase data directory and these .db files regularly.
  • Error Handling: Check the application logs (console output) for detailed error messages. LOG_LEVEL in .env controls verbosity.
  • Dependencies: Key dependencies include Express, EJS, PocketBase SDK, Marked, EasyMDE, ApexCharts, SortableJS, DOMPurify, Mermaid, connect-sqlite3, sqlite3.