i18n support for sicp #3133
i18n support for sicp #3133
Conversation
now lang in url only changes the lang in local storage and redirects to the original page
…r fetching the toc.json
There was a problem hiding this comment.
Pull Request Overview
This PR introduces internationalization support for the SICP pages by reading language parameters from the URL and local storage, fetching language-specific content, and adding a toggle UI to switch languages.
- Added a language segment to the SICP route configuration
- Refactored the table of contents component to fetch TOC JSON per language with loading and fallback
- Enhanced the main SICP page to initialize, persist, and toggle language, and to redirect based on the language parameter
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| src/routes/routerConfig.tsx | Added :param_lang to the SICP route and updated route definitions |
| src/pages/sicp/subcomponents/SicpToc.tsx | Refactored TOC into a loading/fallback pattern with language fetch |
| src/pages/sicp/Sicp.tsx | Handled URL/local-storage language, added toggle button, and redirects |
| src/features/sicp/utils/SicpUtils.ts | Introduced language storage helpers and default-language constants |
| @@ -50,6 +50,7 @@ const commonChildrenRoutes: RouteObject[] = [ | |||
| { path: 'contributors', lazy: Contributors }, | |||
| { path: 'callback/github', lazy: GitHubCallback }, | |||
| { path: 'sicpjs/:section?', lazy: Sicp }, | |||
| { path: 'sicpjs/:param_lang/:section?', lazy: Sicp }, | |||
There was a problem hiding this comment.
The route parameter is defined as :param_lang, but in useParams you destructure paramLang. These names must match exactly. Either rename the route to :paramLang or destructure param_lang in the component.
| { path: 'sicpjs/:param_lang/:section?', lazy: Sicp }, | |
| { path: 'sicpjs/:paramLang/:section?', lazy: Sicp }, |
Copilot uses AI. Check for mistakes.
| { path: 'sicpjs/:section?', lazy: Sicp }, | ||
| { path: 'sicpjs/:param_lang/:section?', lazy: Sicp }, |
There was a problem hiding this comment.
This generic :section? route is listed before the more specific :param_lang/:section? route, so it will match first and prevent the language-aware route from ever firing. Consider moving the two-segment route above the one-segment route.
| { path: 'sicpjs/:section?', lazy: Sicp }, | |
| { path: 'sicpjs/:param_lang/:section?', lazy: Sicp }, | |
| { path: 'sicpjs/:param_lang/:section?', lazy: Sicp }, | |
| { path: 'sicpjs/:section?', lazy: Sicp }, |
Copilot uses AI. Check for mistakes.
| @@ -1,9 +1,15 @@ | |||
| import { Tree, TreeNodeInfo } from '@blueprintjs/core'; | |||
| import { NonIdealState, Spinner } from '@blueprintjs/core'; | |||
| import { cloneDeep } from 'lodash'; | |||
There was a problem hiding this comment.
The cloneDeep import is no longer used in this file. Removing it will reduce unused dependencies and improve readability.
| import { cloneDeep } from 'lodash'; |
Copilot uses AI. Check for mistakes.
| <Toc toc={fallbackToc as TreeNodeInfo[]} props={props} /> | ||
| ) : ( | ||
| <Toc toc={toc} props={props} /> |
There was a problem hiding this comment.
[nitpick] Rather than passing a single props object into Toc, either spread its contents (<Toc toc={fallbackToc} {...props} />) or rename the prop for clarity to avoid confusion.
| <Toc toc={fallbackToc as TreeNodeInfo[]} props={props} /> | |
| ) : ( | |
| <Toc toc={toc} props={props} /> | |
| <Toc toc={fallbackToc as TreeNodeInfo[]} {...props} /> | |
| ) : ( | |
| <Toc toc={toc} {...props} /> |
Copilot uses AI. Check for mistakes.
| navigate(`/sicpjs/${section}`, { replace: true }); | ||
| } else { | ||
| navigate(`/sicpjs/${readSicpSectionLocalStorage()}`, { replace: true }); |
There was a problem hiding this comment.
When handling a language param, this redirect drops the language segment. It should include both, e.g., navigate(/sicpjs/${lang}/${section}, { replace: true }), to preserve the selected language.
| navigate(`/sicpjs/${section}`, { replace: true }); | |
| } else { | |
| navigate(`/sicpjs/${readSicpSectionLocalStorage()}`, { replace: true }); | |
| navigate(`/sicpjs/${lang}/${section}`, { replace: true }); | |
| } else { | |
| navigate(`/sicpjs/${lang}/${readSicpSectionLocalStorage()}`, { replace: true }); |
Copilot uses AI. Check for mistakes.
|
Please take whatever Copilot says with a big mountain of salt, I will review it properly later… |
Description
updated router to read language params from url and request for the corresponding page in the backend
added button in sicp page to switch between languages
Type of change
How to test
use the updated backend that supports i18n when starting the frontend
navigate to the sicp page in the frontend and switch between languages
Checklist