updated blog front page template to provide the 10 most recent post t…

…easers, updated the front page teaser view as well. Both teaser views show the blog post title, date, author,some of the text and the image defined in each post's front matter variable teaser_image: added pikwi include code.
opentechinstitute · Feb 24, 2014 · 690277c · 690277c
1 parent ee6e715
commit 690277c
Show file tree

Hide file tree

Showing 113 changed files with 4,553 additions and 2,737 deletions.
diff --git a/test.commotion/_config.yml b/test.commotion/_config.yml
@@ -5,6 +5,9 @@ encoding: utf-8
 
 url: "staging.commotionwireless.net"
 port: 80
+piwik:
+  base_url: piwik.opentechinstitute.org
+  site_id: 1
 
 permalink: /blog/:year/:month/:day/:title
 pagination: 3
diff --git a/test.commotion/_includes/blog-front-content.html b/test.commotion/_includes/blog-front-content.html
@@ -0,0 +1,11 @@
+ <h2>Recent Blog Posts</h2>
+ {% for post in site.posts limit: 10 %}
+ <div class="blog-container">
+  <h3><a href="{{ post.url }}" class="blog-teaser-title">{{ post.title }}</a></h3>
+  <img src="/files/{{ post.teaser_image }}" style="width:15%; height: auto; float: right;" />
+  <p class="blog-pubdata">{{ post.date | date: "%B %d, %Y" }} {{ post.post_author }}</p>
+  <p class="blog-excerpt">{{ post.content | split:'<!--more-->' | first | strip_html }}</p>
+  <a href="{{ post.url }}">Read More</a>
+  <hr>
+ </div>
+ {% endfor %}
diff --git a/test.commotion/_includes/footer.html b/test.commotion/_includes/footer.html
@@ -15,6 +15,6 @@
 <script src="/js/jquery-2.1.0.min.js"></script>
 <script src="/js/bootstrap.js"></script>
 <script src="/js/commotion.js"></script>
-
+{% include piwik-code %}
   </body> 
 </html>
diff --git a/test.commotion/_includes/piwik-code b/test.commotion/_includes/piwik-code
@@ -0,0 +1,15 @@
+<!-- Piwik -->
+<script type="text/javascript">
+  var _paq = _paq || [];
+  _paq.push(["trackPageView"]);
+  _paq.push(["enableLinkTracking"]);
+
+  (function() {
+    var u=(("https:" == document.location.protocol) ? "https" : "http") + "://piwik.opentechinstitute.org/";
+    _paq.push(["setTrackerUrl", u+"piwik.php"]);
+    _paq.push(["setSiteId", "1"]);
+    var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";
+    g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s);
+  })();
+</script>
+<!-- End Piwik Code -->
diff --git a/test.commotion/_layouts/blog-front.html b/test.commotion/_layouts/blog-front.html
@@ -3,7 +3,7 @@
 {% include pageheadings.html %} 
 {% include content-area-open.html %} 
 {% include left-twothird-open.html %}
-{{ content }}
+{% include blog-front-content.html %}
 {% include left-twothird-close.html %}
 {% include right-col-start.html %}
 {% include blog-release-post.html %}

diff --git a/test.commotion/_layouts/front.html b/test.commotion/_layouts/front.html
@@ -8,13 +8,14 @@
       <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>
     </div>
     <div class="right-twothird">
-	    <h3>Recent Blog Posts</h3>
-	    <!-- {% for post in site.posts %} -->
-	    <!--   <h4><a href="{{ post.url }}" class="blog-teaser-title">{{ post.title }}</a></h4> -->
-	    <!--   <p class="blog-pubdata">{{ post.date | date: "%B %d, %Y" }} {{ post.post_author }}</p> -->
-	    <!--   <p class="blog-excerpt">{{ post.content | split:'<\!--more-\->' | first }}</p> -->
-	    <!--   <hr> -->
-	    <!-- {% endfor %} -->
+      <h3>Recent Blog Posts</h3>
+      {% for post in site.posts limit: 3 %}
+      <div class="blog-container">
+      <h4><a href="{{ post.url }}" class="blog-teaser-title">{{ post.title }}</a></h4>
+      <p class="blog-pubdata"><img src="/files/{{ post.teaser_image }}" style="width:15%; height: auto; float: right;" />{{ post.date | date: "%B %d, %Y" }} {{ post.post_author }}</p>
+      <p class="blog-excerpt">{{ post.content | split:'<!--more-->' | first | strip_html }}</p>
+      </div>
+      {% endfor %}
     </div>
   </div>
 </div>

