Update content categorization and handle hierarchical documentation

Enhancements were implemented to support hierarchical documentation. Local CMS now respects parent ID and order attributes of content items, and content can be categories as 'blog' or 'documentation'. Changes were also made to the wordpress integration supporting these new categorizations. Introduced working with nested documentation pages.

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

@@ -10,8 +10,6 @@ export const PostHeader: React.FC<{
 }> = ({ post }) => {
   const { title, publishedAt, description, image } = post;
 
-  console.log(post);
-
   return (
     <div className={'flex flex-col space-y-8'}>
       <div className={'flex flex-col space-y-2'}>

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

@@ -20,7 +20,7 @@ async function BlogPage() {
   const cms = await createCmsClient();
 
   const posts = await cms.getContentItems({
-    type: 'post',
+    categories: ['blog'],
   });
 
   return (

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

@@ -14,17 +14,17 @@ import styles from '../../blog/_components/html-renderer.module.css';
 const getPageBySlug = cache(async (slug: string) => {
   const client = await createCmsClient();
 
-  return client.getContentItemById(slug, 'pages');
+  return client.getContentItemById(slug);
 });
 
 interface PageParams {
   params: {
-    slug: string;
+    slug: string[];
   };
 }
 
 export const generateMetadata = async ({ params }: PageParams) => {
-  const page = await getPageBySlug(params.slug);
+  const page = await getPageBySlug(params.slug.join('/'));
 
   if (!page) {
     notFound();
@@ -39,7 +39,7 @@ export const generateMetadata = async ({ params }: PageParams) => {
 };
 
 async function DocumentationPage({ params }: PageParams) {
-  const page = await getPageBySlug(params.slug);
+  const page = await getPageBySlug(params.slug.join('/'));
 
   if (!page) {
     notFound();
@@ -61,7 +61,7 @@ async function DocumentationPage({ params }: PageParams) {
         </article>
 
         <If condition={page.children}>
-          <DocsCards pages={page.children ?? []} />
+          <DocsCards cards={page.children ?? []} />
         </If>
       </div>
     </div>

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

@@ -2,10 +2,10 @@ import { Cms } from '@kit/cms';
 
 import { DocsCard } from './docs-card';
 
-export function DocsCards({ pages }: { pages: Cms.ContentItem[] }) {
+export function DocsCards({ cards }: { cards: Cms.ContentItem[] }) {
   return (
     <div className={'grid grid-cols-1 gap-8 lg:grid-cols-2'}>
-      {pages.map((item) => {
+      {cards.map((item) => {
         return (
           <DocsCard
             key={item.title}

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

@@ -1,4 +1,4 @@
-import { createCmsClient } from '@kit/cms';
+import { Cms, createCmsClient } from '@kit/cms';
 
 import { DocsNavigation } from '~/(marketing)/docs/_components/docs-navigation';
 
@@ -6,17 +6,13 @@ async function DocsLayout({ children }: React.PropsWithChildren) {
   const cms = await createCmsClient();
 
   const pages = await cms.getContentItems({
-    type: 'page',
     categories: ['documentation'],
-    depth: 1,
   });
 
-  console.log(pages);
-
   return (
     <div className={'container mx-auto'}>
       <div className={'flex'}>
-        <DocsNavigation pages={pages} />
+        <DocsNavigation pages={buildDocumentationTree(pages)} />
 
         <div className={'flex w-full flex-col items-center'}>{children}</div>
       </div>
@@ -25,3 +21,37 @@ async function DocsLayout({ children }: React.PropsWithChildren) {
 }
 
 export default DocsLayout;
+
+// we want to place all the children under their parent
+// based on the property parentId
+function buildDocumentationTree(pages: Cms.ContentItem[]) {
+  const tree: Cms.ContentItem[] = [];
+  const map: Record<string, Cms.ContentItem> = {};
+
+  pages.forEach((page) => {
+    map[page.id] = page;
+  });
+
+  pages.forEach((page) => {
+    if (page.parentId) {
+      const parent = map[page.parentId];
+
+      if (!parent) {
+        return;
+      }
+
+      if (!parent.children) {
+        parent.children = [];
+      }
+
+      parent.children.push(page);
+
+      // sort children by order
+      parent.children.sort((a, b) => a.order - b.order);
+    } else {
+      tree.push(page);
+    }
+  });
+
+  return tree.sort((a, b) => a.order - b.order);
+}

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

@@ -19,11 +19,12 @@ async function DocsPage() {
   const { t } = await createI18nServerInstance();
 
   const docs = await client.getContentItems({
-    type: 'page',
     categories: ['documentation'],
-    depth: 1,
   });
 
+  // Filter out any docs that have a parentId, as these are children of other docs
+  const cards = docs.filter((item) => !item.parentId);
+
   return (
     <div className={'my-8 flex flex-col space-y-16'}>
       <SitePageHeader
@@ -32,7 +33,7 @@ async function DocsPage() {
       />
 
       <PageBody>
-        <DocsCards pages={docs} />
+        <DocsCards cards={cards} />
       </PageBody>
     </div>
   );