Learn move (#12339)

* feat(learn): support learn are move pr

* rename guides to learn

* fix breadcrumb

build/document-utils.ts

@@ -3,7 +3,7 @@ import { Document } from "../content/index.js";
 const TRANSFORM_STRINGS = new Map(
   Object.entries({
     "Web technology for developers": "References",
-    "Learn web development": "Guides",
+    "Learn web development": "Learn",
     "HTML: HyperText Markup Language": "HTML",
     "CSS: Cascading Style Sheets": "CSS",
     "Graphics on the Web": "Graphics",

client/src/ui/molecules/guides-menu/index.scss → client/src/ui/molecules/learn-menu/index.scss

@@ -1,7 +1,7 @@
 @use "sass:color";
 @use "../../vars" as *;
 
-.guides {
+.learn {
   .submenu .submenu-item-heading {
     font-size: var(--type-smaller-font-size);
     font-weight: initial;

client/src/ui/molecules/guides-menu/index.tsx → client/src/ui/molecules/learn-menu/index.tsx

@@ -3,60 +3,53 @@ import { Menu } from "../menu";
 
 import "./index.scss";
 
-export const GuidesMenu = ({ visibleSubMenuId, toggleMenu }) => {
+export const LearnMenu = ({ visibleSubMenuId, toggleMenu }) => {
   const locale = useLocale();
 
   const menu = {
-    id: "guides",
-    label: "Guides",
-    to: `/${locale}/docs/Learn`,
+    id: "learn",
+    label: "Learn",
+    to: `/${locale}/docs/Learn_web_development`,
     items: [
       {
         description: "Learn web development",
         hasIcon: true,
         extraClasses: "apis-link-container mobile-only",
         iconClasses: "submenu-icon learn",
         label: "Overview / MDN Learning Area",
-        url: `/${locale}/docs/Learn`,
+        url: `/${locale}/docs/Learn_web_development`,
       },
       {
         description: "Learn web development",
         extraClasses: "apis-link-container desktop-only",
         hasIcon: true,
         iconClasses: "submenu-icon learn",
         label: "MDN Learning Area",
-        url: `/${locale}/docs/Learn`,
+        url: `/${locale}/docs/Learn_web_development`,
       },
       {
         description: "Learn to structure web content with HTML",
         extraClasses: "html-link-container",
         hasIcon: true,
         iconClasses: "submenu-icon html",
         label: "HTML",
-        url: `/${locale}/docs/Learn/HTML`,
+        url: `/${locale}/docs/Learn_web_development/Core/Structuring_content`,
       },
       {
         description: "Learn to style content using CSS",
         extraClasses: "css-link-container",
         hasIcon: true,
         iconClasses: "submenu-icon css",
         label: "CSS",
-        url: `/${locale}/docs/Learn/CSS`,
+        url: `/${locale}/docs/Learn_web_development/Core/Styling_basics`,
       },
       {
         description: "Learn to run scripts in the browser",
         extraClasses: "javascript-link-container",
         hasIcon: true,
         iconClasses: "submenu-icon javascript",
         label: "JavaScript",
-        url: `/${locale}/docs/Learn/JavaScript`,
-      },
-      {
-        description: "Learn to make the web accessible to all",
-        hasIcon: true,
-        iconClasses: "submenu-icon",
-        label: "Accessibility",
-        url: `/${locale}/docs/Web/Accessibility`,
+        url: `/${locale}/docs/Learn_web_development/Core/Scripting`,
       },
     ],
   };

client/src/ui/molecules/main-menu/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 
-import { GuidesMenu } from "../guides-menu";
+import { LearnMenu } from "../learn-menu";
 import { ReferenceMenu } from "../reference-menu";
 import { PlusMenu } from "../plus-menu";
 
@@ -71,7 +71,7 @@ export default function MainMenu({ isOpenOnMobile }) {
           visibleSubMenuId={visibleSubMenuId}
           toggleMenu={toggleMenu}
         />
-        <GuidesMenu
+        <LearnMenu
           visibleSubMenuId={visibleSubMenuId}
           toggleMenu={toggleMenu}
         />

client/src/ui/molecules/reference-menu/index.tsx

@@ -67,6 +67,13 @@ export const ReferenceMenu = ({ visibleSubMenuId, toggleMenu }) => {
         label: "Web Extensions",
         url: `/${locale}/docs/Mozilla/Add-ons/WebExtensions`,
       },
+      {
+        description: "Learn to make the web accessible to all",
+        hasIcon: true,
+        iconClasses: "submenu-icon",
+        label: "Accessibility",
+        url: `/${locale}/docs/Web/Accessibility`,
+      },
       {
         description: "Web technology reference for developers",
         extraClasses: "apis-link-container desktop-only",

client/src/utils.ts

@@ -7,14 +7,40 @@ const DOCS_RE = /^\/[A-Za-z-]+\/docs\/.*$/i;
 const PLUS_RE = /^\/[A-Za-z-]*\/?plus(?:\/?.*)$/i;
 const CATEGORIES = ["html", "javascript", "css", "api", "http"];
 
+function learnCategory(category: string, sub: string) {
+  switch (`${category}/${sub || ""}`) {
+    case "core/structuring_content":
+    case "getting_started/web_standards":
+      return "html";
+    case "core/css_layout":
+    case "core/design_for_developers":
+    case "core/styling_basics":
+    case "extensions/TRansform_animate":
+      return "css";
+    case "core/scripting":
+    case "core/frameworks_libraries":
+    case "extensions/advanced_javascript_objects":
+    case "extensions/async_js":
+      return "javascript";
+    case "extensions/client-side_apis":
+    case "extensions/forms":
+      return "api";
+    default:
+      return "learn";
+  }
+}
+
 export function getCategoryByPathname(pathname = ""): string | null {
-  const [, , , webOrLearn, category] = pathname.toLowerCase().split("/");
-  if (webOrLearn === "learn" || webOrLearn === "web") {
+  const [, , , webOrLearn, category, sub] = pathname.toLowerCase().split("/");
+  if (webOrLearn === "web") {
     if (CATEGORIES.includes(category)) {
       return category;
     }
     return webOrLearn;
   }
+  if (webOrLearn === "learn_web_development") {
+    return learnCategory(category, sub);
+  }
   if (isHomePage(pathname)) {
     return "home";
   }