diff --git a/...n/_posts/2014-01-14-commotion-team-participates-dc-internet-freedom-hack-day.md b/...n/_posts/2014-01-14-commotion-team-participates-dc-internet-freedom-hack-day.md
@@ -5,6 +5,7 @@ categories: [ui,ux,hack day]
 created: 2014-01-14
 changed: 2014-01-15
 post_author: critzo
+teaser_image: uihackday-011114.jpeg
 lang: en
 ---
   <img alt="Commotion card sort activity from the DC Internet Freedom Hack Day, 1/11/2014" class="media-image attr__typeof__foaf:Image img__fid__746 img__view_mode__media_original attr__format__media_original" src="/files/uihackday-011114.jpeg" style="width: 250px; height: 249px; float: right;" typeof="foaf:Image" />

diff --git a/test.commotion/_site/about/faq/index.html b/test.commotion/_site/about/faq/index.html
@@ -1,4 +1,3 @@
-
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -17,7 +16,7 @@
     <![endif]-->
   </head>
 <body>
-<div class="navbar navbar-inverse navbar-fixed-top">
+<div class="navbar navbar-inverse">
   <div class="boxes-box" id="boxes-box-top_colors">
     <div class="boxes-box-content">
       <div class="navbar-inners">
@@ -31,6 +30,7 @@
   </div>
 </div>
 
+
 <div id="logo">
   <a href="/"><img src="/images/commotion_kbabout_measure-03_0_0.png" alt="Commotion Wireless logo"/></a>
 </div>
@@ -107,6 +107,28 @@ <h1 class="pageheadings">FAQ</h1>
 <div class="contentcontainer">
   <div class="container">
 
+<div class="right-third">
+
+
+
+<div id="subsection-menu">
+<h3><a  href="/about">About</a></h3>
+      <ul>
+          <li><a href="/about">About Commotion</a></li>
+          <li><a href="/about/faq">FAQ</a></li>
+          <li><a href="/about/guiding-principles">Guiding Principles</a></li>
+          <li><a href="/about/where-its-used">Where It&#039;s Used</a></li>
+          <li><a href="/about/press">Press</a></li>
+          <li><a href="/about/license-privacy">License &amp; Privacy</a></li>
+          <li><a href="/jobs">Jobs</a></li>
+          <li><a href="/contact">Contact</a></li>
+      </ul>
+</div>
+
+
+
+</div>
+
 <div class="left-twothird">
 
 <h2>General</h2><p><strong>What is Commotion?</strong><br />
@@ -145,28 +167,6 @@ <h2>General</h2><p><strong>What is Commotion?</strong><br />
 Commotion is a suite of tools designed to take advantage of any available satellite Internet service, and that connection may be shared with anyone on the network. If no Internet connection is available, network users may still communicate securely and anonymously with each other. Finally, the network is designed to be self-healing, allowing users to join and leave the network as needed.</p>
     </div>
 
-    <div class="right-third">
-
-
-
-<div id="subsection-menu">
-<h3><a  href="/about">About</a></h3>
-      <ul>
-          <li><a href="/about">About Commotion</a></li>
-          <li><a href="/about/faq">FAQ</a></li>
-          <li><a href="/about/guiding-principles">Guiding Principles</a></li>
-          <li><a href="/about/where-its-used">Where It&#039;s Used</a></li>
-          <li><a href="/about/press">Press</a></li>
-          <li><a href="/about/license-privacy">License &amp; Privacy</a></li>
-          <li><a href="/jobs">Jobs</a></li>
-          <li><a href="/contact">Contact</a></li>
-      </ul>
-</div>
-
-
-
-    </div>
-
   </div>
 </div>
 
