jsBin embedding

content/patterns/coding/codepen-embedding.md → content/patterns/coding/demo-embedding.md

@@ -1,10 +1,12 @@
 +++
-title = "CodePen embedding"
+title = "Demo embedding"
 weight = 2
 +++
 
 Sometimes just pictures of the pattern you're documenting aren't enough. Interactive patterns benefit from live demos, so that readers can test their functionality.
 
+## CodePen
+
 **Infusion** offers a couple of ways to do this. The first is by embedding CodePen demos into the content. The `codePen` shortcode takes just one argument: the codePen's `ID`.
 
 {{<codeBlock>}}
@@ -19,4 +21,31 @@ This will embed the identified codePen into the content wherever you placed the
 The compiled site will output an error if your `config.toml` does not include your CodePen username (in the  `codePenUser` parameter). This is needed to construct the embed URL.
 {{% /warning %}}
 
+## jsBin
+
+You can embed JS Bins just like CodePens, supplying a single `id` parameter.
+
+{{<codeBlock>}}
+&#x7b;{% jsBin juwowaq %}}
+{{</codeBlock>}}
+
+However, you can also have finer control over which panes are displayed. Use two parameters: one for the `id` and another, `show`,  listing the panes you want to include.
+
+{{<codeBlock>}}
+&#x7b;{% jsBin id="juwowaq" show="css,output" %}}
+{{</codeBlock>}}
+
+The options for the `show` parameter are:
+
+* html
+* css
+* js
+* console
+* output
+
+{{% jsBin id="juwowaq" show="css,output" %}}
+
+
+## Inline demos
+
 **Infusion** also supports the ability to write inline demos directly in markdown files. See {{% pattern "Writing inline demos" %}}.

docs/index.html

@@ -218,9 +218,9 @@
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">CodePen embedding</span>
+                            <span class="text">Demo embedding</span>
                           </a>
                         </li>
                       

docs/index.xml

@@ -34,13 +34,13 @@ So, this…
     </item>
     
     <item>
-      <title>CodePen embedding</title>
-      <link>https://heydon.github.io/infusion/patterns/coding/codepen-embedding/</link>
+      <title>Demo embedding</title>
+      <link>https://heydon.github.io/infusion/patterns/coding/demo-embedding/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
-      <guid>https://heydon.github.io/infusion/patterns/coding/codepen-embedding/</guid>
+      <guid>https://heydon.github.io/infusion/patterns/coding/demo-embedding/</guid>
       <description>Sometimes just pictures of the pattern you&amp;rsquo;re documenting aren&amp;rsquo;t enough. Interactive patterns benefit from live demos, so that readers can test their functionality.
-Infusion offers a couple of ways to do this. The first is by embedding CodePen demos into the content. The codePen shortcode takes just one argument: the codePen&amp;rsquo;s ID.
+CodePen Infusion offers a couple of ways to do this. The first is by embedding CodePen demos into the content. The codePen shortcode takes just one argument: the codePen&amp;rsquo;s ID.
 &amp;#x7b;{% codePen VpVNKW %}}  This will embed the identified codePen into the content wherever you placed the shortcode, with the result view showing by default:</description>
     </item>
     
@@ -60,7 +60,7 @@ If you&amp;rsquo;re not familiar with writing markdown, there are a number of tu
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
       <guid>https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/</guid>
-      <description>There are some issues with CodePen embedding, like them not working offline. They also come with CodePen branding, which will clash with the pattern you&amp;rsquo;re trying to illustrate.
+      <description>There are some issues with , like them not working offline. They also come with CodePen branding, which will clash with the pattern you&amp;rsquo;re trying to illustrate.
 Infusion offers another option: a special demo shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don&amp;rsquo;t have to worry about broken styles and global JS.</description>
     </item>
     

docs/patterns/coding/code-blocks/index.html

@@ -219,9 +219,9 @@
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">CodePen embedding</span>
+                            <span class="text">Demo embedding</span>
                           </a>
                         </li>
                       

docs/patterns/coding/color-palettes/index.html

@@ -219,9 +219,9 @@
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">CodePen embedding</span>
+                            <span class="text">Demo embedding</span>
                           </a>
                         </li>
                       

docs/patterns/coding/command-line/index.html

@@ -219,9 +219,9 @@
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">CodePen embedding</span>
+                            <span class="text">Demo embedding</span>
                           </a>
                         </li>
                       

