Preserve the current document in translation links

Author: yuncic

src/components/Layout/TopNav/TopNav.tsx

@@ -169,6 +169,12 @@ export default function TopNav({
   const [isScrolled, setIsScrolled] = useState(false);
   const scrollParentRef = useRef<HTMLDivElement>(null);
   const {asPath} = useRouter();
+  const translationsHref =
+    section === 'learn' || section === 'reference'
+      ? `/community/translations?from=${encodeURIComponent(
+          asPath.split(/[?#]/)[0]
+        )}`
+      : '/community/translations';
 
   // HACK. Fix up the data structures instead.
   if ((routeTree as any).routes.length === 1) {
@@ -378,7 +384,7 @@ export default function TopNav({
                 </div>
                 <div className="flex">
                   <Link
-                    href="/community/translations"
+                    href={translationsHref}
                     aria-label="Translations"
                     className="active:scale-95 transition-transform flex w-12 h-12 rounded-full items-center justify-center hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link">
                     {languageIcon}

src/components/MDX/MDXComponents.tsx

@@ -12,6 +12,7 @@
 import {Children, useContext, useMemo} from 'react';
 import * as React from 'react';
 import cn from 'classnames';
+import {useRouter} from 'next/router';
 import type {HTMLAttributes} from 'react';
 
 import CodeBlock from './CodeBlock';
@@ -469,6 +470,9 @@ function InlineTocItem({items}: {items: Array<NestedTocNode>}) {
 type TranslationProgress = 'complete' | 'in-progress';
 
 function LanguageList({progress}: {progress: TranslationProgress}) {
+  const from = useRouter().query.from;
+  const pathname =
+    typeof from === 'string' && /^\/(?!\/)[^\\?#]*$/.test(from) ? from : '';
   const allLanguages = React.useContext(LanguagesContext) ?? [];
   const languages = allLanguages
     .filter(
@@ -484,7 +488,10 @@ function LanguageList({progress}: {progress: TranslationProgress}) {
       {languages.map(({code, name, enName}) => {
         return (
           <LI key={code}>
-            <Link href={`https://${code}.react.dev/`}>
+            <Link
+              href={`https://${code}.react.dev${
+                progress === 'complete' ? pathname || '/' : '/'
+              }`}>
               {enName} ({name})
             </Link>{' '}
             &mdash;{' '}