feat(docs): Persist and sync code block tab selections #14630
Conversation
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
Add kea-based persistence for MultiLanguage code block tab selections. When a user selects a preference (e.g. pnpm instead of npm, or Python instead of Node), that preference now: - Persists across page refreshes via localStorage - Syncs in real-time across all code blocks with the same syncKey This is opt-in via the syncKey prop on MultiLanguage components. Sync key categories: - install: package managers (npm/yarn/pnpm) - sdk-backend: backend SDKs (node/python/php/ruby/go/java) - sdk-client: frontend SDKs (js-web/ios/android/react-native) - sdk: mixed frontend+backend SDK examples - api: curl/API examples - llm: LLM analytics (python/typescript) - typescript: JS/TS file examples
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
- Remove syncKey="sdk" from 5 files (mixed frontend+backend doesn't make sense to sync) - Remove syncKey="typescript" from 2 files (too niche, only 3 uses) - Add fallback logic: if stored preference doesn't match any option, default to first Final syncKeys (5 total): - install (4): package managers - sdk-backend (7): server-side SDKs - sdk-client (7): client-side SDKs - api (10): curl/API examples - llm (12): LLM analytics
- Change syncKey='llm' to syncKey='sdk-backend' in 6 LLM analytics files - Replace typescript/javascript language identifiers with node - Add syncKey='sdk-backend' to helicone integration file - Reorder code blocks to show node first for consistency This reduces the number of sync keys from 5 to 4: - sdk-backend: 19 uses - api: 10 uses - sdk-client: 7 uses - install: 4 uses
The kea-localstorage plugin requires logic to have a unique path when using persist: true. Without it, the error '[KEA] Logic must have a unique path to persist reducers' is thrown.
- Log when SyncedCodeBlock renders with preferences - Log when handleChange is called - Fix useEffect to trigger on preferences[syncKey] changes - This should help diagnose why stored preferences aren't being restored
The CodeBlock component has internal selectedIndex state that wasn't being synced with the currentLanguage prop. This caused the tabs to show the wrong language as selected even when currentLanguage state was correct. Added useEffect to sync selectedIndex whenever currentLanguage changes.
Fixed issue where multiple code blocks with the same syncKey on the same page weren't syncing when one was changed. The useEffect now properly depends on storedPreference, languages, and currentLanguage to trigger updates when any code block with the same syncKey changes. Also removed all debug console.log statements.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Changes
Adds persistent, synchronized tab selections for code blocks in documentation. When a user selects a preference (e.g. pnpm instead of npm, or Python instead of Node), that preference now:
syncKeyon the pageThis is opt-in via the
syncKeyprop onMultiLanguagecomponents.How it works:
codeBlockLogic.tsuses kea with{ persist: true }for automatic localStorage persistenceMdxCodeBlockconditionally rendersSyncedCodeBlockwhensyncKeyis providedsyncKeystay in sync across the pageSync keys used:
install- package managers (npm/yarn/pnpm) - 4 code blockssdk-backend- backend SDKs (node/python/php/ruby/go/java) - 19 code blockssdk-client- frontend SDKs (js-web/ios/android/react-native) - 7 code blocksapi- curl/API examples - 10 code blocksTest plan:
Checklist
vercel.json