Merge pull request #5707 from caugner/plus-menu-add-faq-link

chore(plus): add FAQ + and move {feature => features}/*

build/spas.js

@@ -139,47 +139,68 @@ async function buildSPAs(options) {
     }
   }
 
-  // Building the MDN Plus feature pages.
-  const featuresDir = path.join(__dirname, "../copy/plus/features");
-  for (const page of fs.readdirSync(featuresDir)) {
-    const locale = "en-us";
-    const feature = page.split(".")[0];
-    const markdown = fs.readFileSync(path.join(featuresDir, page), "utf8");
+  // Building the MDN Plus pages.
 
-    const frontMatter = frontmatter(markdown);
-    const rawHTML = await m2h(frontMatter.body, locale);
+  /**
+   *
+   * @param {string} dirpath
+   * @param {string} slug
+   * @param {string} title
+   */
+  async function buildStaticPages(dirpath, slug, title = "MDN") {
+    for (const file of fs.readdirSync(dirpath)) {
+      const filepath = path.join(dirpath, file);
+      const stat = fs.lstatSync(filepath);
+      const page = file.split(".")[0];
 
-    const { sections, toc } = splitSections(rawHTML);
+      if (stat.isDirectory()) {
+        await buildStaticPages(filepath, `${slug}/${page}`, title);
+        return;
+      }
 
-    const url = `/${locale}/plus/feature/${feature}`;
-    const hyData = {
-      id: feature,
-      ...frontMatter.attributes,
-      sections,
-      toc,
-    };
-    const context = {
-      hyData,
-      pageTitle: `${frontMatter.attributes.title || ""} | MDN Plus`,
-    };
-    const html = renderHTML(url, context);
-    const outPath = path.join(
-      BUILD_OUT_ROOT,
-      locale,
-      "plus",
-      "feature",
-      feature
-    );
-    fs.mkdirSync(outPath, { recursive: true });
-    const filePath = path.join(outPath, "index.html");
-    fs.writeFileSync(filePath, html);
-    buildCount++;
-    if (options.verbose) {
-      console.log("Wrote", filePath);
+      const locale = "en-us";
+      const markdown = fs.readFileSync(filepath, "utf8");
+
+      const frontMatter = frontmatter(markdown);
+      const rawHTML = await m2h(frontMatter.body, locale);
+
+      const { sections, toc } = splitSections(rawHTML);
+
+      const url = `/${locale}/${slug}/${page}`;
+      const hyData = {
+        id: page,
+        ...frontMatter.attributes,
+        sections,
+        toc,
+      };
+      const context = {
+        hyData,
+        pageTitle: `${frontMatter.attributes.title || ""} | ${title}`,
+      };
+
+      const html = renderHTML(url, context);
+      const outPath = path.join(
+        BUILD_OUT_ROOT,
+        locale,
+        ...slug.split("/"),
+        page
+      );
+      fs.mkdirSync(outPath, { recursive: true });
+      const filePath = path.join(outPath, "index.html");
+      fs.writeFileSync(filePath, html);
+      buildCount++;
+      if (options.verbose) {
+        console.log("Wrote", filePath);
+      }
+      const filePathContext = path.join(outPath, "index.json");
+      fs.writeFileSync(filePathContext, JSON.stringify(context));
     }
-    const filePathContext = path.join(outPath, "index.json");
-    fs.writeFileSync(filePathContext, JSON.stringify(context));
   }
+  await buildStaticPages(
+    path.join(__dirname, "../copy/plus"),
+    "plus",
+    "MDN Plus"
+  );
 
   // Build all the home pages in all locales.
   // Fetch merged content PRs for the latest contribution section.

client/src/plus/feature-highlight/index.scss → client/src/homepage/static-page/index.scss

@@ -1,6 +1,6 @@
 @use "../../ui/vars" as *;
 
-.feature-highlight {
+.static-page {
   width: 100%;
   padding: 2rem 1rem;
 
@@ -19,7 +19,7 @@
   }
   gap: 2rem;
 
-  .ft-sidebar {
+  .static-sidebar {
     @media screen and (min-width: $screen-md) {
       position: sticky;
     }
@@ -34,7 +34,7 @@
     }
   }
 
-  .ft-content {
+  .static-content {
     em {
       text-decoration: underline;
       font-style: normal;

client/src/homepage/static-page/index.tsx

@@ -0,0 +1,67 @@
+import React, { ReactElement } from "react";
+import useSWR from "swr";
+import { CRUD_MODE } from "../../constants";
+import { TOC } from "../../document/organisms/toc";
+import { PageNotFound } from "../../page-not-found";
+import "./index.scss";
+
+interface StaticPageProps {
+  locale: string;
+  slug: string;
+  initialData?: any;
+  title?: string;
+  sidebarHeader?: ReactElement;
+}
+
+function StaticPage({
+  locale,
+  slug,
+  initialData = undefined,
+  title = "MDN",
+  sidebarHeader = <></>,
+}: StaticPageProps) {
+  const baseURL = `/${locale.toLowerCase()}/${slug}`;
+  const featureJSONUrl = `${baseURL}/index.json`;
+  const { data: { hyData } = {} } = useSWR<any>(
+    featureJSONUrl,
+    async (url) => {
+      const response = await fetch(url);
+      if (!response.ok) {
+        const text = await response.text();
+        throw new Error(`${response.status} on ${url}: ${text}`);
+      }
+      return await response.json();
+    },
+    {
+      initialData,
+      revalidateOnFocus: CRUD_MODE,
+    }
+  );
+  React.useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+  React.useEffect(() => {
+    const pageTitle = hyData && `${hyData.title} | ${title}`;
+    document.title = pageTitle;
+  }, [hyData, title]);
+
+  if (!hyData) {
+    return <PageNotFound />;
+  }
+
+  return (
+    <div className="static-page container">
+      <div className="static-sidebar">
+        {sidebarHeader || null}
+        {(hyData.toc?.length && <TOC toc={hyData.toc} />) || null}
+      </div>
+      <article className="static-content">
+        {hyData.sections.map((section) => (
+          <section dangerouslySetInnerHTML={{ __html: section }}></section>
+        ))}
+      </article>
+    </div>
+  );
+}
+
+export default StaticPage;

client/src/plus/feature-highlight/index.tsx

@@ -1,55 +1,16 @@
-import React from "react";
 import { useParams } from "react-router-dom";
-import useSWR from "swr";
-import { CRUD_MODE } from "../../constants";
-import { TOC } from "../../document/organisms/toc";
-import { Button } from "../../ui/atoms/button";
-import "./index.scss";
+import StaticPlusPage from "../static-plus-page";
 
 function FeatureHighlight(props) {
-  const { feature, locale } = useParams();
+  const { feature } = useParams();
 
-  const baseURL = `/${locale.toLowerCase()}/plus/feature/${feature}`;
-  const featureJSONUrl = `${baseURL}/index.json`;
-  const { data: { hyData } = {} } = useSWR<any>(
-    featureJSONUrl,
-    async (url) => {
-      const response = await fetch(url);
-      if (!response.ok) {
-        const text = await response.text();
-        throw new Error(`${response.status} on ${url}: ${text}`);
-      }
-      return await response.json();
-    },
-    {
-      initialData: props.hyData ? props : undefined,
-      revalidateOnFocus: CRUD_MODE,
-    }
-  );
-  React.useEffect(() => {
-    window.scrollTo(0, 0);
-  }, []);
-  React.useEffect(() => {
-    const pageTitle = hyData && `${hyData.title} | MDN Plus`;
-    document.title = pageTitle;
-  }, [hyData]);
-
-  console.log(props);
-  if (!hyData) {
-    return <>NaN</>;
-  }
   return (
-    <div className="feature-highlight container">
-      <div className="ft-sidebar">
-        <Button href={`/${locale}/plus`}>← Back to Overview</Button>
-        {(hyData.toc?.length && <TOC toc={hyData.toc}></TOC>) || null}
-      </div>
-      <article className="ft-content">
-        {hyData.sections.map((section) => (
-          <section dangerouslySetInnerHTML={{ __html: section }}></section>
-        ))}
-      </article>
-    </div>
+    <StaticPlusPage
+      {...{
+        slug: `features/${feature}`,
+        ...props,
+      }}
+    />
   );
 }
 

client/src/plus/index.tsx

@@ -9,6 +9,7 @@ import Notifications from "./notifications";
 const OfferOverview = React.lazy(() => import("./offer-overview"));
 const Collections = React.lazy(() => import("./collections"));
 const FeatureHighlight = React.lazy(() => import("./feature-highlight"));
+const StaticPlusPage = React.lazy(() => import("./static-plus-page"));
 
 export function Plus({ pageTitle, ...props }: { pageTitle?: string }) {
   const defaultPageTitle = "MDN Plus";
@@ -55,13 +56,21 @@ export function Plus({ pageTitle, ...props }: { pageTitle?: string }) {
         }
       />
       <Route
-        path="feature/:feature"
+        path="features/:feature"
         element={
           <React.Suspense fallback={loading}>
             <FeatureHighlight {...props} />
           </React.Suspense>
         }
       />
+      <Route
+        path="faq"
+        element={
+          <React.Suspense fallback={loading}>
+            <StaticPlusPage {...{ ...props, slug: "faq" }} />
+          </React.Suspense>
+        }
+      />
       <Route path="*" element={<PageNotFound />} />
     </Routes>
   );

client/src/plus/offer-overview/offer-overview-feature/index.tsx

@@ -38,7 +38,7 @@ export default function OfferOverviewFeatures() {
           get customizable notifications when documentation changes, CSS
           features launch, and APIs ship.
         </p>
-        <Button href="./feature/notifications">Learn more →</Button>
+        <Button href="./features/notifications">Learn more →</Button>
       </OfferOverviewFeature>
       <OfferOverviewFeature
         id="collections"
@@ -54,7 +54,7 @@ export default function OfferOverviewFeatures() {
           your inner curator and collect your favorite articles in one place for
           convenient consultation.
         </p>
-        <Button href="./feature/collections">Learn more →</Button>
+        <Button href="./features/collections">Learn more →</Button>
       </OfferOverviewFeature>
       <OfferOverviewFeature
         id="offline"
@@ -67,7 +67,7 @@ export default function OfferOverviewFeatures() {
           inaccessible pages or cluttered tabs. With MDN Plus, have the fully
           navigable resources of MDN at your disposal even when offline.
         </p>
-        <Button href="./feature/offline">Learn more →</Button>
+        <Button href="./features/offline">Learn more →</Button>
       </OfferOverviewFeature>
     </section>
   );

client/src/plus/offer-overview/offer-overview-subscribe/index.tsx

@@ -174,7 +174,14 @@ function OfferDetails({
             <a href={ctaLink} className="sub-link">
               {offerDetails.upgradeCta}
             </a>
-          )) || <span className="sub-link na">Not available</span>}
+          )) || (
+            <a
+              href="/en-US/plus/faq#can-i-upgrade/downgrade-my-plan-"
+              className="sub-link na"
+            >
+              Not available
+            </a>
+          )}
         <p className="includes">{offerDetails.includes}</p>
         <ul>
           {offerDetails.features.map(([href, text]) => (

client/src/plus/static-plus-page/index.tsx

@@ -0,0 +1,23 @@
+import { useParams } from "react-router-dom";
+import StaticPage from "../../homepage/static-page";
+import { Button } from "../../ui/atoms/button";
+
+function StaticPlusPage({ slug, ...props }) {
+  const { locale } = useParams();
+
+  return (
+    <StaticPage
+      {...{
+        locale,
+        slug: `plus/${slug}`,
+        title: "MDN Plus",
+        sidebarHeader: (
+          <Button href={`/${locale}/plus`}>← Back to Overview</Button>
+        ),
+        initialData: props.hyData ? props : undefined,
+      }}
+    />
+  );
+}
+
+export default StaticPlusPage;