Add an intro box to Developer Meetings index

meetings/schedule.ts

@@ -0,0 +1,9 @@
+export const MEETINGS_INFO = {
+  eventLink: "https://discord.com/invite/stellardev?event=1496911886321713163",
+  xLink: "https://x.com/BuildOnStellar",
+  youtubeLink: "https://www.youtube.com/@StellarDevelopmentFoundation",
+  timeZone: "America/Los_Angeles",
+  weekday: "Thursday", // must capitalize
+  hour: 13,
+  minute: 0,
+} as const;

src/components/MeetingIndexCard.tsx

@@ -0,0 +1,243 @@
+import React from "react";
+import Link from "@docusaurus/Link";
+
+import { MEETINGS_INFO } from "../../meetings/schedule";
+
+type DateParts = {
+  year: number;
+  month: number;
+  day: number;
+  hour?: number;
+  minute?: number;
+  second?: number;
+  weekday?: string;
+};
+
+export default function MeetingIndexCard(): React.ReactElement {
+  const [localMeetingTime, setLocalMeetingTime] = React.useState<string | null>(
+    null,
+  );
+  const fallbackMeetingTime = formatMeetingTimeFallback();
+
+  React.useEffect(() => {
+    try {
+      const nextMeeting = getNextMeetingDate(new Date());
+      setLocalMeetingTime(formatMeetingDisplay(nextMeeting));
+    } catch {
+      // Keep the fallback display if timezone calculation fails.
+    }
+  }, []);
+
+  return (
+    <div className="card margin-bottom--lg">
+      <div className="card__body">
+        <h2 className="margin-bottom--sm">Developer Meetings</h2>
+        <p className="margin-bottom--sm" style={{ fontSize: "0.9rem" }}>
+          These are archived discussions of open Stellar meetings. Anyone can
+          attend them on {localMeetingTime ?? fallbackMeetingTime}. Join in the{" "}
+          <Link
+            href={MEETINGS_INFO.eventLink}
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            developer Discord
+          </Link>
+          , and follow{" "}
+          <Link
+            href={MEETINGS_INFO.xLink}
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            @BuildOnStellar
+          </Link>{" "}
+          on X or the{" "}
+          <Link
+            href={MEETINGS_INFO.youtubeLink}
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            Stellar Development Foundation
+          </Link>{" "}
+          on YouTube for streams and updates.
+        </p>
+        <div style={{ display: "flex", flexWrap: "wrap", gap: "0.75rem" }}>
+          <Link
+            className="button button--primary"
+            style={{ color: "var(--ifm-color-white)" }}
+            to="/meetings"
+          >
+            Recent
+          </Link>
+          <Link
+            className="button button--primary"
+            style={{ color: "var(--ifm-color-white)" }}
+            to="/meetings/tags/developer"
+          >
+            Developer
+          </Link>
+          <Link
+            className="button button--primary"
+            style={{ color: "var(--ifm-color-white)" }}
+            to="/meetings/tags/protocol"
+          >
+            Protocol
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function formatMeetingTimeFallback(): string {
+  return formatMeetingSchedule(
+    MEETINGS_INFO.weekday,
+    formatMeetingTime(makeDateInTimeZone(), MEETINGS_INFO.timeZone),
+  );
+}
+
+function formatMeetingDisplay(date: Date): string {
+  const formatter = new Intl.DateTimeFormat(undefined, {
+    weekday: "long",
+  });
+  const parts = formatter.formatToParts(date);
+  const weekday = parts.find((part) => part.type === "weekday")?.value;
+
+  if (!weekday) {
+    return formatMeetingTime(date);
+  }
+  return formatMeetingSchedule(weekday, formatMeetingTime(date));
+}
+
+function formatMeetingSchedule(weekday: string, time: string): string {
+  return `${weekday}s at ${time}`;
+}
+
+function formatMeetingTime(date: Date, timeZone?: string): string {
+  const options: Intl.DateTimeFormatOptions = {
+    hour: "numeric",
+    minute: "2-digit",
+    timeZoneName: timeZone ? "longGeneric" : "short",
+  };
+
+  if (timeZone) {
+    options.timeZone = timeZone;
+  }
+
+  const formatter = new Intl.DateTimeFormat(undefined, options);
+  return formatter.format(date);
+}
+
+function datePartsToUtc(parts: DateParts): number {
+  return Date.UTC(
+    parts.year,
+    parts.month - 1,
+    parts.day,
+    parts.hour ?? 0,
+    parts.minute ?? 0,
+    parts.second ?? 0,
+  );
+}
+
+function getTimeZoneOffset(date: Date, timeZone: string): number {
+  const dtf = new Intl.DateTimeFormat("en-US", {
+    timeZone,
+    hour12: false,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+  const parts = dtf.formatToParts(date);
+  const values = parts.reduce<Record<string, number>>((acc, part) => {
+    if (part.type !== "literal") {
+      acc[part.type] = Number(part.value);
+    }
+    return acc;
+  }, {});
+  const asUtc = datePartsToUtc({
+    year: values.year,
+    month: values.month,
+    day: values.day,
+    hour: values.hour,
+    minute: values.minute,
+    second: values.second,
+  });
+  return (asUtc - date.getTime()) / 60000;
+}
+
+function makeDateInTimeZone(
+  parts: DateParts = {
+    year: 2019,
+    month: 11,
+    day: 4,
+    hour: MEETINGS_INFO.hour,
+    minute: MEETINGS_INFO.minute,
+  },
+): Date {
+  const utcDate = new Date(datePartsToUtc(parts));
+  const offsetMinutes = getTimeZoneOffset(utcDate, MEETINGS_INFO.timeZone);
+  return new Date(utcDate.getTime() - offsetMinutes * 60000);
+}
+
+function getTimeZoneParts(date: Date, timeZone: string): DateParts {
+  const dtf = new Intl.DateTimeFormat("en-US", {
+    timeZone,
+    weekday: "long",
+    hour12: false,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+  const parts = dtf.formatToParts(date);
+  const values = parts.reduce<Record<string, string>>((acc, part) => {
+    if (part.type !== "literal") {
+      acc[part.type] = part.value;
+    }
+    return acc;
+  }, {});
+  return {
+    year: Number(values.year),
+    month: Number(values.month),
+    day: Number(values.day),
+    hour: Number(values.hour),
+    minute: Number(values.minute),
+    second: Number(values.second),
+    weekday: values.weekday,
+  };
+}
+
+function getNextMeetingDate(now: Date): Date {
+  const ptParts = getTimeZoneParts(now, MEETINGS_INFO.timeZone);
+  const weekdayOrder = [
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ];
+  const currentIndex = weekdayOrder.indexOf(ptParts.weekday ?? "");
+  const targetIndex = weekdayOrder.indexOf(MEETINGS_INFO.weekday);
+  const rawDaysAhead = (targetIndex - currentIndex + 7) % 7;
+  const hasMeetingPassedToday =
+    rawDaysAhead === 0 &&
+    ((ptParts.hour ?? 0) > MEETINGS_INFO.hour ||
+      ((ptParts.hour ?? 0) === MEETINGS_INFO.hour &&
+        (ptParts.minute ?? 0) >= MEETINGS_INFO.minute));
+  const daysAhead =
+    rawDaysAhead === 0 && hasMeetingPassedToday ? 7 : rawDaysAhead;
+  const nextMeetingPT = {
+    year: ptParts.year,
+    month: ptParts.month,
+    day: ptParts.day + daysAhead,
+    hour: MEETINGS_INFO.hour,
+    minute: MEETINGS_INFO.minute,
+  };
+  return makeDateInTimeZone(nextMeetingPT);
+}

src/css/custom.scss

@@ -12,6 +12,20 @@
   --docusaurus-highlighted-code-line-bg: rgba(255, 255, 0, 0.15);
 }
 
+/* Meetings Index */
+
+html.blog-list-page article .markdown {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 9;
+  line-clamp: 9;
+  overflow: hidden;
+}
+
+html.blog-list-page article .markdown details {
+  display: none; // Hide transcripts
+}
+
 :root[data-theme="dark"] {
   --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.1);
 }

src/theme/BlogPostItems/index.tsx

@@ -0,0 +1,22 @@
+import React, { type ReactNode } from "react";
+import { useLocation } from "@docusaurus/router";
+import type { WrapperProps } from "@docusaurus/types";
+import OriginalBlogPostItems from "@theme-original/BlogPostItems";
+import type BlogPostItemsType from "@theme/BlogPostItems";
+
+import MeetingIndexCard from "../../components/MeetingIndexCard";
+
+const MEETING_ROUTE = "/meetings";
+
+type Props = WrapperProps<typeof BlogPostItemsType>;
+
+export default function BlogPostItemsWrapper(props: Props): ReactNode {
+  const { pathname } = useLocation();
+
+  return (
+    <>
+      {pathname === MEETING_ROUTE ? <MeetingIndexCard /> : null}
+      <OriginalBlogPostItems {...props} />
+    </>
+  );
+}