diff --git a/client/public/assets/curriculum/cur-topic-practices.svg b/client/public/assets/curriculum/cur-topic-practices.svg index 5e8e3f6e57c9..fb77081860aa 100644 --- a/client/public/assets/curriculum/cur-topic-practices.svg +++ b/client/public/assets/curriculum/cur-topic-practices.svg @@ -2,5 +2,5 @@ + fill="#356A1C" /> diff --git a/client/public/assets/curriculum/cur-topic-scripting.svg b/client/public/assets/curriculum/cur-topic-scripting.svg index afc18e11a523..aab342cdb780 100644 --- a/client/public/assets/curriculum/cur-topic-scripting.svg +++ b/client/public/assets/curriculum/cur-topic-scripting.svg @@ -1,6 +1,6 @@ + d="M22.4805 38.127C21.888 38.127 21.3548 38.0762 20.8809 37.9746C20.4154 37.873 20.1826 37.6868 20.1826 37.416C20.1826 37.3568 20.2038 37.2214 20.2461 37.0098C20.2884 36.7982 20.3434 36.6035 20.4111 36.4258C20.4873 36.248 20.5804 36.1592 20.6904 36.1592C20.7074 36.1592 20.8005 36.1761 20.9697 36.21C21.1898 36.2607 21.3802 36.3031 21.541 36.3369C21.7103 36.3623 21.9007 36.375 22.1123 36.375C23.2295 36.375 24.0335 36.1549 24.5244 35.7148C25.0238 35.2747 25.2734 34.568 25.2734 33.5947V22.6514C25.2734 22.3128 25.5739 22.1436 26.1748 22.1436H26.3525C26.9619 22.1436 27.2666 22.3128 27.2666 22.6514V33.3662C27.2666 34.8643 26.8815 36.0322 26.1113 36.8701C25.3496 37.708 24.1393 38.127 22.4805 38.127ZM34.1553 38.127C33.3258 38.127 32.5514 38.0381 31.832 37.8604C31.1211 37.6742 30.5498 37.4541 30.1182 37.2002C29.695 36.9378 29.4834 36.7008 29.4834 36.4893C29.4834 36.3708 29.5299 36.2142 29.623 36.0195C29.7246 35.8249 29.8389 35.6514 29.9658 35.499C30.0928 35.3467 30.1943 35.2705 30.2705 35.2705C30.3382 35.2705 30.4863 35.3382 30.7148 35.4736C31.2396 35.7445 31.7601 35.9688 32.2764 36.1465C32.7926 36.3242 33.4189 36.4131 34.1553 36.4131C34.7308 36.4131 35.2428 36.3031 35.6914 36.083C36.14 35.863 36.487 35.554 36.7324 35.1562C36.9863 34.75 37.1133 34.2845 37.1133 33.7598C37.1133 33.2012 36.9609 32.7399 36.6562 32.376C36.36 32.0036 35.9961 31.7116 35.5645 31.5C35.1413 31.2799 34.5234 31.0091 33.7109 30.6875C32.8307 30.349 32.1325 30.0358 31.6162 29.748C31.1084 29.4518 30.6725 29.0244 30.3086 28.4658C29.9531 27.9072 29.7754 27.1667 29.7754 26.2441C29.7754 25.4401 29.9827 24.7207 30.3975 24.0859C30.8122 23.4427 31.4004 22.9434 32.1621 22.5879C32.9238 22.2324 33.7998 22.0547 34.79 22.0547C35.2386 22.0547 35.7507 22.1182 36.3262 22.2451C36.9017 22.3636 37.3926 22.5286 37.7988 22.7402C38.2135 22.9518 38.4209 23.1846 38.4209 23.4385C38.4209 23.5485 38.3743 23.7008 38.2812 23.8955C38.1966 24.0817 38.0951 24.251 37.9766 24.4033C37.8581 24.5557 37.765 24.6318 37.6973 24.6318C37.6211 24.6318 37.4688 24.5684 37.2402 24.4414C36.8594 24.2383 36.4827 24.0775 36.1104 23.959C35.738 23.832 35.2852 23.7686 34.752 23.7686C33.8802 23.7686 33.1735 23.9928 32.6318 24.4414C32.0986 24.89 31.832 25.5163 31.832 26.3203C31.832 26.8027 31.9505 27.2005 32.1875 27.5137C32.4245 27.8268 32.7249 28.0765 33.0889 28.2627C33.4528 28.4489 33.9606 28.6647 34.6123 28.9102C34.6546 28.9186 34.752 28.9525 34.9043 29.0117C35.8014 29.3587 36.5335 29.6973 37.1006 30.0273C37.6761 30.349 38.1628 30.8145 38.5605 31.4238C38.9668 32.0332 39.1699 32.8118 39.1699 33.7598C39.1699 34.6484 38.9626 35.4229 38.5479 36.083C38.1416 36.7432 37.5576 37.251 36.7959 37.6064C36.0426 37.9535 35.1624 38.127 34.1553 38.127Z" + fill="#6A621C" /> diff --git a/client/public/assets/curriculum/cur-topic-standards.svg b/client/public/assets/curriculum/cur-topic-standards.svg index 3dd7e8e457ba..cd09db253b67 100644 --- a/client/public/assets/curriculum/cur-topic-standards.svg +++ b/client/public/assets/curriculum/cur-topic-standards.svg @@ -1,6 +1,6 @@ + d="M31.1121 18.75L33.5621 19.25L28.8871 41.25L26.4371 40.75L31.1121 18.75ZM39.4871 30L34.9996 25.5125V21.975L43.0246 30L34.9996 38.0125V34.475L39.4871 30ZM16.9746 30L24.9996 21.975V25.5125L20.5121 30L24.9996 34.475V38.0125L16.9746 30Z" + fill="#C1283E" /> diff --git a/client/public/assets/curriculum/cur-topic-styling.svg b/client/public/assets/curriculum/cur-topic-styling.svg index cd69f02e1fe4..628ef89d8216 100644 --- a/client/public/assets/curriculum/cur-topic-styling.svg +++ b/client/public/assets/curriculum/cur-topic-styling.svg @@ -1,5 +1,6 @@ - + diff --git a/client/public/assets/curriculum/cur-topic-tooling.svg b/client/public/assets/curriculum/cur-topic-tooling.svg index b9a306d2f273..ef7b45bf0440 100644 --- a/client/public/assets/curriculum/cur-topic-tooling.svg +++ b/client/public/assets/curriculum/cur-topic-tooling.svg @@ -1,6 +1,6 @@ + d="M32.5695 33.7684C32.3782 33.9643 32.38 34.2777 32.5737 34.4713L39.3665 41.2642C39.5634 41.461 39.8832 41.4592 40.0777 41.26L42.0164 39.2754C42.2078 39.0795 42.2059 38.7661 42.0123 38.5724L35.2194 31.7796C35.0226 31.5827 34.7028 31.5846 34.5082 31.7838L32.5695 33.7684ZM36.8742 27.6219C36.5051 27.6219 36.1144 27.586 35.7674 27.4927C35.571 27.4398 35.355 27.4782 35.2108 27.6217L21.5653 41.2074C21.3699 41.4019 21.0539 41.4016 20.8589 41.2066L18.928 39.2757C18.7327 39.0803 18.7328 38.7635 18.9282 38.5683L27.4837 30.0244C27.6788 29.8296 27.6793 29.5136 27.4849 29.3181L25.9728 27.7975C25.7797 27.6032 25.4662 27.6005 25.2697 27.7915L25.0728 27.983C24.8787 28.1717 24.5697 28.1717 24.3757 27.983L23.7603 27.3845C23.4433 27.0763 22.9117 27.3009 22.9117 27.743V29.9273C22.9117 30.0599 22.859 30.1871 22.7653 30.2808L22.3923 30.6538C22.1962 30.8499 21.8781 30.849 21.6832 30.6518L17.9863 26.9129C17.7929 26.7173 17.7938 26.4023 17.9883 26.2078L18.3653 25.8308C18.459 25.7371 18.5862 25.6844 18.7188 25.6844H20.8232C21.2678 25.6844 21.4912 25.1476 21.178 24.8321L20.6253 24.2754C20.4312 24.08 20.4317 23.7643 20.6265 23.5696L24.7242 19.4719C26.0685 18.1276 28.1625 18.0189 29.628 19.1458C29.8451 19.3127 29.8453 19.6295 29.6539 19.8254L27.7083 21.8171C27.5164 22.0135 27.5188 22.3279 27.7136 22.5213L28.7681 23.5683C28.9646 23.7634 28.9652 24.0809 28.7694 24.2767L28.5913 24.4548C28.3956 24.6505 28.3961 24.9678 28.5923 25.1629L30.1149 26.6771C30.3126 26.8736 30.6328 26.8706 30.8267 26.6703L32.5188 24.9224C32.6585 24.7781 32.695 24.565 32.6405 24.3717C32.5426 24.0244 32.4992 23.6363 32.4992 23.2844C32.4992 20.8219 34.4492 18.8844 36.8742 18.8844C37.3783 18.8844 37.8415 18.9661 38.2718 19.1296C38.5764 19.2454 38.6254 19.6332 38.3949 19.8637L35.8653 22.3933C35.67 22.5886 35.67 22.9052 35.8653 23.1004L37.0332 24.2683C37.2284 24.4636 37.545 24.4636 37.7403 24.2683L40.2699 21.7387C40.5004 21.5082 40.889 21.5567 41.0054 21.8612C41.1679 22.2865 41.2492 22.7477 41.2492 23.2844C41.2492 25.6844 39.3117 27.6219 36.8742 27.6219Z" + fill="#481C6A" /> diff --git a/client/src/assets/icons/cur-landing-about-beginner.svg b/client/src/assets/icons/cur-landing-about-beginner.svg new file mode 100644 index 000000000000..076b9856274b --- /dev/null +++ b/client/src/assets/icons/cur-landing-about-beginner.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/src/assets/icons/cur-landing-about-bullet.svg b/client/src/assets/icons/cur-landing-about-bullet.svg new file mode 100644 index 000000000000..b8d39998bc56 --- /dev/null +++ b/client/src/assets/icons/cur-landing-about-bullet.svg @@ -0,0 +1,8 @@ + + + + diff --git a/client/src/assets/icons/cur-landing-about-free.svg b/client/src/assets/icons/cur-landing-about-free.svg new file mode 100644 index 000000000000..6ba513e3749b --- /dev/null +++ b/client/src/assets/icons/cur-landing-about-free.svg @@ -0,0 +1,6 @@ + + + + diff --git a/client/src/assets/icons/cur-landing-about-pace.svg b/client/src/assets/icons/cur-landing-about-pace.svg new file mode 100644 index 000000000000..dbc10c33c659 --- /dev/null +++ b/client/src/assets/icons/cur-landing-about-pace.svg @@ -0,0 +1,6 @@ + + + + diff --git a/client/src/curriculum/about.tsx b/client/src/curriculum/about.tsx index c6c7dc6db0d7..cfccea5b5b78 100644 --- a/client/src/curriculum/about.tsx +++ b/client/src/curriculum/about.tsx @@ -2,7 +2,7 @@ import useSWR from "swr"; import { HydrationData } from "../../../libs/types/hydration"; import { CurriculumDoc, ModuleData } from "../../../libs/types/curriculum"; -import { HTTPError, RenderDocumentBody } from "../document"; +import { HTTPError } from "../document"; import { PLACEMENT_ENABLED, WRITER_MODE } from "../env"; import { SidePlacement } from "../ui/organisms/placement"; @@ -15,6 +15,7 @@ import { ArticleActionsContainer } from "../ui/organisms/article-actions-contain import { topic2css, useDocTitle } from "./utils"; import { SidebarContainer } from "../document/organisms/sidebar"; import { TOC } from "../document/organisms/toc"; +import { RenderCurriculumBody } from "./body"; export function CurriculumAbout(props: HydrationData) { const dataURL = `./index.json`; @@ -77,7 +78,7 @@ export function CurriculumAbout(props: HydrationData) { {coloredTitle} {restTitle.join(" ")} - + diff --git a/client/src/curriculum/body.tsx b/client/src/curriculum/body.tsx new file mode 100644 index 000000000000..4465f87ccbc8 --- /dev/null +++ b/client/src/curriculum/body.tsx @@ -0,0 +1,44 @@ +import { useMemo } from "react"; +import { DisplayH2, DisplayH3 } from "../document/ingredients/utils"; +import { CurriculumDoc } from "../../../libs/types/curriculum"; +import { Section } from "../../../libs/types/document"; + +function Render({ section }) { + const { id } = section; + const html = useMemo(() => ({ __html: section.content }), [section.content]); + + if (!id) { + return ( +
+ ); + } + + const DisplayHx = section.isH3 ? DisplayH3 : DisplayH2; + + return ( +
+ +
+
+ ); +} + +export function RenderCurriculumBody({ + doc, + renderer = () => null, +}: { + doc: CurriculumDoc; + renderer?: (section: Section, i: number) => null | JSX.Element; +}) { + return doc.body.map((section, i) => { + return renderer(section, i) || ; + }); +} diff --git a/client/src/curriculum/landing.scss b/client/src/curriculum/landing.scss index de3878d7889a..4b9905043bf2 100644 --- a/client/src/curriculum/landing.scss +++ b/client/src/curriculum/landing.scss @@ -1,5 +1,157 @@ -.curriculum-landing { - header > svg { - width: 50%; +@use "../ui/vars" as *; + +.curriculum-content-container.curriculum-landing { + margin: 0; + max-width: 100%; + padding: 0; + width: 100%; + + > article { + > header, + > section { + margin: 0 auto 3rem; + max-width: min(var(--max-width), 74rem); + padding-left: var(--gutter); + padding-right: var(--gutter); + width: 100%; + } + } + + .curriculum-content { + ol.modules-list { + @media screen and (min-width: $screen-sm) { + grid-template-columns: 1fr 1fr; + } + @media screen and (min-width: $screen-md) { + grid-template-columns: 1fr 1fr 1fr; + } + @media screen and (min-width: $screen-lg) { + grid-template-columns: 1fr 1fr 1fr 1fr; + } + } + } + + header.landing-header { + display: flex; + flex-direction: row-reverse; + flex-wrap: wrap; + justify-content: space-between; + + > svg { + width: 40%; + } + + > section { + max-width: 30rem; + min-width: 20rem; + padding-right: 1rem; + width: 60%; + + h1 { + color: var(--cur-color-topic); + margin-bottom: 1rem; + } + + h2 { + margin-bottom: 2rem; + margin-top: 1rem; + } + + p:last-child { + color: var(--text-secondary); + } + } + } + + .landing-about-container { + background-color: var(--cur-bg-color); + margin: 0; + max-width: 100%; + + .landing-about { + display: grid; + grid-template-areas: + "li li " + "h2 p " + "h2 p " + "h2 p "; + grid-template-columns: 1fr 1fr; + margin: 0 auto 3rem; + max-width: min(var(--max-width), 74rem); + + h2 { + grid-area: h2; + } + + > div { + display: contents; + + ul { + align-items: center; + background-color: var(--background-primary); + box-shadow: var(--module-shadow); + display: flex; + grid-area: li; + height: 5rem; + justify-content: space-around; + margin: auto; + transform: translateY(-1rem); + width: 100%; + + > li { + align-items: center; + display: inline-flex; + gap: 2rem; + + &::before { + height: 4rem; + width: 4rem; + } + + &:nth-child(1)::before { + content: url("../assets/icons/cur-landing-about-beginner.svg"); + } + + &:nth-child(2)::before { + content: url("../assets/icons/cur-landing-about-pace.svg"); + } + + &:nth-child(3)::before { + content: url("../assets/icons/cur-landing-about-free.svg"); + } + } + } + + p { + display: inline-grid; + grid-template-columns: auto auto; + + &::before { + display: block; + height: 4rem; + width: 4rem; + } + + &:nth-child(2)::before { + content: url("../assets/icons/cur-landing-about-bullet.svg"); + } + + &:nth-child(3)::before { + content: url("../assets/icons/cur-landing-about-bullet.svg"); + } + + a { + color: var(--text-primary); + font-weight: var(--font-body-strong-weight); + text-decoration: underline; + + &:hover, + &:active { + text-decoration: none; + } + } + } + } + } } } diff --git a/client/src/curriculum/landing.tsx b/client/src/curriculum/landing.tsx index e1e3580c1b4a..2ba3ac2becc8 100644 --- a/client/src/curriculum/landing.tsx +++ b/client/src/curriculum/landing.tsx @@ -3,9 +3,8 @@ import useSWR from "swr"; import { ReactComponent as LandingSVG } from "../../public/assets/curriculum/cur-landing-top.svg"; import { HydrationData } from "../../../libs/types/hydration"; import { CurriculumDoc, ModuleData } from "../../../libs/types/curriculum"; -import { HTTPError, RenderDocumentBody } from "../document"; -import { PLACEMENT_ENABLED, WRITER_MODE } from "../env"; -import { SidePlacement } from "../ui/organisms/placement"; +import { HTTPError } from "../document"; +import { WRITER_MODE } from "../env"; import { ModulesListList } from "./modules-list"; import "./index.scss"; @@ -15,6 +14,9 @@ import "./landing.scss"; import { TopNavigation } from "../ui/organisms/top-navigation"; import { ArticleActionsContainer } from "../ui/organisms/article-actions-container"; import { useDocTitle } from "./utils"; +import { RenderCurriculumBody } from "./body"; +import { useMemo } from "react"; +import { DisplayH2 } from "../document/ingredients/utils"; export function CurriculumLanding(props: HydrationData) { const dataURL = `./index.json`; @@ -51,23 +53,35 @@ export function CurriculumLanding(props: HydrationData) {
-
-
-
- {PLACEMENT_ENABLED && } -
-
+
-
- -

{doc?.title}

- {doc?.topic &&

{doc.topic}

} -
- -
-

Modules

- {doc.modules && } -
+ { + if (i === 0) { + return
; + } + if (section.value.id === "about_curriculum") { + return About({ section }); + } + if (section.value.id === "modules") { + const { title, titleAsText, id } = section.value as any; + return ( +
+ + {doc.modules && ( + + )} +
+ ); + } + return null; + }} + />
@@ -75,3 +89,33 @@ export function CurriculumLanding(props: HydrationData) { ); } + +function Header({ section, h1 }: { section: any; h1?: string }) { + const html = useMemo( + () => ({ __html: section.value?.content }), + [section.value?.content] + ); + return ( +
+ +
+

{h1}

+

{section.value.title}

+
+
+
+ ); +} + +function About({ section }) { + const { title, content, titleAsText, id } = section.value; + const html = useMemo(() => ({ __html: content }), [content]); + return ( +
+
+ +
+
+
+ ); +} diff --git a/client/src/curriculum/module.scss b/client/src/curriculum/module.scss index 3cfbba873bf9..83c9f37e9e23 100644 --- a/client/src/curriculum/module.scss +++ b/client/src/curriculum/module.scss @@ -59,7 +59,7 @@ } } - .curriculum-content { + .curriculum-content.curriculum-module { grid-area: main; > header { @@ -159,113 +159,115 @@ } } - @media screen and (min-width: $screen-md) { - display: grid; - gap: 3rem; - grid-template-areas: "sidebar main"; - grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); - padding-left: 1.5rem; - padding-right: 3rem; - } + &.curriculum-module { + @media screen and (min-width: $screen-md) { + display: grid; + gap: 3rem; + grid-template-areas: "sidebar main"; + grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); + padding-left: 1.5rem; + padding-right: 3rem; + } - @media screen and (min-width: $screen-xl) { - display: grid; - gap: 3rem; - grid-template-areas: "sidebar main toc"; - grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr) minmax(0, 15rem); - padding-left: 1rem; - padding-right: 1rem; + @media screen and (min-width: $screen-xl) { + display: grid; + gap: 3rem; + grid-template-areas: "sidebar main toc"; + grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr) minmax(0, 15rem); + padding-left: 1rem; + padding-right: 1rem; - .toc { - --offset: var(--sticky-header-with-actions-height); + .toc { + --offset: var(--sticky-header-with-actions-height); - display: block; - grid-area: toc; - height: fit-content; - padding-bottom: 0; - } + display: block; + grid-area: toc; + height: fit-content; + padding-bottom: 0; + } - .in-nav-toc { - display: none; + .in-nav-toc { + display: none; + } } - } - .sidebar-container { - --offset: var(--sticky-header-with-actions-height); - --max-height: calc(100vh - var(--offset)); + .sidebar-container { + --offset: var(--sticky-header-with-actions-height); + --max-height: calc(100vh - var(--offset)); - @media screen and (min-width: $screen-md) and (min-height: $screen-height-place-limit) { - display: flex; - flex-direction: column; - } + @media screen and (min-width: $screen-md) and (min-height: $screen-height-place-limit) { + display: flex; + flex-direction: column; + } - max-height: var(--max-height); - position: sticky; - top: var(--offset); - z-index: var(--z-index-sidebar-mobile); + max-height: var(--max-height); + position: sticky; + top: var(--offset); + z-index: var(--z-index-sidebar-mobile); - @media screen and (min-width: $screen-md) { - z-index: auto; - - .curriculum-sidebar { - mask-image: linear-gradient( - to bottom, - rgb(0, 0, 0) 0% calc(100% - 3rem), - rgba(0, 0, 0, 0) 100% - ); - } + @media screen and (min-width: $screen-md) { + z-index: auto; - @media screen and not (min-height: $screen-height-place-limit) { - overflow: auto; - } - } + .curriculum-sidebar { + mask-image: linear-gradient( + to bottom, + rgb(0, 0, 0) 0% calc(100% - 3rem), + rgba(0, 0, 0, 0) 100% + ); + } - &.toc-container, - .toc-container { - grid-area: toc; + @media screen and not (min-height: $screen-height-place-limit) { + overflow: auto; + } + } - .place { + &.toc-container, + .toc-container { grid-area: toc; - margin: 0; - } - @media screen and (min-width: $screen-xl) { - display: flex; - flex-direction: column; - gap: 0; - height: calc(100vh - var(--offset)); - mask-image: linear-gradient( - to bottom, - rgba(0, 0, 0, 0) 0%, - rgb(0, 0, 0) 3rem calc(100% - 3rem), - rgba(0, 0, 0, 0) 100% - ); - overflow: auto; - position: sticky; - top: var(--offset); .place { - margin: 1rem 0; - padding-bottom: 3rem; + grid-area: toc; + margin: 0; + } + @media screen and (min-width: $screen-xl) { + display: flex; + flex-direction: column; + gap: 0; + height: calc(100vh - var(--offset)); + mask-image: linear-gradient( + to bottom, + rgba(0, 0, 0, 0) 0%, + rgb(0, 0, 0) 3rem calc(100% - 3rem), + rgba(0, 0, 0, 0) 100% + ); + overflow: auto; + position: sticky; + top: var(--offset); + + .place { + margin: 1rem 0; + padding-bottom: 3rem; + } } } - } - @media screen and (max-width: #{$screen-md - 1}) { - .toc-container { - display: none; + @media screen and (max-width: #{$screen-md - 1}) { + .toc-container { + display: none; + } } - } - @media screen and (min-width: #{$screen-md}) { - #sidebar-quicklinks { - display: none; + @media screen and (min-width: #{$screen-md}) { + #sidebar-quicklinks { + display: none; + } } - } - @media screen and (min-width: $screen-xl) { - display: contents; + @media screen and (min-width: $screen-xl) { + display: contents; - .sidebar { - mask-image: none; + .sidebar { + mask-image: none; + } } } } diff --git a/client/src/curriculum/module.tsx b/client/src/curriculum/module.tsx index 5bea411d6486..ae08c0b182e8 100644 --- a/client/src/curriculum/module.tsx +++ b/client/src/curriculum/module.tsx @@ -1,7 +1,7 @@ import useSWR from "swr"; import { HydrationData } from "../../../libs/types/hydration"; import { CurriculumDoc, ModuleData } from "../../../libs/types/curriculum"; -import { HTTPError, RenderDocumentBody } from "../document"; +import { HTTPError } from "../document"; import { PLACEMENT_ENABLED, WRITER_MODE } from "../env"; import { TOC } from "../document/organisms/toc"; import { SidePlacement } from "../ui/organisms/placement"; @@ -13,6 +13,7 @@ import { TopicIcon } from "./topic-icon"; import { topic2css, useDocTitle } from "./utils"; import { SidebarContainer } from "../document/organisms/sidebar"; import { PrevNext } from "./prev-next"; +import { RenderCurriculumBody } from "./body"; export function CurriculumModule(props: HydrationData) { const dataURL = `./index.json`; @@ -51,7 +52,7 @@ export function CurriculumModule(props: HydrationData) {
@@ -75,13 +76,16 @@ export function CurriculumModule(props: HydrationData) { /> )}
-
+
{doc.topic && }

{doc?.title}

{doc?.topic &&

{doc.topic}

}
- +
diff --git a/client/src/curriculum/overview.tsx b/client/src/curriculum/overview.tsx index 64eb7b75ecd4..fc9bf39fc430 100644 --- a/client/src/curriculum/overview.tsx +++ b/client/src/curriculum/overview.tsx @@ -1,7 +1,7 @@ import useSWR from "swr"; import { HydrationData } from "../../../libs/types/hydration"; import { CurriculumDoc, ModuleData } from "../../../libs/types/curriculum"; -import { HTTPError, RenderDocumentBody } from "../document"; +import { HTTPError } from "../document"; import { PLACEMENT_ENABLED, WRITER_MODE } from "../env"; import { SidePlacement } from "../ui/organisms/placement"; import { ModulesList } from "./modules-list"; @@ -12,6 +12,7 @@ import { topic2css, useDocTitle } from "./utils"; import "./no-side.scss"; import "./overview.scss"; import { PrevNext } from "./prev-next"; +import { RenderCurriculumBody } from "./body"; export function CurriculumModuleOverview( props: HydrationData @@ -68,7 +69,7 @@ export function CurriculumModuleOverview( {coloredTitle} {restTitle.join(" ")} - +

Module Contents:

{doc.modules && }