feat: sponsorship & sidebar improvements

.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

.prettierignore

@@ -2,6 +2,8 @@ node_modules
 out
 *.generated.*
 /.cache
-/pages/api
+/pages/docs/api
+/pages/docs/loaders
+/pages/docs/plugins
 versions.json
 /generated

.stylelintignore

@@ -2,6 +2,8 @@ node_modules
 out
 *.generated.*
 /.cache
-/pages/api
+/pages/docs/api
+/pages/docs/loaders
+/pages/docs/plugins
 versions.json
 /generated

components/MetaBar/index.jsx

@@ -0,0 +1,62 @@
+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')
+  .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 (
+    <MetaBar
+      heading="Table of Contents"
+      headings={{ items: headings }}
+      items={{
+        'Reading Time': readingTime,
+        ...(CLIENT && authors?.length
+          ? {
+              Authors: <AvatarGroup avatars={authors} as="a" limit={5} />,
+            }
+          : {}),
+        Contribute: (
+          <>
+            <GitHubIcon className="fill-neutral-700 dark:fill-neutral-100" />
+            <a href={editThisPage}>Edit this page</a>
+          </>
+        ),
+        ...(platinumSponsors.length
+          ? {
+              [platinumSponsors.length > 1
+                ? 'Featured Sponsors'
+                : 'Featured Sponsor']: (
+                <div className="flex w-full flex-col gap-3">
+                  {platinumSponsors.map(sponsor => (
+                    <SponsorCard
+                      key={sponsor.slug}
+                      sponsor={sponsor}
+                      size="sm"
+                      showAmount={false}
+                    />
+                  ))}
+                </div>
+              ),
+            }
+          : {}),
+      }}
+    />
+  );
+};

components/SideBar.jsx

@@ -6,26 +6,28 @@ const redirect = url => (window.location.href = url);
 
 const PrefetchLink = props => <a {...props} rel="prefetch" />;
 
-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 (
-    <SideBar
-      pathname={path}
-      groups={groupsFor(path)}
-      onSelect={redirect}
-      as={PrefetchLink}
-      title="Navigation"
-    />
-  );
-};
+export default ({ metadata }) => (
+  <SideBar
+    pathname={pathnameFor(metadata.path)}
+    groups={groupsFor(metadata.path)}
+    onSelect={redirect}
+    as={PrefetchLink}
+    title="Navigation"
+  />
+);

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({
           <p className={styles.description}>{sponsor.description}</p>
         )}
         <div className={styles.footer}>
-          <span className={styles.amount}>{amountLabel(sponsor, metric)}</span>
+          {showAmount && (
+            <span className={styles.amount}>
+              {amountLabel(sponsor, metric)}
+            </span>
+          )}
           <span className={styles.visit}>Visit &rarr;</span>
         </div>
       </a>
@@ -72,7 +78,7 @@ export default function SponsorCard({
       </div>
       <span className={styles.body}>
         <span className={styles.name}>{sponsor.name}</span>
-        {size !== 'xs' && (
+        {size !== 'xs' && showAmount && (
           <span className={styles.amount}>{amountLabel(sponsor, metric)}</span>
         )}
       </span>

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;
 }

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',
+    ],
   },
 ];

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 }) {
     <>
       <NavBar metadata={metadata} />
 
-      <main className={styles.page}>
-        <section className={styles.sponsorsSection}>
-          <div className={styles.container}>
-            <SectionHeader
-              eyebrow="Our sponsors"
-              title="The organizations behind webpack"
-            />
-            <div className={styles.actions}>
-              <BaseButton
-                href={OC_URL}
-                target="_blank"
-                rel="noreferrer noopener"
-                kind="primary"
-              >
-                View on Open Collective
-              </BaseButton>
-            </div>
-            <div className={styles.toolbar}>
-              <SortToggle value={metric} onChange={setMetric} />
-            </div>
-            <div className={styles.tiers}>
-              {TIERS.map(tier => (
-                <SponsorTier
-                  key={tier.tier}
-                  tier={tier.tier}
-                  label={tier.label}
-                  price={tier.price[metric]}
-                  cardSize={tier.cardSize}
-                  sponsors={buckets[tier.tier]}
-                  metric={metric}
-                />
-              ))}
+      <div className={styles.shell}>
+        <aside className={styles.sidebar}>
+          <SideBar metadata={metadata} />
+        </aside>
+
+        <main className={styles.page}>
+          <section className={styles.sponsorsSection}>
+            <div className={styles.container}>
+              <SectionHeader
+                eyebrow="Our sponsors"
+                title="The organizations supporting webpack"
+              />
+              <div className={styles.actions}>
+                <BaseButton
+                  href={OC_URL}
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  kind="primary"
+                >
+                  View on Open Collective
+                </BaseButton>
+              </div>
+              <div className={styles.toolbar}>
+                <SortToggle value={metric} onChange={setMetric} />
+              </div>
+              <div className={styles.tiers}>
+                {TIERS.map(tier => (
+                  <SponsorTier
+                    key={tier.tier}
+                    tier={tier.tier}
+                    label={tier.label}
+                    price={tier.price[metric]}
+                    cardSize={tier.cardSize}
+                    sponsors={buckets[tier.tier]}
+                    metric={metric}
+                  />
+                ))}
+              </div>
             </div>
-          </div>
-        </section>
+          </section>
 
-        <section className={styles.backersSection}>
-          <div className={styles.container}>
-            <SectionHeader
-              eyebrow="Our backers"
-              title="And the people who chip in"
-            />
-            <div className={styles.backersBody}>
-              <BackerWall backers={data.backers} />
+          <section className={styles.backersSection}>
+            <div className={styles.container}>
+              <SectionHeader
+                eyebrow="Our backers"
+                title="And the people who chip in"
+              />
+              <div className={styles.backersBody}>
+                <BackerWall backers={data.backers} />
+              </div>
             </div>
-          </div>
-        </section>
-      </main>
+          </section>
+        </main>
+      </div>
 
       <Footer />
     </>

layouts/Sponsors/index.module.css

@@ -1,7 +1,23 @@
 @reference "../../styles/index.css";
 
+.shell {
+  @apply block
+    w-full
+    min-[896px]:grid
+    min-[896px]:grid-cols-[--spacing(56)_1fr];
+}
+
+.sidebar {
+  @apply min-[896px]:sticky
+    min-[896px]:top-0
+    min-[896px]:grid
+    min-[896px]:h-svh
+    min-[896px]:overflow-y-auto;
+}
+
 .page {
-  @apply bg-white
+  @apply min-w-0
+    bg-white
     text-neutral-900
     dark:bg-neutral-950
     dark:text-white;

pages/about/branding.md

@@ -1,3 +1,7 @@
+---
+authors: avivkeller
+---
+
 # Branding of webpack
 
 Here you can find **webpack** project brand guidelines and assets. Official artwork is maintained in the OpenJS Foundation [artwork repository](https://github.com/openjs-foundation/artwork/tree/main/projects/webpack).

pages/about/index.md

@@ -0,0 +1,3 @@
+# About webpack
+
+STUB

pages/docs/index.md

@@ -0,0 +1,3 @@
+# Documentation
+
+STUB