feat: ✨ Publication + Dataset + Events pages redesign

events/arvo-2024.md

@@ -1,8 +1,8 @@
 ---
 title: 'ARVO 2024 Annual Meeting'
-startDateTime: '2024-05-05T08:00:00'
-endDateTime: '2024-05-09T17:00:00'
-heroImage: 'https://i.imgur.com/tpVvtdW.jpeg'
+startDateTime: '2025-05-05T08:00:00'
+endDateTime: '2025-05-09T17:00:00'
+heroImage: 'https://images.unsplash.com/photo-1503428593586-e225b39bddfe?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
 subtitle: 'The ARVO Annual Meeting is the premiere gathering for eye and vision scientists from across the globe, at all career stages, students, and those in affiliated fields to share the latest research findings and collaborate on innovative solutions'
 type: 'Conference'
 timeZone: 'America/Los_Angeles'

events/bridge2ai-april-2024-open-house.md

@@ -1,8 +1,8 @@
 ---
 title: 'Bridge2AI April 2024 Open House'
-startDateTime: '2024-04-18T15:45:00'
-endDateTime: '2024-04-19T17:00:00'
-heroImage: 'https://i.imgur.com/FO21rRg.jpeg'
+startDateTime: '2025-04-18T15:45:00'
+endDateTime: '2025-04-19T17:00:00'
+heroImage: 'https://images.unsplash.com/photo-1529070538774-1843cb3265df?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
 subtitle: 'People, Ethics and Data'
 type: 'Conference'
 timeZone: 'America/New_York'

events/bridge2ai-pi-meeting.md

@@ -2,7 +2,7 @@
 title: 'Bridge2AI Annual PIs Meeting'
 startDateTime: '2024-12-05T08:00:00'
 endDateTime: '2024-12-06T17:00:00'
-heroImage: 'https://images.unsplash.com/photo-1549496620-037fca760261?q=80&w=2669&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
+heroImage: 'https://images.unsplash.com/photo-1561489401-fc2876ced162?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
 subtitle: 'The Bridge2AI Annual PIs Meeting is a gathering of the Bridge2AI Consortium PIs to discuss high-level progress and strategies.'
 type: 'Workshop'
 timeZone: 'America/Los_Angeles'

events/dknet-Webinar.md

@@ -2,35 +2,35 @@
 title: 'Introduction to AI-READI, Studying Salutogenesis in T2DM'
 startDateTime: '2024-10-11T11:00:00'
 endDateTime: '2024-10-11T12:00:00'
-heroImage: 'https://i.imgur.com/CNG6e01.jpeg'
+heroImage: 'https://images.unsplash.com/photo-1561491431-71b89da6056a?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
 subtitle: 'This webinar will introduce the AI-READI project, present the dataset, show how to request it, and explore research questions for machine learning, such as predicting health improvement in T2DM, understanding disease progression, and investigating risk factors.'
 type: 'Webinar '
 timeZone: 'America/Los_Angeles'
 location: 'Online'
 ---
 
