Add more events pages.

Author: hokeun

src/components/Events/events.tsx

@@ -7,22 +7,45 @@ export interface Event {
   link?: string;
   type: "conference" | "workshop" | "meetup" | "webinar" | "hackathon";
   isUpcoming: boolean;
+  isExternal?: boolean; // true if link goes to external site
 }
 
 // Add your events here
 // Events are automatically sorted by date
 export const events: Event[] = [
-  // Example events - replace with actual events
-  // {
-  //   title: "Lingua Franca Workshop 2025",
-  //   date: "2025-03-15",
-  //   endDate: "2025-03-16",
-  //   location: "UC Berkeley, CA",
-  //   description: "A two-day workshop on reactor-oriented programming with Lingua Franca.",
-  //   link: "https://example.com/workshop",
-  //   type: "workshop",
-  //   isUpcoming: true,
-  // },
+  // Upcoming Events
+  {
+    title: "ReCPS: Workshop on Reactive Cyber-Physical Systems",
+    date: "2026-03-31",
+    location: "DATE 2026 Conference, Valencia, Spain",
+    description:
+      "Workshop on Reactive Cyber-Physical Systems: Design, Simulation, and Coordination. Co-located with the Design, Automation and Test in Europe (DATE) Conference 2026.",
+    link: "/events/recps-2026",
+    type: "workshop",
+    isUpcoming: true,
+  },
+  // Past Events
+  {
+    title: "TCRS Workshop Series",
+    date: "2024-01-01",
+    location: "Various Locations",
+    description:
+      "Workshop series on Timing Centric Reactive Software, exploring reactor-oriented programming and time-sensitive applications.",
+    link: "https://www.tcrs.io/",
+    type: "workshop",
+    isUpcoming: false,
+    isExternal: true,
+  },
+  {
+    title: "Lingua Franca Tutorial at ESWEEK 2021",
+    date: "2021-10-08",
+    location: "Online (EMSOFT Conference)",
+    description:
+      "A comprehensive tutorial introducing Lingua Franca, a polyglot coordination language for concurrent and time-sensitive applications. Part of the Embedded Systems Week (ESWEEK) 2021.",
+    link: "/events/esweek-2021-tutorial",
+    type: "workshop",
+    isUpcoming: false,
+  },
 ];
 
 // Helper to sort events by date

src/components/Events/index.tsx

@@ -79,8 +79,30 @@ const formatDate = (dateStr: string, endDateStr?: string): string => {
   return startDate;
 };
 
+// External link icon
+const ExternalLinkIcon = () => (
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    style={{ marginLeft: "4px", verticalAlign: "middle" }}
+  >
+    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+    <polyline points="15 3 21 3 21 9" />
+    <line x1="10" y1="14" x2="21" y2="3" />
+  </svg>
+);
+
 const EventCard = ({ event }: { event: Event }) => {
   const typeClassName = styles[event.type] || "";
+  const linkProps = event.isExternal
+    ? { target: "_blank", rel: "noopener noreferrer" }
+    : {};
 
   return (
     <div className={clsx("card", "margin-bottom--md", styles.eventCard)}>
@@ -92,7 +114,10 @@ const EventCard = ({ event }: { event: Event }) => {
             </span>
             <Heading as="h3" className="margin-top--sm margin-bottom--none">
               {event.link ? (
-                <Link href={event.link}>{event.title}</Link>
+                <Link href={event.link} {...linkProps}>
+                  {event.title}
+                  {event.isExternal && <ExternalLinkIcon />}
+                </Link>
               ) : (
                 event.title
               )}
@@ -113,8 +138,13 @@ const EventCard = ({ event }: { event: Event }) => {
       </div>
       {event.link && (
         <div className="card__footer">
-          <Link className="button button--primary button--sm" href={event.link}>
-            <Translate>Learn More</Translate>
+          <Link
+            className="button button--primary button--sm"
+            href={event.link}
+            {...linkProps}
+          >
+            <Translate>{event.isExternal ? "Visit Website" : "Learn More"}</Translate>
+            {event.isExternal && <ExternalLinkIcon />}
           </Link>
         </div>
       )}