docs: update all intro

toss · Oct 1, 2023 · 1ea083d · 1ea083d · vercel · Oct 1, 2023
1 parent 6def1d9
commit 1ea083d
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 60 deletions.
diff --git a/websites/docs/i18n/ko/code.json b/websites/docs/i18n/ko/code.json
@@ -8,20 +8,20 @@
   "All Declarative Boundaries ready": {
     "message": "모든 선언적 바운더리 제공"
   },
-  "Suspense, ErrorBoundary, AsyncBoundary, ErrorBoundaryGroup is provided. You can use them easily without any efforts": {
-    "message": "Suspense, ErrorBoundary, AsyncBoundary, ErrorBoundaryGroup를 제공합니다. 별 다른 노력없이 쉽게 사용할 수 있습니다"
+  "<Suspense/>, <ErrorBoundary/>, <ErrorBoundaryGroup/>, <AsyncBoundary/>, etc. are provided. Use them easily without any efforts": {
+    "message": "<Suspense/>, <ErrorBoundary/>, <ErrorBoundaryGroup/>, <AsyncBoundary/> 등을 제공합니다. 별 다른 노력없이 쉽게 사용할 수 있습니다"
   },
   "Zero peer dependency, Only React": {
     "message": "Zero 의존성, 오직 React"
   },
-  "It is simply extensions of react's concepts. Named friendly with originals like just Suspense, ErrorBoundary, AsyncBoundary": {
-    "message": "단순히 React의 개념을 확장한 것입니다. Suspense, ErrorBoundary, AsyncBoundary와 같은 React 개발자에게 친숙한 이름으로 컴포넌트들을 제공합니다"
+  "It is simply extensions of react's concepts. Named friendly with originals like just <Suspense/>, <ErrorBoundary/>, <ErrorBoundaryGroup/>, <AsyncBoundary/>": {
+    "message": "단순히 React의 개념을 확장한 것입니다. <Suspense/>, <ErrorBoundary/>, <ErrorBoundaryGroup/>, <AsyncBoundary/>와 같은 React 개발자에게 친숙한 이름으로 컴포넌트들을 제공합니다"
   },
   "Suspense in SSR easily": {
     "message": "서버 사이드 렌더링에서도 쉽게"
   },
-  "Suspensive provide CSROnly mode that make developer can adopt Suspense gradually in Server-side rendering environment": {
-    "message": "Suspensive는 개발자가 서버 사이드 렌더링 환경에서도 Suspense를 점진적으로 채택할 수 있도록 CSROnly 모드를 제공합니다"
+  "Suspensive provide CSROnly mode that make developer can adopt React Suspense gradually in Server-side rendering environment": {
+    "message": "Suspensive는 개발자가 서버 사이드 렌더링 환경에서도 React Suspense를 점진적으로 채택할 수 있도록 CSROnly 모드를 제공합니다"
   },
   "theme.ErrorPageContent.title": {
     "message": "페이지에 오류가 발생하였습니다.",

diff --git a/websites/docs/intro/installation.ko.md b/websites/docs/intro/installation.ko.md
@@ -5,7 +5,7 @@ title: 설치하기
 
 ### npm
 
-@suspensive/react 는 npm에 있습니다. 최신 안정버전을 설치하기 위해 아래 커맨드를 실행하세요
+@suspensive/react는 npm에 있습니다. 최신 안정버전을 설치하기 위해 아래 커맨드를 실행하세요
 
 ```shell
 npm install @suspensive/react

diff --git a/websites/docs/intro/motivation.en.md b/websites/docs/intro/motivation.en.md
@@ -3,34 +3,29 @@ sidebar_position: 1
 title: Motivation
 ---
 
-You may wrap [React's Suspense](https://reactjs.org/docs/react-api.html#reactsuspense), [error-boundary](https://reactjs.org/docs/error-boundaries.html) to use them in your projects. because of below reasons.
+### 1. React Suspense need to avoid Server side rendering sometimes
 
-### 1. Sometimes, Suspense need to avoid SSR under React 18
-
-If you have used React.Suspense in SSR environment like Next.js, you may encounter error like below.
+If you have used React Suspense in SSR environment like Next.js, you may encounter error like below.
 ![Example banner](/img/suspense-in-ssr-error.png)
 
-It's why [Suspense](/docs/react/src/Suspense.i18n) containing CSROnly mode is added in this library.
+It's why [`<Suspense/>` and `<Suspense.CSROnly/>`](/docs/react/src/Suspense.i18n) is added in this library.
 
 ### 2. ErrorBoundary more simply
 
-[bvaughn/react-error-boundary](https://github.com/bvaughn/react-error-boundary) that provide ErrorBoundary is popular library to use React's error-boundary concept declaratively.
-ErrorBoundary of bvaughn/react-error-boundary have fallback props named like FallbackComponent, fallbackRender, fallback.
-
-I want to make ErrorBoundary's interface about fallback more simply like only fallback in ErrorBoundary of @suspensive/react
+[bvaughn/react-error-boundary](https://github.com/bvaughn/react-error-boundary) that provide ErrorBoundary is popular library to use React's error-boundary concept declaratively. ErrorBoundary of bvaughn/react-error-boundary have fallback prop named like FallbackComponent, fallbackRender, fallback. We wanted to use the existing ErrorBoundary's somewhat complex fallback interface in something simpler like @suspensive/react's `<ErrorBoundary/>`.
 
-It's why [ErrorBoundary](/docs/react/src/ErrorBoundary.i18n) is added in this library.
+It's why [`<ErrorBoundary/>`](/docs/react/src/ErrorBoundary.i18n) is added in this library.
 
-### 3. Merging Suspense and ErrorBoundary
+### 3. Resetting multiple `<ErrorBoundary/>`s outside of fallback itself easily
 
-If Promise have pending, not only success also failure need to be treated at once easily.
-so, I want to make a component wrapping Suspense, ErrorBoundary. also CSROnly mode is required to use this component in SSR environment like Next.js
+To reset `<ErrorBoundary/>`, you can use reset method provided by fallback prop of `<ErrorBoundary/>`.
+but If you want to reset multiple `<ErrorBoundary/>`s outside of its fallback, you have to provide new element of resetKeys to props of each `<ErrorBoundary/>`s. but If you use @suspensive/react's `<ErrorBoundaryGroup/>`, You don't need to do this tiresome. `<ErrorBoundaryGroup/>` will reset multiple `<ErrorBoundary/>`s easily.
 
-It's why [AsyncBoundary](/docs/react/src/AsyncBoundary.i18n) containing CSROnly mode is added in this library.
+It's why [`<ErrorBoundaryGroup/>`](/docs/react/src/ErrorBoundaryGroup.i18n) is added in this library.
 
-### 4. Resetting ErrorBoundaries outside of fallback
+### 4. Merging `<Suspense/>` and `<ErrorBoundary/>`
 
-To reset ErrorBoundary, you can use reset, fallback prop of ErrorBoundary.
-but If you want to reset multiple ErrorBoundaries outside of its fallback, you have to provide new element of resetKeys to props of each ErrorBoundaries. but If you use ErrorBoundaryGroup, You don't need to do this tiresome. ErrorBoundaryGroup will reset multiple ErrorBoundary easily.
+If Promise have pending, not only success also failure need to be treated at once easily.
+so, I want to make a component wrapping `<Suspense/>`, `<ErrorBoundary/>` at once. also CSROnly is required to use this component in SSR environment like Next.js
 
-It's why [ErrorBoundaryGroup](/docs/react/src/ErrorBoundaryGroup.i18n) is added in this library.
+It's why [`<AsyncBoundary/>`](/docs/react/src/AsyncBoundary.i18n) is added in this library.
diff --git a/websites/docs/intro/motivation.ko.md b/websites/docs/intro/motivation.ko.md
@@ -3,35 +3,30 @@ sidebar_position: 1
 title: 동기
 ---
 
-React의 [Suspense](https://reactjs.org/docs/react-api.html#reactsuspense)와 [Error Boundary](https://reactjs.org/docs/error-boundaries.html)를 프로젝트에서 사용하기 위해서 이 개념들을 아래와 같은 이유들로 wrapping하게 될 것입니다.
+### 1. React Suspense는 때에 따라 서버사이드 렌더링을 피할 필요가 있습니다.
 
-### 1. Suspense는 React 18버전 이하에서 SSR(Server-side rendering)을 피할 필요가 있습니다.
-
-React.Suspense를 Next.js와 같은 서버사이드 렌더링 환경에서 사용해본 적이 있다면 아마 아래 사진과 같은 에러를 겪게 된적이 있을 겁니다.
+React Suspense를 Next.js와 같은 서버사이드 렌더링 환경에서 사용해본 적이 있다면 아마 종종 아래 사진과 같은 에러를 겪게 된 적이 있을 겁니다.
 ![Example banner](/img/suspense-in-ssr-error.png)
 
-이것이 CSROnly모드가 있는 [Suspense](/docs/react/src/Suspense.i18n)를 이 라이브러리에 추가한 이유입니다.
+이것이 [`<Suspense/>` 와 `<Suspense.CSROnly/>`](/docs/react/src/Suspense.i18n)를 이 라이브러리에 추가한 이유입니다.
 
 ### 2. ErrorBoundary를 더욱 단순하게 사용하고 싶습니다.
 
-[bvaughn/react-error-boundary](https://github.com/bvaughn/react-error-boundary)는 React의 Error Boundary개념을 선언적으로 제공하는 가장 인기있는 라이브러리입니다.
-bvaughn/react-error-boundary의 ErrorBoundary는 fallback prop을 위해 FallbackComponent, fallbackRender, fallback와 같은 다양한 이름으로 이를 제공합니다.
-
-하지만 ErrorBoundary fallback의 interface를 @suspensive/react의 ErrorBoundary와 같이 더 단순하게 사용하고 싶었습니다.
+[bvaughn/react-error-boundary](https://github.com/bvaughn/react-error-boundary)는 React의 Error Boundary개념을 선언적으로 제공하는 인기있는 라이브러리입니다. bvaughn/react-error-boundary의 ErrorBoundary는 fallback prop을 위해 FallbackComponent, fallbackRender, fallback와 같은 다양한 이름으로 이를 제공합니다. 기존 ErrorBoundary의 다소 복잡한 fallback interface를 @suspensive/react의 `<ErrorBoundary/>`와 같이 더 단순하게 사용하고 싶었습니다.
 
-이것이 [ErrorBoundary](/docs/react/src/ErrorBoundary.i18n)를 이 라이브러리에 추가한 이유입니다.
+이것이 [`<ErrorBoundary/>`](/docs/react/src/ErrorBoundary.i18n)를 이 라이브러리에 추가한 이유입니다.
 
-### 3. Suspense와 ErrorBoundary를 합치고 싶습니다.
+### 3. `<ErrorBoundary/>`의 fallback 외부에서 다수의 `<ErrorBoundary/>`를 reset하고 싶습니다.
 
-Promise가 Pending 상태이면 성공뿐만 아니라 실패도 한번에 쉽게 처리할 수 있어야 합니다.
-그래서 Suspense, ErrorBoundary를 래핑하는 컴포넌트를 만들고 싶어집니다. 또한 Next.js와 같은 SSR 환경에서 이 구성 요소를 사용하려면 CSROnly 모드가 필요합니다.
+`<ErrorBoundary/>`를 reset하려면 `<ErrorBoundary/>`의 fallback에 주어지는 reset을 사용하면 됩니다.
 
-이것이 CSROnly모드가 있는 [AsyncBoundary](/docs/react/src/AsyncBoundary.i18n)를 이 라이브러리에 추가한 이유입니다.
+그러나 fallback 외부에서 다수의 `<ErrorBoundary/>`을 reset하려면 각 `<ErrorBoundary/>`의 props인 resetKeys에 새 resetKey를 제공해야 합니다. 하지만 @suspensive/react가 제공하는 `<ErrorBoundaryGroup/>`을 사용하면 이렇게 번거롭게 reset할 필요가 없습니다. `<ErrorBoundaryGroup/>`은 여러 `<ErrorBoundary/>`를 쉽게 재설정합니다.
 
-### 4. ErrorBoundary.fallback의 외부에서 다수의 ErrorBoundary를 reset하고 싶습니다.
+이것이 [`<ErrorBoundaryGroup/>`](/docs/react/src/ErrorBoundaryGroup.i18n)를 이 라이브러리에 추가한 이유입니다.
 
-ErrorBoundary를 reset하려면 ErrorBoundary.fallback 렌더링 시에 주어지는 props의 reset을 사용하면 됩니다.
+### 4. `<Suspense/>`와 `<ErrorBoundary/>`를 합치고 싶습니다.
 
-그러나 fallback 외부에서 다수의 ErrorBoundary을 reset하려면 각 ErrorBoundary의 props인 resetKeys에 새 resetKey를 제공해야 합니다. 하지만 ErrorBoundaryGroup을 사용하면 이렇게 번거롭게 reset할 필요가 없습니다. ErrorBoundaryGroup은 여러 ErrorBoundary를 쉽게 재설정합니다.
+Promise가 Pending 상태이면 성공뿐만 아니라 실패도 한번에 쉽게 처리할 수 있어야 합니다.
+그래서 `<Suspense/>`, `<ErrorBoundary/>`를 한 번에 래핑하는 컴포넌트를 만들고 싶어집니다. 또한 Next.js와 같은 SSR 환경에서 이 컴포넌트를 사용하려면 CSROnly가 필요합니다.
 
-이것이 [ErrorBoundaryGroup](/docs/react/src/ErrorBoundaryGroup.i18n)를 이 라이브러리에 추가한 이유입니다.
+이것이 [`<AsyncBoundary/>`](/docs/react/src/AsyncBoundary.i18n)를 이 라이브러리에 추가한 이유입니다.
diff --git a/websites/docs/intro/related.en.md b/websites/docs/intro/related.en.md
@@ -6,7 +6,7 @@ title: Related Links
 - [React 18 keynote](https://youtu.be/FZ0cG47msEk?t=408)
 - [[Umbrella] Releasing Suspense in facebook/react](https://github.com/facebook/react/issues/13206)
 - [Suspense for Data Fetching (Experimental) in react docs for version 17](https://17.reactjs.org/docs/concurrent-mode-suspense.html)
-- [Pull Request to add ErrorBoundaryGroup in @toss/error-boundary](https://github.com/toss/slash/pull/157)
+- [Pull Request to add `<ErrorBoundaryGroup/>` in @toss/error-boundary](https://github.com/toss/slash/pull/157)
 - [Pull Request to fix useSuspendedQuery in @toss/react-query wrapping react-query v3](https://github.com/toss/slash/pull/73)
 - [Pull Request to remove error-boundary's difficulty because of type of reset's args](https://github.com/toss/slash/pull/178)
 - [Dan Abramov: Beyond React 16 | JSConf Iceland](https://youtu.be/nLF0n9SACd4)
diff --git a/websites/docs/intro/related.ko.md b/websites/docs/intro/related.ko.md
@@ -6,7 +6,7 @@ title: 관련 링크
 - [React 18 keynote](https://youtu.be/FZ0cG47msEk?t=408)
 - [[Umbrella] Releasing Suspense in facebook/react](https://github.com/facebook/react/issues/13206)
 - [Suspense for Data Fetching (Experimental) in react docs for version 17](https://17.reactjs.org/docs/concurrent-mode-suspense.html)
-- [Pull Request to add ErrorBoundaryGroup in @toss/error-boundary](https://github.com/toss/slash/pull/157)
+- [Pull Request to add `<ErrorBoundaryGroup/>` in @toss/error-boundary](https://github.com/toss/slash/pull/157)
 - [Pull Request to fix useSuspendedQuery in @toss/react-query wrapping react-query v3](https://github.com/toss/slash/pull/73)
 - [Pull Request to remove error-boundary's difficulty because of type of reset's args](https://github.com/toss/slash/pull/178)
 - [Dan Abramov: Beyond React 16 | JSConf Iceland](https://youtu.be/nLF0n9SACd4)
diff --git a/websites/docs/intro/visualization.en.md b/websites/docs/intro/visualization.en.md
@@ -3,14 +3,14 @@ sidebar_position: 2
 title: Visualization
 ---
 
-I made [Concepts Visualization](https://visualization.suspensive.org/react) that whoever can understand core concepts of Suspensive(Suspense, ErrorBoundary, AsyncBoundary, ErrorBoundaryGroup) visually. You can interact this site now.
+I made [Concepts Visualization](https://visualization.suspensive.org/react) that whoever can understand core concepts of Suspensive(`<Suspense/>`, `ErrorBoundary/>`, `<ErrorBoundaryGroup/>`, `<AsyncBoundary/>`) visually. You can interact this site now.
 
 ### First, See how boundaries do
 
-1. How [Suspense](/docs/react/src/Suspense.i18n) treat loading and success at once in multiple fetching.
-2. How [ErrorBoundary](/docs/react/src/ErrorBoundary.i18n) treat error at once and how to reset. and what resetKeys do.
-3. How [AsyncBoundary](/docs/react/src/AsyncBoundary.i18n) treat loading, success and error at once.
-4. How [ErrorBoundaryGroup](/docs/react/src/ErrorBoundaryGroup.i18n) reset multiple ErrorBoundaries without using resetKeys easily.
+1. How [`<Suspense/>`](/docs/react/src/Suspense.i18n) treat loading and success at once in multiple fetching.
+2. How [`<ErrorBoundary/>`](/docs/react/src/ErrorBoundary.i18n) treat error at once and how to reset. and what resetKeys do.
+3. How [`<ErrorBoundaryGroup/>`](/docs/react/src/ErrorBoundaryGroup.i18n) reset multiple `<ErrorBoundary/>`s without using resetKeys easily.
+4. How [`<AsyncBoundary/>`](/docs/react/src/AsyncBoundary.i18n) treat loading, success and error at once.
 
 [**🔗 Click here to see Visualization**](https://visualization.suspensive.org/react)
 

diff --git a/websites/docs/intro/visualization.ko.md b/websites/docs/intro/visualization.ko.md
@@ -3,14 +3,14 @@ sidebar_position: 2
 title: 시각화 자료
 ---
 
-Suspensive(Suspense, ErrorBoundary, AsyncBoundary, ErrorBoundaryGroup)의 핵심 개념을 누구나 시각적으로 이해할 수 있도록 [시각화 자료](https://visualization.suspensive.org/react)를 만들었습니다. 지금 바로 이 사이트에 들어갈 수 있습니다.
+Suspensive(`<Suspense/>`, `<ErrorBoundary/>`, `<ErrorBoundaryGroup/>`, `<AsyncBoundary/>`)의 핵심 개념을 누구나 시각적으로 이해할 수 있도록 [시각화 자료](https://visualization.suspensive.org/react)를 만들었습니다. 지금 바로 이 사이트에 들어갈 수 있습니다.
 
 ### 먼저, 각 컴포넌트들이 어떤 일을 하는지 봅시다
 
-1. [Suspense](/docs/react/src/Suspense.i18n)에서 다수의 fetch에서 로딩과 성공을 한 번에 선언적으로 처리하는 방법.
-2. [ErrorBoundary](/docs/react/src/ErrorBoundary.i18n)에서 실패를 한 번에 선언적으로 처리하는 방법과 ErrorBoundary를 reset하는 방법. 그리고 resetKeys가 하는 일.
-3. [AsyncBoundary](/docs/react/src/AsyncBoundary.i18n)에서 로딩, 성공 혹은 실패를 한 번에 처리하는 방법.
-4. [ErrorBoundaryGroup](/docs/react/src/ErrorBoundaryGroup.i18n)이 resetKeys를 사용하지 않고 다수의 ErrorBoundary를 쉽게 재설정하는 방법.
+1. [`<Suspense/>`](/docs/react/src/Suspense.i18n)에서 다수의 fetch에서 로딩과 성공을 한 번에 선언적으로 처리하는 방법.
+2. [`<ErrorBoundary/>`](/docs/react/src/ErrorBoundary.i18n)에서 실패를 한 번에 선언적으로 처리하는 방법과 스스로를 reset하는 방법. 그리고 resetKeys가 하는 일.
+3. [`<ErrorBoundaryGroup/>`](/docs/react/src/ErrorBoundaryGroup.i18n)이 resetKeys를 사용하지 않고 다수의 `<ErrorBoundary/>`를 쉽게 재설정하는 방법.
+4. [`<AsyncBoundary/>`](/docs/react/src/AsyncBoundary.i18n)에서 로딩, 성공 혹은 실패를 한 번에 처리하는 방법.
 
 [**🔗 시각화자료를 보려면 클릭하기**](https://visualization.suspensive.org/react)
 

diff --git a/websites/docs/src/components/HomepageFeatures/index.tsx b/websites/docs/src/components/HomepageFeatures/index.tsx
@@ -13,25 +13,23 @@ const FeatureList: FeatureItem[] = [
     title: <Translate>All Declarative APIs ready</Translate>,
     description: (
       <Translate>
-        Suspense, ErrorBoundary, AsyncBoundary, ErrorBoundaryGroup is provided. You can use them easily without any
-        efforts
+        {`<Suspense/>, <ErrorBoundary/>, <ErrorBoundaryGroup/>, <AsyncBoundary/>, etc. are provided. Use them easily without any efforts`}
       </Translate>
     ),
   },
   {
     title: <Translate>Zero peer dependency, Only React</Translate>,
     description: (
       <Translate>
-        It is simply extensions of react's concepts. Named friendly with originals like just Suspense, ErrorBoundary,
-        AsyncBoundary
+        {`It is simply extensions of react's concepts. Named friendly with originals like just <Suspense/>, <ErrorBoundary/>, <ErrorBoundaryGroup/>, <AsyncBoundary/>`}
       </Translate>
     ),
   },
   {
     title: <Translate>Suspense in SSR easily</Translate>,
     description: (
       <Translate>
-        Suspensive provide CSROnly mode that make developer can adopt Suspense gradually in Server-side rendering
+        Suspensive provide CSROnly mode that make developer can adopt React Suspense gradually in Server-side rendering
         environment
       </Translate>
     ),