feat: Implemented MDX component management for enhanced documentation capabilities.

frontend/apps/service-site/.eslintrc.json

@@ -1,3 +1,17 @@
 {
-  "extends": ["next/core-web-vitals", "next/typescript"]
+  "extends": ["next/core-web-vitals", "next/typescript"],
+  "rules": {
+    "no-restricted-imports": [
+      "error",
+      {
+        "paths": [
+          {
+            "name": "next-contentlayer/hooks",
+            "importNames": ["useMDXComponent"],
+            "message": "Please use `import { MDXContent } from \"@packages/mdx-components\"`"
+          }
+        ]
+      }
+    ]
+  }
 }

frontend/apps/service-site/contentlayer.config.ts

@@ -2,7 +2,8 @@ import { defineDocumentType, makeSource } from 'contentlayer/source-files'
 
 export const Post = defineDocumentType(() => ({
   name: 'Post',
-  filePathPattern: 'posts/*/*.md',
+  filePathPattern: 'posts/*/*.mdx',
+  contentType: 'mdx',
   fields: {
     title: { type: 'string', required: true },
     date: { type: 'date', required: true },

frontend/apps/service-site/contents/posts/2/en.md → frontend/apps/service-site/contents/posts/2/en.mdx

@@ -1,5 +1,5 @@
 ---
-title: '5 Best Practices for Successful No-Code App Development'
+title: "5 Best Practices for Successful No-Code App Development"
 date: 2024-09-26
 tags:
   - Vision
@@ -32,3 +32,15 @@ A no-code platform provides a user-friendly interface where developers, or even
 As the capabilities of no-code platforms continue to expand, more complex applications can be built without needing to write a single line of code. AI integration and automation are the next frontiers in no-code development, offering even more opportunities for innovation.
 
 The no-code movement is democratizing the app development process, empowering more people to participate in creating the future of software. As these platforms evolve, they will continue to blur the line between developer and non-developer, making app development accessible to everyone.
+
+<Callout>
+  No-code platforms are breaking down the barriers to innovation, allowing
+  anyone with an idea to bring it to life without needing to write a single line
+  of code.
+</Callout>
+
+<Callout type="danger">
+  No-code platforms are breaking down the barriers to innovation, allowing
+  anyone with an idea to bring it to life without needing to write a single line
+  of code.
+</Callout>

frontend/apps/service-site/package.json

@@ -33,6 +33,7 @@
   "devDependencies": {
     "@biomejs/biome": "1.9.3",
     "@packages/configs": "workspace:*",
+    "@packages/mdx-components": "workspace:*",
     "@storybook/nextjs": "^8.3.4",
     "@storybook/react": "^8.3.4",
     "@types/node": "^20",

frontend/apps/service-site/src/app/[lang]/posts/[slug]/page.tsx

@@ -1,6 +1,7 @@
 import type { PageProps } from '@/app/types'
 import { langSchema, langs } from '@/features/i18n'
 import { findPostByLangAndSlug } from '@/features/posts'
+import { MDXContent } from '@packages/mdx-components'
 import { allPosts } from 'contentlayer/generated'
 import { format, parseISO } from 'date-fns'
 import { notFound } from 'next/navigation'
@@ -40,8 +41,7 @@ export default function Page({ params }: PageProps) {
         </time>
         <h1>{post.title}</h1>
       </div>
-      {/* biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation> */}
-      <div dangerouslySetInnerHTML={{ __html: post.body.html }} />
+      <MDXContent code={post.body.code} />
     </article>
   )
 }

frontend/apps/service-site/src/app/[lang]/posts/page.tsx

@@ -1,6 +1,7 @@
 import type { PageProps } from '@/app/types'
 import { getTranslation, langSchema, langs } from '@/features/i18n'
 import { filterPostsByLang } from '@/features/posts'
+import { MDXContent } from '@packages/mdx-components'
 import type { Post } from 'contentlayer/generated'
 import { compareDesc, format, parseISO } from 'date-fns'
 import Link from 'next/link'
@@ -15,8 +16,7 @@ function PostCard(post: Post) {
       <time dateTime={post.date}>
         {format(parseISO(post.date), 'LLLL d, yyyy')}
       </time>
-      {/* biome-ignore lint/security/noDangerouslySetInnerHtml: No problem, as it is only via Markdown written by in-house members. */}
-      <div dangerouslySetInnerHTML={{ __html: post.body.html }} />
+      <MDXContent code={post.body.code} />
     </div>
   )
 }

frontend/apps/service-site/src/app/posts/[slug]/page.tsx

@@ -1,6 +1,7 @@
 import type { PageProps } from '@/app/types'
 import { fallbackLang } from '@/features/i18n'
 import { findPostByLangAndSlug } from '@/features/posts'
+import { MDXContent } from '@packages/mdx-components'
 import { allPosts } from 'contentlayer/generated'
 import { format, parseISO } from 'date-fns'
 import { notFound } from 'next/navigation'
@@ -30,14 +31,14 @@ export default function Page({ params }: PageProps) {
 
   return (
     <article>
+      {/* <Callout /> */}
       <div>
         <time dateTime={post.date}>
           {format(parseISO(post.date), 'LLLL d, yyyy')}
         </time>
         <h1>{post.title}</h1>
       </div>
-      {/* biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation> */}
-      <div dangerouslySetInnerHTML={{ __html: post.body.html }} />
+      <MDXContent code={post.body.code} />
     </article>
   )
 }

frontend/apps/service-site/src/app/posts/page.tsx

@@ -1,5 +1,6 @@
 import { fallbackLang, getTranslation } from '@/features/i18n'
 import { filterPostsByLang } from '@/features/posts'
+import { MDXContent } from '@packages/mdx-components'
 import type { Post } from 'contentlayer/generated'
 import { compareDesc, format, parseISO } from 'date-fns'
 import Link from 'next/link'
@@ -13,8 +14,7 @@ function PostCard(post: Post) {
       <time dateTime={post.date}>
         {format(parseISO(post.date), 'LLLL d, yyyy')}
       </time>
-      {/* biome-ignore lint/security/noDangerouslySetInnerHtml: No problem, as it is only via Markdown written by in-house members. */}
-      <div dangerouslySetInnerHTML={{ __html: post.body.html }} />
+      <MDXContent code={post.body.code} />
     </div>
   )
 }

frontend/package.json

@@ -3,15 +3,18 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "dev": "pnpm -F \"service-site\" dev",
+    "dev": "conc -c auto pnpm:dev:*",
+    "dev:service-site": "pnpm -F 'service-site' dev",
+    "dev:mdx-components": "pnpm -F 'mdx-components' dev",
     "lint:packageVersion": "syncpack list-mismatches",
     "service-site": "pnpm -F \"service-site\"",
     "gen:turbo": "turbo gen"
   },
   "packageManager": "[email protected]+sha512.0a203ffaed5a3f63242cd064c8fb5892366c103e328079318f78062f24ea8c9d50bc6a47aa3567cabefd824d170e78fa2745ed1f16b132e16436146b7688f19b",
   "devDependencies": {
+    "concurrently": "^9.0.1",
     "syncpack": "^13.0.0",
     "turbo": "^2.1.2",
     "@turbo/gen": "^2.1.2"
   }
-}
+}

