Refactor CMS to handle ContentLayer and WordPress platforms

This commit refactors the CMS to handle two platforms: ContentLayer and WordPress. The CMS layer is abstracted into a core package, and separate implementations for each platform are created. This change allows the app to switch the CMS type based on environment variable, which can improve the flexibility of content management. It also updates several functions in the `server-sitemap.xml` route to accommodate these changes and generate sitemaps based on the CMS client. Further, documentation content and posts have been relocated to align with the new structure. Notably, this refactor is a comprehensive update to the way the CMS is structured and managed.

packages/ui/src/makerkit/mdx-components.tsx

@@ -2,8 +2,8 @@ import { forwardRef } from 'react';
 
 import Image from 'next/image';
 
-import { cn } from '../../utils';
-import { LazyRender } from '../lazy-render';
+import { cn } from '../utils';
+import { LazyRender } from './lazy-render';
 
 const NextImage: React.FC<{
   width: number;
@@ -72,11 +72,9 @@ const Video: React.FC<{
   );
 };
 
-const Components = {
+export const MDXComponents = {
   img: NextImage,
   a: ExternalLink,
   Video,
   Image: NextImage,
 };
-
-export default Components;

packages/ui/src/makerkit/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/ui/src/makerkit/mdx/mdx-renderer.tsx

@@ -1,20 +0,0 @@
-import type { MDXComponents } from 'mdx/types';
-import { getMDXComponent } from 'next-contentlayer/hooks';
-
-import Components from './mdx-components';
-// @ts-ignore: ignore weird error
-import styles from './mdx-renderer.module.css';
-
-export function Mdx({
-  code,
-}: React.PropsWithChildren<{
-  code: string;
-}>) {
-  const Component = getMDXComponent(code);
-
-  return (
-    <div className={styles.MDX}>
-      <Component components={Components as unknown as MDXComponents} />
-    </div>
-  );
-}