@mdn/fred 0.1.0 → 0.2.0

package/components/font/global.css

@@ -16,4 +16,7 @@
   --font-size-large: 1.5rem;
   --font-size-normal: 1rem;
   --font-size-small: 0.8rem;
+
+  --font-weight-normal: 400;
+  --font-weight-bold: 600;
 }

package/components/font/inter.css

@@ -12,6 +12,7 @@
   font-family: "Inter";
   font-style: normal;
   font-weight: 100 900;
+  font-feature-settings: "calt" 0;
 
   src: url("fonts/inter-latin.woff2") format("woff2");
   font-display: swap;
@@ -25,6 +26,7 @@
   font-family: "Inter";
   font-style: italic;
   font-weight: 100 900;
+  font-feature-settings: "calt" 0;
 
   src: url("fonts/inter-italic-latin.woff2") format("woff2");
   font-display: swap;
@@ -40,6 +42,7 @@
   font-family: "Inter";
   font-style: normal;
   font-weight: 100 900;
+  font-feature-settings: "calt" 0;
 
   src: url("fonts/inter-latin-extended.woff2") format("woff2");
   font-display: swap;
@@ -53,6 +56,7 @@
   font-family: "Inter";
   font-style: italic;
   font-weight: 100 900;
+  font-feature-settings: "calt" 0;
 
   src: url("fonts/inter-italic-latin-extended.woff2") format("woff2");
   font-display: swap;
@@ -68,6 +72,7 @@
   font-family: "Inter";
   font-style: normal;
   font-weight: 100 900;
+  font-feature-settings: "calt" 0;
 
   src: url("fonts/inter-cyrillic.woff2") format("woff2");
   font-display: swap;
@@ -78,6 +83,7 @@
   font-family: "Inter";
   font-style: italic;
   font-weight: 100 900;
+  font-feature-settings: "calt" 0;
 
   src: url("fonts/inter-italic-cyrillic.woff2") format("woff2");
   font-display: swap;

package/components/footer/server.css

