Add news component and content types

Author: TRomesh

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

@@ -14,7 +14,7 @@ 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, { StandardContentType } from '@/components/Standard';
+import Standard, { StandardContentType } from '@/components/Standard';
 import Notice, { NoticeContentType } from '@/components/base/Notice';
 import News, { NewsContentType } from '@/components/News';
 import Article, { ArticleContentType } from '@/components/base/Article';
@@ -56,7 +56,7 @@ initReactComponentRegistry({
     News,
     Notice,
     Product,
-    StandardPage,
+    Standard,
     StartPage,
     Teaser,
     BlankSection,

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

@@ -13,47 +13,42 @@ export const NewsContentType = contentType({
   baseType: '_experience',
   mayContainTypes: [StandardContentType],
   properties: {
-    teaser_image: {
+    image: {
       type: 'contentReference',
       displayName: 'Teaser Image',
     },
-    teaser_text: {
+    title: {
       type: 'string',
       displayName: 'Teaser Text',
     },
+    description: {
+      type: 'string',
+      displayName: 'Description',
+    },
     main_body: {
       type: 'richText',
       displayName: 'Main Body',
     },
-    title: {
-      type: 'string',
-    },
-    keywords: {
-      type: 'string',
-    },
-    page_description: {
-      type: 'string',
-    },
   },
 });
 
-type StandardPageProps = {
-  opti: Infer<typeof StandardContentType>;
+type NewsPageProps = {
+  opti: Infer<typeof NewsContentType>;
 };
 
 function ComponentWrapper({ children, node }: ComponentContainerProps) {
   const { pa } = getPreviewUtils(node);
   return <div {...pa(node)}>{children}</div>;
 }
 
-function StandardPage({ opti }: StandardPageProps) {
+function News({ opti }: NewsPageProps) {
   return (
     <div>
       <h2>{opti.title}</h2>
-      <p>{opti.teaser_text}</p>
+      <p>{opti.description}</p>
       <div>
-        {opti.teaser_image?.url.default && (
-          <img src={opti.teaser_image.url.default} alt={'Teaser Image'} />
+        {opti.image?.url.default && (
+          <img src={opti.image.url.default} alt={'Teaser Image'} />
         )}
       </div>
       <RichText content={opti.main_body?.json} />
@@ -65,4 +60,4 @@ function StandardPage({ opti }: StandardPageProps) {
   );
 }
 
-export default StandardPage;
+export default News;

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

@@ -10,30 +10,25 @@ export const StandardContentType = contentType({
   key: 'Standard',
   displayName: 'Standard Page',
   baseType: '_experience',
-  mayContainTypes: ['_self'],
+  mayContainTypes: ['_self', 'News'],
   properties: {
-    teaser_image: {
+    image: {
       type: 'contentReference',
       allowedTypes: ['_image'],
       displayName: 'Teaser Image',
     },
-    teaser_text: {
+    heading: {
       type: 'string',
       displayName: 'Teaser Text',
     },
+    description: {
+      type: 'string',
+      displayName: 'Description',
+    },
     main_body: {
       type: 'richText',
       displayName: 'Main Body',
     },
-    title: {
-      type: 'string',
-    },
-    keywords: {
-      type: 'string',
-    },
-    page_description: {
-      type: 'string',
-    },
   },
 });
 
@@ -46,14 +41,14 @@ function ComponentWrapper({ children, node }: ComponentContainerProps) {
   return <div {...pa(node)}>{children}</div>;
 }
 
-function StandardPage({ opti }: StandardPageProps) {
+function Standard({ opti }: StandardPageProps) {
   return (
     <div>
-      <h2>{opti.title}</h2>
-      <p>{opti.teaser_text}</p>
+      <h1 className="text-3xl font-bold">{opti.heading}</h1>
+      <p>{opti.description}</p>
       <div>
-        {opti.teaser_image?.url.default && (
-          <img src={opti.teaser_image.url.default} alt={'Teaser Image'} />
+        {opti.image?.url.default && (
+          <img src={opti.image.url.default} alt={'Teaser Image'} />
         )}
       </div>
       <RichText content={opti.main_body?.json} />
@@ -65,4 +60,4 @@ function StandardPage({ opti }: StandardPageProps) {
   );
 }
 
-export default StandardPage;
+export default Standard;

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

@@ -16,33 +16,33 @@ const defaultSections: FooterSection[] = [
   {
     title: 'PRODUCTS',
     links: [
-      { label: 'Alloy Plan', href: '/alloy-plan' },
-      { label: 'Alloy Track', href: '/alloy-track' },
-      { label: 'Alloy Meet', href: '/alloy-meet' },
+      { label: 'Alloy Plan', href: '/en/alloy-plan' },
+      { label: 'Alloy Track', href: '/en/alloy-track' },
+      { label: 'Alloy Meet', href: '/en/alloy-meet' },
     ],
   },
   {
     title: 'THE COMPANY',
     links: [
-      { label: 'History', href: '/history' },
-      { label: 'News & Events', href: '/news' },
-      { label: 'Management', href: '/management' },
-      { label: 'Contact us', href: '/contact' },
-      { label: 'Become a reseller', href: '/reseller' },
+      { label: 'History', href: '/en/history' },
+      { label: 'News & Events', href: '/en/news' },
+      { label: 'Management', href: '/en/management' },
+      { label: 'Contact us', href: '/en/contact' },
+      { label: 'Become a reseller', href: '/en/reseller' },
     ],
   },
   {
     title: 'NEWS & EVENTS',
     links: [
-      { label: 'Events', href: '/events' },
-      { label: 'Press Releases', href: '/press' },
+      { label: 'Events', href: '/en/events' },
+      { label: 'Press Releases', href: '/en/press' },
     ],
   },
   {
     title: 'CUSTOMER ZONE',
     links: [
-      { label: 'Reseller extranet', href: '/reseller-extranet' },
-      { label: 'Log out', href: '/logout' },
+      { label: 'Reseller extranet', href: '/en/reseller-extranet' },
+      { label: 'Log out', href: '/en/logout' },
     ],
   },
 ];

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

@@ -12,7 +12,7 @@ const defaultNavigationItems: NavigationItem[] = [
   { label: 'ALLOY PLAN', href: '/en/alloy-plan' },
   { label: 'ALLOY TRACK', href: '/en/alloy-track' },
   { label: 'ALLOY MEET', href: '/en/alloy-meet' },
-  { label: 'ABOUT US', href: '/about' },
+  { label: 'ABOUT US', href: '/en/about-us' },
 ];
 
 function Header({ navigationItems = defaultNavigationItems }: HeaderProps) {

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

@@ -0,0 +1,53 @@
+import { contentType } from '@optimizely/cms-sdk';
+
+const PageList = contentType({
+  key: 'PageListBlock',
+  displayName: '',
+  description: '',
+  baseType: '_component',
+  properties: {
+    Heading: {
+      type: 'string',
+      displayName: 'Heading',
+    },
+    IncludePublishDate: {
+      type: 'boolean',
+      displayName: 'IncludePublishDate',
+    },
+    IncludeIntroduction: {
+      type: 'boolean',
+      displayName: 'IncludeIntroduction',
+    },
+    Count: {
+      type: 'integer',
+      displayName: 'Count',
+    },
+    SortOrder: {
+      type: 'integer',
+      displayName: 'SortOrder',
+    },
+    Root: {
+      type: 'contentReference',
+      format: 'PageReference',
+      displayName: 'Root',
+      restrictedTypes: [],
+    },
+    PageTypeFilter: {
+      type: 'string',
+      format: 'PageType',
+      displayName: 'PageTypeFilter',
+    },
+    CategoryFilter: {
+      type: 'array',
+      format: 'categorization',
+      displayName: 'CategoryFilter',
+      items: {
+        type: 'integer',
+      },
+    },
+    Recursive: {
+      type: 'boolean',
+      displayName: 'Recursive',
+    },
+  },
+});