-
Notifications
You must be signed in to change notification settings - Fork 172
i18n support for sicp #3133
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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