fix: various fixes when using yari in fred (#13142)

LeoMcA · web-flow · commit 7b30036398cd · 2025-06-11T16:29:39.000+01:00
use "real" links to articles in collections
import all screenshots used in plus overview page
hide offline settings if FRED is set
diff --git a/client/src/env.ts b/client/src/env.ts
@@ -135,3 +135,5 @@ export function survey_rates(surveyKey: string): {
 export const OBSERVATORY_API_URL =
   process.env.REACT_APP_OBSERVATORY_API_URL ||
   "https://observatory-api.mdn.allizom.net";
+
+export const FRED = JSON.parse(process.env.REACT_APP_FRED || "false");
diff --git a/client/src/plus/collections/collection.tsx b/client/src/plus/collections/collection.tsx
@@ -238,7 +238,7 @@ function ItemComponent({
     >
       <header>
         <h2>
-          <Link to={item.url}>{camelWrap(item.title)}</Link>
+          <a href={item.url}>{camelWrap(item.title)}</a>
         </h2>
         <ArticleActions
           doc={doc}
diff --git a/client/src/plus/offer-overview/offer-overview-feature/index.tsx b/client/src/plus/offer-overview/offer-overview-feature/index.tsx
@@ -1,6 +1,10 @@
 import { Button } from "../../../ui/atoms/button";
 import "./index.scss";
 import screenshotAiHelp from "../../../../public/assets/ai-help/ai-help_light.png";
+import screenshotAdFree from "../../../../public/assets/afree.png";
+import screenshotUpdates from "../../../../public/assets/updates.png";
+import screenshotCollections from "../../../../public/assets/collections.png";
+import screenshotPlayground from "../../../../public/assets/playground.png";
 
 function OfferOverviewFeature({ id, img, imgAlt, children }) {
   return (
@@ -24,7 +28,7 @@ function OfferOverviewFeature({ id, img, imgAlt, children }) {
 export default function OfferOverviewFeatures() {
   return (
     <section id="features">
-      <OfferOverviewFeature id="afree" img="/assets/afree.png" imgAlt="">
+      <OfferOverviewFeature id="afree" img={screenshotAdFree} imgAlt="">
         <section aria-labelledby="afree-section-title">
           <h2 id="afree-section-title">Go ads free</h2>
           <h3>Enjoy MDN ads-free with an MDN Plus subscription.</h3>
@@ -55,7 +59,7 @@ export default function OfferOverviewFeatures() {
       </OfferOverviewFeature>
       <OfferOverviewFeature
         id="playground"
-        img="/assets/playground.png"
+        img={screenshotPlayground}
         imgAlt=""
       >
         <section aria-labelledby="playground-section-title">
@@ -71,7 +75,7 @@ export default function OfferOverviewFeatures() {
           </Button>
         </section>
       </OfferOverviewFeature>
-      <OfferOverviewFeature id="updates" img="/assets/updates.png" imgAlt="">
+      <OfferOverviewFeature id="updates" img={screenshotUpdates} imgAlt="">
         <section aria-labelledby="updates-section-title">
           <h2 id="updates-section-title">Updates</h2>
           <h3>
@@ -92,7 +96,7 @@ export default function OfferOverviewFeatures() {
       </OfferOverviewFeature>
       <OfferOverviewFeature
         id="collections"
-        img="/assets/collections.png"
+        img={screenshotCollections}
         imgAlt=""
       >
         <section aria-labelledby="collections-section-title">
diff --git a/client/src/settings/index.tsx b/client/src/settings/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { NEWSLETTER_ENABLED } from "../env";
+import { FRED, NEWSLETTER_ENABLED } from "../env";
 
 import { OfflineStatusBar } from "../ui/molecules/offline-status-bar";
 
@@ -22,7 +22,7 @@ export function Settings() {
         <Manage />
         <ManageAIHelp />
         {NEWSLETTER_ENABLED && <Newsletter />}
-        <OfflineSettings />
+        {!FRED && <OfflineSettings />}
       </article>
     </>
   );

Original file line number	Diff line number	Diff line change
`@@ -238,7 +238,7 @@ function ItemComponent({`
`238`	`238`	`>`
`239`	`239`	`<header>`
`240`	`240`	`<h2>`
`241`		`- <Link to={item.url}>{camelWrap(item.title)}</Link>`
	`241`	`+ <a href={item.url}>{camelWrap(item.title)}</a>`
`242`	`242`	`</h2>`
`243`	`243`	`<ArticleActions`
`244`	`244`	`doc={doc}`