feat: Add a language drop-down menu in the Header component, including a link to Chinese documentation #1150

eveningwater · 2025-08-14T07:11:52Z

Related Bug Reports or Discussions

add the drop-down mennu in the Header component.

Summary

Check List

[ x ] pnpm run fix for formatting and linting code and docs

vercel · 2025-08-14T07:11:57Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
valtio	Ready	Preview	Comment	Sep 24, 2025 0:09am

codesandbox-ci · 2025-08-14T07:12:15Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

overthemike · 2025-08-14T07:44:39Z

website/components/layouts/Header/Header.tsx

+  }, [isOpen])
+
+  return (
+    <div className="relative language-selector">


let's add some margin to the right of the selector

<div className="relative language-selector mr-6">

let's add some margin to the right of the selector

<div className="relative language-selector mr-6">

Done!

overthemike · 2025-08-14T07:50:37Z

@dai-shi We'll need to figure out valtio.dev domain stuff. Right now, I think I'm still handling the nameservers for valtio.dev and am just redirecting.

overthemike · 2025-08-14T08:01:02Z

website/components/layouts/Header/Header.tsx

            </li>
+            <li>
+              <a
+                href="https://valtio-xnj9.vercel.app/zh"


This link will need to change to something like http://zh.valtio.dev or http://valtiio.dev/zh and then we'll need to configure the dns. Let's not change this yet until we get that sorted first though.

I guess an alternative would be to make sure that the english link links back to the valtio.dev domain. RIght now, clicking on the new language will just redirect to the new domain and won't redirect back on change again. I think maybe the better solution here would be to make these absolute links to a new site instead of state change.

This link will need to change to something like http://zh.valtio.dev or http://valtiio.dev/zh and then we'll need to configure the dns. Let's not change this yet until we get that sorted first though.

@overthemike
My opinion is no. We don't "host" non-English site, and it's not our responsibility. So, I prefer an external URL.

RIght now, clicking on the new language will just redirect to the new domain

I think it should open a new window.

overthemike · 2025-08-14T08:28:50Z

@dai-shi We'll need to figure out valtio.dev domain stuff. Right now, I think I'm still handling the nameservers for valtio.dev and am just redirecting.

I think probably the easiest solution would be to just have me create a zh.valtio.dev subdomain and point it to that vercel app. @eveningwater For that to work, you'll want to configure the root of the app on your repo to use the chinese translation instead of english. Then just link back to valitio.dev for english stuff.

overthemike · 2025-08-14T08:14:21Z

website/components/layouts/Header/Header.tsx

            </li>
+            <li>
+              <a
+                href="https://valtio-xnj9.vercel.app/zh"


I guess an alternative would be to make sure that the english link links back to the valtio.dev domain. RIght now, clicking on the new language will just redirect to the new domain and won't redirect back on change again. I think maybe the better solution here would be to make these absolute links to a new site instead of state change.

overthemike · 2025-08-14T08:17:16Z

website/components/layouts/Header/Header.tsx

+          >
+            中文文档
+          </a>
+          <Link href="/">


Let's change this to <Link href='https://valtio.dev'> This way it will link back to the main site and stay up to date.

overthemike · 2025-08-14T08:33:57Z

website/components/layouts/Header/Header.tsx

+      {isOpen && (
+        <div className="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-200 dark:border-gray-700">
+          <a
+            href="https://valtio-xnj9.vercel.app/zh"


Let's change the href to be "https://zh/valtio.dev" and I'll create a zh subdomain on valtio.dev to point to this domain.

@eveningwater I've already created the CNAME record to point here (just need to wait for propegation), but you'll want to change the root of your app to server chinese instead of english.

** overthemike**

Can you help me check if my latest modification meets the requirements?thanks!

@eveningwater Almost. Line 158 still needs updating to http://zh.valtio.dev I think.

On your end, you can replace all of the regular .mdx files with the .zh.mdx files and then make sure the default language there will be selected to be chinese.

Let's check back in a little while to make sure the subdomain is redirecting properly to your app while you're changing your default language on your end.

@eveningwater Almost. Line 158 still needs updating to http://zh.valtio.dev I think.

On your end, you can replace all of the regular .mdx files with the .zh.mdx files and then make sure the default language there will be selected to be chinese.

Let's check back in a little while to make sure the subdomain is redirecting properly to your app while you're changing your default language on your end.

Does my repo not need to display English documents? Can I just keep the Chinese documents?

@eveningwater That is correct. No need to store the English docs as we store them here. Your github repos as well as your website call be all chinese docs and you can just link back for english.

@eveningwater That is correct. No need to store the English docs as we store them here. Your github repos as well as your website call be all chinese docs and you can just link back for english.

Got it, thanks, I'll adjust it.

…ation link

…and adding English docs link

eveningwater · 2025-08-14T10:08:11Z

@overthemike I redeployed it, the link is: https://valtio-nine.vercel.app/

overthemike · 2025-08-14T10:42:10Z

@overthemike I redeployed it, the link is: https://valtio-nine.vercel.app/

ok. I updated the DNS record.

website/components/layouts/Header/Header.tsx

overthemike · 2025-08-14T12:58:58Z

@eveningwater Could you also add the flag svgs next to the languages? Here are the svgs for them both:

China:

<svg className="w-4 h-4 mt-1" enable-background="new -49 141 512 512" viewBox="-49 141 512 512" xmlns="http://www.w3.org/2000/svg"><circle cx="207" cy="397" fill="#d80027" r="256"></circle><g fill="#ffda44"><path d="m91.1 296.8 22.1 68h71.5l-57.8 42.1 22.1 68-57.9-42-57.9 42 22.2-68-57.9-42.1h71.5z"></path><path d="m254.5 537.5-16.9-20.8-25 9.7 14.5-22.5-16.9-20.9 25.9 6.9 14.6-22.5 1.4 26.8 26 6.9-25.1 9.6z"></path><path d="m288.1 476.5 8-25.6-21.9-15.5 26.8-.4 7.9-25.6 8.7 25.4 26.8-.3-21.5 16 8.6 25.4-21.9-15.5z"></path><path d="m333.4 328.9-11.8 24.1 19.2 18.7-26.5-3.8-11.8 24-4.6-26.4-26.6-3.8 23.8-12.5-4.6-26.5 19.2 18.7z"></path><path d="m255.2 255.9-2 26.7 24.9 10.1-26.1 6.4-1.9 26.8-14.1-22.8-26.1 6.4 17.3-20.5-14.2-22.7 24.9 10.1z"></path></g></svg>

USA:

<svg className="w-4 h-4 mt-1 z-50" xmlns="http://www.w3.org/2000/svg" id="flag-icons-us" viewBox="0 0 640 480"><path fill="#bd3d44" d="M0 0h640v480H0"/><path stroke="#fff" stroke-width="37" d="M0 55.3h640M0 129h640M0 203h640M0 277h640M0 351h640M0 425h640"/><path fill="#192f5d" d="M0 0h364.8v258.5H0"/><marker id="us-a" markerHeight="30" markerWidth="30"><path fill="#fff" d="m14 0 9 27L0 10h28L5 27z"/></marker><path fill="none" marker-mid="url(#us-a)" d="m0 0 16 11h61 61 61 61 60L47 37h61 61 60 61L16 63h61 61 61 61 60L47 89h61 61 60 61L16 115h61 61 61 61 60L47 141h61 61 60 61L16 166h61 61 61 61 60L47 192h61 61 60 61L16 218h61 61 61 61 60z"/></svg>

feat: remove the comment Co-authored-by: Daishi Kato <[email protected]>

dai-shi · 2025-08-15T09:55:12Z

I don't have much preference on it. If it's intentional, it's fine.

dai-shi · 2025-08-15T09:56:03Z

To be honest, I'm not sure if "Language selector" is appropriate in our case. But, I'll leave it to @overthemike.

eveningwater · 2025-08-15T09:56:17Z

Is this intentional? No "Languages" menu in this screen size.

Screen.Recording.2025-08-15.at.18.47.28.mov

Preview

You can check out the results by following this link.：https://valtio-git-fork-eveningwater-feature-branch-pmndrs.vercel.app/

eveningwater · 2025-08-15T09:59:18Z

To be honest, I'm not sure if "Language selector" is appropriate in our case. But, I'll leave it to @overthemike.

I think language switching might be better on mobile devices, and documents in other languages may be added in the future.Please allow me to think about whether I need to adjust it.

overthemike · 2025-08-23T10:55:56Z

As far as the "Language" label, I think the most common thing to do is to do is to have the current language 2 letter code selected with the flag next to it. See Amazon for an example.

I have some ideas on some changes for it. @eveningwater I'll clone down your fork and suggest some changes.

eveningwater · 2025-08-23T11:27:23Z

As far as the "Language" label, I think the most common thing to do is to do is to have the current language 2 letter code selected with the flag next to it. See Amazon for an example.

I have some ideas on some changes for it. @eveningwater I'll clone down your fork and suggest some changes.

ok,thanks.

added some update suggestions

dai-shi · 2025-09-04T07:42:45Z

@eveningwater Please check CI errors.

eveningwater · 2025-09-04T08:11:16Z

@eveningwater Please check CI errors.

ok.

eveningwater · 2025-09-04T08:16:54Z

Vercel — Deployment has failed

Vercel Deployment has failed,I can't view the details to get the error,Shouldn't I check this?

eveningwater · 2025-09-04T08:17:35Z

Vercel — Deployment has failed

Vercel Deployment has failed,I can't view the details to get the error,Shouldn't I check this?
@dai-shi

dai-shi · 2025-09-04T08:30:19Z

Vercel Deployment has failed,I can't view the details to get the error,Shouldn't I check this?

I can't see it either. If it's not temporarily, there might be something wrong. You might want to test building it on your end.

.prettierignore

- 格式化 Header.tsx 文件以符合 Prettier 规范 - 更新 .prettierignore 文件，忽略 .next、node_modules 和 build 目录 - 确保 pnpm run test:format 命令能够成功通过

dai-shi · 2025-09-05T09:00:32Z

I can't see it either. If it's not temporarily, there might be something wrong. You might want to test building it on your end.

Sorry, it wasn't your fault.

dai-shi · 2025-09-05T09:01:55Z

Is this ready for @overthemike for another review?

feat: 在Header组件中添加语言下拉菜单，包含中文文档链接

360e44d

vercel bot deployed to Preview August 14, 2025 07:12 View deployment

feat: delete the icon

507d40b

vercel bot deployed to Preview August 14, 2025 07:14 View deployment

overthemike requested changes Aug 14, 2025

View reviewed changes

feat: add some margin to the right of the selector

6ab774a

vercel bot deployed to Preview August 14, 2025 07:56 View deployment

overthemike reviewed Aug 14, 2025

View reviewed changes

overthemike requested changes Aug 14, 2025

View reviewed changes

feat: 更新English链接指向官方文档网站

ba2e6ef

vercel bot deployed to Preview August 14, 2025 08:52 View deployment

feat: update Chinese documentation link to official domain

85eb80f

vercel bot deployed to Preview August 14, 2025 08:55 View deployment

fix: correct Chinese documentation URL format and update mobile navig…

186cb80

…ation link

vercel bot deployed to Preview August 14, 2025 09:16 View deployment

refactor: simplify Header component by removing multilingual support …

71f53fe

…and adding English docs link

vercel bot had a problem deploying to Preview August 14, 2025 09:30 Failure

feat: restore language selector with Chinese docs and English docs link

25b0f48

vercel bot deployed to Preview August 14, 2025 09:33 View deployment

dai-shi reviewed Aug 14, 2025

View reviewed changes

website/components/layouts/Header/Header.tsx Outdated Show resolved Hide resolved

dai-shi reviewed Aug 14, 2025

View reviewed changes

website/components/layouts/Header/Header.tsx Outdated Show resolved Hide resolved

dai-shi reviewed Aug 14, 2025

View reviewed changes

website/components/layouts/Header/Header.tsx Outdated Show resolved Hide resolved

Update website/components/layouts/Header/Header.tsx

128eb2a

feat: remove the comment Co-authored-by: Daishi Kato <[email protected]>

Merge branch 'main' into feature-branch

47ed141

vercel bot deployed to Preview August 21, 2025 06:14 View deployment

added some update suggestions

25c6669

Merge pull request #1 from overthemike/feature-branch

2be5ccf

added some update suggestions

vercel bot had a problem deploying to Preview September 1, 2025 03:44 Failure

Merge branch 'pmndrs:main' into feature-branch

8bf998d

vercel bot had a problem deploying to Preview September 1, 2025 03:46 Failure

vercel bot had a problem deploying to Preview September 4, 2025 08:14 Failure

dai-shi reviewed Sep 4, 2025

View reviewed changes

.prettierignore Outdated Show resolved Hide resolved

vercel bot had a problem deploying to Preview September 4, 2025 13:57 Failure

fix: 修复 Prettier 格式检查问题

51cf417

- 格式化 Header.tsx 文件以符合 Prettier 规范 - 更新 .prettierignore 文件，忽略 .next、node_modules 和 build 目录 - 确保 pnpm run test:format 命令能够成功通过

eveningwater force-pushed the feature-branch branch from b34982a to 51cf417 Compare September 5, 2025 03:05

vercel bot had a problem deploying to Preview September 5, 2025 03:05 Failure

Merge branch 'main' into feature-branch

b756890

vercel bot deployed to Preview September 5, 2025 08:59 View deployment

Merge branch 'main' into feature-branch

1d4a9b3

vercel bot deployed to Preview September 24, 2025 12:09 View deployment

Uh oh!

feat: Add a language drop-down menu in the Header component, including a link to Chinese documentation #1150

Are you sure you want to change the base?

feat: Add a language drop-down menu in the Header component, including a link to Chinese documentation #1150

Uh oh!

Conversation

eveningwater commented Aug 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related Bug Reports or Discussions

Summary

Check List

Uh oh!

vercel bot commented Aug 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codesandbox-ci bot commented Aug 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

overthemike commented Aug 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

overthemike commented Aug 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

overthemike Aug 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

eveningwater commented Aug 14, 2025

Uh oh!

overthemike commented Aug 14, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

overthemike commented Aug 14, 2025

Uh oh!

dai-shi commented Aug 15, 2025

Uh oh!

dai-shi commented Aug 15, 2025

Uh oh!

eveningwater commented Aug 15, 2025

Uh oh!

eveningwater commented Aug 15, 2025

Uh oh!

overthemike commented Aug 23, 2025

Uh oh!

eveningwater commented Aug 23, 2025

Uh oh!

dai-shi commented Sep 4, 2025

Uh oh!

eveningwater commented Sep 4, 2025

eveningwater commented Aug 14, 2025 •

edited

Loading

vercel bot commented Aug 14, 2025 •

edited

Loading

codesandbox-ci bot commented Aug 14, 2025 •

edited

Loading

overthemike commented Aug 14, 2025 •

edited

Loading

overthemike commented Aug 14, 2025 •

edited

Loading

overthemike Aug 14, 2025 •

edited

Loading