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;
-}

packages/cms/core/src/cms-client.ts

@@ -58,7 +58,10 @@ export abstract class CmsClient {
     options?: Cms.GetContentItemsOptions,
   ): Promise<Cms.ContentItem[]>;
 
-  abstract getContentItemById(id: string): Promise<Cms.ContentItem | undefined>;
+  abstract getContentItemById(
+    id: string,
+    type?: string,
+  ): Promise<Cms.ContentItem | undefined>;
 
   abstract getCategories(
     options?: Cms.GetCategoriesOptions,

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

@@ -9,9 +9,19 @@ export async function ContentRenderer({
 }) {
   switch (type) {
     case 'contentlayer': {
-      const { ContentRenderer } = await import('@kit/contentlayer');
+      const { MDXContentRenderer } = await import(
+        '../../contentlayer/src/content-renderer'
+      );
 
-      return ContentRenderer({ content });
+      return MDXContentRenderer({ content });
+    }
+
+    case 'wordpress': {
+      const { WordpressContentRenderer } = await import(
+        '../../wordpress/src/content-renderer'
+      );
+
+      return WordpressContentRenderer({ content });
     }
   }
 }

packages/cms/core/src/create-cms-client.ts

@@ -11,6 +11,10 @@ import { CmsType } from './cms.type';
 export async function createCmsClient(
   type: CmsType = process.env.CMS_CLIENT as CmsType,
 ): Promise<CmsClient> {
+  return cmsClientFactory(type);
+}
+
+async function cmsClientFactory(type: CmsType) {
   switch (type) {
     case 'contentlayer':
       return getContentLayerClient();

packages/cms/wordpress/README.md

@@ -5,7 +5,7 @@ Implementation of the CMS layer using the [Wordpress](https://wordpress.org) lib
 This implementation is used when the host app's environment variable is set as:
 
 ```
-CMS_TYPE=wordpress
+CMS_CLIENT=wordpress
 ```
 
 Additionally, please set the following environment variables:
@@ -26,4 +26,19 @@ or
 npm run dev
 ```
 
-from this package's root directory.
+from this package's root directory.
+
+The credentials for the Wordpress instance are:
+
+```
+WORDPRESS_DB_HOST=db
+WORDPRESS_DB_USER=wordpress
+WORDPRESS_DB_PASSWORD=wordpress
+WORDPRESS_DB_NAME=wordpress
+```
+
+You will be asked to set up the Wordpress instance when you visit `http://localhost:8080` for the first time.
+
+## Note for Wordpress REST API
+
+To make the REST API in your Wordpress instance work, please change the permalink structure to `/%post%/` from the Wordpress admin panel.

packages/cms/wordpress/docker-compose.yml

@@ -19,7 +19,7 @@ services:
   wordpress:
     image: wordpress:latest
     ports:
-      - 80:80
+      - 8080:80
     restart: always
     environment:
       - WORDPRESS_DB_HOST=db

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

@@ -0,0 +1,3 @@
+export function WordpressContentRenderer(props: { content: string }) {
+  return <div dangerouslySetInnerHTML={{ __html: props.content }} />;
+}

packages/cms/wordpress/src/wp-client.ts

@@ -70,7 +70,7 @@ export class WordpressClient implements CmsClient {
         let children: Cms.ContentItem[] = [];
 
         const embeddedChildren = (
-          item._embedded ? item._embedded['wp:children'] : []
+          item._embedded ? item._embedded['wp:children'] ?? [] : []
         ) as WP_REST_API_Post[];
 
         if (options?.depth && options.depth > 0) {
@@ -128,8 +128,8 @@ export class WordpressClient implements CmsClient {
     );
   }
 
-  async getContentItemById(slug: string) {
-    const url = `${this.apiUrl}/wp-json/wp/v2/posts?slug=${slug}`;
+  async getContentItemById(slug: string, type: 'posts' | 'pages' = 'posts') {
+    const url = `${this.apiUrl}/wp-json/wp/v2/${type}?slug=${slug}&_embed`;
     const response = await fetch(url);
     const data = (await response.json()) as WP_REST_API_Post[];
     const item = data[0];