Skip to content

feat(plugin-docs-cli): align preview with catalog-website layout - #2913

Open
sunker wants to merge 14 commits into
mainfrom
eriksundell/plugin-docs-cli-preview-cw-layout
Open

sunker wants to merge 14 commits into
mainfrom
eriksundell/plugin-docs-cli-preview-cw-layout

Conversation

@sunker

@sunker sunker commented Sep 30, 2026 •

Copy link
Copy Markdown
Contributor

What this PR does / why we need it:

This PR updates the plugin-docs-cli serve preview to follow how multi-page docs look on grafana.com. The first version of the preview server was built before catalog-website could render multi-page docs. Now it can (see Docstest on grafana-dev), so it's time to align the two.

The goal is not a 1:1 copy of catalog-website. That wouldn't make sense, because multi-page docs will render differently in the in-Grafana catalog later on. Instead the preview aligns on layout and on what each page is for. The README renders on the Overview tab, <docsPath>/index.md is the Documentation landing page and other pages sit below it. They use the same sidebar nav, on-page headings and breadcrumb as catalog-website. This should reduce confusion for plugin authors.

preview

Special notes for your reviewer:

Preview URLs now match catalog-website: / is the README, /docs is index.md and /docs/<slug> is every other page. The README renders with marked, the same library GCOM uses. It is the only new dependency.

Comment thread packages/plugin-docs-cli/src/server/server.ts Fixed

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot review overview

🟡 Changes recommended

Unresolved README sanitization, reload/asset handling, and documentation navigation issues remain.

Review effort: Lite
Findings: 1 High severity · 2 Medium severity

Open (3)
What changed in this PR

Updates plugin-docs-cli serve to mirror catalog-website’s multi-page documentation layout and routing.

Changes:

  • Adds README Overview rendering with marked.
  • Adds documentation navigation, breadcrumbs, responsive styling, and /docs routes.
  • Updates routing, fixtures, tests, and dependencies.
File Summary
packages/​plugin-docs-cli/​src/​validation/​rules/​filesystem.test.ts Updates missing-index test coverage.
packages/​plugin-docs-cli/​src/​utils/​utils.plugin.ts Resolves README paths.
packages/​plugin-docs-cli/​src/​server/​views/​partials/​toc.ejs Updates heading navigation.
packages/​plugin-docs-cli/​src/​server/​views/​partials/​navigation.ejs Renders documentation navigation.
packages/​plugin-docs-cli/​src/​server/​views/​partials/​navigation-item.ejs Adds collapsible navigation items.
packages/​plugin-docs-cli/​src/​server/​views/​docs-layout.ejs Adds tabs, breadcrumbs, and layout structure.
packages/​plugin-docs-cli/​src/​server/​styles/​docs.css Adds catalog-aligned responsive styling.
packages/​plugin-docs-cli/​src/​server/​server.ts Implements README rendering and documentation routes.
packages/​plugin-docs-cli/​src/​server/​server.test.ts Expands server behavior coverage.
packages/​plugin-docs-cli/​src/​server/​nav.ts Implements navigation and URL helpers.
packages/​plugin-docs-cli/​src/​scanner.test.ts Updates root index expectations.
packages/​plugin-docs-cli/​src/​commands/​serve.command.ts Passes README configuration to the server.
packages/​plugin-docs-cli/​src/​commands/​build.command.test.ts Updates manifest expectations.
packages/​plugin-docs-cli/​src/​bin/​run.ts Resolves README configuration.
packages/​plugin-docs-cli/​src/​__fixtures__/​unsafe-slug-docs/​index.md Adds landing-page fixture coverage.
packages/​plugin-docs-cli/​src/​__fixtures__/​test-readme/​README.md Adds README rendering fixture content.
packages/​plugin-docs-cli/​src/​__fixtures__/​test-docs/​index.md Adds documentation landing fixture content.
packages/​plugin-docs-cli/​package.json Adds marked.
package-lock.json Locks the new dependency.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment thread packages/plugin-docs-cli/src/server/server.ts
Comment thread packages/plugin-docs-cli/src/server/nav.ts
Comment thread packages/plugin-docs-cli/src/server/server.ts Outdated
…cs-cli-preview-cw-layout

