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)/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 { items: pages } = await cms.getContentItems({
-    collection: 'documentation',
-    language: resolvedLanguage,
-  });
+  const pages = await getDocs(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);