Merge branch 'main' into main

CDCgov · Jan 11, 2024 · 9e1c314 · 9e1c314
2 parents 704cd59 + ee3660c
commit 9e1c314
Show file tree

Hide file tree

Showing 14 changed files with 4,255 additions and 5,124 deletions.
diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml
@@ -30,7 +30,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: "16"
+          node-version: "18"
           cache: ${{ steps.detect-package-manager.outputs.manager }}
       - name: Setup Pages
         uses: actions/configure-pages@v2
@@ -54,8 +54,6 @@ jobs:
         run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
       - name: Build with Next.js
         run: ${{ steps.detect-package-manager.outputs.runner }} next build
-      - name: Static HTML export with Next.js
-        run: ${{ steps.detect-package-manager.outputs.runner }} next export
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:

diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
@@ -50,7 +50,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: "16"
+          node-version: "18"
           cache: ${{ steps.detect-package-manager.outputs.manager }}
       - name: Setup Pages
         uses: actions/configure-pages@v2
@@ -74,8 +74,6 @@ jobs:
         run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
       - name: Build with Next.js
         run: ${{ steps.detect-package-manager.outputs.runner }} next build
-      - name: Static HTML export with Next.js
-        run: ${{ steps.detect-package-manager.outputs.runner }} next export
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:

diff --git a/akamai-loader.js b/akamai-loader.js
@@ -0,0 +1,4 @@
+const normalizeSrc = (src) => src[0] === '/' ? src.slice(1) : src
+export default function akamaiLoader({ src, width, quality }) {
+return '/' + normalizeSrc(src) + '?imwidth=' + width
+}
diff --git a/components/FooterUSWDS/FooterUSWDS.js b/components/FooterUSWDS/FooterUSWDS.js
@@ -4,38 +4,47 @@ import Link from "next/link";
 import cdcLogo from '../../public/icons/cdc.svg'
 import styles from '../../styles/Home.module.scss';
 
