index.html


<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <title>Torino Tech</title>
    <meta name="description" content="Torino Tech - Eventi OpenSource, OpenHardware, OpenData in Torino" />

    <meta name="HandheldFriendly" content="True" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">

    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

    <link rel="canonical" href="http://torinotech.github.io" />

    <script type="application/ld+json">
      {
          "@context": "http://schema.org",
          "@type": "Website",
          "publisher": "torinotech.github.io - Eventi tech a Torino",
          "url": "http://torinotech.github.io",
          "image": "https://cloud.githubusercontent.com/assets/8074/9904181/1be6a5a2-5c7c-11e5-818b-04e135a04309.png",
          "description": "Eventi tech a Torino"
      }
    </script>
    <meta name=”keywords” content="torino tech, tecnologia, eventi, open source">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@TorinoTech">
    <meta name="twitter:creator" content="@TorinoTech">
    <meta name="twitter:title" content="http://torinotech.github.io">
    <meta name="twitter:description" content="torinotech.github.io - Eventi tech a Torino">
    <meta name="twitter:image" content="http://torinotech.github.io/assets/full-bk.png">


    <!-- OG stuff metatags -->
    <meta property="og:locale" content="it_IT" />
    <meta property="og:site_name" content="torinotech.github.io - Eventi tech a Torino" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="torinotech.github.io - Eventi tech a Torino" />
    <meta property="og:description" content="Eventi OpenSource, OpenData, OpenHardware in Torino" />
    <meta property="og:url" content="http://torinotech.github.io" />
    <meta property="og:image" content="http://torinotech.github.io/assets/full-bk.png" />

    <!-- Style -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/application.css">

</head>
<body>


<div class="header">
  <div class="wrapper">
    <h1>Torino Tech</h1>
    <a rel="nofollow" class="js-track" href="https://github.com/TorinoTech/torinotech.github.io/blob/master/README.md">Partecipa!</a>
  </div>
</div>

<div class="intro">
  <div class="wrapper">
    <section>
      <p>
        Tutti gli eventi Tech di Torino in una sola pagina! OpenSource, OpenData, OpenHardware. Vuoi sapere che cos'é TorinoTech? Leggi il <a href="https://github.com/TorinoTech/torinotech.github.io#regolamento">Regolamento</a> (è molto minimal, promesso!).
        <br />Puoi anche segnalare un <a href="https://gitter.im/TorinoTech/lavoro">Annuncio di lavoro Tech</a> a Torino.
      </p>
    </section>
  </div>
</div>
<div class="wrapper">
  <div id="events-placeholder"></div>
</div>
<div class="wrapper">
  <div class="social">
    <div class="social__item">
      <a href="https://www.facebook.com/TorinoTech"><i class="fa fa-facebook"></i></a>
    </div>
    <div class="social__item">
      <a href="https://twitter.com/TorinoTech"><i class="fa fa-twitter"></i></a>
    </div>
    <div class="social__item">
      <a href="https://github.com/TorinoTech"><i class="fa fa-github"></i></a>
    </div>
    <div class="social__item">
      <a href="https://gitter.im/TorinoTech/chat"><i class="fa fa-weixin"></i></a>
    </div>
  </div>
  <div class="footer">
      <section class="col-xs-offset-0 col-xs-7 col-md-offset-2 col-md-10">
          <div class="js-footer box" style="color:#999; font-size:14px; float:right;">
            <!-- placeholder -->
          </div>
      </section>
  </div>

</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js
"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.5.2/js-yaml.min.js"></script>

<script>

  function get(filename, cb) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (xhttp.readyState == 4 && xhttp.status == 200) {
        cb(xhttp.responseText);
      }
    };
    xhttp.open("GET", filename, true);
    xhttp.send();
  }

  function updateEvents(eventsJson) {
    var eventsHtml = ''
    var today = new Date()
    var latestMonth // used for months separator

    for (var key in eventsJson) {
      var el = eventsJson[key]
      el.when = new Date(el.when.replace(' ', 'T')+'+0000')

      if (el.when < today) continue

      if (latestMonth !== el.when.getMonth()) {
        eventsHtml += '<div class="event-separator">' + el.when.toLocaleString('it',{month:'long'}) + '</div>'
        latestMonth = el.when.getMonth()
      }

      eventsHtml += '<div class="event-box" key='+key+'><small>' + el.organizer +'</small>'+
                        '<h4><a href="' + el.url + '">' + ((el.title) ? el.title : '') + '</a></h4>' +
                        ((el.free || el.free == undefined) ? '<span style="color:green;">free</span> - ' : '') + el.when.toLocaleString('it', {timeZone: 'UTC'}) + ' - ' + el.when.toLocaleString('it' ,{weekday: 'long', timeZone: 'UTC'}) +'<br />' +
                        '</div>'
    }

    if (eventsHtml === '') eventsHtml = '<div>Non ci sono eventi in programma, perché non organizzi tu qualcosa?</div>'

    $('#events-placeholder').html(eventsHtml)
  }

  // Fill the list
  get('events.yml.txt', function(data) {
    var doc = jsyaml.load(data);
    updateEvents(doc)
  })

</script>
</body>
</html>