feat: create release schedule component

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

@@ -0,0 +1,35 @@
+import { create } from 'lts';
+
+import provideReleaseSchedule from '#site/next-data/providers/releaseSchedule';
+
+import type { FC } from 'react';
+
+const MONTH = 30 * 24 * 3_600_000;
+
+const ReleaseSchedule: FC = async () => {
+  const schedule = await provideReleaseSchedule();
+
+  const now = Date.now();
+
+  const threeMonthsAgo = new Date(now - 3 * MONTH);
+  const sixMonthsFromNow = new Date(now + 6 * MONTH);
+
+  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,10 @@
+import { RELEASE_SCHEDULE_URL } from '#site/next.constants.mjs';
+import { fetchWithRetry } from '#site/next.fetch.mjs';
+
+async function fetchReleaseSchedule() {
+  const response = await fetchWithRetry(RELEASE_SCHEDULE_URL);
+
+  return response.json();
+}
+
+export default fetchReleaseSchedule;

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

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

apps/site/next.constants.mjs

@@ -220,3 +220,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.2.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.1.7",
     "next-intl": "~4.8.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).