Create a re-usable Social partial

website/themes/uppy/layout/index.ejs

@@ -15,16 +15,7 @@
     </ul>
   </header>
 
-  <ul class="IndexSocial">
-    <li><a href="https://twitter.com/uppy_io" class="twitter-follow-button" data-show-count="false" data-dnt="true">Follow @uppy_io</a></li>
-    <li><iframe src="http://ghbtns.com/github-btn.html?user=transloadit&repo=uppy&type=watch&count=true"
-  allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe></li>
-   </li>
-    <li class="BuildBadge">
-     <span class="wrapper">
-       <a href="https://travis-ci.org/transloadit/uppy"><img src="https://travis-ci.org/transloadit/uppy.svg" alt="Build Status"></a>
-     </span>
-  </ul>
+  <%- partial('partials/social') %>
 </section>
 
 <section class="IndexAbout">
@@ -80,6 +71,3 @@
   <p>Puppy icon by <a href="https://thenounproject.com/2y2"></a>Jorge Fernandez del Castillo Gomez</a> from the Noun Project.</p>
   <p>© <%- date(Date.now(), 'YYYY') %> <a href="https://transloadit.com" target="_blank">Transloadit</a></p>
 </footer>
-
-<!-- Twitter follow button script -->
-<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

website/themes/uppy/layout/layout.ejs

@@ -41,6 +41,10 @@
       <% } %>
       <script src="/js/common.js"></script>
 
+
+      <!-- Twitter follow button script -->
+      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
+
       <!--script src="//ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
       <script>
         WebFont.load({

website/themes/uppy/layout/partials/social.ejs

@@ -0,0 +1,10 @@
+<ul class="Social">
+  <li><a href="https://twitter.com/uppy_io" class="twitter-follow-button" data-show-count="false" data-dnt="true">Follow @uppy_io</a></li>
+  <li><iframe src="http://ghbtns.com/github-btn.html?user=transloadit&repo=uppy&type=watch&count=true"
+allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe></li>
+ </li>
+  <li class="BuildBadge">
+   <span class="wrapper">
+     <a href="https://travis-ci.org/transloadit/uppy"><img src="https://travis-ci.org/transloadit/uppy.svg" alt="Build Status"></a>
+   </span>
+</ul>

website/themes/uppy/layout/stats.ejs

@@ -65,4 +65,6 @@
   <div class="footer">Caught a mistake or want to contribute to the documentation?
      <a href="https://github.com/transloadit/uppy/blob/master/website/src/<%- page.source %>" target="_blank">Edit/fork this page directly on Github</a>!
   </div>
+
+  <%- partial('partials/social') %>  
 </div>

website/themes/uppy/source/css/_common.scss

@@ -145,6 +145,28 @@ a.button {
   }
 }
 
+
+.Social {
+  text-align: center;
+  list-style-type: none;
+  padding: 0;
+  margin: 0 auto;
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.Social li {
+  margin: 0.7em 0;
+
+  @media #{$screen-medium} {
+    display: inline-block;
+    margin: 0 0.7em;
+    vertical-align: middle;
+
+    &.last { margin-left: -2px; }
+  }
+}
+
 /**
 * MainLogo
 */
@@ -307,4 +329,4 @@ a.button {
 * BuildBadge
 */
 .page-index .BuildBadge { margin-left: -2px !important; }
-.page-inner .BuildBadge { margin-top: 15px; }
+.Sidebar .BuildBadge { margin-top: 15px; }

website/themes/uppy/source/css/_index.scss

@@ -83,27 +83,6 @@
   display: none;
 }
 
-.IndexSocial {
-  text-align: center;
-  list-style-type: none;
-  padding: 0;
-  margin: 0 auto;
-  margin-top: 2em;
-  margin-bottom: 2em;
-}
-
-.IndexSocial li {
-  margin: 0.7em 0;
-
-  @media #{$screen-medium} {
-    display: inline-block;
-    margin: 0 0.7em;
-    vertical-align: middle;
-
-    &.last { margin-left: -2px; }
-  }
-}
-
 .IndexAbout {
   max-width: 760px;
   margin: 3em auto;