List of Events

app/api/events/$id.mjs

@@ -1,9 +1,23 @@
-import { events } from '../events.mjs'
+import events from '../../data/events.json' assert { type: 'json' }
+import sponsors from '../../data/sponsors.json' assert { type: 'json' }
+import talks from '../../data/talks.json' assert { type: 'json' }
+import speakers from '../../data/speakers.json' assert { type: 'json' }
 
 export async function get(req) {
   let { id } = req.params
+
   let event = events.find(s => s.id === id)
+  let eventSponsors = sponsors.filter(s => event.sponsors.includes(s.id))
+
+  let eventTalks = event.talks ?talks.filter(t => {
+    return event.talks.includes(t.id)
+  }) : []
+
+  let eventSpeakers = eventTalks ? speakers.filter(s => {
+    return eventTalks.map(t => t.speaker_id).includes(s.id)
+  }) : []
+
   return {
-    json: { event }
+    json: { event, eventSponsors, eventTalks, eventSpeakers }
   }
 }

app/data/events.json

@@ -2,7 +2,7 @@
     {
         "id": "may-2022",
         "title": "SeattleJS May 2022",
-        "date": "2022-10-12",
+        "date": "2022-05-11",
         "sponsors": [
             "collective-seattle"
         ],
@@ -13,7 +13,7 @@
     {
         "id": "june-2022",
         "title": "SeattleJS June 2022",
-        "date": "2022-10-12",
+        "date": "2022-06-08",
         "sponsors": [
             "collective-seattle"
         ],
@@ -24,23 +24,23 @@
     {
         "id": "july-2022",
         "title": "SeattleJS July 2022",
-        "date": "2022-10-12",
+        "date": "2022-07-13",
         "sponsors": [
             "collective-seattle"
         ]
     },
     {
         "id": "august-2022",
         "title": "SeattleJS August 2022",
-        "date": "2022-10-12",
+        "date": "2022-08-10",
         "sponsors": [
             "collective-seattle"
         ]
     },
     {
         "id": "september-2022",
         "title": "SeattleJS September 2022",
-        "date": "2022-10-12",
+        "date": "2022-09-14",
         "sponsors": [
             "collective-seattle"
         ],

app/elements/event-sponsors.mjs

@@ -0,0 +1,33 @@
+export default function eventSponsors({ html, state = {} }) {
+    const { store = {} } = state
+    const { eventSponsors } = store
+
+      return html`
+        <style>
+          :host div {
+            padding: 16px;
+          }
+
+          :host img {
+            height: 80px;
+          }
+          @media only screen and (min-width: 768px) {
+            :host {
+              display: flex;
+              flex-wrap: wrap;
+            }
+          }
+        </style>
+
+        ${eventSponsors
+          .map(
+            s => html` <div>
+              <a target="_sponsor" href="${s.url}"
+                ><img src="/_public/images/sponsors/${s.image}"
+              /></a>
+            </div>`
+          )
+          .join('')}
+      `
+
+  }

app/elements/event-talk.mjs

@@ -0,0 +1,82 @@
+export default function EventTalk({ html, state = {} }) {
+  const { store = {}, attrs } = state
+  let { eventTalks, eventSpeakers } = store
+  let { talkid, speakerid } = attrs
+
+  let talk = eventTalks.filter(t => t.id === talkid)[0]
+  let speaker = eventSpeakers.filter(s => s.id === speakerid)[0]
+
+  let { title, type } = talk
+  let { name, company, photo, location } = speaker
+
+  return html`
+    <style>
+      .speaker {
+        margin-right: 16px;
+      }
+
+      .photo {
+        position: relative;
+        height: 250px;
+        width: 250px;
+      }
+
+      .photo .overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        opacity: 0;
+        transition: 0.5s ease;
+        background-color: #ee3e4a;
+      }
+
+      .photo:hover .overlay {
+        opacity: 1;
+      }
+
+      .photo .overlay .text {
+        color: white;
+        font-family: headline-gothic-atf-round, sans-serif;
+        font-weight: 500;
+        font-style: italic;
+        font-size: 24px;
+        line-height: 1.125em;
+        margin: 16px;
+        text-align: left;
+      }
+
+      .photo img {
+        object-fit: cover;
+        height: 250px;
+        width: 250px;
+      }
+
+      .info {
+        margin: 8px 0 16px 0;
+      }
+
+      .name {
+        font-family: headline-gothic-atf-round, sans-serif;
+        font-weight: 700;
+        font-size: 24px;
+      }
+    </style>
+
+    <div class="speaker">
+      <div class="photo">
+        <img src="/_public/images/speakers/${photo}" alt="photo of ${name}" />
+        <div class="overlay">
+          <div class="text">${type === 'lightning' ? '⚡️' : ''}${title}</div>
+        </div>
+      </div>
+      <div class="info">
+        <div class="name">${name}</div>
+        <div class="misc">
+          ${ company && company }<br/>${ location && location }
+        </div>
+      </div>
+    </div>
+  `
+}

app/elements/event-talks-list.mjs

@@ -0,0 +1,17 @@
+export default function EventTalk({ html, state = {} }) {
+  const { store } = state
+  let { eventTalks, eventSpeakers } = store
+
+  return html`
+    <ul>
+      ${eventTalks.length > 0 ?eventTalks
+        .map(
+          t =>
+            /*html*/ `<event-talk talkId=${t.id} speakerId=${
+              eventSpeakers.find(s => s.id === t.speaker_id).id
+            }></event-talk>`
+        )
+        .join(''): 'No talks this month.'}
+    </ul>
+  `
+}

app/elements/events-list.mjs

@@ -0,0 +1,42 @@
+export default function EventsList({ html, state }) {
+    const { store } = state
+    const allEvents = store.data
+
+    // The last item in the array is the current event
+    let pastEvents  = allEvents.sort((a,b) => new Date(b.date) - new Date(a.date)).slice(1)
+
+    if (pastEvents.length > 0) {
+      return html`
+      <style>
+      @media only screen and (min-width: 768px) {
+        :host {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: flex-start;
+        }
+      }
+      ul {
+        margin: 0;
+        padding: 0;
+      }
+      li {
+        list-style-type: none;
+      }
+    </style>
+    <ul>
+        ${pastEvents.map(
+            e => `
+            <li >
+              <a target="_self" href="/events/${e.id}">
+                ${e.title}
+              </a>
+            </li>`
+          )
+          .join('')}
+      `
+    }else {
+        return `
+        <p>Wait for it...</p>
+        `
+    }
+  }

app/elements/view-event.mjs

@@ -2,6 +2,7 @@ import { marked } from 'marked'
 
 export default function ViewEvent({ html, state = {} }) {
   const { attrs, store } = state
+
   let { events } = store
   let { id } = attrs
   let event = events.find(e => e.id === id)
@@ -27,5 +28,10 @@ export default function ViewEvent({ html, state = {} }) {
       ></a>
     </div>
     <list-talks event_id="${event.id}"></list-talks>
+    <div class="">
+      <a target="_self" href="/events">
+        See all past events <i class="fa-solid fa-arrow-right"></i>
+      </a>
+    </div>
   `
 }

app/pages/events.mjs

@@ -1,16 +1,10 @@
-export default function ({ html, state = {} }) {
-  let { store = {} } = state
-  let { events } = store
-  //console.log(events)
+export default function events({ html }) {
+
   return html`
     <my-layout>
       <div id="page">
-        <div class="page-title"><h1>Our Events</h1></div>
-        <div class="page-body">
-          <ul>
-            ${events.map(e => /*html*/ `<li>${e.title}</li>`).join('')}
-          </ul>
-        </div>
+        <div class=""><h1>Our Past Events</h1></div>
+          <events-list></events-list>
       </div>
     </my-layout>
   `

app/pages/events/$id.mjs

@@ -1,9 +1,22 @@
+import { marked } from "marked"
+
 export default function ({ html, state = {} }) {
   let { store = {} } = state
   let { event } = store
+
   return html`
     <page-layout title=${event.title}>
-      <pre>${JSON.stringify(event, null, 2)}</pre>
+      <h3>${event.title}</h3>
+      ${event.description && `<p>${marked(event.description)}</p>` }
+
+      <h4>Thanks to our Sponsors ❤️</h4>
+      ${event.sponsors.length > 0 ? html`<event-sponsors></event-sponsors>` : null}
+      <event-talks-list></event-talks-list>
+      <div class="">
+        <a target="_self" href="/events">
+          See all past events <i class="fa-solid fa-arrow-right"></i>
+        </a>
+      </div>
     </page-layout>
   `
 }

app/pages/talks.mjs

@@ -1,13 +1,15 @@
 export default function ({ html, state = {} }) {
-  let { store = {} } = state
-  let { talks } = store
+  let { store } = state
+  let talks = [...Object.values(store)]
+
   return html`
     <my-layout>
       <div id="page">
         <div class="page-title"><h1>Talk List</h1></div>
         <div class="page-body">
+          <p> past talks
           <ul>
-            ${talks.map(t => /*html*/ `<li>${t.title}</li>`).join('')}
+            ${talks.map(t => /*html*/ `<li>${t.title} - Speaker: ${t.speaker_id.split('-').join(' ')}</li>`).join('')}
           </ul>
         </div>
       </div>