@@ -180,7 +180,11 @@
 .footer__mozilla {
   display: grid;
 
-  grid-template-columns: min-content 1fr;
+  grid-template-areas:
+    "logo"
+    "links"
+    "legal";
+  grid-template-columns: 1fr;
 
   row-gap: 1rem;
   column-gap: 1.5rem;
@@ -192,11 +196,24 @@
 
   border-block-start: 1px solid var(--color-border-primary);
 
+  @media (width > 480px) {
+    grid-template-areas:
+      "logo  links"
+      "legal legal";
+    grid-template-columns: min-content 1fr;
+  }
+
+  .footer__logo {
+    grid-area: logo;
+  }
+
   ul {
     display: flex;
 
     flex-wrap: wrap;
 
+    grid-area: links;
+
     column-gap: 1rem;
 
     padding: 0;
@@ -208,9 +225,9 @@
   }
 
   p {
-    grid-column: span 2;
+    grid-area: legal;
     margin: 0;
-    line-height: 1.5;
+    line-height: var(--font-line-normal);
   }
 
   a {

package/components/footer/server.js

@@ -234,6 +234,9 @@ export class Footer extends ServerComponent {
             })}<br />
             ${context.l10n.raw({
               id: "footer-copyright",
+              args: {
+                year: new Date().getUTCFullYear().toString(),
+              },
               elements: {
                 cc: {
                   tag: "a",

package/components/generic-about/server.css

@@ -1,7 +1,5 @@
 /* variables local to the about page */
 .about-container {
-  --top-nav-height: var(--sticky-header-height);
-
   --max-width: 74rem;
   --gutter: 1rem;
   --about-stats-height: 5.75rem;
@@ -121,7 +119,7 @@
   @media (--screen-medium-and-wider) {
     h1 {
       font-size: var(--font-size-largest);
-      font-weight: 600;
+      font-weight: var(--font-weight-bold);
 
       line-height: 1.2;
 
@@ -167,7 +165,7 @@
         line-height: 120%;
 
         @media (--screen-small-and-narrower) {
-          font-size: 1.25rem;
+          font-size: var(--font-size-large);
         }
       }
     }
@@ -281,7 +279,7 @@
     h2 {
       margin-bottom: 1rem;
       font-size: var(--font-size-larger);
-      font-weight: 600;
+      font-weight: var(--font-weight-bold);
     }
 
     mdn-about-tabs {
@@ -291,6 +289,10 @@
     }
   }
 
+  .tabpanel {
+    scroll-margin-top: calc(var(--sticky-header-height) + 4rem);
+  }
+
   ol,
   ul {
     padding: 0;
@@ -389,16 +391,16 @@
 
         margin: 0;
 
-        font-size: 1.375rem;
-        font-weight: 600;
+        font-size: var(--font-size-large);
+        font-weight: var(--font-weight-bold);
 
-        line-height: 1.5;
+        line-height: var(--font-line-normal);
 
         text-decoration-line: underline;
 
         @media (--screen-medium-and-narrower) {
           margin-bottom: -0.75em;
-          font-size: 1.25rem;
+          font-size: var(--font-size-large);
         }
 
         &::before {
@@ -483,7 +485,7 @@
 
     h4 {
       font-size: var(--font-line-content);
-      font-weight: 600;
+      font-weight: var(--font-weight-bold);
     }
 
     mdn-image-history ul {
@@ -717,7 +719,7 @@
         padding: 1.5rem;
         margin: -1.5rem -1.5rem 0;
 
-        font-size: 1.25rem;
+        font-size: var(--font-size-large);
         font-weight: 500;
 
         color: var(--boxes-header-color);
@@ -763,7 +765,7 @@
         margin-bottom: 0.5rem;
 
         font-size: var(--font-size-normal);
-        font-weight: 600;
+        font-weight: var(--font-weight-bold);
 
         color: var(--about-core-values-color);
 
@@ -919,7 +921,7 @@
     h4,
     h5 {
       font-size: var(--font-line-content);
-      font-weight: 600;
+      font-weight: var(--font-weight-bold);
       text-transform: none;
     }
 
@@ -989,7 +991,7 @@
 
         margin-bottom: 0.75rem;
 
-        font-weight: 600;
+        font-weight: var(--font-weight-bold);
 
         color: var(--about-team-title-color);
       }

package/components/generic-community/server.css

@@ -118,11 +118,11 @@
 
   h2 {
     margin-bottom: 1rem;
-    font-size: 2rem;
-    font-weight: 600;
+    font-size: var(--font-size-larger);
+    font-weight: var(--font-weight-bold);
 
     @media (--screen-small-and-narrower) {
-      font-size: 1.375rem;
+      font-size: var(--font-size-large);
     }
   }
 
@@ -165,11 +165,11 @@
 
     h1 {
       margin-bottom: 1rem;
-      font-size: 2.5rem;
+      font-size: var(--font-size-largest);
       color: var(--header-text-primary);
 
       @media (--screen-small-and-narrower) {
-        font-size: 2rem;
+        font-size: var(--font-size-larger);
       }
     }
 
@@ -208,7 +208,7 @@
         padding: var(--button-padding);
 
         font-size: var(--font-size-small);
-        font-weight: 600;
+        font-weight: var(--font-weight-bold);
 
         color: var(--button-color);
 
@@ -364,7 +364,7 @@
             padding: var(--button-padding);
 
             font-size: var(--font-size-small);
-            font-weight: 600;
+            font-weight: var(--font-weight-bold);
 
             color: var(--button-color);
 
@@ -671,8 +671,8 @@
             margin: -1.5rem;
             margin-bottom: 0;
 
-            font-size: 1.25rem;
-            font-weight: 500;
+            font-size: var(--font-size-large);
+            font-weight: var(--font-weight-bold);
 
             color: var(--boxes-header-color);
 
@@ -700,7 +700,7 @@
         padding: var(--button-padding);
 
         font: var(--font-size-small);
-        font-weight: 600;
+        font-weight: var(--font-weight-bold);
 
         color: var(--button-color);
 
@@ -784,8 +784,8 @@
       }
 
       th {
-        font-size: 1.25rem;
-        font-weight: 500;
+        font-size: var(--font-size-large);
+        font-weight: var(--font-weight-bold);
         background: none;
 
         @media (--screen-small-and-narrower) {
@@ -878,11 +878,11 @@
         }
 
         h3 {
-          font-size: 1.75rem;
-          font-weight: 600;
+          font-size: var(--font-size-large);
+          font-weight: var(--font-weight-bold);
 
           @media (--screen-small-and-narrower) {
-            font-size: 1.25rem;
+            font-size: var(--font-size-large);
           }
         }
 
@@ -899,7 +899,7 @@
           padding: var(--button-padding);
 
           font-size: var(--font-size-small);
-          font-weight: 600;
+          font-weight: var(--font-weight-bold);
 
           color: var(--button-color);
 

package/components/generic-community/server.js

@@ -3,6 +3,7 @@ import { html } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
+import { HeadingAnchor } from "../heading-anchor/server.js";
 import { PageLayout } from "../page-layout/server.js";
 import { ServerComponent } from "../server/index.js";
 
@@ -41,7 +42,11 @@ export class GenericCommunity extends ServerComponent {
     } else if (section.value.id === "help_us_fix_open_issues") {
       return html`
         <section aria-labelledby=${section.value.id}>
-          <h2 id=${section.value.id}>${section.value.title}</h2>
+          ${HeadingAnchor.render(
+            2,
+            section.value.id ? String(section.value.id) : null,
+            String(section.value.title),
+          )}
           <div class="section-content">
             ${unsafeHTML(section.value.content)}
           </div>
@@ -102,9 +107,11 @@ export class GenericCommunity extends ServerComponent {
     // Default: render prose
     return html`
       <section aria-labelledby=${ifDefined(section.value.id ?? undefined)}>
-        <h2 id=${ifDefined(section.value.id ?? undefined)}>
-          ${section.value.title}
-        </h2>
+        ${HeadingAnchor.render(
+          2,
+          section.value.id ? String(section.value.id) : null,
+          String(section.value.title),
+        )}
         <div class="section-content">${unsafeHTML(section.value.content)}</div>
       </section>
     `;

package/components/generic-content/server.css

@@ -64,7 +64,7 @@
         margin-bottom: 2rem;
 
         font-size: var(--font-size-largest);
-        font-weight: 600;
+        font-weight: var(--font-weight-bold);
 
         line-height: 1.2;
       }

package/components/generic-sidebar/server.css

@@ -12,7 +12,7 @@
       margin: 0 0 1rem;
 
       font-size: var(--font-size-large);
-      font-weight: 400;
+      font-weight: var(--font-weight-normal);
 
       line-height: 1.2;
 
@@ -49,7 +49,7 @@
     }
 
     &[aria-current="true"] {
-      font-weight: 600;
+      font-weight: var(--font-weight-bold);
 
       background-color: var(--color-background-accent);
       border-left: 2px solid var(--color-accent);

package/components/generic-sidebar/server.js

@@ -22,7 +22,6 @@ const sidebarData = {
       { href: "/en-US/plus/docs/features/playground", title: "Playground" },
       { href: "/en-US/plus/docs/features/updates", title: "Updates" },
       { href: "/en-US/plus/docs/features/collections", title: "Collections" },
-      { href: "/en-US/plus/docs/features/offline", title: "MDN Offline" },
       { href: "/en-US/plus#subscribe", title: "Try MDN Plus" },
     ],
     styleVariant: "plus",
@@ -33,13 +32,23 @@ export class GenericSidebar extends ServerComponent {
   /**
    * @param {import("@fred").Context<import("@rari").GenericPage>} context
    */
-  render(context) {
+  static sidebarName(context) {
     if (context.path.startsWith("/en-US/observatory/docs")) {
-      return this.renderSidebar(context, sidebarData.observatory);
+      return "observatory";
     } else if (context.path.startsWith("/en-US/plus/docs")) {
-      return this.renderSidebar(context, sidebarData.mdnPlus);
+      return "mdnPlus";
     }
-    return nothing;
+    return;
+  }
+
+  /**
+   * @param {import("@fred").Context<import("@rari").GenericPage>} context
+   */
+  render(context) {
+    const sidebarName = GenericSidebar.sidebarName(context);
+    return sidebarName
+      ? this.renderSidebar(context, sidebarData[sidebarName])
+      : nothing;
   }
 
   /**

package/components/generic-toc/server.css

@@ -6,7 +6,7 @@
     margin: 0 0 1rem;
 
     font-size: var(--font-size-large);
-    font-weight: 400;
+    font-weight: var(--font-weight-normal);
 
     line-height: 1.2;
 
@@ -42,7 +42,7 @@
     }
 
     &[aria-current="true"] {
-      font-weight: 600;
+      font-weight: var(--font-weight-bold);
 
       background-color: var(--color-background-accent);
       border-left: 2px solid var(--color-accent);

package/components/homepage-search/element.css

@@ -1,36 +1,33 @@
 .mdn-homepage-search {
   display: flex;
 
-  gap: 0.5ch;
-  justify-content: center;
+  gap: 0.25em;
+  align-items: center;
 
-  padding: 1em;
+  padding: 0.8em 1em;
   margin: 0 auto;
 
   font-size: var(--font-size-large);
 
-  border-color: var(--color-border-primary);
-  border-style: solid;
-  border-radius: 2em;
+  cursor: pointer;
 
-  &::before {
-    display: inline-block;
+  background-color: transparent;
+  border: 2px solid var(--color-border-primary);
+  border-radius: var(--radius-full);
 
-    flex-shrink: 0;
+  &:hover {
+    background-color: var(--color-background-secondary);
+  }
 
-    width: 1.1em;
-    height: 1.1em;
+  &::before {
+    width: 1em;
+    height: 1em;
 
     content: "";
 
-    background-color: var(--color-text-primary);
+    background-color: currentcolor;
 
     mask-image: url("../icon/search.svg");
-    mask-repeat: no-repeat;
     mask-size: contain;
   }
 }
-
-button {
-  cursor: pointer;
-}

package/components/html/global.css

@@ -3,12 +3,15 @@
 html {
   font-family: var(--font-family-text);
   font-size: var(--font-size-normal);
+  font-feature-settings: "calt" 0;
   font-variant-alternates: styleset(disambiguation);
 
   line-height: var(--font-line-normal);
 
   color: var(--color-text-primary);
 
+  overflow-wrap: break-word;
+
   color-scheme: light dark;
 
   background-color: var(--color-background-page);

package/components/icon/chart-no-axes-combined.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 16v5"/><path d="M16 14v7"/><path d="M20 10v11"/><path d="m22 3-8.646 8.646a.5.5 0 0 1-.708 0L9.354 8.354a.5.5 0 0 0-.707 0L2 15"/><path d="M4 18v3"/><path d="M8 14v7"/></svg>

package/components/icon/circle-play.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/></svg>

package/components/icon/log-in.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m10 17 5-5-5-5"/><path d="M15 12H3"/><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/></svg>

package/components/icon/mdn-m.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><mask id="a" width="22" height="18" x="1" y="3" maskUnits="userSpaceOnUse"><path fill="#fff" d="M1 3h22v18H1z"/></mask><path mask="url(#a)" d="M21 21V3m-8 18 6-18M3 21 9 3m2 18V3"/></svg>

package/components/icon/shield-check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></svg>

package/components/icon/users.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><path d="M16 3.128a4 4 0 0 1 0 7.744"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><circle cx="9" cy="7" r="4"/></svg>

package/components/interactive-example/element.css

@@ -21,10 +21,12 @@ header {
   h4 {
     margin: 0;
 
-    font-size: 1rem;
+    font-size: var(--font-size-normal);
     font-weight: normal;
 
     line-height: 1.1876;
+
+    overflow-wrap: anywhere;
   }
 
   mdn-button {

package/components/issues-table/element.css

@@ -37,8 +37,8 @@ td {
 }
 
 th {
-  font-size: 1.25rem;
-  font-weight: 500;
+  font-size: var(--font-size-large);
+  font-weight: var(--font-weight-bold);
 
   text-align: left;
 

package/components/ix-tab/element.css

@@ -5,7 +5,7 @@
   );
   padding: 0.5em 30px;
 
-  font-size: 0.833rem;
+  font-size: var(--font-size-small);
 
   color: var(--color-text-secondary);
 

package/components/language-switcher/element.css

@@ -108,7 +108,8 @@
   background-color: transparent;
   border: none;
 
-  &:hover {
+  &:hover,
+  &[data-current] {
     background-color: var(--color-background-secondary);
   }
 }

package/components/language-switcher/element.js

@@ -96,6 +96,7 @@ export class MDNLanguageSwitcher extends L10nMixin(LitElement) {
                   <li>
                     <a
                       class="language-switcher__option"
+                      ?data-current=${locale === translation.locale}
                       @click=${resetPreferredLocale}
                       href=${url.replace(
                         `/${locale}/`,

package/components/latest-news/server.css

@@ -72,7 +72,7 @@
   font-size: var(--font-size-normal);
   font-weight: 500;
 
-  line-height: 1.5;
+  line-height: var(--font-line-normal);
 }
 
 .latest-news__date {

package/components/left-sidebar/server.css

@@ -63,41 +63,40 @@
         }
       }
     }
-
-    ol {
-      padding-left: 1.5rem;
-    }
   }
 
   li {
-    display: flex;
-    align-items: center;
-    justify-content: stretch;
+    display: block;
 
     &:not(:last-child) {
       margin-bottom: 0.5rem;
     }
 
     &.section {
-      font-weight: 600;
+      font-weight: var(--font-weight-bold);
 
       &:not(:first-child) {
         margin-top: 1em;
       }
     }
+
+    ol {
+      padding-left: 1.5rem;
+    }
   }
 
   a,
-  span {
+  span:not(.highlight-container) {
     display: inline-flex;
     padding-block: 0.25rem;
+    vertical-align: middle;
   }
 
   a {
     color: var(--color-text-primary);
 
     &:hover {
-      color: var(--color-link-normal);
+      color: var(--color-area-link);
     }
 
     &:not(:hover) {
@@ -111,16 +110,14 @@
   }
 
   em {
-    display: inline-flex;
-
-    align-items: center;
+    display: block;
 
     padding-inline: 0.5rem;
 
     font-style: normal;
 
-    background-color: var(--color-background-blue);
-    border-left: 2px solid var(--color-blue-50);
+    background-color: var(--color-area-background);
+    border-left: 2px solid var(--color-area-highlight-border);
   }
 
   .icon {