hugopoi
/
cupper-hugo-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

jsBin embedding

This commit is contained in:
Heydon Pickering 2017-07-26 15:53:09 +01:00
parent 0ea3d6897e
commit 639dacb531
35 changed files with 174 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
content/patterns/coding/codepen-embedding.md → content/patterns/coding/demo-embedding.md
View File

@ -1,10 +1,12 @@
+++ +++
title = "CodePen embedding" title = "Demo embedding"
weight = 2 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. 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`. **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>}} {{<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. 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 %}} {{% /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" %}}. **Infusion** also supports the ability to write inline demos directly in markdown files. See {{% pattern "Writing inline demos" %}}.

4
docs/index.html
View File

@ -218,9 +218,9 @@
</li> </li>
<li class="pattern"> <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> <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> </a>
</li> </li>

10
docs/index.xml
View File

@ -34,13 +34,13 @@ So, this&amp;hellip;
</item> </item>
<item> <item>
<title>CodePen embedding</title> <title>Demo embedding</title>
<link>https://heydon.github.io/infusion/patterns/coding/codepen-embedding/</link> <link>https://heydon.github.io/infusion/patterns/coding/demo-embedding/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <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. <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> &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> </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> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/</guid> <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> 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> </item>

4
docs/patterns/coding/code-blocks/index.html
View File

@ -219,9 +219,9 @@
</li> </li>
<li class="pattern"> <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> <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> </a>
</li> </li>

4
docs/patterns/coding/color-palettes/index.html
View File

@ -219,9 +219,9 @@
</li> </li>
<li class="pattern"> <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> <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> </a>
</li> </li>

4
docs/patterns/coding/command-line/index.html
View File

@ -219,9 +219,9 @@
</li> </li>
<li class="pattern"> <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> <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> </a>
</li> </li>

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

@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <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="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="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"> <link rel="apple-touch-icon" sizes="72x72" href="https://heydon.github.io/infusion/images/apple-icon-72x72.png">
@ -29,7 +29,7 @@
<title> <title>
CodePen embedding | Infusion Demo embedding | Infusion
</title> </title>
</head> </head>
@ -219,9 +219,9 @@
</li> </li>
<li class="pattern"> <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> <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> </a>
</li> </li>
@ -272,14 +272,43 @@
<div> <div>
<main id="main"> <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> <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> <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> <div>
<a href="//codepen.io/heydon/pen/VpVNKW">See the demo on codePen</a> <a href="//codepen.io/heydon/pen/VpVNKW">See the demo on codePen</a>
</div> </div>
@ -310,6 +339,39 @@
</aside> </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> <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> </main>

4
docs/patterns/coding/file-trees/index.html
View File

@ -219,9 +219,9 @@
</li> </li>
<li class="pattern"> <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> <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> </a>
</li> </li>

8
docs/patterns/coding/index.html
View File

@ -219,9 +219,9 @@
</li> </li>
<li class="pattern"> <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> <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> </a>
</li> </li>
@ -289,9 +289,9 @@
<li> <li>
<h2> <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> <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
CodePen embedding Demo embedding
</a> </a>
</h2> </h2>
</li> </li>

10
docs/patterns/coding/index.xml
View File

@ -23,13 +23,13 @@ So, this&amp;hellip;
</item> </item>
<item> <item>
<title>CodePen embedding</title> <title>Demo embedding</title>
<link>https://heydon.github.io/infusion/patterns/coding/codepen-embedding/</link> <link>https://heydon.github.io/infusion/patterns/coding/demo-embedding/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <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. <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> &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> </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> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/</guid> <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> 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> </item>

4
docs/patterns/coding/tested/index.html
View File

@ -219,9 +219,9 @@
</li> </li>
<li class="pattern"> <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> <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> </a>
</li> </li>

6
docs/patterns/coding/writing-inline-demos/index.html
View File

@ -219,9 +219,9 @@
</li> </li>
<li class="pattern"> <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> <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> </a>
</li> </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> <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>

4
docs/patterns/index.html
View File

@ -219,9 +219,9 @@
</li> </li>
<li class="pattern"> <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> <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> </a>
</li> </li>

4
docs/patterns/installation/index.html
View File

@ -219,9 +219,9 @@
</li> </li>
<li class="pattern"> <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> <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> </a>
</li> </li>

4
docs/patterns/library-setup/index.html
View File

@ -219,9 +219,9 @@
</li> </li>
<li class="pattern"> <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> <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> </a>
</li> </li>

4
docs/patterns/media/including-images/index.html
View File

@ -219,9 +219,9 @@
</li> </li>
<li class="pattern"> <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> <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> </a>
</li> </li>

4
docs/patterns/media/including-videos/index.html
View File

@ -219,9 +219,9 @@
</li> </li>
<li class="pattern"> <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> <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> </a>
</li> </li>

4
docs/patterns/media/index.html
View File

@ -219,9 +219,9 @@
</li> </li>
<li class="pattern"> <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> <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> </a>
</li> </li>

4
docs/patterns/serving/index.html
View File

@ -219,9 +219,9 @@
</li> </li>
<li class="pattern"> <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> <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> </a>
</li> </li>

4
docs/patterns/writing/expandable-sections/index.html
View File

@ -219,9 +219,9 @@
</li> </li>
<li class="pattern"> <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> <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> </a>
</li> </li>

4
docs/patterns/writing/index.html
View File

@ -219,9 +219,9 @@
</li> </li>
<li class="pattern"> <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> <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> </a>
</li> </li>

4
docs/patterns/writing/library-structure/index.html
View File

@ -219,9 +219,9 @@
</li> </li>
<li class="pattern"> <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> <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> </a>
</li> </li>

4
docs/patterns/writing/markdown-and-metadata/index.html
View File

@ -219,9 +219,9 @@
</li> </li>
<li class="pattern"> <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> <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> </a>
</li> </li>

4
docs/patterns/writing/notes-and-warnings/index.html
View File

@ -219,9 +219,9 @@
</li> </li>
<li class="pattern"> <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> <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> </a>
</li> </li>

4
docs/patterns/writing/references/index.html
View File

@ -219,9 +219,9 @@
</li> </li>
<li class="pattern"> <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> <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> </a>
</li> </li>

4
docs/patterns/writing/tables-of-contents/index.html
View File

@ -219,9 +219,9 @@
</li> </li>
<li class="pattern"> <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> <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> </a>
</li> </li>

2
docs/service-worker.js
View File

File diff suppressed because one or more lines are too long

2
docs/sitemap.xml
View File

@ -15,7 +15,7 @@
</url> </url>
<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>
<url> <url>

4
docs/tags/library/index.html
View File

@ -217,9 +217,9 @@
</li> </li>
<li class="pattern"> <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> <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> </a>
</li> </li>

4
docs/tags/markdown/index.html
View File

@ -217,9 +217,9 @@
</li> </li>
<li class="pattern"> <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> <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> </a>
</li> </li>

4
docs/tags/metadata/index.html
View File

@ -217,9 +217,9 @@
</li> </li>
<li class="pattern"> <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> <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> </a>
</li> </li>

4
docs/tags/structure/index.html
View File

@ -217,9 +217,9 @@
</li> </li>
<li class="pattern"> <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> <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> </a>
</li> </li>

4
docs/tags/stuff/index.html
View File

@ -217,9 +217,9 @@
</li> </li>
<li class="pattern"> <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> <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> </a>
</li> </li>

2
themes/infusion/layouts/shortcodes/codePen.html
View File

@ -1,5 +1,5 @@
{{ if .Site.Params.codePenUser }} {{ 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> <div>
<a href="//codepen.io/{{ .Site.Params.codePenUser | lower }}/pen/{{ .Get 0 }}">See the demo on codePen</a> <a href="//codepen.io/{{ .Site.Params.codePenUser | lower }}/pen/{{ .Get 0 }}">See the demo on codePen</a>
</div> </div>

5
themes/infusion/layouts/shortcodes/jsBin.html Normal file
View File

@ -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 }}