Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-08-02 20:15:24 +02:00
Code Issues Releases Activity

add support for meta tags on share pages (#867)

Browse source
This commit is contained in:
Hayden 2021-12-06 17:14:14 -09:00 • committed by GitHub
parent 5454d2c8b8
commit 5839992c19
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 190 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

51
frontend/pages/shared/recipes/_id.vue
View file

@ -229,12 +229,6 @@
class="mt-10"
:edit="form"
/>
<RecipeAssets
v-if="recipe.settings.showAssets"
v-model="recipe.assets"
:edit="form"
:slug="recipe.slug"
/>
</div>
<RecipeNotes v-model="recipe.notes" :edit="form" />
@ -278,7 +272,7 @@ import {
} from "@nuxtjs/composition-api";
// @ts-ignore
import VueMarkdown from "@adapttive/vue-markdown";
import { useRecipeMeta } from "~/composables/recipes";
// import { useRecipeMeta } from "~/composables/recipes";
import { useStaticRoutes, useUserApi } from "~/composables/api";
import RecipeChips from "~/components/Domain/Recipe/RecipeChips.vue";
import RecipeIngredients from "~/components/Domain/Recipe/RecipeIngredients.vue";
@ -322,26 +316,55 @@ export default defineComponent({
},
});
// @ts-ignore
const { recipeImage } = useStaticRoutes();
const { meta, title } = useMeta();
const recipe = useAsync(async () => {
const { data } = await api.recipes.getShared(id);
if (data) {
if (data && data !== undefined) {
console.log("Computed Meta. RefKey=");
const imageURL = recipeImage(data.slug);
title.value = data.name;
meta.value = [
{ hid: "og:title", property: "og:title", content: data.name },
// @ts-ignore
{
hid: "og:desc",
property: "og:description",
content: data.description,
},
{
hid: "og-image",
property: "og:image",
content: imageURL,
},
// @ts-ignore
{
hid: "twitter:title",
property: "twitter:title",
content: data.name,
},
// @ts-ignore
{
hid: "twitter:desc",
property: "twitter:description",
content: data.description,
},
{ hid: "t-type", name: "twitter:card", content: "summary_large_image" },
];
}
return data;
}
});
// @ts-ignore
const recipeMeta = useRecipeMeta(recipe);
useMeta(recipeMeta);
// @ts-ignore
const { $vuetify } = useContext();
const enableLandscape = computed(() => {
const preferLandscape = recipe?.value?.settings?.landscapeView;
const preferLandscape = recipe.value?.settings?.landscapeView;
const smallScreen = !$vuetify.breakpoint.smAndUp;
if (preferLandscape) {