Skip to content

about: serve /about/ from Nuxt - #5791

Open
dimitrieh wants to merge 3 commits into
mainfrom
nuxt/about
Open

dimitrieh wants to merge 3 commits into
mainfrom
nuxt/about

Conversation

@dimitrieh

Copy link
Copy Markdown
Contributor

Description

Moves /about/ to Nuxt: the team grid, values, benefits and investors.

The team grid reads the team/ data directory only. The merged lookup used for blog bylines also includes guests/, and three guest files are former team members still carrying the order they had as staff, so reading the merged one puts them back on the page.

Related Issue(s)

Part of #5777

Checklist

  • I have read the contribution guidelines
  • I have considered the performance impact of these changes
  • Suitable unit/system level tests have been added and they pass
  • Documentation has been updated
  • For blog PRs, an Art Request has been created (instructions)

@dimitrieh

Copy link
Copy Markdown
Contributor Author

@netlify

netlify Bot commented Sep 11, 2026

Copy link
Copy Markdown

Deploy Preview for flowfuse-website ready!

Name Link
🔨 Latest commit bde3b4a
🔍 Latest deploy log https://app.netlify.com/projects/flowfuse-website/deploys/6aa95405cc52b90008bedd77
😎 Deploy Preview https://deploy-preview-5791--flowfuse-website.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 47 (🟢 up 16 from production)
Accessibility: 95 (no change from production)
Best Practices: 92 (no change from production)
SEO: 92 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@dimitrieh

Copy link
Copy Markdown
Contributor Author

Rebased on main. No content change.

One comment correction: the page comment claimed the 11ty layout rendered an empty second <h1>. It did not. layouts/page.njk guards the whole hero on {% if (title and not hideTitle) %} and src/about.njk sets no title, so the layout emitted no heading at all. Bullet removed rather than left crediting the port with fixing a defect that never existed.

@dimitrieh

Copy link
Copy Markdown
Contributor Author

Rebased onto main. The conflicts in nuxt/server/middleware/legacy.ts and nuxt/nuxt.config.ts are resolved and CI is green.

@dimitrieh

Copy link
Copy Markdown
Contributor Author

Rebased onto main. The conflicts in nuxt/server/middleware/legacy.ts and nuxt/nuxt.config.ts are resolved and CI is green.

@Yndira-E

Copy link
Copy Markdown
Contributor

@dimitrieh the pictograms are the wrong size, they're too big. Compare the preview against the live version and you'll see the difference.

Also, the email icon under each team member's picture should be filled and it has a weird spacing right now.

// Top-level routes still on 11ty, not yet ported to Nuxt (everything not listed above
// already falls through to the 11ty proxy by default). Remove entries here as they migrate:
// /about, /blueprints, /careers, /community, /events
// /blueprints, /careers, /community, /events

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dimitrieh /about needs to be added to the NUXT_ROUTES, otherwise, it won't load on local dev

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added /about to NUXT_ROUTES. It had only been dropped from the informational list in the comment block below, which the middleware does not read.

Comment thread nuxt/pages/about/index.vue Outdated
improve their processes continuously.
</p>
<p>
<NuxtLink to="/platform/security/#certifications" class="text-indigo-600 hover:text-indigo-800 font-medium">See our security certifications</NuxtLink>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dimitrieh this link is broken

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed. It was a <NuxtLink>, so the click was resolved client-side by vue-router, matched pages/[...slug].vue, found no content entry and 404'd. /platform/security/ is still 11ty, so it needs a plain <a href>.

twitterSite: '@FlowFuseinc',
})