docs/patterns/coding/codepen-embedding/index.html → docs/patterns/coding/demo-embedding/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <link rel="canonical" href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/">
+    <link rel="canonical" href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/">
     <link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png">
     <link rel="apple-touch-icon" sizes="60x60" href="https://heydon.github.io/infusion/images/apple-icon-60x60.png">
     <link rel="apple-touch-icon" sizes="72x72" href="https://heydon.github.io/infusion/images/apple-icon-72x72.png">
@@ -29,7 +29,7 @@
     
     <title>
       
-        CodePen embedding | Infusion
+        Demo embedding | Infusion
       
     </title>
   </head>
@@ -219,9 +219,9 @@
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" aria-current="page">
+                          <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" aria-current="page">
                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">CodePen embedding</span>
+                            <span class="text">Demo embedding</span>
                           </a>
                         </li>
                       
@@ -272,14 +272,43 @@
         <div>
           
   <main id="main">
-    <h1>CodePen embedding</h1>
+    <h1>Demo embedding</h1>
     
     
       
 
+  <nav class="toc" aria-labelledby="toc-heading">
+    <h2 id="toc-heading">Table of contents</h2>
+    <ol>
+      
+        <li>
+          <a href="#codepen">
+            CodePen
+          </a>
+        </li>
+      
+        <li>
+          <a href="#jsbin">
+            jsBin
+          </a>
+        </li>
+      
+        <li>
+          <a href="#inline-demos">
+            Inline demos
+          </a>
+        </li>
+      
+    </ol>
+  </nav>
 
+
+    
     
-    <p>Sometimes just pictures of the pattern you&rsquo;re documenting aren&rsquo;t enough. Interactive patterns benefit from live demos, so that readers can test their functionality.</p>
+
+<p>Sometimes just pictures of the pattern you&rsquo;re documenting aren&rsquo;t enough. Interactive patterns benefit from live demos, so that readers can test their functionality.</p>
+
+<h2 id="codepen">CodePen</h2>
 
 <p><strong>Infusion</strong> offers a couple of ways to do this. The first is by embedding CodePen demos into the content. The <code>codePen</code> shortcode takes just one argument: the codePen&rsquo;s <code>ID</code>.</p>
 
@@ -291,7 +320,7 @@
 <p>This will embed the identified codePen into the content wherever you placed the shortcode, with the result view showing by default:</p>
 
 
-  <iframe height='300' scrolling='no' title="code demonstration with codePen" src='//codepen.io/heydon/embed/VpVNKW/?height=265&theme-id=dark&default-tab=result,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>
+  <iframe height="300" scrolling="no" title="code demonstration with codePen" src="//codepen.io/heydon/embed/VpVNKW/?height=265&theme-id=dark&default-tab=result,result&embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">
     <div>
       <a href="//codepen.io/heydon/pen/VpVNKW">See the demo on codePen</a>
     </div>
@@ -310,6 +339,39 @@
 </aside>
 
 
+<h2 id="jsbin">jsBin</h2>
+
+<p>You can embed JS Bins just like CodePens, supplying a single <code>id</code> parameter.</p>
+
+<pre class=" "><code  data-codeblock-shortcode>
+&#x7b;{% jsBin juwowaq %}}
+</code></pre>
+
+
+<p>However, you can also have finer control over which panes are displayed. Use two parameters: one for the <code>id</code> and another, <code>show</code>,  listing the panes you want to include.</p>
+
+<pre class=" "><code  data-codeblock-shortcode>
+&#x7b;{% jsBin id="juwowaq" show="css,output" %}}
+</code></pre>
+
+
+<p>The options for the <code>show</code> parameter are:</p>
+
+<ul>
+<li>html</li>
+<li>css</li>
+<li>js</li>
+<li>console</li>
+<li>output</li>
+</ul>
+
+
+  <iframe src="https://jsbin.com/juwowaq/embed?css%2coutput" title="JS Bin demo" height="300" width="100%"></iframe>
+
+
+
+<h2 id="inline-demos">Inline demos</h2>
+
 <p><strong>Infusion</strong> also supports the ability to write inline demos directly in markdown files. See <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Writing inline demos</a>.</p>
 
   </main>

docs/patterns/coding/file-trees/index.html

@@ -219,9 +219,9 @@
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">CodePen embedding</span>
+                            <span class="text">Demo embedding</span>
                           </a>
                         </li>
                       

