Refactor content fetching and enhance UI mods

Refactored content fetching in the docs and blog pages to use a new 'getDocs' function to improve code reuse. Made minor adjustments to the UI in 'makerkit/page.tsx'. This involved modifying the layout and adding conditionals to tackle optional props. Also added a new textarea component reference in the UI package.

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

@@ -1,4 +1,4 @@
-import { unstable_cache as cache } from 'next/dist/server/web/spec-extension/unstable-cache';
+import { cache } from 'react';
 
 import { createCmsClient } from '@kit/cms';
 import { If } from '@kit/ui/if';

apps/web/app/(marketing)/docs/_lib/server/docs.loader.ts

@@ -0,0 +1,14 @@
+import { cache } from 'react';
+
+import { createCmsClient } from '@kit/cms';
+
+export const getDocs = cache(async (language: string | undefined) => {
+  const cms = await createCmsClient();
+
+  const { items: pages } = await cms.getContentItems({
+    collection: 'documentation',
+    language,
+  });
+
+  return pages;
+});

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

@@ -1,16 +1,12 @@
 import { Cms, createCmsClient } from '@kit/cms';
 
 import { DocsNavigation } from '~/(marketing)/docs/_components/docs-navigation';
+import { getDocs } from '~/(marketing)/docs/_lib/server/docs.loader';
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 
 async function DocsLayout({ children }: React.PropsWithChildren) {
-  const cms = await createCmsClient();
   const { resolvedLanguage } = await createI18nServerInstance();
-
+  const pages = await getDocs(resolvedLanguage);
-  const { items: pages } = await cms.getContentItems({
-    collection: 'documentation',
-    language: resolvedLanguage,
-  });
 
   return (
     <div className={'flex'}>

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

@@ -5,6 +5,7 @@ import { PageBody } from '@kit/ui/page';
 
 import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
 import { DocsCards } from '~/(marketing)/docs/_components/docs-cards';
+import { getDocs } from '~/(marketing)/docs/_lib/server/docs.loader';
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
@@ -16,18 +17,9 @@ export const generateMetadata = async () => {
   };
 };
 
-const getContentItems = cache(async (resolvedLanguage: string | undefined) => {
-  const client = await createCmsClient();
-
-  return client.getContentItems({
-    collection: 'documentation',
-    language: resolvedLanguage,
-  });
-});
-
 async function DocsPage() {
   const { t, resolvedLanguage } = await createI18nServerInstance();
-  const { items } = await getContentItems(resolvedLanguage);
+  const items = await getDocs(resolvedLanguage);
 
   // Filter out any docs that have a parentId, as these are children of other docs
   const cards = items.filter((item) => !item.parentId);

packages/ui/package.json

@@ -109,6 +109,7 @@
     "./radio-group": "./src/shadcn/radio-group.tsx",
     "./separator": "./src/shadcn/separator.tsx",
     "./input-otp": "./src/shadcn/input-otp.tsx",
+    "./textarea": "./src/shadcn/textarea.tsx",
     "./utils": "./src/utils/index.ts",
     "./if": "./src/makerkit/if.tsx",
     "./trans": "./src/makerkit/trans.tsx",

packages/ui/src/makerkit/page.tsx

@@ -39,37 +39,41 @@ export function PageHeader({
   description,
   mobileNavigation,
 }: React.PropsWithChildren<{
-  title: string | React.ReactNode;
+  title?: string | React.ReactNode;
   description?: string | React.ReactNode;
   mobileNavigation?: React.ReactNode;
 }>) {
   return (
-    <div className={'flex min-h-16 items-center justify-between border-b px-4'}>
+    <div className={'flex min-h-[4.5rem] items-center justify-between px-4'}>
-      <div
+      {title ? (
-        className={
+        <div
-          'flex items-center space-x-4 lg:flex-col lg:items-start lg:space-x-0 lg:space-y-0.5'
-        }
-      >
-        <div className={'flex items-center lg:hidden'}>{mobileNavigation}</div>
-
-        <h1
           className={
-            'font-heading text-xl font-semibold leading-none dark:text-white'
+            'flex items-center space-x-4 lg:flex-col lg:items-start lg:space-x-0 lg:space-y-0.5'
           }
         >
-          {title}
+          <div className={'flex items-center lg:hidden'}>
-        </h1>
+            {mobileNavigation}
+          </div>
 
-        <h2 className={'hidden lg:block'}>
+          <h1
-          <span
             className={
-              'text-base font-normal leading-none text-muted-foreground'
+              'font-heading text-xl font-semibold leading-none dark:text-white'
             }
           >
-            {description}
+            {title}
-          </span>
+          </h1>
-        </h2>
+
-      </div>
+          <h2 className={'hidden lg:block'}>
+            <span
+              className={
+                'text-base font-medium leading-none text-muted-foreground'
+              }
+            >
+              {description}
+            </span>
+          </h2>
+        </div>
+      ) : null}
 
       {children}
     </div>