diff --git a/docs/components/diagrams/ActivityDiagram.tsx b/docs/components/diagrams/ActivityDiagram.tsx index 032793dc..f99e272c 100644 --- a/docs/components/diagrams/ActivityDiagram.tsx +++ b/docs/components/diagrams/ActivityDiagram.tsx @@ -39,6 +39,7 @@ export const ActivityDiagram = () => ( clip-rule="evenodd" d="M91 14C86.5817 14 83 17.5817 83 22V54C83 58.4183 86.5817 62 91 62H257C261.418 62 265 58.4183 265 54V22C265 17.5817 261.418 14 257 14H91ZM173.953 43H172.281V34.5156H173.953V43ZM173.125 33.2031C172.547 33.2109 172.07 32.7656 172.062 32.2188C172.07 31.6719 172.547 31.2344 173.125 31.2344C173.695 31.2344 174.172 31.6719 174.172 32.2188C174.172 32.7656 173.695 33.2109 173.125 33.2031ZM149.609 40.0156L148.578 43H146.75L150.812 31.6875H152.797L156.875 43H155.047L154.016 40.0156H149.609ZM151.766 33.75L150.102 38.5781H153.516L151.844 33.75H151.766ZM165.109 40.3125C164.93 41.9609 163.625 43.1719 161.625 43.1719C159.148 43.1719 157.648 41.3516 157.656 38.7969C157.648 36.2109 159.203 34.4062 161.594 34.4062C163.531 34.4062 164.93 35.5469 165.109 37.2656H163.484C163.312 36.4688 162.68 35.8047 161.625 35.7969C160.25 35.8047 159.328 36.9453 159.328 38.75C159.328 40.6094 160.227 41.7578 161.625 41.75C162.57 41.7578 163.273 41.2266 163.484 40.3125H165.109ZM170.656 34.5156H168.922V32.4844H167.266V34.5156H166.016V35.8438H167.266V40.8438C167.25 42.3906 168.43 43.1094 169.734 43.1094C170.195 43.1094 170.555 43.0781 170.781 43.0469V41.5938C170.547 41.6172 170.18 41.6406 169.938 41.6406C169.398 41.6328 168.93 41.4609 168.922 40.5V35.8438H170.656V34.5156ZM183.266 34.5156H181.469L179.328 41.0312H179.25L177.109 34.5156H175.312L178.391 43H180.188L183.266 34.5156ZM186.297 43H184.625V34.5156H186.297V43ZM185.469 33.2031C184.891 33.2109 184.414 32.7656 184.406 32.2188C184.414 31.6719 184.891 31.2344 185.469 31.2344C186.039 31.2344 186.516 31.6719 186.516 32.2188C186.516 32.7656 186.039 33.2109 185.469 33.2031ZM192.297 34.5156H190.562V32.4844H188.906V34.5156H187.656V35.8438H188.906V40.8438C188.891 42.3906 190.07 43.1094 191.375 43.1094C191.836 43.1094 192.195 43.0781 192.422 43.0469V41.5938C192.188 41.6172 191.82 41.6406 191.578 41.6406C191.039 41.6328 190.57 41.4609 190.562 40.5V35.8438H192.297V34.5156ZM197.703 44.125C197.211 45.4688 196.352 46.1797 194.953 46.1875C194.609 46.1797 194.273 46.1719 194.062 46.1406V44.75C194.214 44.7626 194.457 44.7701 194.668 44.7767L194.812 44.7812C195.328 44.7734 195.758 44.7422 196.156 43.6719L196.359 43.1094L193.25 34.5156H195.031L197.172 41.0938H197.266L199.406 34.5156H201.203L197.703 44.125Z" fill="currentColor" + className="text-primary" /> ( diff --git a/docs/components/diagrams/EffectHookDiagram.tsx b/docs/components/diagrams/EffectHookDiagram.tsx index 885a9c57..0f6cd745 100644 --- a/docs/components/diagrams/EffectHookDiagram.tsx +++ b/docs/components/diagrams/EffectHookDiagram.tsx @@ -39,6 +39,7 @@ export const EffectHookDiagram = () => ( clip-rule="evenodd" d="M339 129C366.614 129 389 106.614 389 79C389 51.3858 366.614 29 339 29C311.386 29 289 51.3858 289 79C289 106.614 311.386 129 339 129ZM331.578 76.375H329.844C329.57 74.9141 328.359 74.1016 326.922 74.1094C324.969 74.1016 323.523 75.6016 323.516 78.3438C323.523 81.1016 324.977 82.5859 326.922 82.5781C328.344 82.5859 329.547 81.7891 329.844 80.3438L331.578 80.3594C331.219 82.5938 329.398 84.1562 326.906 84.1562C323.961 84.1562 321.812 81.9609 321.812 78.3438C321.812 74.7266 323.977 72.5312 326.906 72.5312C329.297 72.5312 331.195 73.9453 331.578 76.375ZM340.844 79.7969C340.844 82.4219 339.281 84.1719 336.891 84.1719C334.484 84.1719 332.914 82.4219 332.922 79.7969C332.914 77.1562 334.484 75.4062 336.891 75.4062C339.281 75.4062 340.844 77.1562 340.844 79.7969ZM336.891 76.7812C335.336 76.7891 334.594 78.1719 334.594 79.7969C334.594 81.4141 335.336 82.7812 336.891 82.7812C338.422 82.7812 339.156 81.4141 339.156 79.7969C339.156 78.1719 338.422 76.7891 336.891 76.7812ZM342.484 84H344.156V78.8281C344.156 77.7188 345.016 76.9141 346.172 76.9219C346.516 76.9141 346.906 76.9844 347.047 77.0156V75.4219C346.875 75.4062 346.547 75.3828 346.344 75.3906C345.352 75.3828 344.5 75.9531 344.188 76.8594H344.094V75.5156H342.484V84ZM355.219 81.875C354.844 83.25 353.539 84.1719 351.672 84.1719C349.172 84.1719 347.633 82.4453 347.641 79.8125C347.633 77.2031 349.195 75.4062 351.562 75.4062C353.492 75.4062 355.328 76.6016 355.328 79.6719V80.2656H349.297C349.344 81.8828 350.297 82.7969 351.688 82.7969C352.633 82.7969 353.25 82.3906 353.531 81.875H355.219ZM351.578 76.7812C350.242 76.7734 349.375 77.8203 349.305 79.0156H353.688C353.688 77.7266 352.852 76.7734 351.578 76.7812Z" fill="currentColor" + className="text-primary" /> ( ( ); diff --git a/docs/components/diagrams/StepDiagram.tsx b/docs/components/diagrams/StepDiagram.tsx index 96d084ad..12f550f5 100644 --- a/docs/components/diagrams/StepDiagram.tsx +++ b/docs/components/diagrams/StepDiagram.tsx @@ -70,6 +70,7 @@ export const StepDiagram = () => ( clip-rule="evenodd" d="M111 23C106.582 23 103 26.5817 103 31V38C103 42.4183 106.582 46 111 46H223C227.418 46 231 42.4183 231 38V31C231 26.5817 227.418 23 223 23H111ZM159.125 31.6719H157.453C157.344 30.6172 156.422 30.0156 155.125 30.0156C153.742 30.0156 152.867 30.7266 152.859 31.6875C152.859 32.7578 154.023 33.1797 154.922 33.3906L156.016 33.6875C157.461 34.0391 159.273 34.8281 159.281 36.875C159.273 38.7891 157.75 40.1875 155.078 40.1875C152.547 40.1875 150.953 38.9219 150.844 36.8594H152.562C152.664 38.0938 153.758 38.6797 155.078 38.6875C156.523 38.6797 157.57 37.9531 157.578 36.8438C157.57 35.8594 156.633 35.4609 155.438 35.1406L154.094 34.7812C152.273 34.2812 151.148 33.3594 151.141 31.7812C151.148 29.8281 152.883 28.5312 155.172 28.5312C157.469 28.5312 159.07 29.8438 159.125 31.6719ZM163.219 31.5156H164.953V32.8438H163.219V37.5C163.227 38.4609 163.695 38.6328 164.234 38.6406C164.477 38.6406 164.844 38.6172 165.078 38.5938V40.0469C164.852 40.0781 164.492 40.1094 164.031 40.1094C162.727 40.1094 161.547 39.3906 161.562 37.8438V32.8438H160.312V31.5156H161.562V29.4844H163.219V31.5156ZM170.141 40.1719C172.008 40.1719 173.312 39.25 173.688 37.875H172C171.719 38.3906 171.102 38.7969 170.156 38.7969C168.766 38.7969 167.812 37.8828 167.766 36.2656H173.797V35.6719C173.797 32.6016 171.961 31.4062 170.031 31.4062C167.664 31.4062 166.102 33.2031 166.109 35.8125C166.102 38.4453 167.641 40.1719 170.141 40.1719ZM167.773 35.0156C167.844 33.8203 168.711 32.7734 170.047 32.7812C171.32 32.7734 172.156 33.7266 172.156 35.0156H167.773ZM177.125 43.1875H175.453V31.5156H177.078V32.8906H177.219C177.516 32.3594 178.086 31.4062 179.656 31.4062C181.711 31.4062 183.219 33.0156 183.219 35.7812C183.219 38.5156 181.727 40.1641 179.672 40.1719C178.133 40.1641 177.523 39.2266 177.219 38.6719H177.125V43.1875ZM179.297 32.8281C177.859 32.8203 177.094 33.9844 177.094 35.75C177.094 37.5312 177.875 38.7422 179.297 38.75C180.766 38.7422 181.531 37.4531 181.531 35.75C181.531 34.0781 180.789 32.8203 179.297 32.8281Z" fill="currentColor" + className="text-primary" /> ( diff --git a/docs/components/diagrams/TransitioningStackDiagram.tsx b/docs/components/diagrams/TransitioningStackDiagram.tsx index 45379f10..2960a965 100644 --- a/docs/components/diagrams/TransitioningStackDiagram.tsx +++ b/docs/components/diagrams/TransitioningStackDiagram.tsx @@ -1,121 +1,143 @@ -export const TransitioningStackDiagram = () => ( -
- - - - - - - - - - - - - - - - - - - - - - -
-); +import { type Lang, getLocaleBranch } from "../../utils/locale"; + +export const TransitioningStackDiagram = ({ lang = "en" }: { lang?: Lang }) => { + const getLocaleText = getLocaleBranch(lang); + return ( +
+
+ + {getLocaleText( + "그림 1. 새 액티비티가 추가되는 모습", + "Figure 1. How a new activity is added", + )} + + + {getLocaleText( + "그림 2. 기존 액티비티가 제거되는 모습", + "Figure 2. How an activity is removed", + )} + +
+ + + + + + + + + + + + + + + + + + + + +
+ ); +}; diff --git a/docs/components/index-page/index.tsx b/docs/components/index-page/index.tsx index 37214a31..e39e2f46 100644 --- a/docs/components/index-page/index.tsx +++ b/docs/components/index-page/index.tsx @@ -3,6 +3,7 @@ import Image from "next/image"; import Link from "next/link"; import { useSimpleReveal } from "simple-reveal"; import Ellipse from "../../assets/gradient-ellipse.webp"; +import { getLocaleBranch } from "../../utils/locale"; import { Demo } from "../Demo"; import { Github } from "./Github"; import { Tile } from "./Tile"; @@ -13,8 +14,7 @@ export function IndexPage({ lang = "ko" }: { lang: "ko" | "en" }) { initialTransform: "translate3d(0, 1rem, 1rem);", duration: 1000, }); - - const getLocaleText = (ko: string, en: string) => (lang === "ko" ? ko : en); + const getLocaleText = getLocaleBranch(lang); return (
@@ -66,7 +66,7 @@ export function IndexPage({ lang = "ko" }: { lang: "ko" | "en" }) { -
+
"

@@ -120,7 +120,7 @@ export function IndexPage({ lang = "ko" }: { lang: "ko" | "en" }) {

-
+

Driven by the Community

diff --git a/docs/pages/docs/get-started/activity.ko.mdx b/docs/pages/docs/get-started/activity.ko.mdx index be605f67..b1a8a3d2 100644 --- a/docs/pages/docs/get-started/activity.ko.mdx +++ b/docs/pages/docs/get-started/activity.ko.mdx @@ -11,7 +11,7 @@ import { APITable } from "../../../components/APITable"; | | | | | --------------- | -------------------------------------------------------- | --------------------------------------------------------- | -| id | `string` | 화면에 활성화되는 액티비티마다 가지는 고유한 ID 값이 | +| id | `string` | 활성화되는 액티비티마다 가지는 고유한 ID 값 | | name | `string` | 등록된 액티비티의 이름 | | transitionState | `enter-active`, `enter-done`, `exit-active`, `exit-done` | 현재 액티비티의 전환 상태 | diff --git a/docs/pages/docs/get-started/getting-state.ko.mdx b/docs/pages/docs/get-started/getting-state.ko.mdx index 7dcbf097..a3995987 100644 --- a/docs/pages/docs/get-started/getting-state.ko.mdx +++ b/docs/pages/docs/get-started/getting-state.ko.mdx @@ -9,7 +9,7 @@ import { APITable } from "../../../components/APITable"; **Stackflow**의 내부 상태는 한마디로 표현하면, **전환 상태**를 가진 **스택** 자료구조에요. - + `activities` 필드로 접근할 수 있는 액티비티는 기본적인 존재와 관련된 정보 이외에, ID, 이름, 그리고 현재 시점의 전환 상태 등의 상태값들을 가져요. 이러한 상태값들을 이리저리 활용해 `@stackflow/plugin-basic-ui`가 만들어졌답니다. (여러분도 충분히 만들 수 있어요!) diff --git a/docs/utils/locale.ts b/docs/utils/locale.ts new file mode 100644 index 00000000..010a68a6 --- /dev/null +++ b/docs/utils/locale.ts @@ -0,0 +1,4 @@ +export type Lang = "ko" | "en"; + +export const getLocaleBranch = (lang: Lang) => (ko: string, en: string) => + lang === "ko" ? ko : en;