From b5ff5eacfd521466e39b2b8803aa5dd7e2c3b48a Mon Sep 17 00:00:00 2001 From: Aviv Keller Date: Thu, 11 Jun 2026 13:58:53 -0400 Subject: [PATCH 1/2] feat: add metabar, improve sidebar --- .gitignore | 6 +- .prettierignore | 4 +- .stylelintignore | 4 +- components/MetaBar/index.jsx | 60 +++++++++++++++++++ components/SideBar.jsx | 32 +++++----- eslint.config.mjs | 10 +++- layouts/Sponsors/index.jsx | 97 +++++++++++++++++-------------- layouts/Sponsors/index.module.css | 17 +++++- pages/about/branding.md | 4 ++ pages/about/index.md | 3 + pages/docs/index.md | 3 + pages/site.json | 21 +++---- pages/site.mjs | 52 ++++++++++++----- scripts/html/doc-kit.config.mjs | 9 ++- scripts/markdown/api.mjs | 2 +- scripts/markdown/governance.mjs | 2 +- scripts/markdown/readmes.mjs | 12 ++-- 17 files changed, 232 insertions(+), 106 deletions(-) create mode 100644 components/MetaBar/index.jsx create mode 100644 pages/about/index.md create mode 100644 pages/docs/index.md diff --git a/.gitignore b/.gitignore index 3674bb9f..60f03209 100644 --- a/.gitignore +++ b/.gitignore @@ -2,8 +2,8 @@ node_modules out *.generated.* /.cache -/pages/api -/pages/loaders -/pages/plugins +/pages/docs/api +/pages/docs/loaders +/pages/docs/plugins /generated /pages/about/governance diff --git a/.prettierignore b/.prettierignore index f604605e..4f8d655b 100644 --- a/.prettierignore +++ b/.prettierignore @@ -2,6 +2,8 @@ node_modules out *.generated.* /.cache -/pages/api +/pages/docs/api +/pages/docs/loaders +/pages/docs/plugins versions.json /generated \ No newline at end of file diff --git a/.stylelintignore b/.stylelintignore index f604605e..4f8d655b 100644 --- a/.stylelintignore +++ b/.stylelintignore @@ -2,6 +2,8 @@ node_modules out *.generated.* /.cache -/pages/api +/pages/docs/api +/pages/docs/loaders +/pages/docs/plugins versions.json /generated \ No newline at end of file diff --git a/components/MetaBar/index.jsx b/components/MetaBar/index.jsx new file mode 100644 index 00000000..64a9fad4 --- /dev/null +++ b/components/MetaBar/index.jsx @@ -0,0 +1,60 @@ +import MetaBar from '@node-core/ui-components/Containers/MetaBar'; +import AvatarGroup from '@node-core/ui-components/Common/AvatarGroup'; +import GitHubIcon from '@node-core/ui-components/Icons/Social/GitHub'; + +import { editURL } from '#theme/config'; +import sponsors from '#theme/sponsors' with { type: 'json' }; +import SponsorCard from '../Sponsors/Card/index.jsx'; + +// Active recurring platinum-tier sponsors, ranked by monthly amount. There are +// only ever a handful, so the MetaBar features them as full expanded cards. +const platinumSponsors = sponsors.sponsors.filter( + sponsor => sponsor.monthly.tier === 'platinum' +); + +export default ({ metadata, headings = [], readingTime }) => { + const editThisPage = + metadata.source ?? editURL.replace('{path}', metadata.path); + const authors = metadata.authors?.split(',').map(id => ({ + image: `https://avatars.githubusercontent.com/${id.trim()}`, + url: `https://github.com/${id.trim()}`, + nickname: id, + })); + + return ( + , + } + : {}), + Contribute: ( + <> + + Edit this page + + ), + ...(platinumSponsors.length + ? { + 'Webpack is proudly supported by': ( +
+ {platinumSponsors.map(sponsor => ( + + ))} +
+ ), + } + : {}), + }} + /> + ); +}; diff --git a/components/SideBar.jsx b/components/SideBar.jsx index b33cd053..725e5e57 100644 --- a/components/SideBar.jsx +++ b/components/SideBar.jsx @@ -6,26 +6,28 @@ const redirect = url => (window.location.href = url); const PrefetchLink = props => ; -const pathnameFor = path => path.replace(/\/index$/, '') || '/'; +const pathnameFor = path => { + const clean = path.replace(/\/index$/, ''); + if (!clean) return '/'; + return clean.startsWith('/') ? clean : `/${clean}`; +}; const groupsFor = path => { + if (Array.isArray(sidebar)) return sidebar; + const segment = path.split('/').filter(Boolean)[0]; - const matched = sidebar.filter(g => g.groupName.toLowerCase() === segment); - return matched.length > 0 ? matched : sidebar; + return sidebar[segment] ?? []; }; /** * Sidebar component for MDX documentation with page navigation. */ -export default ({ metadata }) => { - const path = pathnameFor(metadata.path); - return ( - - ); -}; +export default ({ metadata }) => ( + +); diff --git a/eslint.config.mjs b/eslint.config.mjs index c79a995e..29ff4016 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -11,6 +11,14 @@ export default [ }, }, { - ignores: ['node_modules/', 'out/', '.cache/', 'webpack/', 'pages/api'], + ignores: [ + 'node_modules/', + 'out/', + '.cache/', + 'webpack/', + 'pages/docs/api', + 'pages/docs/loaders', + 'pages/docs/plugins', + ], }, ]; diff --git a/layouts/Sponsors/index.jsx b/layouts/Sponsors/index.jsx index 3c07c66d..14ea4f64 100644 --- a/layouts/Sponsors/index.jsx +++ b/layouts/Sponsors/index.jsx @@ -4,6 +4,7 @@ import BaseButton from '@node-core/ui-components/Common/BaseButton'; import NavBar from '../../components/NavBar.jsx'; import Footer from '../../components/Footer/index.jsx'; +import SideBar from '../../components/SideBar.jsx'; import SectionHeader from '../../components/SectionHeader/index.jsx'; import SponsorTier from '../../components/Sponsors/Tier/index.jsx'; import BackerWall from '../../components/Sponsors/BackerWall/index.jsx'; @@ -73,54 +74,60 @@ export default function SponsorsLayout({ metadata }) { <> -
-
-
- -
- - View on Open Collective - -
-
- -
-
- {TIERS.map(tier => ( - - ))} +
+ + +
+
+
+ +
+ + View on Open Collective + +
+
+ +
+
+ {TIERS.map(tier => ( + + ))} +
-
-
+ -
-
- -
- +
+
+ +
+ +
-
-
-
+ + +