feat: release alert box

Author: canerakdas

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

@@ -1,11 +1,11 @@
-import AlertBox from '@node-core/ui-components/Common/AlertBox';
 import Modal from '@node-core/ui-components/Common/Modal';
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
 import { MinorReleasesTable } from '#site/components/Downloads/MinorReleasesTable';
 import { ReleaseOverview } from '#site/components/Downloads/ReleaseOverview';
 import LinkWithArrow from '#site/components/LinkWithArrow';
+import WithReleaseAlertBox from '#site/components/withReleaseAlertBox';
 import type { NodeRelease } from '#site/types';
 
 type ReleaseModalProps = {
@@ -32,15 +32,7 @@ const ReleaseModal: FC<ReleaseModalProps> = ({
 
   return (
     <Modal open={isOpen} onOpenChange={closeModal} heading={modalHeading}>
-      {release.status === 'End-of-life' && (
-        <AlertBox
-          title={t('components.common.alertBox.warning')}
-          level="warning"
-          size="small"
-        >
-          {t('components.releaseModal.unsupportedVersionWarning')}
-        </AlertBox>
-      )}
+      <WithReleaseAlertBox status={release.status} />
 
       {release.releaseAnnounceLink && (
         <LinkWithArrow href={release.releaseAnnounceLink}>

apps/site/components/withReleaseAlertBox.tsx

@@ -0,0 +1,30 @@
+import AlertBox from '@node-core/ui-components/Common/AlertBox';
+import { useTranslations } from 'next-intl';
+import type { FC } from 'react';
+
+import type { NodeReleaseStatus } from '#site/types';
+
+type WithReleaseAlertBoxProps = {
+  status: NodeReleaseStatus;
+};
+
+const WithReleaseAlertBox: FC<WithReleaseAlertBoxProps> = ({ status }) => {
+  const t = useTranslations();
+
+  switch (status) {
+    case 'End-of-life':
+      return (
+        <AlertBox
+          title={t('components.common.alertBox.warning')}
+          level="warning"
+          size="small"
+        >
+          {t('components.releaseModal.unsupportedVersionWarning')}
+        </AlertBox>
+      );
+    default:
+      return null;
+  }
+};
+
+export default WithReleaseAlertBox;

apps/site/next.mdx.use.mjs

@@ -9,6 +9,7 @@ import WithBadgeGroup from './components/withBadgeGroup';
 import WithBanner from './components/withBanner';
 import WithDownloadArchive from './components/withDownloadArchive';
 import WithNodeRelease from './components/withNodeRelease';
+import WithReleaseAlertBox from './components/withReleaseAlertBox';
 
 /**
  * A full list of React Components that we want to pass through to MDX
@@ -23,6 +24,8 @@ export const mdxComponents = {
   DownloadsTable: DownloadsTable,
   // HOC for getting Node.js Release Metadata
   WithNodeRelease: WithNodeRelease,
+  // Renders an alert box with the given release status
+  WithReleaseAlertBox: WithReleaseAlertBox,
   // HOC for providing Banner Data
   WithBanner: WithBanner,
   // HOC for providing Badge Data

apps/site/pages/en/download/archive.mdx

@@ -11,6 +11,7 @@ layout: download-archive
         {version}
         {release.codename && ` (${release.codename})`}
       </h2>
+      <WithReleaseAlertBox status={release.status} />
       <ReleaseOverview release={release} />
       <ul>
         <li>

packages/ui-components/styles/markdown.css

@@ -172,13 +172,22 @@ main {
   }
 
   details {
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      @apply inline;
+    summary * {
+      @apply inline
+        pl-2;
+    }
+
+    a {
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        @apply inline
+          text-green-600
+          dark:text-green-400;
+      }
     }
   }
 }