Add meetup map

content/meetups.json

@@ -1,72 +1,100 @@
 [
   {
-    "name": "Einundzwanzig Meetup Düsseldorf",
+    "name": "Einundzwanzig Meetup Mecklenburg-Vorpommern",
-    "region": "Düsseldorf",
+    "region": "Rostock, Stralsund, Greifswald",
-    "telegram": "https://t.me/joinchat/pwUMGpOQzDZiZDRi"
+    "telegram": "https://t.me/joinchat/lMbna3mlZXc0NmZi",
-  },
+    "top": 11,
-  {
+    "left": 59
-    "name": "Einundzwanzig Meetup Frankfurt am Main",
-    "region": "Frankfurt am Main",
-    "telegram": "https://t.me/joinchat/Ox2zR68PzuQ2OTYy"
-  },
-  {
-    "name": "Einundzwanzig Meetup Mainz und Umland",
-    "region": "Mainz, Wiesbaden",
-    "telegram": "https://t.me/joinchat/kgdKrjL58C1lOTAy"
   },
   {
     "name": "Einundzwanzig Meetup Norddeutschland",
     "region": "Hamburg, Bremen, Hannover",
-    "telegram": "https://t.me/joinchat/k4sCySBhUx03NzFi"
+    "telegram": "https://t.me/joinchat/k4sCySBhUx03NzFi",
+    "top": 18,
+    "left": 36
   },
   {
-    "name": "Einundzwanzig Meetup Mecklenburg-Vorpommern",
+    "name": "Einundzwanzig Meetup Düsseldorf",
-    "region": "Rostock, Stralsund, Greifswald",
+    "region": "Düsseldorf",
-    "telegram": "https://t.me/joinchat/lMbna3mlZXc0NmZi"
+    "telegram": "https://t.me/joinchat/pwUMGpOQzDZiZDRi",
-  },
+    "top": 36,
-  {
+    "left": 18
-    "name": "Einundzwanzig Meetup Köln",
-    "region": "Köln",
-    "telegram": "https://t.me/joinchat/0rUVc-k5fBljNWUy"
   },
   {
     "name": "Einundzwanzig Meetup OWL",
     "region": "Ostwestfalen",
-    "telegram": "https://t.me/joinchat/xypeWtlKm1JjN2I0"
+    "telegram": "https://t.me/joinchat/xypeWtlKm1JjN2I0",
-  },
+    "top": 31,
-  {
+    "left": 24
-    "name": "Einundzwanzig Meetup Saarland",
-    "region": "Saarland",
-    "telegram": "https://t.me/einundzwanzigsaarland"
   },
   {
     "name": "Einundzwanzig Meetup Sachsen-Anhalt",
     "region": "Sachsen-Anhalt",
-    "telegram": "https://t.me/Meetup21SA"
+    "telegram": "https://t.me/Meetup21SA",
+    "top": 34,
+    "left": 56
   },
   {
-    "name": "Einundzwanzig Meetup Stuttgart",
+    "name": "Einundzwanzig Meetup Köln",
-    "region": "Stuttgart",
+    "region": "Köln",
-    "telegram": "https://t.me/joinchat/JdWiqM3tYh4wZTMy"
+    "telegram": "https://t.me/joinchat/0rUVc-k5fBljNWUy",
+    "top": 40,
+    "left": 19
+  },
+  {
+    "name": "Einundzwanzig Meetup Frankfurt am Main",
+    "region": "Frankfurt am Main",
+    "telegram": "https://t.me/joinchat/Ox2zR68PzuQ2OTYy",
+    "top": 51,
+    "left": 26
+  },
+  {
+    "name": "Einundzwanzig Meetup Mainz und Umland",
+    "region": "Mainz, Wiesbaden",
+    "telegram": "https://t.me/joinchat/kgdKrjL58C1lOTAy",
+    "top": 55,
+    "left": 24
   },
   {
     "name": "Einundzwanzig Meetup Mannheim",
     "region": "Rhein-Neckar",
-    "telegram": "https://t.me/joinchat/lYrIAlEAZYwzNThi"
+    "telegram": "https://t.me/joinchat/lYrIAlEAZYwzNThi",
+    "top": 58,
+    "left": 25
+  },
+  {
+    "name": "Einundzwanzig Meetup Saarland",
+    "region": "Saarland",
+    "telegram": "https://t.me/einundzwanzigsaarland",
+    "top": 58,
+    "left": 13
+  },
+  {
+    "name": "Einundzwanzig Meetup Stuttgart",
+    "region": "Stuttgart",
+    "telegram": "https://t.me/joinchat/JdWiqM3tYh4wZTMy",
+    "top": 65,
+    "left": 30
   },
   {
     "name": "Einundzwanzig Meetup Kempten",
     "region": "Allgäu",
-    "telegram": "https://t.me/joinchat/e1KRNLcIeto3MDky"
+    "telegram": "https://t.me/joinchat/e1KRNLcIeto3MDky",
+    "top": 77,
+    "left": 41
   },
   {
     "name": "Einundzwanzig Meetup Wien",
     "region": "Wien",
-    "telegram": "https://t.me/joinchat/zrBSbkocvlUyZWE8"
+    "telegram": "https://t.me/joinchat/zrBSbkocvlUyZWE8",
+    "top": 70,
+    "left": 93
   },
   {
-    "name": "Bitcoin und Bier - Einundzwanzig Meetup Schweiz",
+    "name": "Einundzwanzig Meetup Schweiz",
     "region": "Schweiz",
-    "telegram": "https://t.me/joinchat/8-FBDoq3Y9hkODZk"
+    "telegram": "https://t.me/joinchat/8-FBDoq3Y9hkODZk",
+    "top": 86,
+    "left": 22
   }
 ]

