feat(recipe): add diagonal fractions to recipe ingredients

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
   "eslint.validate": ["vue", "javascript", "javascriptreact"],
-  "editor.formatOnSave": false,
-  "vetur.validation.template": false,
+  "editor.formatOnSave": true,
+  "vetur.validation.template": true,
   "files.exclude": {
     "**/node_modules/**": true,
     "**/dist/**": true,

assets/scss/custom.scss

@@ -23,4 +23,6 @@
   }
 }
 
+@import 'utility-opentype';
+
 @import '~/assets/css/print.css' print;

components/Recipe/Recipe.vue

@@ -52,7 +52,7 @@
           :key="ingredient"
           class="list-group-item"
         >
-          {{ ingredient }}
+          <span v-html="splitFraction(ingredient)" />
         </li>
       </ol>
     </section>
@@ -132,6 +132,35 @@ export default {
       return recipe;
     },
   },
+  methods: {
+    splitFraction(value, sep = '/') {
+      if (!value) return '';
+      value = value.toString();
+      const split = value.split(sep);
+      if (Array.isArray(split) && split.length >= 2) {
+        const combined = split.reduce((accumulator, currentValue) => {
+          const last = accumulator.slice(-1);
+
+          if (parseInt(last) && parseInt(currentValue)) {
+            return (
+              accumulator.substring(0, accumulator.length - 1) +
+              '<span class="frac">' +
+              last +
+              '/' +
+              currentValue.charAt(0) +
+              '</span>' +
+              currentValue.substr(1)
+            );
+          } else {
+            return accumulator + currentValue;
+          }
+        });
+
+        return combined;
+      }
+      return value;
+    },
+  },
   head() {
     return {
       title: this.recipe.name,

package.json

@@ -53,7 +53,8 @@
     "nuxt-i18n": "6.4.1",
     "nuxt-webfontloader": "1.1.0",
     "quicklink": "1.0.1",
-    "quill": "1.3.7"
+    "quill": "1.3.7",
+    "utility-opentype": "^0.1.4"
   },
   "devDependencies": {
     "@babel/core": "7.7.7",

test/__snapshots__/Recipe.spec.js.snap

@@ -12,36 +12,16 @@ exports[`Recipe renders properly 1`] = `
   <section>
     <h2>Ingredients:</h2>
     <ol class=\\"list-group-flush  pl-0\\">
-      <li class=\\"list-group-item\\">
-        1 small onion, diced
-      </li>
-      <li class=\\"list-group-item\\">
-        2 cloves garlic, minced
-      </li>
-      <li class=\\"list-group-item\\">
-        2 carrots, diced small
-      </li>
-      <li class=\\"list-group-item\\">
-        2 stalks celery, diced small
-      </li>
-      <li class=\\"list-group-item\\">
-        2 large cans (28 oz. each) peeled Italian Roma tomatoes
-      </li>
-      <li class=\\"list-group-item\\">
-        1 large bunch fresh basil, washed
-      </li>
-      <li class=\\"list-group-item\\">
-        2 tbsp extra virgin olive oil
-      </li>
-      <li class=\\"list-group-item\\">
-        1 lb. spaghetti pasta
-      </li>
-      <li class=\\"list-group-item\\">
-        Salt to taste
-      </li>
-      <li class=\\"list-group-item\\">
-        Freshly grated Parmigiano-Reggiano cheese
-      </li>
+      <li class=\\"list-group-item\\"><span>1 small onion, diced</span></li>
+      <li class=\\"list-group-item\\"><span>2 cloves garlic, minced</span></li>
+      <li class=\\"list-group-item\\"><span>2 carrots, diced small</span></li>
+      <li class=\\"list-group-item\\"><span>2 stalks celery, diced small</span></li>
+      <li class=\\"list-group-item\\"><span>2 large cans (28 oz. each) peeled Italian Roma tomatoes</span></li>
+      <li class=\\"list-group-item\\"><span>1 large bunch fresh basil, washed</span></li>
+      <li class=\\"list-group-item\\"><span>2 tbsp extra virgin olive oil</span></li>
+      <li class=\\"list-group-item\\"><span>1 lb. spaghetti pasta</span></li>
+      <li class=\\"list-group-item\\"><span>Salt to taste</span></li>
+      <li class=\\"list-group-item\\"><span>Freshly grated Parmigiano-Reggiano cheese</span></li>
     </ol>
   </section>
   <section>