CMS-45730 Add alloy template #139

TRomesh · 2025-10-16T09:59:49Z

This template is 75% complete. The remaining features can be implemented once the tasks in CMS-46339 are resolved.

Copilot

Pull Request Overview

This PR adds a new alloy-template to the templates directory, providing a Next.js-based starter template for Optimizely CMS projects. The template includes pre-configured components, TypeScript configuration, and Tailwind CSS styling.

Adds a complete Next.js 15.5.4 template with React 19.1.0
Includes various reusable CMS components (Teaser, Notice, Contact, etc.)
Configures TypeScript, Tailwind CSS v4, and PostCSS
Updates workspace configuration to include the templates directory

Reviewed Changes

Copilot reviewed 28 out of 36 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
templates/alloy-template/package.json	Defines project dependencies including Next.js, React 19, and Tailwind CSS v4
templates/alloy-template/tsconfig.json	TypeScript configuration with Next.js and bundler module resolution
templates/alloy-template/src/components/*.tsx	Component files for Teaser, Notice, Contact, Editorial, Article, and other CMS content types
templates/alloy-template/src/components/Start.tsx	Start page component with composition support
templates/alloy-template/src/app/*.tsx	Next.js app router pages including layout, dynamic routes, and preview
templates/alloy-template/next.config.ts	Next.js configuration for remote image patterns
pnpm-workspace.yaml	Updated to include templates directory in workspace
pnpm-lock.yaml	Lock file updated with new template dependencies

Files not reviewed (2)

pnpm-lock.yaml: Language not supported
templates/alloy-template/package-lock.json: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

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

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

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

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

JohanPetersson · 2025-11-04T14:10:13Z

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

+      type: 'string',
+      displayName: 'Page Description',
+    },
+    disable_indexing: {


SEO properties should probably be grouped into a block/component. Then use the block as a property on page types. Might make more sense to define them in a contract when we have that support, but until then a block property makes sense.

We have both title and site_title. Same with description.

JohanPetersson · 2025-11-04T14:11:40Z

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

+      displayName: 'Button Link',
+      group: 'Information',
+    },
+    button_text: {


Is this button really needed? If yes, then define it as a block/compontent and use it as a block property rather than two separate properties here.

…out and content handling; enhance Teaser component with link wrapping functionality.

…mple and update page.tsx to use the new variable

…Header and update layout structure

CLAassistant · 2025-11-11T07:52:50Z

All committers have signed the CLA.

Copilot

Pull Request Overview

Copilot reviewed 28 out of 36 changed files in this pull request and generated 5 comments.

Files not reviewed (2)

pnpm-lock.yaml: Language not supported
templates/alloy-template/package-lock.json: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-11-11T07:59:08Z

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

@@ -0,0 +1,52 @@
+import { contentType } from '@optimizely/cms-sdk';
+
+const PageList = contentType({


The PageList component only defines the content type but doesn't export a React component for rendering. Either export the content type definition or add a corresponding React component that renders the page list.

Copilot · 2025-11-11T07:59:09Z

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

+interface HeaderProps {
+  currentPath: any;


The currentPath prop uses any type which defeats TypeScript's type safety. Define a proper interface for the currentPath structure, e.g., currentPath: { children?: any[]; ancestors?: Array<{ _metadata: { displayName: string; url: { hierarchical: string } } }> }.

Copilot · 2025-11-11T07:59:09Z

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

+            <div className="md:w-1/2 h-64 md:h-auto overflow-hidden">
+              <img
+                src={opti.image?.url.default}
+                alt="teaser_image"


The alt text 'teaser_image' is not descriptive. Use the heading or text content as alt text for better accessibility, e.g., alt={opti.heading || 'Teaser image'}.

Copilot · 2025-11-11T07:59:09Z

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

+            {/* Heading and Description */}
+            <div className="space-y-4">
+              <h1
+                {...pa('title')}


The preview attribute is set to 'title' but the actual property being displayed is opti.heading. This should be {...pa('heading')} to match the property name defined in the content type.

Suggested change

{...pa('title')}

{...pa('heading')}

Copilot · 2025-11-11T07:59:10Z

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

+          <OptimizelyExperience
+            nodes={opti.composition.nodes ?? []}
+            ComponentWrapper={ComponentWrapper}
+          />
+        </div>


The OptimizelyExperience component is placed inside the sidebar div but appears after the closing tag of the sidebar. It should be moved outside the grid container or properly nested within the layout structure.

Suggested change

<OptimizelyExperience

nodes={opti.composition.nodes ?? []}

ComponentWrapper={ComponentWrapper}

/>

</div>

</div>

<OptimizelyExperience

nodes={opti.composition.nodes ?? []}

ComponentWrapper={ComponentWrapper}

/>

JohanPetersson · 2025-11-12T08:47:34Z

templates/alloy-template/src/app/[...slug]/page.tsx

+    graphUrl: process.env.OPTIMIZELY_GRAPH_URL,
+  });
+  const path = `/${slug.join('/')}/`;
+  const c = await client.getContentByPath(path);


Suggested change

const c = await client.getContentByPath(path);

