Get site set up for podcasts

maban · Jan 22, 2015 · f617481 · f617481 · michaelthorne · Jan 29, 2015
1 parent dc17380
commit f617481
Show file tree

Hide file tree

Showing 62 changed files with 1,440 additions and 356 deletions.
diff --git a/_config.yml b/_config.yml
@@ -21,4 +21,7 @@ collections:
         output: true
     resourcetool:
         output: true
-
+    podcast:
+        output: true
+    patterns:
+        output: true
diff --git a/_includes/episodes.html b/_includes/episodes.html
@@ -1,25 +1,17 @@
-<section>
+<ul class="resources episodes">
 
-    <h1><a href="/podcast/index.html">The Style Guide Podcast</a></h1>
+    {% assign podcast = site.podcast | sort: 'number'  %}
 
-    <p>A small batch series of interviews on Style Guides, hosted by Brad Frost and Anna Debenham.</p>
+    {% for podcast in podcast %}
+    <li class="resource {{ podcast.status }}">
+        <a href="/podcast{{ podcast.link }}" class="resource-url">
+            {% if podcast.image %}<img src="/images/avatars/{{ podcast.image }}" alt="{{ podcast.image }}"/>{% endif %}
+            <span class="resource-description">
+                <h2 class="resource-title">{{ podcast.title }}</h2>
+                <div class="resource-summary">{{ podcast.content }}</div>
+            </span>
+        </a>
+    </li>
+    {% endfor %}
 
-    <ul class="resources episodes">
-
-        {% assign podcast = site.podcast | sort: 'number'  %}
-
-        {% for podcast in podcast %}
-        <li class="resource {{ podcast.status }}">
-            <a href="/podcast{{ podcast.link }}" class="resource-url">
-                {% if podcast.image %}<img src="/images/avatars/{{ podcast.image }}" alt="{{ podcast.image }}"/>{% endif %}
-                <span class="resource-description">
-                    <h2 class="resource-title">{{ podcast.title }}</h2>
-                    <div class="resource-summary">{{ podcast.content }}</div>
-                </span>
-            </a>
-        </li>
-        {% endfor %}
-
-    </ul>
-
-</section>
+</ul>
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -1,19 +1,24 @@
 <footer class="site-footer">
 
     <div class="wrapper">
-        <p class="text"><a href="https://github.com/maban/styleguides">Edit on GitHub</a></p>
-        <p class="text"><a href="https://github.com/maban/styleguides/graphs/contributors">Contributors</a></p>
-        <h2>Credits</h2>
-        <ul>
-            <li>Favicon ice cream icon by <a href="http://thenounproject.com/term/ice-cream-cone/2378/">Simon Child</a></li>
-            <li>Article icon by <a href="http://thenounproject.com/term/article/16377/">Desbenoit</a></li>
-            <li>Presentation icon by <a href="http://thenounproject.com/term/presentation/14838/">Louie Greco</a></li>
-            <li>Book icon by <a href="http://thenounproject.com/term/book/1976/">Edward Boatman</a></li>
-            <li>Website icon by <a href="http://thenounproject.com/term/website/63346/">Wilson Joseph</a></li>
-            <li>Wrench icon by <a href="http://thenounproject.com/term/wrench/1320/">John Caserta</a></li>
-            <li>Microphone icon by <a href="http://thenounproject.com/term/microphone/2313/">Travis Yunis</a></li>
-            <li>Plus icon by <a href="http://thenounproject.com/term/plus/34653/">Alex Auda Samora</a></li>
-        </ul>
+
+        <a class="button button-github" href="https://github.com/maban/styleguides">Edit on GitHub</a>
+
+        <a class="button button-github" href="https://github.com/maban/styleguides/graphs/contributors">Contributors</a>
+
+        <div class="credits">
+            <h2>Credits</h2>
+            <ul>
+                <li>Favicon ice cream icon by <a href="http://thenounproject.com/term/ice-cream-cone/2378/">Simon Child</a></li>
+                <li>Article icon by <a href="http://thenounproject.com/term/article/16377/">Desbenoit</a></li>
+                <li>Presentation icon by <a href="http://thenounproject.com/term/presentation/14838/">Louie Greco</a></li>
+                <li>Book icon by <a href="http://thenounproject.com/term/book/1976/">Edward Boatman</a></li>
+                <li>Website icon by <a href="http://thenounproject.com/term/website/63346/">Wilson Joseph</a></li>
+                <li>Wrench icon by <a href="http://thenounproject.com/term/wrench/1320/">John Caserta</a></li>
+                <li>Microphone icon by <a href="http://thenounproject.com/term/microphone/2313/">Travis Yunis</a></li>
+                <li>Plus icon by <a href="http://thenounproject.com/term/plus/34653/">Alex Auda Samora</a></li>
+            </ul>
+        </div>
     </div>
 
 </footer>
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,29 +1,38 @@
 <header class="site-header">
 
-  <div class="wrapper">
+    <div class="wrapper">
 
-    <a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a>
 
