feat: create release schedule component

Author: araujogui

apps/site/components/Releases/ReleaseSchedule/index.tsx

@@ -0,0 +1,36 @@
+import { create } from 'lts';
+
+import provideReleaseSchedule from '#site/next-data/providers/releaseSchedule';
+
+import type { FC } from 'react';
+
+const ReleaseSchedule: FC = async () => {
+  const schedule = await provideReleaseSchedule();
+
+  const now = new Date();
+
+  const threeMonthsAgo = new Date(now);
+  threeMonthsAgo.setMonth(now.getMonth() - 3);
+
+  const sixMonthsFromNow = new Date();
+  sixMonthsFromNow.setMonth(now.getMonth() + 6);
+
+  const svg = create({
+    data: schedule,
+    queryStart: threeMonthsAgo,
+    queryEnd: sixMonthsFromNow,
+    animate: true,
+    excludeMain: false,
+    projectName: 'Node.js',
+    currentDateMarker: 'red',
+  });
+
+  return (
+    <div
+      dangerouslySetInnerHTML={{ __html: svg.html() }}
+      className="h-auto w-auto"
+    />
+  );
+};
+
+export default ReleaseSchedule;

apps/site/mdx/components.mjs

@@ -34,6 +34,7 @@ import MDXImage from '#site/components/MDX/Image';
 import MinorReleasesTable from '#site/components/Releases/MinorReleasesTable';
 import PreviousReleasesTable from '#site/components/Releases/PreviousReleasesTable';
 import ReleaseOverview from '#site/components/Releases/ReleaseOverview';
+import ReleaseSchedule from '#site/components/Releases/ReleaseSchedule';
 import WithBadgeGroup from '#site/components/withBadgeGroup';
 import WithBanner from '#site/components/withBanner';
 import WithDownloadArchive from '#site/components/withDownloadArchive';
@@ -96,6 +97,7 @@ export default {
   BadgeGroup,
   ReleaseOverview,
   MinorReleasesTable,
+  ReleaseSchedule,
   UpcomingMeetings,
   EOLAlertBox,
   EOLReleaseTable,

apps/site/next-data/generators/releaseSchedule.mjs

@@ -0,0 +1,12 @@
+import { RELEASE_SCHEDULE_URL } from '#site/next.constants.mjs';
+import { fetchWithRetry } from '#site/util/fetch';
+
+async function fetchReleaseSchedule() {
+  const response = await fetchWithRetry(RELEASE_SCHEDULE_URL);
+
+  const payload = await response.json();
+
+  return payload;
+}
+
+export default fetchReleaseSchedule;

apps/site/next-data/providers/releaseSchedule.ts

@@ -0,0 +1,5 @@
+import { cache } from 'react';
+
+import fetchReleaseSchedule from '#site/next-data/generators/releaseSchedule.mjs';
+
+export default cache(fetchReleaseSchedule);

apps/site/next-env.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
 /// <reference types="next/navigation-types/compat/navigation" />
-import './.next/types/routes.d.ts';
+import './.next/dev/types/routes.d.ts';
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/site/next.constants.mjs

@@ -219,3 +219,9 @@ export const VULNERABILITIES_URL =
  */
 export const OPENCOLLECTIVE_MEMBERS_URL =
   'https://opencollective.com/nodejs/members/all.json';
+
+/**
+ * The location of the Node.js release schedule JSON.
+ */
+export const RELEASE_SCHEDULE_URL =
+  'https://raw.githubusercontent.com/nodejs/Release/refs/heads/main/schedule.json';

apps/site/package.json

@@ -58,6 +58,7 @@
     "feed": "~5.1.0",
     "github-slugger": "~2.0.0",
     "gray-matter": "~4.0.3",
+    "lts": "github:araujogui/lts-schedule#refactor-website",
     "mdast-util-to-string": "^4.0.0",
     "next": "16.0.10",
     "next-intl": "~4.5.3",

apps/site/pages/en/about/previous-releases.mdx

@@ -14,7 +14,7 @@ Production applications should only use _Active LTS_ or _Maintenance LTS_ releas
 
 ## Release Schedule
 
-![Releases](https://raw.githubusercontent.com/nodejs/Release/main/schedule.svg?sanitize=true)
+<ReleaseSchedule />
 
 Full details regarding the Node.js release schedule are available [on GitHub](https://github.com/nodejs/release#release-schedule).