feat(site): 브라우저 언어 감지 — 한국어가 아니면 영문 - #34
Merged
Merged
Conversation
The landing page was Korean-only while the package targets a global npm audience, and the header's 'English' link just bounced people to the GitHub README. Now the page itself adapts. Language resolution runs in <head>, before anything paints: an explicit choice (localStorage) wins, then ?lang=, then the browser — /^ko/ keeps Korean, everything else gets English. The header link became a real toggle that persists the choice. Korean stays in the markup as the single source of truth and English is an overlay dictionary keyed by data-i18n (68 markers, 55 entries). A missing key falls back to the Korean rather than rendering empty, so a partial translation degrades to readable. Originals are snapshotted in a WeakMap on first apply, which is what makes switching back lossless. Demo copy is translated too, not just the chrome: PRESETS became buildPresets(lang) over a ko/en source, and __setDemoLang re-applies the active preset on switch so the editors never hold stale-language content. Verified in a browser, not just by grep: - ?lang=en leaves zero Korean in any data-i18n element - toggling round-trips text, demo content, <html lang>, and the toggle label, and persists to localStorage - navigator.language stubbed to ko-KR resolves ko; de-DE resolves en - the ruler still works after two switches (keyboard drag moved a paragraph 60px -> 70px), so re-injecting content doesn't break the editor/ruler binding - no new console errors (the one 404 is a pre-existing missing favicon)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
랜딩 페이지가 한국어 전용이었는데 패키지는 글로벌 npm 사용자를 대상으로 합니다. 헤더의 "English" 링크도 GitHub README로 튕겨낼 뿐이었습니다. 이제 페이지 자체가 적응합니다.
동작
언어 결정은
<head>에서 렌더 전에 끝냅니다 — 명시적 선택(localStorage) →?lang=→ 브라우저(/^ko/면 한국어, 그 외 영문). 헤더 링크는 선택을 저장하는 실제 토글이 됐습니다.구조
한국어는 마크업에 그대로 두어 단일 진실 원천으로 삼고, 영문은
data-i18n키 기반 오버레이 사전입니다(마커 68개, 항목 55개). 키가 없으면 빈 칸이 아니라 한국어로 폴백하므로 번역이 미완이어도 읽을 수 있는 상태로 degrade합니다. 최초 적용 시 원문을 WeakMap에 스냅샷해서 되돌리기가 무손실입니다.데모 콘텐츠도 번역합니다 —
PRESETS를 ko/en 소스 기반buildPresets(lang)으로 바꾸고,__setDemoLang이 전환 시 활성 프리셋을 다시 적용해 에디터에 이전 언어가 남지 않습니다.검증 (grep이 아니라 브라우저 실측)
?lang=en에서data-i18n요소에 남은 한글 0개<html lang>·토글 라벨을 왕복 전환하고 localStorage에 저장navigator.language를 ko-KR로 스텁 → ko, de-DE → en (요구사항 자체를 검증)별건 (미처리)
favicon이 없어 404가 납니다. 이번 변경과 무관한 기존 사항이라 범위에 넣지 않았습니다.