-    <nav class="site-nav">
-      <a href="#" class="menu-icon">
-        <svg viewBox="0 0 18 15">
-          <path fill="#424242" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
-          <path fill="#424242" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
-          <path fill="#424242" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
-        </svg>
-      </a>
 
-      <div class="trigger">
-          <a class="page-link" href="/articles.html">Articles</a>
-          <a class="page-link" href="/books.html">Books</a>
-          <a class="page-link" href="/podcasts.html">Podcasts</a>
-          <a class="page-link" href="/talks.html">Talks</a>
-          <a class="page-link" href="/tools.html">Tools</a>
-          <a class="page-link" href="/examples.html">Examples</a>
-          <a class="page-link" href="/podcast/index.html">The Style Guide Podcast</a>
-      </div>
-    </nav>
+      <nav class="nav-sections">
+          <ul>
+              <li class="section-home">
+                  <a href="{{ site.baseurl }}/">{{ site.title }}</a>
+              </li>
+              <li class="section-articles">
+                  <a href="/articles.html">Articles</a>
+              </li>
+              <li class="section-books">
+                  <a href="/books.html">Books</a>
+              </li>
+              <li class="section-podcasts">
+                  <a href="/podcasts.html">Podcasts</a>
+              </li>
+              <li class="section-talks">
+                  <a href="/talks.html">Talks</a>
+              </li>
+              <li class="section-tools">
+                  <a href="/tools.html">Tools</a>
+              </li>
+              <li class="section-examples">
+                  <a href="/examples.html">Examples</a>
+              </li>
+              <li class="section-podcast">
+                  <a href="/podcast/index.html">Style Guide Podcast</a>
+              </li>
+          </ul>
+      </nav>
 
-  </div>
+    </div>
 
 </header>
diff --git a/_includes/podcast-actions.html b/_includes/podcast-actions.html
@@ -0,0 +1,4 @@
+<section class="download">
+    <span class="button disabled subscribe icon-itunes" href="#">Subscribe in iTunes <small>(coming soon)</small></span> or
+    <a class="button subscribe icon-feed" href="http://styleguides.podomatic.com/rss2.xml">Get the feed</a>
+</section>
diff --git a/_layouts/episode.html b/_layouts/episode.html
@@ -5,27 +5,31 @@
 <html lang="en">
 {% include head.html %}
 
-<body>
+<body class="template-{{ page.section }} template-episode">
   {% include header.html %}
 
   <div class="page-content">
     <div class="wrapper podcast-episode">
 
-      <h1>Style Guide Podcast with {{page.title}}</h1>
+      <h1>Style Guides <span class="fancy">with</span> {{page.title}}</h1>
 
-      <section class="media-player audio">
-        <audio controls="controls" preload="none" width="100%">
-          <source src="{{page.audio}}" type="audio/mpeg">
-        </audio>
-      </section>
+      {{page.audio}}
+
+      {% include podcast-actions.html %}
 
       <section class="bio">
         <h2>About {{page.title}}</h2>
-        <img src="/images/avatars/{{page.image}}" alt="photo of {{page.title}}" />
         <p>{{ page.about }}</p>
       </section>
 
-
+      <section class="episode-links">
+          <h2>Links</h2>
+          <ul class="links">
+              {% for item in page.links %}
+              <li><a href="{{ item.url }}">{{ item.text }}</a></li>
+              {% endfor %}
+          </ul>
+      </section>
 
       <section class="transcript">
         <h2>The Transcript</h2>

diff --git a/_layouts/page.html b/_layouts/page.html
@@ -2,7 +2,7 @@
 <html lang="en">
   {% include head.html %}
 
-  <body>
+  <body class="template-{{ page.section }}">
     {% include header.html %}
 
     <div class="page-content">
@@ -12,11 +12,11 @@
     </div>
 
     {% include footer.html %}
-  
+
     <script>
       document.addEventListener('click', function (e) {
         var button = e.target;
-        
+
         if (button.getAttribute('data-reset') === 'true') {
           // Reset the filters
           var filter = button.getAttribute('data-filter');
@@ -28,14 +28,14 @@
           filterTag(filter, tag);
         }
       });
