Update CMS client configuration and refactor content organization

The code changes involve a significant update to the configuration of our CMS client. The nature of retrieving content items has been refactored to be more granular, allowing for the identification and fetching of content from specified collections rather than general categories. These modifications improve the efficiency and specificity of content queries. Furthermore, other changes were made to provide a better alignment of our content structure, including the reorganization of content files and renaming of image paths in various components for consistency.

apps/web/app/(marketing)/blog/[slug]/page.tsx

@@ -1,3 +1,5 @@
+import { cache } from 'react';
+
 import type { Metadata } from 'next';
 
 import { notFound } from 'next/navigation';
@@ -8,13 +10,18 @@ import { withI18n } from '~/lib/i18n/with-i18n';
 
 import { Post } from '../../blog/_components/post';
 
+const getPostBySlug = cache(async (slug: string) => {
+  const client = await createCmsClient();
+
+  return client.getContentItemBySlug({ slug, collection: 'posts' });
+});
+
 export async function generateMetadata({
   params,
 }: {
   params: { slug: string };
 }): Promise<Metadata | undefined> {
-  const cms = await createCmsClient();
-  const post = await cms.getContentItemById(params.slug);
+  const post = await getPostBySlug(params.slug);
 
   if (!post) {
     notFound();
@@ -29,7 +36,7 @@ export async function generateMetadata({
       title,
       description,
       type: 'article',
-      publishedTime: publishedAt.toDateString(),
+      publishedTime: publishedAt?.toDateString(),
       url: post.url,
       images: image
         ? [
@@ -49,8 +56,7 @@ export async function generateMetadata({
 }
 
 async function BlogPost({ params }: { params: { slug: string } }) {
-  const cms = await createCmsClient();
-  const post = await cms.getContentItemById(params.slug);
+  const post = await getPostBySlug(params.slug);
 
   if (!post) {
     notFound();

apps/web/app/(marketing)/blog/_components/post.tsx

@@ -12,7 +12,7 @@ export const Post: React.FC<{
     <div>
       <PostHeader post={post} />
 
-      <div className={'mx-auto flex max-w-2xl flex-col space-y-6'}>
+      <div className={'mx-auto flex max-w-2xl flex-col space-y-6 py-8'}>
         <article className={styles.HTML}>
           <ContentRenderer content={content} />
         </article>

apps/web/app/(marketing)/blog/page.tsx

@@ -15,12 +15,18 @@ export const generateMetadata = async () => {
   };
 };
 
-async function BlogPage() {
+async function BlogPage({ searchParams }: { searchParams: { page: string } }) {
   const { t } = await createI18nServerInstance();
   const cms = await createCmsClient();
 
+  const page = searchParams.page ? parseInt(searchParams.page) : 0;
+  const limit = 10;
+  const offset = page * limit;
+
   const posts = await cms.getContentItems({
-    categories: ['blog'],
+    collection: 'posts',
+    limit,
+    offset,
   });
 
   return (

apps/web/app/(marketing)/docs/[...slug]/page.tsx

@@ -14,7 +14,7 @@ import { DocsCards } from '../_components/docs-cards';
 const getPageBySlug = cache(async (slug: string) => {
   const client = await createCmsClient();
 
-  return client.getContentItemById(slug);
+  return client.getContentItemBySlug({ slug, collection: 'documentation' });
 });
 
 interface PageParams {

apps/web/app/(marketing)/docs/_components/docs-navigation.tsx

@@ -40,11 +40,14 @@ const Node: React.FC<{
   level: number;
   activePath: string;
 }> = ({ node, level, activePath }) => {
+  const pathPrefix = `/docs`;
+  const url = `${pathPrefix}/${node.url}`;
+
   return (
     <>
       <DocsNavLink
         label={node.title}
-        url={node.url}
+        url={url}
         level={level}
         activePath={activePath}
       />

apps/web/app/(marketing)/docs/layout.tsx

@@ -6,9 +6,11 @@ async function DocsLayout({ children }: React.PropsWithChildren) {
   const cms = await createCmsClient();
 
   const pages = await cms.getContentItems({
-    categories: ['documentation'],
+    collection: 'documentation',
   });
 
+  console.log(pages);
+
   return (
     <div className={'flex'}>
       <DocsNavigation pages={buildDocumentationTree(pages)} />

apps/web/app/(marketing)/docs/page.tsx

@@ -19,7 +19,7 @@ async function DocsPage() {
   const { t } = await createI18nServerInstance();
 
   const docs = await client.getContentItems({
-    categories: ['documentation'],
+    collection: 'documentation',
   });
 
   // Filter out any docs that have a parentId, as these are children of other docs

apps/web/app/(marketing)/page.tsx

@@ -76,7 +76,7 @@ function Home() {
             }
             width={3069}
             height={1916}
-            src={`/assets/images/dashboard-demo.webp`}
+            src={`/images/dashboard-demo.webp`}
             alt={`App Image`}
           />
         </div>
@@ -135,7 +135,7 @@ function Home() {
             <RightFeatureContainer>
               <Image
                 className="rounded-2xl"
-                src={'/assets/images/sign-in.webp'}
+                src={'/images/sign-in.webp'}
                 width={'626'}
                 height={'683'}
                 alt={'Sign In'}
@@ -147,7 +147,7 @@ function Home() {
             <LeftFeatureContainer>
               <Image
                 className="rounded-2xl"
-                src={'/assets/images/dashboard.webp'}
+                src={'/images/dashboard.webp'}
                 width={'887'}
                 height={'743'}
                 alt={'Dashboard'}

apps/web/app/layout.tsx

@@ -66,9 +66,9 @@ export const metadata = {
     description: appConfig.description,
   },
   icons: {
-    icon: '/assets/images/favicon/favicon.ico',
+    icon: '/images/favicon/favicon.ico',
     shortcut: '/shortcut-icon.png',
-    apple: '/assets/images/favicon/apple-touch-icon.png',
+    apple: '/images/favicon/apple-touch-icon.png',
     other: {
       rel: 'apple-touch-icon-precomposed',
       url: '/apple-touch-icon-precomposed.png',