nodeschool · matchai · Sep 26, 2016 · Sep 26, 2016 · Sep 26, 2016 · Sep 26, 2016
diff --git a/.gitignore b/.gitignore
@@ -3,4 +3,4 @@
 _site
 node_modules/
 config.json
-.idea/
+.idea/
diff --git a/Gemfile b/Gemfile
@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+source "https://rubygems.org"
+
+gem 'jekyll'
+gem 'jekyll-sitemap'
+gem 'jekyll-multiple-languages-plugin'
diff --git a/README.md b/README.md
@@ -2,11 +2,11 @@
 
 # Develop NodeSchoolMTL
 
-We use [Jekyll](https://jekyllrb.com/) to build [http://nodeschool.io/montreal](http://nodeschool.io/montreal). If you want to run the site or develop it locally you'll have to install [Jekyll](https://github.com/jekyll/jekyll) and [Jekyll-Sitemap](https://github.com/jekyll/jekyll-sitemap).
+We use [Jekyll](https://jekyllrb.com/) to build [http://nodeschool.io/montreal](http://nodeschool.io/montreal). If you want to run the site or develop it locally you'll have to install [Bundler](http://bundler.io/) to install all needed dependencies.
 
-`gem install jekyll`
+`gem install bundler`
 
-`gem install jekyll-sitemap`
+`bundle`
 
 We pull in event information through the [Tito](http://tito.io) embed widget but all the attendees listed are pulled via the [Tito API](http://api.tito.io). In order to update the listing of attendees, you'll have:
 

diff --git a/_config.yml b/_config.yml
@@ -3,12 +3,17 @@ permalink: /:title
 url: "http://nodeschool.io/montreal"
 timezone: America/Montreal
 
+languages: ["en", "fr"]
+exclude_from_localizations: ["fonts", "i", "js", "node_modules", "package.json",
+"favicon.ico", "Gemfile", "Gemfile.lock", "robots.txt"]
+
 kramdown:
   input: GFM
 
 # Use the following plug-ins
 gems:
   - jekyll-sitemap
+  - jekyll-multiple-languages-plugin
 
 sass:
   sass_dir: _sass
@@ -52,7 +57,7 @@ mentors:
     twitter: fharper
   - name: rsayar
     display: 'Rami Sayar'
-    twitter: ramisayar    
+    twitter: ramisayar
   - name: matan
     display: 'Matan Kushner'
     twitter: matchai
diff --git a/_i18n/en.yml b/_i18n/en.yml
@@ -0,0 +1,36 @@
+global:
+  title: NodeSchool Montreal
+langs:
+  en: English
+  fr: Français
+nav: # Left-hand navigation
+  home: Home
+  next-workshop: Next Workshop
+  mentors: Mentors
+  community: Community
+  photos: Photos
+  code-of-conduct: Code of Conduct
+  agenda: Agenda
+main: # Center column
+  about: <strong>NodeSchool</strong> is a selection of open source <a href="http://nodeschool.io/#workshoppers" target="_blank">workshops</a> that teach web software skills. You can do them on your own or in the company of peers and mentors, right here in <strong>Montreal</strong>.
+side: # Right-hand side panel
+  email-input: Your email for news
+  email-confirm: Get notified
+  mentors-join: To become a mentor please <a href="https://github.com/nodeschool/montreal/edit/master/README.md">add your name to the mentors list</a>, and your photo here.
+  mentors-prepare: You can prepare for the workshops by studying the <a href='https://github.com/nodeschool/organizers/wiki/Event-Mentor-Best-Practices#on-being-a-mentor' target="_blank">"On Being a Mentor"</a> tips.
+  community-join: Just show up and become part of Montreal's vibrant web developer community!
+  sponsors: Sponsors
+  sponsors-mentor: The best way to sponsor NodeSchool Montréal is with your time &mdash; become a mentor and share your knowledge and expertise. The opportunity cost for 2+ hours per mentor totals to over $2000 invested in NodeSchool, each month. Thank you.
+  sponsors-contribute: We welcome small cash contributions, regular meeting space, and technical speakers. You receive no mentions or speak-time during workshops. Write to <a href="mailto:[email protected]">[email protected]</a>
+
+# Event-specific
+event:
+  title: 2nd Day NodeSchool
+  date: Wednesday <strong>October 24<sup>th</sup></strong> at 5:30pm
+  location: <strong><a href="http://tempslibre.coop/">Temps Libre</a></strong>, 5605 ave. de Gaspé, &#35;106, Montréal, QC H2T 2A4
+  location-map: https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2795.0944391154517!2d-73.60023448437062!3d45.52830507910178!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4cc9196f8d691e3d%3A0x45df797a1e695f5e!2s5605+Avenue+de+Gasp%C3%A9%2C+Montr%C3%A9al%2C+QC+H2T+2A4!5e0!3m2!1sen!2sca!4v1462125098770
+timeline:
+  5:30pm: Registration and Node environment setup, get your laptop ready!
+  5:50pm: Node basic principles presented by <a href="https://twitter.com/cassierheaume"><strong>@cassierheaume</strong></a> and <a href="https://twitter.com/pcuci"><strong>@pcuci</strong></a>
+  6:00pm: Complete any <a href="http://nodeschool.io/#workshoppers">workshopper</a> or work on your own web project, mentors walk around to help
+  8:00pm: Demo your solutions, networking
diff --git a/_i18n/fr.yml b/_i18n/fr.yml
@@ -0,0 +1,4 @@
+global:
+  title: NodeSchool Montréal
+nav:
+  home: Acceuil
diff --git a/_layouts/index.html b/_layouts/index.html
@@ -6,14 +6,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="Nodeschool Montréal Chapter">
     <link rel="icon" type="image/x-icon" href="favicon.ico">
-    <script type="text/javascript" src='js/jquery.js '></script>
-    <script type="text/javascript" src='js/tabletop1.3.4.js'></script>
-    <script type="text/javascript" src='js/sheetsee.js'></script>
-    <script type="text/javascript" src='js/leaflet.markercluster.js'></script>
+    <script type="text/javascript" src='/js/jquery.js '></script>
+    <script type="text/javascript" src='/js/tabletop1.3.4.js'></script>
+    <script type="text/javascript" src='/js/sheetsee.js'></script>
+    <script type="text/javascript" src='/js/leaflet.markercluster.js'></script>
     <link href='https://api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.css' rel='stylesheet' />
-    <title>Nodeschool Montréal</title>
+    <title>{% t global.title %}</title>
     <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300' rel='stylesheet' type='text/css'>
-    <link href="styles.css" rel="stylesheet">
+    <link href="/styles.css" rel="stylesheet">
     <!--[if lt IE 9]>
       <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
@@ -35,7 +35,7 @@
       <defs>
         {% for mentor in site.mentors %}
         <pattern id="mentor-{{forloop.index}}" width="300" height="300" patternUnits="userSpaceOnUse">
-          <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="i/mentors/{{mentor.name}}.jpg" width="250" height="300" preserveAspectRatio="xMidYMid slice">
+          <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/i/mentors/{{mentor.name}}.jpg" width="250" height="300" preserveAspectRatio="xMidYMid slice">
              <title>{{mentor.display}}</title>
           </image>
         </pattern>
@@ -44,57 +44,48 @@
     </svg>
     <nav class="nav">
       <ul>
-        <li><a href="#" class="ir home" data-text="Home">Home</a></li>
-        <li><a href="#events" class="ir events" data-text="Next Workshop">Next Workshop</a></li>
-        <li><a href="#mentors" class="ir mentors" data-text="Mentors">Mentors</a></li>
-        <li><a href="#community" class="ir community" data-text="Community">Community</a></li>
-        <li><a href="#photos" class="ir photos" data-text="Photos">Photos</a></li>
-        <li><a href="#codeofconduct" class="ir code" data-text="Code of Conduct">Code of Conduct</a></li>
+        <li><a href="#" class="ir home" data-text="{% t nav.home %}">{% t nav.home %}</a></li>
+        <li><a href="#events" class="ir events" data-text="Next Workshop">{% t nav.next-workshop %}</a></li>
+        <li><a href="#mentors" class="ir mentors" data-text="Mentors">{% t nav.mentors %}</a></li>
+        <li><a href="#community" class="ir community" data-text="Community">{% t nav.community %}</a></li>
+        <li><a href="#photos" class="ir photos" data-text="Photos">{% t nav.photos %}</a></li>
+        <li><a href="#codeofconduct" class="ir code" data-text="Code of Conduct">{% t nav.code-of-conduct %}</a></li>
       </ul>
     </nav>
     <main class="main">
       <section class="panel text">
         <div class="container">
           <div class="header">
             <a class="logo pull-right"><img src="http://i.imgur.com/M0Mh3PZ.jpg" alt="NodeSchool Montréal Logo"></a>
-            <h1>NodeSchool Montréal</h1>
+            <h1>{% t global.title %}</h1>
           </div>
-          <p class="about"><strong>NodeSchool</strong> is a selection of open source <a href="http://nodeschool.io/#workshoppers" target="_blank">workshops</a> that teach web software skills. You can do them on your own or in the company of peers and mentors, right here in <strong>Montréal</strong>.</p>
+          <p class="about">{% t main.about %}</p>
           <a href="https://gitter.im/nodeschool/montreal"><img src="https://camo.githubusercontent.com/fed5b5512498193ce4bba599fd94cd12b9f56491/68747470733a2f2f696d672e736869656c64732e696f2f6769747465722f726f6f6d2f6e776a732f6e772e6a732e737667"/></a>
           <a href="https://twitter.com/NodeSchoolMTL" class="twitter-follow-button" data-show-count="false">Follow @NodeSchoolMTL</a>
           <div class="fb-like" data-href="https://www.facebook.com/Nodeschoolmtl" data-layout="button_count" data-action="like" data-size="small" data-show-faces="false" data-share="false"></div>
           <a class="github-button" href="https://github.com/nodeschool/montreal" data-count-href="/nodeschool/montreal/stargazers" data-count-api="/repos/nodeschool/montreal#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star nodeschool/montreal on GitHub">Star</a>
           <div class="event">
             <p id="events" class="title">
-              Next Workshop: <strong>2nd Day NodeSchool</strong>
+              {% t nav.next-workshop %}: <strong>{% t event.title %}</strong>
             </p>
             <p class="schedule">
-              <strong>Agenda</strong>
+              <strong>{% t nav.agenda %}</strong>
               <ul class="timeline">
-                <li>
-                  <em>5:30pm</em> Registration and Node environment setup, get your laptop ready!
-                </li>
-                <li>
-                  <em>5:50pm</em> Node basic principles presented by <a
-                  href="https://twitter.com/cassierheaume"><strong>@cassierheaume</strong></a> and <a
-                  href="https://twitter.com/pcuci"><strong>@pcuci</strong></a>
-                </li>
-                <li>
-                  <em>6:00pm</em> Complete any <a href="http://nodeschool.io/#workshoppers">workshopper</a> or work on your own web project, mentors walk around to help
-                </li>
-                <li>
-                  <em>8:00pm</em> Demo your solutions, networking
-                </li>
+                {% for item in site.translations[site.lang]["timeline"] %}
+                  <li>
+                    <em>{{ item[0] }}</em> {{ item[1] }}
+                  </li>
+                {% endfor %}
               </ul>
             </p>
             <p class="register">
-              Wednesday <strong>October 24<sup>th</sup></strong> at 5:30pm
+              {% t event.date %}
             </p>
             <p class="location">
-              <strong><a href="http://tempslibre.coop/">Temps Libre</a></strong>, 5605 ave. de Gaspé, #106, Montréal, QC H2T 2A4
+              {% t event.location%}
             </p>
             <div class="map">
-              <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2795.0944391154517!2d-73.60023448437062!3d45.52830507910178!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4cc9196f8d691e3d%3A0x45df797a1e695f5e!2s5605+Avenue+de+Gasp%C3%A9%2C+Montr%C3%A9al%2C+QC+H2T+2A4!5e0!3m2!1sen!2sca!4v1462125098770" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
+              <iframe src="{% t event.location-map %}" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
             </div>
             <tito-widget event="nodeschoolmtl/2nd-day-nodeschool"></tito-widget>
           </div>
@@ -110,37 +101,37 @@ <h3>"How do I run a workshopper?"</h3>
 $ learnyounode</pre>
           </code>
           <p>Having trouble installing Node? No worries - we'll do our best to help you get set up once you arrive at a workshop.</p>
-          <h2 id="photos">Photos</h2>
+          <h2 id="photos">{% t nav.photos %}</h2>
           <div class="list-photos cf">
             {% for i in (30..30) %}
               <div class="row">
-                <a href="i/photos/{{i}}.jpg" target="_blank" class="image-wrapper">
+                <a href="/i/photos/{{i}}.jpg" target="_blank" class="image-wrapper">
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 300" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
                     <polygon class="hex" points="250,75 250,225 125,300 0,225 0,75 125,0" fill="url('#photo-{{i}}')"></polygon>
                   </svg>
                 </a>
               </div>
             {% endfor %}
           </div>
-          <h2 id="codeofconduct">Code of Conduct</h2>
+          <h2 id="codeofconduct">{% t nav.code-of-conduct %}</h2>
           <p>We promise a safe, harrassment-free learning environment. Please report any concerns immediately to organizers. We follow the <a href="http://confcodeofconduct.com/" target="_blank">conference code of conduct</a>.</p>
         </div>
       </section>
       <aside class="panel side">
         <div class="container">
           <div class="inner">
-            <img src="i/schoolhouse-beige.svg" alt="NodeSchool Logo">
+            <img src="/i/schoolhouse-beige.svg" alt="NodeSchool Logo">
             <div class="mailinglist">
               <form action="//sana.us1.list-manage.com/subscribe/post?u=a16929a7d86b16ecfc960cd42&amp;id=8e533856ad" method="post" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                 <label class="email">
-                  <input type="email" value="" name="EMAIL" class="required email" placeholder="Your email for news">
+                  <input type="email" value="" name="EMAIL" class="required email" placeholder="{% t side.email-input %}">
                 </label>
                 <div style="position: absolute; left: -5000px;"><input type="text" name="b_a16929a7d86b16ecfc960cd42_8e533856ad" tabindex="-1" value=""></div>
-                <input type="submit" value="Get notified" name="subscribe">
+                <input type="submit" value="{% t side.email-confirm %}" name="subscribe">
               </form>
             </div>
-            <h2 id="mentors">Mentors</h2>
-            <p>To become a mentor please <a href="https://github.com/nodeschool/montreal/edit/master/README.md">add your name to the mentors list</a>, and your photo here.</p>
+            <h2 id="mentors">{% t nav.mentors %}</h2>
+            <p>{% t side.mentors-join %}</p>
             <div class="list-mentors cf">
               {% assign row = 0 %}
               {% assign rowElemIdx = 1 %}
@@ -175,18 +166,18 @@ <h2 id="mentors">Mentors</h2>
                 {% endif %}
               {% endfor %}
             </div>
-            <p>You can prepare for the workshops by studying the <a href='https://github.com/nodeschool/organizers/wiki/Event-Mentor-Best-Practices#on-being-a-mentor' target="_blank">"On Being a Mentor"</a> tips.</p>
-            <h2 id="community">Community</h2>
-            <p>Just show up and become part of Montreal's vibrant web developer community!</p>
+            <p>{% t side.mentors-prepare %}</p>
+            <h2 id="community">{% t nav.community %}</h2>
+            <p>{% t side.community-join %}</p>
             <div class="fb-page" data-href="https://www.facebook.com/Nodeschoolmtl/" data-tabs="timeline,events" data-width="500" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="true">
               <blockquote cite="https://www.facebook.com/Nodeschoolmtl/" class="fb-xfbml-parse-ignore">
                 <a href="https://www.facebook.com/Nodeschoolmtl/">NodeSchoolMTL</a>
               </blockquote></div>
-            <h2 id="sponsors">Sponsors</h2>
+            <h2 id="sponsors">{% t side.sponsors %}</h2>
             <div class="list-sponsors cf">
-              <p>The best way to sponsor NodeSchool Montréal is with your time &mdash; become a mentor and share your knowledge and expertise. The opportunity cost for 2+ hours per mentor totals to over $2000 invested in NodeSchool, each month. Thank you.</p>
-              <a href="http://tempslibre.coop/" target="_blank"><img src="i/sponsors/tempslibre.png" width="30%" height="30%"/></a>
-              <p>We welcome small cash contributions, regular meeting space, and technical speakers. You receive no mentions or speak-time during workshops. Write to <a href="mailto:[email protected]">[email protected]</a></p>
+              <p>{%t side.sponsors-mentor %}</p>
+              <a href="http://tempslibre.coop/" target="_blank"><img src="/i/sponsors/tempslibre.png" width="30%" height="30%"/></a>
+              <p>{%t side.sponsors-contribute %}</p>
             </div>
           </div>
         </div>

diff --git a/_sass/fonts.sass b/_sass/fonts.sass
@@ -1,6 +1,6 @@
 @font-face
   font-family: 'icon'
-  src: url('fonts/icon.eot?-fvbane')
-  src: url('fonts/icon.eot?#iefix-fvbane') format('embedded-opentype'), url('fonts/icon.woff?-fvbane') format('woff'), url('fonts/icon.ttf?-fvbane') format('truetype'), url('fonts/icon.svg?-fvbane#icon') format('svg')
+  src: url('/fonts/icon.eot?-fvbane')
+  src: url('/fonts/icon.eot?#iefix-fvbane') format('embedded-opentype'), url('/fonts/icon.woff?-fvbane') format('woff'), url('/fonts/icon.ttf?-fvbane') format('truetype'), url('/fonts/icon.svg?-fvbane#icon') format('svg')
   font-weight: normal
   font-style: normal