Add meetups

content/meetups.json

@@ -0,0 +1,37 @@
+[
+  {
+    "name": "Einundzwanzig Meetup Düsseldorf",
+    "region": "Düsseldorf",
+    "telegram": "https://t.me/joinchat/pwUMGpOQzDZiZDRi"
+  },
+  {
+    "name": "Einundzwanzig Meetup Frankfurt am Main",
+    "region": "Frankfurt am Main",
+    "telegram": "https://t.me/joinchat/Ox2zR68PzuQ2OTYy"
+  },
+  {
+    "name": "Einundzwanzig Meetup Norddeutschland",
+    "region": "Hamburg",
+    "telegram": "https://t.me/joinchat/k4sCySBhUx03NzFi"
+  },
+  {
+    "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"
+  },
+  {
+    "name": "Einundzwanzig Meetup Stuttgart",
+    "region": "Stuttgart",
+    "telegram": "https://t.me/joinchat/JdWiqM3tYh4wZTMy"
+  },
+  {
+    "name": "Einundzwanzig Meetup Wien",
+    "region": "Wien",
+    "telegram": "https://t.me/joinchat/zrBSbkocvlUyZWE8"
+  }
+]

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 static/* dist && cp node_modules/amplitudejs/dist/amplitude.min.js dist/js/player.js",
+    "copy": "cp -r content/meetups.json 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/base/header.css

@@ -64,21 +64,17 @@
     align-items: center;
     justify-content: space-between;
     line-height: 1;
+    font-size: 4.5vw;
 
     @media (--up_to_M) {
       margin-bottom: var(--space-s);
-
-      & #navItemMedia {
-        display: none;
-      }
     }
-    @media (--up_to_L) {
+    @media (--M_to_L) {
       margin-top: var(--space-m);
-      font-size: var(--font-size-xl);
     }
     @media (--L_and_up) {
       margin-top: var(--space-l);
-      font-size: var(--font-size-xxl);
+      font-size: var(--font-size-xl);
     }
 
     & nav {
@@ -86,11 +82,10 @@
       align-items: center;
 
       & a {
-        margin-right: var(--space-l);
+        margin-right: 1em;
         text-transform: uppercase;
         font-weight: var(--font-weight-bold);
         cursor: pointer;
-        line-height: 0;
 
         &.current {
           color: var(--color-accent);
@@ -98,10 +93,12 @@
       }
     }
 
-    & button{
+    & button {
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       position: relative;
-      top: 2px;
+      top: 1px;
 
       @media (--up_to_S) {
         visibility: hidden;
@@ -110,8 +107,8 @@
       & svg {
         height: 4.5vw;
         width: 4.5vw;
-        min-height: 24px;
+        min-height: 18px;
-        min-width: 24px;
+        min-width: 18px;
         max-height: 42px;
         max-width: 42px;
         display: block;

src/includes/template.pug

@@ -57,6 +57,7 @@ html(lang="en")
             a.navItem(href="/podcast/" class=(navCurrent === 'podcast' && 'current')) Podcast
             a.navItem(href="/soundboard/" class=(navCurrent === 'soundboard' && 'current')) Sounds
             a.navItem(href="/team/" class=(navCurrent === 'team' && 'current')) Team
+            a.navItem#navItemMeetups(href="/meetups/" class=(navCurrent === 'meetups' && 'current')) Meetups
             a.navItem#navItemMedia(href="/media/" class=(navCurrent === 'media' && 'current')) Media
             //- a.navItem(href=site.meta.shopUrl target="_blank") Shop
           button(type="button").theme

src/meetups.pug

@@ -0,0 +1,18 @@
+extends /template.pug
+
+block vars
+  - const title = 'Meetups'
+  - const description = 'Eine Liste von Einundzwnazig-Treffen im D/A/CH-Raum'
+
+block main
+  #meetups.wrap
+    section
+      h1= title
+
+      ul.meetups
+        each m in meetups
+          li
+            a(href=m.telegram)= m.name
+            if !m.name.endsWith(m.region)
+              = " - "
+              span.region= m.region

tasks/generate_pages.js

@@ -7,6 +7,7 @@ const site = require('../generated/site-data.json')
 const episodes = require('../generated/episodes.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 renderPage = (template, out, data = {}) => {
@@ -24,6 +25,7 @@ const renderPage = (template, out, data = {}) => {
 renderPage('index', 'index', { navCurrent: 'index', currentEpisode: episodes[0] })
 renderPage('podcast', 'podcast', { navCurrent: 'podcast', episodes: [...episodes] })
 renderPage('team', 'team', { navCurrent: 'team', team, crew })
+renderPage('meetups', 'meetups', { navCurrent: 'meetups', meetups })
 renderPage('media', 'media', { navCurrent: 'media' })
 renderPage('soundboard', 'soundboard', { navCurrent: 'soundboard', soundboard })