Add names of recipes to internal references

CHANGELOG.md

@@ -3,6 +3,8 @@
 ### Added
 - Create service class for downloading and extracting JSON
   [#553](https://github.com/nextcloud/cookbook/pull/553) @christianlupus
+- Show recipe titles for internal references
+  [#1063](https://github.com/nextcloud/cookbook/pull/1063) @christianlupus
 
 ### Changed
 - Extracted user folder handling into its own helper class

src/components/RecipeIngredient.vue

@@ -7,7 +7,6 @@
         @click="toggleDone"
     >
         <div class="checkmark" :class="{ done: isDone }">✔</div>
-        <!-- eslint-disable-next-line vue/no-v-html -->
         <div class="ingredient">
             <VueShowdown :markdown="displayIngredient" />
         </div>
@@ -92,4 +91,8 @@ li > .ingredient {
     margin-left: 0.3em;
     text-indent: -1em;
 }
+
+.ingredient >>> a {
+    text-decoration: underline;
+}
 </style>

src/components/RecipeInstruction.vue

@@ -1,5 +1,4 @@
 <template>
-    <!-- eslint-disable-next-line vue/no-v-html -->
     <li :class="{ done: isDone }" @click="toggleDone">
         <VueShowdown :markdown="instruction" class="markdown-instruction" />
     </li>

src/components/RecipeTool.vue

@@ -1,6 +1,7 @@
 <template>
-    <!-- eslint-disable-next-line vue/no-v-html -->
-    <li v-html="tool"></li>
+    <li>
+        <VueShowdown :markdown="tool" class="markdown-tool" />
+    </li>
 </template>
 
 <script>
@@ -19,4 +20,8 @@ export default {
 li {
     margin-left: 1.25em;
 }
+
+.markdown-tool >>> a {
+    text-decoration: underline;
+}
 </style>

src/components/RecipeView.vue

@@ -51,7 +51,7 @@
                     </p>
 
                     <VueShowdown
-                        :markdown="recipe.description"
+                        :markdown="parsedDescription"
                         class="markdown-description"
                     />
                     <p v-if="$store.state.recipe.url">
@@ -95,12 +95,12 @@
             <section>
                 <aside>
                     <section>
-                        <h3 v-if="recipe.ingredients.length">
+                        <h3 v-if="parsedIngredients.length">
                             {{ t("cookbook", "Ingredients") }}
                         </h3>
-                        <ul v-if="recipe.ingredients.length">
+                        <ul v-if="parsedIngredients.length">
                             <RecipeIngredient
-                                v-for="(ingredient, idx) in recipe.ingredients"
+                                v-for="(ingredient, idx) in parsedIngredients"
                                 :key="'ingr' + idx"
                                 :ingredient="ingredient"
                                 :recipe-ingredients-have-subgroups="
@@ -111,12 +111,12 @@
                     </section>
 
                     <section>
-                        <h3 v-if="recipe.tools.length">
+                        <h3 v-if="parsedTools.length">
                             {{ t("cookbook", "Tools") }}
                         </h3>
-                        <ul v-if="recipe.tools.length">
+                        <ul v-if="parsedTools.length">
                             <RecipeTool
-                                v-for="(tool, idx) in recipe.tools"
+                                v-for="(tool, idx) in parsedTools"
                                 :key="'tool' + idx"
                                 :tool="tool"
                             />
@@ -252,11 +252,11 @@
                         </ul>
                     </section>
                 </aside>
-                <main v-if="recipe.instructions.length">
+                <main v-if="parsedInstructions.length">
                     <h3>{{ t("cookbook", "Instructions") }}</h3>
                     <ol class="instructions">
                         <RecipeInstruction
-                            v-for="(instruction, idx) in recipe.instructions"
+                            v-for="(instruction, idx) in parsedInstructions"
                             :key="'instr' + idx"
                             :instruction="instruction"
                         />
@@ -272,6 +272,7 @@ import moment from "@nextcloud/moment"
 
 import api from "cookbook/js/api-interface"
 import helpers from "cookbook/js/helper"
+import normalizeMarkdown from "cookbook/js/title-rename"
 
 import RecipeImages from "./RecipeImages.vue"
 import RecipeIngredient from "./RecipeIngredient.vue"
@@ -311,6 +312,10 @@ export default {
     data() {
         return {
             headerPrefix: "## ",
+            parsedDescription: "",
+            parsedIngredients: [],
+            parsedInstructions: [],
+            parsedTools: [],
         }
     },
     computed: {
@@ -329,22 +334,27 @@ export default {
                 nutrition: null,
             }
 
+            if (this.$store.state.recipe === null) {
+                // console.log("Recipe is null")
+                return recipe
+            }
+
             if (this.$store.state.recipe.description) {
-                recipe.description = this.convertRecipeReferences(
-                    window.escapeHTML(this.$store.state.recipe.description)
+                recipe.description = helpers.escapeHTML(
+                    this.$store.state.recipe.description
                 )
             }
 
             if (this.$store.state.recipe.recipeIngredient) {
                 recipe.ingredients = Object.values(
                     this.$store.state.recipe.recipeIngredient
-                ).map((i) => this.convertRecipeReferences(window.escapeHTML(i)))
+                ).map((i) => helpers.escapeHTML(i))
             }
 
             if (this.$store.state.recipe.recipeInstructions) {
                 recipe.instructions = Object.values(
                     this.$store.state.recipe.recipeInstructions
-                ).map((i) => this.convertRecipeReferences(window.escapeHTML(i)))
+                ).map((i) => helpers.escapeHTML(i))
             }
 
             if (this.$store.state.recipe.keywords) {
@@ -385,7 +395,7 @@ export default {
 
             if (this.$store.state.recipe.tool) {
                 recipe.tools = this.$store.state.recipe.tool.map((i) =>
-                    this.convertRecipeReferences(window.escapeHTML(i))
+                    helpers.escapeHTML(i)
                 )
             }
 
@@ -453,6 +463,77 @@ export default {
             )
         },
     },
+    watch: {
+        recipe(r) {
+            // console.log('Recipe has been updated')
+            if (r) {
+                // console.log("Recipe", r)
+
+                if (r.description) {
+                    this.parsedDescription = t("cookbook", "Loading…")
+                    normalizeMarkdown(r.description).then((x) => {
+                        this.parsedDescription = x
+                    })
+                } else {
+                    this.parsedDescription = ""
+                }
+
+                if (r.ingredients) {
+                    this.parsedIngredients = r.ingredients.map(() =>
+                        t("cookbook", "Loading…")
+                    )
+                    r.ingredients.forEach((ingredient, idx) => {
+                        normalizeMarkdown(ingredient)
+                            .then((x) => {
+                                this.parsedIngredients.splice(idx, 1, x)
+                            })
+                            .catch((ex) => {
+                                // eslint-disable-next-line no-console
+                                console.log(ex)
+                            })
+                    })
+                } else {
+                    this.parsedIngredients = []
+                }
+
+                if (r.instructions) {
+                    this.parsedInstructions = r.instructions.map(() =>
+                        t("cookbook", "Loading…")
+                    )
+                    r.instructions.forEach((instruction, idx) => {
+                        normalizeMarkdown(instruction)
+                            .then((x) => {
+                                this.parsedInstructions.splice(idx, 1, x)
+                            })
+                            .catch((ex) => {
+                                // eslint-disable-next-line no-console
+                                console.log(ex)
+                            })
+                    })
+                } else {
+                    this.parsedInstructions = []
+                }
+
+                if (r.tools) {
+                    this.parsedTools = r.tools.map(() =>
+                        t("cookbook", "Loading…")
+                    )
+                    r.tools.forEach((tool, idx) => {
+                        normalizeMarkdown(tool)
+                            .then((x) => {
+                                this.parsedTools.splice(idx, 1, x)
+                            })
+                            .catch((ex) => {
+                                // eslint-disable-next-line no-console
+                                console.log(ex)
+                            })
+                    })
+                } else {
+                    this.parsedTools = []
+                }
+            }
+        },
+    },
     mounted() {
         this.setup()
         // Register data load method hook for access from the controls components
@@ -462,14 +543,6 @@ export default {
         })
     },
     methods: {
-        convertRecipeReferences(text) {
-            const re = /(^|\s|[,._+&?!-])#r\/(\d+)(?=$|\s|[.,_+&?!-])/g
-            const converted = text.replace(
-                re,
-                `$1<a class="recipe-reference-inline" href="${this.$window.baseUrl}/#/recipe/$2">#$2</a>`
-            )
-            return converted
-        },
         isNullOrEmpty(str) {
             return !str || (typeof str === "string" && str.trim().length === 0)
         },

src/guest.js

@@ -9,8 +9,6 @@ import { generateUrl } from "@nextcloud/router"
 
 import Vue from "vue"
 
-import api from "cookbook/js/api-interface"
-
 import store from "./store"
 
 import AppInvalidGuest from "./components/AppInvalidGuest.vue"
@@ -30,7 +28,6 @@ if (__webpack_use_dev_server__ || false) {
 
     // eslint-disable-next-line no-param-reassign
     window.baseUrl = generateUrl("apps/cookbook")
-    api.init(window.baseUrl)
 
     // Also make the injections available in Vue components
     Vue.prototype.$window = window

src/js/api-interface.js

@@ -1,11 +1,8 @@
 import axios from "@nextcloud/axios"
 
-let baseUrl
-// const baseUrl = globalThis.window.baseUrl
+import { generateUrl } from "@nextcloud/router"
 
-function init($baseurl) {
-    baseUrl = $baseurl
-}
+const baseUrl = generateUrl("apps/cookbook")
 
 function createNewRecipe(recipe) {
     return axios({
@@ -107,7 +104,6 @@ function reindex() {
 }
 
 export default {
-    init,
     recipes: {
         create: createNewRecipe,
         getAll: getAllRecipes,

src/js/title-rename.js

@@ -0,0 +1,85 @@
+import api from "cookbook/js/api-interface"
+
+import { generateUrl } from "@nextcloud/router"
+
+const baseUrl = generateUrl("apps/cookbook")
+
+function extractAllRecipeLinkIds(content) {
+    const re = /(?:^|[^#])#r\/([0-9]+)/g
+    let ret = []
+    let matches
+    for (
+        matches = re.exec(content);
+        matches !== null;
+        matches = re.exec(content)
+    ) {
+        ret.push(matches[1])
+    }
+
+    // Make the ids unique, see https://stackoverflow.com/a/14438954/882756
+    function onlyUnique(value, index, self) {
+        return self.indexOf(value) === index
+    }
+    ret = ret.filter(onlyUnique)
+
+    return ret
+}
+
+async function getRecipesFromLinks(linkIds) {
+    return Promise.all(
+        linkIds.map(async (x) => {
+            let recipe
+            try {
+                recipe = await api.recipes.get(x)
+            } catch (ex) {
+                recipe = null
+            }
+            return recipe
+        })
+    )
+}
+
+function cleanUpRecipeList(recipes) {
+    return recipes.filter((r) => r !== null).map((x) => x.data)
+}
+
+function getRecipeUrl(id) {
+    return `${baseUrl}/#/recipe/${id}`
+}
+
+function insertMarkdownLinks(content, recipes) {
+    let ret = content
+    recipes.forEach((r) => {
+        const { id } = r
+
+        // Replace link urls in dedicated links (like [this example](#r/123))
+        ret = ret.replace(`](${id})`, `](${getRecipeUrl(id)})`)
+
+        // Replace plain references with recipe name
+        const rePlain = RegExp(
+            `(^|\\s|[,._+&?!-])#r/${id}($|\\s|[,._+&?!-])`,
+            "g"
+        )
+        // const re = /(^|\s|[,._+&?!-])#r\/(\d+)(?=$|\s|[.,_+&?!-])/g
+        ret = ret.replace(
+            rePlain,
+            `$1[${r.name} (\\#r/${id})](${getRecipeUrl(id)})$2`
+        )
+    })
+    return ret
+}
+
+async function normalizeNamesMarkdown(content) {
+    // console.log(`Content: ${content}`)
+    const linkIds = extractAllRecipeLinkIds(content)
+    let recipes = await getRecipesFromLinks(linkIds)
+    recipes = cleanUpRecipeList(recipes)
+    // console.log("List of recipes", recipes)
+
+    const markdown = insertMarkdownLinks(content, recipes)
+    // console.log("Formatted markdown:", markdown)
+
+    return markdown
+}
+
+export default normalizeNamesMarkdown

src/main.js

@@ -12,7 +12,6 @@ import { generateUrl } from "@nextcloud/router"
 
 import Vue from "vue"
 
-import api from "cookbook/js/api-interface"
 import helpers from "cookbook/js/helper"
 
 import router from "./router"
@@ -35,7 +34,6 @@ if (__webpack_use_dev_server__ || false) {
 
     // eslint-disable-next-line no-param-reassign
     window.baseUrl = generateUrl("apps/cookbook")
-    api.init(window.baseUrl)
 
     helpers.useRouter(router)