Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-08-06 05:55:23 +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

41
frontend/pages/recipe/_slug/index.vue
View file

@ -271,12 +271,14 @@
class="mt-10"
:edit="form"
/>
<RecipeAssets
v-if="recipe.settings.showAssets"
v-model="recipe.assets"
:edit="form"
:slug="recipe.slug"
/>
<client-only>
<RecipeAssets
v-if="recipe.settings.showAssets"
v-model="recipe.assets"
:edit="form"
:slug="recipe.slug"
/>
</client-only>
</div>
</v-col>
<v-divider v-if="$vuetify.breakpoint.mdAndUp" class="my-divider" :vertical="true"></v-divider>
@ -347,12 +349,14 @@
class="mt-10"
:edit="form"
/>
<RecipeAssets
v-if="recipe.settings.showAssets"
v-model="recipe.assets"
:edit="form"
:slug="recipe.slug"
/>
<client-only>
<RecipeAssets
v-if="recipe.settings.showAssets"
v-model="recipe.assets"
:edit="form"
:slug="recipe.slug"
/>
</client-only>
</div>
<RecipeNotes v-model="recipe.notes" :edit="form" />
@ -449,7 +453,6 @@ import RecipeChips from "~/components/Domain/Recipe/RecipeChips.vue";
import RecipeIngredients from "~/components/Domain/Recipe/RecipeIngredients.vue";
import RecipeRating from "~/components/Domain/Recipe/RecipeRating.vue";
import RecipeTimeCard from "~/components/Domain/Recipe/RecipeTimeCard.vue";
import RecipeAssets from "~/components/Domain/Recipe/RecipeAssets.vue";
import RecipeNutrition from "~/components/Domain/Recipe/RecipeNutrition.vue";
import RecipeInstructions from "~/components/Domain/Recipe/RecipeInstructions.vue";
import RecipeNotes from "~/components/Domain/Recipe/RecipeNotes.vue";
@ -468,7 +471,11 @@ export default defineComponent({
components: {
draggable,
RecipeActionMenu,
RecipeAssets,
RecipeAssets: () => {
if (process.client) {
return import(/* webpackChunkName: "RecipeAssets" */ "~/components/Domain/Recipe/RecipeAssets.vue");
}
},
RecipeCategoryTagSelector,
RecipeChips,
RecipeComments,
@ -519,9 +526,6 @@ export default defineComponent({
}
});
// ===============================================================
// Guest Mode
// ===============================================================
// Check Before Leaving
@ -544,7 +548,7 @@ export default defineComponent({
const { recipe, loading, fetchRecipe } = useRecipe(slug);
// Manage a deep copy of the recipe so we can detect if changes have occured and inform
// Manage a deep copy of the recipe so we can detect if changes have occurred and inform
// the user if they try to navigate away from the page without saving.
const originalRecipe = ref<Recipe | null>(null);
@ -769,4 +773,3 @@ export default defineComponent({
});
</script>
<style scoped></style>

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