landing: serve /landing/ from Nuxt - #5786
Conversation
✅ Deploy Preview for flowfuse-website ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
b17465e to
8950541
Compare
8950541 to
3a8250d
Compare
e659fcc to
0d6dc6c
Compare
|
Rebased on The prerender 500s on From the review pass over the whole migration:
|
0d6dc6c to
28a7822
Compare
|
Rebased onto |
28a7822 to
a23c6bb
Compare
There was a problem hiding this comment.
@dimitrieh please remove these siteArt files, let's keep it consistent with the approaches we've taken on previous PRs
There was a problem hiding this comment.
Removed: SiteArt.vue, siteArt.ts and gen-site-art.mjs are all gone, call sites are <UIcon>.
Of the 59 keys these pages use, 48 are stock Heroicons. Three were the same glyph under another name, checked against the set path by path: chip is cpu-chip, chart is chart-bar-square, chevron-right-sm is chevron-right at w-4.
The other eight have no Heroicons equivalent (uns, layers, pin, pin-slash, pulse, snowflake, target-view, arrows) and nearly all arrive as strings from the .yml, so they are a local ff collection in nuxt/assets/icons/ that UIcon reads by name. The content stays uniform that way, i-heroicons-x next to i-ff-x, with nothing left to resolve a bare key.
Each call site carries its own w-/h- now, per your note on #5784: the raw <svg> filled its wrapper through the intrinsic ratio, and one wrapper here set only w-6.
There was a problem hiding this comment.
Verified on the preview, CI green.
All 59 glyphs render at the same size and position as live. One visible difference, and it is a fix rather than a regression: the uns icon in the right-hand card renders as a solid red blob on live, because the raw inline SVG carried a clip-path referencing an internal id. Iconify normalises that, so the preview shows the actual glyph.
Compared /landing/building-and-scaling-industrial-applications/ against live: same 976x706 box, same 14 glyphs, otherwise pixel-identical. Four of the custom ones (snowflake, pin-slash, target-view, layers) paint via background-image rather than mask-image because their SVGs have hardcoded colours, which is the same reason they never followed currentColor under SiteArt either.
Also corrected the preview links in my earlier comment: they pointed at flowforge-website, which now 404s after the Netlify project rename.
5fe7d05 to
fa0d07d
Compare
There was a problem hiding this comment.
@dimitrieh I'd say we don't need this either, scroll-behavior: smooth is already global, defined in style.css
There was a problem hiding this comment.
Removed. All three CTAs already carry href="#form" with a matching target, so the handler was only calling preventDefault to do what the browser does anyway. They keep their capture() call and the global scroll-behavior: smooth animates the jump.
There was a problem hiding this comment.
@dimitrieh it seems like the customer stories assets are being duplicated here... I don't see them removed from the 11ty folder, and if we did that, then it would also affect the customer stories pages. Moving them now seems out of scope for the landing pages migration.
There was a problem hiding this comment.
Agreed that moving them is out of scope, so nothing moved out of the 11ty tree. The copies go instead: seven images this PR added under nuxt/public are referenced by nothing in the Nuxt tree, and src/ already has all seven at the same URLs via the passthrough. That is arch-icon.png, home/home-arch.png, home/pidd.png, home/power.png, pidd-icon.png, stories/walter.png and walter-icon.png. Customer-stories pages are untouched. It also matches what an already-merged Nuxt page does: /images/stories/un-wmo.jpg is referenced from nuxt/ on main and is not in nuxt/public.
|
Pushed:
That matches what an already-merged Nuxt page does: The |
|
Correction to my earlier comment: #5815 is closed, the registration belongs in each migration PR instead. Pushed here. It also carries the |
|
The icon for the secondary cta is not properly aligned and on mobile it becomes stacked 
|
10 routes move off 11ty, in three shapes: - The four ABM pages (layouts/abm-landing.njk) and the three gated briefs (layouts/landing-comparison.njk) were pure frontmatter, so they become one `landingPages` collection with a `kind`, routed by pages/landing/[slug].vue through <LandingAbm> and <LandingComparison>. - /landing/plc/, /tulip/ and /factory-efficiency/ had real markup bodies and stay hand-written Vue pages. The gated briefs' `skipIndex` kept them out of 11ty's sitemap; they carry a robots noindex now, which is what that flag was for. <TestimonialCarousel> replaces testimonials.njk, whose script queried the DOM and ran a 10-second interval with no teardown - fine for a page that never unmounts, a leak in an SPA. It also clears the interval on unmount. <HubSpotMeetings> replaces hs-book-meeting.njk and the non-form branch of consent-fallback.njk. The embed stays gated on analytics consent: the component registers window._ffLoadMeetings for cookieconsent-config.js to call on accept rather than loading the script on mount, so declining analytics still means no third-party scheduler. The "Choose a time to talk" panel is what a visitor without consent sees, not an error state, so it renders until the embed is up. scripts/gen-site-art.py generates nuxt/utils/siteArt.ts from the icon keys the pages and content actually name. 87 keys was past hand-maintaining, and an eager glob of that directory would inline ~137 KB of mostly unused art. It fails only on a literal <SiteArt name="…"> with no file; a key some other renderer resolves is reported, not fatal. One content fix: /landing/edge-connectivity/'s heading carried "‑". rich-text.mjs escapes & by design, so that rendered as literal text; the content holds the U+2011 character it meant. Verified all 10 against production, with no structural differences.
SiteArt inlined raw SVGs from src/_includes/components/icons/ through a generated import map, so the pages carried a component, a 196-line generated file and the script that wrote it. The call sites are <UIcon> now and all three files go. Of the 59 keys the landing pages reference, 48 are stock Heroicons and become i-heroicons-<key>. Three were the same glyph under another name, verified against the icon set path by path: chip is cpu-chip, chart is chart-bar-square, and chevron-right-sm is chevron-right at w-4. The remaining eight have no Heroicons equivalent, so they stay in the repo as a local `ff` collection that <UIcon> reads by name. That keeps the .yml uniform: a glyph is named the same way whether it is ours or Heroicons', and nothing has to resolve a bare key. Each call site now carries its own width and height. The raw <svg> filled its wrapper through the intrinsic ratio, which a masked <span> does not have, so the one wrapper that set only w-6 would otherwise have collapsed to no height.
The three CTAs already carry href="#form" and the targets exist, so the JS handler only had to preventDefault to do what the browser does anyway. They keep their capture() call and let the site-wide scroll-behavior: smooth animate the jump, which retires the composable. Seven images had been copied into nuxt/public although nothing in the Nuxt tree references them and 11ty already serves all seven from src/. Dropping the copies leaves the customer-stories pages untouched, which is what makes this in scope: nothing moves out of the 11ty tree, the duplicates just go.
Without the prefix the dev middleware keeps proxying to 11ty, so npm run dev shows the old page. The middleware returns early unless NODE_ENV is development, which is why CI and the deploy preview both looked correct. The landing images stay in src/ and only reach nuxt/public through the 11ty passthrough in a production build, so dev needs the same carve-out.
The .njk's extraClass came over verbatim, but it was written against a different DOM. cta-button.njk wrapped the label and the arrow in one <span class="inline-flex items-center gap-2">, so the <a> had a single child and `inline` / `flex flex-col` changed nothing that was drawn. UButton renders the label and its trailing-icon as siblings, so `flex flex-col` stacks them and `inline` drops the flex context that centres the arrow. Dropping the two classes restores UButton's own inline-flex; the mobile CTA keeps w-full and its margins. pages/vs/[slug].vue carries the same string from #5783 and is already on main, so /vs/ignition/, /vs/kepware/ and /vs/litmus/ stack their mobile CTA on live today. Same one-line fix, included here because it is the same root cause.
8c252b9 to
229765b
Compare
|
Fixed, and both symptoms had one cause. The Dropping the two classes restores
I checked the other migration branches for the pattern. The rest are |
2 participants
Description
Moves
/landing/to Nuxt. The campaign pages that were pure frontmatter become a content collection; the four with their own layout become.vuepages.The HubSpot meeting embed stays behind the analytics-consent gate: it registers the same global the consent banner calls, rather than loading on mount.
Related Issue(s)
Part of #5777
Checklist