CMS-45730 Add alloy template #139
Conversation
TRomesh
had a problem deploying
to
Vercel preview environment
GitHub Actions
Failure
TRomesh
force-pushed
the
feature/CMS-45730-add-alloy-template
branch
from
892c021 to
0277cd3
Compare
TRomesh
force-pushed
the
feature/CMS-45730-add-alloy-template
branch
from
0277cd3 to
1458a0a
Compare
There was a problem hiding this comment.
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.
| type: 'string', | ||
| displayName: 'Page Description', | ||
| }, | ||
| disable_indexing: { |
There was a problem hiding this comment.
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.
| displayName: 'Button Link', | ||
| group: 'Information', | ||
| }, | ||
| button_text: { |
There was a problem hiding this comment.
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
TRomesh
force-pushed
the
feature/CMS-45730-add-alloy-template
branch
from
1458a0a to
baf3440
Compare
|
|
There was a problem hiding this comment.
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.
| @@ -0,0 +1,52 @@ | |||
| import { contentType } from '@optimizely/cms-sdk'; | |||
|
|
|||
| const PageList = contentType({ | |||
There was a problem hiding this comment.
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.
| interface HeaderProps { | ||
| currentPath: any; |
There was a problem hiding this comment.
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 } } }> }.
| <div className="md:w-1/2 h-64 md:h-auto overflow-hidden"> | ||
| <img | ||
| src={opti.image?.url.default} | ||
| alt="teaser_image" |
There was a problem hiding this comment.
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'}.
| {/* Heading and Description */} | ||
| <div className="space-y-4"> | ||
| <h1 | ||
| {...pa('title')} |
There was a problem hiding this comment.
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.
| {...pa('title')} | |
| {...pa('heading')} |
| <OptimizelyExperience | ||
| nodes={opti.composition.nodes ?? []} | ||
| ComponentWrapper={ComponentWrapper} | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
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.
| <OptimizelyExperience | |
| nodes={opti.composition.nodes ?? []} | |
| ComponentWrapper={ComponentWrapper} | |
| /> | |
| </div> | |
| </div> | |
| <OptimizelyExperience | |
| nodes={opti.composition.nodes ?? []} | |
| ComponentWrapper={ComponentWrapper} | |
| /> |
This template is 75% complete. The remaining features can be implemented once the tasks in CMS-46339 are resolved.