From a1841c8d7073ec4b7f586b9c7494fc8ba660ef04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9E=84=EC=84=B1=ED=98=B8=20=28=EC=82=BC=EB=B0=94=29?=
 <70130721+sungh0lim@users.noreply.github.com>
Date: Thu, 28 Nov 2024 13:08:22 +0900
Subject: [PATCH] docs: format homepage desc to code (#1377)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Overview

- Add codeblock(`<code>`) to homepage description.

### AS-IS

<img width="1492" alt="스크린샷 2024-11-27 오전 10 10 33"
src="https://github.com/user-attachments/assets/5d577a29-515f-49a0-97cf-f1df329c8d50">

### TO-BE

<img width="1441" alt="스크린샷 2024-11-27 오전 10 10 46"
src="https://github.com/user-attachments/assets/d3b4a530-054e-4884-8648-1d6f44114fc4">

<!--
    A clear and concise description of what this pr is about.
 -->

## PR Checklist

- [ ] I did below actions if need

1. I read the [Contributing
Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md)
2. I added documents and tests.

Co-authored-by: sungho.lim <sungho.lim@sungholim-Macbook.local>
---
 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: '서버 사이드 렌더링에서도 쉽게',