From e8414dde8b57e1bebbd68e7459d22d7baaad2e92 Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Wed, 18 Dec 2024 17:31:03 +0100 Subject: [PATCH 1/3] feat(learn): support learn are move pr --- client/src/ui/molecules/guides-menu/index.tsx | 19 ++++-------- .../src/ui/molecules/reference-menu/index.tsx | 7 +++++ client/src/utils.ts | 30 +++++++++++++++++-- 3 files changed, 41 insertions(+), 15 deletions(-) diff --git a/client/src/ui/molecules/guides-menu/index.tsx b/client/src/ui/molecules/guides-menu/index.tsx index 402f11600180..1cdbefbbf516 100644 --- a/client/src/ui/molecules/guides-menu/index.tsx +++ b/client/src/ui/molecules/guides-menu/index.tsx @@ -9,7 +9,7 @@ export const GuidesMenu = ({ visibleSubMenuId, toggleMenu }) => { const menu = { id: "guides", label: "Guides", - to: `/${locale}/docs/Learn`, + to: `/${locale}/docs/Learn_web_development`, items: [ { description: "Learn web development", @@ -17,7 +17,7 @@ export const GuidesMenu = ({ visibleSubMenuId, toggleMenu }) => { 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", @@ -25,7 +25,7 @@ export const GuidesMenu = ({ visibleSubMenuId, toggleMenu }) => { 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", @@ -33,7 +33,7 @@ export const GuidesMenu = ({ visibleSubMenuId, toggleMenu }) => { 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", @@ -41,7 +41,7 @@ export const GuidesMenu = ({ visibleSubMenuId, toggleMenu }) => { 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", @@ -49,14 +49,7 @@ export const GuidesMenu = ({ visibleSubMenuId, toggleMenu }) => { 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`, }, ], }; diff --git a/client/src/ui/molecules/reference-menu/index.tsx b/client/src/ui/molecules/reference-menu/index.tsx index 35c550dfa9e3..795fa3ea243a 100644 --- a/client/src/ui/molecules/reference-menu/index.tsx +++ b/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", diff --git a/client/src/utils.ts b/client/src/utils.ts index 63bb0467a697..4f34f5ea58bf 100644 --- a/client/src/utils.ts +++ b/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"; } From 428dce492af77154c5dd6cf465a4d148edf5baa5 Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Thu, 19 Dec 2024 12:27:39 +0100 Subject: [PATCH 2/3] rename guides to learn --- .../src/ui/molecules/{guides-menu => learn-menu}/index.scss | 2 +- .../src/ui/molecules/{guides-menu => learn-menu}/index.tsx | 6 +++--- client/src/ui/molecules/main-menu/index.tsx | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) rename client/src/ui/molecules/{guides-menu => learn-menu}/index.scss (97%) rename client/src/ui/molecules/{guides-menu => learn-menu}/index.tsx (94%) diff --git a/client/src/ui/molecules/guides-menu/index.scss b/client/src/ui/molecules/learn-menu/index.scss similarity index 97% rename from client/src/ui/molecules/guides-menu/index.scss rename to client/src/ui/molecules/learn-menu/index.scss index 42a234d2f98a..7051bddc8ebd 100644 --- a/client/src/ui/molecules/guides-menu/index.scss +++ b/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; diff --git a/client/src/ui/molecules/guides-menu/index.tsx b/client/src/ui/molecules/learn-menu/index.tsx similarity index 94% rename from client/src/ui/molecules/guides-menu/index.tsx rename to client/src/ui/molecules/learn-menu/index.tsx index 1cdbefbbf516..9b290d2e7e2f 100644 --- a/client/src/ui/molecules/guides-menu/index.tsx +++ b/client/src/ui/molecules/learn-menu/index.tsx @@ -3,12 +3,12 @@ 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", + id: "learn", + label: "Learn", to: `/${locale}/docs/Learn_web_development`, items: [ { diff --git a/client/src/ui/molecules/main-menu/index.tsx b/client/src/ui/molecules/main-menu/index.tsx index c8f0e348c688..818015a5c395 100644 --- a/client/src/ui/molecules/main-menu/index.tsx +++ b/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} /> - From 7c90c618ace3f01a6f6a61c67e0278a2281b798d Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Thu, 19 Dec 2024 16:18:43 +0100 Subject: [PATCH 3/3] fix breadcrumb --- build/document-utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/build/document-utils.ts b/build/document-utils.ts index 4fec074d1fae..f807be908f48 100644 --- a/build/document-utils.ts +++ b/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",