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 \"@/libs/contentlayer\"`"
+          }
+        ]
+      }
+    ]
+  }
 }

frontend/apps/service-site/.gitignore

@@ -39,4 +39,7 @@ next-env.d.ts
 .contentlayer
 
 # Storybook
-storybook-static
+storybook-static
+
+# typed-css-modules
+*.css.d.ts

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 },
@@ -44,4 +45,7 @@ export const Post = defineDocumentType(() => ({
   },
 }))
 
-export default makeSource({ contentDirPath: 'contents', documentTypes: [Post] })
+export default makeSource({
+  contentDirPath: 'src/contents',
+  documentTypes: [Post],
+})

frontend/apps/service-site/package.json

@@ -5,8 +5,11 @@
   "scripts": {
     "dev": "conc -c auto pnpm:dev:*",
     "dev:next": "next dev",
+    "dev:css": "tcm src --watch",
     "dev:storybook": "storybook dev -h localhost -p 6006 --no-open",
-    "build": "next build",
+    "gen": "conc -c auto pnpm:gen:*",
+    "gen:css": "tcm src",
+    "build": "pnpm gen && next build",
     "build:storybook": "storybook build",
     "start": "next start",
     "lint": "conc -c auto pnpm:lint:*",
@@ -17,6 +20,7 @@
     "fmt:biome": "biome check --write --unsafe ."
   },
   "dependencies": {
+    "clsx": "^2.1.1",
     "contentlayer": "^0.3.4",
     "date-fns": "^4.1.0",
     "destyle.css": "^4.0.1",
@@ -35,6 +39,7 @@
     "@packages/configs": "workspace:*",
     "@storybook/nextjs": "^8.3.4",
     "@storybook/react": "^8.3.4",
+    "@types/mdx": "^2.0.13",
     "@tsconfig/next": "^2.0.3",
     "@types/node": "^20",
     "@types/react": "^18",
@@ -43,6 +48,7 @@
     "eslint": "^8",
     "eslint-config-next": "14.2.13",
     "storybook": "^8.3.4",
+    "typed-css-modules": "^0.9.1",
     "typescript": "^5"
   }
 }

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 '@/libs/contentlayer'
 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 '@/libs/contentlayer'
 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 '@/libs/contentlayer'
 import { allPosts } from 'contentlayer/generated'
 import { format, parseISO } from 'date-fns'
 import { notFound } from 'next/navigation'
@@ -36,8 +37,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/posts/page.tsx

@@ -1,5 +1,6 @@
 import { fallbackLang, getTranslation } from '@/features/i18n'
 import { filterPostsByLang } from '@/features/posts'
+import { MDXContent } from '@/libs/contentlayer'
 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/apps/service-site/src/components/Footer/Footer.tsx

@@ -6,7 +6,7 @@ export const Footer = () => {
   return (
     <footer className={styles.footer}>
       <div className={styles.logoContainer}>
-        <Link href="/" className={styles.logo}>
+        <Link href="/">
           <LiamLogoMark />
         </Link>
         <p className={styles.text}>&copy; 2024 Liam</p>

frontend/apps/service-site/src/components/TopCards/TopCards.tsx

@@ -18,7 +18,7 @@ export function TopCards({ posts, lang }: TopCardsProps) {
         >
           <div className={styles.topCard}>
             {post.image && (
-              <div className={styles.imageContainer}>
+              <div>
                 <Image
                   src={post.image}
                   alt={`Image of ${post.title}`}

frontend/apps/service-site/src/contents/components/Callout/Callout.module.css

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

frontend/apps/service-site/src/contents/components/Callout/Callout.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Callout } from './'
+
+const StoryComponent = () => {
+  return (
+    <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>
+  )
+}
+
+const meta = {
+  component: StoryComponent,
+} satisfies Meta<typeof StoryComponent>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

frontend/apps/service-site/src/contents/components/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/apps/service-site/src/contents/components/Callout/index.ts

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

frontend/apps/service-site/src/contents/components/index.ts

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

frontend/apps/service-site/contents/posts/2/en.md → frontend/apps/service-site/src/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/src/libs/contentlayer/MDXContent.tsx

@@ -0,0 +1,19 @@
+import { Callout } from '@/contents/components'
+import type { MDXComponents } from 'mdx/types'
+// eslint-disable-next-line no-restricted-imports
+import { useMDXComponent } from 'next-contentlayer/hooks'
+import type { FC } from 'react'
+
+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/apps/service-site/src/libs/contentlayer/index.ts

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

frontend/package.json

@@ -10,8 +10,9 @@
   },
   "packageManager": "[email protected]+sha512.0a203ffaed5a3f63242cd064c8fb5892366c103e328079318f78062f24ea8c9d50bc6a47aa3567cabefd824d170e78fa2745ed1f16b132e16436146b7688f19b",
   "devDependencies": {
+    "concurrently": "^9.0.1",
     "syncpack": "^13.0.0",
     "turbo": "^2.1.2",
     "@turbo/gen": "^2.1.2"
   }
-}
+}