CMS-45730 Update Alloy template: Refactor next.config, enhance page layout with Header and Footer, improve News component image handling, and enforce Button link requirement

Author: TRomesh

templates/alloy-template/next.config.ts

@@ -1,8 +1,11 @@
 import type { NextConfig } from 'next';
 
+const CMS_DOMAIN =
+  process.env.OPTIMIZELY_CMS_URL?.replace('https://', '') || '';
+
 const nextConfig: NextConfig = {
   images: {
-    domains: ['app-opinjssdk1sob7t001.cms.optimizely.com'],
+    domains: [CMS_DOMAIN],
     remotePatterns: [
       {
         protocol: 'https',

templates/alloy-template/src/app/preview/page.tsx

@@ -2,6 +2,8 @@ import { GraphClient, type PreviewParams } from '@optimizely/cms-sdk';
 import { OptimizelyComponent } from '@optimizely/cms-sdk/react/server';
 import { PreviewComponent } from '@optimizely/cms-sdk/react/client';
 import Script from 'next/script';
+import Header from '@/components/base/Header';
+import Footer from '@/components/base/Footer';
 
 type Props = {
   searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
@@ -29,7 +31,11 @@ export default async function Page({ searchParams }: Props) {
         src={`${process.env.OPTIMIZELY_CMS_URL}/util/javascript/communicationinjector.js`}
       ></Script>
       <PreviewComponent />
-      <OptimizelyComponent opti={response} />
+      <Header client={client} currentPath={'/'} />
+      <div className="container mx-auto p-10">
+        <OptimizelyComponent opti={response} />
+      </div>
+      <Footer client={client} />
     </>
   );
 }

templates/alloy-template/src/components/News.tsx

@@ -1,4 +1,4 @@
-import { contentType, Infer } from '@optimizely/cms-sdk';
+import { contentType, Infer, damAssets } from '@optimizely/cms-sdk';
 import { RichText } from '@optimizely/cms-sdk/react/richText';
 import {
   ComponentContainerProps,
@@ -48,7 +48,8 @@ function ComponentWrapper({ children, node }: ComponentContainerProps) {
 }
 
 function News({ opti }: NewsPageProps) {
-  const { pa } = getPreviewUtils(opti);
+  const { pa, src } = getPreviewUtils(opti);
+  const { getAlt, getSrcset } = damAssets(opti);
   return (
     <main className="min-h-screen bg-white">
       <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
@@ -75,6 +76,13 @@ function News({ opti }: NewsPageProps) {
             <div className="space-y-6">
               <RichText {...pa('main_body')} content={opti.main_body?.json} />
             </div>
+
+            <img
+              {...pa('image')}
+              src={src(opti.image)}
+              alt={getAlt(opti.image, 'Teaser Image')}
+              className="w-full rounded-lg object-cover"
+            />
           </div>
 
           <OptimizelyExperience

templates/alloy-template/src/components/base/Button.tsx

@@ -11,6 +11,7 @@ export const ButtonContentType = contentType({
       type: 'url',
       displayName: 'Button Link',
       group: 'Information',
+      required: true,
     },
     text: {
       type: 'string',

templates/alloy-template/src/components/base/Footer.tsx

@@ -14,50 +14,30 @@ interface FooterProps {
   client: GraphClient;
 }
 
+const mapToLinks = (items: any[] | null) =>
+  items?.map((item: any) => ({
+    label: item._metadata?.displayName,
+    href: item._metadata?.url?.hierarchical,
+  })) ?? [];
+
 async function Footer({ client }: FooterProps) {
-  const allLinks = await Promise.all([
+  const [products, company, newsEvents] = await Promise.all([
     client.getItems('/en/'),
     client.getItems('/en/about-us'),
     client.getItems('/en/about-us/news-events'),
   ]);
 
-  // Flatten the array of arrays and map to FooterLink format
-  const footerLinks = allLinks.flat().map((ancestor: any) => ({
-    key: ancestor._metadata?.key,
-    label: ancestor._metadata?.displayName,
-    href: ancestor._metadata?.url?.hierarchical,
-  }));
-
-  // Group links by category based on URL patterns
-  const categorizedLinks = footerLinks.reduce<{
-    products: FooterLink[];
-    company: FooterLink[];
-    news: FooterLink[];
-  }>(
-    (acc, link) => {
-      if (link.href?.match(/\/about-us\/news-events\/.+/)) {
-        acc.news.push({ label: link.label, href: link.href });
-      } else if (link.href?.includes('/about-us')) {
-        acc.company.push({ label: link.label, href: link.href });
-      } else if (link.href) {
-        acc.products.push({ label: link.label, href: link.href });
-      }
-      return acc;
-    },
-    { products: [], company: [], news: [] }
-  );
-
-  const formattedFooterLink: FooterSection[] = [
-    { title: 'PRODUCTS', links: categorizedLinks.products },
-    { title: 'THE COMPANY', links: categorizedLinks.company },
-    { title: 'NEWS & EVENTS', links: categorizedLinks.news },
+  const sections: FooterSection[] = [
+    { title: 'PRODUCTS', links: mapToLinks(products) },
+    { title: 'THE COMPANY', links: mapToLinks(company) },
+    { title: 'NEWS & EVENTS', links: mapToLinks(newsEvents) },
   ];
 
   return (
     <footer className="bg-gray-800 text-white">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
-          {formattedFooterLink.map((section, index) => (
+          {sections.map((section, index) => (
             <div key={index} className="space-y-4">
               <h3 className="text-sm font-bold uppercase tracking-wider text-white">
                 {section.title}