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

Author: TRomesh

pnpm-lock.yaml

@@ -1,7 +1,17 @@
-import type { NextConfig } from "next";
+import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  images: {
+    domains: ['app-opinjssdk1sob7t001.cms.optimizely.com'],
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '*.cms.optimizely.com',
+        port: '',
+        pathname: '/**',
+      },
+    ],
+  },
 };
 
 export default nextConfig;

templates/alloy-template/next.config.ts

@@ -8,18 +8,20 @@
     "start": "next start"
   },
   "dependencies": {
+    "@optimizely/cms-sdk": "workspace:*",
+    "clsx": "^2.1.1",
+    "next": "15.5.4",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "next": "15.5.4",
-    "@optimizely/cms-sdk": "workspace:*"
+    "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
     "@optimizely/cms-cli": "workspace:*",
-    "typescript": "^5",
+    "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4"
+    "tailwindcss": "^4",
+    "typescript": "^5"
   }
 }

templates/alloy-template/package.json

@@ -1,4 +1,4 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 
 :root {
   --background: #ffffff;
@@ -12,12 +12,12 @@
   --font-mono: var(--font-geist-mono);
 }
 
-@media (prefers-color-scheme: dark) {
+/* @media (prefers-color-scheme: dark) {
   :root {
     --background: #0a0a0a;
     --foreground: #ededed;
   }
-}
+} */
 
 body {
   background: var(--background);

templates/alloy-template/src/app/globals.css

@@ -9,13 +9,16 @@ import { initReactComponentRegistry } from '@optimizely/cms-sdk/react/server';
 import './globals.css';
 import Header from '@/components/base/Header';
 import Footer from '@/components/base/Footer';
-import Jumbotron, { JumbotronContentType } from '@/components/Jumbotron';
-import Teaser, { TeaserContentType } from '@/components/Teaser';
-import Editorial, { EditorialContentType } from '@/components/Editorial';
-import Contact, { ContactContentType } from '@/components/Contact';
-import StartPage, { StartPageContentType } from '@/components/StartPage';
+import Teaser, { TeaserContentType } from '@/components/base/Teaser';
+import Editorial, { EditorialContentType } from '@/components/base/Editorial';
+import Contact, { ContactContentType } from '@/components/base/Contact';
+import StartPage, { StartPageContentType } from '@/components/Start';
 import Product, { ProductContentType } from '@/components/Product';
-import StandardPage from '@/components/StandardPage';
+import StandardPage, { StandardContentType } from '@/components/Standard';
+import Notice, { NoticeContentType } from '@/components/base/Notice';
+import News, { NewsContentType } from '@/components/News';
+import Article, { ArticleContentType } from '@/components/base/Article';
+import BlankSection from '@/components/base/BlankSection';
 
 const geistSans = Geist({
   variable: '--font-geist-sans',
@@ -33,24 +36,30 @@ export const metadata: Metadata = {
 };
 
 initContentTypeRegistry([
+  ArticleContentType,
   BlankExperienceContentType,
-  StartPageContentType,
-  JumbotronContentType,
-  TeaserContentType,
-  EditorialContentType,
   ContactContentType,
+  EditorialContentType,
+  NewsContentType,
+  NoticeContentType,
   ProductContentType,
+  StartPageContentType,
+  TeaserContentType,
+  StandardContentType,
 ]);
 
 initReactComponentRegistry({
   resolver: {
-    StartPage,
-    Jumbotron,
-    Teaser,
-    Editorial,
+    Article,
     Contact,
+    Editorial,
+    News,
+    Notice,
     Product,
     StandardPage,
+    StartPage,
+    Teaser,
+    BlankSection,
   },
 });
 
@@ -65,7 +74,7 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         <Header />
-        {children}
+        <div className="container mx-auto p-10">{children}</div>
         <Footer />
       </body>
     </html>

templates/alloy-template/src/app/layout.tsx

@@ -19,7 +19,7 @@ export default async function Page({ searchParams }: Props) {
     )
     .catch((err) => {
       console.log(err.errors);
-      console.log(err.request.query);
+      console.log(err.request?.query);
       throw err;
     });