7342 edit this translation (#7389)

* use translation

* feat: translate "Edit this page", linking appropriately based on locale

Author: bmuenzenmeyer

apps/site/components/withMetaBar.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useFormatter } from 'next-intl';
+import { useFormatter, useLocale, useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
 import MetaBar from '@/components/Containers/MetaBar';
@@ -10,6 +10,8 @@ import WithAvatarGroup from '@/components/withAvatarGroup';
 import { useClientContext } from '@/hooks/react-client';
 import useMediaQuery from '@/hooks/react-client/useMediaQuery';
 import { DEFAULT_DATE_FORMAT } from '@/next.calendar.constants.mjs';
+import { TRANSLATION_URL } from '@/next.constants.mjs';
+import { defaultLocale } from '@/next.locales.mjs';
 import { getGitHubBlobUrl } from '@/util/gitHubUtils';
 
 const WithMetaBar: FC = () => {
@@ -22,6 +24,9 @@ const WithMetaBar: FC = () => {
   const usernames =
     frontmatter.authors?.split(',').map(author => author.trim()) ?? [];
 
+  const t = useTranslations();
+  const locale = useLocale();
+
   // Since we cannot show the same number of avatars in Mobile / Tablet
   // resolution as we do on desktop and there is overflow, we are adjusting
   // the number of avatars manually for the resolutions below
@@ -47,7 +52,15 @@ const WithMetaBar: FC = () => {
         'components.metabar.contribute': (
           <>
             <GitHub className="fill-neutral-700 dark:fill-neutral-100" />
-            <Link href={getGitHubBlobUrl(filename)}>Edit this page</Link>
+            <Link
+              href={
+                locale === defaultLocale.code
+                  ? getGitHubBlobUrl(filename)
+                  : TRANSLATION_URL
+              }
+            >
+              {t('components.metabar.contributeText')}
+            </Link>
           </>
         ),
       }}

apps/site/next.constants.mjs

@@ -187,3 +187,9 @@ export const ORAMA_CLOUD_API_KEY =
  * Note: This has no NEXT_PUBLIC prefix as it should not be exposed to the Browser.
  */
 export const GITHUB_API_KEY = process.env.NEXT_GITHUB_API_KEY || '';
+
+/**
+ * The resource we point people to when discussing internationalization efforts.
+ */
+export const TRANSLATION_URL =
+  'https://github.com/nodejs/nodejs.org/blob/main/TRANSLATION.md#how-to-translate';