# Conflicts:
#	packages/plugin-docs-cli/src/bin/run.ts
#	packages/plugin-docs-cli/src/commands/serve.command.ts
#	packages/plugin-docs-cli/src/server/server.ts

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot review overview

🟡 Changes recommended

Address the critical sanitizer bypass and moderate navigation and README asset-path issues before approval.

Review effort: Lite
Findings: 1 High severity · 2 Medium severity · 1 Low severity

Open (4)
Resolved since last review (3)

Comment thread packages/plugin-docs-cli/src/server/server.ts Outdated
Comment thread packages/plugin-docs-cli/src/server/nav.ts Outdated
Comment thread packages/plugin-docs-cli/src/server/server.ts
Comment thread packages/plugin-docs-cli/package.json
sunker and others added 3 commits September 30, 2026 20:24
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
@sunker
sunker requested a review from academo September 30, 2026 18:32
@sunker sunker added the preview Opts the PR into pkg.pr.new preview publishing label Sep 30, 2026
@sunker sunker self-assigned this Sep 30, 2026
@pkg-pr-new

pkg-pr-new Bot commented Sep 30, 2026 •

Copy link
Copy Markdown

Open in StackBlitz

@grafana/create-plugin

npm i https://pkg.pr.new/grafana/plugin-tools/@grafana/create-plugin@7d052ba -D

@grafana/eslint-config

npm i https://pkg.pr.new/grafana/plugin-tools/@grafana/eslint-config@7d052ba -D

@grafana/eslint-plugin-plugins

npm i https://pkg.pr.new/grafana/plugin-tools/@grafana/eslint-plugin-plugins@7d052ba -D

@grafana/plugin-docs-cli

npm i https://pkg.pr.new/grafana/plugin-tools/@grafana/plugin-docs-cli@7d052ba -D

@grafana/plugin-docs-parser

npm i https://pkg.pr.new/grafana/plugin-tools/@grafana/plugin-docs-parser@7d052ba -D

@grafana/plugin-e2e

npm i https://pkg.pr.new/grafana/plugin-tools/@grafana/plugin-e2e@7d052ba -D

@grafana/plugin-meta-extractor

npm i https://pkg.pr.new/grafana/plugin-tools/@grafana/plugin-meta-extractor@7d052ba -D

@grafana/plugin-types-bundler

npm i https://pkg.pr.new/grafana/plugin-tools/@grafana/plugin-types-bundler@7d052ba -D

@grafana/react-detect

npm i https://pkg.pr.new/grafana/plugin-tools/@grafana/react-detect@7d052ba -D

@grafana/sign-plugin

npm i https://pkg.pr.new/grafana/plugin-tools/@grafana/sign-plugin@7d052ba -D

@grafana/tsconfig

npm i https://pkg.pr.new/grafana/plugin-tools/@grafana/tsconfig@7d052ba -D

commit: 7d052ba

@sunker
sunker marked this pull request as ready for review October 1, 2026 08:23
@sunker
sunker requested review from a team as code owners October 1, 2026 08:23
@sunker
sunker requested review from Ukochka and xnyo and removed request for a team October 1, 2026 08:23
@sunker
sunker requested review from ashharrison90 and jackw October 1, 2026 08:23
leventebalogh
leventebalogh previously approved these changes Oct 1, 2026

@leventebalogh leventebalogh left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

const RESOLVER_ORIGIN = 'https://resolver.invalid/';

/** The docs root path (base for all doc urls). */
export function docsBasePath(): string {

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we do export const DOCS_BASE = '/docs' instead?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep sure! 403c487

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably would be nice to add some tests for this file.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sunker
sunker requested a review from leventebalogh October 1, 2026 09:42

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

preview Opts the PR into pkg.pr.new preview publishing

Projects

Status: 🔬 In review

Development

Successfully merging this pull request may close these issues.

4 participants