Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(curriculum): update curriculum #11426

Merged
merged 29 commits into from
Jul 9, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
a2beace
feat(curriculum): partner banner
fiji-flo Apr 3, 2024
fff59b3
border and color changes
fiji-flo Apr 4, 2024
425d548
updates
fiji-flo Jun 14, 2024
ab9dfc5
Merge remote-tracking branch 'upstream/main' into MP-970-curriculum-p…
fiji-flo Jun 18, 2024
a2db54a
with embed
fiji-flo Jun 18, 2024
805e69c
lint
fiji-flo Jun 18, 2024
6471198
lint
fiji-flo Jun 18, 2024
fd591c2
csp
fiji-flo Jun 18, 2024
764d1e9
new scrim background
fiji-flo Jun 23, 2024
4c48beb
ui tweaks
fiji-flo Jun 24, 2024
1fe6271
update scrim url
fiji-flo Jun 24, 2024
9296b30
tweak enter fullscreen
fiji-flo Jun 24, 2024
2bf7f41
minor fixes and new svgs
fiji-flo Jun 26, 2024
200fc3c
Merge remote-tracking branch 'upstream/main' into MP-970-curriculum-p…
fiji-flo Jul 4, 2024
0b54995
feat(curriculum): update partner
fiji-flo Jul 5, 2024
85069c3
Merge remote-tracking branch 'upstream/main' into MP-970-curriculum-p…
fiji-flo Jul 5, 2024
20d0f3b
fix partner links
fiji-flo Jul 5, 2024
d0d80e4
fix links
fiji-flo Jul 5, 2024
e5bf70a
fix images
fiji-flo Jul 5, 2024
0103c0e
Merge remote-tracking branch 'upstream/main' into MP-970-curriculum-p…
fiji-flo Jul 8, 2024
ac0f099
feat(curriculum): render based on template
fiji-flo Jul 8, 2024
969b315
fix bottom banner
fiji-flo Jul 8, 2024
d7b87ca
Merge remote-tracking branch 'upstream/main' into MP-970-curriculum-p…
fiji-flo Jul 8, 2024
82960de
move course partner to curriciulum content
fiji-flo Jul 8, 2024
fa199ff
feedback
fiji-flo Jul 8, 2024
d21adbe
update scrim
fiji-flo Jul 8, 2024
21e391e
keep em
fiji-flo Jul 8, 2024
7ef1a41
more feedback
fiji-flo Jul 9, 2024
2e6e0cb
more feedback
fiji-flo Jul 9, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions build/curriculum.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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");
}
});

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 24 additions & 0 deletions client/public/assets/curriculum/fullscreen-enter.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added client/public/assets/curriculum/scrim.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
26 changes: 26 additions & 0 deletions client/src/assets/curriculum-landing-arrow.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 20 additions & 0 deletions client/src/assets/curriculum-partner-bg.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 24 additions & 0 deletions client/src/assets/curriculum-scrim-bg.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 24 additions & 0 deletions client/src/assets/icons/fullscreen-enter.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 25 additions & 0 deletions client/src/curriculum/default.tsx
Original file line number Diff line number Diff line change
@@ -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<any, CurriculumDoc>) {
const doc = useCurriculumDoc(props);
const [coloredTitle, ...restTitle] = doc?.title?.split(" ") || [];
return (
<CurriculumLayout
doc={doc}
extraClasses={["curriculum-module", `topic-${topic2css(doc?.topic)}`]}
>
<header>
<h1>
<span>{coloredTitle}</span> {restTitle.join(" ")}
</h1>
</header>
<RenderCurriculumBody doc={doc} />
</CurriculumLayout>
);
}
37 changes: 19 additions & 18 deletions client/src/curriculum/index.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<Routes>
<Route path="/" element={<CurriculumLanding {...appProps} />} />
<Route
path="/about-curriculum/"
element={<CurriculumAbout {...appProps} />}
/>
<Route
path="/:module/"
element={<CurriculumModuleOverview {...appProps} />}
/>
<Route path="/:module/*" element={<CurriculumModule {...appProps} />} />
</Routes>
);
export function Curriculum(appProps: HydrationData<any, CurriculumDoc>) {
const doc = useCurriculumDoc(appProps as CurriculumData);
switch (doc?.template) {
case Template.Landing:
return <CurriculumLanding {...appProps} />;
case Template.Overview:
return <CurriculumOverview {...appProps} />;
case Template.Module:
return <CurriculumModule {...appProps} />;
case Template.About:
return <CurriculumAbout {...appProps} />;
case Template.Default:
default:
return <CurriculumDefault {...appProps} />;
fiji-flo marked this conversation as resolved.
Show resolved Hide resolved
}
}
53 changes: 42 additions & 11 deletions client/src/curriculum/landing.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand All @@ -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;
}
}
}
}

Expand Down
23 changes: 22 additions & 1 deletion client/src/curriculum/landing.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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<any, CurriculumDoc>) {
const doc = useCurriculumDoc(appProps as CurriculumData);
Expand Down Expand Up @@ -98,6 +100,7 @@ export function CurriculumLanding(appProps: HydrationData<any, CurriculumDoc>) {
return null;
}}
/>
<PartnerBanner />
</CurriculumLayout>
);
}
Expand All @@ -119,14 +122,32 @@ 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]);
return (
<section key={id} className="landing-about-container">
<div className="landing-about">
<DisplayH2 id={id} title={title} />
<div dangerouslySetInnerHTML={html}></div>
<div className="about-content" dangerouslySetInnerHTML={html}></div>
<div className="arrow"></div>
<ScrimIframe url={SCRIM_URL}>
<p>
Learn our curriculum with high quality, interactive courses from our
partner{" "}
<a
href="https://scrimba.com/?via=mdn"
className="external"
target="_blank"
rel="noreferrer"
>
Scrimba
</a>
{" !"}
</p>
</ScrimIframe>
</div>
</section>
);
Expand Down
Loading