@@ -187,6 +187,21 @@ <h3><a  href="/about">About</a></h3>
 <script src="/js/jquery-2.1.0.min.js"></script>
 <script src="/js/bootstrap.js"></script>
 <script src="/js/commotion.js"></script>
+<!-- Piwik -->
+<script type="text/javascript">
+  var _paq = _paq || [];
+  _paq.push(["trackPageView"]);
+  _paq.push(["enableLinkTracking"]);
+
+  (function() {
+    var u=(("https:" == document.location.protocol) ? "https" : "http") + "://piwik.opentechinstitute.org/";
+    _paq.push(["setTrackerUrl", u+"piwik.php"]);
+    _paq.push(["setSiteId", "1"]);
+    var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";
+    g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s);
+  })();
+</script>
+<!-- End Piwik Code -->
 
   </body> 
 </html>

diff --git a/test.commotion/_site/about/guiding-principles/index.html b/test.commotion/_site/about/guiding-principles/index.html
@@ -1,4 +1,3 @@
-
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -17,7 +16,7 @@
     <![endif]-->
   </head>
 <body>
-<div class="navbar navbar-inverse navbar-fixed-top">
+<div class="navbar navbar-inverse">
   <div class="boxes-box" id="boxes-box-top_colors">
     <div class="boxes-box-content">
       <div class="navbar-inners">
@@ -31,6 +30,7 @@
   </div>
 </div>
 
+
 <div id="logo">
   <a href="/"><img src="/images/commotion_kbabout_measure-03_0_0.png" alt="Commotion Wireless logo"/></a>
 </div>
@@ -107,22 +107,7 @@ <h1 class="pageheadings">Guiding Principles</h1>
 <div class="contentcontainer">
   <div class="container">
 
-<div class="left-twothird">
-
-<h2>Commotion Project Guiding Principles</h2><ul>
-	<li><strong>The Commotion project is an <a href='https://en.wikipedia.org/wiki/Open_source'>open source</a>, <a href='https://en.wikipedia.org/wiki/Free_software'>free software</a> toolkit.</strong> The community welcomes all contributions and conversations that help the project grow and improve in accordance with its mission.<br />
-	&nbsp;</li>
-	<li>Commotion’s Mission and Goals are guided by the active developers and community stakeholders who contribute to the project community. Active developers of Commotion projects will guide the development of their individual project.<br />
-	&nbsp;</li>
-	<li>The Commotion project team encourages communities to customize the software to better meet local needs. We request that all customizations be contributed or communicated back to the Commotion community so that improvements can be reused without undue duplication of effort.<br />
-	&nbsp;</li>
-	<li>Work on Commotion should do no harm to existing projects. Projects that implement new code that breaks the existing functionality of other Commotion projects should work with the community of the existing project in order to provide support for the existing functions.<br />
-	&nbsp;</li>
-	<li>New members may contribute to existing Commotion projects by collaborating with active developers. Each Commotion subproject will maintain an active version-controlled code repository. Guidelines for contribution will be managed by each project’s active developers, and will be posted on each project’s development page.</li>
-</ul>
-    </div>
-
-    <div class="right-third">
+<div class="right-third">
 
 
 
@@ -142,6 +127,21 @@ <h3><a  href="/about">About</a></h3>
 
 
 