-      
+
       // Filter tag
       function filterTag (filter, tag) {
         var items = document.querySelectorAll('.' + filter + ' > li');
-      
+
         for (var i = 0; i < items.length; i++) {
           var itemTags = items[i].getAttribute('data-tags');
-      
+
           // Catch case with no tags
           if (itemTags != null) {
             if (itemTags.indexOf(tag) < 0) {
@@ -44,11 +44,11 @@
           }
         }
       }
-      
+
       // Reset filters
       function resetFilter (filter) {
         var items = document.querySelectorAll('.' + filter + ' > li');
-      
+
         for (var i = 0; i < items.length; i++) {
           items[i].setAttribute('data-toggle', 'on');
         }

diff --git a/_layouts/podcast.html b/_layouts/podcast.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  {% include head.html %}
+
+  <body class="template-{{ page.section }}">
+    {% include header.html %}
+
+    <div class="page-content">
+      <div class="wrapper">
+
+        <h1>{{ page.title }}</h1>
+
+        <p class="lede">{{ content }}</p>
+
+        {% include podcast-actions.html %}
+
+        {% include episodes.html %}
+
+      </div>
+    </div>
+
+    {% include footer.html %}
+
+  </body>
+</html>
diff --git a/_patterns/a.html b/_patterns/a.html
@@ -0,0 +1,3 @@
+---
+---
+<p>This is <a href="#">an inline link</a>.</p>
diff --git a/_patterns/heading-1.html b/_patterns/heading-1.html
@@ -0,0 +1,3 @@
+---
+---
+<h1>Heading One</h1>
diff --git a/_patterns/heading-2.html b/_patterns/heading-2.html
@@ -0,0 +1,3 @@
+---
+---
+<h2>Heading Two</h2>
diff --git a/_patterns/heading-3.html b/_patterns/heading-3.html
@@ -0,0 +1,3 @@
+---
+---
+<h3>Heading Three</h3>
diff --git a/_patterns/heading-4.html b/_patterns/heading-4.html
@@ -0,0 +1,3 @@
+---
+---
+<h4>Heading Four</h4>
diff --git a/_patterns/heading-5.html b/_patterns/heading-5.html
@@ -0,0 +1,3 @@
+---
+---
+<h5>Heading Five</h5>
diff --git a/_patterns/heading-6.html b/_patterns/heading-6.html
@@ -0,0 +1,3 @@
+---
+---
+<h6>Heading Six</h6>
diff --git a/_patterns/list-ordered.html b/_patterns/list-ordered.html
@@ -0,0 +1,8 @@
+---
+---
+<ol>
+    <li>Bread</li>
+    <li>Milk</li>
+    <li>Eggs</li>
+    <li>Butter</li>
+</ol>
diff --git a/_patterns/list-unordered.html b/_patterns/list-unordered.html
@@ -0,0 +1,9 @@
+---
+---
+<ul>
+    <li>Preheat oven to 180°C</li>
+    <li>Mix ingredients together in a bowl</li>
+    <li>Grease a baking tin</li>
+    <li>Pour the mixture into the baking tin</li>
+    <li>Bake in oven for 40-45 minutes</li>
+</ul>
diff --git a/_patterns/media-audio.html b/_patterns/media-audio.html
@@ -0,0 +1,3 @@
+---
+---
+<audio src="/_media/audio/audio.mp3" controls></audio>
diff --git a/_patterns/media-image.html b/_patterns/media-image.html
@@ -0,0 +1,3 @@
+---
+---
+<img src="image.jpg" alt="Some alt text"/>
diff --git a/_patterns/media-video.html b/_patterns/media-video.html
@@ -0,0 +1,6 @@
+---
+---
+<video controls>
+    <source src="/_media/video/video.webm" type="video/webm"/>
+    <source src="/_media/video/video.mp4" type="video/mp4"/>
+</video>
diff --git a/_patterns/text-abbr.html b/_patterns/text-abbr.html
@@ -0,0 +1,3 @@
+---
+---
+<p><abbr title="HyperText Markup Language">HTML</abbr></p>
diff --git a/_patterns/text-blockquote.html b/_patterns/text-blockquote.html
@@ -0,0 +1,5 @@
+---
+---
+<blockquote>
+    <p>In matters of truth and justice, there is no difference between large and small problems, for issues concerning the treatment of people are all the same.</p>
+</blockquote>
diff --git a/_patterns/text-caption.html b/_patterns/text-caption.html
@@ -0,0 +1,3 @@
+---
+---
+<p class="note">Your email address will not be published.</p><!--/.caption-->
diff --git a/_patterns/text-cite.html b/_patterns/text-cite.html
@@ -0,0 +1,3 @@
+---
+---
+<p><cite>The Guardian</cite>, January 2nd, 2014</p>
diff --git a/_patterns/text-code-pre.html b/_patterns/text-code-pre.html
@@ -0,0 +1,8 @@
+---
+---
+<pre class="language-css">
+<code>ul li {
+    list-style-type: square;
+    padding-left: 0;
+    }</code>
+</pre>
diff --git a/_patterns/text-code-pre.txt b/_patterns/text-code-pre.txt
@@ -0,0 +1,7 @@
+---
+---
+The code is styled using a class on the code element:
+
+* language-css for css
+* language-javascript for javascript
+* language-html for html
diff --git a/_patterns/text-code.html b/_patterns/text-code.html
@@ -0,0 +1,4 @@
+---
+---
+<p>This is some <code>inline code</code>.</p>
+</pre>
diff --git a/_patterns/text-figure.html b/_patterns/text-figure.html
@@ -0,0 +1,8 @@
+---
+---
+<figure>
+    <img src="image.jpg" alt="Some alt text"/>
+    <figcaption>
+        <p>This is a caption</p>
+    </figcaption>
+</figure>