feat: moved get-involved and guides content (#6172)

* feat: moved get-involved and guides content

* fix: fixed for old legacy design

* fix: some redirect fixes

* chore: getting started should be learn index

Author: ovflowd

components/Docs/NodeApiVersionLinks.tsx

@@ -40,7 +40,7 @@ const ChangelogModal: FC<PropsWithChildren<ChangelogModalProps>> = ({
             </Dialog.Description>
             <div className={styles.authors}>
               <AvatarGroup avatars={avatars} isExpandable={false} />
-              <Link href="/get-involved">
+              <Link href="/about/get-involved">
                 {t('components.downloads.changelogModal.startContributing')}
                 <ArrowUpRightIcon />
               </Link>

components/Downloads/ChangelogModal/index.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 
 import DownloadList from '@/components/Downloads/DownloadList';
-import { WithNodeRelease } from '@/components/withNodeRelease';
+import WithNodeRelease from '@/components/withNodeRelease';
 import { useClientContext } from '@/hooks/server';
 import { DIST_URL } from '@/next.constants.mjs';
 import type { NodeRelease } from '@/types';

components/Downloads/SecondaryDownloadMatrix.tsx

@@ -6,37 +6,31 @@ import { useSiteNavigation } from '@/hooks/server';
 import type { NavigationKeys } from '@/types';
 
 type SideNavigationProps = {
-  navigationKey: NavigationKeys;
+  navigationKeys: NavigationKeys[];
   context?: Record<string, RichTranslationValues>;
 };
 
 const SideNavigation: FC<SideNavigationProps> = ({
-  navigationKey,
+  navigationKeys,
   context,
 }) => {
   const { getSideNavigation } = useSiteNavigation();
 
-  const [[, sideNavigationItems]] = getSideNavigation([navigationKey], context);
+  const sideNavigation = getSideNavigation(navigationKeys, context);
+
+  const mapItems = (items: ReturnType<typeof getSideNavigation>) => {
+    return items.map(([, { link, label, items }]) => (
+      <li key={link}>
+        {link ? <ActiveLink href={link}>{label}</ActiveLink> : label}
+
+        {items && items.length > 0 && <ul>{mapItems(items)}</ul>}
+      </li>
+    ));
+  };
 
   return (
     <nav aria-label="secondary">
-      <ul>
-        {sideNavigationItems.items!.map(([key, { link, label, items }]) => (
-          <li key={key}>
-            {link ? <ActiveLink href={link}>{label}</ActiveLink> : label}
-
-            {items && items.length > 0 && (
-              <ul>
-                {items.map(([key, { link, label }]) => (
-                  <li key={key}>
-                    <ActiveLink href={link}>{label}</ActiveLink>
-                  </li>
-                ))}
-              </ul>
-            )}
-          </li>
-        ))}
-      </ul>
+      <ul>{mapItems(sideNavigation)}</ul>
     </nav>
   );
 };

components/SideNavigation.tsx

@@ -3,14 +3,14 @@ import type { FC, PropsWithChildren } from 'react';
 import LegacyAboutLayout from '@/layouts/AboutLayout';
 import LegacyBlogCategoryLayout from '@/layouts/BlogCategoryLayout';
 import LegacyBlogPostLayout from '@/layouts/BlogPostLayout';
-import LegacyContributeLayout from '@/layouts/ContributeLayout';
 import LegacyDefaultLayout from '@/layouts/DefaultLayout';
 import LegacyDocsLayout from '@/layouts/DocsLayout';
 import LegacyDownloadLayout from '@/layouts/DownloadLayout';
 import LegacyIndexLayout from '@/layouts/IndexLayout';
 import LegacyLearnLayout from '@/layouts/LearnLayout';
 import AboutLayout from '@/layouts/New/About';
 import DefaultLayout from '@/layouts/New/Default';
+import DocsLayout from '@/layouts/New/Docs';
 import { ENABLE_WEBSITE_REDESIGN } from '@/next.constants.mjs';
 import type { LegacyLayouts } from '@/types';
 
@@ -20,7 +20,7 @@ const legacyLayouts = {
   'about.hbs': LegacyAboutLayout,
   'blog-category.hbs': LegacyBlogCategoryLayout,
   'blog-post.hbs': LegacyBlogPostLayout,
-  'contribute.hbs': LegacyContributeLayout,
+  'contribute.hbs': LegacyAboutLayout,
   'download.hbs': LegacyDownloadLayout,
   'index.hbs': LegacyIndexLayout,
   'learn.hbs': LegacyLearnLayout,
@@ -29,7 +29,7 @@ const legacyLayouts = {
 
 /** all the currently available layouts from website redesign */
 const redesignLayouts = {
-  'docs.hbs': DefaultLayout,
+  'docs.hbs': DocsLayout,
   'about.hbs': AboutLayout,
   'blog-category.hbs': DefaultLayout,
   'blog-post.hbs': DefaultLayout,

components/withLayout.tsx

@@ -11,7 +11,7 @@ type WithNodeReleaseProps = {
 // This is a React Async Server Component
 // Note that Hooks cannot be used in a RSC async component
 // Async Components do not get re-rendered at all.
-export const WithNodeRelease: FC<WithNodeReleaseProps> = async ({
+const WithNodeRelease: FC<WithNodeReleaseProps> = async ({
   status,
   children: Component,
 }) => {
@@ -27,3 +27,5 @@ export const WithNodeRelease: FC<WithNodeReleaseProps> = async ({
 
   return null;
 };
+
+export default WithNodeRelease;

components/withNodeRelease.tsx

@@ -9,7 +9,7 @@ files:
     ignore:
       - /pages/en/blog/**/*.md
       - /pages/en/learn/**/*.md
-      - /pages/en/docs/guides/**/*.md
+      - /pages/en/guides/**/*.md
       - /pages/en/download/index.md
       - /pages/en/download/current.md
     languages_mapping:
@@ -24,7 +24,7 @@ files:
     ignore:
       - /pages/en/blog/**/*.mdx
       - /pages/en/learn/**/*.mdx
-      - /pages/en/docs/guides/**/*.mdx
+      - /pages/en/guides/**/*.mdx
     languages_mapping:
       two_letters_code:
         es-ES: es

crowdin.yml

@@ -1,7 +1,6 @@
-import type { RichTranslationValues } from 'next-intl';
 import { getRequestConfig } from 'next-intl/server';
 
-import { availableLocaleCodes } from './next.locales.mjs';
+import { availableLocaleCodes } from '@/next.locales.mjs';
 
 // Loads the Application Locales/Translations Dynamically
 const loadLocaleDictionary = async (locale: string) => {
@@ -20,17 +19,10 @@ const loadLocaleDictionary = async (locale: string) => {
   throw new Error(`Unsupported locale: ${locale}`);
 };
 
-// Defines default Rich Text Components
-const defaultRichTextValues: RichTranslationValues = {
-  graySpan: c => <span className="small color-lightgray">{c}</span>,
-};
-
 // Provides `next-intl` configuration for RSC/SSR
 export default getRequestConfig(async ({ locale }) => ({
   // This is the dictionary of messages to be loaded
   messages: await loadLocaleDictionary(locale),
-  // Default Rich Text Translations
-  defaultTranslationValues: defaultRichTextValues,
   // We always define the App timezone as UTC
   timeZone: 'Etc/UTC',
 }));

i18n.tsx

@@ -17,11 +17,11 @@
         "about": "About",
         "download": "Download",
         "docs": "Docs",
-        "getInvolved": "Get Involved",
+        "guides": "Guides",
         "learn": "Learn",
         "security": "Security",
         "certification": "Certification",
-        "blog": "News"
+        "blog": "Blog"
       },
       "buttons": {
         "toggleLanguage": "Toggle Language",
@@ -87,16 +87,6 @@
           "security": "Security Reporting"
         }
       },
-      "docs": {
-        "links": {
-          "docs": "Docs",
-          "es6": "ES6 and beyond",
-          "apiLts": "{fullLtsNodeVersion} API <graySpan>LTS</graySpan>",
-          "apiCurrent": "{fullCurrentNodeVersion} API",
-          "guides": "Guides <graySpan>ARCHIVE</graySpan>",
-          "dependencies": "Dependencies"
-        }
-      },
       "getInvolved": {
         "links": {
           "getInvolved": "Get Involved",

i18n/locales/en.json

@@ -4,7 +4,7 @@ import SideNavigation from '@/components/SideNavigation';
 
 const AboutLayout: FC<PropsWithChildren> = ({ children }) => (
   <div className="has-side-nav container">
-    <SideNavigation navigationKey="about" />
+    <SideNavigation navigationKeys={['about', 'getInvolved']} />
     <article dir="auto">{children}</article>
   </div>
 );