From 2f0d3be01ecc890d08b0a23591ff53fc3c6b4d4a Mon Sep 17 00:00:00 2001
From: "sungho.lim" <sungho.lim@sungholim-Macbook.local>
Date: Wed, 27 Nov 2024 10:20:36 +0900
Subject: [PATCH] docs: format homepage desc to code

---
 docs/suspensive.org/src/components/HomePage.tsx | 15 ++++++++++++++-
 docs/suspensive.org/src/pages/en/index.mdx      |  4 ++--
 docs/suspensive.org/src/pages/ko/index.mdx      |  4 ++--
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/docs/suspensive.org/src/components/HomePage.tsx b/docs/suspensive.org/src/components/HomePage.tsx
index a2808a73a..98e7cf6f7 100644
--- a/docs/suspensive.org/src/components/HomePage.tsx
+++ b/docs/suspensive.org/src/components/HomePage.tsx
@@ -3,6 +3,16 @@ import Image from 'next/image'
 import { useRouter } from 'nextra/hooks'
 import { Link } from 'nextra-theme-docs'
 
+const CodeBlockClassName = 'nextra-code'
+
+const escapeHtml = (text: string) =>
+  text.replace(/</g, '&lt;').replace(/>/g, '&gt;')
+
+const backtickToCodeBlock = (text: string) =>
+  text.replace(/`([^`]+)`/g, `<code class="${CodeBlockClassName}">$1</code>`)
+
+const formatCodeBlocks = (desc: string) => backtickToCodeBlock(escapeHtml(desc))
+
 export const HomePage = ({
   title,
   description,
@@ -54,7 +64,10 @@ export const HomePage = ({
             key={title}
           >
             <div className="text-xl font-bold">{title}</div>
-            <p className="text-lg">{desc}</p>
+            <p
+              className="text-lg"
+              dangerouslySetInnerHTML={{ __html: formatCodeBlocks(desc) }}
+            ></p>
           </div>
         ))}
       </div>
diff --git a/docs/suspensive.org/src/pages/en/index.mdx b/docs/suspensive.org/src/pages/en/index.mdx
index c29bf63d2..bf32e55aa 100644
--- a/docs/suspensive.org/src/pages/en/index.mdx
+++ b/docs/suspensive.org/src/pages/en/index.mdx
@@ -8,11 +8,11 @@ import { HomePage, Scrollycoding } from '@/components'
   items={[
     {
       title: 'All Declarative APIs ready',
-      desc: '<Suspense/>, <ErrorBoundary/>, <ErrorBoundaryGroup/>, etc. are provided. Use them easily without any efforts.',
+      desc: '`<Suspense/>`, `<ErrorBoundary/>`, `<ErrorBoundaryGroup/>`, etc. are provided. Use them easily without any efforts.',
     },
     {
       title: 'Zero peer dependency, Only React',
-      desc: "It is simply extensions of react's concepts. Named friendly with originals like just <Suspense/>, <ErrorBoundary/>, <ErrorBoundaryGroup/>.",
+      desc: "It is simply extensions of react's concepts. Named friendly with originals like just `<Suspense/>`, `<ErrorBoundary/>`, `<ErrorBoundaryGroup/>`.",
     },
     {
       title: 'Suspense in SSR easily',
diff --git a/docs/suspensive.org/src/pages/ko/index.mdx b/docs/suspensive.org/src/pages/ko/index.mdx
index 372a60b67..898ed9019 100644
--- a/docs/suspensive.org/src/pages/ko/index.mdx
+++ b/docs/suspensive.org/src/pages/ko/index.mdx
@@ -8,11 +8,11 @@ import { HomePage, Scrollycoding } from '@/components'
   items={[
     {
       title: '모든 선언적 API를 제공',
-      desc: '<Suspense/>, <ErrorBoundary/>, <ErrorBoundaryGroup/> 등을 제공합니다. 별 다른 노력없이 쉽게 사용할 수 있습니다.',
+      desc: '`<Suspense/>`, `<ErrorBoundary/>`, `<ErrorBoundaryGroup/>` 등을 제공합니다. 별 다른 노력없이 쉽게 사용할 수 있습니다.',
     },
     {
       title: 'Zero 의존성, 오직 React',
-      desc: '단순히 React의 개념을 확장한 것입니다. <Suspense/>, <ErrorBoundary/>, <ErrorBoundaryGroup/>와 같은 React 개발자에게 친숙한 이름으로 컴포넌트들을 제공합니다.',
+      desc: '단순히 React의 개념을 확장한 것입니다. `<Suspense/>`, `<ErrorBoundary/>`, `<ErrorBoundaryGroup/>`와 같은 React 개발자에게 친숙한 이름으로 컴포넌트들을 제공합니다.',
     },
     {
       title: '서버 사이드 렌더링에서도 쉽게',