Add content to footer

static/css/main.less

@@ -50,6 +50,14 @@ body:after{
 }
 
 footer{
-  margin: 0;
-  padding: 0;
+    #gradient > .vertical(#f5f5f5, #fff);
+    margin: 0;
+    padding-top: 30px;
+    text-shadow: -1px 1px 1px #fff;
+    .row{
+        margin-bottom: 25px;
+    }
+    .span12 p{
+        width: 65%;
+    }
 }

static/css/prettify.css

@@ -0,0 +1,94 @@
+.com { color: #93a1a1; }
+.lit { color: #195f91; }
+.pun, .opn, .clo { color: #93a1a1; }
+.fun { color: #dc322f; }
+.str, .atv { color: #268bd2; }
+.kwd, .tag { color: #195f91; }
+.typ, .atn, .dec, .var { color: #CB4B16; }
+.pln { color: #93a1a1; }
+.prettyprint {
+  background-color: #fefbf3;
+  padding: 9px;
+  border: 1px solid rgba(0,0,0,.2);
+  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1);
+     -moz-box-shadow: 0 1px 2px rgba(0,0,0,.1);
+          box-shadow: 0 1px 2px rgba(0,0,0,.1);
+}
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums {
+  margin: 0 0 0 40px;
+}
+/* IE indents via margin-left */
+ol.linenums li {
+  padding: 0 5px;
+  color: rgba(0,0,0,.15);
+  line-height: 20px;
+  -webkit-border-radius: 2px;
+     -moz-border-radius: 2px;
+          border-radius: 2px;
+}
+/* Alternate shading for lines */
+li.L1, li.L3, li.L5, li.L7, li.L9 {  }
+
+/*
+$base03:    #002b36;
+$base02:    #073642;
+$base01:    #586e75;
+$base00:    #657b83;
+$base0:     #839496;
+$base1:     #93a1a1;
+$base2:     #eee8d5;
+$base3:     #fdf6e3;
+$yellow:    #b58900;
+$orange:    #cb4b16;
+$red:       #dc322f;
+$magenta:   #d33682;
+$violet:    #6c71c4;
+$blue:      #268bd2;
+$cyan:      #2aa198;
+$green:     #859900;
+*/
+
+
+/*
+#1d1f21 Background
+#282a2e Current Line
+#373b41 Selection
+#c5c8c6 Foreground
+#969896 Comment
+#cc6666 Red
+#de935f Orange
+#f0c674 Yellow
+#b5bd68 Green
+#8abeb7 Aqua
+#81a2be Blue
+#b294bb Purple
+*/
+
+
+/* DARK THEME */
+/* ---------- */
+
+.prettyprint-dark {
+  background-color: #1d1f21;
+  border: 0;
+  padding: 10px;
+}
+.prettyprint-dark .linenums li {
+  color: #444;
+}
+.prettyprint-dark .linenums li:hover {
+  background-color: #282a2e;
+}
+/* tags in html */
+.prettyprint-dark .kwd,
+.prettyprint-dark .tag { color: #cc6666; }
+/* html attr */
+.prettyprint-dark .typ,
+.prettyprint-dark .atn,
+.prettyprint-dark .dec,
+.prettyprint-dark .var { color: #de935f; }
+/* html attr values */
+.prettyprint-dark .str,
+.prettyprint-dark .atv { color: #b5bd68; }

static/js/application.js

@@ -1,3 +1,9 @@
 $(function() {
+
+  // Set up PJAX.
   $('a[data-pjax]').pjax()
+
+  // Pretty print <pre> blocks.
+  prettyPrint()
+
 })

templates/base.html

@@ -4,10 +4,10 @@
     <meta charset="utf-8">
 
     <meta name="author" content="Zach Williams, zachwill.com" />
-    <meta name="description" content="A simple app testing out Flask with PJAX." />
+    <meta name="description" content="A simple app testing out Flask with PJAX on Heroku." />
     <meta name="viewport" content="width=980" />
 
-    <title>Testing Flask with PJAX</title>
+    <title>Flask with PJAX</title>
 
     <!--[if lt IE 9]>
       <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
@@ -17,6 +17,9 @@
     <link rel="stylesheet" href="/static/css/bootstrap.css">
     <link rel="stylesheet/less" href="/static/css/main.less">
 
+    <link rel="stylesheet" href="/static/css/prettify.css">
+    <script src="/static/js/prettify.js"></script>
+
     <!-- Use `less.js` to dynamically compile your `stylesheet/less` files -->
     <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.1.3/less-1.1.3.min.js"></script>
 
@@ -46,7 +49,6 @@
       s.parentNode.insertBefore(g,s)}(document,'script'));
     </script>
 
-
     <!-- Prompt IE < 8 users to install Chrome Frame. -->
     <!--[if lt IE 8 ]>
       <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>

templates/footer.html

@@ -0,0 +1,103 @@
+{% raw %}
+<div class="container">
+  <div class="page-header">
+    <h1>Flask PJAX <small>A simple example site</small></h1>
+  </div>
+
+  <div class="row">
+    <div class="span4">
+      <h2>Templating</h2>
+      <p>A few protips for creating your templates.</p>
+    </div>
+    <div class="span12">
+      <h3>No blocks, no problem.</h3>
+      <p>The easiest way to set up your templates is without <code>blocks</code>.</p>
+
+<pre class="prettyprint">
+&lt;!-- ohai.html --&gt;
+
+&lt;div class="container"&gt;
+  &lt;div class="row"&gt;
+    &lt;h1&gt;ohai&lt;/h1&gt;
+    &lt;p&gt;Welcome to the home page.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+      <p>And then use the <code>include</code> tag in your base template.</p>
+
+<pre class="prettyprint">
+&lt;!-- base.html --&gt;
+
+&lt;div id="main" role="main"&gt;
+  {% include template %}
+&lt;/div&gt;
+</pre>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="span4">
+      <h2>Rendering</h2>
+      <p>A quick protip for rendering templates.</p>
+    </div>
+    <div class="span12">
+      <h3>How do I include?</h3>
+      <p>This way you can set up a function to render templates that aren't
+      requested by <code>PJAX</code> &mdash; which will then default to the
+      <code>include</code> tag.</p>
+
+<pre class="prettyprint">
+def pjax(template):
+    """Determine whether the request was made by PJAX."""
+    if "X-PJAX" in request.headers:
+        return render_template(template)
+    return render_template("base.html", template=template)
+</pre>
+
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="span4">
+      <h2>PJAXing</h2>
+      <p>And, let's tie it all together.</p>
+    </div>
+    <div class="span12">
+      <h3>Wrapping it all up.</h3>
+      <p>Lastly, you'll just need to add a <code>data</code> attribute to your
+      links that points to the selector that will have its content replaced by
+      the successful PJAX call.</p>
+
+<pre class="prettyprint">
+&lt;a href="/planes" data-pjax="#main"&gt;Planes&lt;/a&gt;
+</pre>
+
+      <p>And, you'll need to finally initialize the <code>PJAX</code> JavaScript.</p>
+
+<pre class="prettyprint">
+$(function() {
+  $('a[data-pjax]').pjax()
+})
+</pre>
+
+    </div>
+  </div>
+  <div class="row">
+    <div class="span4">
+      <h2>Linking</h2>
+      <p>Just in case you're interested.</p>
+    </div>
+    <div class="span12">
+      <h3>Now with 100% spam-free links.</h3>
+      <p>As always, all of the
+      <a href="http://github.com/zachwill/pjax_flask">source code</a> is
+      available on my <a href="http://github.com/zachwill">Github account</a>.
+      And, if you're interested in checking out any of my other projects, here's a link to
+      <a href="http://zachwill.com">personal site</a> and
+      <a href="http://twitter.com/zachwill">Twitter account</a>.</p>
+    </div>
+  </div>
+
+</div>
+{% endraw %}