-## Presenters:
+## Presenters
 
 - [Cecilia Lee](/team#Cecilia-Lee), MD, MS. Professor, Klorfine Family Endowed Chair of Ophthalmology, University of Washington
 - [Bhavesh Patel](/team#Bhavesh-Patel), PhD. Research Professor, California Medical Innovations Institute
 - [Sally L. Baxter](/team#Sally-Baxter), MD, MSc. Associate Professor of Ophthalmology and Biomedical Informatics, University of California San Diego
 
 ## Overview
 
-The AI-READI (Artificial Intelligence Ready and Equitable Atlas for Diabetes Insights, https://aireadi.org) project, funded by the NIH Common Fund’s Bridge2AI Program, aims to develop a multimodal dataset specifically designed to be AI-ready for the study of salutogenesis in Type 2 Diabetes Mellitus (T2DM). Despite advancements in diabetes care, limited knowledge exists on how individuals with T2DM may revert to health. AI-READI team is building this dataset from a diverse cohort of 4,000 participants, ensuring it is structured for immediate use in machine learning algorithm training and analysis. The project emphasizes ethical and equitable data collection, adherence to FAIR (Findable, Accessible, Interoperable, Reusable) data principles, and establishing best practices for data sharing and management. By focusing on AI-readiness, the dataset will enable rapid application of machine learning to uncover novel insights into effective treatment strategies.
+The AI-READI (Artificial Intelligence Ready and Equitable Atlas for Diabetes Insights, <https://aireadi.org>) project, funded by the NIH Common Fund’s Bridge2AI Program, aims to develop a multimodal dataset specifically designed to be AI-ready for the study of salutogenesis in Type 2 Diabetes Mellitus (T2DM). Despite advancements in diabetes care, limited knowledge exists on how individuals with T2DM may revert to health. AI-READI team is building this dataset from a diverse cohort of 4,000 participants, ensuring it is structured for immediate use in machine learning algorithm training and analysis. The project emphasizes ethical and equitable data collection, adherence to FAIR (Findable, Accessible, Interoperable, Reusable) data principles, and establishing best practices for data sharing and management. By focusing on AI-readiness, the dataset will enable rapid application of machine learning to uncover novel insights into effective treatment strategies.
 
-### The top 3 key questions that Bridge2AI AI-READI datasets can answer:
+### The top 3 key questions that Bridge2AI AI-READI datasets can answer
 
-1.  How can we better understand Type 2 Diabetes (T2DM) heterogeneity? <br/>
-2.  What are the connections between multi-organ function in T2DM, and how are the kidney, heart, eye, brain interlinked? <br/>
-3.  How do interactions between environmental factors (e.g. air pollution) drive outcomes in T2DM?
+1. How can we better understand Type 2 Diabetes (T2DM) heterogeneity? <br/>
+2. What are the connections between multi-organ function in T2DM, and how are the kidney, heart, eye, brain interlinked? <br/>
+3. How do interactions between environmental factors (e.g. air pollution) drive outcomes in T2DM?
 
-### Date/Time:
+### Date/Time
 
 Friday, October 11, 2024, 11 am - 12 pm PT
 
-### Dial-in Information:
+### Dial-in Information
 
-https://uchealth.zoom.us/meeting/register/tZEsdOmqqDgiEtes2c8OVfCoFPZlZ2vxi6Hx.
+<https://uchealth.zoom.us/meeting/register/tZEsdOmqqDgiEtes2c8OVfCoFPZlZ2vxi6Hx>.
 
 More information about the webinar may be found [here](https://dknet.org/about/blog/2776)!

events/trm-bridge2ai-lecture.md

@@ -2,7 +2,7 @@
 title: 'Introduction to AI-READI, Studying Salutogenesis in T2DM'
 startDateTime: '2024-10-10T12:00:00'
 endDateTime: '2024-10-10T15:00:00'
-heroImage: 'https://i.imgur.com/KO3ZmU4.jpeg'
+heroImage: 'https://images.unsplash.com/photo-1492538368677-f6e0afe31dcc?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
 subtitle: 'This lecture, in collaboration with the Grand Challenges (GCs) at Bridge2AI, the Bridge Center Training, Recruitment, and Mentorship Working Group introduces a new education module: “Introduction to the Bridge2AI GC Datasets".'
 type: 'Lecture'
 timeZone: 'America/New_York'
@@ -13,12 +13,12 @@ location: 'Online'
 
 In collaboration with the Grand Challenges (GCs) at Bridge2AI, the Bridge Center Training, Recruitment, and Mentorship Working Group presents a new education module launching this fall: “Introduction to the Bridge2AI GC Datasets.” Please join us on Thursday, October 10th 2024, for the first lecture in this series “Introduction to AI-READI, Studying Salutogenesis in T2DM.”Please see attached for more information. We look forward to your attendance!
 
-### Date/Time:
+### Date/Time
 
 Thursday, October 10, 2024, 12 pm - 3 pm EDT
 
-### Dial-in Information:
+### Dial-in Information
 
-https://uclahs.zoom.us/j/96802224199
+<https://uclahs.zoom.us/j/96802224199>
 
 More information about the webinar may be found [here](https://drive.google.com/drive/u/0/folders/1LqvCyQos7w_N7is8Ux1VxFgEgckNHsMQ)!

package.json

@@ -44,7 +44,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.6.0",
-    "react-lottie-player": "^1.5.0",
+    "react-lottie-player": "^2.1.0",
     "react-toastify": "^9.1.1",
     "react-use": "^17.5.0",
     "rehype-document": "^7.0.3",

public/data/team.json

@@ -9,7 +9,7 @@
     "location": "San Diego, CA",
     "about": "Qui molestiae aspernatur a ducimus architecto et impedit molestias aut voluptatem molestiae in omnis placeat aut veniam exercitationem. Sit autem nobis ex sequi quia ut quia provident eos quas molestiae ab eveniet eaque ut eius dignissimos? Et error sequi et voluptates iure eum nulla optio aut quia illo. Qui molestiae aspernatur a ducimus architecto et impedit molestias aut. Qui molestiae aspernatur a ducimus architecto et impedit molestias aut. Qui molestiae aspernatur a ducimus architecto et.",
     "image": "https://ucarecdn.com/b36da179-1c47-4fa9-9e9b-9001ffc9b869/-/quality/smart_retina/-/format/auto/-/progressive/yes/",
-    "moduleImageParams": "-/crop/face/200px200p/",
+    "moduleImageParams": "-/crop/face/250px200p/",
     "modules": [
       "data-sharing",
       "capacity-building",

public/publications/style.css

@@ -0,0 +1,7 @@
+h2 {
+  color: red;
+  font-size: 1.5em;
+  font-weight: bold;
+  margin: 0;
+  padding: 0;
+}

src/components/events/EventsLayout.tsx

@@ -1,4 +1,3 @@
-import { Divider, Tag, VStack } from '@chakra-ui/react';
 import dayjs from 'dayjs';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -8,60 +7,49 @@ import EventDates from '@/components/events/EventDates';
 const EventsLayout: React.FC<EventsLayoutProps> = ({ eventList }) => {
   return (
     <>
-      <hr className='mx-6 my-2 border-dashed border-slate-200' />
-
-      {eventList.map((event) => (
-        <div
-          className='mb-4 grid w-full grid-cols-12 items-start gap-3 border-b px-2 py-4 md:px-7'
-          key={event.slug}
-        >
-          <div className='col-span-8 px-4 py-3'>
-            <VStack spacing={4} align='flex-start'>
+      <hr className='mx-6 my-1 border-dashed border-slate-300' />
+
+      <div className='flex flex-wrap gap-8 px-8'>
+        {eventList.map((event) => (
+          <div
+            key={event.slug}
+            className='group relative flex flex-row rounded-lg border border-gray-200 bg-white shadow-lg transition-shadow duration-300 hover:shadow-2xl'
+          >
+            <div className='relative w-full max-w-[40%] overflow-hidden rounded-l-lg'>
+              <Image
+                src={event.frontMatter.heroImage}
+                alt={event.frontMatter.title}
+                layout='responsive'
+                width={16} // Aspect ratio width
+                height={9} // Aspect ratio height
+                className='object-centern object-cover transition-transform duration-300 hover:scale-105'
+              />
               {dayjs(event.frontMatter.startDateTime).isAfter(dayjs()) && (
-                <Tag variant='subtle' colorScheme='twitter'>
+                <span className='absolute left-4 top-4 rounded bg-blue-500 px-2 py-1 text-xs font-semibold text-white'>
                   Upcoming
-                </Tag>
+                </span>
               )}
-
+            </div>
+            <div className='flex flex-1 flex-col p-5'>
               <Link href={`/events/${event.slug}`} passHref>
-                <h2 className='mb-2 text-left text-3xl font-extrabold hover:underline'>
+                <h3 className='text-xl font-bold text-gray-800 transition duration-300 group-hover:text-blue-500'>
                   {event.frontMatter.title}
-                </h2>
+                </h3>
               </Link>
-            </VStack>
-
-            <p className='py-2 font-medium text-slate-700'>
-              {event.frontMatter.subtitle}
-            </p>
-
-            <Divider />
-
-            <div className='flex flex-col space-y-1 py-2'>
-              <EventDates
-                startDateTime={event.frontMatter.startDateTime}
-                endDateTime={event.frontMatter.endDateTime}
-              />
-
-              <p className='my-1 text-sm font-light text-slate-600'>
-                {event.timeToRead} min read
+              <p className='mt-2 text-lg text-gray-600'>
+                {event.frontMatter.subtitle}
               </p>
-            </div>
-          </div>
-
-          <div className='col-span-4 pl-8 pr-8'>
-            <Link href={`/events/${event.slug}`} passHref>
-              <div className='relative h-auto min-h-[200px] overflow-hidden rounded-xl sm:min-h-[300px] md:min-h-[300px]'>
-                <Image
-                  src={event.frontMatter.heroImage}
-                  alt={event.frontMatter.title}
-                  fill
-                  className='h-full w-full cursor-pointer object-cover object-center transition-all hover:scale-[1.01] md:object-center'
+              <div className='mt-4 border-t pt-4 text-sm text-gray-500'>
+                <EventDates
+                  startDateTime={event.frontMatter.startDateTime}
+                  endDateTime={event.frontMatter.endDateTime}
                 />
+                <p className='mt-1'>{event.timeToRead} min read</p>
               </div>
-            </Link>
+            </div>
           </div>
-        </div>
-      ))}
+        ))}
+      </div>
     </>
   );
 };

src/components/post/PostBody.tsx

@@ -4,7 +4,7 @@ interface PostBodyProps {
 
 const postBody: React.FC<PostBodyProps> = ({ content }) => {
   return (
-    <div className='prose-a:text-primary prose prose-slate max-w-none lg:prose-base prose-img:mx-auto prose-img:rounded-md prose-img:shadow-xl'>
+    <div className='prose prose-slate mt-4 max-w-none lg:prose-base prose-h1:mt-8 prose-h1:text-slate-700 prose-h2:mt-4 prose-h2:border-b-2 prose-h2:pb-2 prose-h2:text-slate-700 prose-h3:text-slate-700 prose-a:text-[#025988] hover:prose-a:text-[#0e8cd0] prose-img:mx-auto prose-img:rounded-md prose-img:shadow-xl'>
       <div dangerouslySetInnerHTML={{ __html: content }} />
     </div>
   );

src/lib/markdownToHtml.ts

@@ -10,8 +10,63 @@ import remarkRehype from 'remark-rehype';
 import { unified } from 'unified';
 
 /**
- * Converts markdown to HTML
- * @param markdown Markdown string
+ * Custom plugin to wrap sections in cards
+ */
+function rehypeWrapInCards() {
+  return (tree: any) => {
+    const children = tree.children;
+    const wrappedChildren: any[] = [];
+    let currentCard: any = null;
+
+    for (let i = 0; i < children.length; i++) {
+      const node = children[i];
+
+      if (node.type === 'element' && node.tagName === 'h2') {
+        // Close the current card if it exists
+        if (currentCard) {
+          wrappedChildren.push(currentCard);
+        }
+
+        // Start a new card
+        currentCard = {
+          type: 'element',
+          tagName: 'div',
+          properties: {
+            className: [
+              'bg-white',
+              'rounded-lg',
+              'shadow-lg',
+              'px-6',
+              'mb-6',
+              'pb-4',
+              'pt-1',
+              'border-gray-200',
+              'border-[1px]',
+            ],
+          },
+          children: [node], // Add the current <h2> as the first child
+        };
+      } else if (currentCard) {
+        // Add content to the current card
+        currentCard.children.push(node);
+      } else {
+        // Push content outside cards (e.g., <h1>)
+        wrappedChildren.push(node);
+      }
+    }
+
+    // Push the last card if it exists
+    if (currentCard) {
+      wrappedChildren.push(currentCard);
+    }
+
+    // Replace the original children with the wrapped ones
+    tree.children = wrappedChildren;
+  };
+}
+
+/**
+ * Converts markdown to HTML with Tailwind cards
  */
 export default async function markdownToHtml(markdown: string) {
   const result = await unified()
@@ -20,7 +75,13 @@ export default async function markdownToHtml(markdown: string) {
     .use(remarkRehype, { allowDangerousHtml: true })
     .use(rehypeRaw)
     .use(rehypeHighlight)
-    .use(rehypeDocument)
+    .use(rehypeWrapInCards) // Apply card wrapping
+    .use(rehypeDocument, {
+      meta: [
+        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+        { name: 'author', content: 'Markdown Converter' },
+      ],
+    })
     .use(rehypeFormat)
     .use(rehypeStringify)
     .use(rehypeExternalLinks, {