useSchemaOrg([

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dimitrieh app.vue already declares a sitewide defineOrganization(). Some fields here overlap with it so the rendered JSON-LD on /about/ ends up with duplicate entries. Worth trimming this block to just the fields app.vue doesn't already have.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Trimmed to the fields app.vue does not carry: legalName, description, foundingDate, founder, address.

One correction on the mechanism: it resolved to a single #identity node, not duplicate entries, because both calls dedupe on the same @id. The duplication was inside it. url was overwritten with the www host, and sameAs concatenated into a list holding GitHub twice and LinkedIn and Twitter in two spellings each. The logo block also declared 396x215 for a file that is 529x287, so that goes too.

Facebook and YouTube were only in the page list, so they move to app.vue rather than being dropped.

The team grid reads useTeam(), the same src/_data/team files the blog byline
already resolves through; TeamMember gains the `order`, `facts` and `blog`
fields this page uses so it is typed rather than cast. The social glyphs reuse
the existing Icons{Github,Linkedin,Twitter}Icon components.

values.njk and benefits.njk each had exactly one caller - this page - so they
are two const grids here rather than components.

The frontmatter's `meta.organization` block was rendered by jsonld.njk as a
hand-built JSON string; it goes through useSchemaOrg, which escapes properly.

Production also renders a second, empty <h1> from layouts/page.njk's `nohero`
branch, because the page sets no `title`. Only the real heading survives.

Verified against production, with no structural differences.
…th <a>

/about was only dropped from the informational "still on 11ty" list in
legacy.ts, never added to NUXT_ROUTES, so the dev middleware kept proxying
it to 11ty, which no longer has the page now that src/about.njk is gone.

The security certifications link was a <NuxtLink>, so clicking it was
resolved client-side by vue-router, matched pages/[...slug].vue, found no
content entry and threw a 404 instead of loading 11ty's /platform/security/.
The prerender link check passes either way, because it only sees the
rendered href, and that target does exist in the merged build.
The pictograms carried `w-full h-auto`. Tailwind v4 puts utilities in a layer
that resolves after `components`, where style.page.css lives, so `w-full` beat
`.company-value img { width: 128px }` and `.about-values .company-value img
{ width: 60px }` despite being less specific. Benefits rendered at 299px
instead of 128px, and values at 121-171px, each tracking its own PNG's aspect
ratio, instead of a uniform 60px. The 11ty markup carried no classes at all,
so dropping them restores both sizes.

Mail and RSS were <UIcon>, which renders a masked <span> with no intrinsic
aspect ratio: the mail link laid out 36px wide where the sibling glyphs get
20px, and Lucide's mail is an outline where the partial was solid. Both now
have components alongside the other social icons, carrying the same paths the
partials had.

Organization schema on the page repeated name, url, logo and sameAs, which
app.vue already declares. It resolved to one #identity node rather than two,
but the repeat overwrote url with the www host and concatenated sameAs into a
list holding GitHub twice and LinkedIn and Twitter in two spellings each. The
page now adds only what app.vue lacks; the two profiles it alone carried move
to app.vue so they stay sitewide.
@dimitrieh

Copy link
Copy Markdown
Contributor Author

Both fixed.

Pictograms. They carried w-full h-auto. Tailwind v4 resolves utilities after components, where style.page.css lives, so w-full beat .company-value img { width: 128px } and .about-values .company-value img { width: 60px } despite being less specific. Measured against live: benefits were 299px instead of 128px, values 121-171px (each tracking its own PNG aspect ratio) instead of a uniform 60px. The 11ty markup carried no classes, so dropping them restores both.

Email icon. It was a <UIcon>, which renders a masked <span> with no intrinsic aspect ratio, so the link laid out 36x20 against the 20x20 the siblings get. That is the spacing. Lucide's mail is also an outline where the partial was solid. Mail and RSS now have components next to the other social icons, carrying the same paths the partials had.

@dimitrieh
dimitrieh requested a review from Yndira-E September 15, 2026 14:24

@Yndira-E Yndira-E left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I’m approving this. There’s only one small issue, which is also present in the live version: when one card is taller than the others, the other cards don’t adjust, and on hover, the hidden card slides behind the empty space at the bottom.

Image

If you could fix it here, that would be great. Otherwise, we can address it in a follow-up PR. This isn’t a blocker, so I’ll leave it up to you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants