<commit_before><!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Pusher Push Button</title>
    <link rel="stylesheet" href="build.css" media="screen">
  </head>
  <body class="ph5 mw8 mb6">

    <h3>
      <a href="http://button.pusher.io">button.pusher.io</a>
    </h3>

    <hr />

    <h1 class="f-subheadline">Pusher Push Button</h1>

    <hr />

    <main class="mw7">

      <h2 class="f2">We've put a button online, and want to see what you can make it do.</h2>

      <div class="tc">
        <img src="on.png" class="mw5" id="button-overlay"/>
        <img src="off.png" class="mw5"/>
      </div>

      <p class="f4">Show us something neat and we'll throw you a high-five<a href="#high-five-terms">*</a>.</p>

      <h2>Connect to the button</h2>

      <pre class="bg-light-gray pa3"><code>&lt;script src="https://js.pusher.com/3.0/pusher.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
var pusher = new Pusher('{{pusherKey}}', {cluster:'{{pusherCluster}}'})
var button = pusher.subscribe('button')

button.bind('press', function(data) {
  doSomethingNeat()
})
&lt;/script&gt;</code></pre>

      {{#jsbinLink}}
      <p class="mv4">
        <a href="{{.}}" target="_blank" class="link bg-black pa2 white bn">Open in JSBin</a>
      </p>
      {{/jsbinLink}}

      <h2>Make a virtual button</h2>

      <p>You're welcome to come and use our button, but if you want to test your creation with your own button, you can create a virtual one below:</p>

      <form method="post">
        <button class="link bg-black pa2 white bn">Create a virtual button</button>
      </form>

      <div id="high-five-terms">
        <p>
          <em>
            <strong>*</strong>High-fives may contain swag.
          </em>
        </p>
      </div>
    </main>


    <script src="https://js.pusher.com/3.0/pusher.min.js"></script>
    <script type="text/javascript">

      var h1 = document.querySelector('h1')
      var overlay = document.querySelector('#button-overlay')

      function press(){
        overlay.className = 'mw5 show'
        h1.style.webkitFilter = h1.style.filter = 'blur(2px)'
      }

      function release(id){
        overlay.className = 'mw5'
        h1.style.webkitFilter = h1.style.filter = ''
      }


      new Pusher('{{pusherKey}}', {cluster:'{{pusherCluster}}'})
        .subscribe('button')
          .bind('press', press)
          .bind('release', release)

    </script><commit_msg>v3.1<commit_after><!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Pusher Push Button</title>
    <link rel="stylesheet" href="build.css" media="screen">
  </head>
  <body class="ph5 mw8 mb6">

    <h3>
      <a href="http://button.pusher.io">button.pusher.io</a>
    </h3>

    <hr />

    <h1 class="f-subheadline">Pusher Push Button</h1>

    <hr />

    <main class="mw7">

      <h2 class="f2">We've put a button online, and want to see what you can make it do.</h2>

      <div class="tc">
        <img src="on.png" class="mw5" id="button-overlay"/>
        <img src="off.png" class="mw5"/>
      </div>

      <p class="f4">Show us something neat and we'll throw you a high-five<a href="#high-five-terms">*</a>.</p>

      <h2>Connect to the button</h2>

      <pre class="bg-light-gray pa3"><code>&lt;script src="https://js.pusher.com/3.1/pusher.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
var pusher = new Pusher('{{pusherKey}}', {cluster:'{{pusherCluster}}'})
var button = pusher.subscribe('button')

button.bind('press', function(data) {
  doSomethingNeat()
})
&lt;/script&gt;</code></pre>

      {{#jsbinLink}}
      <p class="mv4">
        <a href="{{.}}" target="_blank" class="link bg-black pa2 white bn">Open in JSBin</a>
      </p>
      {{/jsbinLink}}

      <h2>Make a virtual button</h2>

      <p>You're welcome to come and use our button, but if you want to test your creation with your own button, you can create a virtual one below:</p>

      <form method="post">
        <button class="link bg-black pa2 white bn">Create a virtual button</button>
      </form>

      <div id="high-five-terms">
        <p>
          <em>
            <strong>*</strong>High-fives may contain swag.
          </em>
        </p>
      </div>
    </main>


    <script src="https://js.pusher.com/3.1/pusher.min.js"></script>
    <script type="text/javascript">

      var h1 = document.querySelector('h1')
      var overlay = document.querySelector('#button-overlay')

      function press(){
        overlay.className = 'mw5 show'
        h1.style.webkitFilter = h1.style.filter = 'blur(2px)'
      }

      function release(id){
        overlay.className = 'mw5'
        h1.style.webkitFilter = h1.style.filter = ''
      }


      new Pusher('{{pusherKey}}', {cluster:'{{pusherCluster}}'})
        .subscribe('button')
          .bind('press', press)
          .bind('release', release)

    </script>
{'fraction_non_alphanumeric': 0.18306965276350934, 'fraction_numerical': 0.015204438052188206, 'mean_word_length': 2.6220238095238093, 'pattern_counts': {'":': 0, '<': 121, '<?xml version=': 0, '>': 121, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4393173', 'n_tokens_mistral': 1737, 'n_tokens_neox': 1678, 'n_words': 383}