About OpenStax and some prettier

openstax · Oct 23, 2024 · 8fba0ee · 8fba0ee
1 parent 646fbf4
commit 8fba0ee
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 27 deletions.
diff --git a/src/app/pages/subjects/new/about-openstax.js → ...app/pages/subjects/new/about-openstax.tsx b/src/app/pages/subjects/new/about-openstax.js → ...app/pages/subjects/new/about-openstax.tsx
@@ -1,16 +1,32 @@
 import React from 'react';
-import useSubjectsContext from './context';
+import useSubjectsContext, {ImageData} from './context';
 import RawHTML from '~/components/jsx-helpers/raw-html';
 import useOptimizedImage from '~/helpers/use-optimized-image';
 import './about-openstax.scss';
 
+export type AboutOsData = {
+    heading: string;
+    osText: string;
+    linkText: string;
+    linkHref: string;
+    image: ImageData;
+};
+
 export default function AboutOpenStax({
-    forceButtonUrl='',
-    forceButtonText='',
+    forceButtonUrl = '',
+    forceButtonText = '',
     aboutOs
+}: {
+    forceButtonUrl?: string;
+    forceButtonText?: string;
+    aboutOs: AboutOsData;
 }) {
     const {
-        heading, osText: paragraph, linkText: buttonText, linkHref: buttonUrl, image: {file: imgSrc}
+        heading,
+        osText: paragraph,
+        linkText: buttonText,
+        linkHref: buttonUrl,
+        image: {file: imgSrc}
     } = aboutOs;
     const url = forceButtonUrl || buttonUrl;
     const text = forceButtonText || buttonText;
@@ -21,7 +37,9 @@ export default function AboutOpenStax({
             <div className="content">
                 <h2>{heading}</h2>
                 <RawHTML html={paragraph} />
-                <a className="btn primary" href={url}>{text}</a>
+                <a className="btn primary" href={url}>
+                    {text}
+                </a>
                 <img src={optimizedImage} alt="" />
             </div>
         </section>
@@ -31,7 +49,5 @@ export default function AboutOpenStax({
 export function AllSubjectsAboutOpenStax() {
     const {aboutOs} = useSubjectsContext();
 
-    return (
-        <AboutOpenStax aboutOs={aboutOs[0].value} />
-    );
+    return <AboutOpenStax aboutOs={aboutOs[0].value} />;
 }
diff --git a/src/app/pages/subjects/new/context.tsx b/src/app/pages/subjects/new/context.tsx
@@ -5,6 +5,7 @@ import useLanguageContext from '~/contexts/language';
 import type {LocaleEntry} from '~/components/language-selector/language-selector';
 import type {InfoBox} from './info-boxes';
 import type {TutorValue} from './tutor-ad';
+import type {AboutOsData} from './about-openstax';
 import {toNumber} from 'lodash';
 
 type DevStandardKeys = 'devStandard1Heading';
@@ -41,6 +42,7 @@ type SubjectsPageData = {
         }
     ];
     philanthropicSupport: string;
+    aboutOs: [{value: AboutOsData}];
 };
 
 // The Page data before DevStandardPair is translated to aboutBlurbs

diff --git a/src/app/pages/subjects/new/hero.tsx b/src/app/pages/subjects/new/hero.tsx
@@ -17,7 +17,9 @@ export default function Hero() {
                 <img className="bg1" role="presentation" src={linesUrl} />
             </div>
             <ClippedImage
-                className="overlapping" src={headingImage.meta.downloadUrl} alt=""
+                className="overlapping"
+                src={headingImage.meta.downloadUrl}
+                alt=""
             />
             <div className="content">
                 <h1>{heading}</h1>

diff --git a/src/app/pages/subjects/new/specific/context.ts b/src/app/pages/subjects/new/specific/context.ts
@@ -4,6 +4,7 @@ import buildContext from '~/components/jsx-helpers/build-context';
 import {setPageTitleAndDescriptionFromBookData} from '~/helpers/use-document-head';
 import {ImageData} from '../context';
 import type {InfoBox} from '../info-boxes';
+import type { AboutOsData } from '../about-openstax';
 import {LocaleEntry} from '~/components/language-selector/language-selector';
 import type {OsTextbookCategory} from './learn-more';
 
@@ -62,7 +63,7 @@ type SpecificSubjectPageData = {
     title?: string;
     subjects?: SubjectEntry;
     tutorAd: SectionInfo;
-    aboutOs: SectionInfo;
+    aboutOs: {content: AboutOsData};
     webinarHeader: WebinarSectionInfo;
     infoBoxes: InfoBox;
     blogHeader: BlogSectionInfo;

diff --git a/src/app/pages/subjects/new/subjects-listing.tsx b/src/app/pages/subjects/new/subjects-listing.tsx
@@ -8,7 +8,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faArrowRight} from '@fortawesome/free-solid-svg-icons/faArrowRight';
 import {useLocation} from 'react-router-dom';
 import './subjects-listing.scss';
-import { assertDefined } from '~/helpers/data';
+import {assertDefined} from '~/helpers/data';
 
 export default function SubjectsListing() {
     const {subjects} = assertDefined(useSubjectsContext());

diff --git a/src/app/pages/subjects/new/subjects.tsx b/src/app/pages/subjects/new/subjects.tsx
@@ -13,7 +13,8 @@ const importLanguageSelector = () => import('./language-selector-section.js');
 const importSubjectsListing = () => import('./import-subjects-listing.js');
 const importTutorAd = () => import('./import-tutor-ad.js');
 const importInfoBoxes = () => import('./import-info-boxes.js');
-const importPhilanthropicSupport = () => import('./import-philanthropic-support.js');
+const importPhilanthropicSupport = () =>
+    import('./import-philanthropic-support.js');
 
 function SEOSetup() {
     const {title, pageDescription} = assertDefined(useSubjectsContext());
@@ -29,20 +30,20 @@ function SEOSetup() {
 
 export function SubjectsPage() {
     const {translations} = assertDefined(useSubjectsContext());
-    const otherLocales = translations?.length ?
-        translations[0].value.map((t) => t.locale) :
-        [];
+    const otherLocales = translations?.length
+        ? translations[0].value.map((t) => t.locale)
+        : [];
 
     return (
-        <main className='subjects-page'>
+        <main className="subjects-page">
             <SEOSetup />
             <Hero />
             <img
-                className='strips'
-                src='/dist/images/components/strips.svg'
-                height='10'
-                alt=''
-                role='separator'
+                className="strips"
+                src="/dist/images/components/strips.svg"
+                height="10"
+                alt=""
+                role="separator"
             />
             <JITLoad
                 importFn={importLanguageSelector}
@@ -71,16 +72,16 @@ export default function SubjectsRouter() {
     return (
         <SubjectsContextProvider>
             <Routes>
-                <Route path='/' element={<RedirectSlash />} />
+                <Route path="/" element={<RedirectSlash />} />
                 <Route
-                    path='view-all'
-                    element={<Navigate to='/subjects' replace />}
+                    path="view-all"
+                    element={<Navigate to="/subjects" replace />}
                 />
                 <Route
-                    path='ap'
-                    element={<Navigate to='/subjects/high-school' replace />}
+                    path="ap"
+                    element={<Navigate to="/subjects/high-school" replace />}
                 />
-                <Route path=':subject' element={<LoadSubject />} />
+                <Route path=":subject" element={<LoadSubject />} />
             </Routes>
         </SubjectsContextProvider>
     );