feat: events/calendar page and a few minor fixes on components related to time, calendars, etc (#6266)

* chore: refactor a few utils

* chore: add calendar redirect

* chore: updated constants and i18n

* chore: add failsafe for blog data parsing

* chore: added gcal types

* feat: updated components for Time and new Calendar/Event components

* feat: updated layouts

* chore: home page changes requested by TSC

* chore: explain about api key

* fix: fixed events page

* chore: updated array type usage

* chore: minor fixes

* chore: updated text

* chore: storybook is pain

* chore: make utc small

* Apply suggestions from code review

Co-authored-by: Brian Muenzenmeyer <[e-mail]>
Signed-off-by: Claudio W <[e-mail]>

* chore: code-review changes

* chore: center content on extra large screens

---------

Signed-off-by: Claudio W <[e-mail]>
Co-authored-by: Brian Muenzenmeyer <[e-mail]>

.storybook/main.ts

···
     // `nodevu` is a Node.js-specific package that requires Node.js modules
     // this is incompatible with Storybook. So we just mock the module
     resolve: { ...config.resolve, alias: { '@nodevu/core': false } },
+    // We need to configure `node:` APIs as Externals to WebPack
+    // since essentially they're not supported on the browser
+    externals: {
+      'node:fs': 'commonjs fs',
+      'node:url': 'commonjs url',
+      'node:path': 'commonjs path',
+      'node:readline': 'commonjs readline',
+    },
     // Removes Pesky Critical Dependency Warnings due to `next/font`
-    ignoreWarnings: [e => e.message.includes('Critical dep')],
+    ignoreWarnings: [
+      e =>
+        e.message.includes('Critical dep') ||
+        e.message.includes('was not found in'),
+    ],
   }),
 };
 

.storybook/preview.tsx