package.json

@@ -11,7 +11,7 @@
   "scripts": {
     "clean": "rm -rf dist generated && mkdir -p dist generated",
     "fetch": "node tasks/fetch_feed.js",
-    "copy": "cp -r content/meetups.json static/* dist && cp node_modules/amplitudejs/dist/amplitude.min.js dist/js/player.js",
+    "copy": "cp -r static/* dist && cp node_modules/amplitudejs/dist/amplitude.min.js dist/js/player.js",
     "init": "npm-run-all clean -p fetch copy build:data",
     "start": "NODE_ENV=development npm-run-all init -p start:*",
     "start:data": "onchange -k 'content/**/*' 'tasks/generate_site_data.js' -- npm run build:data",

src/css/main.css

@@ -10,6 +10,7 @@
 @import 'sections/home.css';
 @import 'sections/podcast.css';
 @import 'sections/team.css';
+@import 'sections/meetups.css';
 @import 'sections/media.css';
 @import 'sections/spenden.css';
 @import 'sections/soundboard.css';

src/css/sections/meetups.css

@@ -0,0 +1,27 @@
+#meetups {
+  @media (--up_to_L) {
+    & #map {
+      & img {
+        display: none;
+      }
+    }
+  }
+  @media (--L_and_up) {
+    & #map {
+      position: relative;
+
+      & img {
+        display: block;
+        width: 100%;
+      }
+
+      & li {
+        position: absolute;
+
+        & .region {
+          display: none;
+        }
+      }
+    }
+  }
+}

src/meetups.pug

@@ -16,10 +16,14 @@ block main
         Die Vorlage für das Telegram-Gruppenbild findest du im [Media Kit](/media).
 
       h2 Einundzwanzig Meetups
-      ul.meetups
+
-        each m in meetups
+      #map
-          li
+        ul.meetups
-            a(href=m.telegram target="_blank" rel="nofollow noopener")= m.name.replace('Einundzwanzig Meetup ', '')
+          each m in meetups
-            if !m.name.endsWith(m.region)
+            li(style=`top:${m.top}%;left:${m.left}%;`)
-              = " - "
+              a(href=m.telegram target="_blank" rel="nofollow noopener")= m.name.replace('Einundzwanzig Meetup ', '')
-              span.region= m.region
+              if !m.name.endsWith(m.region)
+                span.region
+                  = " - "
+                  = m.region
+        img(src=assetPath('/img/dach.svg') alt="DE, AT, CH")

tasks/generate_site_data.js

@@ -5,6 +5,7 @@ const request = require('sync-request')
 const meta = require('../content/meta.json')
 const team = require('../content/team.json')
 const crew = require('../content/crew.json')
+const meetups = require('../content/meetups.json')
 const soundboard = require('../content/soundboard.json')
 
 const dir = (...path) => resolve(__dirname, '..', ...path)
@@ -27,6 +28,16 @@ writeJSON(dir('generated', 'site-data.json'), { date, block, meta })
 const participants = team.concat(crew).reduce((result, person) => Object.assign(result, { [person.name]: person }), {})
 writeJSON(dir('generated', 'participants.json'), participants)
 
+// Meetups
+const meetup = meetups.map(m => {
+  const copy = Object.assign({}, m)
+  delete copy.top
+  delete copy.left
+  return copy
+})
+
+writeJSON(dir('dist', 'meetups.json'), meetup)
+
 // Soundboard
 const sounds = soundboard.map(group => {
   group.sounds = group.sounds.map(sound => {