docs/patterns/coding/index.html

@@ -219,9 +219,9 @@
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">CodePen embedding</span>
+                            <span class="text">Demo embedding</span>
                           </a>
                         </li>
                       
@@ -289,9 +289,9 @@
       
           <li>
   <h2>
-    <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/">
+    <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/">
       <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-      CodePen embedding
+      Demo embedding
     </a>
   </h2>
 </li>

docs/patterns/coding/index.xml

@@ -23,13 +23,13 @@ So, this…
     </item>
     
     <item>
-      <title>CodePen embedding</title>
-      <link>https://heydon.github.io/infusion/patterns/coding/codepen-embedding/</link>
+      <title>Demo embedding</title>
+      <link>https://heydon.github.io/infusion/patterns/coding/demo-embedding/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
-      <guid>https://heydon.github.io/infusion/patterns/coding/codepen-embedding/</guid>
+      <guid>https://heydon.github.io/infusion/patterns/coding/demo-embedding/</guid>
       <description>Sometimes just pictures of the pattern you&amp;rsquo;re documenting aren&amp;rsquo;t enough. Interactive patterns benefit from live demos, so that readers can test their functionality.
-Infusion offers a couple of ways to do this. The first is by embedding CodePen demos into the content. The codePen shortcode takes just one argument: the codePen&amp;rsquo;s ID.
+CodePen Infusion offers a couple of ways to do this. The first is by embedding CodePen demos into the content. The codePen shortcode takes just one argument: the codePen&amp;rsquo;s ID.
 &amp;#x7b;{% codePen VpVNKW %}}  This will embed the identified codePen into the content wherever you placed the shortcode, with the result view showing by default:</description>
     </item>
     
@@ -39,7 +39,7 @@ Infusion offers a couple of ways to do this. The first is by embedding CodePen d
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
       <guid>https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/</guid>
-      <description>There are some issues with CodePen embedding, like them not working offline. They also come with CodePen branding, which will clash with the pattern you&amp;rsquo;re trying to illustrate.
+      <description>There are some issues with , like them not working offline. They also come with CodePen branding, which will clash with the pattern you&amp;rsquo;re trying to illustrate.
 Infusion offers another option: a special demo shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don&amp;rsquo;t have to worry about broken styles and global JS.</description>
     </item>
     

docs/patterns/coding/tested/index.html

@@ -219,9 +219,9 @@
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">CodePen embedding</span>
+                            <span class="text">Demo embedding</span>
                           </a>
                         </li>
                       

docs/patterns/coding/writing-inline-demos/index.html

@@ -219,9 +219,9 @@
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">CodePen embedding</span>
+                            <span class="text">Demo embedding</span>
                           </a>
                         </li>
                       
@@ -281,7 +281,7 @@
     
     
 
-<p>There are some issues with <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>CodePen embedding</a>, like them not working offline. They also come with CodePen branding, which will clash with the pattern you&rsquo;re trying to illustrate.</p>
+<p>There are some issues with , like them not working offline. They also come with CodePen branding, which will clash with the pattern you&rsquo;re trying to illustrate.</p>
 
 <p><strong>Infusion</strong> offers another option: a special <code>demo</code> shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don&rsquo;t have to worry about broken styles and global JS.</p>
 

docs/patterns/index.html

@@ -219,9 +219,9 @@
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">CodePen embedding</span>
+                            <span class="text">Demo embedding</span>
                           </a>
                         </li>
                       

docs/patterns/installation/index.html

@@ -219,9 +219,9 @@
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">CodePen embedding</span>
+                            <span class="text">Demo embedding</span>
                           </a>
                         </li>
                       

docs/patterns/library-setup/index.html

@@ -219,9 +219,9 @@
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">CodePen embedding</span>
+                            <span class="text">Demo embedding</span>
                           </a>
                         </li>
                       

docs/patterns/media/including-images/index.html

@@ -219,9 +219,9 @@
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">CodePen embedding</span>
+                            <span class="text">Demo embedding</span>
                           </a>
                         </li>
                       

docs/patterns/media/including-videos/index.html

@@ -219,9 +219,9 @@
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">CodePen embedding</span>
+                            <span class="text">Demo embedding</span>
                           </a>
                         </li>
                       

docs/patterns/media/index.html

@@ -219,9 +219,9 @@
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">CodePen embedding</span>
+                            <span class="text">Demo embedding</span>
                           </a>
                         </li>
                       