···
   },
   decorators: [
     Story => (
-      <NextIntlClientProvider locale="en" messages={englishLocale}>
+      <NextIntlClientProvider
+        locale="en"
+        timeZone="Etc/UTC"
+        messages={englishLocale}
+      >
         <NotificationProvider viewportClassName="absolute top-0 left-0 list-none">
           <Story />
         </NotificationProvider>

components/Common/BlogPostCard/index.module.css

···
 .container {
-  @apply max-w-full;
+  @apply max-w-full
+    flex-1;
 }
 
 .subtitle {

components/Common/BlogPostCard/index.tsx

···
 import type { FC } from 'react';
 
 import AvatarGroup from '@/components/Common/AvatarGroup';
+import FormattedTime from '@/components/Common/FormattedTime';
 import Preview from '@/components/Common/Preview';
-import { Time } from '@/components/Common/Time';
 import Link from '@/components/Link';
 import { mapBlogCategoryToPreviewType } from '@/util/blogUtils';
 
···
   title: string;
   category: string;
   description?: string;
-  authors: Array<Author>;
-  date: Date;
-  slug: string;
+  authors?: Array<Author>;
+  date?: Date;
+  slug?: string;
 };
 
 const BlogPostCard: FC<BlogPostCardProps> = ({
···
   slug,
   category,
   description,
-  authors,
+  authors = [],
   date,
 }) => {
   const t = useTranslations();
···
       {description && <p className={styles.description}>{description}</p>}
 
       <footer className={styles.footer}>
-        <AvatarGroup avatars={avatars} />
+        <AvatarGroup avatars={avatars ?? []} />
 
         <div className={styles.author}>
-          <p>{avatars.map(avatar => avatar.alt).join(', ')}</p>
+          {avatars && <p>{avatars.map(({ alt }) => alt).join(', ')}</p>}
 
-          <Time
-            date={date}
-            format={{ day: 'numeric', month: 'short', year: 'numeric' }}
-          />
+          {date && <FormattedTime date={date} />}
         </div>
       </footer>
     </article>

components/Common/FormattedTime.tsx

···
+import type { DateTimeFormatOptions } from 'next-intl';
+import { useFormatter } from 'next-intl';
+import type { FC } from 'react';
+
+import { DEFAULT_DATE_FORMAT } from '@/next.calendar.constants.mjs';
+
+type FormattedTimeProps = {
+  date: string | Date;
+  format?: DateTimeFormatOptions;
+};
+
+const FormattedTime: FC<FormattedTimeProps> = ({ date, format }) => {
+  const formatter = useFormatter();
+
+  const dateObject = new Date(date);
+
+  return (
+    <time dateTime={dateObject.toISOString()}>
+      {formatter.dateTime(dateObject, format ?? DEFAULT_DATE_FORMAT)}
+    </time>
+  );
+};
+
+export default FormattedTime;

components/Common/Time/index.tsx

···
-import type { DateTimeFormatOptions } from 'next-intl';
-import { useFormatter } from 'next-intl';
-import type { FC } from 'react';
-import { useMemo } from 'react';
-
-type TimeProps = { date: string | Date; format: DateTimeFormatOptions };
-
-export const Time: FC<TimeProps> = ({ date, format }) => {
-  const formatter = useFormatter();
-
-  const dateObject = useMemo(() => new Date(date), [date]);
-
-  return (
-    <time dateTime={dateObject.toISOString()}>
-      {formatter.dateTime(dateObject, format)}
-    </time>
-  );
-};

components/MDX/Calendar/Event/index.module.css

···
+.event {
+  @apply flex
+    w-fit
+    flex-col
+    gap-1;
+
+  .title {
+    @apply flex
+      flex-row
+      gap-2;
+
+    span {
+      @apply text-sm
+        font-bold;
+    }
+  }
+
+  a {
+    @apply text-sm;
+  }
+}

components/MDX/Calendar/Event/index.tsx

···
+import type { FC } from 'react';
+
+import FormattedTime from '@/components/Common/FormattedTime';
+import Link from '@/components/Link';
+import { getZoomLink, isZoned } from '@/components/MDX/Calendar/utils';
+import type { CalendarEvent } from '@/types';
+
+import styles from './index.module.css';
+
+type EventProps = Pick<
+  CalendarEvent,
+  'start' | 'end' | 'summary' | 'location' | 'description'
+>;
+
+const Event: FC<EventProps> = ({
+  start,
+  end,
+  description,
+  summary,
+  location,
+}) => (
+  <div className={styles.event}>
+    <div className={styles.title}>
+      <span>
+        <FormattedTime
+          date={isZoned(start) ? start.dateTime : start.date}
+          format={{ hour: 'numeric', minute: 'numeric' }}
+        />
+      </span>
+      <span>-</span>
+      <span>
+        <FormattedTime
+          date={isZoned(end) ? end.dateTime : end.date}
+          format={{ hour: 'numeric', minute: 'numeric' }}
+        />
+      </span>
+      <small>(UTC)</small>
+    </div>
+
+    <Link href={getZoomLink({ description, location })}>{summary}</Link>
+  </div>
+);
+
+export default Event;

components/MDX/Calendar/UpcomingEvents.tsx

···
+import type { FC } from 'react';
+
+import FormattedTime from '@/components/Common/FormattedTime';
+import Event from '@/components/MDX/Calendar/Event';
+import { getZoomLink, isZoned } from '@/components/MDX/Calendar/utils';
+import { CALENDAR_NODEJS_ID } from '@/next.calendar.constants.mjs';
+import { getCalendarEvents } from '@/next.calendar.mjs';
+import type { CalendarEvent } from '@/types';
+
+import styles from './calendar.module.css';
+
+type GrouppedEntries = Record<string, Array<CalendarEvent>>;
+
+const UpcomingEvents: FC = async () => {
+  const events = await getCalendarEvents(CALENDAR_NODEJS_ID);
+
+  const groupedEntries = events.filter(getZoomLink).reduce((acc, event) => {
+    const startDate = new Date(
+      isZoned(event.start) ? event.start.dateTime : event.start.date
+    );
+
+    const datePerDay = startDate.toDateString();
+
+    acc[datePerDay] = acc[datePerDay] || [];
+    acc[datePerDay].push(event);
+
+    return acc;
+  }, {} as GrouppedEntries);
+
+  const sortedGroupedEntries = Object.entries(groupedEntries).sort(
+    ([dateA], [dateB]) => new Date(dateA).getTime() - new Date(dateB).getTime()
+  );
+
+  return sortedGroupedEntries.map(([date, entries]) => (
+    <div key={date} className={styles.events}>
+      <h4>
+        <FormattedTime date={date} format={{ day: 'numeric', month: 'long' }} />
+      </h4>
+
+      {entries.map(({ id, start, end, summary, location, description }) => (
+        <Event
+          key={id}
+          start={start}
+          end={end}
+          summary={summary}
+          location={location}
+          description={description}
+        />
+      ))}
+    </div>
+  ));
+};
+
+export default UpcomingEvents;

components/MDX/Calendar/UpcomingSummits.tsx

···
+import { getTranslations } from 'next-intl/server';
+import type { FC } from 'react';
+
+import BlogPostCard from '@/components/Common/BlogPostCard';
+import getBlogData from '@/next-data/blogData';
+
+import styles from './calendar.module.css';
+
+const UpcomingSummits: FC = async () => {
+  const t = await getTranslations();
+  const { posts } = await getBlogData('events', 0);
+
+  const currentDate = new Date();
+  const filteredPosts = posts.filter(post => post.date >= currentDate);
+
+  const fallbackPosts = Array(2).fill({
+    title: t('components.mdx.upcomingEvents.defaultTitle'),
+    categories: ['events'],
+  });
+
+  const mappedPosts = fallbackPosts.map((post, key) => {
+    const actualPost = filteredPosts[key] || post;
+
+    return (
+      <BlogPostCard
+        key={actualPost.slug || key}
+        title={actualPost.title}
+        category={actualPost.categories[0]}
+        date={actualPost.date}
+        slug={actualPost.slug}
+      />
+    );
+  });
+
+  return <div className={styles.summits}>{mappedPosts}</div>;
+};
+
+export default UpcomingSummits;

components/MDX/Calendar/calendar.module.css

···
+.events {
+  @apply flex
+    flex-col
+    gap-2;
+
+  h4 {
+    @apply text-xl
+      font-bold;
+  }
+}
+
+.summits {
+  @apply flex
+    flex-col
+    gap-3
+    md:flex-row;
+}

components/MDX/Calendar/utils.ts

···
+import type { CalendarEvent, ZonedCalendarTime } from '@/types';
+
+export const isZoned = (d: object): d is ZonedCalendarTime =>
+  'dateTime' in d && 'timeZone' in d;
+
+export const getZoomLink = (
+  event: Pick<CalendarEvent, 'description' | 'location'>
+) =>
+  event.description?.match(/https:\/\/zoom.us\/j\/\d+/)?.[0] ||
+  event.location?.match(/https:\/\/zoom.us\/j\/\d+/)?.[0];

components/withBadge.tsx

···
 
 import Badge from '@/components/Common/Badge';
 import { siteConfig } from '@/next.json.mjs';
-import { dateIsBetween } from '@/util/dateIsBetween';
+import { dateIsBetween } from '@/util/dateUtils';
 
 const WithBadge: FC<{ section: string }> = ({ section }) => {
   const badge = siteConfig.websiteBadges[section];

components/withBanner.tsx

···
 
 import Banner from '@/components/Common/Banner';
 import { siteConfig } from '@/next.json.mjs';
-import { dateIsBetween } from '@/util/dateIsBetween';
+import { dateIsBetween } from '@/util/dateUtils';
 
 const WithBanner: FC<{ section: string }> = ({ section }) => {
   const banner = siteConfig.websiteBanners[section];

components/withMetaBar.tsx

···
 import GitHub from '@/components/Icons/Social/GitHub';
 import Link from '@/components/Link';
 import { useClientContext } from '@/hooks/server';
+import { DEFAULT_DATE_FORMAT } from '@/next.calendar.constants.mjs';
 import { getGitHubBlobUrl } from '@/util/gitHubUtils';
 
-const DATE_FORMAT = {
-  month: 'short',
-  day: '2-digit',
-  year: 'numeric',
-} as const;
-
 const WithMetaBar: FC = () => {
   const { headings, readingTime, frontmatter, filename } = useClientContext();
   const formatter = useFormatter();
 
   const lastUpdated = frontmatter.date
-    ? formatter.dateTime(new Date(frontmatter.date), DATE_FORMAT)
+    ? formatter.dateTime(new Date(frontmatter.date), DEFAULT_DATE_FORMAT)
     : undefined;
 
   return (

i18n/locales/en.json

···
       "about": {
         "links": {
           "about": "About Node.js",
+          "aboutSide": "About Node.js®",
           "governance": "Project Governance",
           "releases": "Previous Releases",
           "security": "Security Reporting"
···
       "getInvolved": {
         "links": {
           "getInvolved": "Get Involved",
-          "collabSummit": "Collab Summit",
-          "contribute": "Contribute",
+          "collabSummit": "Collaborator Summit",
+          "upcomingEvents": "Upcoming Events",
+          "contribute": "Contribute to Node.js",
           "codeOfConduct": "Code of Conduct"
         }
       }
···
       },
       "languageDropdown": {
         "label": "Choose Language"
+      }
+    },
+    "mdx": {
+      "upcomingEvents": {
+        "defaultTitle": "No Upcoming Event"
       }
     },
     "metabar": {

layouts/BlogCategoryLayout.tsx

···
 import type { FC } from 'react';
 
 import { getClientContext } from '@/client-context';
-import { Time } from '@/components/Common/Time';
+import FormattedTime from '@/components/Common/FormattedTime';
 import Link from '@/components/Link';
 import Pagination from '@/components/Pagination';
 import getBlogData from '@/next-data/blogData';
···
       <ul className="blog-index">
         {posts.map(({ slug, date, title }) => (
           <li key={slug}>
-            <Time
-              date={date}
-              format={{ year: 'numeric', month: 'short', day: '2-digit' }}
-            />
+            <FormattedTime date={date} />
+
             <Link href={slug}>{title}</Link>
           </li>
         ))}

layouts/BlogPostLayout.tsx

···
 import { useTranslations } from 'next-intl';
 import type { FC, PropsWithChildren } from 'react';
 
-import { Time } from '@/components/Common/Time';
+import FormattedTime from '@/components/Common/FormattedTime';
 import { useClientContext } from '@/hooks/server';
 
 const BlogPostLayout: FC<PropsWithChildren> = ({ children }) => {
···
           <span className="blogpost-meta">
             {t('layouts.blogPost.author.byLine', { author: author || null })}
 
-            <Time
-              date={date}
-              format={{ month: 'short', day: '2-digit', year: 'numeric' }}
-            />
+            <FormattedTime date={date} />
           </span>
         </div>
 

layouts/New/Blog.tsx

···
               'announcements',
               'release',
               'vulnerability',
+              'events',
             ])}
           />
         </main>

layouts/New/layouts.module.css

···
             text-neutral-800
             dark:text-neutral-400
             xs:text-xs;
+
+          sup {
+            @apply cursor-help;
+          }
         }
       }
     }
···
 }
 
 .contentLayout {
-  @apply grid
+  @apply mx-auto
+    grid
     w-full
     max-w-8xl
     grid-rows-[1fr]
···
     @apply flex
       w-full
       justify-center
+      border-l
+      border-l-neutral-200
       bg-gradient-subtle
       px-4
       py-14
+      dark:border-l-neutral-900
       dark:bg-gradient-subtle-dark
       md:px-14
       lg:px-28
+      xs:border-l-0
       xs:bg-none
       xs:pb-4
       xs:dark:bg-none;

navigation.json

···
       "items": {
         "about": {
           "link": "/about",
-          "label": "components.navigation.about.links.about"
+          "label": "components.navigation.about.links.aboutSide"
         },
         "governance": {
           "link": "/about/governance",
···
         "collabSummit": {
           "link": "/about/get-involved/collab-summit",
           "label": "components.navigation.getInvolved.links.collabSummit"
+        },
+        "upcomingEvents": {
+          "link": "/about/get-involved/events",
+          "label": "components.navigation.getInvolved.links.upcomingEvents"
         },
         "contribute": {
           "link": "/about/get-involved/contribute",

next-data/blogData.ts

···
 } from '@/next.constants.mjs';
 import type { BlogPostsRSC } from '@/types';
 
+// Prevents React from throwing an Error when not able to fulfil a request
+// due to missing category or internal processing errors
+const parseBlogDataResponse = (data: string): BlogPostsRSC =>
+  data.startsWith('{') ? JSON.parse(data) : { posts: [], pagination: {} };
+
 const getBlogData = (cat: string, page?: number): Promise<BlogPostsRSC> => {
   // When we're using Static Exports the Next.js Server is not running (during build-time)
   // hence the self-ingestion APIs will not be available. In this case we want to load
···
   // When we're on RSC with Server capabilities we prefer using Next.js Data Fetching
   // as this will load cached data from the server instead of generating data on the fly
   // this is extremely useful for ISR and SSG as it will not generate this data on every request
-  return fetch(fetchURL).then(r => r.json());
+  return fetch(fetchURL).then(r => r.text().then(parseBlogDataResponse));
 };
 
 export default getBlogData;

next-data/generators/releaseData.mjs

···
  * This method is used to generate the Node.js Release Data
  * for self-consumption during RSC and Static Builds
  *
- * @returns {Promise<import('../../types').NodeRelease[]>}
+ * @returns {Promise<Array<import('../../types').NodeRelease>>}
  */
 const generateReleaseData = () => {
   return nodevu({ fetch: fetch }).then(nodevuOutput => {

next-data/generators/websiteFeeds.mjs

···
   /**
    * This generates all the Website RSS Feeds that are used for the website
    *
-   * @type {[string, Feed][]}
+   * @type {Array<[string, Feed]>}
    */
   const websiteFeeds = siteConfig.rssFeeds.map(
     ({ category, title, description, file }) => {

next.calendar.constants.mjs

···
+'use strict';
+
+/**
+ * This is used for Node.js Calendar and any other Google Calendar that we might want to load within the Website
+ *
+ * Note that this is a custom Environment Variable that can be defined by us when necessary
+ */
+export const BASE_CALENDAR_URL =
+  process.env.NEXT_PUBLIC_CALENDAR_URL ||
+  `https://clients6.google.com/calendar/v3/calendars/`;
+
+/**
+ * This is a shared (public) Google Calendar Key (accessible on the Web) for accessing Google's Public Calendar API
+ *
+ * This is a PUBLIC available API Key and not a Secret; It's exposed by Google on their Calendar API Docs
+ *
+ * Note that this is a custom Environment Variable that can be defined by us when necessary
+ */
+export const SHARED_CALENDAR_KEY =
+  process.env.NEXT_PUBLIC_SHARED_CALENDAR_KEY ||
+  'AIzaSyBNlYH01_9Hc5S1J9vuFmu2nUqBZJNAXxs';
+
+/**
+ * This is Node.js's Public Google Calendar ID used for all public entries from Node.js Calendar
+ */
+export const CALENDAR_NODEJS_ID =
+  '[e-mail]';
+
+/**
+ * Default Date format for Calendars and Time Components
+ *
+ * @type {import('next-intl').DateTimeFormatOptions}
+ */
+export const DEFAULT_DATE_FORMAT = {
+  year: 'numeric',
+  month: 'short',
+  day: '2-digit',
+};

next.calendar.mjs

···
+'use strict';
+
+import {
+  BASE_CALENDAR_URL,
+  SHARED_CALENDAR_KEY,
+} from './next.calendar.constants.mjs';
+
+/**
+ *
+ * @param {string} calendarId
+ * @param {number} maxResults
+ * @returns {Promise<Array<import('./types').CalendarEvent>>}
+ */
+export const getCalendarEvents = async (calendarId = '', maxResults = 20) => {
+  const currentDate = new Date();
+  const nextWeekDate = new Date();
+
+  nextWeekDate.setDate(currentDate.getDate() + 7);
+
+  const calendarQueryParams = new URLSearchParams({
+    calendarId,
+    maxResults,
+    singleEvents: true,
+    timeZone: 'Etc/Utc',
+    key: SHARED_CALENDAR_KEY,
+    timeMax: nextWeekDate.toISOString(),
+    timeMin: currentDate.toISOString(),
+  });
+
+  const calendarQueryUrl = new URL(`${BASE_CALENDAR_URL}${calendarId}/events`);
+
+  calendarQueryParams.forEach((value, key) =>
+    calendarQueryUrl.searchParams.append(key, value)
+  );
+
+  return fetch(calendarQueryUrl.toString())
+    .then(response => response.json())
+    .then(calendar => calendar.items);
+};

next.dynamic.constants.mjs

···
  * This is a list of all static routes or pages from the Website that we do not
  * want to allow to be statically built on our Static Export Build.
  *
- * @type {((route: import('./types').RouteSegment) => boolean)[]} A list of Ignored Routes by Regular Expressions
+ * @type {Array<((route: import('./types').RouteSegment) => boolean)>} A list of Ignored Routes by Regular Expressions
  */
 export const IGNORED_ROUTES = [
   // This is used to ignore all blog routes except for the English language

next.dynamic.mjs

···
    * This method returns a list of all routes that exist for a given locale
    *
    * @param {string} locale
-   * @returns {string[]}
+   * @returns {Array<string>}
    */
   const getRoutesByLanguage = async (locale = defaultLocale.code) => {
     const shouldIgnoreStaticRoute = pathname =>

next.helpers.mjs

···
  *
  * @param {string} root the root directory to search from
  * @param {string} cwd the current working directory
- * @returns {Promise<string[]>} a promise containing an array of directories
+ * @returns {Promise<Array<string>>} a promise containing an array of directories
  */
 export const getDirectories = async (root, cwd) => {
   return glob('*', { root, cwd, withFileTypes: true })
···
  *
  * @param {string} root the root directory to search from
  * @param {string} cwd the given locale code
- * @param {string[]} ignore an array of glob patterns to ignore
- * @returns {Promise<string[]>} a promise containing an array of paths
+ * @param {Array<string>} ignore an array of glob patterns to ignore
+ * @returns {Promise<Array<string>>} a promise containing an array of paths
  */
 export const getMarkdownFiles = async (root, cwd, ignore = []) => {
   const cacheKey = `${root}${cwd}${ignore.join('')}`;

next.json.mjs

···
 /** @type {import('./types').SiteNavigation} */
 export const siteNavigation = _siteNavigation;
 
-/** @type {Record<string, import('./types').Redirect[]>} */
+/** @type {Record<string, Array<import('./types').Redirect>>} */
 export const siteRedirects = _siteRedirects;
 
 /** @type {import('./types').SiteConfig} */

next.mdx.compiler.mjs

···
  * @param {'md' | 'mdx'} fileExtension
  * @returns {Promise<{
  *   MDXContent: import('mdx/types').MDXContent;
- *   headings: import('@vcarl/remark-headings').Heading[];
+ *   headings: Array<import('@vcarl/remark-headings').Heading>;
  *   frontmatter: Record<string, any>;
  *   readingTime: import('reading-time').ReadTimeResults;
  * }>}
···
     remarkPlugins: NEXT_REMARK_PLUGINS,
     format: fileExtension,
     baseUrl: import.meta.url,
-    jsxRuntime: 'automatic',
     ...reactRuntime,
   });
 

next.mdx.mjs

···
 /**
  * Provides all our Rehype Plugins that are used within MDX
  *
- * @type {import('unified').Plugin[]}
+ * @type {Array<import('unified').Plugin>}
  */
 export const NEXT_REHYPE_PLUGINS = [
   // Generates `id` attributes for headings (H1, ...)
···
 /**
  * Provides all our Remark Plugins that are used within MDX
  *
- * @type {import('unified').Plugin[]}
+ * @type {Array<import('unified').Plugin>}
  */
 export const NEXT_REMARK_PLUGINS = [remarkGfm, remarkHeadings, readingTime];

next.mdx.shiki.mjs

···
 /**
  * @typedef {import('unist').Node} Node
  * @property {string} tagName
- * @property {Node[]} children
+ * @property {Array<import('unist').Node>} children
  */
 
 /**
  * Checks if the given node is a valid code element.
  *
- * @param {Node} node - The node to be verified.
+ * @param {import('unist').Node} node - The node to be verified.
  *
  * @return {boolean} - True when it is a valid code element, false otherwise.
  */

next.mdx.use.mjs

···
 import DownloadReleasesTable from './components/Downloads/DownloadReleasesTable';
 import HomeDownloadButton from './components/Home/HomeDownloadButton';
 import Link from './components/Link';
+import UpcomingEvents from './components/MDX/Calendar/UpcomingEvents';
+import UpcomingSummits from './components/MDX/Calendar/UpcomingSummits';
 import MDXCodeBox from './components/MDX/CodeBox';
 import MDXCodeTabs from './components/MDX/CodeTabs';
 import WithBadge from './components/withBadge';
···
   DownloadLink: DownloadLink,
   // Renders a Button Component for `button` tags
   Button: Button,
+  // Renders an container for Upcoming Node.js Summits
+  UpcomingSummits: UpcomingSummits,
+  // Renders an container for Upcoming Node.js Events
+  UpcomingEvents: UpcomingEvents,
 };
 
 /**

pages/en/about/get-involved/collab-summit.md

···
 layout: about.hbs
 ---
 
-# Collab Summit
+# Collaborator Summit
 
-Collaboration Summit is an un-conference for bringing current and
+Node.js's Collaborator Summit is an un-conference for bringing current and
 potential contributors together to discuss Node.js with lively collaboration,
 education, and knowledge sharing. Committees and working groups come together
 twice per year to make important decisions while also being able to work on some

pages/en/about/get-involved/events.mdx

···
+---
+title: Upcoming Events
+layout: about.hbs
+---
+
+## Upcoming Node.js® Summits
+
+Interested in joining a [Collaborator Summit](/about/get-involved/collab-summit) hosted by the Node.js project?
+Check out the list below to find upcoming events.
+
+Browse [previous Collaborator Summits & Events](/blog/events/) hosted by Node.js.
+
+<UpcomingSummits />
+
+---
+
+## Upcoming Node.js® Events
+
+The Node.js project holds numerous meetings throughout the year to discuss and plan aspects of the project.
+These meetings are open and available to the public. Anyone is welcome to join and participate.
+
+The following Events are upcoming in the next 7 days.
+
+<UpcomingEvents />

pages/en/new-design/index.mdx

···
   <div>
     <h1 className="special">Run JavaScript Everywhere</h1>
 
-    Node.js is a free, open-source, cross-platform JavaScript runtime
+    Node.js® is a free, open-source, cross-platform JavaScript runtime
     environment that lets developers write command line tools and server-side
     scripts outside of a browser.
 
···
         <>
           <DownloadButton release={release}>Download Node.js (LTS)</DownloadButton>
           <small>
-            Downloads Node.js <b>{release.versionWithPrefix}</b> with long-term support.
+            Downloads Node.js <b>{release.versionWithPrefix}</b>
+            <sup title="Downloads Node.js binary for your current platform">1</sup> with long-term support.
             Node.js can also be installed via <a href="/download/package-manager">package managers</a>.
           </small>
         </>
···
       {({ release }) => (
         <small>
           Want new features sooner?
-          Get <b>Node.js <DownloadLink release={release}>{release.versionWithPrefix}</DownloadLink></b> instead.
+          Get <b>Node.js <DownloadLink release={release}>{release.versionWithPrefix}</DownloadLink></b>
+          <sup title="Downloads Node.js binary for your current platform">1</sup> instead.
         </small>
       )}
     </WithNodeRelease>
···
     readableStream.on('data', chunk => writableStream.write(chunk));
     ```
 
-    ```js displayName="Work with Workers"
-    // file containing main thread (main.mjs)
-    import { Worker } from 'node:worker_threads';
-
-    const w = new Worker('./worker.mjs', { workerData: 'hello!' });
-    w.on('message', data => console.log('processed data:', data));
-
-    // file containing worker (worker.mjs)
-    import { parentPort, workerData } from 'node:worker_threads';
+    ```js displayName="Work with Threads"
+    import { Worker, isMainThread } from 'node:worker_threads';
+    import { workerData, parentPort } from 'node:worker_threads';
 
-    // do some complex computational workload
-    parentPort.postMessage(btoa(workerData));
+    if (isMainThread) {
+      const data = 'some data';
+      const worker = new Worker(import.meta.filename, { workerData: data });
+      worker.on('message', m => console.log('Reply from Thread:', m));
+    } else {
+      const source = workerData;
+      parentPort.postMessage(btoa(source.toUpperCase()));
+    }
     ```
 
   </div>

redirects.json

···
     {
       "source": "/:locale/about/releases",
       "destination": "/:locale/about/previous-releases"
+    },
+    {
+      "source": "/:locale/blog/weekly-updates/:path*",
+      "destination": "/:locale/blog/weekly/:path*"
     }
   ],
   "internal": []

shiki.config.mjs

···
 import typeScriptLanguage from 'shikiji/langs/typescript.mjs';
 import shikiNordTheme from 'shikiji/themes/nord.mjs';
 
-/** @type {import('shikiji').LanguageRegistration[]} */
+/** @type {Array<import('shikiji').LanguageRegistration>} */
 export const LANGUAGES = [
   {
     ...javaScriptLanguage[0],

types/calendar.ts

···
+export interface ZonedCalendarTime {
+  dateTime: string;
+  timeZone: string;
+}
+
+export interface SimpleCalendarTime {
+  date: string;
+}
+
+export interface CalendarEvent {
+  id: string;
+  summary: string;
+  location?: string;
+  creator: string;
+  start: ZonedCalendarTime | SimpleCalendarTime;
+  end: ZonedCalendarTime | SimpleCalendarTime;
+  htmlLink: string;
+  description?: string;
+}

types/index.ts

···
 export * from './redirects';
 export * from './server';
 export * from './github';
+export * from './calendar';

util/__tests__/dateIsBetween.test.mjs util/__tests__/dateUtils.test.mjs

···
-import { dateIsBetween } from '../dateIsBetween';
+import { dateIsBetween } from '../dateUtils';
 
 describe('dateIsBetween', () => {
   it('returns true when the current date is between start and end dates', () => {

util/blogUtils.ts

···
     case 'release':
     case 'vulnerability':
       return type;
+    case 'events':
+      return 'announcements';
     default:
       return 'announcements';
   }