Implement internationalization in pages and update CMS clients

The commit mainly revamps the code to support internationalization in various pages like pricing, docs, blog, etc. It modifies the code to generate metadata asynchronously, accommodating internationalized page titles and subtitles. Also, the commit restructures CMS Client scripts, particularly for ContentLayer and Wordpress. For Wordpress, it updates API fetch routes and handles embedded children data. Furthermore, unnecessary logging statements are cleaned up, and minor updates are done for better UI and code efficiency.

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

@@ -2,30 +2,29 @@ import { cache } from 'react';
 
 import { notFound } from 'next/navigation';
 
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-
 import { ContentRenderer, createCmsClient } from '@kit/cms';
 import { If } from '@kit/ui/if';
 
 import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
 import { DocsCards } from '~/(marketing)/docs/_components/docs-cards';
-import { DocumentationPageLink } from '~/(marketing)/docs/_components/documentation-page-link';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
+import styles from '../../blog/_components/html-renderer.module.css';
+
 const getPageBySlug = cache(async (slug: string) => {
   const client = await createCmsClient();
 
-  return client.getContentItemById(slug);
+  return client.getContentItemById(slug, 'pages');
 });
 
 interface PageParams {
   params: {
-    slug: string[];
+    slug: string;
   };
 }
 
 export const generateMetadata = async ({ params }: PageParams) => {
-  const page = await getPageBySlug(params.slug.join('/'));
+  const page = await getPageBySlug(params.slug);
 
   if (!page) {
     notFound();
@@ -40,7 +39,7 @@ export const generateMetadata = async ({ params }: PageParams) => {
 };
 
 async function DocumentationPage({ params }: PageParams) {
-  const page = await getPageBySlug(params.slug.join('/'));
+  const page = await getPageBySlug(params.slug);
 
   if (!page) {
     notFound();
@@ -57,7 +56,9 @@ async function DocumentationPage({ params }: PageParams) {
           className={'items-start'}
         />
 
-        <ContentRenderer content={page.content} />
+        <article className={styles.HTML}>
+          <ContentRenderer content={page.content} />
+        </article>
 
         <If condition={page.children}>
           <DocsCards pages={page.children ?? []} />

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

@@ -6,7 +6,7 @@ export const DocsCard: React.FC<
   React.PropsWithChildren<{
     title: string;
     subtitle?: string | null;
-    link?: { url: string; label: string };
+    link: { url: string; label: string };
   }>
 > = ({ title, subtitle, children, link }) => {
   return (
@@ -15,11 +15,13 @@ export const DocsCard: React.FC<
         className={`flex grow flex-col space-y-2.5 border bg-background p-6
         ${link ? 'rounded-t-2xl border-b-0' : 'rounded-2xl'}`}
       >
-        <h3 className="mt-0 text-lg font-semibold dark:text-white">{title}</h3>
+        <h3 className="mt-0 text-lg font-semibold dark:text-white">
+          <Link href={link.url}>{title}</Link>
+        </h3>
 
         {subtitle && (
-          <div className="text-sm text-gray-500 dark:text-gray-400">
-            <p>{subtitle}</p>
+          <div className="text-sm text-muted-foreground">
+            <p dangerouslySetInnerHTML={{ __html: subtitle }}></p>
           </div>
         )}
 

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

@@ -12,7 +12,7 @@ export function DocsCards({ pages }: { pages: Cms.ContentItem[] }) {
             title={item.title}
             subtitle={item.description}
             link={{
-              url: item.url,
+              url: `/docs/${item.slug}`,
               label: 'Read more',
             }}
           />

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

@@ -1,16 +1,22 @@
 import { createCmsClient } from '@kit/cms';
+import { PageBody } from '@kit/ui/page';
 
 import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
 import { DocsCards } from '~/(marketing)/docs/_components/docs-cards';
-import appConfig from '~/config/app.config';
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
-export const metadata = {
-  title: `Documentation - ${appConfig.name}`,
+export const generateMetadata = async () => {
+  const { t } = await createI18nServerInstance();
+
+  return {
+    title: t('marketing:documentation'),
+  };
 };
 
 async function DocsPage() {
   const client = await createCmsClient();
+  const { t } = await createI18nServerInstance();
 
   const docs = await client.getContentItems({
     type: 'page',
@@ -18,18 +24,16 @@ async function DocsPage() {
     depth: 1,
   });
 
-  console.log(docs);
-
   return (
     <div className={'my-8 flex flex-col space-y-16'}>
       <SitePageHeader
-        title={'Documentation'}
-        subtitle={'Get started with our guides and tutorials'}
+        title={t('marketing:documentation')}
+        subtitle={t('marketing:documentationSubtitle')}
       />
 
-      <div>
+      <PageBody>
         <DocsCards pages={docs} />
-      </div>
+      </PageBody>
     </div>
   );
 }