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..14b862a3 --- /dev/null +++ b/components/MetaBar/index.jsx @@ -0,0 +1,76 @@ +import MetaBar from '@node-core/ui-components/Containers/MetaBar'; +import AvatarGroup from '@node-core/ui-components/Common/AvatarGroup'; +import BaseButton from '@node-core/ui-components/Common/BaseButton'; +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'; + +import styles from './index.module.css'; + +const OC_URL = 'https://opencollective.com/webpack'; + +// 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') + .sort((a, b) => b.monthly.value - a.monthly.value); + +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 + ? { + [platinumSponsors.length > 1 + ? 'Featured Sponsors' + : 'Featured Sponsor']: ( +
+ {platinumSponsors.map(sponsor => ( + + ))} + + Become a sponsor + +
+ ), + } + : {}), + }} + /> + ); +}; diff --git a/components/MetaBar/index.module.css b/components/MetaBar/index.module.css new file mode 100644 index 00000000..f47fe189 --- /dev/null +++ b/components/MetaBar/index.module.css @@ -0,0 +1,12 @@ +@reference "../../styles/index.css"; + +.sponsors { + @apply flex + w-full + flex-col + gap-3; +} + +.becomeSponsor { + @apply no-underline!; +} 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/components/Sponsors/Card/index.jsx b/components/Sponsors/Card/index.jsx index 4f8782c3..47cb464e 100644 --- a/components/Sponsors/Card/index.jsx +++ b/components/Sponsors/Card/index.jsx @@ -19,12 +19,14 @@ const amountLabel = (sponsor, metric) => * sponsor: { name: string, slug: string, imageUrl: string|null, url: string, monthly: { value: number, tier: string|null }, allTime: { value: number, tier: string|null }, description?: string }, * size?: 'lg'|'md'|'sm'|'xs', * metric?: 'monthly'|'allTime', + * showAmount?: boolean, * }} props */ export default function SponsorCard({ sponsor, size = 'md', metric = 'monthly', + showAmount = true, className, ...props }) { @@ -53,7 +55,11 @@ export default function SponsorCard({

{sponsor.description}

)}
- {amountLabel(sponsor, metric)} + {showAmount && ( + + {amountLabel(sponsor, metric)} + + )} Visit →
@@ -72,7 +78,7 @@ export default function SponsorCard({ {sponsor.name} - {size !== 'xs' && ( + {size !== 'xs' && showAmount && ( {amountLabel(sponsor, metric)} )} diff --git a/components/Sponsors/Card/index.module.css b/components/Sponsors/Card/index.module.css index 41ebebcb..1759c6b3 100644 --- a/components/Sponsors/Card/index.module.css +++ b/components/Sponsors/Card/index.module.css @@ -6,7 +6,7 @@ border border-neutral-200 bg-white - no-underline + no-underline! transition-colors duration-150 hover:border-blue-300 @@ -96,6 +96,7 @@ @apply ml-auto text-xl leading-none + font-normal text-neutral-300 dark:text-neutral-600; } diff --git a/eslint.config.mjs b/eslint.config.mjs index 4222ab72..7aaf7509 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -19,6 +19,15 @@ export default [ }, }, { - ignores: ['node_modules/', 'out/', '.cache/', 'webpack/', 'pages/api'], + ignores: [ + 'node_modules/', + 'out/', + '.cache/', + 'webpack/', + 'pages/api', + 'pages/docs/api', + 'pages/docs/loaders', + 'pages/docs/plugins', + ], }, ]; diff --git a/layouts/PartialArticle/index.jsx b/layouts/PartialArticle/index.jsx new file mode 100644 index 00000000..c03c8709 --- /dev/null +++ b/layouts/PartialArticle/index.jsx @@ -0,0 +1,30 @@ +import NavBar from '../../components/NavBar.jsx'; +import Footer from '../../components/Footer/index.jsx'; +import SideBar from '../../components/SideBar.jsx'; + +import styles from './index.module.css'; + +/** + * Article shell with a sidebar but no metabar. Mirrors the default Layout's + * navigation/sidebar/footer chrome while leaving the main column free for + * custom page content (e.g. the Sponsors page). + * + * @param {{ metadata: object, children: import('preact').ComponentChildren }} props + */ +export default function PartialArticle({ metadata, children }) { + return ( + <> + + +
+ + +
{children}
+
+ +