frontend/packages/mdx-components/.gitignore

@@ -0,0 +1,5 @@
+# build
+dist
+
+# typed-css-modules
+*.css.d.ts

frontend/packages/mdx-components/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@packages/mdx-components",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "files": [
+    "src"
+  ],
+  "main": "./src/index.ts",
+  "scripts": {
+    "dev": "conc -c auto pnpm:dev:*",
+    "dev:css": "tcm src --watch",
+    "lint": "conc -c auto pnpm:lint:*",
+    "lint:biome": "biome check .",
+    "lint:tsc": "tsc --noEmit",
+    "fmt": "conc -c auto pnpm:fmt:*",
+    "fmt:biome": "biome check --write --unsafe ."
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "next-contentlayer": "^0.3.4",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.9.3",
+    "@packages/configs": "workspace:*",
+    "@types/mdx": "^2.0.13",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "concurrently": "^9.0.1",
+    "typed-css-modules": "^0.9.1",
+    "typescript": "^5"
+  }
+}

frontend/packages/mdx-components/src/Callout/Callout.module.css

@@ -0,0 +1,11 @@
+.wrapper {
+  width: 100%;
+  padding: var(--spacing-4, 1rem);
+  color: var(--s-callout-s-default-text, #bebfc1);
+  background: var(--s-callout-s-default-background, rgba(255, 255, 255, 0.05));
+}
+
+.danger {
+  color: var(--s-callout-s-danger-text, #ea928e);
+  background: var(--s-callout-s-danger-background, rgba(247, 80, 73, 0.1));
+}

frontend/packages/mdx-components/src/Callout/Callout.tsx

@@ -0,0 +1,22 @@
+import clsx from 'clsx'
+import type { FC, PropsWithChildren } from 'react'
+import styles from './Callout.module.css'
+
+type Props = {
+  type?: 'default' | 'danger'
+}
+
+export const Callout: FC<PropsWithChildren<Props>> = ({
+  type = 'default',
+  children,
+}) => {
+  return (
+    <div
+      className={clsx(styles.wrapper, {
+        [styles.danger]: type === 'danger',
+      })}
+    >
+      {children}
+    </div>
+  )
+}

frontend/packages/mdx-components/src/Callout/index.ts

@@ -0,0 +1 @@
+export * from './Callout'

frontend/packages/mdx-components/src/MDXContent.tsx

@@ -0,0 +1,18 @@
+import type { MDXComponents } from 'mdx/types'
+import { useMDXComponent } from 'next-contentlayer/hooks'
+import type { FC } from 'react'
+import { Callout } from './Callout'
+
+const mdxComponents: MDXComponents = {
+  Callout: (props) => <Callout {...props} />,
+}
+
+type Props = {
+  code: string
+}
+
+export const MDXContent: FC<Props> = ({ code }) => {
+  const Content = useMDXComponent(code)
+
+  return <Content components={mdxComponents} />
+}

frontend/packages/mdx-components/src/index.ts

@@ -0,0 +1 @@
+export * from './MDXContent'

frontend/packages/mdx-components/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
+}