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.

packages/cms/contentlayer/README.md

@@ -5,5 +5,5 @@ Implementation of the CMS layer using the [Contentlayer](https://contentlayer.de
 This implementation is used when the host app's environment variable is set as:
 
 ```
-CMS_TYPE=contentlayer
+CMS_CLIENT=contentlayer
 ```

packages/cms/contentlayer/src/client.ts

@@ -162,7 +162,6 @@ export class ContentlayerClient implements CmsClient {
     post: Post | DocumentationPage,
     children: Array<Post | DocumentationPage> = [],
   ): Cms.ContentItem {
-    console.log(post);
     return {
       id: post.slug,
       title: post.title,

packages/cms/contentlayer/src/content-renderer.tsx

@@ -1,5 +1,5 @@
-import { Mdx } from './mdx/mdx-renderer';
+import { Mdx } from './mdx-renderer';
 
-export function ContentRenderer(props: { content: string }) {
+export function MDXContentRenderer(props: { content: string }) {
   return <Mdx code={props.content} />;
 }

packages/cms/contentlayer/src/index.ts

@@ -1,3 +1,2 @@
 export * from './client';
-export * from './mdx/mdx-renderer';
 export * from './content-renderer';

packages/cms/contentlayer/src/mdx-renderer.tsx

@@ -3,9 +3,6 @@ import { getMDXComponent } from 'next-contentlayer/hooks';
 
 import { MDXComponents } from '@kit/ui/mdx-components';
 
-// @ts-ignore: ignore weird error
-import styles from './mdx-renderer.module.css';
-
 export function Mdx({
   code,
 }: React.PropsWithChildren<{
@@ -14,8 +11,6 @@ export function Mdx({
   const Component = getMDXComponent(code);
 
   return (
-    <div className={styles.MDX}>
-      <Component components={MDXComponents as unknown as MDXComponentsType} />
-    </div>
+    <Component components={MDXComponents as unknown as MDXComponentsType} />
   );
 }

packages/cms/contentlayer/src/mdx/mdx-renderer.module.css

@@ -1,97 +0,0 @@
-.MDX h1 {
-  @apply mt-14 text-4xl font-bold;
-}
-
-.MDX h2 {
-  @apply mb-4 mt-12 text-2xl font-semibold lg:text-3xl;
-}
-
-.MDX h3 {
-  @apply mt-10 text-2xl font-bold;
-}
-
-.MDX h4 {
-  @apply mt-8 text-xl font-bold;
-}
-
-.MDX h5 {
-  @apply mt-6 text-lg font-semibold;
-}
-
-.MDX h6 {
-  @apply mt-2 text-base font-medium;
-}
-
-/**
-Tailwind "dark" variants do not work with CSS Modules
-We work it around using :global(.dark)
-For more info: https://github.com/tailwindlabs/tailwindcss/issues/3258#issuecomment-770215347
-*/
-:global(.dark) .MDX h1,
-:global(.dark) .MDX h2,
-:global(.dark) .MDX h3,
-:global(.dark) .MDX h4,
-:global(.dark) .MDX h5,
-:global(.dark) .MDX h6 {
-  @apply text-white;
-}
-
-.MDX p {
-  @apply mb-4 mt-2 text-base leading-7;
-}
-
-.MDX li {
-  @apply relative my-1.5 text-base leading-7;
-}
-
-.MDX ul > li:before {
-  content: '-';
-
-  @apply mr-2;
-}
-
-.MDX ol > li:before {
-  @apply inline-flex font-medium;
-
-  content: counters(counts, '.') '. ';
-  font-feature-settings: 'tnum';
-}
-
-.MDX b,
-.MDX strong {
-  @apply font-bold;
-}
-
-:global(.dark) .MDX b,
-:global(.dark) .MDX strong {
-  @apply text-white;
-}
-
-.MDX img,
-.MDX video {
-  @apply rounded-md;
-}
-
-.MDX ul,
-.MDX ol {
-  @apply pl-1;
-}
-
-.MDX ol > li {
-  counter-increment: counts;
-}
-
-.MDX ol > li:before {
-  @apply mr-2 inline-flex font-semibold;
-
-  content: counters(counts, '.') '. ';
-  font-feature-settings: 'tnum';
-}
-
-.MDX blockquote {
-  @apply my-4 border-l-4 border-primary bg-muted px-6 py-4 text-lg font-medium text-gray-600;
-}
-
-.MDX pre {
-  @apply my-6 text-sm text-current;
-}