+</div>
+
+<div class="left-twothird">
+
+<h2>Commotion Project Guiding Principles</h2><ul>
+	<li><strong>The Commotion project is an <a href='https://en.wikipedia.org/wiki/Open_source'>open source</a>, <a href='https://en.wikipedia.org/wiki/Free_software'>free software</a> toolkit.</strong> The community welcomes all contributions and conversations that help the project grow and improve in accordance with its mission.<br />
+	&nbsp;</li>
+	<li>Commotion’s Mission and Goals are guided by the active developers and community stakeholders who contribute to the project community. Active developers of Commotion projects will guide the development of their individual project.<br />
+	&nbsp;</li>
+	<li>The Commotion project team encourages communities to customize the software to better meet local needs. We request that all customizations be contributed or communicated back to the Commotion community so that improvements can be reused without undue duplication of effort.<br />
+	&nbsp;</li>
+	<li>Work on Commotion should do no harm to existing projects. Projects that implement new code that breaks the existing functionality of other Commotion projects should work with the community of the existing project in order to provide support for the existing functions.<br />
+	&nbsp;</li>
+	<li>New members may contribute to existing Commotion projects by collaborating with active developers. Each Commotion subproject will maintain an active version-controlled code repository. Guidelines for contribution will be managed by each project’s active developers, and will be posted on each project’s development page.</li>
+</ul>
     </div>
 
   </div>
@@ -164,6 +164,21 @@ <h3><a  href="/about">About</a></h3>
 <script src="/js/jquery-2.1.0.min.js"></script>
 <script src="/js/bootstrap.js"></script>
 <script src="/js/commotion.js"></script>
+<!-- Piwik -->
+<script type="text/javascript">
+  var _paq = _paq || [];
+  _paq.push(["trackPageView"]);
+  _paq.push(["enableLinkTracking"]);
+
+  (function() {
+    var u=(("https:" == document.location.protocol) ? "https" : "http") + "://piwik.opentechinstitute.org/";
+    _paq.push(["setTrackerUrl", u+"piwik.php"]);
+    _paq.push(["setSiteId", "1"]);
+    var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";
+    g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s);
+  })();
+</script>
+<!-- End Piwik Code -->
 
   </body> 
 </html>

diff --git a/test.commotion/_site/about/index.html b/test.commotion/_site/about/index.html
@@ -1,4 +1,3 @@
-
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -17,7 +16,7 @@
     <![endif]-->
   </head>
 <body>
-<div class="navbar navbar-inverse navbar-fixed-top">
+<div class="navbar navbar-inverse">
   <div class="boxes-box" id="boxes-box-top_colors">
     <div class="boxes-box-content">
       <div class="navbar-inners">
@@ -31,6 +30,7 @@
   </div>
 </div>
 
+
 <div id="logo">
   <a href="/"><img src="/images/commotion_kbabout_measure-03_0_0.png" alt="Commotion Wireless logo"/></a>
 </div>
@@ -107,17 +107,7 @@ <h1 class="pageheadings">About Commotion</h1>
 <div class="contentcontainer">
   <div class="container">
 
-<div class="left-twothird">
-
-<p>Commotion is a free,&nbsp;open-source communication tool that uses mobile phones, computers, and other wireless devices to create decentralized mesh networks. Commotion provides a way for you to share your Internet connection with the people around you, but it&nbsp;is not a replacement for your Internet connection. Read more about how Commotion works on our <a href='/about/faq'>Frequently Asked Questions</a> page.</p><p><img alt='Mesh Networking Across Devices' src='/files/housesMesh_0.png' style='height:124px; width:419px' /></p><p>Wireless mesh networks allow devices to connect directly to each other without going through a centralized point. Mesh networks are self-healing and can grow organically. They also allow for easy sharing of services over the network, such as Internet and applications.</p><p><img alt='' class='media-image attr__typeof__foaf:Image img__fid__547 img__view_mode__media_large attr__format__media_large' height='176' src='/files/styles/large/public/testMesh_1.png?itok=bhNg-QkK' typeof='foaf:Image' width='419' /></p><h2>We aim to:</h2><ul>
-	<li>create a simple, easy-to-use communications tool that anyone can set up and use without technical expertise</li>
-	<li>provide a platform for building community wireless networks and hosting local applications</li>
-	<li>build a tool for creating infrastructure that is resilient against surveillance and disruption</li>
-	<li>develop a flexible, open-source software platform that programmers around the globe can continually adapt and build upon</li>
-</ul><h2>Want to learn more?</h2><p><a href='/about/where-its-used'>Learn more about where Commotion is being tested</a>. To learn how Commotion works, read <a href='/docs/get-started'>our documentation</a>.</p><p>Feel free to <a href='contact'>contact us</a>.</p><hr /><p>Commotion is led by the <a href='http://oti.newamerica.net' target='_blank'>Open Technology Institute</a>.</p><p><a href='http://oti.newamerica.net'><img alt='Open Technology Institute logo' src='/files/OTI-Institute-CMYK%20%5BConverted%5D-01.png' style='height:90px; width:300px' title='Open Technology Institute logo' /></a></p>
-    </div>
-
-    <div class="right-third">
+<div class="right-third">
 
 
 
