more markdown syntax stuff in images

content/patterns/writing/including-images.md

@@ -24,17 +24,17 @@ The path to the `/images` folder should begin with a forward slash, so include t
 
 ## Figures
 
-Sometimes you will want to include a caption with your illustration. This is what the `<figure>` and `<figcaption>` elements are for. However, **Infusion** doesn't ask you to code all that manually. A special shortcode is provided, which takes a `caption` parameter. Note that the image markdown is provided between the opening and closing shortcode tags:
+Sometimes you will want to include a caption with your illustration. This is what the `<figure>` and `<figcaption>` elements are for. However, **Infusion** doesn't ask you to code all that manually. A special shortcode is provided, which takes a `caption` parameter. Note that the image markdown is provided between the opening and closing shortcode tags, and that you can use markdown syntax in the `caption` value.
 
 {{<codeBlock>}}
-&#x7b;{% figure caption="Steve Faulkner works for The Paciello Group" %}}
+&#x7b;{% figure caption="[Steve Faulkner](https://twitter.com/stevefaulkner) works for The Paciello Group" %}}
 ![Steve Faulkner's face](/images/steve_faulkner.jpg)
 &#x7b;{% /figure %}}
 {{</codeBlock>}}
 
 This will output the following. Note the automatically incremented **Figure** number.
 
-{{% figure caption="Steve Faulkner works for The Paciello Group" %}}
+{{% figure caption="[Steve Faulkner](https://twitter.com/stevefaulkner) works for The Paciello Group" %}}
 ![Steve Faulkner's face](/images/steve_faulkner.jpg)
 {{% /figure %}}
 

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

@@ -272,10 +272,10 @@ toggle.addEventListener('click', (e) => {
 <p>
 <div class="demo-container">
   
-      <div class="demo" id="demo-CiZsdDtidXR0b24"></div>
+      <div class="demo" id="demo-CiZsdDtidXR0b24gYXJp"></div>
       
   
-  <template id="template-CiZsdDtidXR0b24">
+  <template id="template-CiZsdDtidXR0b24gYXJp">
       
 <button aria-pressed="false">Toggle Me</button>
 <style>
@@ -307,13 +307,13 @@ toggle.addEventListener('click', (e) => {
   </template>
   <script>
     (function() {
-      var root = document.getElementById('demo-CiZsdDtidXR0b24');
+      var root = document.getElementById('demo-CiZsdDtidXR0b24gYXJp');
       if (document.head.attachShadow) {
         root.attachShadow({mode: 'open'});
-        var template = document.getElementById('template-CiZsdDtidXR0b24');
+        var template = document.getElementById('template-CiZsdDtidXR0b24gYXJp');
         var script = template.content.querySelector('script');
         if (script) {
-          script.textContent = `(function() { var demo = document.getElementById(\'demo-CiZsdDtidXR0b24\').shadowRoot; ${script.textContent} })()`
+          script.textContent = `(function() { var demo = document.getElementById(\'demo-CiZsdDtidXR0b24gYXJp\').shadowRoot; ${script.textContent} })()`
         }
         root.shadowRoot.appendChild(document.importNode(template.content, true));
       } else {

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

@@ -256,10 +256,10 @@
 
 <h2 id="figures">Figures</h2>
 
-<p>Sometimes you will want to include a caption with your illustration. This is what the <code>&lt;figure&gt;</code> and <code>&lt;figcaption&gt;</code> elements are for. However, <strong>Infusion</strong> doesn&rsquo;t ask you to code all that manually. A special shortcode is provided, which takes a <code>caption</code> parameter. Note that the image markdown is provided between the opening and closing shortcode tags:</p>
+<p>Sometimes you will want to include a caption with your illustration. This is what the <code>&lt;figure&gt;</code> and <code>&lt;figcaption&gt;</code> elements are for. However, <strong>Infusion</strong> doesn&rsquo;t ask you to code all that manually. A special shortcode is provided, which takes a <code>caption</code> parameter. Note that the image markdown is provided between the opening and closing shortcode tags, and that you can use markdown syntax in the <code>caption</code> value.</p>
 
 <pre class=" "><code  data-codeblock-shortcode>
-&#x7b;{% figure caption="Steve Faulkner works for The Paciello Group" %}}
+&#x7b;{% figure caption="[Steve Faulkner](https://twitter.com/stevefaulkner) works for The Paciello Group" %}}
 ![Steve Faulkner's face](/images/steve_faulkner.jpg)
 &#x7b;{% /figure %}}
 </code></pre>
@@ -268,11 +268,11 @@
 <p>This will output the following. Note the automatically incremented <strong>Figure</strong> number.</p>
 
 
-<figure role="group" aria-describedby="caption-U3RldmUgRmF1bGtuZXIg">
+<figure role="group" aria-describedby="caption-W1N0ZXZlIEZhdWxrbmVy">
   <p><img src="https://heydon.github.io/infusion/images/steve_faulkner.jpg" alt="Steve Faulkner's face" /></p>
 
-  <figcaption id="caption-U3RldmUgRmF1bGtuZXIg">
-    Steve Faulkner works for The Paciello Group
+  <figcaption id="caption-W1N0ZXZlIEZhdWxrbmVy">
+    <a href="https://twitter.com/stevefaulkner">Steve Faulkner</a> works for The Paciello Group
   </figcaption>
 </figure>
 

themes/infusion/layouts/shortcodes/demo.html

@@ -1,4 +1,4 @@
-{{ $uniq := .Inner | htmlEscape | base64Encode | truncate 15 "" }}
+{{ $uniq := .Inner | htmlEscape | base64Encode | truncate 20 "" }}
 <div class="demo-container">
   {{ if .Get "caption" }}
   <figure role="group" aria-labelledby="caption-{{ $uniq }}">