@mdn/fred 1.5.0 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## [1.6.0](https://github.com/mdn/fred/compare/v1.5.0...v1.6.0) (2025-10-01)
+
+
+### Features
+
+* **writer-mode:** add recently visited list to homepage ([#821](https://github.com/mdn/fred/issues/821)) ([19d36f2](https://github.com/mdn/fred/commit/19d36f2748f735e838c6825f505ededa6c0db167))
+
+
+### Bug Fixes
+
+* **placement-top:** show fallback if unfilled ([#838](https://github.com/mdn/fred/issues/838)) ([61e2025](https://github.com/mdn/fred/commit/61e20255ac5b942e405f6697a47d0fba504bd7e2))
+
+
+### Miscellaneous
+
+* **deps-dev:** bump @mdn/browser-compat-data from 7.1.6 to 7.1.8 ([#836](https://github.com/mdn/fred/issues/836)) ([a08b60f](https://github.com/mdn/fred/commit/a08b60f5e6adce641862416bdf0d3c95ee25eb7d))
+* **deps-dev:** bump @mdn/browser-compat-data from 7.1.8 to 7.1.9 ([#844](https://github.com/mdn/fred/issues/844)) ([446f19b](https://github.com/mdn/fred/commit/446f19b225d62611575d5bfa8fe67dbc23b00ed6))
+* **deps-dev:** bump the dev group with 3 updates ([#824](https://github.com/mdn/fred/issues/824)) ([50bc063](https://github.com/mdn/fred/commit/50bc063d14612c78c2800701fa1268427cd4eb2d))
+* **deps:** bump @mdn/rari from 0.1.50 to 0.1.51 ([#841](https://github.com/mdn/fred/issues/841)) ([1609bb0](https://github.com/mdn/fred/commit/1609bb010a2335f5d8c6f90973f1b35ccce9056e))
+* **deps:** promote source-map-support ([#846](https://github.com/mdn/fred/issues/846)) ([467d496](https://github.com/mdn/fred/commit/467d496ac1f22b8d67953d4f607812d6ea9cecbd))
+
 ## [1.5.0](https://github.com/mdn/fred/compare/v1.4.0...v1.5.0) (2025-09-24)
 
 

package/components/homepage-body/server.js

@@ -1,5 +1,7 @@
 import { html } from "@lit-labs/ssr";
+import { nothing } from "lit";
 
+import { WRITER_MODE } from "../env/index.js";
 import { FeaturedArticles } from "../featured-articles/server.js";
 
 import { LatestNews } from "../latest-news/server.js";
@@ -12,6 +14,9 @@ export class HomepageBody extends ServerComponent {
    */
   render(context) {
     return html`<div class="homepage-body">
+      ${WRITER_MODE && context.localServer
+        ? html`<mdn-recently-visited></mdn-recently-visited>`
+        : nothing}
       <section>
         <h2>${context.l10n`Featured articles`}</h2>
         ${FeaturedArticles.render(context.hyData.featuredArticles)}

package/components/placement-top/element.js

@@ -14,8 +14,6 @@ import styles from "./element.css?lit";
  * @import { TemplateResult } from "lit";
  */
 
-const EMPTY = html`<div class="top-placement empty"></div>`;
-
 export class MDNPlacementTop extends PlacementMixin(LitElement) {
   static styles = styles;
 
@@ -24,7 +22,7 @@ export class MDNPlacementTop extends PlacementMixin(LitElement) {
    * @returns {TemplateResult | symbol}
    */
   renderInitial() {
-    return EMPTY;
+    return html`<div class="top-placement empty"></div>`;
   }
 
   renderFallback() {
@@ -58,7 +56,7 @@ export class MDNPlacementTop extends PlacementMixin(LitElement) {
 
     const data = placementContext?.hpTop || placementContext?.top;
     if (!data) {
-      return EMPTY;
+      return this.renderFallback();
     }
     const {
       status,
@@ -73,7 +71,7 @@ export class MDNPlacementTop extends PlacementMixin(LitElement) {
       version,
     } = data;
     if (status !== "success") {
-      return EMPTY;
+      return this.renderFallback();
     }
     if (!this._viewedUrl) {
       this._viewedUrl = view;

package/components/recently-visited/element.css

@@ -0,0 +1,35 @@
+@import url("../global/global.css");
+
+h2 {
+  font-size: var(--font-size-large);
+  font-weight: 500;
+}
+
+ul {
+  padding: 0;
+
+  overflow: hidden;
+
+  list-style: none;
+
+  border: 1px solid var(--color-border-primary);
+  border-radius: 0.5rem;
+}
+
+li {
+  border-top: 1px solid var(--color-border-primary);
+
+  &:first-child {
+    border-top: none;
+  }
+}
+
+a {
+  display: block;
+  padding: 1rem;
+  color: var(--color-text-primary);
+
+  &:not(:hover) {
+    text-decoration: none;
+  }
+}

package/components/recently-visited/element.js

@@ -0,0 +1,26 @@
+import { LitElement, html } from "lit";
+
+import styles from "./element.css?lit";
+
+import { RecentlyVisitedPages } from "./index.js";
+
+export class MDNRecentlyVisited extends LitElement {
+  static ssr = false;
+  static styles = styles;
+
+  constructor() {
+    super();
+    this._pages = new RecentlyVisitedPages();
+  }
+
+  render() {
+    return html`<h2>Recently visited</h2>
+      <ul>
+        ${this._pages.map(
+          ({ path, title }) => html`<li><a href=${path}>${title}</a></li>`,
+        )}
+      </ul>`;
+  }
+}
+
+customElements.define("mdn-recently-visited", MDNRecentlyVisited);

package/components/recently-visited/index.js

@@ -0,0 +1,64 @@
+export class RecentlyVisitedPages {
+  static #key = "recently-visited";
+  #pages;
+
+  constructor() {
+    this.#pages = this.#getFromStorage();
+  }
+
+  #getFromStorage() {
+    const storage = localStorage.getItem(RecentlyVisitedPages.#key);
+    if (storage) {
+      let pages;
+      try {
+        pages = JSON.parse(storage);
+        if (Array.isArray(pages)) {
+          return pages.map((page) => new RecentlyVisitedPage(page));
+        }
+      } catch {
+        console.error(`Parsing ${RecentlyVisitedPages.#key} failed`);
+      }
+    }
+    return [];
+  }
+
+  #saveToStorage() {
+    localStorage.setItem(
+      RecentlyVisitedPages.#key,
+      JSON.stringify(this.#pages),
+    );
+  }
+
+  /**
+   * @template T
+   * @param {(value: RecentlyVisitedPage, index: number, array: RecentlyVisitedPage[]) => T} callback
+   * @returns {T[]}
+   */
+  map(callback) {
+    return this.#pages.map(callback);
+  }
+
+  /**
+   * @param {RecentlyVisitedPage} page
+   */
+  add(page) {
+    this.#pages = [
+      ...new Map([page, ...this.#pages].map((p) => [p.path, p])).values(),
+    ].slice(0, 10);
+    this.#saveToStorage();
+  }
+}
+
+export class RecentlyVisitedPage {
+  title = "";
+  path = "";
+
+  /**
+   * @param {object} data
+   * @param {string} data.title
+   * @param {string} data.path
+   */
+  constructor(data) {
+    Object.assign(this, data);
+  }
+}

package/components/record-visit/element.js

@@ -0,0 +1,34 @@
+import { LitElement } from "lit";
+
+import {
+  RecentlyVisitedPage,
+  RecentlyVisitedPages,
+} from "../recently-visited/index.js";
+
+export class MDNRecordVisit extends LitElement {
+  static ssr = false;
+  static properties = {
+    pageTitle: { type: String, attribute: "page-title" },
+  };
+
+  constructor() {
+    super();
+    /** @type {string | undefined} */
+    this.pageTitle;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.pageTitle) {
+      const visited = new RecentlyVisitedPages();
+      visited.add(
+        new RecentlyVisitedPage({
+          title: this.pageTitle,
+          path: location.pathname,
+        }),
+      );
+    }
+  }
+}
+
+customElements.define("mdn-record-visit", MDNRecordVisit);

package/components/writer-toolbar/server.js

@@ -24,6 +24,9 @@ export class WriterToolbar extends ServerComponent {
               filepath=${`${folder}/${filename}`}
             ></mdn-writer-open-editor>
             <mdn-writer-reload></mdn-writer-reload>
+            <mdn-record-visit
+              page-title=${context.doc.title}
+            ></mdn-record-visit>
           `
         : nothing}
     </div>`;