Update the moustache files

Move the demo files into their own folder (unfortunately this means copying the front and back templates, rather than including them. See the comment in #54 about both `{{{ ... }}}` triple brackets and `.json` formatting.

package.json

@@ -6,8 +6,8 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "setup": "mkdir -p build/",
-    "simple": "npx mustache -p source/themes/cards/simple/simple-front.mustache -p source/themes/cards/simple/simple-reverse.mustache source/themes/cards/simple/simple.json source/themes/cards/simple/simple.mustache > build/simple.html",
-    "missing": "npx mustache -p source/themes/cards/missing/missing-front.mustache -p source/themes/cards/missing/missing-reverse.mustache source/themes/cards/missing/missing.json source/themes/cards/missing/missing.mustache > build/missing.html",
+    "simple": "npx mustache -p source/themes/demo/simple/simple-front.mustache -p source/themes/demo/simple/simple-reverse.mustache source/themes/demo/simple/simple.json source/themes/demo/simple/simple.mustache > build/simple.html",
+    "missing": "npx mustache -p source/themes/demo/missing/missing-front.mustache -p source/themes/demo/missing/missing-reverse.mustache source/themes/demo/missing/missing.json source/themes/demo/missing/missing.mustache > build/missing.html",
     "css": "npx lessc source/style/main.less ./build/main.css",
     "pandoc": "pandoc source/pandoc/pre.md -o ./build/pre.html",
     "build": "npm run setup && npm run simple && npm run missing && npm run css"

source/themes/cards/simple/simple-front.mustache

@@ -1,32 +1,32 @@
-{{! Simple card ====
+<!-- Simple card ====
 
     - Type: What's the answer?
     - Docs: https://github.com/badlydrawnrob/anki/tree/master/source/docs/simple/index.md
     - Key:  ★ Required
             ☆ Optional (recommended)
             ✎ Optional (notes, markdown)
 
-===== }}
+===== -->
 
 <div id="front" class="anki-Front">
   <section class="simple simple-front">
     <header class="simple-Header">
       <h1 class="simple-Header_Title">
-        {{{★ Title}}}
+        {{★ Title}}
       </h1>
       {{#☆ Subtitle}}
         <h2 class="simple-Header_Subtitle">
-          {{{☆ Subtitle}}}
+          {{☆ Subtitle}}
         </h2>
       {{/☆ Subtitle}}
       {{#☆ Syntax (inline code)}}
         <p class="simple-Header_Code">
-          <code>{{{☆ Syntax (inline code)}}}</code>
+          <code>{{☆ Syntax (inline code)}}</code>
         </p>
       {{/☆ Syntax (inline code)}}
     </header>
     <div class="simple-Sample">
-      {{{★ Sample (code block or image)}}}
+      {{★ Sample (code block or image)}}
     </div>
   </section>
 </div>

source/themes/cards/simple/simple-reverse.mustache

@@ -4,15 +4,15 @@
   <section id="answer" class="simple simple-reverse">
     <div class="simple-KeyPoint">
       <div class="simple-KeyPoint_Code">
-        {{{★ Key point (code block or image)}}}
+        {{★ Key point (code block or image)}}
       </div>
       <div class="simple-KeyPoint_Notes">
-        {{{★ Key point notes}}}
+        {{★ Key point notes}}
       </div>
     </div>
     {{#✎ Other notes}}
       <footer class="simple-Notes">
-        {{{✎ Other notes}}}
+        {{✎ Other notes}}
       </footer>
     {{/✎ Other notes}}
   </section>

source/themes/demo/simple/simple-front.mustache

@@ -0,0 +1,31 @@
+<!-- Simple card ====
+
+    Demo version copied from `../../cards/simple/simple-...` files
+
+    - requires {{{ ... }}} triple brackets
+    - `.json` file requires 
+
+===== -->
+
+<div id="front" class="anki-Front">
+  <section class="simple simple-front">
+    <header class="simple-Header">
+      <h1 class="simple-Header_Title">
+        {{{★ Title}}}
+      </h1>
+      {{#☆ Subtitle}}
+        <h2 class="simple-Header_Subtitle">
+          {{{☆ Subtitle}}}
+        </h2>
+      {{/☆ Subtitle}}
+      {{#☆ Syntax (inline code)}}
+        <p class="simple-Header_Code">
+          <code>{{{☆ Syntax (inline code)}}}</code>
+        </p>
+      {{/☆ Syntax (inline code)}}
+    </header>
+    <div class="simple-Sample">
+      {{{★ Sample (code block or image)}}}
+    </div>
+  </section>
+</div>

source/themes/demo/simple/simple-reverse.mustache

@@ -0,0 +1,19 @@
+<div class="anki-Reverse">
+  {{FrontSide}}  {{! Anki only }}
+
+  <section id="answer" class="simple simple-reverse">
+    <div class="simple-KeyPoint">
+      <div class="simple-KeyPoint_Code">
+        {{{★ Key point (code block or image)}}}  <!-- pre block -->
+      </div>
+      <div class="simple-KeyPoint_Notes">
+        {{{★ Key point notes}}}
+      </div>
+    </div>
+    {{#✎ Other notes}}
+      <footer class="simple-Notes">
+        {{{✎ Other notes}}}
+      </footer>
+    {{/✎ Other notes}}
+  </section>
+</div>

source/themes/demo/simple/simple.json

@@ -0,0 +1,24 @@
+{
+  "★ Title": "What will each residents[<b>‘key’</b>] print out?",
+
+
+  "☆ Subtitle": "Dictionaries",
+
+
+  "☆ Syntax (inline code)": "d = {<b>‘key’</b>: <i>value</i>}",
+
+
+  "★ Sample (code block or image)": "<div class=\"sourceCode\" id=\"cb1\"><pre\r\nclass=\"sourceCode python\"><code class=\"sourceCode python\"><span id=\"cb1-1\"><a href=\"#cb1-1\" aria-hidden=\"true\" tabindex=\"-1\"><\/a>residents <span class=\"op\">=<\/span> {<span class=\"st\">&#39;Puffin&#39;<\/span> : <span class=\"dv\">104<\/span>, <span class=\"st\">&#39;Sloth&#39;<\/span> : <span class=\"dv\">105<\/span>, <span class=\"st\">&#39;Burmese Python&#39;<\/span> : <span class=\"dv\">106<\/span>}<\/span>\r\n<span id=\"cb1-2\"><a href=\"#cb1-2\" aria-hidden=\"true\" tabindex=\"-1\"><\/a><\/span>\r\n<span id=\"cb1-3\"><a href=\"#cb1-3\" aria-hidden=\"true\" tabindex=\"-1\"><\/a><span class=\"bu\">print<\/span>(residents[<span class=\"st\">&#39;Puffin&#39;<\/span>])<\/span>\r\n<span id=\"cb1-4\"><a href=\"#cb1-4\" aria-hidden=\"true\" tabindex=\"-1\"><\/a><span class=\"bu\">print<\/span>(residents[<span class=\"st\">&#39;Sloth&#39;<\/span>])<\/span>\r\n<span id=\"cb1-5\"><a href=\"#cb1-5\" aria-hidden=\"true\" tabindex=\"-1\"><\/a><span class=\"bu\">print<\/span>(residents[<span class=\"st\">&#39;Burmese Python&#39;<\/span>])<\/span><\/code><\/pre><\/div>",
+
+
+  "★ Key point (code block or image)": "<div class=\"sourceCode\" id=\"cb1\"><pre\r\nclass=\"sourceCode python\"><code class=\"sourceCode python\"><span id=\"cb1-1\"><a href=\"#cb1-1\" aria-hidden=\"true\" tabindex=\"-1\"><\/a><span class=\"dv\">104<\/span><\/span>\r\n<span id=\"cb1-2\"><a href=\"#cb1-2\" aria-hidden=\"true\" tabindex=\"-1\"><\/a><span class=\"dv\">105<\/span><\/span>\r\n<span id=\"cb1-3\"><a href=\"#cb1-3\" aria-hidden=\"true\" tabindex=\"-1\"><\/a><span class=\"dv\">106<\/span><\/span><\/code><\/pre><\/div>",
+
+
+  "★ Key point notes": "<p>Access a <strong>dictionary</strong> item with it's <code>key</code>, which returns it's <code>value</code>.</p><p>A dictionary is similar to a list, but you access values by looking up a key instead of an index. A key can be any string or number. Dictionaries are enclosed in curly braces <code>{ }</code>.</p>",
+
+
+  "✎ Other notes": "<p><strong>Warning:<\/strong> <a href=\"https:\/\/jeffknupp.com\/blog\/2015\/08\/30\/python-dictionaries\">Never search for a value in a dictionary using a for loop<\/a>!<\/p>",
+
+
+  "✎ Markdown": false
+}