/ai: rebuild on Nuxt, with a shared command block - #5681
Conversation
Moves /ai from 11ty to Nuxt, following the strangler-fig migration the repo guide describes, and deletes src/ai.njk so one renderer owns the route. Same page, same copy, same classes: nuxt.config.ts already links /css/style.css and layouts/default.vue already carries .ff-website, so all 223 gated rules apply unchanged. What the port buys: - nuxt/components/content/FfCommand.vue replaces markup plus a per-page copy helper that was hand-pasted into src/platform/device-agent.njk and /ai. Living in components/content means markdown can use it too, so the changelog can carry the same block instead of restating the address. - The agent tabs and the showcase rotation become reactive state rather than roughly 120 lines of querySelectorAll and setInterval in the page. - FAQ structured data goes through useSchemaOrg. The 11ty partial interpolated answers into a JSON string, so markup in an answer landed in the schema. - /ai moves from sitemap-legacy.xml into sitemap.xml. Deliberate changes, not ports: - Sign-up buttons are CtaSignUp, so the copy is the site's fixed "Try it out" and the event is cta-sign-up. The .njk had bespoke labels and reused cta-try-it-out. - Governance and local-agent icons are UIcon lucide equivalents rather than inlined SVG includes.
✅ Deploy Preview for flowforge-website ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Deleting src/ai.njk took /ai out of the 11ty output, and the Nuxt page did not replace it: the prerender crawler only follows links from Nuxt-rendered pages, and every link to /ai lives in 11ty-generated HTML (nav, homepage). So the route never reached nuxt/dist and the link checker reported a bad /ai link from every page that links it. Listed explicitly beside /pricing and /product, which are there for the same reason.
Four of the six lucide names emitted no CSS rule at all, so those icons
rendered as empty spans on the preview: three of the four governance tiles
had no glyph, and neither did the Local and Custom Agents tab. Verified on
the deploy preview, where only circle-check and chevron-down had a
:where(.i-lucide\:...) rule with mask data. The build had warned about it
("failed to load icon lucide:shield-check") and I read that as pre-existing
noise, since the same warning fires for icons other pages use.
There is no local @iconify-json collection in the repo, so an icon name
nothing else already uses has nothing to resolve from.
Now inlines the same SVGs src/ai.njk pulled in with {% include %}, which is
the more faithful port anyway: no network fetch, and stroke="currentColor"
keeps the tab glyph turning white with its label when the tab is active.
|
@KristopherLeads @dimitrieh Who would be reviewer here? I'd like to understand if I'm blocking the PR to be merged tomorrow during the release. |
|
@ZJvandeWeg this is being worked on by @KristopherLeads https://flowfuse.slack.com/archives/C02TG4WH5PC/p1787757568826959 and has been discussed to be a deliverable for today in the product<>marketing sync and in an earlier meeting before that. I'd say, I am the reviewer alongside marketing after Kristopher is done adjusting the PR I initially setup. We can loop you in, if you'd like. |
|
@KristopherLeads pre-approving here from my side :), context in the thread |
|
PS: If this merges, the nuxt component for this can then also be used for the other prs for updating docs/changelog/etc. Even can be considered to be put in the release blogpost if desired. Perhaps something to consider |
|
Note - once documentation is live, we need to swap the links. |
@KristopherLeads can you elaborate? Just read, think https://flowfuse.slack.com/archives/C02TG4WH5PC/p1787774280052259?thread_ts=1787765665.727169&cid=C02TG4WH5PC is what you are referring to |
3 participants
Description
Rebuilds
/aion Nuxt and deletessrc/ai.njk, so one renderer owns the route. Same page, same copy, same classes.Opened for discussion rather than to merge as-is. It overlaps #5670, which rebuilds the same page on 11ty and is where the content is being reviewed. Whichever approach we take, the other closes.
The part worth keeping either way is
nuxt/components/content/FfCommand.vue. The copyable command block is currently markup plus a copy helper hand-pasted per page, and putting it incomponents/content/means markdown can use it too. #5682 is stacked on this and does that for the changelog entry.Related Issue(s)
FlowFuse/flowfuse#8192
Checklist