Cutlery/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-09 03:04:54 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix: set meta description and image for shared recipes (#1635)

Browse Source
This commit is contained in:
Philipp Fischbeck 2022-09-10 19:29:21 +02:00 committed by GitHub
parent 25c40b8abf
commit 1c938cb835
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 21 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
View File

@ -267,8 +267,8 @@ export default defineComponent({
/** ============================================================= /** =============================================================
* Meta Tags * Meta Tags
*/ */
const metaData = useRecipeMeta(ref(props.recipe)); const { recipeMeta } = useRecipeMeta();
useMeta(metaData); useMeta(recipeMeta(ref(props.recipe)));
const { user } = usePageUser(); const { user } = usePageUser();

15
frontend/composables/recipes/use-recipe-meta.ts
View File

@ -1,29 +1,31 @@
import { Ref } from "@nuxtjs/composition-api"; import { Ref } from "@nuxtjs/composition-api";
import { useStaticRoutes } from "~/composables/api";
import { Recipe } from "~/types/api-types/recipe"; import { Recipe } from "~/types/api-types/recipe";
export interface RecipeMeta { export interface RecipeMeta {
title?: string; title?: string;
metaImage?: string; mainImage?: string;
meta: Array<any>; meta: Array<any>;
__dangerouslyDisableSanitizers: Array<string>; __dangerouslyDisableSanitizers: Array<string>;
script: Array<any>; script: Array<any>;
} }
export const useRecipeMeta = (recipe: Ref<Recipe | null>): (() => RecipeMeta) => { export const useRecipeMeta = () => {
return () => { const { recipeImage } = useStaticRoutes();
const imageURL = ""; function recipeMeta(recipe: Ref<Recipe | null>): RecipeMeta {
const imageURL = recipeImage(recipe?.value?.id ?? "");
return { return {
title: recipe?.value?.name, title: recipe?.value?.name,
mainImage: imageURL, mainImage: imageURL,
meta: [ meta: [
{ hid: "og:title", property: "og:title", content: recipe?.value?.name || "Recipe" }, { hid: "og:title", property: "og:title", content: recipe?.value?.name || "Recipe" },
{ {
hid: "og:desc", hid: "og:description",
property: "og:description", property: "og:description",
content: recipe?.value?.description ?? "", content: recipe?.value?.description ?? "",
}, },
{ {
hid: "og-image", hid: "og:image",
property: "og:image", property: "og:image",
content: imageURL, content: imageURL,
}, },
@ -52,4 +54,5 @@ export const useRecipeMeta = (recipe: Ref<Recipe | null>): (() => RecipeMeta) =>
], ],
}; };
}; };
return { recipeMeta };
}; };

4
frontend/nuxt.config.js
View File

@ -6,9 +6,9 @@ export default {
{ hid: "og:type", property: "og:type", content: "website" }, { hid: "og:type", property: "og:type", content: "website" },
{ hid: "og:title", property: "og:title", content: "Mealie" }, { hid: "og:title", property: "og:title", content: "Mealie" },
{ hid: "og:site_name", property: "og:site_name", 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", property: "og:image",
content: content:
"https://raw.githubusercontent.com/hay-kot/mealie/dev/frontend/public/img/icons/android-chrome-512x512.png", "https://raw.githubusercontent.com/hay-kot/mealie/dev/frontend/public/img/icons/android-chrome-512x512.png",

5
frontend/pages/explore/recipes/_groupId/_slug.vue
View File

@ -23,6 +23,7 @@ export default defineComponent({
const api = usePublicApi(); const api = usePublicApi();
const { meta, title } = useMeta(); const { meta, title } = useMeta();
const { recipeMeta } = useRecipeMeta();
const recipe = useAsync(async () => { const recipe = useAsync(async () => {
const { data, error } = await api.explore.recipe(groupId, slug); const { data, error } = await api.explore.recipe(groupId, slug);
@ -34,8 +35,8 @@ export default defineComponent({
if (data) { if (data) {
title.value = data?.name || ""; title.value = data?.name || "";
const metaObj = useRecipeMeta(ref(data)); const metaObj = recipeMeta(ref(data));
meta.value = metaObj().meta; meta.value = metaObj.meta;
} }
return data; return data;

6
frontend/pages/recipe/_slug/old.vue
View File

@ -803,10 +803,8 @@ export default defineComponent({
// =============================================================== // ===============================================================
// Metadata // Metadata
const { recipeMeta } = useRecipeMeta();
const metaData = useRecipeMeta(recipe); useMeta(recipeMeta(recipe));
useMeta(metaData);
const hasFoodOrUnit = computed(() => { const hasFoodOrUnit = computed(() => {
if (!recipe.value) { if (!recipe.value) {

5
frontend/pages/shared/recipes/_id.vue
View File

@ -22,6 +22,7 @@ export default defineComponent({
const api = usePublicApi(); const api = usePublicApi();
const { meta, title } = useMeta(); const { meta, title } = useMeta();
const { recipeMeta } = useRecipeMeta();
const recipe = useAsync(async () => { const recipe = useAsync(async () => {
const { data, error } = await api.shared.getShared(recipeId); const { data, error } = await api.shared.getShared(recipeId);
@ -33,8 +34,8 @@ export default defineComponent({
if (data) { if (data) {
title.value = data?.name || ""; title.value = data?.name || "";
const metaObj = useRecipeMeta(ref(data)); const metaObj = recipeMeta(ref(data));
meta.value = metaObj().meta; meta.value = metaObj.meta;
} }
return data; return data;