Sprint 25 | PRODUCTION PUSH | v4.1.1

.talismanrc

@@ -1,8 +1,4 @@
 fileignoreconfig:
 - filename: package-lock.json
-  checksum: a182c4fc1c6557d5171b2c84c78aae134060a53514b555f6354bbab33e176bac
-- filename: components/CookieConsentForm/Consentform.tsx
-  checksum: 6262adb2b5a8412cde7a9d789b357013c0ad67b1bd5e71d0dc97e17d9d04e81f
-- filename: components/UserFormModal/UserFormModal.tsx
-  checksum: df240bac699e2006727c409a5ad0acf372c1838a35a66f8024af58ce3fa4f4e2
+  checksum: 8ec0a810d47ff35ab9f48c99e182089b68d33a387bd90e3a766dd0e251395202
 version: "1.0"

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Contentstack
+Copyright (c) 2026 Contentstack
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,14 +1,10 @@
-[![compass-starter-app](/public/contentstack-logo.png)](https://www.contentstack.com/)
-
 # Compass Starter App
 
 About Contentstack: Contentstack is a headless CMS with an API-first approach that puts content at the centre. It is designed to simplify the process of publication by separating code from content.
 
 About this project: This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) used to build modern web applications.
 
-![compass-starter-app](/public/starter-app.png)
-
-##### Recommended Node version: v18.17.0 and App Supported till v22.11.0
+##### Recommended Node version: v18.17.0 and App Supported till v24.3.0
 
 ## Getting Started
 

components/Card/Card.tsx

@@ -35,7 +35,7 @@ const Card: React.FC<ImageCardItem> = (props: ImageCardItem) => {
                     image_alt_text={image_alt_text || title}
                 />
 
-                <div className='absolute inset-0 bg-black/30 z-10' />
+                {/* <div className='absolute inset-0 bg-black/30 z-10' /> */}
 
                 <div
                     className='z-10 w-[42px] h-[6px] bg-white'

components/Hero/Hero.tsx

@@ -73,7 +73,9 @@ const Hero: React.FC<HeroProps> = (props: HeroProps) => {
                     // eslint-disable-next-line jsx-a11y/alt-text
                     : <Image
                         {...bannerImage?.[0]}
-                        $={bannerImage?.[0]?.$}
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                        // @ts-ignore
+                        $={bannerImage?.[0]?.$ || $}
                         addDataCslp={isDataInLiveEdit()}
                         className='h-full w-full object-cover object-center opacity-100'
                     />}

components/RenderComponents/index.tsx

@@ -76,7 +76,7 @@ function RenderComponents ({ hero, components, featured_articles, $, isABEnabled
 
     return (
         <>
-            {hero && <Hero id='hero-banner' {...hero} isABEnabled={isABEnabled} {...$?.hero}/>}
+            {hero && <div {...$?.hero}><Hero id='hero-banner' {...hero} isABEnabled={isABEnabled} {...$?.hero}/></div>}
             <div 
                 {...((isDataInLiveEdit() && $?.components) || {})} //Parent wrapper
                 className={components?.length ? undefined : `${VB_EmptyBlockParentClass} max-height mt-32`}

components/Teaser/Teaser.tsx

@@ -44,16 +44,16 @@ const Teaser: React.FC<TeaserProps> = (props: TeaserProps) => {
             className={'teaser-container my-25 py-[5.2rem] h-full relative bg-cover bg-no-repeat bg-stone'}
         >
             <div className='absolute inset-0 overflow-hidden'>
-                {!image?.[0]?.image?.url && video?.video?.url 
+                {!image?.image?.url && video?.video?.url 
                     ? <Video
                         {...video}
                         addDataCslp={isDataInLiveEdit()}
                         className='h-full w-full object-cover object-center opacity-100'    
                     />
                     // eslint-disable-next-line jsx-a11y/alt-text
                     : <Image
-                        {...image?.[0]}
-                        $={image?.[0]?.$}
+                        {...image}
+                        $={image?.$}
                         addDataCslp={isDataInLiveEdit()}
                         className='h-full w-full object-cover object-center opacity-100'
                     />}

components/TextAndImageCarousel/TextAndImageCarousel.tsx

@@ -3,6 +3,7 @@ import { Component } from '@/types'
 import { Image } from '@/components'
 import { classNames } from '@/utils'
 import { LivePreviewTypeMapper } from '@/types/common'
+import { VB_EmptyBlockParentClass } from '@/config'
 import { Paginator, TextBlock } from './index'
 
 /**
@@ -40,10 +41,10 @@ export function TextAndImageCarousel (props: Component.TextAndImageCarousel) {
     return (
         <div 
             id={id}
-            className='text-and-image-carousel'
+            className={`text-and-image-carousel ${currentItemData?.length < 1 ? VB_EmptyBlockParentClass : ''} my-25`}
             {...$?.carousel_items}
         >
-            {currentItemData?.length > 0 ? currentItemData.map((item, index: number) => {
+            {currentItemData?.length > 0 && currentItemData.map((item, index: number) => {
                 const { heading, content, image, image_alt_text, cta, styles: { theme }, is_thumbnail } = item
 
                 return <div 
@@ -57,7 +58,7 @@ export function TextAndImageCarousel (props: Component.TextAndImageCarousel) {
                                 : image_position === 'left' ? 'sm:flex-row-reverse flex-col'
                                     : 'xs:flex-row-reverse flex-col-reverse'}`,
 
-                            'flex my-25',
+                            'flex',
                             'text-stone bg-white dark:text-white dark:bg-stone'
                         )}
                     >
@@ -86,7 +87,7 @@ export function TextAndImageCarousel (props: Component.TextAndImageCarousel) {
                         </div>
                     </div>
                 </div>
-            }) : <div className='text-center text-gray-400 py-16'>No carousel items available. Click + to add one.</div>}
+            })}
         </div>
     )
 }

components/common/404.tsx

@@ -1,11 +1,21 @@
+'use client'
 import Link from 'next/link'
+import { SEO } from './Seo'
 
 /**
  * NotFoundComponent - A React component that displays a 404 error message on page
  * @returns {JSX.Element} A React component for the 404 error page
  */
 const NotFoundComponent = () => {
-    return (
+    return (<>
+        <SEO
+            seo={{ 
+                title: '404 - Page Not Found | Compass',
+                no_index: true,
+                no_follow: true,    
+                description: 'The page you are looking for could not be found. Return to our homepage or browse our content.'
+            }}
+        />
         <div 
             className='grid min-h-full place-items-center dark:!bg-black bg-white px-6 py-24 sm:py-28 lg:px-8'
             id='not-found-component' 
@@ -25,7 +35,8 @@ const NotFoundComponent = () => {
                 </div>
             </div>
         </div>
+    </>
     )
 }
 
-export {NotFoundComponent}
+export { NotFoundComponent }

components/common/Seo.tsx

@@ -51,7 +51,7 @@ const SEO: React.FC<Page.SeoProps> = (props: Page.SeoProps) => {
             {props?.seo?.title ? <title>{props?.seo?.title}</title> : <title>{props?.title}</title>}
             <meta
                 name='application-name'
-                content='Universal Demo'
+                content='Compass Starter App'
             />
             <meta charSet='utf-8' />
             <meta httpEquiv='X-UA-Compatible' content='IE=edge' />

eslint.config.mjs

@@ -25,7 +25,8 @@ const patchedConfig = fixupConfigRules([...compat.extends(
 const config = [
     {
         ignores: [
-            '.next/*'
+            '.next/*',
+            'next-env.d.ts'
         ]
     }, 
     ...patchedConfig,