const pages = await client.getContentByPath(path);

JohanPetersson · 2025-11-12T08:49:13Z

templates/alloy-template/src/app/[...slug]/page.tsx

+
+  return (
+    <>
+      <Header currentPath={{ children, ancestors }} />


Wouldn't it make more sense to let this component load its own data?

JohanPetersson · 2025-11-12T08:51:18Z

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

+  currentPath?: string;
+}
+
+const defaultSections: FooterSection[] = [


Do we have a follow-up story to implement these as link lists in CMS?

JohanPetersson · 2025-11-12T08:52:07Z

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

+  logoText?: string;
+}
+
+const defaultNavigationItems: NavigationItem[] = [


Now when we have getItems() we should be able to load these items from the CMS.

JohanPetersson · 2025-11-12T08:54:05Z

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

+      type: 'richText',
+      displayName: 'Main Body',
+    },
+    // SEO group


Move these SEO properties to component/block and re-use them as a property on each page type.

JohanPetersson · 2025-11-12T08:54:26Z

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

+      displayName: 'Main Body',
+    },
+    // SEO group
+    site_title: {


What is the difference between this property and title?

JohanPetersson · 2025-11-12T08:55:02Z

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

+      displayName: 'Keywords',
+      group: 'SEO',
+    },
+    page_description: {


What is the difference between this property and discription?

JohanPetersson · 2025-11-12T08:55:38Z

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

+      displayName: 'Content Area',
+    },
+    // SEO group
+    site_title: {


Same here...

JohanPetersson · 2025-11-12T08:55:49Z

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

+      displayName: 'Main Body',
+    },
+    // SEO group
+    site_title: {


Same here...

JohanPetersson · 2025-11-12T08:58:04Z

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

+  key: 'Standard',
+  displayName: 'Standard Page',
+  baseType: '_experience',
+  mayContainTypes: ['_self', 'News'], // Passed 'News' as a string to avoid circular dependency


Is the comment still true?

TRomesh had a problem deploying to Vercel preview environment October 17, 2025 12:56 — with GitHub Actions Failure

TRomesh force-pushed the feature/CMS-45730-add-alloy-template branch from 892c021 to 0277cd3 Compare October 21, 2025 08:20

TRomesh deployed to Vercel preview environment October 21, 2025 08:20 — with GitHub Actions View deployment

TRomesh force-pushed the feature/CMS-45730-add-alloy-template branch from 0277cd3 to 1458a0a Compare October 21, 2025 09:45

TRomesh deployed to Vercel preview environment October 21, 2025 09:45 — with GitHub Actions View deployment

TRomesh marked this pull request as ready for review October 30, 2025 07:30

TRomesh requested a review from exacs October 30, 2025 12:00

TRomesh enabled auto-merge November 4, 2025 07:54

TRomesh requested a review from Copilot November 4, 2025 10:03

Copilot AI reviewed Nov 4, 2025

View reviewed changes

JohanPetersson reviewed Nov 4, 2025

View reviewed changes

TRomesh added 9 commits November 10, 2025 13:23

Init alloy template

7df3c42

Add basic content types and basic components

dcbad30

Add new components Article, News, Standard, Start, and BlankSection.

96d5bd0

Add news component and content types

63f600f

Refactor News, Standard, and BlankSection components for improved lay…

620e782

…out and content handling; enhance Teaser component with link wrapping functionality.

Add env.example file with CMS configuration variables

abd0c8e

CMS-45730 Rename OPTIMIZELY_CMS_HOST to OPTIMIZELY_CMS_URL in env.exa…

a1a8644

…mple and update page.tsx to use the new variable

CMS-45730 Add Header and Footer components; implement breadcrumbs in …

dc268db

…Header and update layout structure

CMS-45730 Add SEO, Site Settings property groups and update contet types

baf3440

TRomesh force-pushed the feature/CMS-45730-add-alloy-template branch from 1458a0a to baf3440 Compare November 11, 2025 07:52

TRomesh deployed to Vercel preview environment November 11, 2025 07:52 — with GitHub Actions View deployment

TRomesh requested a review from Copilot November 11, 2025 07:56

Copilot started reviewing on behalf of TRomesh November 11, 2025 07:57 View session

Copilot finished reviewing on behalf of TRomesh November 11, 2025 07:57

Copilot AI reviewed Nov 11, 2025

View reviewed changes

JohanPetersson reviewed Nov 12, 2025

View reviewed changes

		@@ -0,0 +1,52 @@
		import { contentType } from '@optimizely/cms-sdk';

		const PageList = contentType({

	const c = await client.getContentByPath(path);
	const pages = await client.getContentByPath(path);

CMS-45730 Add alloy template #139

Are you sure you want to change the base?

CMS-45730 Add alloy template #139

Uh oh!

Conversation

TRomesh commented Oct 16, 2025 • edited by atlassian bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

CLAassistant commented Nov 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI Nov 11, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 11, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 11, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 11, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 11, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

TRomesh commented Oct 16, 2025 •

edited by atlassian bot

Loading

CLAassistant commented Nov 11, 2025 •

edited

Loading