Add strikethrough of ingredients

CHANGELOG.md

@@ -15,6 +15,8 @@
   [#1866](https://github.com/nextcloud/cookbook/pull/1866) @seyfeb
 - Allow editing existing recipe as new (see [1867](https://github.com/nextcloud/cookbook/issues/1867)) 
   [#1866](https://github.com/nextcloud/cookbook/pull/1866) @seyfeb
+- Replace checkmark with strikethrough for recipe ingredients
+  [#1910](https://github.com/nextcloud/cookbook/pull/1910) @j0hannesr0th
 
 ### Fixed
 - Fix translation string to not contain quotes

src/components/RecipeView/RecipeIngredient.vue

@@ -6,9 +6,8 @@
         }"
         @click="toggleDone"
     >
-        <div class="checkmark" :class="{ done: isDone }">✔</div>
         <div class="ingredient">
-            <VueShowdown :markdown="displayIngredient" />
+            <VueShowdown :markdown="formattedIngredient" flavor="github" />
         </div>
         <span v-if="!ingredientHasCorrectSyntax" class="icon-error" />
     </li>
@@ -53,6 +52,12 @@ const displayIngredient = computed(() => {
     }
     return props.ingredient;
 });
+
+const formattedIngredient = computed(() =>
+    isDone.value
+        ? `~~${displayIngredient.value}~~`
+        : `**${displayIngredient.value}**`,
+);
 </script>
 
 <script>
@@ -74,37 +79,12 @@ li {
     list-style-type: none;
 }
 
-.unindented {
-    position: relative;
-    left: -1.25em;
-}
-
-li > .checkmark {
-    display: inline;
-    visibility: hidden;
-}
-
-li > .done {
-    visibility: visible;
-}
-
-li:hover > .checkmark {
-    color: var(--color-primary-element);
-    opacity: 0.5;
-    visibility: visible;
-}
-
 li > .ingredient {
     display: inline;
     padding-left: 1em;
-    margin-left: 0.3em;
     text-indent: -1em;
 }
 
-.ingredient:deep(a) {
-    text-decoration: underline;
-}
-
 li > span.icon-error {
     margin-left: 0.3em;
 }