docs: format homepage desc to code (#1377)

# 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">  ## 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 <[email protected]>
toss · Nov 28, 2024 · a1841c8 · a1841c8
1 parent 6662e3f
commit a1841c8
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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: '서버 사이드 렌더링에서도 쉽게',