(pulsar-site) 04/05: Order events by start date, don't add link if it's missing

[lh...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

lhotari pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/pulsar-site.git

commit 9dc8e63111d4e6c679cd42c8775bdc94f8bcb0ac
Author: Lari Hotari <lh...@users.noreply.github.com>
AuthorDate: Mon Oct 28 10:33:31 2024 +0200

    Order events by start date, don't add link if it's missing
---
 data/events.ts                                  |  8 +++----
 src/components/pages/EventsPage/Cards/Cards.tsx | 30 ++++++++++++++++++++-----
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/data/events.ts b/data/events.ts
index 24065e8a1af2..03c52a94a31d 100644
--- a/data/events.ts
+++ b/data/events.ts
@@ -30,15 +30,15 @@ export const resources: Record<Category, Resource[]> = {
       startDate: "2024-05-14", // year-month-day
     },
     {
-      title: "Pulsar Summit North America 2024",
-      description: "Comming soon",
-      link: "",
+      title: "Data Streaming Summit 2024",
+      description: "The Data Streaming Summit 2024 is taking place on October 28-29, 2024 Grand Hyatt SFO.",
+      link: "https://datastreaming-summit.org/",
       displayDate: "October 29th, 2024",
       startDate: "2024-10-29", // year-month-day
     },
     {
       title: "Pulsar Summit Asia 2024",
-      description: "Comming soon",
+      description: "",
       link: "",
       displayDate: "November 22nd, 2024",
       startDate: "2024-11-22", // year-month-day
diff --git a/src/components/pages/EventsPage/Cards/Cards.tsx b/src/components/pages/EventsPage/Cards/Cards.tsx
index 6103b772acce..70caffd1da7b 100644
--- a/src/components/pages/EventsPage/Cards/Cards.tsx
+++ b/src/components/pages/EventsPage/Cards/Cards.tsx
@@ -4,13 +4,28 @@ import s from './Cards.module.css';
 import * as data from '@site/data/events';
 
 const Card: React.FC<data.Resource> = (props) => {
-  return (
-    <a href={props.link} className={s.Card}>
+  const content = (
+    <>
       {props.displayDate && <p>{props.displayDate}</p>}
-      {props.description && <p>{props.description}</p>}
       <h3>{props.title}</h3>
-      <img src={useBaseUrl('/img/goto.svg')} />
+      {props.description && <p>{props.description}</p>}
+      {props.link && <img src={useBaseUrl('/img/goto.svg')} />}
+    </>
+  );
+
+  return props.link ? (
+    <a 
+      href={props.link} 
+      className={s.Card}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {content}
     </a>
+  ) : (
+    <div className={s.Card}>
+      {content}
+    </div>
   );
 };
 
@@ -27,9 +42,14 @@ const Cards: React.FC<CardsProps> = (props) => {
     );
   }
 
+  const resources = props.resources.sort((a, b) => {
+    if (!a.startDate || !b.startDate) return 0;
+    return b.startDate.localeCompare(a.startDate, 'en', { sensitivity: 'base' });
+  });
+
   return (
     <section className={s.Cards}>
-      {props.resources.map((props, idx) => (
+      {resources.map((props, idx) => (
         <Card key={idx} {...props} />
       ))}
     </section>