Handle unmapped meetups

content/meetups.json

@@ -1,12 +1,4 @@
 [
-{
-    "name": "Einundzwanzig Gran Canaria",
-    "url": "https://t.me/+ML6iWXSsgTdiNGI6",
-    "top": 55,
-    "left": 59,
-    "country": "ES",
-    "state": ["Canaria"]
-  }
   {
     "name": "Einundzwanzig Mecklenburg-Vorpommern",
     "url": "https://t.me/joinchat/lMbna3mlZXc0NmZi",
@@ -358,5 +350,11 @@
     "left": 37,
     "country": "AT",
     "state": ["Vorarlberg"]
+  },
+  {
+    "name": "Einundzwanzig Gran Canaria",
+    "url": "https://t.me/+ML6iWXSsgTdiNGI6",
+    "country": "ES",
+    "state": ["Canaria"]
   }
 ]

src/css/sections/meetups.css

@@ -38,6 +38,10 @@
         position: absolute;
         z-index: 1;
 
+        &.unmapped {
+          display: none;
+        }
+
         &.official {
           color: var(--color-accent);
         }
@@ -69,4 +73,13 @@
       }
     }
   }
+
+  & #unmapped {
+    @media (--up_to_L) {
+      display: none;
+    }
+    @media (--L_and_up) {
+      margin-top: var(--space-xxl);
+    }
+  }
 }

src/meetups.pug

@@ -5,6 +5,9 @@ block vars
   - const description = 'Eine Liste von Bitcoin-Meetups und Einundzwanzig-Treffen im D/A/CH-Raum.'
   - const cardImage = '/img/card/meetups.png'
   - const filterOfficial = (list, official) => list.filter(meetup => meetup.name.startsWith('Einundzwanzig') === official)
+  - const filterUnmapped = (list) => list.filter(meetup => !meetup.top || !meetup.left)
+  - const style = m => m.top && m.left ? `top:${m.top}%;left:${m.left}%;` : null
+  - const clss = m => m.top && m.left ? null : 'unmapped'
   - let j = 0
 
 block main
@@ -24,7 +27,7 @@ block main
         h2 Einundzwanzig Meetups
         ul.meetups
           each m in filterOfficial(meetups, true)
-            li.official(style=`top:${m.top}%;left:${m.left}%;`)
+            li.official(class=clss(m) style=style(m))
               a(href=m.url target="_blank" rel="nofollow noopener")
                 .dot(style=`animation-delay:${((j*2000) + random(3000))}ms;animation-duration:${meetups.length*2}s;`)
                 = m.name.replace('Einundzwanzig ', '')
@@ -33,10 +36,18 @@ block main
         h2 Weitere Meetups
         ul.meetups
           each m in filterOfficial(meetups, false)
-            li(style=`top:${m.top}%;left:${m.left}%;`)
+            li(class=clss(m) style=style(m))
               a(href=m.url target="_blank" rel="nofollow noopener")
                 .dot(style=`animation-delay:${((j*2000) + random(3000))}ms;animation-duration:${meetups.length*2}s;`)
                 = m.name.replace('Bitcoin ', '')
               - j++
 
         img(src=assetPath('/img/dach.svg') alt="DE, AT, CH")
+
+      #unmapped
+        h2 Weitere Meetups
+        ul.meetups
+          each m in filterUnmapped(meetups)
+            li(class=clss(m) style=style(m))
+              a(href=m.url target="_blank" rel="nofollow noopener")
+                = m.name.replace('Einundzwanzig ', '').replace('Bitcoin ', '')