make all translation strings long-form

per feedback, this helps with static analysis. this scope included code not introduced in this PR

Author: bmuenzenmeyer

apps/site/components/Downloads/DownloadReleasesTable/DetailsButton.tsx

@@ -12,13 +12,13 @@ type DetailsButtonProps = {
 };
 
 const DetailsButton: FC<DetailsButtonProps> = ({ data }) => {
-  const t = useTranslations('components.downloadReleasesTable');
+  const t = useTranslations();
 
   const { openModal } = use(ModalContext);
 
   return (
     <LinkWithArrow className="cursor-pointer" onClick={() => openModal(data)}>
-      {t('details')}
+      {t('components.downloadReleasesTable.details')}
     </LinkWithArrow>
   );
 };

apps/site/components/Downloads/MinorReleasesTable/index.tsx

@@ -18,14 +18,14 @@ type MinorReleasesTableProps = {
 export const MinorReleasesTable: FC<MinorReleasesTableProps> = ({
   releases,
 }) => {
-  const t = useTranslations('components.minorReleasesTable');
+  const t = useTranslations();
 
   return (
     <table>
       <thead>
         <tr>
-          <th>{t('version')}</th>
-          <th>{t('links')}</th>
+          <th>{t('components.minorReleasesTable.version')}</th>
+          <th>{t('components.minorReleasesTable.links')}</th>
         </tr>
       </thead>
       <tbody>
@@ -38,21 +38,21 @@ export const MinorReleasesTable: FC<MinorReleasesTableProps> = ({
                   kind="neutral"
                   href={`https://nodejs.org/download/release/v${release.version}/`}
                 >
-                  {t('actions.release')}
+                  {t('components.minorReleasesTable.actions.release')}
                 </Link>
                 <Separator orientation="vertical" />
                 <Link
                   kind="neutral"
                   href={`${BASE_CHANGELOG_URL}${release.version}`}
                 >
-                  {t('actions.changelog')}
+                  {t('components.minorReleasesTable.actions.changelog')}
                 </Link>
                 <Separator orientation="vertical" />
                 <Link
                   kind="neutral"
                   href={getNodeApiUrl(`v${release.version}`)}
                 >
-                  {t('actions.docs')}
+                  {t('components.minorReleasesTable.actions.docs')}
                 </Link>
               </div>
             </td>

apps/site/components/EOL/Alert.tsx

@@ -4,12 +4,13 @@ import { useTranslations } from 'next-intl';
 import Link from '#site/components/Link';
 
 const EOLAlert = () => {
-  const t = useTranslations('components.eolAlert');
+  const t = useTranslations();
   return (
     <AlertBox level="warning">
-      {t('intro')}{' '}
+      {t('components.eolAlert.intro')}{' '}
       <Link href="/eol">
-        OpenJS Ecosystem Sustainability Program {t('partner')} HeroDevs
+        OpenJS Ecosystem Sustainability Program{' '}
+        {t('components.eolAlert.partner')} HeroDevs
       </Link>
     </AlertBox>
   );

apps/site/components/EOL/Modal.tsx

@@ -24,16 +24,16 @@ const VulnerabilitiesTable: FC<{
   vulnerabilities: Array<Vulnerability>;
   maxWidth?: string;
 }> = ({ vulnerabilities, maxWidth = 'max-w-2xs' }) => {
-  const t = useTranslations('components.eolModal');
+  const t = useTranslations();
 
   return (
     <table className="w-full">
       <thead>
         <tr>
-          <th>{t('table.cves')}</th>
-          <th>{t('table.severity')}</th>
-          <th>{t('table.overview')}</th>
-          <th>{t('table.details')}</th>
+          <th>{t('components.eolModal.table.cves')}</th>
+          <th>{t('components.eolModal.table.severity')}</th>
+          <th>{t('components.eolModal.table.overview')}</th>
+          <th>{t('components.eolModal.table.details')}</th>
         </tr>
       </thead>
       <tbody>
@@ -67,7 +67,7 @@ const VulnerabilitiesTable: FC<{
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  {t('blogLinkText')}
+                  {t('components.eolModal.blogLinkText')}
                 </LinkWithArrow>
               ) : (
                 '—'
@@ -84,7 +84,7 @@ const UnknownSeveritySection: FC<{
   vulnerabilities: Array<Vulnerability>;
   hasKnownVulns: boolean;
 }> = ({ vulnerabilities, hasKnownVulns }) => {
-  const t = useTranslations('components.eolModal');
+  const t = useTranslations();
 
   if (!vulnerabilities.length) {
     return null;
@@ -93,7 +93,8 @@ const UnknownSeveritySection: FC<{
   return (
     <details open={!hasKnownVulns}>
       <summary className="cursor-pointer font-semibold">
-        {t('showUnknownSeverities')} ({vulnerabilities.length})
+        {t('components.eolModal.showUnknownSeverities')} (
+        {vulnerabilities.length})
       </summary>
       <div className="mt-4">
         <VulnerabilitiesTable
@@ -107,12 +108,17 @@ const UnknownSeveritySection: FC<{
 
 const EOLModal: FC<ModalProps> = ({ open, closeModal, data }) => {
   const { release, vulnerabilities } = data as EOLModalData;
-  const t = useTranslations('components.eolModal');
-
-  const modalHeading = t(release.codename ? 'title' : 'titleWithoutCodename', {
-    version: release.major,
-    codename: release.codename ?? '',
-  });
+  const t = useTranslations();
+
+  const modalHeading = t(
+    release.codename
+      ? 'components.eolModal.title'
+      : 'components.eolModal.titleWithoutCodename',
+    {
+      version: release.major,
+      codename: release.codename ?? '',
+    }
+  );
 
   const [knownVulns, unknownVulns] = vulnerabilities.reduce(
     (acc, vuln) => {
@@ -136,7 +142,9 @@ const EOLModal: FC<ModalProps> = ({ open, closeModal, data }) => {
       <Content>
         {vulnerabilities.length > 0 && (
           <p className="m-1">
-            {t('vulnerabilitiesMessage', { count: vulnerabilities.length })}
+            {t('components.eolModal.vulnerabilitiesMessage', {
+              count: vulnerabilities.length,
+            })}
           </p>
         )}
 
@@ -147,7 +155,11 @@ const EOLModal: FC<ModalProps> = ({ open, closeModal, data }) => {
           hasKnownVulns={hasKnownVulns}
         />
 
-        {!hasAnyVulns && <p className="m-1">{t('noVulnerabilitiesMessage')}</p>}
+        {!hasAnyVulns && (
+          <p className="m-1">
+            {t('components.eolModal.noVulnerabilitiesMessage')}
+          </p>
+        )}
       </Content>
     </Modal>
   );

apps/site/components/EOL/Table.tsx

@@ -15,18 +15,19 @@ const EOLTable: FC = () => {
     release => release.status === 'End-of-life'
   );
 
-  const t = useTranslations('components.eolTable');
+  const t = useTranslations();
 
   return (
     <table id="tbVulnerabilities">
       <thead>
         <tr>
           <th>
-            {t('version')} ({t('codename')})
+            {t('components.eolTable.version')} (
+            {t('components.eolTable.codename')})
           </th>
-          <th>{t('lastUpdated')}</th>
-          <th>{t('vulnerabilities')}</th>
-          <th>{t('details')}</th>
+          <th>{t('components.eolTable.lastUpdated')}</th>
+          <th>{t('components.eolTable.vulnerabilities')}</th>
+          <th>{t('components.eolTable.details')}</th>
         </tr>
       </thead>
       <tbody>

apps/site/components/EOL/VulnerabilityChips/Chip/index.tsx

@@ -23,12 +23,12 @@ const VulnerabilityChip: FC<VulnerabilityChipProps> = ({
   severity,
   count = 0,
 }) => {
-  const t = useTranslations('components.eolChip');
+  const t = useTranslations();
 
   return (
     <Badge size="small" kind={SEVERITY_KIND_MAP[severity]} className="mr-1">
       {count > 0 ? <span className={styles.chipCount}>{count}</span> : null}
-      {t(`severity.${severity}`)}
+      {t(`components.eolChip.severity.${severity}`)}
     </Badge>
   );
 };