feat(curriculum): add scrim-inline custom element (#11823)

use on curriculum homepage within react
also update the design a little bit
add id to glean ping

client/config/webpack.config.js

@@ -239,6 +239,14 @@ function config(webpackEnv) {
           // match the requirements. When no loader matches it will fall
           // back to the "file" loader at the end of the loader list.
           oneOf: [
+            {
+              resourceQuery: /raw/,
+              type: "asset/source",
+            },
+            {
+              resourceQuery: /url/,
+              type: "asset/resource",
+            },
             {
               test: [/\.avif$/, /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
               type: "asset/resource",

client/src/curriculum/index.scss

@@ -287,6 +287,12 @@
         list-style-type: disc;
         margin: 0.5rem 0;
       }
+
+      scrim-inline {
+        display: block;
+        height: 14.25rem;
+        width: 22rem;
+      }
     }
   }
 }

client/src/curriculum/landing.scss

@@ -265,15 +265,40 @@
         grid-area: arrow;
       }
 
-      .scrim {
+      .scrim-wrapper {
+        display: flex;
+        flex-direction: column;
         grid-area: scrim;
+        justify-content: center;
         justify-self: center;
         margin-top: 1rem;
+        max-width: 24rem;
 
         @media (min-width: $screen-lg) {
           justify-self: end;
           margin-top: 0;
         }
+
+        .scrim-border {
+          background-image: var(--curriculum-scrim-bg);
+          background-position: bottom right;
+          background-repeat: no-repeat;
+          height: 16rem;
+          width: 100%;
+        }
+
+        scrim-inline {
+          background: #000;
+          display: block;
+          height: 14.25rem;
+          max-width: calc(100vw - var(--gutter) * 2);
+          width: 22rem;
+        }
+
+        p {
+          margin: 0;
+          padding: 1rem 0;
+        }
       }
     }
   }

client/src/curriculum/landing.tsx

@@ -7,15 +7,17 @@ import { CurriculumDoc, CurriculumData } from "../../../libs/types/curriculum";
 import { ModulesListList } from "./modules-list";
 import { useCurriculumDoc } from "./utils";
 import { RenderCurriculumBody } from "./body";
-import { useMemo } from "react";
+import { lazy, Suspense, useMemo } from "react";
 import { DisplayH2 } from "../document/ingredients/utils";
 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";
+import { useIsServer } from "../hooks";
+
+const ScrimInline = lazy(() => import("./scrim-inline"));
 
 export function CurriculumLanding(appProps: HydrationData<any, CurriculumDoc>) {
   const doc = useCurriculumDoc(appProps as CurriculumData);
@@ -129,13 +131,18 @@ const SCRIM_URL = "https://v2.scrimba.com/s06icdv?via=mdn";
 function About({ section }) {
   const { title, content, id } = section.value;
   const html = useMemo(() => ({ __html: content }), [content]);
+  const isServer = useIsServer();
+
   return (
     <section key={id} className="landing-about-container">
       <div className="landing-about">
         <DisplayH2 id={id} title={title} />
         <div className="about-content" dangerouslySetInnerHTML={html}></div>
         <div className="arrow"></div>
-        <ScrimIframe url={SCRIM_URL}>
+        <section className="scrim-wrapper">
+          <div className="scrim-border">
+            <Suspense>{!isServer && <ScrimInline url={SCRIM_URL} />}</Suspense>
+          </div>
           <p>
             Learn our curriculum with high quality, interactive courses from our
             partner{" "}
@@ -149,7 +156,7 @@ function About({ section }) {
             </a>
             {" !"}
           </p>
-        </ScrimIframe>
+        </section>
       </div>
     </section>
   );

client/src/curriculum/module.tsx

@@ -5,12 +5,18 @@ import { PrevNext } from "./prev-next";
 import { RenderCurriculumBody } from "./body";
 import { CurriculumLayout } from "./layout";
 import { topic2css, useCurriculumDoc } from "./utils";
+import { useEffect } from "react";
 
 import "./index.scss";
 import "./module.scss";
 
 export function CurriculumModule(props: HydrationData<any, CurriculumDoc>) {
   const doc = useCurriculumDoc(props as CurriculumData);
+
+  useEffect(() => {
+    import("./scrim-inline");
+  }, []);
+
   return (
     <CurriculumLayout
       doc={doc}