refactor: introduce PageShell for the shared page scaffold (#7106) [architect] - #7107
Conversation
…ines/StarField/Footer scaffold
12 page.tsx files under src/app/[locale]/*/ currently hand-roll the same
four-widget page scaffold (Navbar + GridLines + StarField + Footer), each
with slightly different prop values imported one-by-one from the barrel.
src/app/[locale]/layout.tsx only sets up i18n/theme/fonts; there is no
shared layout for these page shells today.
Introduces src/components/master-page/PageShell.tsx that owns the
canonical grid (horizontalLines=21, verticalLines=18) and starfield
(density=medium, showComets=true, cometCount=3) props extracted from
the eight-page majority, and lets the three intentional variant classes
(marketplace/quick-installation low+2; contribute-handbook high+5;
coming-soon* bare) override via a typed background prop:
<PageShell background={{ stars: { density: 'high', cometCount: 5 } }}>
Setting background.grid or background.stars to false drops that layer;
showFooter=false suppresses the Footer.
No page.tsx is ported yet: this PR only lands the interface + tests so
each page port can be reviewed in isolation for visual regression. See
Refs #7106 for the drift matrix and the per-page port sequence.
Tests (9 cases) cover default forwarding, partial overrides on grid and
stars, both layers individually disabled, both layers together, footer
suppression, and outer/wrapper class propagation. Widgets are mocked
per the src/__tests__/AboutSection.render.test.tsx pattern (the
underlying animations are three.js/raf-driven and already excluded
from coverage in vitest.config.ts).
Refs #7106 (partial: PR ships PageShell + tests; per-page ports are
follow-up PRs, one PR per port batch per the issue plan)
Signed-off-by: architect <architect@localhost>
kubestellar-prow
Bot
added
the
dco-signoff: yes
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
✅ Deploy Preview for kubestellar-docs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
kubestellar-prow
Bot
added
size/L
|
Hi @hivecommons-hive[bot]. Thanks for your PR. I'm waiting for a kubestellar member to verify that this patch is reasonable to test. If it is, they should reply with Once the patch is verified, the new status will be reflected by the I understand the commands that are listed here. DetailsInstructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. |
|
Thank you for your contribution! Your PR has been merged. Check out what's new:
Stay connected: Slack #kubestellar-dev | Multi-Cluster Survey |
…ers + fix shell DOM (#7108) The PageShell shipped in #7107 had a subtly wrong background layer (absolute -z-10 with no opaque base) that did not match the canonical DOM used by every page in src/app/[locale]/*/page.tsx. Since no page had adopted it yet, this commit fixes the interface before any callers depend on it, and then ports the four pages that use the exact default content wrapper ("relative z-10 pt-7") to it: - src/app/[locale]/ladder/page.tsx - src/app/[locale]/leaderboard/page.tsx - src/app/[locale]/leaderboard/[username]/page.tsx - src/app/[locale]/partners/page.tsx PageShell now renders exactly: <div outer> <Navbar/> <div className="fixed inset-0 z-0"> <div className="absolute inset-0 bg-[#0a0a0a]"/> <StarField/> <GridLines/> </div> <div className="relative z-10 pt-7">{children}</div> <Footer/> </div> New knobs: baseLayerClassName (pass false to omit); contentClassName (pass null to omit wrapper — for pages with custom content wrappers). Vitest: 13/13 pass. tsc --noEmit clean on all four ported pages. Refs #7106 (partial: 3 canonical pages [products, programs, programs/[slug]/ProgramPageClient] with custom content wrappers + coming-soon-*-page.tsx variants remain) Signed-off-by: kubestellar-hive[bot] <223556219+Copilot@users.noreply.github.com> Co-authored-by: kubestellar-hive[bot] <223556219+Copilot@users.noreply.github.com>
Refactor
Introduces
src/components/master-page/PageShell.tsx, a shared scaffold for the twelvesrc/app/[locale]/*/page.tsxfiles that each hand-roll<Navbar/> + <GridLines/> + <StarField/> + <Footer/>today with drifted defaults.src/app/[locale]/layout.tsxonly sets up i18n/theme/fonts — there is no shared layout for these page shells yet.PageShellowns the canonical defaults extracted from the eight-page majority —grid { horizontalLines: 21, verticalLines: 18 }andstars { density: "medium", showComets: true, cometCount: 3 }— and lets the three intentional variant classes (marketplace/quick-installationlow+2,contribute-handbookhigh+5,coming-soon*bare) override via a typedbackgroundprop. Settingbackground.gridorbackground.starstofalsedrops that layer entirely;showFooter={false}suppresses the footer.Not in this PR — deliberately
No page.tsx is ported yet. This PR lands only the interface + tests so each page port can be reviewed in isolation for visual regression. #7106 documents the drift matrix and the per-page port sequence (8 canonical pages, then 3 variant pages, then
coming-soon*+ theacmm-leaderboardstrokeColorone-off).Verification
npx vitest run src/__tests__/PageShell.test.tsx— 9 tests pass, covering: default forwarding to both widgets, partial overrides merged onto defaults for both, both layers individually disabled, both layers together disabled (background wrapper omitted), footer suppression, and outer/wrapper class propagation.npx tsc --noEmit— clean.npx eslint src/components/master-page/PageShell.tsx src/__tests__/PageShell.test.tsx— clean.src/__tests__/AboutSection.render.test.tsx's pattern; the underlying animation modules are three.js / raf-driven and already excluded from coverage invitest.config.ts.Refs #7106 (partial: PR ships PageShell + tests; per-page ports are follow-up PRs, one PR per port batch per the issue plan)
Filed by architect agent (ACMM L6 — full mode)
— hive: agent=architect backend=copilot model=claude-opus-4.7 copilot=1.0.88