From 1c938cb8354b1bc75afc76b27378e75b25e2fad7 Mon Sep 17 00:00:00 2001
From: Philipp Fischbeck <pfischbeck@googlemail.com>
Date: Sat, 10 Sep 2022 19:29:21 +0200
Subject: [PATCH] fix: set meta description and image for shared recipes
 (#1635)

---
 .../Domain/Recipe/RecipePage/RecipePage.vue       |  4 ++--
 frontend/composables/recipes/use-recipe-meta.ts   | 15 +++++++++------
 frontend/nuxt.config.js                           |  4 ++--
 frontend/pages/explore/recipes/_groupId/_slug.vue |  5 +++--
 frontend/pages/recipe/_slug/old.vue               |  6 ++----
 frontend/pages/shared/recipes/_id.vue             |  5 +++--
 6 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
index a7667dfbbcd5..e245134f58ca 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
@@ -267,8 +267,8 @@ export default defineComponent({
     /** =============================================================
      * Meta Tags
      */
-    const metaData = useRecipeMeta(ref(props.recipe));
-    useMeta(metaData);
+    const { recipeMeta } = useRecipeMeta();
+    useMeta(recipeMeta(ref(props.recipe)));
 
     const { user } = usePageUser();
 
diff --git a/frontend/composables/recipes/use-recipe-meta.ts b/frontend/composables/recipes/use-recipe-meta.ts
index f8c9400f6425..11d50d0bfd2f 100644
--- a/frontend/composables/recipes/use-recipe-meta.ts
+++ b/frontend/composables/recipes/use-recipe-meta.ts
@@ -1,29 +1,31 @@
 import { Ref } from "@nuxtjs/composition-api";
+import { useStaticRoutes } from "~/composables/api";
 import { Recipe } from "~/types/api-types/recipe";
 
 export interface RecipeMeta {
   title?: string;
-  metaImage?: string;
+  mainImage?: string;
   meta: Array<any>;
   __dangerouslyDisableSanitizers: Array<string>;
   script: Array<any>;
 }
 
-export const useRecipeMeta = (recipe: Ref<Recipe | null>): (() => RecipeMeta) => {
-  return () => {
-    const imageURL = "";
+export const useRecipeMeta = () => {
+  const { recipeImage } = useStaticRoutes();
+  function recipeMeta(recipe: Ref<Recipe | null>): RecipeMeta {
+    const imageURL = recipeImage(recipe?.value?.id ?? "");
     return {
       title: recipe?.value?.name,
       mainImage: imageURL,
       meta: [
         { hid: "og:title", property: "og:title", content: recipe?.value?.name || "Recipe" },
         {
-          hid: "og:desc",
+          hid: "og:description",
           property: "og:description",
           content: recipe?.value?.description ?? "",
         },
         {
-          hid: "og-image",
+          hid: "og:image",
           property: "og:image",
           content: imageURL,
         },
@@ -52,4 +54,5 @@ export const useRecipeMeta = (recipe: Ref<Recipe | null>): (() => RecipeMeta) =>
       ],
     };
   };
+  return { recipeMeta };
 };
diff --git a/frontend/nuxt.config.js b/frontend/nuxt.config.js
index 53a7d030c462..d163f8930029 100644
--- a/frontend/nuxt.config.js
+++ b/frontend/nuxt.config.js
@@ -6,9 +6,9 @@ export default {
       { hid: "og:type", property: "og:type", content: "website" },
       { hid: "og:title", property: "og:title", content: "Mealie" },
       { hid: "og:site_name", property: "og:site_name", content: "Mealie" },
-      { hid: "og:desc", property: "og:description", content: "Mealie is a recipe management app for your kitchen." },
+      { hid: "og:description", property: "og:description", content: "Mealie is a recipe management app for your kitchen." },
       {
-        hid: "og-image",
+        hid: "og:image",
         property: "og:image",
         content:
           "https://raw.githubusercontent.com/hay-kot/mealie/dev/frontend/public/img/icons/android-chrome-512x512.png",
diff --git a/frontend/pages/explore/recipes/_groupId/_slug.vue b/frontend/pages/explore/recipes/_groupId/_slug.vue
index 9de570fa92c2..10e7f1d44161 100644
--- a/frontend/pages/explore/recipes/_groupId/_slug.vue
+++ b/frontend/pages/explore/recipes/_groupId/_slug.vue
@@ -23,6 +23,7 @@ export default defineComponent({
     const api = usePublicApi();
 
     const { meta, title } = useMeta();
+    const { recipeMeta } = useRecipeMeta();
 
     const recipe = useAsync(async () => {
       const { data, error } = await api.explore.recipe(groupId, slug);
@@ -34,8 +35,8 @@ export default defineComponent({
 
       if (data) {
         title.value = data?.name || "";
-        const metaObj = useRecipeMeta(ref(data));
-        meta.value = metaObj().meta;
+        const metaObj = recipeMeta(ref(data));
+        meta.value = metaObj.meta;
       }
 
       return data;
diff --git a/frontend/pages/recipe/_slug/old.vue b/frontend/pages/recipe/_slug/old.vue
index ba3e7ba70ff2..de7717858ad8 100644
--- a/frontend/pages/recipe/_slug/old.vue
+++ b/frontend/pages/recipe/_slug/old.vue
@@ -803,10 +803,8 @@ export default defineComponent({
 
     // ===============================================================
     // Metadata
-
-    const metaData = useRecipeMeta(recipe);
-
-    useMeta(metaData);
+    const { recipeMeta } = useRecipeMeta();
+    useMeta(recipeMeta(recipe));
 
     const hasFoodOrUnit = computed(() => {
       if (!recipe.value) {
diff --git a/frontend/pages/shared/recipes/_id.vue b/frontend/pages/shared/recipes/_id.vue
index c8ad9e74387e..e338e7a7de2c 100644
--- a/frontend/pages/shared/recipes/_id.vue
+++ b/frontend/pages/shared/recipes/_id.vue
@@ -22,6 +22,7 @@ export default defineComponent({
     const api = usePublicApi();
 
     const { meta, title } = useMeta();
+    const { recipeMeta } = useRecipeMeta();
 
     const recipe = useAsync(async () => {
       const { data, error } = await api.shared.getShared(recipeId);
@@ -33,8 +34,8 @@ export default defineComponent({
 
       if (data) {
         title.value = data?.name || "";
-        const metaObj = useRecipeMeta(ref(data));
-        meta.value = metaObj().meta;
+        const metaObj = recipeMeta(ref(data));
+        meta.value = metaObj.meta;
       }
 
       return data;