Improve archives page with authors icons and add TODOs

src/components/pages/ArchivesPage/ArchivesPage.jsx

@@ -4,38 +4,78 @@ import Layout from '@/components/layout/PageLayout/PageLayout';
 import Section from '@/components/shared/Section';
 import './ArchivesPage.scss';
 
-const ArchivesPage = ({ events }) => (
-  <Layout title="Archives">
-    <Section>
-      {events.map((event) => (
-        <div className="event-card" key={event.id}>
-          <h2>{event.title}</h2>
-          <p className="event-date">
-            Date: {new Date(event.date).toLocaleDateString()}
-          </p>
-          <p className="event-location">Lieu: {event?.location?.name}</p>
-          {event?.talks?.map((talk, index) => (
-            <div className="talk-card" key={`event-${index}`}>
-              <h3>{talk?.title}</h3>
-              <p className="talk-author">
-                Présenté par:{' '}
-                {/* TODO: support multiple authors */}
-                {talk?.authors?.name || (
-                  <span className="error-message">
-                    ERREUR: veuillez ajouter le fichier `.yml` pour cette
-                    personne dans le répertoire `data/authors`.
-                  </span>
+const ArchivesPage = ({ events }) => {
+  const getAvatarUrl = (author) => {
+    if (author.avatar) {
+      return author.avatar;
+    }
+    if (author.github) {
+      return `https://avatars.githubusercontent.com/${author.github}`;
+    }
+    if (author.twitter) {
+      return `https://unavatar.io/twitter/${author.twitter}`;
+    }
+    return '/images/default_user_icon.png';
+  };
+
+  return (
+    <Layout title="Archives">
+      <Section>
+        {events.map((event) => (
+          <div className="event-card" key={event.id}>
+            <h2>{event.title}</h2>
+            <p className="event-date">
+              Date: {new Date(event.date).toLocaleDateString()}
+            </p>
+            <p className="event-location">Lieu: {event?.location?.name}</p>
+            {event?.talks?.map((talk, index) => (
+              <div className="talk-card" key={`talk-${index}`}>
+                <h3>{talk?.title}</h3>
+                <p className="talk-author">
+                  Présenté par:{' '}
+                  {/*TODO: add support for multiple authors, not sure what's wrong with the graphql schema 🤷 */}
+                  {talk.authors ? (
+                    <span key={talk.authors.id} className="author-info">
+                      <img
+                        src={getAvatarUrl(talk.authors)}
+                        alt={talk.authors.name}
+                        className="author-avatar"
+                      />
+                      {talk.authors.name}
+                    </span>
+                  // TODO: add a way to support bio, github link, twitter link, website link, etc.
+                  ) : (
+                    <span className="error-message">
+                      ERREUR: veuillez ajouter le fichier `.yml` pour cette personne
+                      dans le répertoire `data/authors`.
+                    </span>
+                  )}
+                </p>
+                {/* TODO: fix this, graphql schema is drunk, slides is present in yaml. We probably have to
+                 work with gatsby-node.js or something like that to get that working
+                 also: some presentations had multiple slidedecks so let's support that */}
+                {talk?.slides && (
+                  <a
+                    href={talk.slides}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="slides-link"
+                  >
+                    Voir les slides
+                  </a>
                 )}
-              </p>
-            </div>
-          ))}
-          <Link className="event-link" to={event.event_url}>
-            Lien vers l'évènement
-          </Link>
-        </div>
-      ))}
-    </Section>
-  </Layout>
-);
+              </div>
+            ))}
+            {event.event_url && (
+              <Link className="event-link" to={event.event_url}>
+                Lien vers l'évènement
+              </Link>
+            )}
+          </div>
+        ))}
+      </Section>
+    </Layout>
+  );
+};
 
 export default ArchivesPage;

src/components/pages/ArchivesPage/ArchivesPage.scss

@@ -25,6 +25,31 @@
   color: #dc3545;
 }
 
+.author-info {
+  display: flex;
+  align-items: center;
+  margin-right: 8px;
+}
+
+.author-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  margin-right: 4px;
+}
+
+.slides-link {
+  display: block;
+  margin-top: 8px;
+  color: #007bff;
+  text-decoration: none;
+  transition: color 0.3s;
+
+  &:hover {
+    color: #0056b3;
+  }
+}
+
 .event-link {
   display: inline-block;
   margin-top: 8px;