✨ New Feature - Incremental Static Regeneration

.github/workflows/template-build.yml

@@ -89,9 +89,23 @@ jobs:
         id: KeyVaultSecrets
         run: |
           # KV - Secret
-          $GoogleRecaptchaSiteKey = (az keyvault secret show --name Google-Recaptcha-Site-KEY --vault-name ${{ env.KEY_VAULT}} --query value -o tsv)
+          $GoogleRecaptchaSiteKey = (az keyvault secret show --name Google-Recaptcha-Site-KEY --vault-name ${{ env.KEY_VAULT }} --query value -o tsv)
+          $MICROSOFT_OAUTH_TENANT_ID = (az keyvault secret show --name MICROSOFT-OAUTH-TENANT-ID --vault-name ${{ env.KEY_VAULT }} --query value -o tsv)
+          $MICROSOFT_OAUTH_CLIENT_ID = (az keyvault secret show --name MICROSOFT-OAUTH-CLIENT-ID --vault-name ${{ env.KEY_VAULT }} --query value -o tsv)
+          $MICROSOFT_OAUTH_CLIENT_SECRET = (az keyvault secret show --name MICROSOFT-OAUTH-CLIENT-SECRET --vault-name ${{ env.KEY_VAULT }} --query value -o tsv)
+          $SHAREPOINT_SITE_ID = (az keyvault secret show --name SHAREPOINT-SITE-ID --vault-name ${{ env.KEY_VAULT }} --query value -o tsv)
+          $SHAREPOINT_EVENTS_LIST_ID = (az keyvault secret show --name SHAREPOINT-EVENTS-LIST-ID --vault-name ${{ env.KEY_VAULT }} --query value -o tsv)
+          $SHAREPOINT_EXTERNAL_PRESENTERS_LIST_ID = (az keyvault secret show --name SHAREPOINT-EXTERNAL-PRESENTERS-LIST-ID --vault-name ${{ env.KEY_VAULT }} --query value -o tsv)
+
           echo "GoogleRecaptchaSiteKey=$GoogleRecaptchaSiteKey" >> $env:GITHUB_OUTPUT
-          Write-Host '✅ KV - Secret retrieved'
+          echo "MICROSOFT_OAUTH_TENANT_ID=$MICROSOFT_OAUTH_TENANT_ID" >> $env:GITHUB_OUTPUT
+          echo "MICROSOFT_OAUTH_CLIENT_ID=$MICROSOFT_OAUTH_CLIENT_ID" >> $env:GITHUB_OUTPUT
+          echo "MICROSOFT_OAUTH_CLIENT_SECRET=$MICROSOFT_OAUTH_CLIENT_SECRET" >> $env:GITHUB_OUTPUT
+          echo "SHAREPOINT_SITE_ID=$SHAREPOINT_SITE_ID" >> $env:GITHUB_OUTPUT
+          echo "SHAREPOINT_EVENTS_LIST_ID=$SHAREPOINT_EVENTS_LIST_ID" >> $env:GITHUB_OUTPUT
+          echo "SHAREPOINT_EXTERNAL_PRESENTERS_LIST_ID=$SHAREPOINT_EXTERNAL_PRESENTERS_LIST_ID" >> $env:GITHUB_OUTPUT
+
+          Write-Host '✅ KV - Secrets retrieved'
 
       - name: AppInsight - Connection Strings
         shell: pwsh
@@ -124,6 +138,12 @@ jobs:
           GOOGLE_RECAPTCHA_SITE_KEY: ${{ steps.KeyVaultSecrets.outputs.GoogleRecaptchaSiteKey }}
           KEY_VAULT: ${{ env.KEY_VAULT }}
           NEXT_PUBLIC_APP_INSIGHT_CONNECTION_STRING: ${{ steps.AppInsight.outputs.AppInsightConnectionString }}
+          MICROSOFT_OAUTH_TENANT_ID: ${{ steps.KeyVaultSecrets.outputs.MICROSOFT_OAUTH_TENANT_ID }}
+          MICROSOFT_OAUTH_CLIENT_ID: ${{ steps.KeyVaultSecrets.outputs.MICROSOFT_OAUTH_CLIENT_ID }}
+          MICROSOFT_OAUTH_CLIENT_SECRET: ${{ steps.KeyVaultSecrets.outputs.MICROSOFT_OAUTH_CLIENT_SECRET }}
+          SHAREPOINT_SITE_ID: ${{ steps.KeyVaultSecrets.outputs.SHAREPOINT_SITE_ID }}
+          SHAREPOINT_EVENTS_LIST_ID: ${{ steps.KeyVaultSecrets.outputs.SHAREPOINT_EVENTS_LIST_ID }}
+          SHAREPOINT_EXTERNAL_PRESENTERS_LIST_ID: ${{ steps.KeyVaultSecrets.outputs.SHAREPOINT_EXTERNAL_PRESENTERS_LIST_ID }}
           TINA_TOKEN: ${{ secrets.TINA_TOKEN }}
           SITE_URL: https://www.ssw.com.au
 

