Meetups: Add list with upcoming meetups

helpers.js

@@ -24,6 +24,23 @@ const stripHTML = str => {
   return str && encode(decode(str.replace(/(<([^>]+)>)/ig, '').trim().replace(/\n\s*/g, '\n')), { level: 'xml' })
 }
 
+// meetups
+const toMeetupMapInfo = m => {
+  return {
+    name: m.name,
+    latLng: [m.latitude, m.longitude],
+    url: m.url,
+    city: m.city,
+    portalUrl: m.portalLink,
+    websiteUrl: m.websiteUrl,
+    twitter: m.twitter_username,
+    event: m.next_event,
+    style: {
+      fill: m.name.startsWith('Einundzwanzig') || m.name.includes('Einezwänzg') || m.name.includes('Eenanzwanzeg') || m.name.includes('Yirmibir') ? 'var(--color-accent)' : 'var(--color-neutral-50)'
+    }
+  }
+}
+
 // slug
 const slugify = str => str.toLowerCase()
   .replace(/ä/g, 'ae').replace(/ö/g, 'oe').replace(/ü/g, 'ue')
@@ -57,5 +74,6 @@ module.exports = {
   slugify,
   stripHTML,
   truncate,
-  teamWithAliases
+  teamWithAliases,
+  toMeetupMapInfo
 }

src/includes/mixins.pug

@@ -58,19 +58,7 @@ mixin map(id, markers)
     });
 
 mixin meetupMap()
-  +map('meetupMap', meetups.map(m => JSON.stringify({
+  +map('meetupMap', meetups.map(m => JSON.stringify(m)).join(','))
-        name: m.name,
-        latLng: [m.latitude, m.longitude],
-        url: m.url,
-        city: m.city,
-        portalUrl: m.portalLink,
-        websiteUrl: m.websiteUrl,
-        twitter: m.twitter_username,
-        event: m.next_event,
-        style: {
-          fill: m.name.startsWith('Einundzwanzig') || m.name.includes('Einezwänzg') || m.name.includes('Eenanzwanzeg') || m.name.includes('Yirmibir') ? 'var(--color-accent)' : 'var(--color-neutral-50)'
-        }
-      })).join(','))
 
 mixin spende(d, trunc = false)
   .spende(id=d.id)&attributes(attributes)

src/meetups.pug

@@ -22,9 +22,18 @@ block main
 
       :markdown-it(html linkify typographer)
         Neue Meetups können gerne [im Portal](https://portal.einundzwanzig.space/de/meetup/overview) hinzugefügt werden.
-
         Telegram: Die Vorlage für das Gruppenbild findest du im [Media Kit](/media).
         Tipp: Mit Bots wie [Shieldy](https://t.me/shieldy_bot) kann man die Spammer draußen halten.
 
-  div(style="margin-bottom: calc(var(--space-xxl) * -1)")
+  section
     +meetupMap()
+
+  section.wrap
+    h2 Nächste Termine
+    ul
+      each m in upcomingMeetups
+        li
+          a(href=m.url data-meetup=JSON.stringify(m))
+            span= formatDate(`${m.event.start}Z`)
+            = " - "
+            span= m.name

static/js/main.js

@@ -53,7 +53,7 @@ const toggleModal = modalId => {
 }
 
 const onMeetupMapMarkerClick = (m, modalId) => {
-  console.log(modalId, m)
+  console.log(m)
   const city = m.city ? m.city.trim() : ''
   const date = m.event ? new Date(`${m.event.start}Z`) : null
   const webUrl = m.url != m.websiteUrl ? m.websiteUrl : null
@@ -161,4 +161,14 @@ document.addEventListener("DOMContentLoaded", () => {
   document.querySelectorAll('[data-modal]').forEach(modalLink => {
     modalLink.addEventListener('click', e => toggleModal(modalLink.dataset.modal))
   })
+
+  document.querySelectorAll('[data-meetup]').forEach(meetupLink => {
+    meetupLink.addEventListener('click', e => {
+      const meetup = JSON.parse(meetupLink.dataset.meetup)
+      if (meetup) {
+        e.preventDefault()
+        onMeetupMapMarkerClick(meetup, modalId)
+      }
+    })
+  })
 })

tasks/generate_pages.js

@@ -43,8 +43,8 @@ const renderPage = (template, out, data = {}) => {
 
 renderPage('index', 'index', { navCurrent: 'index', currentEpisode: episodes[0], team })
 renderPage('podcast', 'podcast', { navCurrent: 'podcast', episodes: [...episodes], team })
-renderPage('gesundes-geld', 'gesundes-geld', { meetups: site.meetups })
+renderPage('gesundes-geld', 'gesundes-geld', { meetups: site.meetups, upcomingMeetups: site.upcomingMeetups })
-renderPage('meetups', 'meetups', { navCurrent: 'meetups', meetups: site.meetups })
+renderPage('meetups', 'meetups', { navCurrent: 'meetups', meetups: site.meetups, upcomingMeetups: site.upcomingMeetups })
 renderPage('spenden', 'spenden', { navCurrent: 'spenden', spendenregister, spendenuebersicht })
 renderPage('media', 'media', { navCurrent: 'media' })
 renderPage('soundboard', 'soundboard', { navCurrent: 'soundboard', soundboard })

tasks/generate_site_data.js

@@ -1,7 +1,7 @@
 const { readdirSync, writeFileSync } = require('fs')
 const { basename, join, resolve } = require('path')
 const request = require('sync-request')
-
+const { toMeetupMapInfo } = require('../helpers')
 const meta = require('../content/meta.json')
 const telegram = require('../content/telegram.json')
 const soundboard = require('../content/soundboard.json')
@@ -44,7 +44,8 @@ try {
 }
 
 const block = recentBlocks.length && recentBlocks[0].height
-const date = (new Date()).toJSON().split('T')[0]
+const now = new Date()
+const date = now.toJSON().split('T')[0]
 
 // Telegram
 const telegramData = telegram.map(t =>
@@ -63,7 +64,12 @@ try {
 }
 
 const sortId = m => `${m.country === 'DE' ? '0' : m.country}-${m.name}`
-meetups = meetups.sort((a, b) => sortId(a) > sortId(b) ? 1 : -1)
+meetups = meetups
+  .sort((a, b) => sortId(a) > sortId(b) ? 1 : -1)
+  .map(toMeetupMapInfo)
+
+const upcomingMeetups = meetups.filter(m => m.event && new Date(m.event.start) >= now)
+  .sort((a, b) => new Date(a.event.start) > new Date(b.event.start) ? 1 : -1)
 
 writeJSON(dir('dist', 'meetups.json'), meetups)
 
@@ -72,6 +78,7 @@ writeJSON(dir('generated', 'site-data.json'), {
   block,
   meta,
   meetups,
+  upcomingMeetups,
   telegram: telegramData
 })