Fixed WP Client

apps/web/next.config.mjs

@@ -17,7 +17,7 @@ const INTERNAL_PACKAGES = [
   '@kit/stripe',
   '@kit/email-templates',
   '@kit/database-webhooks',
-  '@kit/cms'
+  '@kit/cms',
 ];
 
 /** @type {import('next').NextConfig} */

packages/cms/wordpress/README.md

@@ -6,4 +6,24 @@ This implementation is used when the host app's environment variable is set as:
 
 ```
 CMS_TYPE=wordpress
-```
+```
+
+Additionally, please set the following environment variables:
+
+```
+WORDPRESS_API_URL=http://localhost:8080
+```
+
+For development purposes, we ship a Docker container that runs a Wordpress instance. To start the container, run:
+
+```
+docker-compose up
+```
+
+or
+
+```
+npm run dev
+```
+
+from this package's root directory.

packages/cms/wordpress/docker-compose.yml

@@ -0,0 +1,30 @@
+services:
+  db:
+    # We use a mariadb image which supports both amd64 & arm64 architecture
+    image: mariadb:10.6.4-focal
+    # If you really want to use MySQL, uncomment the following line
+    #image: mysql:8.0.27
+    command: '--default-authentication-plugin=mysql_native_password'
+    volumes:
+      - db_data:/var/lib/mysql
+    restart: always
+    environment:
+      - MYSQL_ROOT_PASSWORD=somewordpress
+      - MYSQL_DATABASE=wordpress
+      - MYSQL_USER=wordpress
+      - MYSQL_PASSWORD=wordpress
+    expose:
+      - 3306
+      - 33060
+  wordpress:
+    image: wordpress:latest
+    ports:
+      - 80:80
+    restart: always
+    environment:
+      - WORDPRESS_DB_HOST=db
+      - WORDPRESS_DB_USER=wordpress
+      - WORDPRESS_DB_PASSWORD=wordpress
+      - WORDPRESS_DB_NAME=wordpress
+volumes:
+  db_data:

packages/cms/wordpress/package.json

@@ -7,7 +7,8 @@
     "format": "prettier --check \"**/*.{ts,tsx}\"",
     "lint": "eslint .",
     "typecheck": "tsc --noEmit",
-    "build": "contentlayer build"
+    "build": "contentlayer build",
+    "dev": "docker compose up"
   },
   "prettier": "@kit/prettier-config",
   "exports": {

packages/cms/wordpress/src/index.ts

@@ -1 +1 @@
-export * from './wp-client';
+export * from './wp-client';

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

@@ -25,15 +25,15 @@ export class WordpressClient implements CmsClient {
 
     switch (options?.type) {
       case 'post':
-        endpoint = '/wp-json/wp/v2/posts';
+        endpoint = '/wp-json/wp/v2/posts?_embed';
         break;
 
       case 'page':
-        endpoint = '/wp-json/wp/v2/pages';
+        endpoint = '/wp-json/wp/v2/pages?_embed';
         break;
 
       default:
-        endpoint = '/wp-json/wp/v2/posts';
+        endpoint = '/wp-json/wp/v2/posts?_embed';
     }
 
     const url = new URL(this.apiUrl + endpoint);
@@ -88,15 +88,15 @@ export class WordpressClient implements CmsClient {
                 id: child.id.toString(),
                 title: child.title.rendered,
                 type: child.type as Cms.ContentType,
-                image: child.featured_media,
+                image: this.getFeaturedMedia(child),
                 description: child.excerpt.rendered,
                 url: child.link,
                 content: child.content.rendered,
                 slug: child.slug,
                 publishedAt: new Date(child.date),
                 author: childAuthor?.name,
-                categories: childCategories.map((category) => category.name),
+                categories: childCategories,
-                tags: childTags.map((tag) => tag.name),
+                tags: childTags,
                 parentId: child.parent?.toString(),
               };
             }),
@@ -106,19 +106,20 @@ export class WordpressClient implements CmsClient {
         const author = await this.getAuthor(item.author);
         const categories = await this.getCategoriesByIds(item.categories ?? []);
         const tags = await this.getTagsByIds(item.tags ?? []);
+        const image = item.featured_media ? this.getFeaturedMedia(item) : '';
 
         return {
           id: item.id.toString(),
           title: item.title.rendered,
           content: item.content.rendered,
           description: item.excerpt.rendered,
-          image: item.featured_media,
+          image,
           url: item.link,
           slug: item.slug,
           publishedAt: new Date(item.date),
           author: author?.name,
-          categories: categories.map((category) => category.name),
+          categories: categories,
-          tags: tags.map((tag) => tag.name),
+          tags: tags,
           type: item.type as Cms.ContentType,
           parentId,
           children,
@@ -140,10 +141,11 @@ export class WordpressClient implements CmsClient {
     const author = await this.getAuthor(item.author);
     const categories = await this.getCategoriesByIds(item.categories ?? []);
     const tags = await this.getTagsByIds(item.tags ?? []);
+    const image = item.featured_media ? this.getFeaturedMedia(item) : '';
 
     return {
-      id: item.id,
+      id: item.id.toString(),
-      image: item.featured_media,
+      image,
       url: item.link,
       description: item.excerpt.rendered,
       type: item.type as Cms.ContentType,
@@ -153,8 +155,8 @@ export class WordpressClient implements CmsClient {
       slug: item.slug,
       publishedAt: new Date(item.date),
       author: author?.name,
-      categories: categories.map((category) => category.name),
+      categories,
-      tags: tags.map((tag) => tag.name),
+      tags,
     };
   }
 
@@ -253,7 +255,11 @@ export class WordpressClient implements CmsClient {
       responses.map((response) => response.json()),
     )) as WP_REST_API_Tag[];
 
-    return data.map((item) => ({ id: item.id, name: item.name }));
+    return data.map((item) => ({
+      id: item.id.toString(),
+      name: item.name,
+      slug: item.slug,
+    }));
   }
 
   private async getCategoriesByIds(ids: number[]) {
@@ -267,7 +273,11 @@ export class WordpressClient implements CmsClient {
       responses.map((response) => response.json()),
     )) as WP_REST_API_Category[];
 
-    return data.map((item) => ({ id: item.id, name: item.name }));
+    return data.map((item) => ({
+      id: item.id.toString(),
+      name: item.name,
+      slug: item.slug,
+    }));
   }
 
   private async getAuthor(id: number) {
@@ -281,4 +291,21 @@ export class WordpressClient implements CmsClient {
 
     return { name: data.name };
   }
+
+  private getFeaturedMedia(post: WP_REST_API_Post) {
+    const embedded = post._embedded ?? {
+      'wp:featuredmedia': [],
+    };
+
+    const media = embedded['wp:featuredmedia'] ?? [];
+    const item = media?.length > 0 ? media[0] : null;
+
+    return item
+      ? (
+          item as {
+            source_url: string;
+          }
+        ).source_url
+      : '';
+  }
 }