angle bracket expandable example

This commit is contained in:
Heydon Pickering 2017-06-29 10:11:08 +01:00
parent 23e4bfe258
commit 534f793526
20 changed files with 58 additions and 21 deletions

View File

@ -36,3 +36,9 @@ Ut vulputate enim ut lorem iaculis, vel faucibus metus iaculis. Aliquam erat vol
{{% /expandable %}} {{% /expandable %}}
Unfortunately, it is not currently possible to include shortcodes inside other shortcodes, using the "`%`" notation (which is designated for markdown content). If you use the angle brackets notation (illustrated below) it is possible, but markdown will no longer be permitted. You will have to code HTML inside such a section manually. Unfortunately, it is not currently possible to include shortcodes inside other shortcodes, using the "`%`" notation (which is designated for markdown content). If you use the angle brackets notation (illustrated below) it is possible, but markdown will no longer be permitted. You will have to code HTML inside such a section manually.
{{<codeBlock>}}
&#x7b;{&lt;expandable label="A section of dummy text" level="2">}}
&lt;p>Here is a pattern reference shortcode: &#x7b;{% pattern "Writing inline demos" %}}.&lt;/p>
&#x7b;{&lt;/expandable>}}
{{</codeBlock>}}

View File

@ -224,6 +224,8 @@ th:empty {
[role="contentinfo"] { [role="contentinfo"] {
font-size: 0.85rem; font-size: 0.85rem;
margin-top: 4rem;
text-align: center;
} }
/* Patterns navigation */ /* Patterns navigation */

View File

@ -240,7 +240,8 @@
</main> </main>
<footer role="contentinfo"> <footer role="contentinfo">
By Heydon Pickering Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
</footer> </footer>
</div> </div>
</div> </div>

View File

@ -125,7 +125,7 @@ I can reference the &amp;#x7b;{% pattern &#34;Notes &amp; warnings&#34; %}} patt
<guid>https://heydon.github.io/infusion/patterns/serving/</guid> <guid>https://heydon.github.io/infusion/patterns/serving/</guid>
<description>Serving locally While you&amp;rsquo;re creating content for your library, you&amp;rsquo;ll probably want to see what the finished product looks like. Fortunately, Infusion is easy to serve locally using the serve command: <description>Serving locally While you&amp;rsquo;re creating content for your library, you&amp;rsquo;ll probably want to see what the finished product looks like. Fortunately, Infusion is easy to serve locally using the serve command:
npm run serve This will serve your working library on localhost:1313. Whenever you make changes to your library&amp;rsquo;s files, the site will automatically rebuild. No need to refresh the web page! npm run serve This will serve your working library on localhost:1313. Whenever you make changes to your library&amp;rsquo;s files, the site will automatically rebuild. No need to refresh the web page!
Publishing on Github Pages The easiest way to host your pattern library so you have a link to share is to run the host command.</description> Publishing on Github Pages There are three steps to hosting your library on Github Pages.</description>
</item> </item>
<item> <item>

View File

@ -230,7 +230,8 @@ toggle.addEventListener('click', (e) => {
</main> </main>
<footer role="contentinfo"> <footer role="contentinfo">
By Heydon Pickering Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
</footer> </footer>
</div> </div>
</div> </div>

View File

@ -254,7 +254,8 @@
</main> </main>
<footer role="contentinfo"> <footer role="contentinfo">
By Heydon Pickering Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
</footer> </footer>
</div> </div>
</div> </div>

View File

@ -218,7 +218,8 @@
</main> </main>
<footer role="contentinfo"> <footer role="contentinfo">
By Heydon Pickering Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
</footer> </footer>
</div> </div>
</div> </div>

View File

@ -329,7 +329,8 @@ toggle.addEventListener('click', (e) => {
</main> </main>
<footer role="contentinfo"> <footer role="contentinfo">
By Heydon Pickering Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
</footer> </footer>
</div> </div>
</div> </div>

View File

@ -218,7 +218,8 @@
</main> </main>
<footer role="contentinfo"> <footer role="contentinfo">
By Heydon Pickering Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
</footer> </footer>
</div> </div>
</div> </div>

View File

@ -40,7 +40,7 @@ brew install hugo Alternatively, you can manually install Hugo from a package. Y
<guid>https://heydon.github.io/infusion/patterns/serving/</guid> <guid>https://heydon.github.io/infusion/patterns/serving/</guid>
<description>Serving locally While you&amp;rsquo;re creating content for your library, you&amp;rsquo;ll probably want to see what the finished product looks like. Fortunately, Infusion is easy to serve locally using the serve command: <description>Serving locally While you&amp;rsquo;re creating content for your library, you&amp;rsquo;ll probably want to see what the finished product looks like. Fortunately, Infusion is easy to serve locally using the serve command:
npm run serve This will serve your working library on localhost:1313. Whenever you make changes to your library&amp;rsquo;s files, the site will automatically rebuild. No need to refresh the web page! npm run serve This will serve your working library on localhost:1313. Whenever you make changes to your library&amp;rsquo;s files, the site will automatically rebuild. No need to refresh the web page!
Publishing on Github Pages The easiest way to host your pattern library so you have a link to share is to run the host command.</description> Publishing on Github Pages There are three steps to hosting your library on Github Pages.</description>
</item> </item>
</channel> </channel>

View File

@ -286,7 +286,8 @@
</main> </main>
<footer role="contentinfo"> <footer role="contentinfo">
By Heydon Pickering Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
</footer> </footer>
</div> </div>
</div> </div>

View File

@ -404,7 +404,8 @@ theme = "infusion"
</main> </main>
<footer role="contentinfo"> <footer role="contentinfo">
By Heydon Pickering Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
</footer> </footer>
</div> </div>
</div> </div>

View File

@ -192,22 +192,36 @@
<h2 id="publishing-on-github-pages">Publishing on Github Pages</h2> <h2 id="publishing-on-github-pages">Publishing on Github Pages</h2>
<p>The easiest way to host your pattern library so you have a link to share is to run the <code>host</code> command. This will build the library and push it to the local Github repository&rsquo;s <code>gh-pages</code> branch. Before you can use <code>host</code> you will need to commit any changes you made on the master branch. Otherwise there&rsquo;s nothing new to push over to the <code>gh-pages</code> branch.</p> <p>There are three steps to hosting your library on Github Pages.</p>
<h3 id="1-edit-the-baseurl">1. Edit the baseURL</h3>
<p>Open up <code>config.toml</code> (at the root of your library project folder) and make sure <code>baseURL</code> matches your Github Pages URL.</p>
<pre><code class="language-html">baseURL = &quot;[your user name].github.io/[your library repo name]&quot;
</code></pre>
<p>If you are having trouble working out your Github Pages URL, <a href="https://drastudio.github.io/url-generator/">this tool may help</a>.</p>
<h3 id="2-commit-your-latest-changes">2. Commit your latest changes</h3>
<p>On the (default) master branch run:</p>
<pre class="cmd"><code>git commit -am "my commit message"</code></pre> <pre class="cmd"><code>git commit -am "my commit message"</code></pre>
<p>This will ensure changes go through to <code>gh-pages</code>. Now you can run:</p> <h3 id="3-run-the-host-command">3. Run the <code>host</code> command</h3>
<pre class="cmd"><code>npm run host</code></pre> <pre class="cmd"><code>npm run host</code></pre>
<p>You should now be able to find a &ldquo;live&rdquo; version of your library at <code>github.io/[your username]/[your library repo name]</code>.</p> <p>You should now be able to find a &ldquo;live&rdquo; version of your library at <code>[your user name].github.io/[your library repo name]</code>.</p>
</main> </main>
<footer role="contentinfo"> <footer role="contentinfo">
By Heydon Pickering Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
</footer> </footer>
</div> </div>
</div> </div>

View File

@ -276,7 +276,8 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
</main> </main>
<footer role="contentinfo"> <footer role="contentinfo">
By Heydon Pickering Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
</footer> </footer>
</div> </div>
</div> </div>

View File

@ -242,7 +242,8 @@
</main> </main>
<footer role="contentinfo"> <footer role="contentinfo">
By Heydon Pickering Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
</footer> </footer>
</div> </div>
</div> </div>

View File

@ -248,7 +248,8 @@
</main> </main>
<footer role="contentinfo"> <footer role="contentinfo">
By Heydon Pickering Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
</footer> </footer>
</div> </div>
</div> </div>

View File

@ -275,7 +275,8 @@ title = &quot;Popups&quot;
</main> </main>
<footer role="contentinfo"> <footer role="contentinfo">
By Heydon Pickering Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
</footer> </footer>
</div> </div>
</div> </div>

View File

@ -229,7 +229,8 @@ weight = 1
</main> </main>
<footer role="contentinfo"> <footer role="contentinfo">
By Heydon Pickering Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
</footer> </footer>
</div> </div>
</div> </div>

View File

@ -230,7 +230,8 @@ This is a warning! It's about something the reader should be careful to do or to
</main> </main>
<footer role="contentinfo"> <footer role="contentinfo">
By Heydon Pickering Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
</footer> </footer>
</div> </div>
</div> </div>

View File

@ -627,7 +627,8 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
</main> </main>
<footer role="contentinfo"> <footer role="contentinfo">
By Heydon Pickering Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project<br>
For general enquiries, contact us on info@paciellogroup.com
</footer> </footer>
</div> </div>
</div> </div>