@mdn/fred 2.2.0 → 2.2.1

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## [2.2.1](https://github.com/mdn/fred/compare/v2.2.0...v2.2.1) (2026-02-10)
+
+
+### Bug Fixes
+
+* **content-section:** Make table headings bold ([#1286](https://github.com/mdn/fred/issues/1286)) ([bc302e0](https://github.com/mdn/fred/commit/bc302e04ff2c6d94382f194b7990e3baeeb30a9d))
+* **homepage-contributor-spotlight:** fix content overflow ([#1045](https://github.com/mdn/fred/issues/1045)) ([bf72208](https://github.com/mdn/fred/commit/bf722088ee43f746bece188fc92c63066f420255))
+* **layout:** consolidate 2 sidebar layout across content types ([#1265](https://github.com/mdn/fred/issues/1265)) ([85dd580](https://github.com/mdn/fred/commit/85dd580a11ad1e585c5cd70b0d62169fc64a029a))
+* **layout:** increase gap between sidebar and content ([#1154](https://github.com/mdn/fred/issues/1154)) ([53d1adc](https://github.com/mdn/fred/commit/53d1adc64482ebfa56f4be57b3a69a56767a8126))
+* **play-console:** preserve whitespace ([#674](https://github.com/mdn/fred/issues/674)) ([2b69dcc](https://github.com/mdn/fred/commit/2b69dcc922d31262eff85710f0986350b8a9efc0))
+* **sidebar:** titles with code element run together ([#1285](https://github.com/mdn/fred/issues/1285)) ([15be5f8](https://github.com/mdn/fred/commit/15be5f8caae8d19af403870961f7d04db3fabcba))
+
+
+### Miscellaneous
+
+* **deps-dev:** bump @mdn/browser-compat-data from 7.3.0 to 7.3.1 ([#1289](https://github.com/mdn/fred/issues/1289)) ([b123c55](https://github.com/mdn/fred/commit/b123c554187a0a6d5102fe602c26befadebc96aa))
+* **deps-dev:** bump eslint-plugin-jsdoc from 62.5.0 to 62.5.1 in the npm-dev group ([#1280](https://github.com/mdn/fred/issues/1280)) ([8c73e7c](https://github.com/mdn/fred/commit/8c73e7cbb85cd09c4eaa8ee93663489ec965abfe))
+* **deps-dev:** bump eslint-plugin-jsdoc in the npm-dev group ([8c73e7c](https://github.com/mdn/fred/commit/8c73e7cbb85cd09c4eaa8ee93663489ec965abfe))
+* **deps-dev:** bump lefthook from 2.0.16 to 2.1.0 in the npm-dev group ([#1276](https://github.com/mdn/fred/issues/1276)) ([443d179](https://github.com/mdn/fred/commit/443d1794356c6c23ccb3eff8b55fe65a9ea9b9c1))
+* **deps-dev:** bump sass-loader from 16.0.6 to 16.0.7 in the npm-dev group ([#1283](https://github.com/mdn/fred/issues/1283)) ([5edac32](https://github.com/mdn/fred/commit/5edac32b4f392e66fe594a721a3d1678d7795314))
+* **deps-dev:** bump sass-loader in the npm-dev group ([5edac32](https://github.com/mdn/fred/commit/5edac32b4f392e66fe594a721a3d1678d7795314))
+* **deps-dev:** bump stylelint from 17.1.0 to 17.1.1 in the npm-dev group ([#1278](https://github.com/mdn/fred/issues/1278)) ([68408a2](https://github.com/mdn/fred/commit/68408a28e8da5f96ff677b4dcc4e0db0aba9ea46))
+* **deps-dev:** bump stylelint in the npm-dev group ([68408a2](https://github.com/mdn/fred/commit/68408a28e8da5f96ff677b4dcc4e0db0aba9ea46))
+* **deps-dev:** bump the npm-dev group with 2 updates ([#1273](https://github.com/mdn/fred/issues/1273)) ([c46c81e](https://github.com/mdn/fred/commit/c46c81ec9bc8d3969ccfbc18b70b81502e51b20e))
+* **deps-dev:** bump the npm-dev group with 2 updates ([#1281](https://github.com/mdn/fred/issues/1281)) ([26cff5b](https://github.com/mdn/fred/commit/26cff5b1f857a9a9641cfc566b972b35110f65b6))
+* **deps-dev:** bump the npm-dev group with 5 updates ([#1287](https://github.com/mdn/fred/issues/1287)) ([16f94d1](https://github.com/mdn/fred/commit/16f94d1c4f638e18ace598e24377c87aba9ebc69))
+* **deps-dev:** bump the npm-dev group with 5 updates ([#1292](https://github.com/mdn/fred/issues/1292)) ([022c787](https://github.com/mdn/fred/commit/022c787b408263ea5d0bddd809cef77672d9614b))
+* **deps-dev:** bump webpack from 5.99.5 to 5.105.0 ([#1284](https://github.com/mdn/fred/issues/1284)) ([242007b](https://github.com/mdn/fred/commit/242007b364b9890471be474f2bc3d8cd777e55ff))
+* **deps:** bump @mdn/rari from 0.2.11 to 0.2.12 ([#1277](https://github.com/mdn/fred/issues/1277)) ([ba08f2e](https://github.com/mdn/fred/commit/ba08f2efdd8ca249d5e5c468bc8f1c5063101321))
+
 ## [2.2.0](https://github.com/mdn/fred/compare/v2.1.0...v2.2.0) (2026-02-02)
 
 

package/components/content-section/server.css

@@ -157,7 +157,7 @@
     }
 
     th {
-      font-weight: var(--font-weight-normal);
+      font-weight: var(--font-weight-bold);
       text-align: left;
     }
 

package/components/curriculum/layout.css

@@ -1,39 +1,12 @@
-.curriculum-content-container {
-  display: grid;
-
-  grid-template-areas:
-    "sidebar . header . toc"
-    "sidebar . body   . toc";
-  grid-template-rows: min-content auto;
-  grid-template-columns: var(--layout-2-sidebars);
-
-  justify-content: space-between;
-
-  padding-inline: var(--layout-side-padding);
-
-  .curriculum-layout__content {
-    display: contents;
-  }
-
-  .curriculum-layout__header {
-    grid-area: header;
-  }
+@import url("../layout/2-sidebars.css");
 
+.curriculum-content-container {
   .curriculum-layout__body {
-    grid-area: body;
     padding-bottom: 3rem;
   }
 
   .curriculum-layout__sidebar {
-    grid-area: sidebar;
     padding-top: 0;
-
-    @media (--screen-layout-2-sidebars) {
-      .left-sidebar {
-        padding-right: calc(var(--layout-sidebar-gap) / 2);
-        margin-right: calc(var(--layout-sidebar-gap) / -2);
-      }
-    }
   }
 
   .curriculum-layout__toc {
@@ -41,62 +14,14 @@
 
     flex-wrap: wrap;
 
-    grid-area: toc;
-
     gap: 0.5rem;
     align-content: start;
     align-items: start;
     justify-content: space-between;
   }
 
-  .curriculum-layout__sidebar .left-sidebar,
-  .curriculum-layout__toc {
-    position: sticky;
-    top: var(--sticky-header-height);
-
-    max-height: calc(100vh - var(--sticky-header-height));
-
-    overflow-y: auto;
-  }
-
-  @media (--screen-layout-1-sidebar-or-less) {
-    grid-template-areas:
-      "toc . header"
-      "toc . body";
-    grid-template-columns: var(--layout-1-sidebar-left);
-
-    .curriculum-layout__sidebar {
-      z-index: 1;
-
-      display: none;
-
-      grid-area: toc;
-
-      background: var(--color-background-page);
-    }
-  }
-
   @media (--screen-layout-no-sidebar) {
-    display: block;
-
-    .curriculum-layout__sidebar {
-      position: fixed;
-      inset: 0;
-      top: var(--sticky-header-height);
-      z-index: var(--z-index-sidebar-mobile);
-
-      .left-sidebar {
-        padding: 1rem;
-      }
-    }
-
     .curriculum-layout__toc {
-      position: unset;
-      top: unset;
-
-      max-height: unset;
-
-      overflow-y: unset;
       --toc-header-font-size: var(--font-size-larger);
     }
   }

package/components/curriculum/sidebar.css

@@ -1,9 +1,5 @@
 .curriculum-content-container .left-sidebar {
-  position: sticky;
-  top: var(--sticky-header-height);
-
   padding-bottom: 3rem;
-
   overflow-wrap: anywhere;
 
   ol {

package/components/curriculum/toc.css

@@ -1,7 +1,5 @@
 .curriculum-content-container {
   .curriculum-layout__toc {
-    padding: 2px;
-
     .document-toc {
       padding: 0;
       margin-bottom: 2rem;
@@ -83,7 +81,7 @@
         }
       }
 
-      @media (--screen-small-and-narrower) {
+      @media (--screen-layout-no-sidebar) {
         padding: 0 1rem;
       }
 

package/components/curriculum-about/server.js

@@ -29,24 +29,33 @@ export class CurriculumAbout extends ServerComponent {
     return PageLayout.render(
       context,
       html`
-        <div class="curriculum-layout curriculum-content-container">
+        <div
+          class="layout__2-sidebars-inline curriculum-layout curriculum-content-container"
+        >
           <main
             id="content"
-            class="curriculum-layout__content curriculum-content-container curriculum-about curriculum-module topic-${topicCssClass}"
+            class="layout__content curriculum-layout__content curriculum-content-container curriculum-about curriculum-module topic-${topicCssClass}"
             lang=${doc.locale}
           >
-            <header class="curriculum-layout__header curriculum-content">
+            <header
+              class="layout__header curriculum-layout__header curriculum-content"
+            >
               <h1><span>${coloredTitle}</span> ${restTitle.join(" ")}</h1>
             </header>
-            <aside class="curriculum-layout__toc">
+            <aside class="layout__right-sidebar curriculum-layout__toc">
               ${toc}
               <mdn-placement-sidebar></mdn-placement-sidebar>
             </aside>
-            <div class="curriculum-layout__body curriculum-content">
+            <div
+              class="layout__body curriculum-layout__body curriculum-content"
+            >
               ${renderCurriculumBody(context, doc)}
             </div>
           </main>
-          <aside class="curriculum-layout__sidebar" id="main-sidebar">
+          <aside
+            class="layout__left-sidebar curriculum-layout__sidebar"
+            id="main-sidebar"
+          >
             ${sidebar}
           </aside>
         </div>

package/components/curriculum-default/server.js

@@ -29,24 +29,33 @@ export class CurriculumDefault extends ServerComponent {
     return PageLayout.render(
       context,
       html`
-        <div class="curriculum-layout curriculum-content-container">
+        <div
+          class="layout__2-sidebars-inline curriculum-layout curriculum-content-container"
+        >
           <main
             id="content"
-            class="curriculum-layout__content curriculum-content-container curriculum-default curriculum-about curriculum-module topic-${topicCssClass}"
+            class="layout__content curriculum-layout__content curriculum-content-container curriculum-default curriculum-about curriculum-module topic-${topicCssClass}"
             lang=${doc.locale}
           >
-            <header class="curriculum-layout__header curriculum-content">
+            <header
+              class="layout__header curriculum-layout__header curriculum-content"
+            >
               <h1><span>${coloredTitle}</span> ${restTitle.join(" ")}</h1>
             </header>
-            <aside class="curriculum-layout__toc">
+            <aside class="layout__right-sidebar curriculum-layout__toc">
               ${toc}
               <mdn-placement-sidebar></mdn-placement-sidebar>
             </aside>
-            <div class="curriculum-layout__body curriculum-content">
+            <div
+              class="layout__body curriculum-layout__body curriculum-content"
+            >
               ${renderCurriculumBody(context, doc)}
             </div>
           </main>
-          <aside class="curriculum-layout__sidebar" id="main-sidebar">
+          <aside
+            class="layout__left-sidebar curriculum-layout__sidebar"
+            id="main-sidebar"
+          >
             ${sidebar}
           </aside>
         </div>

package/components/curriculum-module/server.js

@@ -32,13 +32,17 @@ export class CurriculumModule extends ServerComponent {
     return PageLayout.render(
       context,
       html`
-        <div class="curriculum-layout curriculum-content-container">
+        <div
+          class="layout__2-sidebars-inline curriculum-layout curriculum-content-container"
+        >
           <main
             id="content"
-            class="curriculum-layout__content curriculum-content-container curriculum-module topic-${topicCssClass}"
+            class="layout__content curriculum-layout__content curriculum-content-container curriculum-module topic-${topicCssClass}"
             lang=${doc.locale}
           >
-            <header class="curriculum-layout__header curriculum-content">
+            <header
+              class="layout__header curriculum-layout__header curriculum-content"
+            >
               ${doc?.topic ? renderTopicIcon(context, doc.topic) : nothing}
               <h1>${doc?.title}</h1>
               ${doc?.topic
@@ -48,16 +52,21 @@ export class CurriculumModule extends ServerComponent {
                 ? html`<p class="module-group">${doc.group}</p>`
                 : nothing}
             </header>
-            <aside class="curriculum-layout__toc">
+            <aside class="layout__right-sidebar curriculum-layout__toc">
               ${toc}
               <mdn-placement-sidebar></mdn-placement-sidebar>
             </aside>
-            <div class="curriculum-layout__body curriculum-content">
+            <div
+              class="layout__body curriculum-layout__body curriculum-content"
+            >
               ${renderCurriculumBody(context, doc)}
               ${this.renderPrevNext(context, doc)}
             </div>
           </main>
-          <aside class="curriculum-layout__sidebar" id="main-sidebar">
+          <aside
+            class="layout__left-sidebar curriculum-layout__sidebar"
+            id="main-sidebar"
+          >
             ${sidebar}
           </aside>
         </div>

package/components/curriculum-overview/server.js

@@ -36,22 +36,28 @@ export class CurriculumOverview extends ServerComponent {
     return PageLayout.render(
       context,
       html`
-        <div class="curriculum-layout curriculum-content-container">
+        <div
+          class="layout__2-sidebars-inline curriculum-layout curriculum-content-container"
+        >
           <main
             id="content"
-            class="curriculum-layout__content curriculum-content-container curriculum-overview topic-${topicCssClass}"
+            class="layout__content curriculum-layout__content curriculum-content-container curriculum-overview topic-${topicCssClass}"
             lang=${doc.locale}
           >
-            <header class="curriculum-layout__header curriculum-content">
+            <header
+              class="layout__header curriculum-layout__header curriculum-content"
+            >
               <h1><span>${coloredTitle}</span> ${restTitle}</h1>
             </header>
 
-            <aside class="curriculum-layout__toc">
+            <aside class="layout__right-sidebar curriculum-layout__toc">
               ${toc}
               <mdn-placement-sidebar></mdn-placement-sidebar>
             </aside>
 
-            <div class="curriculum-layout__body curriculum-content">
+            <div
+              class="layout__body curriculum-layout__body curriculum-content"
+            >
               ${renderCurriculumBody(context, doc)}
               ${doc?.modules && doc.modules.length > 0
                 ? html`
@@ -65,41 +71,14 @@ export class CurriculumOverview extends ServerComponent {
             </div>
           </main>
 
-          <aside class="curriculum-layout__sidebar" id="main-sidebar">
+          <aside
+            class="layout__left-sidebar curriculum-layout__sidebar"
+            id="main-sidebar"
+          >
             ${sidebar}
           </aside>
         </div>
       `,
-
-      // html`
-      //   <main
-      //     id="content"
-      //     class="curriculum-content-container container curriculum-overview topic-${topicCssClass}"
-      //   >
-      //     ${sidebar}
-      //     <article id="content" class="curriculum-content" lang=${doc.locale}>
-      //       <header>
-      //         <h1><span>${coloredTitle}</span> ${restTitle}</h1>
-      //       </header>
-      //       ${renderCurriculumBody(context, doc)}
-      //       ${doc?.modules && doc.modules.length > 0
-      //         ? html`
-      //             <section class="module-contents">
-      //               <h2>Module list</h2>
-      //               ${renderModulesList(context, doc.modules)}
-      //             </section>
-      //           `
-      //         : nothing}
-      //       ${this.renderPrevNext(context, doc)}
-      //     </article>
-      //     <div class="toc-container">
-      //       <aside class="toc">
-      //         <nav>${toc}</nav>
-      //       </aside>
-      //       <mdn-placement-sidebar></mdn-placement-sidebar>
-      //     </div>
-      //   </main>
-      // `,
     );
   }
 

package/components/generic-layout/server.css

@@ -1,69 +1,13 @@
-/* Generic Layout */
-.generic-layout {
-  display: grid;
-
-  grid-template-areas: "sidebar . body . toc";
-  grid-template-columns: var(--layout-2-sidebars);
-
-  padding-inline: var(--layout-side-padding);
-
-  @media (--screen-layout-1-sidebar-or-less) {
-    grid-template-areas: "leftsidebar . body";
-    grid-template-columns: var(--layout-1-sidebar-left);
-
-    .generic-layout__toc {
-      grid-area: leftsidebar;
-    }
-
-    .generic-layout__sidebar {
-      z-index: 1;
-
-      display: none;
-
-      grid-area: leftsidebar;
-
-      background: var(--color-background-page);
-    }
-  }
+@import url("../layout/2-sidebars.css");
 
-  @media (--screen-layout-no-sidebar) {
-    grid-template-areas: ". body .";
-    grid-template-columns: var(--layout-no-sidebar);
-
-    .generic-layout__toc {
-      display: none;
-    }
-
-    .generic-layout__sidebar {
-      inset: 0;
-      top: var(--sticky-header-height);
-      z-index: var(--z-index-sidebar-mobile);
-
-      display: none;
-
-      grid-area: body;
-
-      .left-sidebar {
-        padding: 1rem;
-      }
-    }
-  }
-}
-
-/* Sidebar */
-.generic-layout__sidebar {
-  grid-area: sidebar;
-  padding: 2rem 0;
-}
+/* Generic Layout */
 
 /* Content */
 .generic-layout__content {
-  grid-area: body;
-  padding: 2rem 0;
+  padding-block: 2rem;
 }
 
 /* TOC */
 .generic-layout__toc {
-  grid-column: toc;
-  padding: 2rem 0;
+  padding-block: 2rem;
 }

package/components/generic-layout/server.js

@@ -11,12 +11,17 @@ export class GenericLayout extends ServerComponent {
    */
   render(context) {
     return html`
-      <div class="generic-layout">
-        <aside class="generic-layout__toc">${GenericToc.render(context)}</aside>
-        <div class="generic-layout__content">
+      <div class="layout__2-sidebars generic-layout">
+        <aside class="layout__right-sidebar generic-layout__toc">
+          ${GenericToc.render(context)}
+        </aside>
+        <div class="layout__content generic-layout__content">
           ${GenericContent.render(context)}
         </div>
-        <aside class="generic-layout__sidebar" id="main-sidebar">
+        <aside
+          class="layout__left-sidebar generic-layout__sidebar"
+          id="main-sidebar"
+        >
           ${GenericSidebar.render(context)}
         </aside>
       </div>

package/components/generic-sidebar/server.css

@@ -2,9 +2,7 @@
   --color-accent: var(--color-blue-50);
   --color-background-accent: var(--color-background-blue);
   --color-border-items: light-dark(var(--color-gray-80), var(--color-gray-20));
-
-  position: sticky;
-  top: var(--sticky-header-height);
+  padding-block: 2rem;
   margin-bottom: 2rem;
 
   .generic-sidebar__header {

package/components/generic-toc/server.css

@@ -1,7 +1,4 @@
 .generic-toc {
-  position: sticky;
-  top: var(--sticky-header-height);
-
   .generic-toc__header {
     margin: 0 0 1rem;
 

package/components/homepage-contributor-spotlight/server.css

@@ -21,7 +21,7 @@
 }
 
 .homepage-contributor-spotlight__name {
-  width: max-content;
+  width: fit-content;
 
   padding: 0.125em 0.25em;
 
@@ -37,6 +37,10 @@
   &:not(:hover) {
     text-decoration: none;
   }
+
+  @media (width <= 768px) {
+    text-align: center;
+  }
 }
 
 .homepage-contributor-spotlight__quote {

package/components/html/global.css

@@ -1,6 +1,8 @@
 /* HTML */
 
 html {
+  scroll-behavior: smooth;
+
   font-family: var(--font-family-text);
   font-size: var(--font-size-normal);
   font-feature-settings: "calt" 0;
@@ -15,7 +17,6 @@ html {
   color-scheme: light dark;
 
   background-color: var(--color-background-page);
-  scroll-behavior: smooth;
 
   @media (prefers-reduced-motion: reduce) {
     scroll-behavior: auto;