Add pricing tier badges to docs feature pages#4741
Open
Conversation
Wire up featureCatalog.yaml to the documentation layout so that docs pages matching a feature's docsLink automatically display Cloud/Self-Hosted tier availability badges at the top of the page. Changes: - Add findFeatureByDocsLink() helper and featureForDocsPage filter in .eleventy.js to match page URLs against docsLink values - Update documentation.njk layout to render tier-badges component when a matching feature is found - Populate docsLink for 11 features that have corresponding docs pages: RBAC, Custom Hostnames, Persistent Context, MQTT Broker, DevOps Pipelines, Device Groups, High Availability, Tables, Team Library, Audit Log, SSO
✅ Deploy Preview for flowforge-website ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Wire up featureCatalog.yaml to docs pages via an Eleventy transform that injects tier availability badges: - Parent features: badges injected after the H1 heading - Subfeatures: badges injected after their matching heading, identified by the URL fragment in docsLink (e.g. #application-level-rbac) Implementation: - findFeatureByDocsLink() matches page URL to parent features - findSubfeaturesForDocsPage() finds subfeatures whose docsLink path matches the page and extracts the fragment for heading matching - docsFeatureBadges transform scans headings by id attribute and injects renderTierBadges() HTML with not-prose class to escape Tailwind Typography styling - Reuses existing tier-badges CSS and tierLabel/renderTierBadges helpers from changelog feature Data changes: - Add rbac-application subfeature (Enterprise only) with docsLink fragment pointing to #application-level-rbac - Populate docsLink for 11 features: RBAC, Custom Hostnames, Persistent Context, MQTT Broker, DevOps Pipelines, Device Groups, High Availability, Tables, Team Library, Audit Log, SSO
Extend the docsFeatureBadges transform to support a features array
in docs page frontmatter (same format as changelog posts):
features:
- id: rbac
heading: "Team-Level RBAC"
- id: rbac-application
heading: "Application-Level RBAC"
This keeps badge config co-located with the content it references
in the FlowFuse docs repo, so heading renames don't silently break
badges.
- Frontmatter features are matched by heading text and looked up
in featureCatalog by id
- Frontmatter takes priority: if a heading is handled by frontmatter,
the subfeature docsLink fragment injection is skipped (dedup)
- The releaseFeatures transform now requires the release field,
preventing it from processing docs pages with features frontmatter
- docsLink fragments on subfeatures still work as "Learn more" links
and as a fallback when no frontmatter is present
Contributor
Author
|
Docs are bit special as in that the data lives in FlowFuse/FlowFuse. This implementation relies on the same mechanic as release blogpost sub headers with front matter for sub headings, while h1 can be auto linked to with a reference to the docs page fro the feature catalogue yaml |
Contributor
Author
|
Collaborator
|
The color of the badge looks different 
|
hardillb
reviewed
Mar 23, 2026
Contributor
hardillb
left a comment
hardillb
left a comment
There was a problem hiding this comment.
Logically looks fine, but I'll defer to @sumitshinde-84's comment about the colours
Collaborator
|
@dimitrieh I think RBAC documentation is missing from the docs |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Adds automatic pricing tier availability badges to documentation pages. When a docs page URL matches a feature's
docsLinkinfeatureCatalog.yaml, Cloud and Self-Hosted tier badges render at the top of the content — similar to how Grafana tags features by required license.How it works:
findFeatureByDocsLink()helper in.eleventy.jsmatches the current page URL againstdocsLinkvalues in the feature catalogdocumentation.njklayout callsfeatureForDocsPagefilter and renders the existingtier-badges.njkcomponent when a match is foundtierLabelfilter and badge CSS already used by changelog postsFeatures with
docsLinkpopulated (11 new mappings):/docs/user/role-based-access-control//docs/user/custom-hostnames//docs/user/persistent-context//docs/user/teambroker//docs/user/devops-pipelines//docs/user/device-groups//docs/user/high-availability//docs/user/ff-tables//docs/user/shared-library//docs/user/logs//docs/admin/sso/Adding tier badges to more docs pages is simply a matter of setting
docsLinkinfeatureCatalog.yaml.Related Issue(s)
Discussion in #product-design Slack thread — Piotr suggested adding tier info boxes to feature docs pages (like Grafana's approach).
Checklist