Skip to content

Commit

Permalink
run npx @next/codemod next-image-experimental .
Browse files Browse the repository at this point in the history
  • Loading branch information
@JNygaard-Skylight @joshnygaard
JNygaard-Skylight authored and joshnygaard committed Dec 26, 2023
1 parent 98b797f commit 4bc87d2
Show file tree
Hide file tree
Showing 9 changed files with 193 additions and 129 deletions.
4 changes: 4 additions & 0 deletions akamai-loader.js
View file
Original file line number Diff line number Diff line change
@@ -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
}
7 changes: 5 additions & 2 deletions components/FooterUSWDS/FooterUSWDS.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Address, FooterNav, Logo, Footer } from "@trussworks/react-uswds";
import Image from "next/legacy/image";
import Image from "next/image";
import Link from "next/link";
import cdcLogo from '../../public/icons/cdc.svg'
import styles from '../../styles/Home.module.scss';
Expand Down Expand Up @@ -78,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>
Expand Down
44 changes: 37 additions & 7 deletions components/products/building-blocks-links.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import styles from "../../styles/Home.module.scss";
import {Link} from "@trussworks/react-uswds";
import Image from "next/legacy/image";
import Image from "next/image";
import cloudIcon from "../../public/icons/cloud.svg";
import fhirConverter from "../../public/icons/fhirConverter.svg";
import locationIcon from "../../public/icons/location.svg";
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -131,5 +161,5 @@ export const BuildingBlocksInfo = () => {
</div>
</div>
</div>
)
);
}
70 changes: 59 additions & 11 deletions components/products/software-development-kit-info.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import styles from "../../styles/Home.module.scss";
import {Link} from "@trussworks/react-uswds";
import Image from "next/legacy/image";
import Image from "next/image";
import cloudIcon from "../../public/icons/cloud.svg";
import fhirConverter from "../../public/icons/fhirConverter.svg";
import locationIcon from "../../public/icons/location.svg";
Expand All @@ -12,7 +12,7 @@ import transport from "../../public/icons/transport.svg";


export const SoftwareDevelopmentKitInfo = () => {
return(
return (
<div
className={`grid-container desktop:radius-md bg-white padding-y-5 desktop:padding-top-5 desktop:padding-bottom-3 padding-x-205 desktop:padding-x-5 ${styles.dynamicShadow}`}
>
Expand Down Expand Up @@ -44,7 +44,13 @@ export const SoftwareDevelopmentKitInfo = () => {
<div className="desktop:grid-col-3">
<div className="grid-row">
<div className="display-none desktop:display-inline-block margin-right-2 flex-align-self-center">
<Image alt="" src={cloudIcon}/>
<Image
alt=""
src={cloudIcon}
style={{
maxWidth: "100%",
height: "auto"
}} />
</div>
<Link
className="font-semibold flex-align-self-center"
Expand All @@ -58,7 +64,13 @@ export const SoftwareDevelopmentKitInfo = () => {
<div className="desktop:grid-col-3">
<div className="grid-row">
<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"
Expand All @@ -72,7 +84,13 @@ export const SoftwareDevelopmentKitInfo = () => {
<div className="desktop:grid-col-3">
<div className="grid-row">
<div className="display-none desktop:display-inline-block margin-right-2 flex-align-self-center">
<Image alt="" src={locationIcon}/>
<Image
alt=""
src={locationIcon}
style={{
maxWidth: "100%",
height: "auto"
}} />
</div>
<Link
className="font-semibold flex-align-self-center"
Expand All @@ -85,7 +103,13 @@ export const SoftwareDevelopmentKitInfo = () => {
<div className="desktop:grid-col-3">
<div className="grid-row">
<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"
Expand All @@ -100,7 +124,13 @@ export const SoftwareDevelopmentKitInfo = () => {
<div className="desktop:grid-col-3">
<div className="grid-row">
<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"
Expand All @@ -113,7 +143,13 @@ export const SoftwareDevelopmentKitInfo = () => {
<div className="desktop:grid-col-3">
<div className="grid-row">
<div className="display-none desktop:display-inline-block margin-right-2 flex-align-self-center">
<Image alt="" src={tabulation}/>
<Image
alt=""
src={tabulation}
style={{
maxWidth: "100%",
height: "auto"
}} />
</div>
<Link
className="font-semibold flex-align-self-center"
Expand All @@ -126,7 +162,13 @@ export const SoftwareDevelopmentKitInfo = () => {
<div className="desktop:grid-col-3">
<div className="grid-row">
<div className="display-none desktop:display-inline-block margin-right-2 flex-align-self-center">
<Image alt="" src={transport}/>
<Image
alt=""
src={transport}
style={{
maxWidth: "100%",
height: "auto"
}} />
</div>
<Link
className="font-semibold flex-align-self-center"
Expand All @@ -139,7 +181,13 @@ export const SoftwareDevelopmentKitInfo = () => {
<div className="desktop:grid-col-3">
<div className="grid-row">
<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"
Expand All @@ -153,5 +201,5 @@ export const SoftwareDevelopmentKitInfo = () => {
</div>
</div>
</div>
)
);
}
4 changes: 2 additions & 2 deletions next.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ const nextConfig = {
reactStrictMode: true,
swcMinify: true,
images: {
loader: 'akamai',
path: '/'
loader: "custom",
loaderFile: "./akamai-loader.js"
},
basePath: "/dibbs-site",
assetPrefix: '/dibbs-site',
Expand Down
7 changes: 0 additions & 7 deletions pages/about.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,5 @@
import {Button} from '@trussworks/react-uswds';
import Image from "next/legacy/image";
import styles from '../styles/Home.module.scss';
import buildingBlockImage from '../public/building-block-1.svg';
import mobileBuildingBlockImage from '../public/mobile/mobile-building-block.svg';
import locationIcon from '../public/icons/location.svg';
import linkIcon from '../public/icons/link.svg';
import codeIcon from '../public/icons/code.svg';
import organizationIcon from '../public/icons/organization.svg';
import {Link} from '@trussworks/react-uswds';
import Head from 'next/head';

Expand Down
Loading

0 comments on commit 4bc87d2

Please sign in to comment.