add event feed to community page (uses meetup api and supports manual…

…ly entered events)

README.md

@@ -35,3 +35,13 @@ To contribute resources to the JAMstack community, simply clone this branch and
 ## Contribute Examples
 
 To contribute examples to the JAMstack community, simply clone this branch and edit the `examples.yaml` in the `/site/data` directory. Just add another item (following the the prexisting syntax). Lastly, upload a thumbnail of the site to the `/img/examples` directory (image should be a jpeg 596px wide and 396px tall) and submit a pull request. We will review these regularly and likely merge the addition shortly.
+
+## Contribute Events
+
+To contribute events to the JAMstack community, we recommend just adding the event to your meetup and let our logic do the rest. If the event is outside of a meetup (like a conference), please manually submit it using the short guide below:
+
+1. Clone this branch and edit the `events.yaml` in the `/site/data` directory
+2. Add your event (following the the prexisting syntax)
+3. Submit a pull request
+
+*We will review these regularly and likely merge the addition shortly.

site/data/events.yaml

@@ -0,0 +1,9 @@
+---
+events:
+  # - title: "This is an manually entered event example."
+  #   description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consectetur, sapien eget mattis egestas.""
+  #   date: 2020-10-10
+  #   time: 8:00 PM
+  #   location: The Moon
+  #   link: https://www.youreventsitelink.com
+---

site/layouts/pages/community.html

@@ -35,10 +35,78 @@ <h4>Join the Gitter Chat for...</h4>
         <strong>• Resource recommendations</strong>
         <strong>• General discussion</strong>
       </p>
-
     </a>
   </section>
 
+  <section class="events contained">
+    <script src="/js/moment.js"></script>
+    <script>
+      var getMeetupEvents = function(meetupName, meetupPath, requestUrl) {
+        $.ajax({
+          type:"GET",
+          url: requestUrl,
+          success: function(events) {
+
+            for(i=0;i<=events.data.length-1;i++) {
+
+              var meetupDate      = moment(events.data[i].time).format('MMM DD'),
+                  meetupTime      = moment(events.data[i].time).format('h:mm a'),
+                  meetupLink      = events.data[i].link,
+                  meetupLocation  = events.data[i].venue.name,
+                  meetupEventName = events.data[i].name;
+
+              if (i===0) {
+                $('#meetup-events').append('<h4 class="meetup-events-label">Upcoming '+meetupName+' Events</h4>');
+              }
+
+              $('#meetup-events').append('<a href="'+meetupLink+'" class="event-card with-link"><div class="event-date">'+ meetupDate +'</div><div class="event-info"><h4>'+meetupLocation+'</h4><h1>'+meetupEventName+'</h1><em>Starts at '+meetupTime+'</em></div></a>');
+            }
+          },
+          error: function() {
+            console.log('There was an error retrieving events for '+meetupName+'.');
+          },
+          dataType: 'jsonp',
+        });
+      }
+
+      $('.chapter').each(function() {
+
+        if ($(this).attr('href').length > 1) {
+
+          var meetupName = $("h1", this).text(),
+              meetupPath = $(this).attr('href').slice(22);
+              requestUrl = "https://api.meetup.com"+meetupPath+"events";
+
+          getMeetupEvents(meetupName, meetupPath, requestUrl);
+        }
+
+      })
+    </script>
+
+    <h1>Come hang out at the next JAMstack event.</h1>
+    {{ range .Site.Data.events.events }}
+      <a href='{{ if .link }}{{ .link }}{{ end }}' class='event-card{{ if .link }} with-link{{ end }}'>
+        <div class="event-date">{{ dateFormat "Jan 02" .date }}</div>
+        <div class="event-info">
+          <h4>
+            {{ if .location }}
+              {{ .location }}
+            {{ end }}
+          </h4>
+          <h1>{{ .title }}</h1>
+          <em>
+            {{ if .time }}
+               Starts at {{ .time }}
+            {{ end }}
+          </em>
+          <p>{{ .description }}</p>
+        </div>
+      </a>
+    {{ end }}
+
+    <div id="meetup-events"></div>
+  </section>
+
   <div class="bottom-cta">
     <div class="contained">
       <img src="{{ .Site.Data.community.bottomcta.artpath }}" class="art"/>