Merge branch 'hackathon-q2-rework' into 'master'

Reworked Hackathon page layout, added MR counter

See merge request gitlab-com/www-gitlab-com!23201

source/community/hackathon/index.html.haml

@@ -23,59 +23,79 @@ extra_js:
       .row
         .col-md-6.col-md-offset-3
-          %p The next Hackathon will be on May 29-30, 2019!
+          :markdown
+            Get together with the GitLab community to contribute, learn and win exciting prizes.
+            <i class="fab fa-gitlab fa-fw" style="color:rgb(252,109,38); font-size:.85em" aria-hidden="true"></i>
+            Join us on May 29th - 30th 2019!
+            <i class="fab fa-gitlab fa-fw" style="color:rgb(252,109,38); font-size:.85em" aria-hidden="true"></i>
+            <br/><br/>
+            <span class="h3" id="nextHackathonCountdown">
+            <i class="fas fa-spinner fa-spin fa-fw" style="color:rgb(255,255,255)); font-size:.85em" aria-hidden="true"></i>
+            </span>
+
   #content
     .wrapper.container.contributing-content{role: "main"}
       .block
         .block-content
-          %h2.block-title
-          :markdown
-            The GitLab Hackathon is a virtual event that takes place once a quarter, where community members get together to work on merge requests,
-            participate in tutorial sessions, and to help new contributors. The Hackathon is open to anyone who is interested in contributing code,
-            documentation, translations, UX design and more. Prizes are awarded to participants for having Merge Requests (MRs) merged
+          %h2.block-title Joining in
+          :markdown           
+            The Hackathon is a virtual event open to anyone who is interested in contributing code,
+            documentation, translations, UX designs and more to GitLab. Prizes are awarded to participants for having Merge Requests (MRs) merged
             and there may also be special award categories at each Hackathon.
