Debug bar

As of Lume 3, while the development server is running, you can see a toolbar at the bottom of the page with useful info generated by Lume and its plugins.

The debug bar is enabled by default during development and will not appear on your published site.

If you wish to disable this feature completely, you can do so by editing the _config.ts file:

const site = lume({
  server: {
    debugBar: false, // disable the debug bar
  },
});

The debug bar uses a web component to render (see the code here). To use a different web component, just include the URL to the javascript file:

const site = lume({
  server: {
    debugBar: "https://example.com/my-debug-bar.js", // custom debug bar
  },
});

Create custom tabs

The Lume debug bar can be extended easily by plugins or directly in the _config.ts. For example, let's create a simple tab to list all pages without title:

// Create the tab before save the site
site.addEventListener("beforeSave", () => {
  // Create a collection in the debug bar
  const collection = site.debugBar?.collection("Pages without title");

  // If the debug bar is enabled, the collection was created
  if (collection) {
    collection.icon = "file";

    // Add items to the collection
    collection.items = site.pages
      .filter((page) => page.outputPath.endsWith(".html")) // Only HTML pages
      .filter((page) => !page.data.title) // No title
      .map((page) => ({
        title: page.data.url,
        actions: [
          {
            text: "Visit",
            href: page.data.url,
          },
        ],
      }));
  }
});

That's it! Our custom tab is now part of the Lume debug bar.