use-cases: serve /use-cases/ from Nuxt - #5780
Conversation
✅ Deploy Preview for flowfuse-website ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
97ac2f4 to
2b3fc72
Compare
2b3fc72 to
73d4662
Compare
73d4662 to
7ade8c0
Compare
|
Rebased on A review pass over the whole migration found three things here:
Also tidied the stale list in |
7ade8c0 to
d580aee
Compare
|
Rebased onto |
d580aee to
925202c
Compare
There was a problem hiding this comment.
Removed. The anchor keeps its href="#whitepapers" and the site-wide scroll-behavior: smooth in style.css animates the jump, so the composable was only restating the default. That file survives the teardown as nuxt/assets/css/style.css, so the behaviour does not go away with src/.
| // already falls through to the 11ty proxy by default). Remove entries here as they migrate: | ||
| // /about, /blueprints, /careers, /community, /events | ||
| // /free-consultation, /industries, /landing, /node-red, /partners, /platform, | ||
| // /use-cases, /webinars |
There was a problem hiding this comment.
@dimitrieh this needs to be added to the NUXT_PREFIXES or it won't render the pages on dev mode
There was a problem hiding this comment.
Added /use-cases to NUXT_PREFIXES. It also needed a /whitepaper/images/ carve-out, which is the cause of the broken covers you flagged separately.
| @@ -1,6 +0,0 @@ | |||
| { | |||
| "layout": "use-case", | |||
There was a problem hiding this comment.
@dimitrieh remember to remove the unused layouts
There was a problem hiding this comment.
Deleted use-case.njk along with its alias in .eleventy.js. Checked across every open migration branch rather than just this one, since each was cut from main independently: the only consumers were in src/use-cases/, which this PR removes.
| @@ -1,289 +0,0 @@ | |||
| --- | |||
| layout: solution | |||
There was a problem hiding this comment.
@dimitrieh I'd say this layout is dead code too
There was a problem hiding this comment.
Agreed, solution.njk is dead too. It and its .eleventy.js alias are gone, same check as the other layout.
| ] | ||
|
|
||
| const WHITEPAPERS = [ | ||
| { title: 'Accelerating Innovation in Manufacturing with FlowFuse', image: '/whitepaper/images/whitepaper-manufacturing.png', alt: 'Photo of a manufacturing company with a worker holding a laptop', link: '/whitepaper/accelerating-innovation-in-manufacturing-with-flowfuse/' }, |
There was a problem hiding this comment.
@dimitrieh The whitepaper images are not rendering on local
There was a problem hiding this comment.
Fixed, and it was a dev-only fault rather than a bad path. The covers are at /whitepaper/images/..., /whitepaper is in NUXT_PREFIXES, but the files are still in src/whitepaper/images/ and only reach nuxt/public through the 11ty passthrough in a production build. So dev answered from Nuxt and 404d while the deploy preview was fine. Added the carve-out /resources/images/ and /vs/images/ already have.
|
Pushed:
Two things from this review moved to #5815 instead, because they are edits to |
|
Correction to my earlier comment: #5815 is closed, the registration belongs in each migration PR instead. Pushed here. It also carries the |
There was a problem hiding this comment.
@dimitrieh why not assign the real Heroicons name directly in each .yml instead of transforming the old 11ty icon names through a new useCaseIcon.ts? Feels like we're carrying over an 11ty pattern we're trying to get away from.
There was a problem hiding this comment.
Agreed, done. The .yml now names the glyph in full (i-heroicons-chart-bar-square) and <UIcon> resolves it directly; useCaseIcon.ts is gone.
It was also the convention already on main: every icon: key under nuxt/content/ is a full name. And this PR was inconsistent with itself, since pages/use-cases/uns.vue already passed feature.icon straight to <UIcon>.
Worth noting what the mapper was buying, since dropping it is a real trade: it fell back to a neutral dot for an unknown key. Now an unresolvable name renders nothing. That is the better failure, because it is visible in review instead of looking deliberate. nuxt/utils/navIcons.ts is the same pattern one layer over, and it fails silently in exactly that way: /vs/kepware/ and /vs/litmus/ name arrows-pointing-out and link, neither is in the registry, and NavIcon renders nothing, so both pages are missing an icon on live right now. Both keys are added in #5781.
78e1e0c to
ddd9fcd
Compare
Marketing retired Aerospace Components, Aviation & Aerospace, Electronics & Appliances, Renewables, Semiconductors, Food & Beverage and Life Sciences. /industries/automotive/ stays. All seven were live and indexed, so the URLs 301 to /industries/ rather than 404ing. Their content, the [slug].vue route that served them, the seven components/industry/ bands, the `industries` collection and its schema, the sitemap and prerender entries and ~40 images all go with them, since the seven .yml files were their only consumers. The header dropdown and the footer group lose the same seven links, so nothing in the chrome points at a redirect. navIcons keeps two of the keys this branch added: /vs/kepware/ and /vs/litmus/ name `arrows-pointing-out` and `link` in content merged with #5783, but neither was ever added to the registry, so NavIcon renders nothing for them on main today. Both pages show one icon fewer than /vs/ignition/ on live. components/use-case/Card.vue goes back to #5780, which adds the same file and is the only branch still using it.
Marketing retired Aerospace Components, Aviation & Aerospace, Electronics & Appliances, Renewables, Semiconductors, Food & Beverage and Life Sciences. /industries/automotive/ stays. All seven were live and indexed, so the URLs 301 to /industries/ rather than 404ing. Their content, the [slug].vue route that served them, the seven components/industry/ bands, the `industries` collection and its schema, the sitemap and prerender entries and ~40 images all go with them, since the seven .yml files were their only consumers. The header dropdown and the footer group lose the same seven links, so nothing in the chrome points at a redirect. navIcons keeps two of the keys this branch added: /vs/kepware/ and /vs/litmus/ name `arrows-pointing-out` and `link` in content merged with #5783, but neither was ever added to the registry, so NavIcon renders nothing for them on main today. Both pages show one icon fewer than /vs/ignition/ on live. components/use-case/Card.vue goes back to #5780, which adds the same file and is the only branch still using it.
|
@dimitrieh let's hide the |
9 routes (the listing plus 8 use cases) move off 11ty. The group used three different 11ty layouts, and the port keeps that split rather than flattening it: - The two operational use-cases (the ones declaring `values:`) were pure frontmatter with no template body, which layouts/use-case.njk rendered as a fixed set of optional blocks. They become a `useCases` data collection plus one component per block under components/use-case/, rendered by pages/use-cases/[slug].vue - the same shape the application guide uses. - The six architecture pages had real markup bodies, so they stay hand-written Vue pages. Each keeps a metadata-only collection entry so /use-cases/ still builds its cards from one place instead of a hand-maintained list. layouts/use-case.njk's legacy `gap`/`workflow`/`outcomes` fall-back is dropped: no remaining page used it, and it rendered visible "Placeholder copy" text. Shared pieces extracted rather than repeated: UseCaseCard (the listing and components/use-case-links.njk rendered identical markup), UseCaseClosingCta (the layout and the listing differ only in the lead CTA, so that is a prop), UseCaseSolutionHero, and useScrollToAnchor for smooth-scroll.njk's global function. NavIcon gained a `size` prop so it covers ffIconLg as well as navoption, and four icon keys page content asks for by name. /use-cases/mes/, /scada/ and /uns/ each render TWO <h1> in production - one from layouts/page.njk's `nohero` branch and one from the page itself, identical text on /scada/. Only the page's own heading survives. Page art moves into nuxt/public/images/, where the already-ported pages keep theirs; Vite resolves a literal absolute src at build time, so an uncopied image breaks the route's client chunk rather than just 404ing the image. Thumbnails pointing into /blog/** and /whitepaper/** stay put and move at teardown. Verified all 9 against production: H1s, heading outline, in-page CTA destinations and HubSpot form mounts match, the h1 differences above excepted.
use-case.njk and solution.njk had no callers left once src/use-cases/ went, so they and their layout aliases in .eleventy.js go with them. The in-page anchor drops its JS handler: the site-wide scroll-behavior: smooth in style.css already animates it, so the composable only restated the default.
Without the prefix the dev middleware keeps proxying to 11ty, so npm run dev shows the old page while CI and the deploy preview look right: the middleware returns early unless NODE_ENV is development, so nothing else exercises it. The whitepaper covers this page links to live in src/whitepaper/images/ and only reach nuxt/public through the 11ty passthrough in a production build, so dev needs the same carve-out /resources and /vs already have.
The composable existed only to translate the 11ty include names (src/_includes/components/icons/<name>.svg) into Iconify names at render time. Content that is authored for Nuxt can just say i-heroicons-chart-bar-square, so the .yml now carries the full name and <UIcon> resolves it directly. This is the convention already on main: every icon: key under nuxt/content/ is a full name (i-lucide-workflow and friends). This PR was inconsistent with itself too, since pages/use-cases/uns.vue already passed feature.icon straight to <UIcon>. Losing the mapper also loses its fallback glyph for an unknown key, which is the better trade: a name that resolves to nothing is visible in review, while a neutral dot silently looked deliberate.
…ages land The section links out to /industries/<slug>/ pages that are being reworked, so it points at copy that is about to change. Hidden rather than removed: the component and the industries: field in each use-case stay as they are, so bringing it back is one line in pages/use-cases/[slug].vue. Also drops src/_includes/components/use-case-chips.njk, the 11ty twin of the same section - its only caller was layouts/use-case.njk, which this PR deletes.
ddd9fcd to
507eefb
Compare
|
Hidden in 507eefb. The component and the Same commit drops |
2 participants
Description
Moves
/use-cases/to Nuxt. The six architecture pages become.vuepages; the two operational use-cases stay data-driven and render throughpages/use-cases/[slug].vue.FAQ answers now go through an escaping renderer rather than being printed raw.
Related Issue(s)
Part of #5777
Checklist