-            To get started contributing to GitLab, please visit the [Contribute page](https://about.gitlab.com/contributing/).
-            
-            If it's your first time contributing, a good way to join the Hackathon can be to [pick and fix a bite size issue](https://gitlab.com/gitlab-org/gitlab-ce/issues?scope=all&utf8=%E2%9C%93&state=opened&label_name%5B%5D=Accepting%20merge%20requests&weight=1&milestone_title=Backlog).
-      .block
-        .block-content
-          %h2.block-title Next Hackathon
-          :markdown
+            <!-- blank line -->
+            <figure class="video_container">
+            <iframe src="https://www.youtube.com/embed/vem9GCtXapE" frameborder="0" allowfullscreen="true"> </iframe>
+            </figure>
+            <!-- blank line -->
+
+            To get started:
+
+            1. Block the dates on your calendar!
+            1. Check out the [Contribute page](https://about.gitlab.com/contributing/).
+            1. Pick an existing issue to work on, or file a new one. If it's your first time contributing, a good way to join the Hackathon is to [pick and fix a bite size issue](https://gitlab.com/gitlab-org/gitlab-ce/issues?scope=all&utf8=%E2%9C%93&state=opened&label_name%5B%5D=Accepting%20merge%20requests&weight=1&milestone_title=Backlog).
+            1. [Join the tutorial sessions](#sessions)
+            1. Share the MRs you are working on, get help or help others. [Join the party at the contributors channel](#getting-help).
             <p class="alert alert-gitlab-purple text-center">
-            <i class="fab fa-gitlab fa-fw" style="color:rgb(252,109,38); font-size:.85em" aria-hidden="true"></i>
-            Counting down to May 29th - 30th 2019!
-            <i class="fab fa-gitlab fa-fw" style="color:rgb(252,109,38); font-size:.85em" aria-hidden="true"></i>
-            <br/><br/>
-            <span class="h3" id="nextHackathonCountdown">
+            <span class="h3" id="hackathonMRCount">
             <i class="fas fa-spinner fa-spin fa-fw" style="color:rgb(107,79,187); font-size:.85em" aria-hidden="true"></i>
             </span>
             </p>
-          %h3#prizes.block-title
-            %a{ href: '#prizes' } Hackathon Prizes
-          :markdown
-            We are excited to offer three categories of prizes for this Hackathon:
-
-            1. Everyone with an MR merged will receive a **Merged MR** prize
-            1. The individual with the most MRs merged will receive the **Grand Prize**.  There will also be a **Second Place** prize for people with the second most merged MRs.
-
-            **Note:** all qualifying MRs must be _merged_ by
-            [June 10 23:00 UTC](https://www.timeanddate.com/worldclock/fixedtime.html?iso=20190610T23&p1=1440)
-
+      .block
+        .block-content
+          %h2#contribute-for-prize.block-title
+            %a{ href: '#prize' } Hackathon Prizes            
           %p
-
           .row
             %p
           .row.prizes
             .col-sm-12
               .prize-image
                 = image_tag "/images/community/hackathon/q2-2019_hackathon_prizes.png", class: "img-responsive"
+
+          %p
+          :markdown
+            We are excited to offer three categories of prizes for this Hackathon:
+
+            1. **Merged MR**: everyone with an MR merged
+            1. **Grand Prize**: the individual with the most MRs merged
+            1. **Second Place**: the individual with the second most merged MRs.
+
           %p
-          %h3#sessions.block-title
+          :markdown
+            <p class="alert alert-info">
+            <i class="fas fa-info-circle" aria-hidden="true" style="color: rgb(49, 112, 143);"></i>
+            All qualifying MRs must be <em>merged</em> by
+            <a href="https://www.timeanddate.com/worldclock/fixedtime.html?iso=20190610T23&p1=1440">June 10 23:00 UTC</a>.
+            </p>
+
+      .block
+        .block-content
+          %h2#sessions.block-title
             %a{ href: '#sessions' } Tutorial sessions
           :markdown
             There will be tutorial sessions during the Hackathon. We will be adding more sessions as speakers are confirmed.
@@ -108,7 +128,7 @@ extra_js:
                 %td
                   Hackathon Kickoff
                 %td
-                  = link_to "https://gitlab.zoom.us/j/582675609"
+                  = link_to "Join in", "https://gitlab.zoom.us/j/582675609"
                 %td
                   = link_to "Ray Paik (@rpaik),", "https://gitlab.com/rpaik"
                   = link_to "Dave Planella (@dplanella)", "https://gitlab.com/dplanella"
@@ -120,7 +140,7 @@ extra_js:
                 %td
                   Contributing to GitLab
                 %td
-                  = link_to "https://gitlab.zoom.us/j/782675655"
+                  = link_to "Join in", "https://gitlab.zoom.us/j/782675655"
                 %td
                   = link_to "Ray Paik (@rpaik)", "https://gitlab.com/rpaik"
               %tr
@@ -131,7 +151,7 @@ extra_js:
                 %td
                   = link_to "GitLab Release Stage", "https://about.gitlab.com/handbook/product/categories/#release-stage"
                 %td
-                  = link_to "https://gitlab.zoom.us/j/886322532"
+                  = link_to "Join in", "https://gitlab.zoom.us/j/886322532"
                 %td
                   = link_to "Jason Lenny (@jlenny)", "https://gitlab.com/jlenny"
               %tr
@@ -142,7 +162,7 @@ extra_js:
                 %td
                   GitLab Monitor/Distribution
                 %td
-                  = link_to "https://gitlab.zoom.us/j/555400013"
+                  = link_to "Join in", "https://gitlab.zoom.us/j/555400013"
                 %td
                   = link_to "Joshua Lambert (@joshlambert)", "https://gitlab.com/joshlambert"                  
               %tr
@@ -153,7 +173,7 @@ extra_js:
                 %td
                   Hackathon wrap-up
                 %td
-                  = link_to "https://gitlab.zoom.us/j/198378877"
+                  = link_to "Join in", "https://gitlab.zoom.us/j/198378877"
                 %td
                   = link_to "Ray Paik (@rpaik)", "https://gitlab.com/rpaik"
@@ -169,26 +189,26 @@ extra_js:
             %a{ href: '#getting-help' } Getting help
           %p
           :markdown
-            For communications during the Hackathon, we will use the GitLab Community room in Gitter. This is a channel for community-related discussions and for community members to help each other as people have questions when contributing to GitLab.
+            For communications during the Hackathon, we will use the GitLab Contributors room in Gitter. This is a channel for community-related discussions and for community members to help each other as people have questions when contributing to GitLab.
             It's open to everyone, so please [join us at the Contributors Gitter room](https://gitter.im/gitlabhq/contributors)!
-      .block
-        .block-content
-          %h2#contribute-for-prize.block-title
-            %a{ href: '#contribute-for-prize' } Missed the last Hackathon?
-          :markdown
-            If you missed the recent Hackathon, you still have an opportunity to contribute for a prize.  You can start by searching for priority issues with the label `Contribute for prize` as you can see in this [query](https://gitlab.com/gitlab-org/gitlab-ce/issues?scope=all&utf8=%E2%9C%93&state=opened&label_name[]=Contribute%20for%20prize).  For the next few months, anyone who works on these issues and have an MR merged will receive the [GitLab moleskin note book (photo below)](https://shop.gitlab.com/collections/frontpage/products/gitlab-moleskin). If you're interested in working on these `Contribute for prize` items, you can mention `@rpaik` in the issue so that it can be assigned to you.
-
-          %p
-
-          .row
-            %p
-          .row.contributeforprize
-            .col-sm-4
-              .prize-image
-                = image_tag "/images/community/hackathon/moleskin.png", class: "img-responsive"
-          %p
+      -#.block
+        -#.block-content
+          -#%h2#contribute-for-prize.block-title
+            -#%a{ href: '#contribute-for-prize' } Missed the last Hackathon?
+          -#:markdown
+            -#If you missed the recent Hackathon, you still have an opportunity to contribute for a prize.  You can start by searching for priority issues with the label `Contribute for prize` as you can see in this [query](https://gitlab.com/gitlab-org/gitlab-ce/issues?scope=all&utf8=%E2%9C%93&state=opened&label_name[]=Contribute%20for%20prize).  For the next few months, anyone who works on these issues and have an MR merged will receive the [GitLab moleskin note book (photo below)](https://shop.gitlab.com/collections/frontpage/products/gitlab-moleskin). If you're interested in working on these `Contribute for prize` items, you can mention `@rpaik` in the issue so that it can be assigned to you.
+
+          -#%p
+
+          -#.row
+            -#%p
+          -#.row.contributeforprize
+            -#.col-sm-4
+              -#.prize-image
+                -#= image_tag "/images/community/hackathon/moleskin.png", class: "img-responsive"
+          -#%p
       .block
         .block-content

source/javascripts/hackathon.js

@@ -10,3 +10,25 @@ function setupHackathonCountdown() {
   setupHackathonCountdown();
 })();
+// Use the GitLab API to fetch the number of MRs submitted during the Hackathon
+// It assumes there is a tracking issue that contains the list of MRs as
+// related merge requests
+
+// Hackathon tracker issue. Update the issue ID for each Hackathon
+// E.g. on https://gitlab.com/gitlab-com/marketing/community-relations/contributor-program/hackathon/issues/18
+// the issue ID is '18'
+var hackathonIssueID = '14';
+var apiHost = 'https://gitlab.com/api/v4';
+var gitlabProjectID = '9821951';
+var apiEndpoint = '/projects/' + gitlabProjectID
+  + '/issues/' + hackathonIssueID + '/related_merge_requests';
+var apiURL = apiHost + apiEndpoint;
+
+fetch(apiURL)
+  .then(function(response) {
+    var totalRelatedMRs = response.headers.get('X-Total');
+    var boxMessage = totalRelatedMRs + ' MRs submitted '
+      + ' at the last Hackathon!';
+    document.getElementById('hackathonMRCount').innerHTML = boxMessage;
+  })
+  .catch(error => console.error('Error:', error));