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

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

View File

@ -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();

View File

@ -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 };
};

View File

@ -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",

View File

@ -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;

View File

@ -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) {

View File

@ -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;