Pare site to three Flexion Solutions offerings#16
Merged
Conversation
Design doc covering the content-driven featured-labs restructuring, hidden /work/ routes, and nav simplification for this pass.
Bite-sized, TDD-style task list that turns the approved spec into commits — add featured-lab content, loader, LabCard, home rewrite, nav update, route gating, and overlay cleanup.
Matches the project's existing convention where notes/specs/ and notes/plans/ hold ephemeral planning artifacts, while docs/ is for durable behavioral documentation.
danielnaab
temporarily deployed
to
preview/pare-down-to-solutions-offerings
GitHub Actions
Inactive
…out/ Three review fixes rolled into one: - The Learn more grid defined itself as a `container-type: inline-size` container, so the nested `@container (min-width: 48rem)` column rule could never match against its own container. Swap to a media query at 48rem so the two teasers lay out horizontally on desktop. - The "Learn about Flexion" teaser now links to https://flexion.us/ instead of the local /about/ page. - Remove the /about/ page entirely: delete content/about.md and src/pages/about.tsx, drop the route from allRoutes, drop About from header and footer nav, and update smoke, a11y, home, and routes tests to match.
danielnaab
temporarily deployed
to
preview/pare-down-to-solutions-offerings
GitHub Actions
Inactive
Rework the featured-labs cards on the home page to address two UX issues:
**Link differentiation.** Every link now carries a `kind` of `demo`,
`repo`, or `case-study`, rendered with a recognizable inline icon
(globe, GitHub mark, document). Labels shorten to "Live demo",
"Repository", "Case study" — the icons do the category work.
**Sub-project grouping.** Links accept an optional `group` name. When
set, same-group links render under a small uppercase heading. Forms Lab
now makes its two distinct projects (production Platform vs. the
experiment) visually explicit.
**Horizontal band layout.** The card becomes a two-column grid above
40rem (container query) — intro on the left, grouped link panel on the
right. On narrow viewports it stacks. The home page's featured list is
also capped at 72rem so desktop bands don't stretch edge-to-edge.
Schema: `links: [{label, url, kind, group?}]`. Updated the three content
files, loader, loader tests, LabCard component + styles + examples,
LabCard view tests, and docs/featured-content.md.
danielnaab
temporarily deployed
to
preview/pare-down-to-solutions-offerings
GitHub Actions
Inactive
Two defects reported on the home page: - Links weren't right-aligned. The link column sat in the right grid track but its flex children aligned to the column's start, so the block hugged the center gutter. - The second link in a group appeared slightly lower. The list was flex-wrap with a row gap; two-link groups would wrap unpredictably when the label widths were close to the column width. Switch the link list to a vertical stack. In horizontal-band mode (container ≥40rem), right-align each group and its anchors with flex-end + text-align: end. On narrow stacked cards, default start alignment is preserved so the link list reads naturally below the intro.
danielnaab
temporarily deployed
to
preview/pare-down-to-solutions-offerings
GitHub Actions
Inactive
Replace the prior commitment prose with the revised working draft from the convergence meeting: tighter framing around resilience, a single "We're open by default" section with a bulleted list of why Flexion is committed to open source, and a closing paragraph on public benefit. Preserves existing markdown conventions (h1 title, italic status line, h2 section, markdown bullets rendered through the ContentPage pipeline).
danielnaab
temporarily deployed
to
preview/pare-down-to-solutions-offerings
GitHub Actions
Inactive
Replace the horizontal-band layout with a column-per-link design:
- Title and tagline sit on top; a horizontal row of columns sits below,
separated by a subtle top border on the columns row.
- Each column heads with an uppercase kind label ("Demo", "Repository",
"Case study"), followed by the icon-prefixed link itself.
- Columns flow responsively via container queries: 1 column → 2 at
32rem → 4 at 56rem. This keeps Forms Lab's four links on a single
row on desktop while single-link cards remain compact.
- The link `label` is now the project/repo identifier (what you're
linking to) rather than the action, since the action is carried by
the column heading.
- Drop the now-unneeded `group` field from the content schema and
loader. Labels absorb the sub-project identity ("Forms Platform",
"Forms Lab (experiment)") without a separate grouping construct.
danielnaab
temporarily deployed
to
preview/pare-down-to-solutions-offerings
GitHub Actions
Inactive
Rework the column layout so each column represents a distinct link kind (Demo, Repository, Case study), with same-kind links stacking vertically within the column in document order. This makes the Forms Lab card read cleanly — one "Demo" column with Forms Platform above Forms Lab (experiment), one "Repository" column with flexion/forms above flexion/forms-lab. Matching list positions across columns refer to the same project. Headings no longer repeat, so they carry real categorical weight. Other cards adjust naturally: Messaging has one Repository column, Document Extractor has Repository and Case study columns. - `LabCard`: groups links by kind, preserves per-kind document order, emits one column per present kind in fixed order (Demo → Repository → Case study). - Styles: columns container auto-fits at 14rem minimum above 32rem; stacks below. Inner link list is a vertical flex stack with the icon-prefixed anchors. - Update home and component view tests to match; update the home test fixture to include the required `kind` field. - Update docs/featured-content.md to describe the group-by-kind layout.
danielnaab
temporarily deployed
to
preview/pare-down-to-solutions-offerings
GitHub Actions
Inactive
danielnaab
changed the title
Remove the "Status: Working draft reflecting all 10 strategic decisions confirmed as of the 2026-03-23 convergence meeting..." line from the commitment page.
Problem: when links grouped by kind sat in side-by-side columns, the second-row link in one column could sit slightly lower than its sibling in the next column. Each column was its own layout context, so rows didn't share heights across siblings — a short label on the left and a long label on the right wouldn't align. Fix: switch .lab-card__column to a CSS subgrid inheriting rows from .lab-card__columns, so heading + each link row share heights across all columns. Compute --lab-card-rows = max(link count per kind) from JSX so the outer grid defines enough tracks. Also flatten the per-column markup: the inner <ul> wrapper around the link list is gone, since each column now lays out via grid rows directly.
danielnaab
temporarily deployed
to
preview/pare-down-to-solutions-offerings
GitHub Actions
Inactive
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
content/featured/content type andLabCardcomponent. Each featured lab can surface multiple repositories and demo links inside its card./work/directory, per-repo detail pages, and stewardship health page from the public site for this pass. Catalog code, component tests, and the daily catalog refresh workflow stay intact so the directory can be re-enabled later.content/work/*.mdoverlay files.Coordination
The Messaging Lab card links directly to
github.com/flexion/flexion-notify. Merge must be timed with that repo going public to avoid a broken-link window.Test plan
flexion-notify/work/,/work/health/,/work/<slug>/return 404 in preview/