Merge branch 'main' into usergroup-march-updating-image

.github/workflows/template-build.yml

@@ -79,7 +79,7 @@ jobs:
         run: |
           # AppInsight - Connection String
           az config set extension.use_dynamic_install=yes_without_prompt
-          $AppInsightName = if ("${{ inputs.tag }}" -ieq "production") { "${{ env.APP_INSIGHT_PROD }}" } else { "${{ env.APP_INSIGHT_DEV }}" }
+          $AppInsightName = if ("${{ inputs.tag }}" -clike "pr-*") { "${{ env.APP_INSIGHT_DEV }}" } else { "${{ env.APP_INSIGHT_PROD }}" }
 
           $AppInsightConnectionString = (az monitor app-insights component show --resource-group ${{ env.AZURE_RESOURCE_GROUP }} --app $AppInsightName --query connectionString -o tsv)
           echo "AppInsightConnectionString=$AppInsightConnectionString" >> $env:GITHUB_OUTPUT

components/blocks-renderer.tsx

@@ -3,40 +3,68 @@ import dynamic from "next/dynamic";
 import { AboutUs } from "./blocks/aboutUs";
 import { Agenda } from "./blocks/agenda";
 import { BuiltOnAzure } from "./blocks/builtOnAzure";
+import { Carousel } from "./blocks/carousel";
 import { ClientLogos } from "./blocks/clientLogos";
-import { ColorBlock } from "./blocks/colorBlock";
 import { Content } from "./blocks/content";
 import { ContentCard } from "./blocks/contentCard";
 import { CustomImage } from "./blocks/customImage";
-import { DownloadBlock } from "./blocks/downloadBlock";
-import { GridLayout } from "./blocks/gridLayout";
+import { FixedColumns } from "./blocks/fixedColumns";
 import { JotFormEmbed } from "./blocks/jotFormEmbed";
-import { PaymentBlock } from "./blocks/payment-block";
 import { ServiceCards } from "./blocks/serviceCards";
 import { TableLayout } from "./blocks/tableLayout";
 import { UpcomingEvents } from "./blocks/upcomingEvents";
 import { VerticalImageLayout } from "./blocks/verticalImageLayout";
 import { VerticalListItem } from "./blocks/verticalListItem";
 import { VideoEmbed } from "./blocks/videoEmbed";
