diff --git a/build/curriculum.ts b/build/curriculum.ts index f0b4b1b4f783..a8b50b92ba9e 100644 --- a/build/curriculum.ts +++ b/build/curriculum.ts @@ -333,6 +333,7 @@ export async function buildCurriculumPage( doc.parents = metadata.parents; doc.topic = metadata.topic; doc.group = metadata.group; + doc.template = metadata.template || Template.Default; return doc as CurriculumDoc; } @@ -406,9 +407,9 @@ function setCurriculumTypes($: CheerioAPI) { $("p.curriculum-resources + ul > li").each((_, child) => { const li = $(child); - - if (li.find("a.external").length) { - li.addClass("external"); + const externalLinks = li.find("a.external"); + if (externalLinks.length) { + li.addClass("curriculum-external-li"); } }); diff --git a/client/public/assets/curriculum/curriculum-partner-banner-illustration-large-dark.svg b/client/public/assets/curriculum/curriculum-partner-banner-illustration-large-dark.svg new file mode 100644 index 000000000000..de05c9d52bba --- /dev/null +++ b/client/public/assets/curriculum/curriculum-partner-banner-illustration-large-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/public/assets/curriculum/curriculum-partner-banner-illustration-large-light.svg b/client/public/assets/curriculum/curriculum-partner-banner-illustration-large-light.svg new file mode 100644 index 000000000000..1229c091c68f --- /dev/null +++ b/client/public/assets/curriculum/curriculum-partner-banner-illustration-large-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/public/assets/curriculum/fullscreen-enter.svg b/client/public/assets/curriculum/fullscreen-enter.svg new file mode 100644 index 000000000000..2c28335b158d --- /dev/null +++ b/client/public/assets/curriculum/fullscreen-enter.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + diff --git a/client/public/assets/curriculum/scrim.png b/client/public/assets/curriculum/scrim.png new file mode 100644 index 000000000000..7c2748608888 Binary files /dev/null and b/client/public/assets/curriculum/scrim.png differ diff --git a/client/src/assets/curriculum-landing-arrow.svg b/client/src/assets/curriculum-landing-arrow.svg new file mode 100644 index 000000000000..d1d0c360e2fe --- /dev/null +++ b/client/src/assets/curriculum-landing-arrow.svg @@ -0,0 +1,26 @@ + + Curly arrow pointing to the left. + + + + + + + + + + + + diff --git a/client/src/assets/curriculum-partner-bg.svg b/client/src/assets/curriculum-partner-bg.svg new file mode 100644 index 000000000000..e1177a0201ae --- /dev/null +++ b/client/src/assets/curriculum-partner-bg.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + diff --git a/client/src/assets/curriculum-scrim-bg.svg b/client/src/assets/curriculum-scrim-bg.svg new file mode 100644 index 000000000000..0159e9824c21 --- /dev/null +++ b/client/src/assets/curriculum-scrim-bg.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + diff --git a/client/src/assets/icons/curriculum-partner-underline-large.svg b/client/src/assets/icons/curriculum-partner-underline-large.svg new file mode 100644 index 000000000000..0fccd70d393d --- /dev/null +++ b/client/src/assets/icons/curriculum-partner-underline-large.svg @@ -0,0 +1,8 @@ + + + + diff --git a/client/src/assets/icons/curriculum-partner-underline-small.svg b/client/src/assets/icons/curriculum-partner-underline-small.svg new file mode 100644 index 000000000000..791f896a45c2 --- /dev/null +++ b/client/src/assets/icons/curriculum-partner-underline-small.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/src/assets/icons/fullscreen-enter.svg b/client/src/assets/icons/fullscreen-enter.svg new file mode 100644 index 000000000000..49d8b8e86cdb --- /dev/null +++ b/client/src/assets/icons/fullscreen-enter.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + diff --git a/client/src/curriculum/default.tsx b/client/src/curriculum/default.tsx new file mode 100644 index 000000000000..088d7c01b9db --- /dev/null +++ b/client/src/curriculum/default.tsx @@ -0,0 +1,25 @@ +import { HydrationData } from "../../../libs/types/hydration"; +import { CurriculumDoc } from "../../../libs/types/curriculum"; +import { topic2css, useCurriculumDoc } from "./utils"; +import { RenderCurriculumBody } from "./body"; +import { CurriculumLayout } from "./layout"; + +import "./index.scss"; + +export function CurriculumDefault(props: HydrationData) { + const doc = useCurriculumDoc(props); + const [coloredTitle, ...restTitle] = doc?.title?.split(" ") || []; + return ( + +
+

+ {coloredTitle} {restTitle.join(" ")} +

+
+ + + ); +} diff --git a/client/src/curriculum/index.tsx b/client/src/curriculum/index.tsx index 7fad95c7ad29..17ff5eafcc4d 100644 --- a/client/src/curriculum/index.tsx +++ b/client/src/curriculum/index.tsx @@ -1,26 +1,27 @@ -import { Route, Routes } from "react-router-dom"; - import { HydrationData } from "../../../libs/types/hydration"; -import { CurriculumModuleOverview } from "./overview"; +import { CurriculumOverview } from "./overview"; import { CurriculumModule } from "./module"; import { CurriculumAbout } from "./about"; import { CurriculumLanding } from "./landing"; import "./index.scss"; +import { CurriculumData, CurriculumDoc } from "../../../libs/types/curriculum"; +import { Template, useCurriculumDoc } from "./utils"; +import { CurriculumDefault } from "./default"; -export function Curriculum(appProps: HydrationData) { - return ( - - } /> - } - /> - } - /> - } /> - - ); +export function Curriculum(appProps: HydrationData) { + const doc = useCurriculumDoc(appProps as CurriculumData); + switch (doc?.template) { + case Template.Landing: + return ; + case Template.Overview: + return ; + case Template.Module: + return ; + case Template.About: + return ; + case Template.Default: + default: + return ; + } } diff --git a/client/src/curriculum/landing.scss b/client/src/curriculum/landing.scss index ea30153c8a83..c229b35c9a02 100644 --- a/client/src/curriculum/landing.scss +++ b/client/src/curriculum/landing.scss @@ -111,27 +111,30 @@ "h2" "p1" "p2" - "p3"; + "p3" + "p4" + "scrim"; grid-template-columns: 1fr; margin: 0 auto 3rem; max-width: min(var(--max-width), 74rem); - @media (min-width: $screen-md) { + @media (min-width: $screen-lg) { + column-gap: 1rem; grid-template-areas: - "li li " - "h2 . " - ". p1 " - ". p2" - ". p3"; - grid-template-columns: 1fr 1fr; + "li li li " + "h2 . scrim" + "p1 . scrim" + "p2 . scrim" + "p3 arrow scrim" + "p4 arrow scrim"; + grid-template-columns: 1fr 7rem 24rem; } h2 { grid-area: h2; - margin: 1rem 0 0; - text-align: center; + margin: 1rem 0; } - > div { + > div.about-content { display: contents; ul { @@ -203,6 +206,8 @@ color: var(--text-secondary); display: grid; grid-template-columns: auto auto; + justify-content: start; + margin: 1rem 0; &::before { align-self: start; @@ -230,6 +235,14 @@ &:nth-child(4) { grid-area: p3; + &::before { + content: var(--curriculum-landing-about-bullet); + } + } + + &:nth-child(5) { + grid-area: p4; + a { color: var(--text-primary); font-weight: var(--font-body-strong-weight); @@ -244,6 +257,24 @@ } } } + + > div.arrow { + background-image: var(--curriculum-landing-arrow); + background-position: center; + background-repeat: no-repeat; + grid-area: arrow; + } + + .scrim { + grid-area: scrim; + justify-self: center; + margin-top: 1rem; + + @media (min-width: $screen-lg) { + justify-self: end; + margin-top: 0; + } + } } } diff --git a/client/src/curriculum/landing.tsx b/client/src/curriculum/landing.tsx index 01cfa30b95e0..07f190759d33 100644 --- a/client/src/curriculum/landing.tsx +++ b/client/src/curriculum/landing.tsx @@ -14,6 +14,8 @@ import { CurriculumLayout } from "./layout"; import "./index.scss"; import "./landing.scss"; import { ProseSection } from "../../../libs/types/document"; +import { PartnerBanner } from "./partner-banner"; +import { ScrimIframe } from "./scrim"; export function CurriculumLanding(appProps: HydrationData) { const doc = useCurriculumDoc(appProps as CurriculumData); @@ -98,6 +100,7 @@ export function CurriculumLanding(appProps: HydrationData) { return null; }} /> + ); } @@ -119,6 +122,8 @@ function Header({ section, h1 }: { section: any; h1?: string }) { ); } +const SCRIM_URL = "https://v2.scrimba.com/s06icdv"; + function About({ section }) { const { title, content, id } = section.value; const html = useMemo(() => ({ __html: content }), [content]); @@ -126,7 +131,23 @@ function About({ section }) {
-
+
+
+ +

+ Learn our curriculum with high quality, interactive courses from our + partner{" "} + + Scrimba + + {" !"} +

+
); diff --git a/client/src/curriculum/module.scss b/client/src/curriculum/module.scss index b191b979759c..b09202b5234c 100644 --- a/client/src/curriculum/module.scss +++ b/client/src/curriculum/module.scss @@ -59,13 +59,25 @@ padding-left: 2rem; > li { - &:not(.external) { - list-style-image: var(--curriculum-module-mdn-resource); - } + list-style-image: var(--curriculum-module-mdn-resource); - &.external { + &.curriculum-external-li { list-style-image: url("../assets/icons/curriculum-ext-resource.svg"); } + + em { + background: var(--curriculum-bg-color); + border-radius: 1em; + color: var(--text-primary); + display: inline-block; + font-size: 0.5rem; + font-weight: bold; + line-height: 1.7; + padding: 0 0.4em; + text-rendering: optimizeLegibility; + text-transform: uppercase; + vertical-align: super; + } } } } diff --git a/client/src/curriculum/modules-list.scss b/client/src/curriculum/modules-list.scss index eef7a9b937d6..b9d0499c9b42 100644 --- a/client/src/curriculum/modules-list.scss +++ b/client/src/curriculum/modules-list.scss @@ -157,7 +157,7 @@ > a { background-color: var(--curriculum-bg-color-list-item-body); - border: 1px solid var(--curriculum-border-color-list-item); + border: 1px solid var(--curriculum-border-color); border-radius: var(--elem-radius); box-shadow: var(--curriculum-shadow); display: flex; @@ -172,7 +172,7 @@ width: 100%; &:hover { - border-color: var(--curriculum-border-color-list-item-hover); + border-color: var(--curriculum-border-color-hover); text-decoration: none; } diff --git a/client/src/curriculum/overview.tsx b/client/src/curriculum/overview.tsx index e46932337788..34170f0a02ac 100644 --- a/client/src/curriculum/overview.tsx +++ b/client/src/curriculum/overview.tsx @@ -8,9 +8,7 @@ import { CurriculumLayout } from "./layout"; import "./index.scss"; -export function CurriculumModuleOverview( - props: HydrationData -) { +export function CurriculumOverview(props: HydrationData) { const doc = useCurriculumDoc(props as CurriculumData); // ["Getting", "started", "modules"] const titleParts = doc?.title?.split(" ") || []; diff --git a/client/src/curriculum/partner-banner.scss b/client/src/curriculum/partner-banner.scss new file mode 100644 index 000000000000..18c41d1b4e55 --- /dev/null +++ b/client/src/curriculum/partner-banner.scss @@ -0,0 +1,102 @@ +@use "../ui/vars" as *; + +.curriculum-partner-banner-container { + .partner-banner { + background-color: var(--curriculum-bg-color-partner); + background-image: var(--curriculum-bg-image-partner); + background-repeat: no-repeat; + border: 1px solid var(--curriculum-border-color); + box-shadow: var(--curriculum-shadow); + display: grid; + grid-template-areas: "h2" "image" "p" "a"; + margin: 1rem auto; + + @media screen and (min-width: $screen-md) { + grid-template-areas: "copy image"; + grid-template-columns: 2fr minmax(24rem, 1fr); + } + + > picture { + align-self: end; + grid-area: image; + height: max-content; + justify-self: center; + max-width: max-content; + width: 90%; + @media screen and (min-width: $screen-md) { + justify-self: end; + width: 100%; + } + } + + > section { + display: contents; + grid-area: copy; + padding: 2rem 4rem; + @media screen and (min-width: $screen-md) { + display: block; + } + + > h2 { + grid-area: h2; + margin: 1rem 0 2rem; + text-align: center; + @media screen and (min-width: $screen-md) { + margin: 0 0 1rem; + text-align: left; + } + + > a { + color: var(--curriculum-category-color); + display: inline-block; + min-width: max-content; + + &:visited:not([href^="#"]) { + color: var(--curriculum-category-color); + } + + &::before { + content: url("../assets/icons/curriculum-partner-underline-small.svg"); + position: absolute; + transform: translate3d(-0.1em, 0.4em, 0); + @media screen and (min-width: $screen-md) { + content: url("../assets/icons/curriculum-partner-underline-large.svg"); + } + } + + &:visited, + &:hover { + text-decoration: none; + + &::before { + content: none; + } + } + + &::after { + background-color: var(--curriculum-category-color); + height: 0.625em; + width: 0.625em; + } + } + } + + > p { + grid-area: p; + margin: 1.5rem 1rem; + @media screen and (min-width: $screen-md) { + margin: 1rem 0 1.5rem; + } + } + + > a { + color: var(--text-primary); + grid-area: a; + margin: 1rem; + @media screen and (min-width: $screen-md) { + margin: 1rem 0 0; + } + } + } + } +} diff --git a/client/src/curriculum/partner-banner.tsx b/client/src/curriculum/partner-banner.tsx new file mode 100644 index 000000000000..c0509862f72b --- /dev/null +++ b/client/src/curriculum/partner-banner.tsx @@ -0,0 +1,44 @@ +import ThemedPicture from "../ui/atoms/themed-picture"; +import bannerDark from "../../public/assets/curriculum/curriculum-partner-banner-illustration-large-dark.svg"; +import bannerLight from "../../public/assets/curriculum/curriculum-partner-banner-illustration-large-light.svg"; + +import "./partner-banner.scss"; + +export function PartnerBanner() { + return ( +
+
+
+

+ Learn the curriculum with{" "} + + Scrimba + {" "} + and become job ready +

+

+ Scrimba's Frontend Developer Career Path teaches the MDN Curriculum + Core with fun interactive lessons and challenges, knowledgeable + teachers, and a supportive community. Go from zero to landing your + first front-end job! +

+ + Find out more + +
+ + +
+
+ ); +} diff --git a/client/src/curriculum/scrim.scss b/client/src/curriculum/scrim.scss new file mode 100644 index 000000000000..1e20cc6cc785 --- /dev/null +++ b/client/src/curriculum/scrim.scss @@ -0,0 +1,159 @@ +.scrim { + align-items: center; + display: flex; + flex-direction: column; + height: 100%; + justify-content: center; + max-width: 24rem; + width: 100%; + + dialog { + display: contents; + + > .scrim-with-border { + background-image: var(--curriculum-scrim-bg); + background-position: bottom right; + background-repeat: no-repeat; + height: 16rem; + width: 100%; + + > .scrim-inner { + --inner-width: 22rem; + --inner-max-width: calc(100vw - 2 * var(--gutter)); + align-items: start; + background-color: #000; + display: flex; + flex-direction: column; + max-width: var(--inner-max-width); + width: var(--inner-width); + + .partner-header { + align-items: center; + display: flex; + flex-flow: row; + gap: 0.25rem; + justify-content: end; + margin: 0; + padding: 0 0.5rem; + width: 100%; + + a { + &::after { + background-color: #fff; + } + + &:hover { + &::after { + background-color: var(--curriculum-color); + } + } + } + + button { + color: #fff; + cursor: pointer; + + > div { + background-color: #fffd; + height: 1rem; + width: 1rem; + + &.fullscreen-button.enter { + mask-image: url("../assets/icons/fullscreen-enter.svg"); + } + + &.fullscreen-button.exit { + mask-image: url("../assets/icons/cancel.svg"); + } + + &:hover { + background-color: var(--curriculum-color); + } + } + + &:focus-visible { + outline-color: var(--accent-primary); + outline-offset: 1px; + outline-style: auto; + } + } + + span { + color: #fff; + font-size: var(--type-tiny-font-size); + margin-right: auto; + } + } + + .fullscreen-overlay.enter { + background-position: center; + background-repeat: no-repeat; + background-size: 7rem; + cursor: pointer; + height: 12.5rem; + margin-top: 1.75rem; + max-width: var(--inner-max-width); + position: absolute; + width: var(--inner-width); + + > svg { + color: #fff; + height: 7rem; + width: 7rem; + } + + &:hover { + > svg { + color: var(--curriculum-color); + } + } + + &:focus-visible { + > svg { + color: var(--accent-primary); + } + } + } + + .fullscreen-overlay.exit { + display: none; + } + + iframe, + img { + border: 1px solid #000; + height: 12.5rem; + width: 100%; + } + } + } + + &[open] { + background-color: #0009; + height: 90vh; + width: 90vw; + + .scrim-with-border { + background-image: none; + height: 100%; + width: 100%; + + .scrim-inner { + height: 100%; + width: 100%; + + iframe, + img { + height: 100%; + width: 100%; + } + } + } + } + } + + p { + margin: 0; + padding: 1rem 0; + } +} diff --git a/client/src/curriculum/scrim.tsx b/client/src/curriculum/scrim.tsx new file mode 100644 index 000000000000..6232cfd56930 --- /dev/null +++ b/client/src/curriculum/scrim.tsx @@ -0,0 +1,95 @@ +import { useState, useRef } from "react"; + +import { ReactComponent as EnterFullscreen } from "../../public/assets/curriculum/fullscreen-enter.svg"; + +import "./scrim.scss"; +import { CURRICULUM } from "../telemetry/constants"; +import { useGleanClick } from "../telemetry/glean-context"; + +export function ScrimIframe({ + url, + children, +}: { + url: string; + children?: React.ReactNode; +}) { + const [scrimLoaded, setScrimLoaded] = useState(false); + const [showDialog, setShowDialog] = useState(false); + const dialog = useRef(null); + + const gleanClick = useGleanClick(); + + return ( +
+ setShowDialog(false)}> +
+
+
+ Clicking will load content from scrimba.com + + + Open on Scrimba + +
+ {scrimLoaded ? ( + + ) : ( + <> + A video player showing a 3 minute video titled "Scrimba + MDN partnership", with a thumbnail featuring two laptops with the MDN and Scrimba logos, connected by a handshake animation. + + + )} +
+
+ + {children} +
+ ); +} diff --git a/client/src/curriculum/utils.ts b/client/src/curriculum/utils.ts index 054248f3f363..de85ae34a593 100644 --- a/client/src/curriculum/utils.ts +++ b/client/src/curriculum/utils.ts @@ -16,6 +16,14 @@ export enum Topic { Tooling = "Tooling", None = "", } +export enum Template { + Module = "module", + Overview = "overview", + Landing = "landing", + About = "about", + Default = "default", +} + export function topic2css(topic?: Topic) { switch (topic) { case Topic.WebStandards: @@ -69,7 +77,7 @@ export function useCurriculumDoc( { fallbackData: appProps?.doc, revalidateOnFocus: WRITER_MODE, - revalidateOnMount: !appProps?.doc?.modified, + revalidateOnMount: !appProps?.doc?.template, } ); const doc: CurriculumDoc | undefined = data || appProps?.doc || undefined; diff --git a/client/src/telemetry/constants.ts b/client/src/telemetry/constants.ts index 672ce00c9323..cebf6740e83a 100644 --- a/client/src/telemetry/constants.ts +++ b/client/src/telemetry/constants.ts @@ -25,6 +25,7 @@ export const PLAYGROUND = "play_action"; export const AI_EXPLAIN = "ai_explain"; export const SETTINGS = "settings"; export const OBSERVATORY = "observatory"; +export const CURRICULUM = "curriculum"; export const A11Y_MENU = "a11y_menu"; diff --git a/client/src/ui/base/_themes.scss b/client/src/ui/base/_themes.scss index 13536ef48438..3a4a6cd74bc1 100644 --- a/client/src/ui/base/_themes.scss +++ b/client/src/ui/base/_themes.scss @@ -263,8 +263,8 @@ --curriculum-color-topic-tooling: #{$mdn-color-light-theme-green-60}; --curriculum-color-topic-practices: #{$mdn-color-light-theme-violet-60}; --curriculum-color-landing-laptop: #e3642a; - --curriculum-border-color-list-item: #f2f1f1; - --curriculum-border-color-list-item-hover: var(--text-inactive); + --curriculum-border-color: #f2f1f1; + --curriculum-border-color-hover: var(--text-inactive); --curriculum-bg-color-list-item-body: #fff; --curriculum-color-list-item-icon-topic-standards: #{$mdn-color-light-theme-red-60}; --curriculum-color-list-item-icon-topic-styling: #{$mdn-color-light-theme-blue-60}; @@ -281,6 +281,7 @@ --curriculum-bg-color-list-item-topic-scripting: #{$mdn-color-light-theme-yellow-50}30; --curriculum-bg-color-list-item-topic-tooling: #{$mdn-color-light-theme-green-50}30; --curriculum-bg-color-list-item-topic-practices: #{$mdn-color-light-theme-violet-50}30; + --curriculum-bg-color-partner: #fff; --curriculum-shadow: 4px 4px 8px 0 rgba(179, 179, 179, 0.18), -4px 4px 8px 0 rgba(179, 179, 179, 0.15); --curriculum-shadow-landing-about-ul: 0 4px 10px 0 rgba(227, 100, 42, 0.06), @@ -294,18 +295,22 @@ --curriculum-landing-started-advanced: url("../../assets/icons/curriculum-landing-started-advanced.svg#small-light"); --curriculum-landing-started-employment: url("../../assets/icons/curriculum-landing-started-employment.svg#small-light"); --curriculum-landing-started-educator: url("../../assets/icons/curriculum-landing-started-educator.svg#small-light"); + --curriculum-module-mdn-resource: url("../../assets/icons/curriculum-mdn-resource.svg#light"); + --curriculum-bullet: url("../../assets/icons/curriculum-bullet.svg#light"); + --curriculum-about-covered: url("../../assets/icons/curriculum-about-covered.svg#light"); + --curriculum-about-detail: url("../../assets/icons/curriculum-about-detail.svg#light"); + --curriculum-about-educators: url("../../assets/icons/curriculum-about-educators.svg#light"); + --curriculum-about-not: url("../../assets/icons/curriculum-about-not.svg#light"); + --curriculum-about-students: url("../../assets/icons/curriculum-about-students.svg#light"); + --curriculum-bg-image-partner: url("../../assets/curriculum-partner-bg.svg#light"); + --curriculum-scrim-bg: url("../../assets/curriculum-scrim-bg.svg#light"); + --curriculum-landing-arrow: url("../../assets/curriculum-landing-arrow.svg#light"); + @media (min-width: $screen-md) { --curriculum-landing-started-beginner: url("../../assets/icons/curriculum-landing-started-beginner.svg#light"); --curriculum-landing-started-advanced: url("../../assets/icons/curriculum-landing-started-advanced.svg#light"); --curriculum-landing-started-employment: url("../../assets/icons/curriculum-landing-started-employment.svg#light"); --curriculum-landing-started-educator: url("../../assets/icons/curriculum-landing-started-educator.svg#light"); - --curriculum-module-mdn-resource: url("../../assets/icons/curriculum-mdn-resource.svg#light"); - --curriculum-bullet: url("../../assets/icons/curriculum-bullet.svg#light"); - --curriculum-about-covered: url("../../assets/icons/curriculum-about-covered.svg#light"); - --curriculum-about-detail: url("../../assets/icons/curriculum-about-detail.svg#light"); - --curriculum-about-educators: url("../../assets/icons/curriculum-about-educators.svg#light"); - --curriculum-about-not: url("../../assets/icons/curriculum-about-not.svg#light"); - --curriculum-about-students: url("../../assets/icons/curriculum-about-students.svg#light"); } color-scheme: light; @@ -572,8 +577,8 @@ --curriculum-bg-color-orange: #b25c35; --curriculum-color-landing-laptop: #b25c35; --curriculum-bg-color-list-item-body: #000; - --curriculum-border-color-list-item: #4e4e4e; - --curriculum-border-color-list-item-hover: var(--text-inactive); + --curriculum-border-color: #4e4e4e; + --curriculum-border-color-hover: var(--text-inactive); --curriculum-module-label-color: #e3642a; --curriculum-module-label-bg-color: #321d13; --curriculum-bg-color-list-item-topic-standards: #343434; @@ -591,6 +596,7 @@ --curriculum-bg-color-list-item-icon-topic-scripting: #806a42; --curriculum-bg-color-list-item-icon-topic-tooling: #428050; --curriculum-bg-color-list-item-icon-topic-practices: #584280; + --curriculum-bg-color-partner: #1f1c1a; --curriculum-shadow: 2px 2px 5px 0 rgba(36, 36, 36, 0.15), -2px 2px 8px 0 rgba(87, 87, 87, 0.15); --curriculum-shadow-landing-about-ul: 0 4px 10px 0 rgba(227, 100, 42, 0.06), @@ -604,18 +610,22 @@ --curriculum-landing-started-advanced: url("../../assets/icons/curriculum-landing-started-advanced.svg#small-dark"); --curriculum-landing-started-employment: url("../../assets/icons/curriculum-landing-started-employment.svg#small-dark"); --curriculum-landing-started-educator: url("../../assets/icons/curriculum-landing-started-educator.svg#small-dark"); + --curriculum-module-mdn-resource: url("../../assets/icons/curriculum-mdn-resource.svg#dark"); + --curriculum-bullet: url("../../assets/icons/curriculum-bullet.svg#dark"); + --curriculum-about-covered: url("../../assets/icons/curriculum-about-covered.svg#dark"); + --curriculum-about-detail: url("../../assets/icons/curriculum-about-detail.svg#dark"); + --curriculum-about-educators: url("../../assets/icons/curriculum-about-educators.svg#dark"); + --curriculum-about-not: url("../../assets/icons/curriculum-about-not.svg#dark"); + --curriculum-about-students: url("../../assets/icons/curriculum-about-students.svg#dark"); + --curriculum-bg-image-partner: url("../../assets/curriculum-partner-bg.svg#dark"); + --curriculum-scrim-bg: url("../../assets/curriculum-scrim-bg.svg#dark"); + --curriculum-landing-arrow: url("../../assets/curriculum-landing-arrow.svg#dark"); + @media (min-width: $screen-md) { --curriculum-landing-started-beginner: url("../../assets/icons/curriculum-landing-started-beginner.svg#dark"); --curriculum-landing-started-advanced: url("../../assets/icons/curriculum-landing-started-advanced.svg#dark"); --curriculum-landing-started-employment: url("../../assets/icons/curriculum-landing-started-employment.svg#dark"); --curriculum-landing-started-educator: url("../../assets/icons/curriculum-landing-started-educator.svg#dark"); - --curriculum-module-mdn-resource: url("../../assets/icons/curriculum-mdn-resource.svg#dark"); - --curriculum-bullet: url("../../assets/icons/curriculum-bullet.svg#dark"); - --curriculum-about-covered: url("../../assets/icons/curriculum-about-covered.svg#dark"); - --curriculum-about-detail: url("../../assets/icons/curriculum-about-detail.svg#dark"); - --curriculum-about-educators: url("../../assets/icons/curriculum-about-educators.svg#dark"); - --curriculum-about-not: url("../../assets/icons/curriculum-about-not.svg#dark"); - --curriculum-about-students: url("../../assets/icons/curriculum-about-students.svg#dark"); } color-scheme: dark; diff --git a/libs/constants/index.js b/libs/constants/index.js index 972e680ccd30..cf445f4149f2 100644 --- a/libs/constants/index.js +++ b/libs/constants/index.js @@ -130,6 +130,8 @@ export const CSP_DIRECTIVES = { "*.mdnplay.dev", "*.mdnyalp.dev", + "https://v2.scrimba.com", + "https://scrimba.com", "jsfiddle.net", "www.youtube-nocookie.com", "codepen.io", diff --git a/libs/types/curriculum.ts b/libs/types/curriculum.ts index cdd1bff6dfd5..2f8a963c8d47 100644 --- a/libs/types/curriculum.ts +++ b/libs/types/curriculum.ts @@ -15,6 +15,7 @@ export enum Template { Overview = "overview", Landing = "landing", About = "about", + Default = "default", } export interface CurriculumCoreMetaData { @@ -58,6 +59,7 @@ export interface CurriculumDoc extends Doc { prevNext?: PrevNext; topic?: Topic; group?: string; + template: Template; } export interface CurriculumData {