Merge branch 'release/1.0.0-beta-2'

README.md

@@ -11,13 +11,13 @@ The template is built in html and css, with [syntax highlighting](./dist/themes/
 
 
 ## Card Types
-There are currently two types of card, a simple card and a complex card. Both share the `dist/themes/assets/css/main.css` file.
+There are currently two types of card, a simple card and a puzzle card. Both share the `dist/themes/assets/css/main.css` file.
 
 1. **[Simple](./dist/themes/README.md)**
   - What's the answer?
   - What does this syntax do?
-2. **[Complex](./dist/themes/README.md#complex-theme)**
-  - Everything in **Simple** theme
+2. **[Puzzle](./dist/themes/README.md#puzzle-theme)**
+  - What's the answer?
   - **+** Puzzle question
 
 
@@ -60,4 +60,4 @@ This is a major overhaul from the original, so it's not compatible with earlier
 ### Other notes
 
 1. Icons courtesy of [@kompa](http://devicon.fr)
-2. I'm no ludite, the popular [Power format pack](https://ankiweb.net/shared/info/162313389) could complement Anki themes and make for a nice workflow. I generally work with Sublime/Atom and render html with Marked App but this plugin could save you some hassle.
+2. I'm no luddite, the popular [Power format pack](https://ankiweb.net/shared/info/162313389) could complement Anki themes and make for a nice workflow. I generally work with Sublime/Atom and render html with Marked App but this plugin could save you some hassle.

dist/deck/README.md

@@ -2,8 +2,8 @@
 
 - [Home](../../README.md)
   - **THEME**
-    - [Simple Anki theme](../themes/README.md#basic-field-template)
-    - [Complex Anki theme](../themes/README.md#complex-theme)
+    - [Simple Anki theme](../themes/README.md#simple-theme)
+    - [Puzzle Anki theme](../themes/README.md#puzzle-theme)
       - **Deck example**
       - [Notes](../themes/README.md#notes)
   - **THEME COLOURS**

dist/themes/README.md

@@ -2,8 +2,8 @@
 
 - [Home](../../README.md)
   - **THEME**
-    - [Simple Anki theme](#basic-field-template)
-    - [Complex Anki theme](#complex-theme)
+    - [Simple Anki theme](#simple-theme)
+    - [Puzzle Anki theme](#puzzle-theme)
       - [Deck example](../deck/README.md)
       - [Notes](#notes)
   - **THEME COLOURS**
@@ -12,23 +12,16 @@
 
 
 
-## Simple theme
+## Card #01 (Simple & Puzzle theme)
+> **Key:** ★ Required / ☆ Optional (recommended)
 
-Both the **Simple theme** and **[Complex theme](#complex-theme)** share the same basic fields. This content will be used to output two cards:
+### Simple theme
+
+Both the **Simple theme** and **[Puzzle theme](#puzzle-theme)** share the *'What's the answer?'* fields and card:
 
 1. **What's the answer?**
   - What does the following code do?
   - How can we use the syntax examples and what would be the result?
-2. **What does this syntax do?**
-  - Ask another question about the code sample, or
-  - Drill on the specific uses for the function, or
-  - Remember the syntax:
-    - What function or method is this?
-    - And what will it achieve?
-
-
-## Card 01: What's the answer? (Fields 1-6)
-**Key:** ★ Required / ☆ Optional (recommended)
 
 #### ★ Title
 
@@ -64,12 +57,21 @@ Both the **Simple theme** and **[Complex theme](#complex-theme)** share the same
 - For any key functions or symbols, wrap in `<code>`.
 
 
-## Card 02: What does this syntax do? (Fields 7-9)
-**Key:** ✔ Optional / ✄ Optional (explicitly *hide* fields) / ♻ Optional (explicity *show* fields)
+## Card #02 (Simple theme)
+> **Key:** ✔ Optional / ✄ Optional (explicitly *hide* fields) / ♻ Optional (explicity *show* fields)
+
+The simple theme introduces a way to add a *syntax reminder* question:
+
+2. **What does this syntax do?**
+  - Ask another question about the code sample, or
+  - Drill on the specific uses for the function, or
+  - Remember the syntax:
+    - What function or method is this?
+    - And what will it achieve?
 
 #### ✔ What does this syntax do?
-**Important:** Must fill `✔ What does this syntax do?` to generate card.
 
+- **Important:** Must fill `✔ What does this syntax do?` to generate card.
 - An alternative question to drill the syntax.
 
 #### ----✄-- Hide on front: Syntax (inline code)
@@ -78,7 +80,7 @@ Both the **Simple theme** and **[Complex theme](#complex-theme)** share the same
   - Simply enter any text to hide field, i.e. `true`.
   - Great for questions that force you to remember the syntax, where you don't want any giveaways.
 
-#### »»♻»» Show as reference: Syntax (inline code)
+#### »»♻«« Show as reference: Syntax (inline code)
 
 - Optionally show the [inline code sample](#☆-syntax-inline-code)
   - Simply enter any text to hide field, i.e. `true`.
@@ -90,7 +92,7 @@ Both the **Simple theme** and **[Complex theme](#complex-theme)** share the same
   - Simply enter any text to hide field, i.e. `true`.
   - Depending on the sample code, you may want to hide this if it makes the answer too obvious.
 
-#### »»♻»» Show as reference: Sample (code block or image)
+#### »»♻«« Show as reference: Sample (code block or image)
 
 - Optionally show the main [sample code block](#☆-sample-code-block-or-image)
   - Simply enter any text to hide field, i.e. `true`.
@@ -100,23 +102,21 @@ Both the **Simple theme** and **[Complex theme](#complex-theme)** share the same
 
 -----
 
-## Complex theme
+## Card #02 (Puzzle theme only)
+> **Key:** ♞ Required / ✄ Optional (explicitly *hide* fields) / ♻ Optional (explicity *show* fields) / ♘ Optional (Only if ✄ is used)
 
-<img align="right" src="https://media.giphy.com/media/C47AAXrd7EIz6/giphy.gif">
+### Puzzle theme
 
-The complex theme extends the [Simple theme](#basic-field-template) to allow us to get a little creative.
+The puzzle theme extends the *'What's the answer?'* fields (shared with the [Simple theme](#simple-theme)) to allow us to get a little creative.
 
-1. **Puzzle question**
+2. **Puzzle question**
   - Drill yourself in a different way.
   - Try a different result with the syntax you're learning.
   - Add a new function to the mix.
 
-## Card 03: Puzzle question (Fields 10-18)
-**Key:** ♞ Required / / ✄ Optional (explicitly *hide* fields) / ♻ Optional (explicity *show* fields) / ♘ Optional (Only if ✄ is used)
-
-#### 9. Puzzle
-**Important:** Must fill `♞ Puzzle` to generate card.
+#### ♞ Puzzle
 
+- **Important:** Must fill `♞ Puzzle` to generate card.
 - The puzzle question. Be creative!
 
 #### –--✄--- Hide on front: Syntax (inline code)
@@ -166,11 +166,11 @@ The complex theme extends the [Simple theme](#basic-field-template) to allow us
 -----
 
 ## Extra fields
-**Key:** ✎ Optional
+> **Key:** ✎ Optional
 
 #### ✎ Other notes
 
-Use sparingly, as it's always best to be succinct with Anki. Simple is easier to remember than complex, so think of this as more of a 'reference' for future use.
+Use sparingly, as it's always best to be succinct with Anki. Simple is easier to remember than puzzle, so think of this as more of a 'reference' for future use.
 
 - Links to documentation
 - Supplementary notes
@@ -188,6 +188,6 @@ Use sparingly, as it's always best to be succinct with Anki. Simple is easier to
 ## Notes
 
 1. [Style fields, inline code and code blocks](./assets/css/README.md)
-2. Fields marked **☆✄♻✎ Optional** can be left blank and the template will ignore them. **✔** and **♞** fields are required in order for a card to be generated.
+2. Fields marked **Optional** fields (☆ ✄ ♻ ✎) can be left blank and the template will ignore them. **Required** fields (✔ and ♞) are required in order for a card to be generated.
 3. You can reference fields within fields. For instance, `{{☆ Syntax (inline code)}}` or `{{★ Key point (code block or image)}}` - this will pick up all the HTML from those fields. If you want the fancy code styles, you may need to select *Edit HTML* in the editor and wrap in `<code>` or `<pre><code>` to render correctly.
   - Keep in mind that any referenced fields will have to be manually edited if the field name is ever changed, which can be a huge pita.

dist/themes/assets/README.md

@@ -1,6 +1,16 @@
 # Anki theme: Styles
 ## Tomorrow light and Monokai
 
+- [Home](../../../README.md)
+  - **THEME**
+    - [Simple Anki theme](../../README.md#simple-theme)
+    - [Puzzle Anki theme](../../README.md#puzzle-theme)
+      - [Deck example](../../../deck/README.md)
+      - [Notes](../../README.md#notes)
+  - **THEME COLOURS**
+    - [Basic highlighting](../css/README.md)
+    - [Automatic highlighting](../css/README.md#automatic-syntax-highlighting-with-highlightjs)
+
 ### Less
 
 I'm using `Less` to generate the `main.css` file from `src/assets/less/main.less` — refer to code and comments there. Quickly change the colour scheme by changing or creating your own variables in `src/assets/less/theme.less` and recompiling the css file.
@@ -61,7 +71,7 @@ You can also specify a language:
 5. Copy and paste into `Key point (code block or image)` or `Puzzle answer (code block or image)` fields
    - Including everything from `<pre>` to `</pre>`
 
-It's wise to keep a backup for easy editing, so I've added a `Markdown` field in both the [Simple](../../simple/README.md) and [Complex](../../complex/README.md) themes — here you can store raw markdown or a link to the original code (Github gist for example).
+It's wise to keep a backup for easy editing, so I've added a `Markdown` field in both the [Simple](../../simple/README.md) and [Puzzle](../../puzzle/README.md) themes — here you can store raw markdown or a link to the original code (Github gist for example).
 
 ### Changing the theme:
 
@@ -76,7 +86,7 @@ It's wise to keep a backup for easy editing, so I've added a `Markdown` field in
 
 - [Anki Themes](../../../README.md)
 - [Simple Anki theme](../../simple/README.md)
-- [Complex Anki theme](../../complex/README.md)
+- [Puzzle Anki theme](../../puzzle/README.md)
 - [Deck example](../../../dist/deck/README.md)
 
 

dist/themes/assets/css/README.md

@@ -3,18 +3,18 @@
 
 - [Home](../../../../README.md)
   - **THEME**
-    - [Simple Anki theme](../../README.md#basic-field-template)
-    - [Complex Anki theme](../../README.md#complex-theme)
-      - [Deck example](../../../dist/deck/README.md)
-      - [Notes](../README.md#notes)
+    - [Simple Anki theme](../../README.md#simple-theme)
+    - [Puzzle Anki theme](../../README.md#puzzle-theme)
+      - [Deck example](../../../deck/README.md)
+      - [Notes](../../README.md#notes)
   - **THEME COLOURS**
     - [Basic highlighting](#)
     - [Automatic highlighting](#automatic-syntax-highlighting-with-highlightjs)
 
 
 ## Basic styling
 
-For basic styling of your html, css, python or your programming language of choice, you can use simple [HTML5 tags](https://developer.mozilla.org/en/docs/Web/HTML/Element) to add colour to your code. These work out of the box with `(inline code)`, as they're already wrapped in `<code>` tag. For all other code you want to be highlighted, wrap in `<code>` or `<pre><code>` to get the pretty colours!
+For basic styling of your html, css, python or your programming language of choice, you can use simple [HTML5 tags](https://developer.mozilla.org/en/docs/Web/HTML/Element) to add colour to your code. These work out of the box with `☆ Syntax (inline code)` and `♘ Puzzle (inline code)` (you don't need to add a `<code>` tag to these fields). For all other code you want to highlight, wrap in `<code>` or `<pre><code>` to get the pretty colours!
 
 - Default colour is white
 - `<b>` or `<strong>` for major symbols (`if`, `and`, `>=`, `print` etc)
@@ -40,10 +40,6 @@ I'm using `Less` to generate the `main.css` file from `src/assets/less/main.less
 ## Automatic syntax highlighting with highlight.js
 **BETA** Currently works reliably on iOS. You'll need to add the code in `js/highlight.js`, wrapped in `<script> ... </script>` tags, on every card in the ***front*** section after the template code.
 
-<!-- ![Marked App syntax highlighting with highlight.js](../../img/marked-app-inspector.png)
-
-*Quickly generate syntax highlighting with Marked App* -->
-
 Styling our code with HTML5 tags is pretty efficient with the Anki wysiwyg, but can get a little tedious when working with larger code blocks. **Enter [highlight.js](https://highlightjs.org/)**! It's as easy as 1, 2, 3:
 
 1. Write your code as [Markdown fenced code blocks](https://help.github.com/articles/github-flavored-markdown/#fenced-code-blocks).
@@ -53,7 +49,7 @@ Styling our code with HTML5 tags is pretty efficient with the Anki wysiwyg, but
 3. Copy and paste into any `* (code block or image)` field:
    - Including everything from `<pre><code>` to `<code></pre>`.
 
-It's wise to keep a backup for easy editing, so I've added a `✎ Markdown` field in both the **Simple** and **Complex** themes — here you can store raw markdown or a link to the original code (Github gist for example).
+It's wise to keep a backup for easy editing, so I've added a `✎ Markdown` field in both the **Simple** and **Puzzle** themes — here you can store raw markdown or a link to the original code (Github gist for example).
 
 #### Disable highlighting
 

dist/themes/cloze/card-01.html

@@ -1,34 +1,54 @@
 <!-- ==========================================
      Cloze theme
 
-   - Card: What's the answer?
-   - Info: Question about the code example
-   - Key:  ★ Required
-           ☆ Optional (recommended)
-           ✎ Optional (Notes)
+   - Card #1: What's the answer?
+   - Info:    Syntax (inline or code block) field:
+              - {{c1::codeContents::hint}}
+                - Will also display: ★ Title
+
+   - Card #2: What does this syntax do?
+   - Info:    Syntax (inline or code block) field:
+              - {{c2::preCodeContents::hint}}
+              - {{c2::preCodeContentsExtra::hint}}
+                - Will also display:
+                  ✔ What does this syntax do?
+
+   - Key:     ★ Required
+              ☆ Optional (recommended)
+              ✎ Optional (Notes)
 =============================================== -->
 
 <div id="front" class="container card-1 pb">
   <h1 class="syntax">
     {{^☆ Syntax}}Syntax{{/☆ Syntax}}
     {{#☆ Syntax}}{{☆ Syntax}}{{/☆ Syntax}}
-    <code>{{☆ Syntax (inline code)}}</code>
+    <code>{{cloze:☆ Syntax (inline code)}}</code>
   </h1>
-  <div class="sample-code mb">{{cloze:☆ Sample (code block)}}</div>
+  <div class="sample-code mb">
+    {{cloze:★ Syntax (code block)}}
+  </div>
+  {{#c1}}
+    <p class="title">{{✔ What does this syntax do?}}</p>
+  {{/c1}}
+  {{#c2}}
+    <p class="title">{{★ Title}}</p>
+  {{/c2}}
 </div>
 
 <!-- ========================================== -->
 
-{{FrontSide}}
 
 <div id="answer" class="container card-1 pt+">
-  <div class="box mb">
-    <!-- <div class="box-code">{{★ Key point (code block or image)}}</div> -->
-    <div class="box-notes">{{★ Key point notes}}</div>
+  <h1 class="syntax">
+    {{^☆ Syntax}}Syntax{{/☆ Syntax}}
+    {{#☆ Syntax}}{{☆ Syntax}}{{/☆ Syntax}}
+    <code>{{cloze:☆ Syntax (inline code)}}</code>
+  </h1>
+  <div class="box-code">
+    {{cloze:★ Syntax (code block)}}
   </div>
-  <div class="reference pb">
-    <div class="footer">
-      {{#✎ Other notes}}{{✎ Other notes}}{{/✎ Other notes}}
-    </div>
+  <div class="box-notes">{{★ Key point notes}}</div>
+  <div class="footer mt pb">
+    {{#✎ Other notes}}{{✎ Other notes}}{{/✎ Other notes}}
   </div>
 </div>

dist/themes/cloze/card-02.html

@@ -8,6 +8,7 @@
    - Key:  ★ Required
            ☆ Optional (recommended)
            ✄ Optional (explicitly hide fields)
+           ♻ Optional (explicitly show reference fields)
            ✎ Optional (Notes)
 =============================================== -->
 
@@ -19,11 +20,13 @@ <h1 class="syntax">
 
     <!-- Explicitly hide inline code -->
     {{^----✄-- Hide on front: Syntax (inline code)}}
-    <code>{{☆ Syntax (inline code)}}</code>
+      <code>{{☆ Syntax (inline code)}}</code>
     {{/----✄-- Hide on front: Syntax (inline code)}}
   </h1>
   {{^----✄-- Hide on front: Sample (code block or image)}}
-  <div class="sample-code mb">{{☆ Sample (code block or image)}}</div>
+    <div class="sample-code mb">
+      {{☆ Sample (code block or image)}}
+    </div>
   {{/----✄-- Hide on front: Sample (code block or image)}}
   <p class="title">{{✔ What does this syntax do?}}</p>
 </div>
@@ -34,21 +37,24 @@ <h1 class="syntax">
 {{FrontSide}}
 
 <div id="answer" class="container card-2 pt+">
-  <div class="box mb">
-    <div class="box-code">{{★ Key point (code block or image)}}</div>
-    <div class="box-notes">{{★ Key point notes}}</div>
-  </div>
-  <div class="reference pb">
-    <div class="h2">Reference:
-      {{#»»♻»» Show as reference: Syntax (inline code)}}
-      <code>{{☆ Syntax (inline code)}}</code>
-      {{/»»♻»» Show as reference: Syntax (inline code)}}
-    </div>
+  <div class="box-code">{{★ Key point (code block or image)}}</div>
+  <div class="box-notes">{{★ Key point notes}}</div>
+  <div class="reference">
+    {{#»»♻»» Show as reference: Syntax (inline code)}}
+      <div class="reference-syntax pt-">
+        <h4 class="mb-">Original syntax:
+          <code>{{☆ Syntax (inline code)}}</code>
+        </h4>
+      </div>
+    {{/»»♻»» Show as reference: Syntax (inline code)}}
     {{#»»♻»» Show as reference: Sample (code block or image)}}
-    <div class="sample-code mb">{{☆ Sample (code block or image)}}</div>
+      <div class="reference-sample-code mb pt-">
+        <h4 class="mb-">Original sample code:</h4>
+        {{☆ Sample (code block or image)}}
+      </div>
     {{/»»♻»» Show as reference: Sample (code block or image)}}
-    <div class="footer">
-      {{#✎ Other notes}}{{✎ Other notes}}{{/✎ Other notes}}
-    </div>
+  </div>
+  <div class="footer mt pb">
+    {{#✎ Other notes}}{{✎ Other notes}}{{/✎ Other notes}}
   </div>
 </div>