-import { ClientList } from "./company/clientList";
-import { EventBooking } from "./training/eventBooking";
-import { LocationBlock } from "./training/locationBlock";
-import { PresenterBlock } from "./training/presenterBlock";
-import { TrainingInformation } from "./training/trainingInformation";
-import { TrainingLearningOutcome } from "./training/trainingLearningOutcome";
-import { LatestTech } from "./usergroup/latestTech";
-
-const Carousel = dynamic(
-  () => import("./blocks/carousel").then((mod) => mod.Carousel),
-  {
-    ssr: false,
-  }
+
+const BookingButton = dynamic(() =>
+  import("./bookingButton/bookingButton").then((mod) => mod.BookingButton)
+);
+
+const ClientList = dynamic(() =>
+  import("./company/clientList").then((mod) => mod.ClientList)
+);
+
+const ColorBlock = dynamic(() =>
+  import("./blocks/colorBlock").then((mod) => mod.ColorBlock)
+);
+
+const DownloadBlock = dynamic(() =>
+  import("./blocks/downloadBlock").then((mod) => mod.DownloadBlock)
+);
+
+const GridLayout = dynamic(() =>
+  import("./blocks/gridLayout").then((mod) => mod.GridLayout)
 );
 
-const BookingButton = dynamic(
-  () =>
-    import("./bookingButton/bookingButton").then((mod) => mod.BookingButton),
-  { ssr: false }
+const LatestTech = dynamic(() =>
+  import("./usergroup/latestTech").then((mod) => mod.LatestTech)
+);
+
+const PaymentBlock = dynamic(() =>
+  import("./blocks/payment-block").then((mod) => mod.PaymentBlock)
+);
+
+const EventBooking = dynamic(() =>
+  import("./training/eventBooking").then((mod) => mod.EventBooking)
+);
+
+const LocationBlock = dynamic(() =>
+  import("./training/locationBlock").then((mod) => mod.LocationBlock)
+);
+
+const PresenterBlock = dynamic(() =>
+  import("./training/presenterBlock").then((mod) => mod.PresenterBlock)
+);
+const TrainingInformation = dynamic(() =>
+  import("./training/trainingInformation").then(
+    (mod) => mod.TrainingInformation
+  )
+);
+const TrainingLearningOutcome = dynamic(() =>
+  import("./training/trainingLearningOutcome").then(
+    (mod) => mod.TrainingLearningOutcome
+  )
 );
 
 const componentMap = {
@@ -67,6 +95,7 @@ const componentMap = {
   ColorBlock,
   DownloadBlock,
   GridLayout,
+  FixedColumns,
 };
 
 export const Blocks = ({ prefix, blocks }) => {

components/blocks/aboutUs.tsx

@@ -1,6 +1,6 @@
 import classNames from "classnames";
 import dayjs from "dayjs";
-import { useState } from "react";
+import { memo, useState } from "react";
 import type { Template } from "tinacms";
 
 import { BiChevronRightCircle } from "react-icons/bi";
@@ -141,14 +141,14 @@ export const AboutUs = ({ data }) => {
   );
 };
 
-const TV = ({ className }) => {
+const TV = memo(function TV({ className }: { className?: string }) {
   return (
     <div className={className}>
       <h2 className="mt-0">tv.ssw.com</h2>
       <VideoModal url={layoutData.aboutUs.video.url} />
     </div>
   );
-};
+});
 
 const ContactUs = ({
   className,

components/blocks/carousel.tsx

@@ -5,11 +5,16 @@ import { tinaField } from "tinacms/dist/react";
 
 import type { Template } from "tinacms";
 
-import { Carousel as CarouselImplementation } from "react-responsive-carousel";
-
+import dynamic from "next/dynamic";
 import { Container } from "../util/container";
 import { Section } from "../util/section";
 
+import "react-responsive-carousel/lib/styles/carousel.min.css";
+
+const CarouselImplementation = dynamic(() =>
+  import("react-responsive-carousel").then((module) => module.Carousel)
+);
+
 export const Carousel = ({ data }) => {
   const router = useRouter();
 
@@ -36,9 +41,10 @@ export const Carousel = ({ data }) => {
     >
       <Container
         size="custom"
-        className="w-full"
+        className={/* eslint-disable-line */ "aspect-carousel w-full"}
         data-tina-field={tinaField(data, carouselBlock.delay)}
       >
+        {/* @ts-expect-error next/dynamic */}
         <CarouselImplementation
           autoPlay={true}
           infiniteLoop={true}
@@ -55,20 +61,33 @@ export const Carousel = ({ data }) => {
           renderIndicator={createCarouselIndicator}
         >
           {data.items &&
-            data.items.map((props, index: React.Key) =>
-              createCarouselItemImage(props, index, data)
-            )}
+            data.items.map((item, index) => (
+              <CarouselItemImage
+                key={index + item.label}
+                imgSrc={item.imgSrc}
+                label={item.label}
+                index={index}
+                carouselSchema={item.carouselSchema}
+              />
+            ))}
         </CarouselImplementation>
       </Container>
     </Section>
   );
 };
 
-const createCarouselItemImage = (props, index: React.Key, carouselSchema) => {
-  const { imgSrc, label } = props;
+type CarouselItemImageProps = {
+  imgSrc: string;
+  label: string;
+  index: number;
+  carouselSchema: Record<string, unknown>;
+};
+
+const CarouselItemImage = (props: CarouselItemImageProps) => {
+  const { imgSrc, label, index, carouselSchema } = props;
+
   return (
     <div
-      key={index}
       data-tina-field={tinaField(
         carouselSchema,
         carouselBlock.items.value + `[${index}]`
@@ -79,7 +98,7 @@ const createCarouselItemImage = (props, index: React.Key, carouselSchema) => {
         alt={label}
         height={388}
         width={1080}
-        sizes="100vw"
+        priority={index === 0}
       />
       {/* `legend` required so that the carousel works properly */}
       <p className="legend sr-only">{label}</p>

components/blocks/clientLogos.tsx

@@ -13,8 +13,9 @@ export const ClientLogos = () => {
             key={client.clientName}
             src={client.imageUrl}
             alt={client.clientName + " logo"}
-            height={50}
+            height={113}
             width={200}
+            sizes="20vw"
             className="my-4 max-w-full rounded-lg"
           />
         ))}