components/layout/layout.tsx

@@ -7,10 +7,10 @@ import { Footer } from "./footer";
 import { Header } from "./header";
 import { Theme } from "./theme";
 
-import dayjs from "dayjs";
 import dynamic from "next/dynamic";
 import { Open_Sans } from "next/font/google";
 import layoutData from "../../content/global/index.json";
+import { EventInfo } from "../../services/server/events";
 
 export const openSans = Open_Sans({
   variable: "--open-sans-font",
@@ -50,26 +50,15 @@ const LiveStreamBanner = dynamic(
   }
 );
 
-export const Layout = ({ children, className = "" }) => {
-  const liveStreamProps = useLiveStreamProps();
-  const router = useRouter();
-
-  const rightnow = dayjs().utc();
-
-  const isLive =
-    liveStreamProps?.countdownMins &&
-    liveStreamProps?.countdownMins <= 0 &&
-    !!liveStreamProps?.event &&
-    rightnow.isBefore(liveStreamProps?.event?.EndDateTime);
+type LayoutProps = {
+  className?: string;
+  children: React.ReactNode;
+  event?: EventInfo;
+};
 
-  const showBanner =
-    !!liveStreamProps?.event &&
-    dayjs().isBetween(
-      dayjs(liveStreamProps?.event.StartShowBannerDateTime),
-      dayjs(liveStreamProps?.event.EndShowBannerDateTime),
-      null,
-      "[)"
-    );
+export const Layout = ({ children, className = "", event }: LayoutProps) => {
+  const liveStreamProps = useLiveStreamProps(event);
+  const router = useRouter();
 
   return (
     <>
@@ -120,14 +109,14 @@ export const Layout = ({ children, className = "" }) => {
           )}
         >
           <header className="no-print">
-            {(showBanner || router.query.liveBanner) && (
-              <LiveStreamBanner {...liveStreamProps} isLive={isLive} />
+            {(liveStreamProps?.showBanner || router.query.liveBanner) && (
+              <LiveStreamBanner {...liveStreamProps} event={event} />
             )}
             <div className="mx-auto max-w-9xl px-6 sm:px-8">
               <Header />
               <MenuBar />
-              {(isLive || router.query.liveStream) && (
-                <LiveStreamWidget {...liveStreamProps} isLive={isLive} />
+              {(liveStreamProps?.isLive || router.query.liveStream) && (
+                <LiveStreamWidget {...liveStreamProps} event={event} />
               )}
             </div>
           </header>

components/liveStream/liveStreamBanner.tsx

@@ -3,10 +3,12 @@ import dayjs from "dayjs";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import countdownTextFormat from "../../helpers/countdownTextFormat";
+import { EventInfo } from "../../services/server/events";
 import { LiveStreamProps } from "./useLiveStreamProps";
 
 type LiveStreamBannerProps = {
   isLive?: boolean;
+  event?: EventInfo;
 } & LiveStreamProps;
 
 export const LiveStreamBanner = ({

components/liveStream/liveStreamWidget.tsx

@@ -8,14 +8,15 @@ import { TfiAngleDown, TfiAngleUp } from "react-icons/tfi";
 import { Tooltip } from "react-tooltip";
 import layoutData from "../../content/global/index.json";
 import { getYouTubeId } from "../../helpers/embeds";
-import { SpeakerInfo } from "../../services/server/events";
+import { EventInfo, SpeakerInfo } from "../../services/server/events";
 import { YouTubeEmbed } from "../embeds/youtubeEmbed";
 import { SubNewsLettersForm } from "../subNewsletter/subNewsletterForm";
 import { SocialIcons, SocialTypes } from "../util/socialIcons";
 import { LiveStreamProps } from "./useLiveStreamProps";
 
 type LiveStreamWidgetProps = {
   isLive?: boolean;
+  event?: EventInfo;
 } & LiveStreamProps;
 
 export const LiveStreamWidget = ({ isLive, event }: LiveStreamWidgetProps) => {

components/liveStream/useLiveStreamProps.ts

@@ -1,37 +1,20 @@
-import axios from "axios";
 import dayjs from "dayjs";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { EventInfo } from "../../services/server/events";
 
 export type LiveStreamProps = {
   countdownMins?: number;
   liveStreamDelayMinutes: number;
-  event?: EventInfo;
+  isLive?: boolean;
+  showBanner?: boolean;
 };
 
 const INTERVAL_MINUTES = 1;
 
-export function useLiveStreamProps(): LiveStreamProps {
+export function useLiveStreamProps(event: EventInfo): LiveStreamProps {
   const [countdownMins, setCountdownMins] = useState<number>();
-  const [event, setEvent] = useState<EventInfo>();
   const [liveStreamDelayMinutes, setLiveStreamDelayMinutes] = useState(0);
 
-  useEffect(() => {
-    const fetchEvent = async () => {
-      const res = await axios.get<EventInfo[]>("/api/get-livestream-banner");
-
-      if (res?.status !== 200 || !res?.data?.length) {
-        setEvent(undefined);
-
-        return;
-      }
-
-      setEvent(res.data[0]);
-    };
-
-    fetchEvent();
-  }, []);
-
   useEffect(() => {
     if (!event?.StartDateTime || !event?.EndDateTime) {
       return;
@@ -58,9 +41,32 @@ export function useLiveStreamProps(): LiveStreamProps {
     return () => clearInterval(timer);
   }, [event]);
 
+  const isLive = useMemo(() => {
+    const rightnow = dayjs().utc();
+    return (
+      countdownMins &&
+      countdownMins <= 0 &&
+      !!event &&
+      rightnow.isBefore(event?.EndDateTime)
+    );
+  }, [event, countdownMins]);
+
+  const showBanner = useMemo(() => {
+    return (
+      !!event &&
+      dayjs().isBetween(
+        dayjs(event.StartShowBannerDateTime),
+        dayjs(event.EndShowBannerDateTime),
+        null,
+        "[)"
+      )
+    );
+  }, [event]);
+
   return {
     countdownMins,
     liveStreamDelayMinutes,
-    event,
+    showBanner,
+    isLive,
   };
 }

components/util/constants/config.tsx

@@ -0,0 +1 @@
+export const isrRevalidateTime = 120;

next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

pages/[filename].tsx

@@ -7,10 +7,12 @@ import { Blocks } from "../components/blocks-renderer";
 import { Breadcrumbs } from "../components/blocks/breadcrumbs";
 import { componentRenderer } from "../components/blocks/mdxComponentRenderer";
 import { Layout } from "../components/layout";
+import { isrRevalidateTime } from "../components/util/constants/config";
 import { Container } from "../components/util/container";
 import { Section } from "../components/util/section";
 import { SEO } from "../components/util/seo";
 import { removeExtension } from "../services/client/utils.service";
+import { getLiveStreamInfo } from "../services/server/events";
 
 export default function HomePage(
   props: InferGetStaticPropsType<typeof getStaticProps>
@@ -34,7 +36,7 @@ export default function HomePage(
   return (
     <>
       <SEO seo={data.page.seo} />
-      <Layout>
+      <Layout event={props.liveStreamEvent}>
         {data.page.breadcrumbs ? (
           <Section className="mx-auto -mb-20 w-full max-w-9xl px-8 py-5">
             <Breadcrumbs
@@ -74,6 +76,8 @@ export default function HomePage(
 }
 
 export const getStaticProps = async ({ params }) => {
+  const events = await getLiveStreamInfo();
+
   const tinaProps = await client.queries.contentQuery({
     relativePath: `${params.filename}.mdx`,
   });
@@ -82,7 +86,9 @@ export const getStaticProps = async ({ params }) => {
       data: tinaProps.data,
       query: tinaProps.query,
       variables: tinaProps.variables,
+      liveStreamEvent: events[0],
     },
+    revalidate: isrRevalidateTime,
   };
 };
 

pages/consulting/[filename].tsx

@@ -17,12 +17,14 @@ import { Layout } from "../../components/layout";
 import { Marketing } from "../../components/marketing/Marketing";
 import TechnologyCards from "../../components/technologyCard/technologyCards";
 import { TestimonialRow } from "../../components/testimonials/TestimonialRow";
+import { isrRevalidateTime } from "../../components/util/constants/config";
 import { Benefits } from "../../components/util/consulting/benefits";
 import { Container } from "../../components/util/container";
 import { Section } from "../../components/util/section";
 import { SEO } from "../../components/util/seo";
 import { RecaptchaContext } from "../../context/RecaptchaContext";
 import { removeExtension } from "../../services/client/utils.service";
+import { getLiveStreamInfo } from "../../services/server/events";
 
 export default function ConsultingPage(
   props: InferGetStaticPropsType<typeof getStaticProps>
@@ -57,7 +59,7 @@ export default function ConsultingPage(
       value={{ recaptchaKey: props.env.GOOGLE_RECAPTCHA_SITE_KEY }}
     >
       <SEO seo={props.seo} />
-      <Layout>
+      <Layout event={props.liveStreamEvent}>
         <Section className="mx-auto w-full max-w-9xl px-8 py-5">
           <Breadcrumbs
             path={removeExtension(props.variables.relativePath)}
@@ -183,6 +185,8 @@ const parseCallToAction = (
 };
 
 export const getStaticProps = async ({ params }) => {
+  const events = await getLiveStreamInfo();
+
   const tinaProps = await client.queries.consultingContentQuery({
     relativePath: `${params.filename}.mdx`,
   });
@@ -254,7 +258,9 @@ export const getStaticProps = async ({ params }) => {
           process.env.GOOGLE_RECAPTCHA_SITE_KEY || null,
       },
       seo,
+      liveStreamEvent: events[0],
     },
+    revalidate: isrRevalidateTime,
   };
 };