-
-
-
 export default function FooterUSWDS() {
     const returnToTop = () => {
         console.log('hi')
     }
 
     const createLinks = () => {
-        return ([
-            <Link href='/' key='home'>
-                <a className="font-public-sans-md padding-x-0 desktop:padding-x-05 usa-footer__primary-link text-base-lightest">
+        return [
+            <Link
+                href='/'
+                key='home'
+                className="font-public-sans-md padding-x-0 desktop:padding-x-05 usa-footer__primary-link text-base-lightest">
+
                     Home
-                </a>
+
             </Link>,
-            <Link href='/about' key='building-block'>
-                <a className="font-public-sans-md padding-x-0 desktop:padding-x-05 usa-footer__primary-link text-base-lightest">
+            <Link
+                href='/about'
+                key='building-block'
+                className="font-public-sans-md padding-x-0 desktop:padding-x-05 usa-footer__primary-link text-base-lightest">
+
                     What is a building block?
-                </a>
+
             </Link>,
-            <Link href='/products' key='product-offerings'>
-                <a className="font-public-sans-md padding-x-0 desktop:padding-x-05 usa-footer__primary-link text-base-lightest">
+            <Link
+                href='/products'
+                key='product-offerings'
+                className="font-public-sans-md padding-x-0 desktop:padding-x-05 usa-footer__primary-link text-base-lightest">
+
                     Our product offerings
-                </a>
+
             </Link>,
-            <Link href='/engage-with-us' key='partner'>
-                <a className="font-public-sans-md padding-x-0 desktop:padding-x-05 usa-footer__primary-link text-base-lightest">
+            <Link
+                href='/engage-with-us'
+                key='partner'
+                className="font-public-sans-md padding-x-0 desktop:padding-x-05 usa-footer__primary-link text-base-lightest">
+
                     Partner with us
-                </a>
+
             </Link>,
 
-        ])
+        ];
     }
 
     return (
@@ -69,7 +78,10 @@ export default function FooterUSWDS() {
                                     className="usa-footer__logo-img text-base-lightest desktop:grid-col-auto grid-col-auto"
                                     alt='CDC Logo'
                                     src={cdcLogo}
-                                />
+                                    style={{
+                                        maxWidth: "100%",
+                                        height: "auto"
+                                    }} />
                                 <div className="margin-top-05 text-base-lightest desktop:grid-col-auto grid-col-9 font-public-sans-md font-weight-md line-height-md">
                                     Centers for Disease Control and Prevention
                                 </div>

diff --git a/components/NavbarUSWDS/NavbarUSWDS.js b/components/NavbarUSWDS/NavbarUSWDS.js
@@ -10,57 +10,53 @@ export default function Navbar({ }) {
     const onClick = () => { if (window.innerWidth < 1024) setExpanded((prvExpanded) => !prvExpanded) }
 
     const testItemsMenu = [
-        <Link href='/' key="one" >
-            <a className={`usa-nav__link ${styles.homeNavItem}`} onClick={onClick}>
-                <span className={styles.navbarItemText}>Home</span>
-            </a>
+        <Link
+            href='/'
+            key="one"
+            className={`usa-nav__link ${styles.homeNavItem}`}
+            onClick={onClick}>
+
+            <span className={styles.navbarItemText}>Home</span>
+
         </Link>,
         <NavigationLink key="two" href='/about' text='About' router={router} onClick={onClick} />,
         <NavigationLink key="three" href='/products' text='Products' router={router} onClick={onClick} />,
         <NavigationLink key="four" href='/engage-with-us' text='Engage with us' router={router} onClick={onClick} />,
     ]
 
-    return (
-        <>
-            <a className="usa-skipnav" href="#main-content">Skip to main content</a>
-            <div className={`usa-overlay ${expanded ? 'is-visible' : ''}`}></div>
-            <Header basic={true} className='bg-primary-darker'>
-                <div className="desktop:padding-bottom-2 usa-nav-container max-w-full">
-                    <div className="w-full usa-navbar">
-                        <Title className='text-base-lightest'>
-                            <Link href='/'>
-                                <a className="desktop:padding-1">
-                                    <span className={styles.navbarLogoText} href='/dibbs-site'>
-                                        Data Integration Building Blocks
-                                    </span>
-                                </a>
-                            </Link>
-                        </Title>
-                        <NavMenuButton onClick={onClick} label="Menu" />
-                    </div>
-                    <PrimaryNav
-                        items={testItemsMenu}
-                        mobileExpanded={expanded}
-                        onToggleMobileNav={onClick}
-                    >
-                    </PrimaryNav>
+    return <>
+        <a className="usa-skipnav" href="#main-content">Skip to main content</a>
+        <div className={`usa-overlay ${expanded ? 'is-visible' : ''}`}></div>
+        <Header basic={true} className='bg-primary-darker'>
+            <div className="desktop:padding-bottom-2 usa-nav-container max-w-full">
+                <div className="w-full usa-navbar">
+                    <Title className='text-base-lightest'>
+                        <Link href='/' className="desktop:padding-1">
+
+                            <span className={styles.navbarLogoText} href='/dibbs-site'>
+                                Data Integration Building Blocks
+                            </span>
+
+                        </Link>
+                    </Title>
+                    <NavMenuButton onClick={onClick} label="Menu" />
                 </div>
-            </Header>
-        </>
-    );
+                <PrimaryNav
+                    items={testItemsMenu}
+                    mobileExpanded={expanded}
+                    onToggleMobileNav={onClick}
+                >
+                </PrimaryNav>
+            </div>
+        </Header>
+    </>;
 }
 
 function NavigationLink({ href, text, router, onClick }) {
     const isActive = router.asPath === (href);
     return (
-        <Link href={href} passHref>
-            <a
-                href={href}
-                className={`usa-nav__link`}
-                onClick={onClick}
-            >
-                <span className={(isActive && "navbar-item-active") + ' ' + styles.navbarItemText}>{text}</span>
-            </a>
-        </Link>
+        (<Link href={href} passHref className={`usa-nav__link`} onClick={onClick}>
+            <span className={(isActive && "navbar-item-active") + ' ' + styles.navbarItemText}>{text}</span>
+        </Link>)
     );
 }
diff --git a/components/products/building-blocks-links.js b/components/products/building-blocks-links.js
@@ -26,8 +26,8 @@ export const BuildingBlocksInfo = () => {
             >
                 <div className={`${styles.sdkInfoMaxWidth}`}>
                     Below, you will find a description of how the five core Building
-                    Blocks work to clean and transform data as part of the Starter Kit
-                    data pipeline. To see the full suite of containerized services,
+                    Blocks work to clean and transform data as part of the DIBBs
+                    pipeline. To see the full suite of containerized services,
                     check out our&nbsp;
                     <span>
                     <Link
@@ -43,7 +43,13 @@ export const BuildingBlocksInfo = () => {
                     <div className="grid-row padding-top-3">
                         <div
                             className="display-none desktop:display-inline-block margin-right-2 flex-align-self-center">
-                            <Image alt="" src={validation}/>
+                            <Image
+                                alt=""
+                                src={validation}
+                                style={{
+                                    maxWidth: "100%",
+                                    height: "auto"
+                                }} />
                         </div>
                         <Link
                             className="font-semibold flex-align-self-center padding-bottom-1"
@@ -59,7 +65,13 @@ export const BuildingBlocksInfo = () => {
                     <div className="grid-row padding-top-3">
                         <div
                             className="display-none desktop:display-inline-block margin-right-2 flex-align-self-center">
-                            <Image alt="" src={fhirConverter}/>
+                            <Image
+                                alt=""
+                                src={fhirConverter}
+                                style={{
+                                    maxWidth: "100%",
+                                    height: "auto"
+                                }} />
                         </div>
                         <Link
                             className="font-semibold flex-align-self-center padding-bottom-1"
@@ -76,7 +88,13 @@ export const BuildingBlocksInfo = () => {
                     <div className="grid-row padding-top-3">
                         <div
                             className="display-none desktop:display-inline-block margin-right-2 flex-align-self-center">
-                            <Image alt="" src={organization}/>
+                            <Image
+                                alt=""
+                                src={organization}
+                                style={{
+                                    maxWidth: "100%",
+                                    height: "auto"
+                                }} />
                         </div>
                         <Link
                             className="font-semibold flex-align-self-center padding-bottom-1"
@@ -103,7 +121,13 @@ export const BuildingBlocksInfo = () => {
                     <div className="grid-row padding-top-3">
                         <div
                             className="display-none desktop:display-inline-block margin-right-2 flex-align-self-center">
-                            <Image alt="" src={link}/>
+                            <Image
+                                alt=""
+                                src={link}
+                                style={{
+                                    maxWidth: "100%",
+                                    height: "auto"
+                                }} />
                         </div>
                         <Link
                             className="font-semibold flex-align-self-center padding-bottom-1"
@@ -117,7 +141,13 @@ export const BuildingBlocksInfo = () => {
                     <div className="grid-row padding-top-3 padding-bottom-2">
                         <div
                             className="display-none desktop:display-inline-block margin-right-2 flex-align-self-center ">
-                            <Image alt="" src={messageParser}/>
+                            <Image
+                                alt=""
+                                src={messageParser}
+                                style={{
+                                    maxWidth: "100%",
+                                    height: "auto"
+                                }} />
                         </div>
                         <Link
                             className="font-semibold flex-align-self-center padding-bottom-1"
@@ -131,5 +161,5 @@ export const BuildingBlocksInfo = () => {
                 </div>
             </div>
         </div>
-    )
+    );
 }