docs/patterns/serving/index.html

@@ -219,9 +219,9 @@
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">CodePen embedding</span>
+                            <span class="text">Demo embedding</span>
                           </a>
                         </li>
                       

docs/patterns/writing/expandable-sections/index.html

@@ -219,9 +219,9 @@
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">CodePen embedding</span>
+                            <span class="text">Demo embedding</span>
                           </a>
                         </li>
                       

docs/patterns/writing/index.html

@@ -219,9 +219,9 @@
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">CodePen embedding</span>
+                            <span class="text">Demo embedding</span>
                           </a>
                         </li>
                       

docs/patterns/writing/library-structure/index.html

@@ -219,9 +219,9 @@
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">CodePen embedding</span>
+                            <span class="text">Demo embedding</span>
                           </a>
                         </li>
                       

docs/patterns/writing/markdown-and-metadata/index.html

@@ -219,9 +219,9 @@
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">CodePen embedding</span>
+                            <span class="text">Demo embedding</span>
                           </a>
                         </li>
                       

docs/patterns/writing/notes-and-warnings/index.html

@@ -219,9 +219,9 @@
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">CodePen embedding</span>
+                            <span class="text">Demo embedding</span>
                           </a>
                         </li>
                       

docs/patterns/writing/references/index.html

@@ -219,9 +219,9 @@
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">CodePen embedding</span>
+                            <span class="text">Demo embedding</span>
                           </a>
                         </li>
                       

docs/patterns/writing/tables-of-contents/index.html

@@ -219,9 +219,9 @@
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">CodePen embedding</span>
+                            <span class="text">Demo embedding</span>
                           </a>
                         </li>
                       

docs/sitemap.xml

@@ -15,7 +15,7 @@
   </url>
   
   <url>
-    <loc>https://heydon.github.io/infusion/patterns/coding/codepen-embedding/</loc>
+    <loc>https://heydon.github.io/infusion/patterns/coding/demo-embedding/</loc>
   </url>
   
   <url>

docs/tags/library/index.html

@@ -217,9 +217,9 @@
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">CodePen embedding</span>
+                            <span class="text">Demo embedding</span>
                           </a>
                         </li>
                       

docs/tags/markdown/index.html

@@ -217,9 +217,9 @@
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">CodePen embedding</span>
+                            <span class="text">Demo embedding</span>
                           </a>
                         </li>
                       

docs/tags/metadata/index.html

@@ -217,9 +217,9 @@
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">CodePen embedding</span>
+                            <span class="text">Demo embedding</span>
                           </a>
                         </li>
                       

docs/tags/structure/index.html

@@ -217,9 +217,9 @@
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">CodePen embedding</span>
+                            <span class="text">Demo embedding</span>
                           </a>
                         </li>
                       

docs/tags/stuff/index.html

@@ -217,9 +217,9 @@
                         </li>
                       
                         <li class="pattern">
-                          <a href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/" >
+                          <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span class="text">CodePen embedding</span>
+                            <span class="text">Demo embedding</span>
                           </a>
                         </li>
                       

themes/infusion/layouts/shortcodes/codePen.html

@@ -1,5 +1,5 @@
 {{ if .Site.Params.codePenUser }}
-  <iframe height='300' scrolling='no' title="code demonstration with codePen" src='//codepen.io/{{ .Site.Params.codepenUser | lower }}/embed/{{ .Get 0 }}/?height=265&theme-id=dark&default-tab=result,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>
+  <iframe height="300" scrolling="no" title="code demonstration with codePen" src="//codepen.io/{{ .Site.Params.codepenUser | lower }}/embed/{{ .Get 0 }}/?height=265&theme-id=dark&default-tab=result,result&embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">
     <div>
       <a href="//codepen.io/{{ .Site.Params.codePenUser | lower }}/pen/{{ .Get 0 }}">See the demo on codePen</a>
     </div>

themes/infusion/layouts/shortcodes/jsBin.html

@@ -0,0 +1,5 @@
+{{ if .IsNamedParams }}
+  <iframe src="https://jsbin.com/{{ .Get "id" }}/embed?{{ .Get "show" }}" title="JS Bin demo" height="300" width="100%"></iframe>
+{{ else }}
+  <iframe src="https://jsbin.com/{{ .Get "id" }}/embed?output" title="JS Bin demo" height="300" width="100%"></iframe>
+{{ end }}