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

jsBin embedding

Browse Source
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
+++
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" %}}.

4
docs/index.html
View File

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

10
docs/index.xml
View File

@ -34,13 +34,13 @@ So, this&amp;hellip;
</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>

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

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

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

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

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

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

74
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 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,15 +272,44 @@
<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>
<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>
<pre class=" "><code data-codeblock-shortcode>
@ -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>

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

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

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

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

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

@ -23,13 +23,13 @@ So, this&amp;hellip;
</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>

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

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

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

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

4
docs/patterns/index.html
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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>
<loc>https://heydon.github.io/infusion/patterns/coding/codepen-embedding/</loc>
<loc>https://heydon.github.io/infusion/patterns/coding/demo-embedding/</loc>
</url>
<url>

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

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

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

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

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

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

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

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

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

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

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

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

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