Added markdown help

app/javascript/components/AppIcon.vue

@@ -33,6 +33,7 @@
     menu: new IconData('menu'),
     pencil: new IconData('pencil'),
     person: new IconData('person'),
+    'question-mark': new IconData('question-mark'),
     star: new IconData('star'),
     'star-empty': new IconData('star-empty'),
     warning: new IconData('warning'),

app/javascript/components/AppIconicIcon.vue

@@ -10,6 +10,7 @@
   import Link from "../iconic/svg/smart/link";
   import Lock from "../iconic/svg/smart/lock";
   import Menu from "../iconic/svg/smart/menu";
+  import QuestionMark from "../iconic/svg/smart/question-mark.svg"
   import Person from "../iconic/svg/smart/person";
   import Pencil from "../iconic/svg/smart/pencil";
   import Star from "../iconic/svg/smart/star";
@@ -35,6 +36,7 @@
     menu: Menu,
     pencil: Pencil,
     person: Person,
+    'question-mark': QuestionMark,
     star: Star,
     'star-empty': StarEmpty,
     warning: Warning,

app/javascript/components/RecipeEdit.vue

@@ -37,9 +37,9 @@
 
     <recipe-edit-ingredient-editor :ingredients="recipe.ingredients"></recipe-edit-ingredient-editor>
 
-
+    <br>
     <div class="field">
-      <label class="label title is-4">Directions</label>
+      <label class="label title is-4">Directions <button @click="isDescriptionHelpOpen = true" class="button is-small is-link"><app-icon icon="question-mark"></app-icon></button></label>
       <div class="control columns">
         <div class="column">
           <textarea ref="step_text_area" class="textarea directions-input" v-model="recipe.step_text"></textarea>
@@ -57,6 +57,150 @@
         Is Ingredient
       </label>
     </div>
+
+    <app-modal title="Markdown Help" :open="isDescriptionHelpOpen" @dismiss="isDescriptionHelpOpen = false">
+      <p>
+        The description editor uses <a href="https://www.markdownguide.org/cheat-sheet/">Markdown</a>. Follow the link for a full
+        description of the syntax, but below is a quick reference.
+      </p>
+      <table class="table">
+        <thead>
+        <tr>
+          <th>Style</th>
+          <th>Syntax</th>
+          <th>Result</th>
+        </tr>
+        </thead>
+        <tr>
+          <td>Heading</td>
+          <td>
+            <pre>
+# Biggest Heading
+## Smaller Heading
+###### Smallest Heading
+            </pre>
+          </td>
+          <td class="content">
+            <h1>Biggest Heading</h1>
+            <h2>Smaller Heading</h2>
+            <h6>Smallest Heading</h6>
+          </td>
+        </tr>
+        <tr>
+          <td>Numbered Lists</td>
+          <td>
+            <pre>
+1. First Item
+1. Second Item
+    1. subitem A
+    1. subitem B
+1. Thrid Item
+            </pre>
+          </td>
+          <td class="content">
+            <ol>
+              <li>First Item</li>
+              <li>Second Item
+                <ol>
+                  <li>subitem A</li>
+                  <li>subitem B</li>
+                </ol>
+              </li>
+              <li>Thrid Item</li>
+            </ol>
+          </td>
+        </tr>
+        <tr>
+          <td>Lists</td>
+          <td>
+            <pre>
+* First Item
+* Second Item
+    * subitem A
+    * subitem B
+* Third Item
+            </pre>
+          </td>
+          <td class="content">
+            <ul>
+              <li>First Item</li>
+              <li>Second Item
+
+                <ul>
+                  <li>subitem A</li>
+                  <li>subitem B</li>
+                </ul></li>
+              <li>Third Item</li>
+            </ul>
+          </td>
+        </tr>
+        <tr>
+          <td>Basic Styles</td>
+          <td>
+            <pre>
+*italics*
+**bold**
+***bold italics***
+_underline_
+==highlight==
+            </pre>
+          </td>
+          <td class="content">
+            <p>
+              <em>italics</em><br>
+              <strong>bold</strong><br>
+              <strong><em>bold italics</em></strong><br>
+              <u>underline</u><br>
+              <mark>highlight</mark>
+            </p>
+          </td>
+        </tr>
+      </table>
+
+      <h3 class="title is-3">Basic Example</h3>
+      <h5 class="subtitle is=3">Input</h5>
+      <pre>
+## For the dough
+1. Mix dry ingredients
+1. Fold in egg whites
+1. Sprinkle on sardines
+
+## For the sauce
+1. Blend clams ==thoroughly==
+1. Melt beef lard and add clam slurry
+
+### Optional (Toppings)
+* Raw onion
+* Sliced hard boiled eggs
+      </pre>
+
+      <h5 class="subtitle is=3">Output</h5>
+
+      <div class="content box">
+        <h2>For the dough</h2>
+
+        <ol>
+          <li>Mix dry ingredients</li>
+          <li>Fold in egg whites</li>
+          <li>Sprinkle on sardines</li>
+        </ol>
+
+        <h2>For the sauce</h2>
+
+        <ol>
+          <li>Blend clams <mark>thoroughly</mark></li>
+          <li>Melt beef lard and add clam slurry</li>
+        </ol>
+
+        <h3>Optional (Toppings)</h3>
+
+        <ul>
+          <li>Raw onion</li>
+          <li>Sliced hard boiled eggs</li>
+        </ul>
+
+      </div>
+    </app-modal>
   </div>
 </template>
 
@@ -83,7 +227,8 @@
 
     data() {
       return {
-        stepPreviewCache: null
+        stepPreviewCache: null,
+        isDescriptionHelpOpen: false
       };
     },
 

app/javascript/store/index.js

@@ -19,19 +19,6 @@ export default new Vuex.Store({
     taskLists: [],
     currentTaskList: null,
 
-    // MediaQueryList objects in the root App component maintain this state.
-    mediaQueries: {
-      mobile: false,
-      tablet: false,
-      tabletOnly: false,
-      touch: false,
-      desktop: false,
-      desktopOnly: false,
-      widescreen: false,
-      widescreenOnly: false,
-      fullhd: false
-    },
-
     nutrientList: {
       kcal: { label: "Calories", unit: "kcal" },
       protein: { label: "Protein", unit: "g" },

config/application.rb

@@ -24,6 +24,7 @@ module Parsley
     # Initialize configuration defaults for originally generated Rails version.
     config.load_defaults 6.0
 
+    config.action_dispatch.cookies_same_site_protection = :lax
     config.active_record.collection_cache_versioning = true
     config.active_record.cache_versioning  = true
 

lib/markdown_processor.rb

@@ -9,7 +9,11 @@ module MarkdownProcessor
       {
           no_intra_emphasis: true,
           fenced_code_blocks: true,
-          disable_indented_code_blocks: true
+          disable_indented_code_blocks: true,
+          underline: true,
+          highlight: true,
+          quote: true,
+          autolink: true
       }
     end