@@ -137,6 +127,16 @@ <h3><a  href="/about">About</a></h3>
 
 
 
+</div>
+
+<div class="left-twothird">
+
+<p>Commotion is a free,&nbsp;open-source communication tool that uses mobile phones, computers, and other wireless devices to create decentralized mesh networks. Commotion provides a way for you to share your Internet connection with the people around you, but it&nbsp;is not a replacement for your Internet connection. Read more about how Commotion works on our <a href='/about/faq'>Frequently Asked Questions</a> page.</p><p><img alt='Mesh Networking Across Devices' src='/files/housesMesh_0.png' style='height:124px; width:419px' /></p><p>Wireless mesh networks allow devices to connect directly to each other without going through a centralized point. Mesh networks are self-healing and can grow organically. They also allow for easy sharing of services over the network, such as Internet and applications.</p><p><img alt='' class='media-image attr__typeof__foaf:Image img__fid__547 img__view_mode__media_large attr__format__media_large' height='176' src='/files/styles/large/public/testMesh_1.png?itok=bhNg-QkK' typeof='foaf:Image' width='419' /></p><h2>We aim to:</h2><ul>
+	<li>create a simple, easy-to-use communications tool that anyone can set up and use without technical expertise</li>
+	<li>provide a platform for building community wireless networks and hosting local applications</li>
+	<li>build a tool for creating infrastructure that is resilient against surveillance and disruption</li>
+	<li>develop a flexible, open-source software platform that programmers around the globe can continually adapt and build upon</li>
+</ul><h2>Want to learn more?</h2><p><a href='/about/where-its-used'>Learn more about where Commotion is being tested</a>. To learn how Commotion works, read <a href='/docs/get-started'>our documentation</a>.</p><p>Feel free to <a href='contact'>contact us</a>.</p><hr /><p>Commotion is led by the <a href='http://oti.newamerica.net' target='_blank'>Open Technology Institute</a>.</p><p><a class='img' href='http://oti.newamerica.net'><img alt='Open Technology Institute logo' src='/files/OTI-Institute-CMYK%20%5BConverted%5D-01.png' style='height:90px; width:300px' title='Open Technology Institute logo' /></a></p>
     </div>
 
   </div>
@@ -159,6 +159,21 @@ <h3><a  href="/about">About</a></h3>
 <script src="/js/jquery-2.1.0.min.js"></script>
 <script src="/js/bootstrap.js"></script>
 <script src="/js/commotion.js"></script>
+<!-- Piwik -->
+<script type="text/javascript">
+  var _paq = _paq || [];
+  _paq.push(["trackPageView"]);
+  _paq.push(["enableLinkTracking"]);
+
+  (function() {
+    var u=(("https:" == document.location.protocol) ? "https" : "http") + "://piwik.opentechinstitute.org/";
+    _paq.push(["setTrackerUrl", u+"piwik.php"]);
+    _paq.push(["setSiteId", "1"]);
+    var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";
+    g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s);
+  })();
+</script>
+<!-- End Piwik Code -->
 
   </body> 
 </html>