Skip to content

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

Open
wants to merge 13 commits into
base: master
Choose a base branch
from
Open

i18n support for sicp #3133

wants to merge 13 commits into from

Conversation

yihao03
Copy link
Member

@yihao03 yihao03 commented May 14, 2025

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

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update
  • Code quality improvements

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

  • I have tested this code
  • I have updated the documentation

@coder114514 coder114514 marked this pull request as ready for review June 10, 2025 14:37
@coder114514 coder114514 requested a review from RichDom2185 June 17, 2025 06:15
@RichDom2185 RichDom2185 requested a review from Copilot July 5, 2025 08:53
Copy link

@Copilot Copilot AI left a 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 },
Copy link
Preview

Copilot AI Jul 5, 2025

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.

Suggested change
{ path: 'sicpjs/:param_lang/:section?', lazy: Sicp },
{ path: 'sicpjs/:paramLang/:section?', lazy: Sicp },

Copilot uses AI. Check for mistakes.

Comment on lines 52 to +53
{ path: 'sicpjs/:section?', lazy: Sicp },
{ path: 'sicpjs/:param_lang/:section?', lazy: Sicp },
Copy link
Preview

Copilot AI Jul 5, 2025

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.

Suggested change
{ 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';
Copy link
Preview

Copilot AI Jul 5, 2025

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.

Suggested change
import { cloneDeep } from 'lodash';

Copilot uses AI. Check for mistakes.

Comment on lines +101 to +103
<Toc toc={fallbackToc as TreeNodeInfo[]} props={props} />
) : (
<Toc toc={toc} props={props} />
Copy link
Preview

Copilot AI Jul 5, 2025

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.

Suggested change
<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.

Comment on lines +118 to +120
navigate(`/sicpjs/${section}`, { replace: true });
} else {
navigate(`/sicpjs/${readSicpSectionLocalStorage()}`, { replace: true });
Copy link
Preview

Copilot AI Jul 5, 2025

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.

Suggested change
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.

@RichDom2185
Copy link
Member

Please take whatever Copilot says with a big mountain of salt, I will review it properly later…

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants