Add codepen template link

_data/demos.json

@@ -33,5 +33,11 @@
     "url": "demos/2014-04-09-requirejs",
     "slug": "requirejs",
     "label": "RequireJS with Shuffle"
+  },
+  {
+    "external": true,
+    "url": "http://codepen.io/pen?template=qrjOpX",
+    "slug": "codepen-template",
+    "label": "CodePen Template"
   }
 ]

_includes/demo-list.html

@@ -1,7 +1,11 @@
 <div class="row js-demos demo-list">
   {% for post in site.data.demos %}
     <div class="col-3@sm col-3@xs figure-wrap js-demo">
+      {% if post.external %}
+      <a href="{{ post.url }}" target="_blank" rel="noopener">
+      {% else %}
       <a href="{{ site.baseurl }}/{{ post.slug }}">
+      {% endif %}
         <figure>
           <div class="aspect aspect--4x3">
             <picture>

index.html

@@ -21,6 +21,7 @@ prism: true
     </div>
     <div class="row">
       <nav class="col-6@sm" role="secondary">
+        <a href="http://codepen.io/pen?template=qrjOpX" target="_blank" rel="noopener">Start a CodePen with a Shuffle template <span style="font-family:monospace;">↗</span></a>
         <a href="https://github.com/Vestride/Shuffle">View the GitHub repository</a>
         <a href="https://github.com/Vestride/Shuffle/releases">See the latest releases</a>
       </nav>