Feature catalog: one file, Edge/Hub/Fleet availability badges - #5525
Feature catalog: one file, Edge/Hub/Fleet availability badges#5525dimitrieh wants to merge 6 commits into
Conversation
✅ Deploy Preview for flowforge-website ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for flowforge-website ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Every page this changes, with preview linksPreview: https://deploy-preview-5525--flowforge-website.netlify.app Verified by fetching each page and reading the rendered badge text, not by eye. Every page below returned 200. Docs pages: availability badge added above the H1This is the surface that had been dark since 29 July, and where the clicks were.
Changelog entries: availability badge added under the titleChangelog listing: badges appear on the entries above
Release blogs: badges under each section heading, changelog and docs links at the end of it
Pricing: same rows, four new info popoversThe feature set, order and tier values are identical before and after, checked by diffing the parsed catalogs rather than the page. The only visible difference is an info icon on four comparison rows that gained a description: Device Fleet Updates, Device Group Management, Git Integration, High Availability. Handbook: three pages of copy
Nothing else movesDocs pages outside the table above render no badge, because no catalog feature names them as its |
1bf141c to
6222f7a
Compare
The site carried two catalogs. src/_data/featureCatalog.yaml had the docs links, changelog links, solutions and subfeature structure, but its tier axis was Cloud/Self-Hosted x Enterprise, which predates the Edge/Hub/Fleet repackaging. nuxt/content/feature-catalog.yml had the right plans but none of the metadata. Only a minority of feature ids overlapped. Merge them into nuxt/content/feature-catalog.yml and delete the legacy file. Features that exist only to carry a changelog or docs link are marked showOnPricing: false, so the pricing page renders exactly the rows it rendered before, in the same order, with the same tier values. Badges now name the plans a feature is included in rather than a tier that no longer exists. They come back on changelog entries and, more importantly, on docs pages: the docs badge injection had been silently dead since the docs moved to Nuxt, because the Eleventy transform still wrote HTML into nuxt/public/ where the Nuxt route shadows it. Those transforms are removed along with the orphaned tier-badges include. A feature with no settled availability can omit tiers entirely and publishes no badge; a schema refine keeps that from leaking onto the pricing page. The release blog features: injection was dead for the same reason and is not rebuilt here. The handbook now says so rather than describing automation that does not run.
Release blog posts carry a `features:` block naming a heading and a catalog
feature. An Eleventy transform used to read it and inject availability badges,
changelog links and a docs link into each named section. It broke when the blog
moved to Nuxt, the same way the docs badges did: the transform still ran and
still emitted HTML, into nuxt/public/ where the Nuxt route shadows it.
Rebuild it against the parsed markdown tree rather than the output HTML. The
old version matched headings with a regex over rendered HTML and stripped tags
to compare text, which misses a heading containing a link or inline code and
edits a raw string. Splicing nodes into the MDC array makes heading matching
exact and injection structurally safe.
The five release blogs named ids from the deleted catalog, so none of them
would have resolved. Remapped, with three judgement calls: Certified Nodes is
now two features so that heading takes both ids and badges the union of their
plans; the `tiers: {cloud: all, selfHosted: all}` shorthand becomes the plan
triple; and 2.28's "More Flexibility for Self-Hosted Deployments" loses its
badge, because that section is about a deployment model and no plan badge
would be true of it.
MDC's propsToData joins an all-strings array prop with spaces, which turned the
plan list into one string and made the badge component's v-for iterate its
characters. Release blogs pass the plans comma separated instead.
A test fails on any `features:` id the catalog does not have, since a stale id
otherwise just renders nothing at all.
The six solution columns (MES, SCADA, UNS, Edge Connectivity, IT/OT Middleware, Data Integration) do not match how the platform is thought about, so the data and its rendering both go. Removed from the catalog entries, the content schema, the CatalogFeature type and the handbook table. Nothing else read the field. The table is now Feature against Edge, Hub and Fleet, which fits without scrolling sideways. Pricing is untouched: same rows, order, tiers and descriptions.
Scanning the table meant picking out individual check marks. Included cells now carry a light green background and a green check, so the shape of a plan reads down the column at a glance. Excluded cells keep their dash, dimmed so it recedes rather than competing.
The green background carries the scanning on its own. Tinting the check marks, dashes and TBD labels on top of it only made them harder to read.
Nuxt Content resolves a markdown component tag against a registry it builds while parsing, and reaches it through an async loader. The badge and changelog-link nodes are spliced in after parsing, so that path renders nothing in a production build even though it works in dev. Passing the components to ContentRenderer directly skips the registry.
6222f7a to
3563dbc
Compare
|
@KristopherLeads @Yndira-E @sumitshinde-84 This affects the source file that informs the pricing page (and connects features across pricing, docs, release blog posts, and changelogs) Affects quite a number of pages. My suggestion is to go through the links posted above in the comment and see if it aligns with expectations. Goal here is that control lies in one place mostly, the feature catalogue page. |
| # | ||
| # Sections and the titles, descriptions and tiers of everything that reaches /pricing are | ||
| # owned by the pricing page. Features that no longer appear there keep their entry with | ||
| # showOnPricing: false so the handbook table, docs badges and changelog links still resolve. |
There was a problem hiding this comment.
@dimitrieh I think features that aren’t shown on the pricing page shouldn’t render badges. From a user’s perspective, clicking through to the pricing table and not finding the feature feels broken.
If I can’t find the feature that made me clicked on the badge, I’d assume it’s been deprecated, isn’t available in my plan, or that the badge was added by mistake.
There was a problem hiding this comment.
@Yndira-E you're right. How is it decided currently what shows up on the pricing page, as the list has shrunk from before 🤔 ?
There was a problem hiding this comment.
@KristopherLeads might have the answer, as he worked on this recently
| <NuxtLink | ||
| v-for="plan in planList" | ||
| :key="plan" | ||
| to="/pricing/#comparison" |
There was a problem hiding this comment.
@dimitrieh These badges didn’t link anywhere before. The previous implementation tracked clicks but didn’t have an href/to at all.
I understand you gathered some data, and at least in the docs it looks like users are clicking on them, so I’m not opposed to linking them somewhere. Just wanted to flag that this reintroduces a behaviour we intentionally moved away from before.
Once we have per-plan landing pages, linking there instead of /pricing/#comparison might make more sense than sending users to a feature list. Landing on a plan page doesn’t create the same “where’s the feature I clicked on?” expectation.
Not sure yet what those pages will look like, though, so consider this more of a thought for the future than a request to change anything now.
There was a problem hiding this comment.
@Yndira-E yes, this got reintroduced by claude.. i am ok with unlinking (again) for now, or linking to the feature catalogue page in stead. wdyt?
There was a problem hiding this comment.
Which one is the feature catalogue page? the handbook one?
There was a problem hiding this comment.
@Yndira-E The feature catalogue is a data file that informs the badges, the handbook page, and the pricing page. One place to maintain and upkeep the data, many places in which it is used/adjusted if changed
There was a problem hiding this comment.
but that's a data file, not a page? right?
you said:
linking to the feature catalogue page in stead.
I'm trying to understand which page is that.
There was a problem hiding this comment.
@Yndira-E ah sorry, that is https://flowfuse.com/handbook/engineering/product/features
There was a problem hiding this comment.
There was a problem hiding this comment.
so it would be the handbook, as I suspected.
No, handbook is for internal use, the new pages will be ready real soon, let's keep it as is for now, but this needs to be resolved before merging: #5525 (comment)
2 participants
Description
Follow-up to #5524. That PR disconnected the changelog from the tier badges because they were showing a tier that no longer exists. This makes the catalog correct and turns the badges back on.
The problem
Two catalogs had drifted apart:
src/_data/featureCatalog.yamlheld the docs links, changelog links, solutions and subfeature structure, but its tier axis was Cloud/Self-Hosted x Enterprise, which predates the Edge/Hub/Fleet repackaging.nuxt/content/feature-catalog.ymlhad the right plans and nothing else.Only a minority of feature ids overlapped, so this is a merge rather than an update.
Separately, the badges had already gone dark almost everywhere. PostHog shows
tier-badge-clickrunning at roughly 100 to 150 clicks a month from around 30 people through July, nearly all of them on/docs/*pages, dropping to zero after the week of 27 July. The docs Nuxt migration (#5177, 29 July) is the cause: thedocsFeatureBadgestransform in.eleventy.jsstill ran and still emitted HTML, but it wrote intonuxt/public/where the Nuxt route shadows it, so the output was discarded. Same forreleaseFeatureson release blogs.What this does
Two commits.
Commit 1, the catalog.
nuxt/content/feature-catalog.ymland deletes the legacy file, the dead Eleventy transforms, and the orphanedtier-badges.njkinclude.showOnPricing: false.tiersentirely and publishes no badge. A schema refine stops that leaking onto the pricing page.useFeatureCatalog.tsis rewired onto the content collection; lookups moved tonuxt/lib/feature-catalog.mjssonode --testcovers them.Commit 2, the release blogs.
The
features:frontmatter on release blogs drove the same injection and broke the same way. Rebuilt against the parsed markdown tree rather than the output HTML, so a heading containing a link or inline code still matches and nothing can be injected into an attribute.All five release blogs named ids from the deleted catalog, so none of them would have resolved. Remapped, with three judgement calls worth a look:
tiers: { cloud: all, selfHosted: all }becomes the plan triple.Note this adds badges to five published posts. They render nothing today, so it is additive, but it is a visible change to live pages.
Pricing page is unchanged
Verified programmatically, not by eye: same features, same order, same tier values, before and after. The only visible difference is info popovers appearing on four comparison rows that gained a description (Device Fleet Updates, Device Group Management, Git Integration, High Availability).
Not in scope
The release blog
features:injection is dead for the same reason and is not rebuilt here. The handbook now says so instead of describing automation that does not run. Subfeature badges keyed to a heading fragment (/docs/user/expert/chat/#support-mode) are also not restored; page-level docs badges are.Related Issue(s)
Follows #5524
Checklist